wix-style-react/src/CalendarPanelFooter/docs/CalendarPanelFooter.examples.js

wix-style-react

export const _actions = `
<CalendarPanelFooter
  primaryActionLabel="Apply"
  secondaryActionLabel="Cancel"
/>;
`;

export const _disabledAction = `
<CalendarPanelFooter
  primaryActionDisabled
  primaryActionLabel="Apply"
  secondaryActionLabel="Cancel"
/>;
`;

export const _selectedDays = `
<StorybookComponents.Stack flexDirection="column">
  <CalendarPanelFooter
    primaryActionLabel="Apply"
    secondaryActionLabel="Cancel"
    dateToString={date => date.toLocaleDateString('en-US')}
    selectedDays={new Date()}
  />
  <CalendarPanelFooter
    primaryActionLabel="Apply"
    secondaryActionLabel="Cancel"
    dateToString={date => date.toLocaleDateString('en-US')}
    selectedDays={{
      from: new Date(),
      to: new Date(Date.now() + 7 * 1000 * 60 * 60 * 24),
    }}
  />
</StorybookComponents.Stack>;
`;

export const _calendarPanel = `
() => {
  const [selectedValue, setSelectedValue] = React.useState(new Date());
  const today = new Date();

  const getDateDaysAgo = days =>
    new Date(Date.now() - days * 1000 * 60 * 60 * 24);

  const presets = [
    {
      id: 0,
      selectedDays: getDateDaysAgo(1),
      value: 'Yesterday',
    },
    {
      id: 1,
      selectedDays: today,
      value: 'Today',
    },
    {
      id: 2,
      selectedDays: {
        from: getDateDaysAgo(7),
        to: today,
      },
      value: 'Last 7 Days',
    },
    {
      id: 3,
      selectedDays: {
        from: getDateDaysAgo(30),
        to: today,
      },
      value: 'Last 30 Days',
    },
    {
      id: 4,
      selectedDays: {
        from: getDateDaysAgo(90),
        to: today,
      },
      value: 'Last 90 Days',
    },
  ];
  return (
    <CalendarPanel
      presets={presets}
      onChange={value => setSelectedValue(value)}
      value={selectedValue}
      footer={() => (
        <CalendarPanelFooter
          primaryActionLabel="Submit"
          secondaryActionLabel="Cancel"
          selectedDays={selectedValue}
          dateToString={date => date.toLocaleDateString('en-US')}
        />
      )}
      autoFocus={false}
    />
  );
};
`;