@povio/ui 0.0.2 → 0.0.4

package/src/components/inputs/DateTime/DatePicker/DatePicker.tsx

@@ -0,0 +1,269 @@
+import {
+  CalendarDate,
+  type DateValue,
+  createCalendar,
+  getLocalTimeZone,
+  toCalendarDate,
+  today,
+} from "@internationalized/date";
+import { mergeRefs } from "@react-aria/utils";
+import { clsx } from "clsx";
+import { DateTime } from "luxon";
+import { type Ref, useRef } from "react";
+import { useDatePicker, useLocale } from "react-aria";
+import { Controller, type FieldValues } from "react-hook-form";
+import { type DatePickerStateOptions, useCalendarState, useDatePickerState } from "react-stately";
+
+import { Calendar } from "#ui/components/inputs/DateTime/shared/Calendar";
+import { DatePickerInput } from "#ui/components/inputs/DateTime/shared/DatePickerInput";
+import { DateTimeDialog } from "#ui/components/inputs/DateTime/shared/DateTimeDialog";
+import { DateTimeDialogFooter } from "#ui/components/inputs/DateTime/shared/DateTimeDialogFooter";
+import { FormField, type FormFieldProps } from "#ui/components/inputs/FormField/FormField";
+import type { FormFieldHeaderProps } from "#ui/components/inputs/FormField/FormFieldHeader";
+import type { ControlProps } from "#ui/components/inputs/shared/form.types";
+import type { InputVariantProps } from "#ui/components/inputs/shared/input.cva";
+import { UIConfig } from "#ui/config/uiConfig.context";
+import { DateTimeUtils } from "#ui/utils/date-time.utils";
+
+// Workaround for bug in React Aria (https://github.com/adobe/react-spectrum/issues/3256#issuecomment-1825942096)
+const PLACEHOLDER_VALUE = new CalendarDate(2024, 1, 1);
+
+interface DatePickerBaseProps
+  extends FormFieldProps,
+    InputVariantProps,
+    Omit<DatePickerStateOptions<CalendarDate>, "granularity" | "shouldCloseOnSelect" | "label"> {
+  ref?: Ref<HTMLDivElement>;
+  disableDropdown?: boolean;
+  isClearable?: boolean;
+  className?: string;
+  todayIcon?: boolean;
+}
+
+const DatePickerBase = (props: DatePickerBaseProps) => {
+  const ui = UIConfig.useConfig();
+
+  const {
+    ref,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+    isHeaderHidden,
+    error,
+    onChange,
+    value,
+    disableDropdown,
+    className,
+    todayIcon,
+    as = ui.input.as,
+    hideLabel = ui.input.hideLabel,
+    variant = ui.input.variant,
+    size = ui.input.size,
+    isClearable = ui.input.isClearable,
+    ...rest
+  } = props;
+
+  const formFieldProps: FormFieldProps = {
+    error,
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: isHeaderHidden || as === "inline" || as === "filter" || as === "floating",
+    hideLabel,
+    isDisabled,
+    headerClassName,
+    errorClassName,
+  };
+
+  const dialogState = useDatePickerState({
+    ...rest,
+    defaultValue: value || rest.defaultValue,
+    shouldCloseOnSelect: false,
+  });
+  const state = useDatePickerState({
+    ...rest,
+    value,
+    onChange: (val) => {
+      if (val && ((rest.minValue && val < rest?.minValue) || (rest?.maxValue && val > rest?.maxValue))) {
+        state.setValue(state.value);
+        return;
+      }
+      onChange?.(val);
+      dialogState.setValue(val);
+      calendarState.setFocusedDate(val || today(getLocalTimeZone()));
+    },
+    shouldCloseOnSelect: false,
+  });
+
+  const datePickerRef = useRef<HTMLDivElement>(null);
+
+  const { groupProps, labelProps, fieldProps, buttonProps, dialogProps } = useDatePicker(
+    { ...rest, label },
+    state,
+    datePickerRef,
+  );
+  const { calendarProps } = useDatePicker({ ...rest, label }, dialogState, datePickerRef);
+
+  const { locale } = useLocale();
+  const calendarState = useCalendarState({
+    ...calendarProps,
+    locale,
+    createCalendar,
+  });
+  const headerProps: FormFieldHeaderProps = {
+    label,
+    tooltipText,
+    helperText,
+    isRequired,
+    rightContent,
+    isHeaderHidden: hideLabel || isHeaderHidden,
+    isDisabled,
+    className: headerClassName,
+    labelProps,
+  };
+
+  const onApply = () => {
+    state.setValue(dialogState.value);
+    state.toggle();
+  };
+
+  const onTodayPress = () => {
+    dialogState.setValue(today(getLocalTimeZone()));
+    calendarState.setFocusedDate(today(getLocalTimeZone()));
+  };
+
+  const onOpenChange = (isOpen: boolean) => {
+    state.toggle();
+    calendarState.setFocusedDate((state.value as CalendarDate) || today(getLocalTimeZone()));
+    if (!isOpen) {
+      dialogState.setValue(state.value);
+    }
+  };
+
+  return (
+    <FormField
+      {...formFieldProps}
+      as={as}
+      labelProps={labelProps}
+      className={clsx("relative inline-flex w-full flex-col text-left", className)}
+    >
+      <DatePickerInput
+        ref={mergeRefs(ref, datePickerRef)}
+        as={as}
+        groupProps={groupProps}
+        fieldProps={{ ...fieldProps, placeholderValue: PLACEHOLDER_VALUE }}
+        buttonProps={buttonProps}
+        isDisabled={isDisabled}
+        isInvalid={!!error}
+        disableDropdown={disableDropdown}
+        variant={variant}
+        size={size}
+        isClearable={isClearable}
+        headerProps={headerProps}
+        todayIcon={todayIcon}
+      />
+      {!disableDropdown && (
+        <DateTimeDialog
+          footer={
+            <DateTimeDialogFooter
+              isValid={!dialogState.isInvalid && !!dialogState.value}
+              onTodayPress={onTodayPress}
+              onApply={onApply}
+            />
+          }
+          label={label}
+          triggerRef={datePickerRef}
+          dialogProps={dialogProps}
+          isOpen={state.isOpen}
+          onOpenChange={onOpenChange}
+        >
+          <Calendar
+            state={calendarState}
+            calendarProps={calendarProps}
+            onApply={onApply}
+          />
+        </DateTimeDialog>
+      )}
+    </FormField>
+  );
+};
+
+export interface DatePickerProps extends Omit<DatePickerBaseProps, "value" | "onChange" | "minValue" | "maxValue"> {
+  value?: string | null;
+  onChange?: (value: string | null) => void;
+  fullIso?: boolean;
+  minValue?: DateValue | string;
+  maxValue?: DateValue | string;
+}
+
+export type ControlledDatePickerProps<TFieldValues extends FieldValues> = ControlProps<DatePickerProps, TFieldValues>;
+
+export const DatePicker = <TFieldValues extends FieldValues>({
+  fullIso = true,
+  minValue,
+  maxValue,
+  ...props
+}: ControlledDatePickerProps<TFieldValues>) => {
+  const formatCalendarDate = (calendarDate: CalendarDate | null): string | null => {
+    if (calendarDate === null) {
+      return null;
+    }
+    if (fullIso) {
+      return DateTimeUtils.fromCalendarDateToUTCISO(calendarDate);
+    }
+    const date = DateTimeUtils.fromDateValueToLocal(calendarDate);
+    return DateTime.fromJSDate(date).toISODate();
+  };
+
+  const parseCalendarDate = (formattedDate?: string | null): CalendarDate | null | undefined => {
+    if (formattedDate == null) {
+      return formattedDate;
+    }
+    const date = DateTime.fromISO(formattedDate).toJSDate();
+    const zonedDateTime = DateTimeUtils.fromLocalToZonedDateTime(date);
+    return toCalendarDate(zonedDateTime);
+  };
+
+  const dateLimits = {
+    minValue: typeof minValue === "string" ? parseCalendarDate(minValue) : minValue,
+    maxValue: typeof maxValue === "string" ? parseCalendarDate(maxValue) : maxValue,
+  };
+
+  if ("formControl" in props && props.formControl) {
+    const { formControl, ref, ...innerProps } = props;
+
+    return (
+      <Controller
+        control={formControl.control}
+        name={formControl.name}
+        render={({ field, fieldState: { error } }) => (
+          <DatePickerBase
+            {...innerProps}
+            {...dateLimits}
+            ref={mergeRefs(ref, field.ref)}
+            value={parseCalendarDate(field.value)}
+            onChange={(value) => field.onChange(formatCalendarDate(value))}
+            onBlur={field.onBlur}
+            isDisabled={field.disabled || props.isDisabled}
+            error={props.error ?? error?.message}
+          />
+        )}
+      />
+    );
+  }
+
+  return (
+    <DatePickerBase
+      {...props}
+      {...dateLimits}
+      value={parseCalendarDate(props.value)}
+      onChange={(value) => props.onChange?.(formatCalendarDate(value))}
+    />
+  );
+};