refactor(design): refactor DatePicker (#5622)

Author: jikkai

packages/design/package.json

@@ -83,7 +83,6 @@
         "dayjs": "^1.11.13",
         "rc-dropdown": "^4.2.1",
         "rc-menu": "^9.16.0",
-        "rc-picker": "^4.9.0",
         "rc-virtual-list": "^3.16.1",
         "react-grid-layout": "^1.5.1",
         "react-transition-group": "^4.4.5",

packages/design/src/components/calendar/Calendar.tsx

@@ -47,13 +47,15 @@ function DayButton(props: ButtonHTMLAttributes<HTMLButtonElement>) {
 
 interface ICalendarProps {
     className?: string;
+    showTime?: boolean;
+    max?: Date;
+    min?: Date;
     value?: Date;
     onValueChange?: (date: Date) => void;
-    showTime?: boolean;
 }
 
 export function Calendar(props: ICalendarProps) {
-    const { className, value, onValueChange, showTime = false } = props;
+    const { className, max, min, showTime = false, value, onValueChange } = props;
 
     const { locale } = useContext(ConfigContext);
 
@@ -109,7 +111,19 @@ export function Calendar(props: ICalendarProps) {
         return day && currentYear === today.getFullYear() && currentMonth === today.getMonth() && day === today.getDate();
     }
 
+    function isDisabled(day: number) {
+        if (!day) return false;
+        const hours = value?.getHours() ?? today.getHours();
+        const minutes = value?.getMinutes() ?? today.getMinutes();
+        const seconds = value?.getSeconds() ?? today.getSeconds();
+        const d = new Date(currentYear, currentMonth, day, hours, minutes, seconds);
+        if (min && d < min) return true;
+        if (max && d > max) return true;
+        return false;
+    }
+
     function handleChangeDate(day: number) {
+        if (isDisabled(day)) return;
         const hours = value?.getHours() ?? today.getHours();
         const minutes = value?.getMinutes() ?? today.getMinutes();
         const seconds = value?.getSeconds() ?? today.getSeconds();
@@ -187,11 +201,13 @@ export function Calendar(props: ICalendarProps) {
                                 key={idx}
                                 className={clsx({
                                     '!univer-bg-primary-600 univer-font-bold univer-text-white': isSelected(day),
-                                    'univer-hover:bg-primary-100 univer-cursor-pointer univer-text-gray-800': !isSelected(day),
+                                    'univer-hover:bg-primary-100 univer-cursor-pointer univer-text-gray-800': !isSelected(day) && !isDisabled(day),
                                     'dark:!univer-text-white': !isToday(day) && !isSelected(day),
                                     'univer-font-semibold univer-text-primary-600 dark:!univer-text-primary-500': isToday(day),
+                                    'univer-cursor-not-allowed univer-opacity-40': isDisabled(day),
                                 })}
                                 onClick={() => handleChangeDate(day)}
+                                disabled={isDisabled(day)}
                             >
                                 {day}
                             </DayButton>

packages/design/src/components/date-picker/DatePicker.stories.tsx

@@ -15,7 +15,6 @@
  */
 
 import type { Meta } from '@storybook/react';
-import { dayjs } from '@univerjs/core';
 import { useState } from 'react';
 import { DatePicker } from './DatePicker';
 
@@ -32,10 +31,10 @@ export default meta;
 
 export const DatePickerBasic = {
     render() {
-        const [value, setValue] = useState<dayjs.Dayjs>(dayjs());
+        const [value, setValue] = useState(new Date());
 
         return (
-            <DatePicker value={value} onChange={setValue} />
+            <DatePicker value={value} onValueChange={setValue} />
         );
     },
 };

packages/design/src/components/date-picker/DatePicker.tsx

@@ -14,49 +14,70 @@
  * limitations under the License.
  */
 
-import type { dayjs } from '@univerjs/core';
-import type { PickerProps } from 'rc-picker';
 import { CalendarIcon } from '@univerjs/icons';
-import RcPicker from 'rc-picker';
-import generateConfig from 'rc-picker/lib/generate/dayjs';
-import { useContext } from 'react';
-import { ConfigContext } from '../config-provider/ConfigProvider';
-import './index.css';
-
-/** @deprecated */
-export interface IDatePickerProps extends Omit<PickerProps<dayjs.Dayjs>, 'value' | 'onChange' | 'locale' | 'generateConfig' | 'prefixCls'> {
+import dayjs from 'dayjs';
+import { useState } from 'react';
+import { borderClassName } from '../../helper/class-utilities';
+import { clsx } from '../../helper/clsx';
+import { Calendar } from '../calendar/Calendar';
+import { Dropdown } from '../dropdown/Dropdown';
+
+interface IDatePickerProps {
+    /**
+     * Additional CSS classes for the date picker.
+     */
+    className?: string;
+
     /**
      * The value of the date picker.
      */
-    value: dayjs.Dayjs;
+    value?: Date;
 
     /**
      * Callback when the value of the date picker changes.
      */
-    onChange: (date: dayjs.Dayjs, dateString: string) => void;
+    onValueChange?: (date: Date) => void;
 }
 
-/** @deprecated */
 export function DatePicker(props: IDatePickerProps) {
-    const { value, onChange, ...ext } = props;
+    const { value, onValueChange, className } = props;
 
-    const { locale } = useContext(ConfigContext);
+    const [open, setOpen] = useState(false);
 
-    function handleChange(date: dayjs.Dayjs | dayjs.Dayjs[], dateString: string | string[]) {
-        if (!Array.isArray(date) && !Array.isArray(dateString)) {
-            onChange(date, dateString);
-        }
+    function handleValueChange(date: Date) {
+        onValueChange?.(date);
+        setOpen(false);
     }
 
     return (
-        <RcPicker<dayjs.Dayjs>
-            {...ext}
-            value={value}
-            prefixCls="univer-date-picker"
-            generateConfig={generateConfig}
-            locale={locale?.Picker!}
-            suffixIcon={<CalendarIcon className="univer-date-picker-suffix-icon" />}
-            onChange={handleChange}
-        />
+        <Dropdown
+            align="start"
+            overlay={(
+                <div className="univer-p-2">
+                    <Calendar value={value} onValueChange={handleValueChange} />
+                </div>
+            )}
+            open={open}
+            onOpenChange={setOpen}
+        >
+            <button
+                className={clsx(`
+                  univer-flex univer-h-8 univer-items-center univer-justify-between univer-gap-2 univer-rounded-md
+                  univer-bg-transparent univer-px-2 univer-text-sm univer-text-gray-800 univer-transition-all
+                  hover:univer-border-primary-600
+                  dark:!univer-text-white
+                `, borderClassName, className)}
+                type="button"
+            >
+                {dayjs(value).format('YYYY-MM-DD')}
+
+                <CalendarIcon
+                    className={`
+                      univer-text-gray-600
+                      dark:!univer-text-gray-400
+                    `}
+                />
+            </button>
+        </Dropdown>
     );
 }