@superdispatch/dates 0.21.13 → 0.21.14

package/src/date-range-field/DateRangeField.spec.tsx

@@ -1,318 +0,0 @@
-import {
-  mockDate,
-  renderComponent,
-  renderCSS,
-} from '@superdispatch/ui-testutils';
-import { fireEvent, Matcher, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { DateTime } from 'luxon';
-import { useState } from 'react';
-import { defaultDateConfig } from '../date-config/DateConfig';
-import {
-  DateStringRange,
-  DateTimeRange,
-} from '../date-time-utils/DateTimeUtils';
-import { DateRangeField, DateRangeFieldProps } from './DateRangeField';
-
-function queryByClassName(classNames: string): Element[] {
-  return Array.from(document.getElementsByClassName(classNames));
-}
-
-function UncontrolledDateRangeField(props: DateRangeFieldProps) {
-  const [value, setValue] = useState<DateTimeRange>();
-
-  return (
-    <DateRangeField
-      {...props}
-      value={value}
-      onChange={({ dateValue }) => {
-        setValue(dateValue);
-      }}
-    />
-  );
-}
-
-beforeEach(() => {
-  mockDate();
-});
-
-test('basic', () => {
-  const onChange = jest.fn();
-  renderComponent(<DateRangeField label="Range" onChange={onChange} />);
-
-  expect(screen.queryByRole('grid')).toBeNull();
-  expect(screen.getByLabelText('Range')).toHaveValue('');
-
-  userEvent.click(screen.getByLabelText('Range'));
-
-  expect(onChange).not.toHaveBeenCalled();
-
-  expect(screen.queryAllByRole('grid')).toHaveLength(2);
-
-  userEvent.click(screen.getByRole('gridcell', { name: /May 24/ }));
-
-  expect(onChange).toHaveBeenCalledTimes(1);
-  expect(onChange).toHaveBeenLastCalledWith({
-    config: defaultDateConfig,
-    dateValue: [expect.any(DateTime), null],
-    stringValue: ['2019-05-24T00:00:00.000-05:00', null],
-  });
-
-  expect(screen.queryAllByRole('grid')).toHaveLength(2);
-  expect(screen.getByLabelText('Range')).toHaveValue('');
-});
-
-test('uncontrolled', () => {
-  renderComponent(<UncontrolledDateRangeField label="Range" />);
-
-  expect(screen.getByLabelText('Range')).toHaveValue('');
-
-  userEvent.click(screen.getByLabelText('Range'));
-
-  userEvent.click(screen.getByRole('gridcell', { name: /May 24/ }));
-
-  expect(screen.getByLabelText('Range')).toHaveValue('May 24, 2019 - …');
-
-  userEvent.click(screen.getByRole('gridcell', { name: /May 30/ }));
-
-  expect(screen.queryByRole('grid')).toBeNull();
-  expect(screen.getByLabelText('Range')).toHaveValue('May 24 - May 30, 2019');
-});
-
-test('close on select', () => {
-  renderComponent(<DateRangeField value={[Date.now()]} />);
-
-  expect(screen.queryByRole('grid')).toBeNull();
-
-  userEvent.click(screen.getByRole('textbox'));
-  userEvent.click(screen.getByRole('gridcell', { name: /May 25/ }));
-
-  expect(screen.queryByRole('grid')).toBeNull();
-});
-
-test('selected days', () => {
-  renderComponent(<DateRangeField value={['2019-05-24T00:00:00.000-05:00']} />);
-
-  function assertSelection(startDay: number, finishDay?: number): void {
-    const selected = queryByClassName('SD-DateRangeField-selected').filter(
-      (element) => !element.classList.contains('SD-DateRangeField-outside'),
-    );
-
-    const startDays = selected.filter((element) =>
-      element.classList.contains('SD-DateRangeField-rangeStart'),
-    );
-    const finishDays = selected.filter((element) =>
-      element.classList.contains('SD-DateRangeField-rangeFinish'),
-    );
-
-    const [startDate] = selected;
-    const finishDate = selected[selected.length - 1];
-
-    expect(startDays).toHaveLength(1);
-    expect(startDays[0]).toHaveTextContent(String(startDay));
-
-    if (finishDay == null) {
-      // eslint-disable-next-line jest/no-conditional-expect
-      expect(selected).toHaveLength(1);
-      // eslint-disable-next-line jest/no-conditional-expect
-      expect(startDate).toBe(finishDate);
-      // eslint-disable-next-line jest/no-conditional-expect
-      expect(finishDays).toHaveLength(0);
-    } else {
-      // eslint-disable-next-line jest/no-conditional-expect
-      expect(selected).toHaveLength(finishDay - startDay + 1);
-
-      // eslint-disable-next-line jest/no-conditional-expect
-      expect(finishDays).toHaveLength(1);
-      // eslint-disable-next-line jest/no-conditional-expect
-      expect(finishDays[0]).toHaveTextContent(String(finishDay));
-
-      for (let i = 0; i < selected.length; i++) {
-        // eslint-disable-next-line jest/no-conditional-expect
-        expect(selected[i]).toHaveTextContent(String(startDay + i));
-      }
-    }
-  }
-
-  userEvent.click(screen.getByRole('textbox'));
-
-  assertSelection(24);
-
-  fireEvent.mouseEnter(screen.getByRole('gridcell', { name: /May 24/ }));
-
-  assertSelection(24, 24);
-
-  fireEvent.mouseEnter(screen.getByRole('gridcell', { name: /May 26/ }));
-
-  assertSelection(24, 26);
-
-  fireEvent.mouseEnter(screen.getByRole('gridcell', { name: /May 20/ }));
-
-  assertSelection(20, 24);
-});
-
-test('disabledDays', () => {
-  const onChange = jest.fn();
-  const onDayClick = jest.fn();
-
-  renderComponent(
-    <DateRangeField
-      onChange={onChange}
-      CalendarProps={{
-        onDayClick,
-        disabledDays: ({ dateValue }) => dateValue.day >= 24,
-      }}
-    />,
-  );
-
-  userEvent.click(screen.getByRole('textbox'));
-
-  expect(onChange).not.toHaveBeenCalled();
-  expect(onDayClick).not.toHaveBeenCalled();
-
-  expect(screen.getByRole('gridcell', { name: /May 24/ })).toHaveClass(
-    'SD-Calendar-disabled',
-  );
-
-  userEvent.click(screen.getByRole('gridcell', { name: /May 24/ }));
-
-  expect(onChange).not.toHaveBeenCalled();
-  expect(onDayClick).toHaveBeenCalledTimes(1);
-});
-
-test('enableClearable', () => {
-  const onChange = jest.fn();
-  const view = renderComponent(
-    <DateRangeField onChange={onChange} enableClearable={true} />,
-  );
-
-  expect(screen.queryByRole('button', { name: 'clear' })).toBeNull();
-
-  view.rerender(
-    <DateRangeField
-      onChange={onChange}
-      enableClearable={true}
-      value={[Date.now(), undefined]}
-    />,
-  );
-  expect(screen.queryByRole('button', { name: 'clear' })).toBeNull();
-
-  view.rerender(
-    <DateRangeField
-      onChange={onChange}
-      enableClearable={true}
-      value={[Date.now(), Date.now()]}
-    />,
-  );
-
-  expect(screen.getByRole('button', { name: 'clear' })).toBeInTheDocument();
-
-  expect(onChange).not.toHaveBeenCalled();
-
-  userEvent.click(screen.getByRole('button', { name: 'clear' }));
-
-  expect(onChange).toHaveBeenCalledTimes(1);
-  expect(onChange).toHaveBeenLastCalledWith({
-    config: defaultDateConfig,
-    dateValue: [null, null],
-    stringValue: [null, null],
-  });
-
-  view.rerender(
-    <DateRangeField
-      label="Custom Label"
-      onChange={onChange}
-      enableClearable={true}
-      value={[Date.now(), Date.now()]}
-    />,
-  );
-
-  expect(screen.queryByRole('button', { name: 'clear' })).toBeNull();
-
-  userEvent.click(screen.getByRole('button', { name: 'clear Custom Label' }));
-
-  expect(onChange).toHaveBeenCalledTimes(2);
-  expect(onChange).toHaveBeenLastCalledWith({
-    config: defaultDateConfig,
-    dateValue: [null, null],
-    stringValue: [null, null],
-  });
-});
-
-test('time normalization', () => {
-  const view = renderComponent(<DateRangeField />);
-
-  const variants: Array<
-    [
-      input: undefined | DateStringRange,
-      matcher: Matcher,
-      result: DateStringRange,
-    ]
-  > = [
-    [undefined, /May 24/, ['2019-05-24T00:00:00.000-05:00', null]],
-
-    [
-      ['2019-05-29T00:00:00.000-05:00', null],
-      /May 24/,
-      ['2019-05-24T00:00:00.000-05:00', '2019-05-29T23:59:59.999-05:00'],
-    ],
-
-    [
-      ['2019-05-29T10:11:12.134-05:00', null],
-      /May 24/,
-      ['2019-05-24T10:11:12.134-05:00', '2019-05-29T23:59:59.999-05:00'],
-    ],
-  ];
-
-  for (const [input, labelMatcher, stringValue] of variants) {
-    const onChange = jest.fn();
-
-    view.rerender(
-      <DateRangeField
-        id="range"
-        label="Range"
-        value={input}
-        onChange={onChange}
-      />,
-    );
-
-    userEvent.click(screen.getByLabelText('Range'));
-    userEvent.click(screen.getByLabelText(labelMatcher));
-
-    expect(onChange).toHaveBeenCalledTimes(1);
-    expect(onChange).toHaveBeenLastCalledWith({
-      stringValue,
-      config: defaultDateConfig,
-      dateValue: stringValue.map((x) => x && expect.any(DateTime)),
-    });
-  }
-});
-
-test('css', () => {
-  expect(renderCSS(<DateRangeField />, ['SD-DateRangeField']))
-    .toMatchInlineSnapshot(`
-    .SD-DateRangeField-day.SD-DateRangeField-selected:not(.SD-DateRangeField-outside).SD-DateRangeField-rangeStart:before {
-      left: 4px;
-    }
-
-    .SD-DateRangeField-day.SD-DateRangeField-selected:not(.SD-DateRangeField-outside).SD-DateRangeField-rangeFinish:before {
-      right: 4px;
-    }
-
-    .SD-DateRangeField-day.SD-DateRangeField-selected:not(.SD-DateRangeField-outside):not(.SD-DateRangeField-rangeStart):not(.SD-DateRangeField-rangeFinish):after {
-      background-color: Color.Transparent;
-    }
-
-    .SD-DateRangeField-day.SD-DateRangeField-selected:not(.SD-DateRangeField-outside):not(.SD-DateRangeField-rangeStart):not(.SD-DateRangeField-rangeFinish):not(.SD-DateRangeField-disabled) {
-      color: Color.Blue500;
-    }
-
-    .SD-DateRangeField-day.SD-DateRangeField-selected:not(.SD-DateRangeField-outside):not(.SD-DateRangeField-rangeStart):not(.SD-DateRangeField-rangeFinish):not(.SD-DateRangeField-disabled):before {
-      background-color: Color.Blue50;
-    }
-
-    .SD-DateRangeField-day.SD-DateRangeField-selected:not(.SD-DateRangeField-outside):not(.SD-DateRangeField-rangeStart):not(.SD-DateRangeField-rangeFinish).SD-DateRangeField-disabled:before {
-      background-color: Color.Silver100;
-    }
-  `);
-});

package/src/date-range-field/DateRangeField.stories.tsx

@@ -1,51 +0,0 @@
-import { InputAdornment } from '@material-ui/core';
-import { Meta } from '@storybook/react';
-import { DateRangeField } from './DateRangeField.playroom';
-
-export default {
-  title: 'Dates/DateRangeField',
-  component: DateRangeField,
-} as Meta;
-
-export const basic = () => <DateRangeField />;
-
-export const advanced = () => (
-  <DateRangeField
-    label="Label"
-    placeholder="Placeholder"
-    helperText="Helper Text"
-  />
-);
-
-export const errorState = () => (
-  <DateRangeField
-    label="Label"
-    error={true}
-    placeholder="Placeholder"
-    helperText="Error Text"
-  />
-);
-
-export const adornment = () => (
-  <DateRangeField
-    InputProps={{
-      startAdornment: (
-        <InputAdornment position="start">Start Adornment:</InputAdornment>
-      ),
-    }}
-  />
-);
-
-export const fullWidth = () => <DateRangeField fullWidth={true} />;
-
-export const disabled = () => <DateRangeField disabled={true} />;
-
-export const enableClearable = () => <DateRangeField enableClearable={true} />;
-
-export const disableCloseOnSelect = () => (
-  <DateRangeField disableCloseOnSelect={true} />
-);
-
-export const customEmptyText = () => (
-  <DateRangeField fallback="Never" enableClearable={true} />
-);

package/src/date-range-field/DateRangeField.tsx

@@ -1,277 +0,0 @@
-import { BaseTextFieldProps, InputBaseProps } from '@material-ui/core';
-import { makeStyles } from '@material-ui/styles';
-import { Color, SuperDispatchTheme } from '@superdispatch/ui';
-import { forwardRef, ReactNode, useMemo, useRef, useState } from 'react';
-import {
-  BaseDatePicker,
-  InternalBaseDateFieldAPI,
-} from '../base-date-picker/BaseDatePicker';
-import {
-  Calendar,
-  CalendarClassNames,
-  CalendarProps,
-} from '../calendar/Calendar';
-import { DateFormat, useDateConfig } from '../date-config/DateConfig';
-import {
-  DateRangePayload,
-  formatDateRange,
-  NullableDateRangeInput,
-  parseDateRange,
-  stringifyDateRange,
-  toDateRangePayload,
-} from '../date-time-utils/DateTimeUtils';
-import { useDateTimeRange } from '../use-date-time-range/useDateTimeRange';
-
-const useStyles = makeStyles<
-  SuperDispatchTheme,
-  CalendarProps,
-  | 'rangeStart'
-  | 'rangeFinish'
-  | Extract<CalendarClassNames, 'outside' | 'disabled' | 'selected' | 'day'>
->(
-  (theme) => ({
-    rangeStart: {},
-    rangeFinish: {},
-
-    outside: {},
-    disabled: {},
-    selected: {},
-
-    day: {
-      '&$selected:not($outside)': {
-        '&$rangeStart:before': {
-          left: theme.spacing(0.5),
-        },
-
-        '&$rangeFinish:before': {
-          right: theme.spacing(0.5),
-        },
-
-        '&:not($rangeStart):not($rangeFinish)': {
-          '&:after': {
-            backgroundColor: Color.Transparent,
-          },
-
-          '&$disabled': {
-            '&:before': {
-              backgroundColor: Color.Silver100,
-            },
-          },
-
-          '&:not($disabled)': {
-            color: Color.Blue500,
-
-            '&:before': {
-              backgroundColor: Color.Blue50,
-            },
-          },
-        },
-      },
-    },
-  }),
-  { name: 'SD-DateRangeField' },
-);
-
-interface DateRangeFieldAPI extends DateRangePayload {
-  close: () => void;
-  change: (value: NullableDateRangeInput) => void;
-}
-
-export interface DateRangeFieldProps
-  extends Pick<
-    BaseTextFieldProps,
-    | 'disabled'
-    | 'error'
-    | 'fullWidth'
-    | 'helperText'
-    | 'id'
-    | 'label'
-    | 'name'
-    | 'required'
-    | 'placeholder'
-  > {
-  fallback?: string;
-  enableClearable?: boolean;
-  disableCloseOnSelect?: boolean;
-
-  format?: DateFormat;
-  value?: NullableDateRangeInput;
-
-  onBlur?: () => void;
-  onFocus?: () => void;
-  onChange?: (value: DateRangePayload) => void;
-
-  renderFooter?: (api: DateRangeFieldAPI) => ReactNode;
-  renderQuickSelection?: (api: DateRangeFieldAPI) => ReactNode;
-
-  InputProps?: Pick<
-    InputBaseProps,
-    'aria-label' | 'aria-labelledby' | 'startAdornment'
-  >;
-  CalendarProps?: Omit<
-    CalendarProps,
-    'footer' | 'classes' | 'selectedDays' | 'quickSelection' | 'numberOfMonths'
-  >;
-}
-
-export const DateRangeField = forwardRef<HTMLDivElement, DateRangeFieldProps>(
-  (
-    {
-      onBlur,
-      onFocus,
-      onChange,
-      renderFooter,
-      renderQuickSelection,
-
-      value: valueProp,
-      format: formatProp,
-
-      fallback = '',
-
-      enableClearable,
-      disableCloseOnSelect,
-
-      CalendarProps: {
-        modifiers,
-        onDayClick,
-        onDayMouseEnter,
-        ...calendarProps
-      } = {} as const,
-
-      ...textFieldProps
-    },
-    ref,
-  ) => {
-    const apiRef = useRef<InternalBaseDateFieldAPI>(null);
-    const { rangeStart, rangeFinish, ...styles } = useStyles({});
-
-    const config = useDateConfig({ format: formatProp });
-    const [startDate, finishDate] = useDateTimeRange(valueProp, config);
-    const [startDateString, finishDateString] = useMemo(
-      () => stringifyDateRange([startDate, finishDate], config),
-      [config, startDate, finishDate],
-    );
-    const displayValue = useMemo(
-      () => formatDateRange([startDate, finishDate], { fallback }, config),
-      [config, fallback, startDate, finishDate],
-    );
-
-    const [hoveredDate, setHoveredDate] = useState<number>();
-    const [calendarStartDate, calendarFinishDate] = useMemo(() => {
-      const [nextCalendarStartDate, nextCalendarFinishDate] = parseDateRange(
-        [startDate, finishDate || hoveredDate],
-        config,
-      );
-
-      return [
-        nextCalendarStartDate?.startOf('day'),
-        nextCalendarFinishDate?.endOf('day'),
-      ];
-    }, [config, startDate, finishDate, hoveredDate]);
-
-    function handleClose(): void {
-      apiRef.current?.close();
-    }
-
-    function handleChange(nextValue: NullableDateRangeInput): void {
-      let [nextStartDate, nextFinishDate] = parseDateRange(nextValue, config);
-
-      if (onChange) {
-        if (nextStartDate) {
-          if (startDate) {
-            nextStartDate = nextStartDate.set({
-              hour: startDate.hour,
-              minute: startDate.minute,
-              second: startDate.second,
-              millisecond: startDate.millisecond,
-            });
-          } else {
-            nextStartDate = nextStartDate.startOf('day');
-          }
-        }
-
-        if (nextFinishDate) {
-          nextFinishDate = nextFinishDate.endOf('day');
-        }
-
-        onChange(toDateRangePayload([nextStartDate, nextFinishDate], config));
-      }
-
-      if (!disableCloseOnSelect && nextFinishDate?.isValid) {
-        handleClose();
-      }
-    }
-
-    const api: DateRangeFieldAPI = {
-      config,
-      close: handleClose,
-      change: handleChange,
-      dateValue: [startDate, finishDate],
-      stringValue: [startDateString, finishDateString],
-    };
-
-    return (
-      <BaseDatePicker
-        {...textFieldProps}
-        ref={ref}
-        api={apiRef}
-        value={displayValue || fallback}
-        enableClearable={enableClearable && !!startDate && !!finishDate}
-        onClear={() => {
-          handleChange([undefined, undefined]);
-        }}
-        onClose={() => {
-          onBlur?.();
-          setHoveredDate(undefined);
-        }}
-      >
-        <Calendar
-          numberOfMonths={2}
-          {...calendarProps}
-          classes={styles}
-          initialMonth={startDateString}
-          modifiers={{
-            ...modifiers,
-            [rangeStart]: ({ dateValue }) =>
-              !!calendarStartDate?.hasSame(dateValue, 'day'),
-            [rangeFinish]: ({ dateValue }) =>
-              !!calendarFinishDate?.hasSame(dateValue, 'day'),
-          }}
-          selectedDays={({ dateValue }) => {
-            if (calendarStartDate) {
-              if (!calendarFinishDate) {
-                return calendarStartDate.hasSame(dateValue, 'day');
-              }
-
-              return (
-                calendarStartDate <= dateValue &&
-                dateValue <= calendarFinishDate
-              );
-            }
-
-            return false;
-          }}
-          footer={renderFooter?.(api)}
-          quickSelection={renderQuickSelection?.(api)}
-          onDayMouseEnter={(event) => {
-            onDayMouseEnter?.(event);
-            setHoveredDate(
-              !event.disabled ? event.dateValue.valueOf() : undefined,
-            );
-          }}
-          onDayClick={(event) => {
-            onDayClick?.(event);
-
-            if (!event.disabled) {
-              if (startDate && !finishDate) {
-                handleChange([startDateString, event.stringValue]);
-              } else {
-                handleChange([event.stringValue, undefined]);
-              }
-            }
-          }}
-        />
-      </BaseDatePicker>
-    );
-  },
-);