@superdispatch/dates 0.21.6 → 0.21.13

package/src/time-field/TimeField.tsx

@@ -0,0 +1,221 @@
+import {
+  BaseTextFieldProps,
+  InputBaseProps,
+  TextField,
+} from '@material-ui/core';
+import { Autocomplete, FilterOptionsState } from '@material-ui/lab';
+import { DateTime } from 'luxon';
+import { forwardRef, useEffect, useMemo, useState } from 'react';
+import {
+  DateConfig,
+  DateFormat,
+  useDateConfig,
+} from '../date-config/DateConfig';
+import {
+  DatePayload,
+  formatDate,
+  NullableDateInput,
+  toDatePayload,
+} from '../date-time-utils/DateTimeUtils';
+import { useDateTime } from '../use-date-time/useDateTime';
+
+const TIME_MATCH_FORMATS = [
+  'h:mm a',
+  'h:mma',
+  'H:mm',
+  'h:mm',
+  'hmm',
+  'Hmm',
+  'h',
+  'H',
+];
+
+interface TimeFieldOption {
+  value: number;
+  label: string;
+  pattern: RegExp;
+}
+
+function toTimeFieldOption(
+  date: DateTime,
+  config: DateConfig,
+): TimeFieldOption {
+  return {
+    value: date.valueOf(),
+    label: formatDate(date, { variant: 'Time' }, config),
+    pattern: new RegExp(
+      `^(${TIME_MATCH_FORMATS.map((format) => date.toFormat(format)).join(
+        '|',
+      )})`,
+      'i',
+    ),
+  };
+}
+
+function normalizeInputValue(inputValue: string): string {
+  return inputValue.replace(/[\s]/g, '').toLowerCase();
+}
+
+function makeOptions(
+  config: DateConfig,
+): [
+  options: TimeFieldOption[],
+  filterOptions: (
+    options: TimeFieldOption[],
+    state: FilterOptionsState<TimeFieldOption>,
+  ) => TimeFieldOption[],
+] {
+  const options: TimeFieldOption[] = [];
+  const now = DateTime.local().startOf('day');
+
+  for (let i = 0; i < 96; i++) {
+    options.push(toTimeFieldOption(now.set({ minute: i * 15 }), config));
+  }
+
+  const cache = new Map<string, TimeFieldOption[]>();
+
+  return [
+    options,
+    (_, { inputValue }) => {
+      const query = normalizeInputValue(inputValue);
+
+      if (!query) {
+        return options;
+      }
+
+      let filtered = cache.get(query);
+
+      if (!filtered) {
+        filtered = options.filter((option) => option.pattern.test(query));
+        cache.set(query, filtered);
+      }
+
+      return filtered;
+    },
+  ];
+}
+
+export interface TimeFieldProps
+  extends Pick<
+    BaseTextFieldProps,
+    | 'disabled'
+    | 'error'
+    | 'fullWidth'
+    | 'helperText'
+    | 'id'
+    | 'label'
+    | 'name'
+    | 'placeholder'
+    | 'required'
+  > {
+  format?: DateFormat;
+  value?: NullableDateInput;
+  onChange?: (value: DatePayload) => void;
+
+  InputProps?: Pick<InputBaseProps, 'startAdornment'>;
+}
+
+export const TimeField = forwardRef<HTMLDivElement, TimeFieldProps>(
+  (
+    {
+      disabled,
+      onChange,
+
+      value: valueProp,
+      format: formatProp,
+      ...props
+    },
+    ref,
+  ) => {
+    const config = useDateConfig({ format: formatProp });
+    const date = useDateTime(valueProp, config);
+    const selectedOption = useMemo(
+      () => (!date.isValid ? undefined : toTimeFieldOption(date, config)),
+      [date, config],
+    );
+    const [options, filterOptions] = useMemo(
+      () => makeOptions(config),
+      [config],
+    );
+
+    const [inputValue, setInputValue] = useState('');
+
+    function handleChange(nextValue: NullableDateInput): void {
+      if (onChange) {
+        onChange(toDatePayload(nextValue, config));
+      }
+    }
+
+    function handleType(text: string): void {
+      text = normalizeInputValue(text);
+
+      for (const timeFormat of TIME_MATCH_FORMATS) {
+        let nextDate = DateTime.fromFormat(text, timeFormat);
+
+        if (nextDate.isValid) {
+          if (onChange) {
+            if (date.isValid) {
+              nextDate = nextDate.set({
+                year: date.year,
+                month: date.month,
+                day: date.day,
+              });
+            }
+
+            onChange(toDatePayload(nextDate, config));
+          }
+
+          return;
+        }
+      }
+
+      setInputValue(selectedOption?.label || '');
+    }
+
+    useEffect(() => {
+      if (!date.isValid) {
+        setInputValue('');
+      } else {
+        setInputValue(formatDate(date, { variant: 'Time' }, config));
+      }
+    }, [date, config]);
+
+    return (
+      <Autocomplete
+        ref={ref}
+        disabled={disabled}
+        freeSolo={true}
+        autoComplete={true}
+        value={selectedOption}
+        inputValue={inputValue}
+        options={options}
+        includeInputInList={true}
+        filterOptions={filterOptions}
+        getOptionLabel={(option: string | TimeFieldOption) =>
+          typeof option === 'string' ? option : option.label
+        }
+        onBlur={(event: React.FocusEvent<HTMLInputElement>) => {
+          handleType(event.target.value);
+        }}
+        onChange={(_: unknown, nextValue: null | string | TimeFieldOption) => {
+          if (typeof nextValue === 'string') {
+            handleType(nextValue);
+          } else {
+            handleChange(nextValue?.value);
+          }
+        }}
+        onInputChange={(_, nextInputValue) => {
+          setInputValue(nextInputValue);
+        }}
+        renderInput={(params) => (
+          <TextField
+            variant="outlined"
+            {...props}
+            {...params}
+            InputProps={params.InputProps}
+          />
+        )}
+      />
+    );
+  },
+);

