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

wix-style-react

export const _presets = `
() => {
  const [selectedValue, setSelectedValue] = React.useState();

  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}
      autoFocus={false}
    />
  );
};
`;

export const _footer = `
<CalendarPanel
  value={new Date()}
  footer={({ selectedDays }) => (
    <CalendarPanelFooter
      primaryActionLabel="Submit"
      secondaryActionLabel="Cancel"
      selectedDays={selectedDays}
      dateToString={date => date.toLocaleDateString('en-US')}
    />
  )}
  autoFocus={false}
/>;
`;

export const _numberOfMonths = `
() => {
  const presets = [
    {
      id: 0,
      value: 'Last 7 Days',
    },
    {
      id: 1,
      value: 'Last Month',
    },
    {
      id: 2,
      value: 'Next 2 days',
    },
    {
      id: 3,
      value: 'Next 3 days',
    },
    {
      id: 4,
      value: 'Next 5 days',
    },
  ];

  return (
    <StorybookComponents.Stack flexDirection="column">
      <StorybookComponents.Stack>
        <CalendarPanel numOfMonths={1} presets={presets} autoFocus={false} />
      </StorybookComponents.Stack>
      <StorybookComponents.Stack>
        <CalendarPanel numOfMonths={2} presets={presets} autoFocus={false} />
      </StorybookComponents.Stack>
    </StorybookComponents.Stack>
  );
};
`;

export const _monthAndYearSelection = `
<CalendarPanel showMonthDropdown showYearDropdown autoFocus={false} />;
`;

export const _excludingDates = `
<StorybookComponents.Stack flexDirection="column">
  <CalendarPanel filterDate={date => date < new Date()} autoFocus={false} />
  <CalendarPanel excludePastDates autoFocus={false} />
</StorybookComponents.Stack>;
`;

export const _localization = `
<CalendarPanel
  locale="ko"
  presets={[{ value: "I'm still English" }]}
  footer={() => (
    <CalendarPanelFooter
      secondaryActionLabel="Me too"
      primaryActionLabel="Me as well"
      selectedDays={new Date()}
      dateToString={date => date.toLocaleDateString('en-US')}
    />
  )}
  autoFocus={false}
/>;
`;

export const _trigger = `
() => {
  const today = new Date();
  const dayInMilliseconds = 1000 * 60 * 60 * 24;
  const getDateDaysAgo = days =>
    new Date(Date.now() - days * dayInMilliseconds);
  const getShortDate = date => date.toLocaleDateString();
  const oneDayChartData = [
    {
      value: Math.floor(Math.random() * 1000),
      label: '00:00',
    },
    {
      value: Math.floor(Math.random() * 1000),
      label: '23:59',
    },
  ];

  const [currentRange, setCurrentRange] = React.useState(today);

  const [analyticsData, setAnalyticsData] = React.useState({
    chartData: oneDayChartData,
    range: today,
    rangeText: getShortDate(today),
  });
  const [panelShown, setPanelShown] = React.useState(false);

  const presets = [
    {
      id: 0,
      selectedDays: {
        from: getDateDaysAgo(7),
        to: today,
      },
      value: 'Last 7 Days',
    },
    {
      id: 1,
      selectedDays: {
        from: getDateDaysAgo(30),
        to: today,
      },
      value: 'Last 30 Days',
    },
    {
      id: 2,
      selectedDays: {
        from: getDateDaysAgo(90),
        to: today,
      },
      value: 'Last 90 Days',
    },
  ];

  const getRangeOfDates = (startDate, endDate) => {
    const diffInDays = Math.ceil(
      (endDate.getTime() - startDate.getTime()) / dayInMilliseconds + 1,
    );
    return new Array(diffInDays)
      .fill(0)
      .map(
        (_, index) => new Date(startDate.getTime() + index * dayInMilliseconds),
      );
  };

  const getChartAreaData = (startDate, endDate) => {
    if (startDate.getTime() === endDate.getTime()) {
      return oneDayChartData;
    }

    return getRangeOfDates(startDate, endDate).map((date, index) => ({
      label: \`\${date.getMonth() + 1}/\${date.getDate()}\`,
      value: Math.floor(Math.random() * 1000),
    }));
  };

  const getRangeText = (startDate, endDate) =>
    startDate.getTime() === endDate.getTime()
      ? getShortDate(startDate)
      : \`\${getShortDate(startDate)}-\${getShortDate(endDate)}\`;

  const onSubmitClick = () => {
    setPanelShown(false);
    setAnalyticsData({
      range: currentRange,
      chartData: getChartAreaData(currentRange.from, currentRange.to),
      rangeText: getRangeText(currentRange.from, currentRange.to),
    });
  };

  const onCancelClick = () => {
    setPanelShown(false);
    setCurrentRange(analyticsData.range);
  };

  return (
    <Card>
      <Card.Header
        title="Analytics"
        suffix={
          <Popover
            shown={panelShown}
            onClickOutside={onCancelClick}
            appendTo="window"
            placement="bottom"
          >
            <Popover.Element>
              <TextButton onClick={() => setPanelShown(!panelShown)}>
                <Box verticalAlign="middle">
                  {analyticsData.rangeText}
                  <Icons.ChevronDownSmall />
                </Box>
              </TextButton>
            </Popover.Element>

            <Popover.Content>
              <CalendarPanel
                presets={presets}
                value={currentRange}
                onChange={setCurrentRange}
                selectionMode="range"
                footer={({ selectedDays }) => (
                  <CalendarPanelFooter
                    primaryActionLabel="Submit"
                    secondaryActionLabel="Cancel"
                    primaryActionOnClick={onSubmitClick}
                    secondaryActionOnClick={onCancelClick}
                    selectedDays={selectedDays}
                    dateToString={date => date.toLocaleDateString('en-US')}
                  />
                )}
                autoFocus={false}
              />
            </Popover.Content>
          </Popover>
        }
      />
      <Card.Divider />
      <Card.Content>
        <AreaChart data={analyticsData.chartData} />
      </Card.Content>
    </Card>
  );
};
`;