@superdispatch/dates 0.21.8 → 0.21.13

package/src/date-config/DateConfig.tsx

@@ -0,0 +1,60 @@
+import { FixedOffsetZone, Settings } from 'luxon';
+import {
+  createContext,
+  ReactElement,
+  ReactNode,
+  useContext,
+  useMemo,
+} from 'react';
+
+export function setDefaultTimeZone(offset: number | 'local'): string {
+  if (offset === 'local') {
+    Settings.defaultZoneName = offset;
+  } else {
+    const zone = FixedOffsetZone.instance(offset);
+
+    if (zone.isValid) {
+      Settings.defaultZoneName = zone.name;
+    }
+  }
+
+  return Settings.defaultZoneName;
+}
+
+export function useDefaultTimeZone(offset: number | 'local'): string {
+  return useMemo(() => setDefaultTimeZone(offset), [offset]);
+}
+
+export type DateFormat = 'DateISO' | 'DateTimeISO' | 'JodaISO';
+
+export interface DateConfig {
+  readonly format: DateFormat;
+}
+
+export const defaultDateConfig: DateConfig = { format: 'DateTimeISO' };
+
+const Context = createContext(defaultDateConfig);
+
+export function useDateConfig(options: Partial<DateConfig> = {}): DateConfig {
+  const config = useContext(Context);
+  const { format = config.format } = options;
+
+  return useMemo<DateConfig>(() => ({ format }), [format]);
+}
+
+export interface DateConfigProviderProps extends Partial<DateConfig> {
+  children?: ReactNode;
+}
+
+export function DateConfigProvider({
+  format,
+  children,
+}: DateConfigProviderProps): ReactElement {
+  const prev = useDateConfig();
+  const ctx = useMemo(
+    (): DateConfig => ({ format: format || prev.format }),
+    [format, prev.format],
+  );
+
+  return <Context.Provider value={ctx}>{children}</Context.Provider>;
+}

package/src/date-field/DateField.playroom.tsx

@@ -0,0 +1,21 @@
+import { forwardRef, useState } from 'react';
+import { NullableDateInput } from '../date-time-utils/DateTimeUtils';
+import { DateField as SDDateField, DateFieldProps } from './DateField';
+
+export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
+  ({ value, onChange, ...props }, ref) => {
+    const [state, setState] = useState<NullableDateInput>();
+
+    return (
+      <SDDateField
+        {...props}
+        ref={ref}
+        value={value || state}
+        onChange={(date) => {
+          onChange?.(date);
+          setState(date.stringValue);
+        }}
+      />
+    );
+  },
+);

package/src/date-field/DateField.spec.tsx