package/src/use-date-time/useDateTime.spec.ts

@@ -0,0 +1,45 @@
+import { mockDate, resetMockDate } from '@superdispatch/ui-testutils';
+import { renderHook } from '@testing-library/react-hooks';
+import { DateTime } from 'luxon';
+import { DateConfig } from '../date-config/DateConfig';
+import { NullableDateInput } from '../date-time-utils/DateTimeUtils';
+import { useDateTime } from './useDateTime';
+
+interface Props {
+  input: NullableDateInput;
+  options?: Partial<DateConfig>;
+}
+
+beforeEach(() => {
+  mockDate();
+});
+
+afterEach(() => {
+  resetMockDate();
+});
+
+test('basic', () => {
+  const { result } = renderHook<Props, DateTime>(
+    ({ input, options }) => useDateTime(input, options),
+    { initialProps: { input: '2020-05-24' } },
+  );
+
+  expect(result.current.toISO()).toBe('2020-05-24T00:00:00.000-05:00');
+});
+
+test('warnings', () => {
+  const error = jest.spyOn(console, 'error').mockImplementation();
+
+  const { result } = renderHook<Props, DateTime>(
+    ({ input, options }) => useDateTime(input, options),
+    { initialProps: { input: '2020-05-24', options: { format: 'JodaISO' } } },
+  );
+
+  expect(result.current.toISO()).toBeNull();
+  expect(error).toHaveBeenCalledTimes(1);
+  expect(error).toHaveBeenLastCalledWith(
+    '[useDateTime] Failed to parse "2020-05-24" string with "JodaISO" format.',
+  );
+
+  error.mockClear();
+});

package/src/use-date-time/useDateTime.ts

