Components

The component library is recommended to be used by all plugin developers to reduce the need to re-design and develop base common UI functionality.

https://components.dev.portal.restaurant/

Usage Example

import * as React from 'react'
import { PlatformLogo } from '@deliveryhero/vendor-portal-components'

class Main extends React.Component<any> {
  render() {
    return (
      <PlatformLogo width={80} platformKey="MJM_AT" />
    );
  }

}

export default Main;

withDatePicker function

withDatePicker is a higher order component that allows you to create date pickers without much hassle.

Signature of withDatePicker:

function withDatePicker(
  dateRanges: UtilsDateRange.IDateRange[],
  defaultDateRange: UtilsDateRange.IDateRange,
  limits?: IDateLimit
): ((Component: any): any)

dateRanges defines the available dropdowns. This field can be populated by PredefinedDateRanges. defaultDateRange defines the preselected value. This field can be populated by PredefinedDateRanges limits defines the date that can be selected.

Signature of IDateLimit:

interface IDateLimit {
  from: {
    max: Date
  },
  to: {
    max: Date
  }
}

Example:

import * as React from 'react';
import { withDatePicker, PredefinedDateRanges, createCustomDateRange } from '@deliveryhero/vendor-portal-components'
import styled from 'styled-components';

const dateFormatter = (date) => `${date.getDate()}/${date.getMonth() + 1}/${date.getFullYear()}`

const SomeUglyButton = styled.button``;

const MyComponent = ({DateSelectorDialog, showDatePicker, selectedDateRange}) => (
  <React.Fragment>
    <SomeUglyButton onClick={() => showDatePicker()}>
      {`${dateFormatter(selectedDateRange.from)} - ${dateFormatter(selectedDateRange.to)}`}
    </SomeUglyButton>
    <DateSelectorDialog translate={word => word} />
  </React.Fragment>
)

export default withDatePicker(
  [ PredefinedDateRanges.CURRENT_DAY, createCustomDateRange(25) ],
  PredefinedDateRanges.CURRENT_DAY,
  {
    from: {
      max: new Date()
    },
    to: {
      max: new Date()
    }
  }
)(MyComponent);

As demonstrated in the example, in order to create a nice looking date picker, there are couple of steps to follow. Firstly, create a condition to show the date picker. Secondly, use the injected DateSelectorDialog component. Last but not least, access the chosen date with injected selectedDateRange object.