@@ -0,0 +1,350 @@
+import { InputAdornment } from '@material-ui/core';
+import { mockDate, renderComponent } from '@superdispatch/ui-testutils';
+import { fireEvent, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { DateTime } from 'luxon';
+import { useState } from 'react';
+import {
+  DateConfigProvider,
+  DateFormat,
+  defaultDateConfig,
+} from '../date-config/DateConfig';
+import {
+  DatePayload,
+  DateString,
+  NullableDateString,
+} from '../date-time-utils/DateTimeUtils';
+import { DateField, DateFieldProps } from './DateField';
+
+beforeEach(() => {
+  mockDate();
+});
+
+function UncontrolledDateField(props: DateFieldProps) {
+  const [info, setInfo] = useState<DatePayload>();
+
+  return <DateField {...props} onChange={setInfo} value={info?.stringValue} />;
+}
+
+test('basic', () => {
+  const onChange = jest.fn();
+  renderComponent(<DateField onChange={onChange} />);
+
+  expect(screen.queryByRole('grid')).toBeNull();
+  expect(screen.getByRole('textbox')).toHaveValue('');
+
+  userEvent.click(screen.getByRole('textbox'));
+
+  expect(onChange).not.toHaveBeenCalled();
+  userEvent.click(screen.getByRole('gridcell', { name: /May 24/ }));
+  expect(onChange).toHaveBeenCalledTimes(1);
+  expect(onChange).toHaveBeenLastCalledWith({
+    config: defaultDateConfig,
+    dateValue: expect.any(DateTime),
+    stringValue: '2019-05-24T00:00:00.000-05:00',
+  });
+
+  expect(screen.queryByRole('grid')).toBeNull();
+  expect(screen.getByRole('textbox')).toHaveValue('');
+});
+
+test('uncontrolled', () => {
+  renderComponent(<UncontrolledDateField />);
+
+  expect(screen.getByRole('textbox')).toHaveValue('');
+
+  userEvent.click(screen.getByRole('textbox'));
+  userEvent.click(screen.getByRole('gridcell', { name: /May 24/ }));
+
+  expect(screen.getByRole('textbox')).toHaveValue('May 24, 2019');
+});
+
+test.each<
+  [
+    contextFormat: undefined | DateFormat,
+    propsFormat: undefined | DateFormat,
+    input: NullableDateString,
+    inputValue: string,
+    expectedFormat: DateFormat,
+    expectedValue: DateString,
+  ]
+>([
+  [
+    undefined,
+    undefined,
+    '2019-05-20',
+    'May 20, 2019',
+    'DateTimeISO',
+    '2019-05-24T00:00:00.000-05:00',
+  ],
+
+  [
+    'JodaISO',
+    undefined,
+    '2019-05-20T00:00:00.000-0500',
+    'May 20, 2019',
+    'JodaISO',
+    '2019-05-24T00:00:00.000-0500',
+  ],
+
+  ['JodaISO', 'DateISO', '2019-05-20', 'May 20, 2019', 'DateISO', '2019-05-24'],
+])(
+  'DateConfig format={%p}: DateField format={%p} value={%p}',
+  (
+    contextFormat,
+    propsFormat,
+    input,
+    inputValue,
+    expectedFormat,
+    expectedValue,
+  ) => {
+    const onChange = jest.fn();
+    renderComponent(
+      <DateConfigProvider format={contextFormat}>
+        <DateField value={input} onChange={onChange} format={propsFormat} />
+      </DateConfigProvider>,
+    );
+
+    expect(screen.getByRole('textbox')).toHaveValue(inputValue);
+
+    userEvent.click(screen.getByRole('textbox'));
+    userEvent.click(screen.getByRole('gridcell', { name: /May 24/ }));
+
+    expect(onChange).toHaveBeenLastCalledWith({
+      dateValue: expect.any(DateTime),
+      stringValue: expectedValue,
+      config: { format: expectedFormat },
+    });
+  },
+);
+
+test('close on select', () => {
+  renderComponent(<DateField />);
+
+  expect(screen.queryByRole('grid')).toBeNull();
+
+  userEvent.click(screen.getByRole('textbox'));
+  userEvent.click(screen.getByRole('gridcell', { name: /May 25/ }));
+
+  expect(screen.queryByRole('grid')).toBeNull();
+});
+
+test('onClick', () => {
+  let prevent = false;
+
+  renderComponent(
+    <DateField
+      onClick={(event) => {
+        if (prevent) event.preventDefault();
+      }}
+    />,
+  );
+
+  expect(screen.queryByRole('grid')).toBeNull();
+
+  userEvent.click(screen.getByRole('textbox'));
+  userEvent.click(screen.getByRole('gridcell', { name: /May 25/ }));
+
+  expect(screen.queryByRole('grid')).toBeNull();
+
+  prevent = true;
+
+  userEvent.click(screen.getByRole('textbox'));
+  expect(screen.queryByRole('grid')).toBeNull();
+});
+
+test('onKeyDown', () => {
+  let prevent = false;
+
+  renderComponent(
+    <DateField
+      onKeyDown={(event) => {
+        if (prevent) event.preventDefault();
+      }}
+    />,
+  );
+
+  expect(screen.queryByRole('grid')).toBeNull();
+
+  fireEvent.keyDown(screen.getByRole('textbox'), { key: ' ' });
+
+  userEvent.click(screen.getByRole('gridcell', { name: /May 24/ }));
+
+  expect(screen.queryByRole('grid')).toBeNull();
+
+  fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter' });
+
+  userEvent.click(screen.getByRole('gridcell', { name: /May 25/ }));
+
+  expect(screen.queryByRole('grid')).toBeNull();
+
+  prevent = true;
+
+  fireEvent.keyDown(screen.getByRole('textbox'), { key: ' ' });
+
+  expect(screen.queryByRole('grid')).toBeNull();
+
+  fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter' });
+
+  expect(screen.queryByRole('grid')).toBeNull();
+});
+
+test('disabled', () => {
+  renderComponent(<DateField disabled={true} />);
+
+  expect(screen.queryByRole('grid')).toBeNull();
+
+  userEvent.click(screen.getByRole('textbox'));
+
+  expect(screen.queryByRole('grid')).toBeNull();
+
+  fireEvent.keyDown(screen.getByRole('textbox'), { key: ' ' });
+
+  expect(screen.queryByRole('grid')).toBeNull();
+
+  fireEvent.keyDown(screen.getByRole('textbox'), { key: 'Enter' });
+
+  expect(screen.queryByRole('grid')).toBeNull();
+});
+
+test('disabledDays', () => {
+  const onChange = jest.fn();
+  const onDayClick = jest.fn();
+
+  renderComponent(
+    <DateField
+      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(<DateField enableClearable={true} />);
+
+  expect(screen.queryByRole('button', { name: 'clear' })).toBeNull();
+
+  view.rerender(
+    <DateField value={Date.now()} onChange={onChange} enableClearable={true} />,
+  );
+
+  expect(onChange).not.toHaveBeenCalled();
+
+  userEvent.click(screen.getByRole('button', { name: 'clear' }));
+
+  expect(onChange).toHaveBeenCalledTimes(1);
+  expect(onChange).toHaveBeenLastCalledWith({
+    config: defaultDateConfig,
+    stringValue: null,
+    dateValue: expect.any(DateTime),
+  });
+
+  view.rerender(
+    <DateField
+      label="Custom Label"
+      value={Date.now()}
+      onChange={onChange}
+      enableClearable={true}
+    />,
+  );
+
+  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,
+    stringValue: null,
+    dateValue: expect.any(DateTime),
+  });
+});
+
+test('disableCloseOnSelect', () => {
+  const onChange = jest.fn();
+  const view = renderComponent(<DateField onChange={onChange} />);
+
+  expect(screen.queryByRole('grid')).toBeNull();
+
+  userEvent.click(screen.getByRole('textbox'));
+  userEvent.click(screen.getByRole('gridcell', { name: /May 24/ }));
+
+  expect(screen.queryByRole('grid')).toBeNull();
+  expect(onChange).toHaveBeenCalledTimes(1);
+  expect(onChange).toHaveBeenLastCalledWith(
+    expect.objectContaining({ stringValue: '2019-05-24T00:00:00.000-05:00' }),
+  );
+
+  view.rerender(<DateField onChange={onChange} disableCloseOnSelect={true} />);
+
+  expect(screen.queryByRole('grid')).toBeNull();
+
+  userEvent.click(screen.getByRole('textbox'));
+  userEvent.click(screen.getByRole('gridcell', { name: /May 25/ }));
+
+  expect(screen.getByRole('grid')).toBeInTheDocument();
+  expect(onChange).toHaveBeenCalledTimes(2);
+  expect(onChange).toHaveBeenLastCalledWith(
+    expect.objectContaining({ stringValue: '2019-05-25T00:00:00.000-05:00' }),
+  );
+
+  userEvent.click(screen.getByRole('gridcell', { name: /May 26/ }));
+
+  expect(screen.getByRole('grid')).toBeInTheDocument();
+  expect(onChange).toHaveBeenCalledTimes(3);
+  expect(onChange).toHaveBeenLastCalledWith(
+    expect.objectContaining({ stringValue: '2019-05-26T00:00:00.000-05:00' }),
+  );
+
+  fireEvent.keyDown(screen.getByRole('presentation'), { key: 'Escape' });
+
+  expect(screen.queryByRole('grid')).toBeNull();
+  expect(onChange).toHaveBeenCalledTimes(3);
+});
+
+test('startAdornment', () => {
+  renderComponent(
+    <DateField
+      InputProps={{
+        'aria-labelledby': 'label',
+        startAdornment: (
+          <InputAdornment id="label" position="start">
+            Start Adornment
+          </InputAdornment>
+        ),
+      }}
+    />,
+  );
+
+  expect(screen.queryByRole('grid')).toBeNull();
+
+  userEvent.click(screen.getByLabelText('Start Adornment'));
+
+  expect(screen.getByRole('grid')).toBeInTheDocument();
+
+  fireEvent.keyDown(screen.getByRole('presentation'), { key: 'Escape' });
+
+  expect(screen.queryByRole('grid')).toBeNull();
+
+  userEvent.click(screen.getByText('Start Adornment'));
+
+  expect(screen.getByRole('grid')).toBeInTheDocument();
+});