@@ -0,0 +1,31 @@
+import { DateTime } from 'luxon';
+import { useMemo } from 'react';
+import { DateConfig, useDateConfig } from '../date-config/DateConfig';
+import {
+  NullableDateInput,
+  parseDate,
+  toPrimitiveDateInput,
+} from '../date-time-utils/DateTimeUtils';
+
+export function useDateTime(
+  input: NullableDateInput,
+  options?: Partial<DateConfig>,
+): DateTime {
+  const config = useDateConfig(options);
+  const primitiveInput = toPrimitiveDateInput(input);
+
+  return useMemo(() => {
+    const date = parseDate(primitiveInput, config);
+
+    if (process.env.NODE_ENV !== 'production') {
+      if (!date.isValid && typeof primitiveInput === 'string') {
+        // eslint-disable-next-line no-console
+        console.error(
+          `[useDateTime] Failed to parse "${primitiveInput}" string with "${config.format}" format.`,
+        );
+      }
+    }
+
+    return date;
+  }, [config, primitiveInput]);
+}

package/src/use-date-time-range/useDateTimeRange.spec.ts

@@ -0,0 +1,53 @@
+import { mockDate, resetMockDate } from '@superdispatch/ui-testutils';
+import { renderHook } from '@testing-library/react-hooks';
+import { DateConfig } from '../date-config/DateConfig';
+import {
+  DateTimeRange,
+  NullableDateRangeInput,
+} from '../date-time-utils/DateTimeUtils';
+import { useDateTimeRange } from './useDateTimeRange';
+
+interface Props {
+  input: NullableDateRangeInput;
+  options?: Partial<DateConfig>;
+}
+
+beforeEach(() => {
+  mockDate();
+});
+
+afterEach(() => {
+  resetMockDate();
+});
+
+test('basic', () => {
+  const { result } = renderHook<Props, DateTimeRange>(
+    ({ input, options }) => useDateTimeRange(input, options),
+    { initialProps: { input: ['2020-05-24'] } },
+  );
+
+  expect(result.current[0]?.toISO()).toBe('2020-05-24T00:00:00.000-05:00');
+  expect(result.current[1]).toBeNull();
+});
+
+test('warnings', () => {
+  const error = jest.spyOn(console, 'error').mockImplementation();
+
+  const { result } = renderHook<Props, DateTimeRange>(
+    ({ input, options }) => useDateTimeRange(input, options),
+    {
+      initialProps: {
+        input: [null, '2020-05-24'],
+        options: { format: 'JodaISO' },
+      },
+    },
+  );
+
+  expect(result.current).toEqual([null, null]);
+  expect(error).toHaveBeenCalledTimes(1);
+  expect(error).toHaveBeenLastCalledWith(
+    '[useDateTime] Failed to parse "2020-05-24" string with "JodaISO" format.',
+  );
+
+  error.mockClear();
+});

package/src/use-date-time-range/useDateTimeRange.ts

@@ -0,0 +1,24 @@
+import { useMemo } from 'react';
+import { DateConfig, useDateConfig } from '../date-config/DateConfig';
+import {
+  DateTimeRange,
+  NullableDateRangeInput,
+  parseDateRange,
+  toPrimitiveDateRangeInput,
+} from '../date-time-utils/DateTimeUtils';
+import { useDateTime } from '../use-date-time/useDateTime';
+
+export function useDateTimeRange(
+  input: NullableDateRangeInput,
+  options?: Partial<DateConfig>,
+): DateTimeRange {
+  const config = useDateConfig(options);
+  const [startInput, finishInput] = toPrimitiveDateRangeInput(input);
+  const startDate = useDateTime(startInput, config);
+  const finishDate = useDateTime(finishInput, config);
+
+  return useMemo(
+    () => parseDateRange([startDate, finishDate], config),
+    [config, startDate, finishDate],
+  );
+}

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "extends": "../../tsconfig.build",
+  "exclude": [
+    "pkg",
+    "playroom.ts",
+    "**/*.spec.*",
+    "**/*.stories.*",
+    "**/*.playroom.*",
+    "**/__tests__/**",
+    "**/__testutils__/**"
+  ],
+  "references": [{ "path": "../ui" }, { "path": "../__testutils__" }],
+  "compilerOptions": {
+    "composite": true,
+    "rootDir": "src",
+    "outDir": "pkg/dist-types",
+    "tsBuildInfoFile": "pkg/dist-types/.tsbuildinfo"
+  }
+}

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2019 Super Dispatch
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.