teableio / teable / 8387093605

import { type IDateFieldOptions, TimeFormatting } from '@teable/core';

import { Button, Calendar, Input } from '@teable/ui-lib';

import { enUS, zhCN } from 'date-fns/locale';

import { formatInTimeZone, toDate, utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz';

import type { ForwardRefRenderFunction } from 'react';

import { forwardRef, useContext, useImperativeHandle, useMemo, useRef, useState } from 'react';

import { AppContext } from '../../../context';

import { useTranslation } from '../../../context/app/i18n';

import type { ICellEditor, IEditorRef } from '../type';

export interface IDateEditorMain extends ICellEditor<string | null> {

  style?: React.CSSProperties;

  options?: IDateFieldOptions;

  disableTimePicker?: boolean;

}

const LOCAL_MAP = {

  zh: zhCN,

  en: enUS,

};

const DateEditorMainBase: ForwardRefRenderFunction<IEditorRef<string>, IDateEditorMain> = (

  props,

  ref

) => {

  const { value, style, className, onChange, readonly, options, disableTimePicker = false } = props;

  const inputRef = useRef<HTMLInputElement | null>(null);

  const { time, timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone } =

    options?.formatting || {};

  const [date, setDate] = useState<string | null>(value || null);

  const notHaveTimePicker = disableTimePicker || time === TimeFormatting.None;

  const defaultFocusRef = useRef<HTMLInputElement | null>(null);

  const { lang = 'en' } = useContext(AppContext);

  const { t } = useTranslation();

  useImperativeHandle(ref, () => ({

    focus: () => defaultFocusRef.current?.focus?.(),

    setValue: (value?: string) => setDate(value || null),

    saveValue,

  }));

  const onSelect = (value?: Date) => {

    if (!value) return onChange?.(null);

    const curDatetime = zonedTimeToUtc(value, timeZone);

    if (date) {

      const prevDatetime = toDate(date, { timeZone });

      curDatetime.setHours(prevDatetime.getHours());

      curDatetime.setMinutes(prevDatetime.getMinutes());

      curDatetime.setSeconds(prevDatetime.getSeconds());

    } else {

      const tempDate = now();

      curDatetime.setHours(tempDate.getHours());

      curDatetime.setMinutes(tempDate.getMinutes());

      curDatetime.setSeconds(tempDate.getSeconds());

    }

    const dateStr = curDatetime.toISOString();

    setDate(dateStr);

    onChange?.(dateStr);

  };

  const timeValue = useMemo(() => {

    if (!date) return '';

    return formatInTimeZone(date, timeZone, 'HH:mm');

  }, [date, timeZone]);

  const selectedDate = useMemo(() => {

    if (!date) {

      return;

    }

    return utcToZonedTime(date, timeZone);

  }, [date, timeZone]);

  const onTimeChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {

    if (!date) return;

    const datetime = utcToZonedTime(date, timeZone);

    const timeValue = e.target.value;

    const hours = Number.parseInt(timeValue.split(':')[0] || '00', 10);

    const minutes = Number.parseInt(timeValue.split(':')[1] || '00', 10);

    datetime.setHours(hours);

    datetime.setMinutes(minutes);

    setDate(zonedTimeToUtc(datetime, timeZone).toISOString());

  };

  const saveValue = (nowDate?: string) => {

    const val = nowDate || date;

    if (value == val) return;

    onChange?.(val);

  };

  const now = () => {

    return zonedTimeToUtc(new Date(), timeZone);

  };

  return (

    <>

      <Calendar

        locale={LOCAL_MAP[lang as keyof typeof LOCAL_MAP]}

        style={style}

        mode="single"

        selected={selectedDate}

        defaultMonth={selectedDate}

        onSelect={onSelect}

        className={className}

        disabled={readonly}

        fromYear={1970}

        toYear={2100}

        captionLayout="dropdown-buttons"

        footer={

          <div className="flex items-center justify-center p-1">

            {!notHaveTimePicker && date ? (

              <Input

                className="mr-3 w-7/12"

                ref={inputRef}

                type="time"

                value={timeValue}

                onChange={onTimeChange}

                onBlur={() => saveValue()}

              />

            ) : null}

            <Button

              className="h-[34px] w-2/5 text-sm"

              size="sm"

              onClick={() => {

                saveValue(now().toISOString());

              }}

            >

              {t('editor.date.today')}

            </Button>

          </div>

        }

      />

      <input className="invisible size-0 opacity-0" ref={defaultFocusRef} />

    </>

  );

};

export const DateEditorMain = forwardRef(DateEditorMainBase);