package/src/date-field/DateField.stories.tsx

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

package/src/date-field/DateField.tsx

@@ -0,0 +1,155 @@
+import { BaseTextFieldProps, InputBaseProps } from '@material-ui/core';
+import { forwardRef, ReactNode, useMemo, useRef } from 'react';
+import {
+  BaseDatePicker,
+  InternalBaseDateFieldAPI,
+} from '../base-date-picker/BaseDatePicker';
+import { Calendar, CalendarProps } from '../calendar/Calendar';
+import { DateFormat, useDateConfig } from '../date-config/DateConfig';
+import {
+  DateDisplayVariant,
+  DatePayload,
+  NullableDateInput,
+  stringifyDate,
+  toDatePayload,
+} from '../date-time-utils/DateTimeUtils';
+import { useFormattedDate } from '../formatted-date/FormattedDate';
+import { useDateTime } from '../use-date-time/useDateTime';
+
+export interface DateFieldAPI extends DatePayload {
+  close: () => void;
+  change: (value: NullableDateInput) => void;
+}
+
+export interface DateFieldProps
+  extends Pick<
+    BaseTextFieldProps,
+    | 'disabled'
+    | 'error'
+    | 'fullWidth'
+    | 'helperText'
+    | 'id'
+    | 'label'
+    | 'name'
+    | 'onClick'
+    | 'onKeyDown'
+    | 'placeholder'
+    | 'required'
+  > {
+  format?: DateFormat;
+  value?: NullableDateInput;
+
+  onBlur?: () => void;
+  onFocus?: () => void;
+  onChange?: (event: DatePayload) => void;
+
+  fallback?: string;
+  variant?: DateDisplayVariant;
+  enableClearable?: boolean;
+  disableCloseOnSelect?: boolean;
+  renderFooter?: (api: DateFieldAPI) => ReactNode;
+  renderQuickSelection?: (api: DateFieldAPI) => ReactNode;
+
+  InputProps?: Pick<
+    InputBaseProps,
+    'aria-label' | 'aria-labelledby' | 'startAdornment'
+  >;
+  CalendarProps?: Omit<
+    CalendarProps,
+    | 'classes'
+    | 'footer'
+    | 'initialMonth'
+    | 'numberOfMonths'
+    | 'quickSelection'
+    | 'selectedDays'
+  >;
+}
+
+export const DateField = forwardRef<HTMLDivElement, DateFieldProps>(
+  (
+    {
+      onBlur,
+      onFocus,
+      onChange,
+      renderFooter,
+      renderQuickSelection,
+
+      value: valueProp,
+      format: formatProp,
+
+      fallback = '',
+      variant = 'Date',
+
+      enableClearable,
+      disableCloseOnSelect,
+
+      CalendarProps: { onDayClick, ...calendarProps } = {},
+      ...textFieldProps
+    },
+    ref,
+  ) => {
+    const config = useDateConfig({ format: formatProp });
+    const apiRef = useRef<InternalBaseDateFieldAPI>(null);
+
+    const date = useDateTime(valueProp, config);
+    const displayValue = useFormattedDate(date, {
+      variant,
+      fallback,
+      ...config,
+    });
+    const dateString = useMemo(
+      () => stringifyDate(date, config),
+      [date, config],
+    );
+
+    function handleClose(): void {
+      apiRef.current?.close();
+    }
+
+    function handleChange(nextInput: NullableDateInput): void {
+      if (onChange) {
+        onChange(toDatePayload(nextInput, config));
+      }
+
+      if (!disableCloseOnSelect) {
+        handleClose();
+      }
+    }
+
+    const api: DateFieldAPI = {
+      config,
+      dateValue: date,
+      stringValue: dateString,
+      close: handleClose,
+      change: handleChange,
+    };
+
+    return (
+      <BaseDatePicker
+        {...textFieldProps}
+        ref={ref}
+        api={apiRef}
+        onClose={onBlur}
+        value={displayValue || fallback}
+        enableClearable={enableClearable && date.isValid}
+        onClear={() => {
+          handleChange(undefined);
+        }}
+      >
+        <Calendar
+          {...calendarProps}
+          initialMonth={date}
+          footer={renderFooter?.(api)}
+          quickSelection={renderQuickSelection?.(api)}
+          selectedDays={({ dateValue }) => date.hasSame(dateValue, 'day')}
+          onDayClick={(event) => {
+            onDayClick?.(event);
+            if (!event.disabled) {
+              handleChange(event.dateValue);
+            }
+          }}
+        />
+      </BaseDatePicker>
+    );
+  },
+);

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

@@ -0,0 +1,24 @@
+import { forwardRef, useState } from 'react';
+import { DateStringRange } from '../date-time-utils/DateTimeUtils';
+import {
+  DateRangeField as SDDateRangeField,
+  DateRangeFieldProps,
+} from './DateRangeField';
+
+export const DateRangeField = forwardRef<HTMLDivElement, DateRangeFieldProps>(
+  ({ value, onChange, ...props }, ref) => {
+    const [state, setState] = useState<DateStringRange>();
+
+    return (
+      <SDDateRangeField
+        {...props}
+        ref={ref}
+        value={value || state}
+        onChange={(date) => {
+          onChange?.(date);
+          setState(date.stringValue);
+        }}
+      />
+    );
+  },
+);