wix-style-react/src/CalendarPanel/docs/CalendarPanel.demo.js

wix-style-react

import React from 'react';
import CalendarPanel from '..';
import CalendarPanelFooter from '../../CalendarPanelFooter';

export default () => {
  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')}
        />
      )}
    />
  );
};