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

wix-style-react

export const _layout = `
() => {
  const [value, setValue] = React.useState('');
  return (
    <StorybookComponents.Stack flexDirection="column">
      <Calendar
        value={value}
        onChange={setValue}
        numOfMonths={1}
        autoFocus={false}
      />
      <Calendar
        value={value}
        onChange={setValue}
        numOfMonths={2}
        autoFocus={false}
      />
    </StorybookComponents.Stack>
  );
};
`;

export const _indication = `
() => {
  const [value, setValue] = React.useState(new Date());
  return (
    <Calendar
      value={value}
      onChange={setValue}
      autoFocus={false}
      dateIndication={({ date, isSelected }) => {
        if (date.getTime() < new Date().getTime()) {
          return (
            <Box align="center">
              <Box
                width="4px"
                height="4px"
                borderRadius="50%"
                backgroundColor={isSelected ? 'D60' : 'B20'}
              />
            </Box>
          );
        }
      }}
    />
  );
};
`;

export const _selection = `
() => {
  const date = new Date();
  const [day, setDay] = React.useState(date);
  const [range, setRange] = React.useState({
    from: new Date(),
    to: new Date(date.setMonth(date.getMonth() + 1)),
  });

  return (
    <StorybookComponents.Stack>
      <Calendar
        selectionMode="day"
        value={day}
        onChange={setDay}
        autoFocus={false}
      />
      <Calendar
        selectionMode="range"
        value={range}
        onChange={setRange}
        autoFocus={false}
      />
    </StorybookComponents.Stack>
  );
};
`;

export const _exclude = `
() => {
  const [calendar1Value, setCalendar1Value] = React.useState(new Date());
  const [calendar2Value, setCalendar2Value] = React.useState(new Date());

  const filterDate = date => date.getTime() < new Date();

  return (
    <StorybookComponents.Stack>
      <Calendar
        value={calendar1Value}
        onChange={setCalendar1Value}
        filterDate={filterDate}
        autoFocus={false}
      />
      <Calendar
        value={calendar2Value}
        onChange={setCalendar2Value}
        excludePastDates
        autoFocus={false}
      />
    </StorybookComponents.Stack>
  );
};

`;

export const _dropdown = `
() => {
  const [value, setValue] = React.useState('');
  return (
    <Calendar
      value={value}
      onChange={setValue}
      showMonthDropdown
      showYearDropdown
      autoFocus={false}
    />
  );
};
`;

export const _localization = `
() => {
  const [value, setValue] = React.useState('');
  return (
    <Calendar
      value={value}
      onChange={setValue}
      locale="ko"
      firstDayOfWeek={0}
      autoFocus={false}
    />
  );
};
`;

export const _event = `
() => {
  const [value, setValue] = React.useState(new Date());
  const [time, setTime] = React.useState('10.00');
  const timeslots = [
    '10.00',
    '10.20',
    '10.40',
    '11.00',
    '11.20',
    '11.40',
    '12.00',
    '12.20',
    '12.40',
  ];

  const onTimeInputChange = () => setTime('');

  return (
    <CustomModalLayout
      primaryButtonText="Schedule"
      secondaryButtonText="Cancel"
      onCloseButtonClick={() => {}}
      title="Schedule Post"
      subtitle="When do you want to publish or post?"
      showHeaderDivider
      showFooterDivider
      removeContentPadding
    >
      <Layout gap="0">
        <Cell span={5}>
          <Calendar
            value={value}
            onChange={setValue}
            excludePastDates
            autoFocus={false}
          />
        </Cell>
        <Cell span={7}>
          <Box maxHeight="400px">
            <Divider direction="vertical" />
            <Box direction="vertical" width="100%">
              <Box margin="SP3">
                <FormField label="Time">
                  <TimeInput onChange={onTimeInputChange} />
                </FormField>
              </Box>
              <Box overflow="scroll" direction="vertical">
                {timeslots.map(slot => (
                  <ListItemSelect
                    prefix={
                      <Box>
                        <Icons.Time />
                      </Box>
                    }
                    onClick={() => setTime(slot)}
                    selected={slot === time}
                    title={slot}
                  />
                ))}
              </Box>
            </Box>
          </Box>
        </Cell>
      </Layout>
    </CustomModalLayout>
  );
};
`;