@os-design/core 1.0.199 → 1.0.200

package/src/DatePicker/index.tsx

@@ -0,0 +1,568 @@
+import styled from '@emotion/styled';
+import {
+  DatePickerLocale,
+  defaultLocale,
+  getAccessibilityDateLabel,
+  useFormattedValue,
+} from '@os-design/date-picker-utils';
+import { Down, Up } from '@os-design/icons';
+import { useIsMinWidth } from '@os-design/media';
+import { WithSize } from '@os-design/styles';
+import { ThemeOverrider } from '@os-design/theming';
+import {
+  useForwardedRef,
+  useForwardedState,
+  useKeyPress,
+} from '@os-design/utils';
+import React, {
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import Button from '../Button';
+import Modal from '../Modal';
+import Popover from '../Popover';
+import {
+  ClearIcon,
+  Placeholder,
+  SelectContainer,
+  Title,
+  ToggleContent,
+  ToggleIconContainer,
+  ToggleLeftAddon,
+  ToggleRightAddon,
+} from '../Select';
+import TimePicker from '../TimePicker';
+import DatePickerCalendar from './DatePickerCalendar';
+
+type JsxDivProps = Omit<
+  JSX.IntrinsicElements['div'],
+  'value' | 'defaultValue' | 'onChange' | 'ref'
+>;
+interface BaseDatePickerProps<T> extends JsxDivProps, WithSize {
+  /**
+   * The component located on the left side.
+   * @default undefined
+   */
+  left?: React.ReactNode;
+  /**
+   * Adds padding to the left component.
+   * It can be useful when passing an icon or text in the left component.
+   * @default false
+   */
+  leftHasPadding?: boolean;
+  /**
+   * The component located on the right side.
+   * @default undefined
+   */
+  right?: React.ReactNode;
+  /**
+   * Adds padding to the right component.
+   * It can be useful when passing an icon or text in the right component.
+   * @default false
+   */
+  rightHasPadding?: boolean;
+  /**
+   * The placeholder of the date picker.
+   * @default undefined
+   */
+  placeholder?: string;
+  /**
+   * Whether the date picker is disabled.
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Whether the component have a focus.
+   * @default false
+   */
+  autoFocus?: boolean;
+  /**
+   * Whether the component opens the popup calendar.
+   * @default false
+   */
+  autoOpen?: boolean;
+  /**
+   * The format of the date.
+   * @default undefined
+   */
+  format?: (value: T) => string;
+  /**
+   * The first day of the week.
+   * @default sunday
+   */
+  firstDayOfWeek?: 'sunday' | 'monday';
+  /**
+   * The locale of the date picker.
+   * @default undefined
+   */
+  locale?: DatePickerLocale;
+  /**
+   * Whether the time is shown.
+   * @default false
+   */
+  showTime?: boolean;
+  /**
+   * The time notation.
+   * @default 12-hour
+   */
+  timeNotation?: '12-hour' | '24-hour';
+  /**
+   * Selected date.
+   * @default undefined
+   */
+  value?: T | null;
+  /**
+   * The default value.
+   * @default undefined
+   */
+  defaultValue?: T | null;
+  /**
+   * The change event handler.
+   * @default undefined
+   */
+  onChange?: (value: T | null) => void;
+  /**
+   * The event handler that is called whenever a popup closes.
+   * @default undefined
+   */
+  onClose?: () => void;
+}
+export interface DateNotRangePickerProps extends BaseDatePickerProps<Date> {
+  /**
+   * Whether the value is a range.
+   * @default false
+   */
+  range?: false;
+}
+export interface DateRangePickerProps
+  extends BaseDatePickerProps<[Date, Date]> {
+  /**
+   * Whether the value is a range.
+   * @default false
+   */
+  range: true;
+}
+export type DatePickerProps = DateNotRangePickerProps | DateRangePickerProps;
+
+const StyledPopover = styled(Popover)`
+  padding: ${(p) => p.theme.datePickerPadding}em;
+`;
+
+const TimeContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  margin-top: 0.5em;
+`;
+
+const Dash = styled.div`
+  margin: 0 0.5em;
+  line-height: ${(p) => p.theme.baseHeight}em;
+`;
+
+const StyledTimePicker = styled(TimePicker)`
+  width: 2.5em;
+  text-align: center;
+`;
+
+const timePickerStyle = { style: { width: 'auto' } };
+
+const createDate = (date: Date, time?: Date | null) => {
+  const d = new Date(0);
+  d.setFullYear(date.getFullYear());
+  d.setMonth(date.getMonth());
+  d.setDate(date.getDate());
+  d.setHours(0);
+  d.setMinutes(0);
+  if (time) {
+    d.setHours(time.getHours());
+    d.setMinutes(time.getMinutes());
+  }
+  return d;
+};
+
+/**
+ * The component to choose a date.
+ */
+const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
+  (
+    {
+      left,
+      leftHasPadding = false,
+      right,
+      rightHasPadding = false,
+      placeholder,
+      disabled = false,
+      autoFocus = false,
+      autoOpen = false,
+      format,
+      firstDayOfWeek = 'sunday',
+      locale = defaultLocale,
+      showTime = false,
+      timeNotation = '12-hour',
+      range = false,
+      value,
+      defaultValue,
+      onChange,
+      onClose = () => {},
+      onBlur = () => {},
+      size,
+      ...rest
+    },
+    ref
+  ) => {
+    const [containerRef, mergedContainerRef] = useForwardedRef(ref);
+    const [opened, setOpened] = useState(autoOpen);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const [forwardedValue, setForwardedValue] = useForwardedState<any>({
+      value,
+      defaultValue,
+      onChange,
+    });
+
+    useEffect(() => {
+      if (autoFocus) containerRef.current?.focus();
+    }, [autoFocus, containerRef]);
+
+    const onCloseRef = useRef(onClose);
+    useEffect(() => {
+      onCloseRef.current = onClose;
+    }, [onClose]);
+
+    useEffect(() => {
+      if (!opened) {
+        onCloseRef.current();
+        containerRef.current?.focus();
+      }
+    }, [containerRef, opened]);
+
+    const formattedValue = useFormattedValue({
+      forwardedValue,
+      format,
+      showTime,
+      timeNotation,
+    });
+
+    const closeHandler = useCallback(() => {
+      setOpened(false);
+    }, []);
+
+    useKeyPress(
+      (typeof window !== 'undefined' ? window : undefined) as EventTarget,
+      'Escape',
+      closeHandler
+    );
+    const isMinXs = useIsMinWidth('xs');
+
+    const blurHandler = useCallback(
+      (e) => {
+        if (!opened) onBlur(e);
+      },
+      [onBlur, opened]
+    );
+
+    const valueIsSpecified = useMemo(
+      () => formattedValue !== undefined && formattedValue !== null,
+      [formattedValue]
+    );
+
+    const rightHasPaddingValue = useMemo(() => {
+      if (valueIsSpecified) return false;
+      return right ? rightHasPadding : true;
+    }, [right, rightHasPadding, valueIsSpecified]);
+
+    const rightValue = useMemo(() => {
+      if (valueIsSpecified) {
+        return (
+          <div aria-hidden>
+            <Button
+              type='ghost'
+              wide='never'
+              size='small'
+              disabled={disabled}
+              onClick={(e) => {
+                setForwardedValue(null);
+                e.stopPropagation();
+              }}
+              onKeyDown={(e) => {
+                if (disabled) return;
+                if (['Enter', ' '].includes(e.key)) {
+                  setForwardedValue(null);
+                  if (!containerRef.current) return;
+                  containerRef.current.focus();
+                  e.preventDefault();
+                  e.stopPropagation();
+                }
+              }}
+              aria-label={locale.clearLabel}
+            >
+              <ClearIcon />
+            </Button>
+          </div>
+        );
+      }
+      return (
+        right || (
+          <ToggleIconContainer>
+            {opened ? <Up /> : <Down />}
+          </ToggleIconContainer>
+        )
+      );
+    }, [
+      containerRef,
+      disabled,
+      locale.clearLabel,
+      opened,
+      right,
+      setForwardedValue,
+      valueIsSpecified,
+    ]);
+
+    const firstTimePickerRef = useRef<HTMLInputElement>(null);
+    const secondTimePickerRef = useRef<HTMLInputElement>(null);
+    const rangeStartedRef = useRef(false);
+
+    useEffect(() => {
+      rangeStartedRef.current = false;
+    }, [opened]);
+
+    const changeHandler = useCallback(
+      (date: Date) => {
+        setForwardedValue((prev) => {
+          if (!range) return createDate(date, prev);
+
+          const d = createDate(date);
+          const nextValue =
+            prev && Array.isArray(prev) && rangeStartedRef.current
+              ? [new Date(prev[0].getTime()), createDate(date, prev[1])]
+              : [d, d];
+
+          rangeStartedRef.current = !rangeStartedRef.current;
+          return nextValue.sort(
+            (a: Date, b: Date) => a.getTime() - b.getTime()
+          );
+        });
+      },
+      [range, setForwardedValue]
+    );
+
+    const calendarComponent = useMemo(
+      () => (
+        <DatePickerCalendar
+          firstDayOfWeek={firstDayOfWeek}
+          locale={locale}
+          value={forwardedValue}
+          onSelect={(v) => {
+            changeHandler(v);
+            firstTimePickerRef.current?.focus();
+            if (!showTime && (!range || !rangeStartedRef.current)) {
+              closeHandler();
+            }
+          }}
+        />
+      ),
+      [
+        changeHandler,
+        closeHandler,
+        firstDayOfWeek,
+        forwardedValue,
+        locale,
+        range,
+        showTime,
+      ]
+    );
+
+    const tabOnInputComplete = useCallback(
+      (e) => {
+        if (e.target.selectionStart < 5) return;
+        secondTimePickerRef.current?.focus();
+        setForwardedValue(([from]) => {
+          const nextTo = new Date(from.getTime());
+          nextTo.setHours(nextTo.getHours() + 1);
+          return [from, nextTo];
+        });
+      },
+      [setForwardedValue]
+    );
+
+    const closeOnInputComplete = useCallback(
+      (e) => {
+        if (e.target.selectionStart < 5) return;
+        closeHandler();
+      },
+      [closeHandler]
+    );
+
+    const timeComponent = useMemo(
+      () =>
+        showTime && forwardedValue ? (
+          <TimeContainer>
+            {Array.isArray(forwardedValue) ? (
+              <>
+                <StyledTimePicker
+                  ref={firstTimePickerRef}
+                  autoFocus
+                  disabled={disabled}
+                  notation={timeNotation}
+                  containerProps={timePickerStyle}
+                  value={forwardedValue[0]}
+                  onChange={(v) => setForwardedValue([v, forwardedValue[1]])}
+                  onKeyDown={(e) => {
+                    if (disabled) return;
+                    if (e.key === 'Enter') {
+                      setOpened(!opened);
+                    }
+                  }}
+                  onKeyUp={tabOnInputComplete}
+                />
+                <Dash>–</Dash>
+                <StyledTimePicker
+                  ref={secondTimePickerRef}
+                  disabled={disabled}
+                  notation={timeNotation}
+                  containerProps={timePickerStyle}
+                  value={forwardedValue[1]}
+                  onChange={(v) => setForwardedValue([forwardedValue[0], v])}
+                  onKeyDown={(e) => {
+                    if (disabled) return;
+                    if (e.key === 'Enter') {
+                      setOpened(!opened);
+                    }
+                  }}
+                  onKeyUp={closeOnInputComplete}
+                />
+              </>
+            ) : (
+              <StyledTimePicker
+                ref={firstTimePickerRef}
+                autoFocus
+                disabled={disabled}
+                notation={timeNotation}
+                containerProps={timePickerStyle}
+                value={forwardedValue}
+                onChange={setForwardedValue}
+                onKeyDown={(e) => {
+                  if (disabled) return;
+                  if (e.key === 'Enter') {
+                    setOpened(!opened);
+                  }
+                }}
+                onKeyUp={closeOnInputComplete}
+              />
+            )}
+          </TimeContainer>
+        ) : null,
+      [
+        closeOnInputComplete,
+        disabled,
+        forwardedValue,
+        opened,
+        setForwardedValue,
+        showTime,
+        tabOnInputComplete,
+        timeNotation,
+      ]
+    );
+
+    return (
+      <>
+        <SelectContainer
+          opened={opened}
+          disabled={disabled}
+          size={size}
+          tabIndex={!disabled ? 0 : -1}
+          onClick={() => {
+            if (disabled) return;
+            setOpened(!opened);
+          }}
+          onKeyDown={(e) => {
+            if (disabled) return;
+            if (['Enter', ' '].includes(e.key)) {
+              setOpened(!opened);
+              e.preventDefault();
+            }
+          }}
+          onMouseDown={(e) => e.preventDefault()}
+          onBlur={blurHandler}
+          role='combobox'
+          aria-label={
+            forwardedValue
+              ? getAccessibilityDateLabel(forwardedValue, locale)
+              : undefined
+          }
+          aria-disabled={disabled}
+          {...rest}
+          ref={mergedContainerRef}
+        >
+          {left && (
+            <ThemeOverrider
+              overrides={(t) => ({
+                buttonPaddingHorizontal: 0.8,
+                baseHeight: t.selectToggleListItemHeight / t.sizes.small,
+              })}
+            >
+              <ToggleLeftAddon hasPadding={leftHasPadding}>
+                {left}
+              </ToggleLeftAddon>
+            </ThemeOverrider>
+          )}
+
+          <ToggleContent hasLeft={!!left} hasRight={!!right}>
+            {valueIsSpecified ? (
+              <Title disabled={disabled} aria-hidden>
+                {formattedValue}
+              </Title>
+            ) : (
+              <Placeholder>{placeholder}</Placeholder>
+            )}
+          </ToggleContent>
+
+          {rightValue && (
+            <ThemeOverrider
+              overrides={(t) => ({
+                buttonPaddingHorizontal: 0.8,
+                baseHeight: t.selectToggleListItemHeight / t.sizes.small,
+              })}
+            >
+              <ToggleRightAddon hasPadding={rightHasPaddingValue}>
+                {rightValue}
+              </ToggleRightAddon>
+            </ThemeOverrider>
+          )}
+        </SelectContainer>
+
+        {isMinXs ? (
+          <StyledPopover
+            trigger={containerRef}
+            placement='bottom-start'
+            visible={opened}
+            onClose={closeHandler}
+            size={size}
+          >
+            {calendarComponent}
+            {timeComponent}
+          </StyledPopover>
+        ) : (
+          <Modal
+            title={placeholder}
+            header={null}
+            footer={null}
+            visible={opened}
+            onClose={closeHandler}
+            size={size}
+          >
+            {calendarComponent}
+            {timeComponent}
+          </Modal>
+        )}
+      </>
+    );
+  }
+);
+
+DatePicker.displayName = 'DatePicker';
+
+export default DatePicker;