@superdispatch/dates 0.21.6 → 0.21.13

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

@@ -0,0 +1,318 @@
+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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,277 @@
+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>
+    );
+  },
+);