Merge branch 'develop' into feat/date-picker/disable-time

package.json

@@ -121,7 +121,7 @@
     "@testing-library/user-event": "^14.4.3",
     "@types/estree": "0.0.50",
     "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/lodash": "4.17.9",
+    "@types/lodash": "4.17.13",
     "@types/node": "^22.7.0",
     "@types/raf": "^3.4.0",
     "@types/react": "~18.2.0",

src/color-picker/components/panel/format/index.tsx

@@ -3,7 +3,7 @@ import upperCase from 'lodash/upperCase';
 import Select from '../../../../select';
 import FormatInput from './inputs';
 import Color from '../../../../_common/js/color-picker/color';
-import { FORMATS } from '../../../const';
+import { FORMATS } from '../../../../_common/js/color-picker/constants';
 import { TdColorPickerProps } from '../../../type';
 
 export interface TdColorFormatProps extends TdColorPickerProps {
@@ -21,8 +21,6 @@ const FormatPanel = (props: TdColorFormatProps) => {
     onModeChange(v);
   };
 
-  const formats: TdColorPickerProps['format'][] = [...FORMATS];
-
   return (
     <div className={`${baseClassName}__format`}>
       <div className={`${baseClassName}__format--item`}>
@@ -37,7 +35,7 @@ const FormatPanel = (props: TdColorFormatProps) => {
           value={formatMode}
           onChange={handleModeChange}
         >
-          {formats.map((item) => (
+          {FORMATS.map((item) => (
             <Select.Option key={item} value={item} label={upperCase(item)} style={{ fontSize: '12px' }} />
           ))}
         </Select>

src/color-picker/components/panel/header.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { COLOR_MODES } from '../../const';
+import { COLOR_MODES } from '../../../_common/js/color-picker/constants';
 import Radio, { RadioValue } from '../../../radio';
 import { TdColorModes } from '../../interface';
 import { TdColorPickerProps } from '../../type';

src/color-picker/components/panel/index.tsx

@@ -13,7 +13,7 @@ import {
   DEFAULT_LINEAR_GRADIENT,
   TD_COLOR_USED_COLORS_MAX_SIZE,
   DEFAULT_SYSTEM_SWATCH_COLORS,
-} from '../../const';
+} from '../../../_common/js/color-picker/constants';
 import { ColorPickerProps, TdColorModes, TdColorSaturationData } from '../../interface';
 import { ColorPickerChangeTrigger, TdColorPickerProps } from '../../type';
 import { colorPickerDefaultProps } from '../../defaultProps';

src/color-picker/components/panel/linear-gradient.tsx

@@ -5,7 +5,7 @@ import useClassName from '../../hooks/useClassNames';
 import { genGradientPoint, gradientColors2string } from '../../../_common/js/color-picker/color';
 import { GradientColorPoint } from '../../../_common/js/color-picker/gradient';
 import useCommonClassName from '../../../hooks/useCommonClassName';
-import { GRADIENT_SLIDER_DEFAULT_WIDTH } from '../../const';
+import { GRADIENT_SLIDER_DEFAULT_WIDTH } from '../../../_common/js/color-picker/constants';
 import InputNumber from '../../../input-number';
 
 const DELETE_KEYS: string[] = ['delete', 'backspace'];

src/color-picker/components/panel/saturation.tsx

@@ -1,5 +1,8 @@
 import React, { useRef, useEffect, useCallback } from 'react';
-import { SATURATION_PANEL_DEFAULT_HEIGHT, SATURATION_PANEL_DEFAULT_WIDTH } from '../../const';
+import {
+  SATURATION_PANEL_DEFAULT_HEIGHT,
+  SATURATION_PANEL_DEFAULT_WIDTH,
+} from '../../../_common/js/color-picker/constants';
 import { TdColorBaseProps } from '../../interface';
 import useDrag, { Coordinate } from '../../../hooks/useDrag';
 

src/color-picker/components/panel/slider.tsx

@@ -1,6 +1,6 @@
 import React, { useRef, useEffect } from 'react';
 import classnames from 'classnames';
-import { SLIDER_DEFAULT_WIDTH } from '../../const';
+import { SLIDER_DEFAULT_WIDTH } from '../../../_common/js/color-picker/constants';
 import useDrag, { Coordinate } from '../../../hooks/useDrag';
 import { TdColorBaseProps } from '../../interface';
 import useStyles from '../../hooks/useStyles';

src/date-picker/DatePicker.tsx

@@ -4,16 +4,17 @@ import dayjs from 'dayjs';
 import isDate from 'lodash/isDate';
 import useConfig from '../hooks/useConfig';
 import { StyledProps } from '../common';
-import { TdDatePickerProps, PresetDate } from './type';
+import { TdDatePickerProps, PresetDate, DateMultipleValue, DateValue } from './type';
 import SelectInput from '../select-input';
 import SinglePanel from './panel/SinglePanel';
 import useSingle from './hooks/useSingle';
 import { parseToDayjs, getDefaultFormat, formatTime, formatDate } from '../_common/js/date-picker/format';
-import { subtractMonth, addMonth, extractTimeObj, covertToDate } from '../_common/js/date-picker/utils';
+import { subtractMonth, addMonth, extractTimeObj, covertToDate, isSame } from '../_common/js/date-picker/utils';
 import { datePickerDefaultProps } from './defaultProps';
 import useDefaultProps from '../hooks/useDefaultProps';
 import useLatest from '../hooks/useLatest';
 import useUpdateEffect from '../hooks/useUpdateEffect';
+import type { TagInputRemoveContext } from '../tag-input';
 
 export interface DatePickerProps extends TdDatePickerProps, StyledProps {}
 
@@ -36,6 +37,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
     presetsPlacement,
     needConfirm,
     disableTime,
+    multiple,
     onPick,
   } = props;
 
@@ -44,6 +46,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
     popupVisible,
     inputProps,
     popupProps,
+    tagInputProps,
     value,
     year,
     month,
@@ -64,7 +67,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
     mode,
     format: props.format,
     valueType: props.valueType,
-    enableTimePicker,
+    enableTimePicker: multiple ? false : enableTimePicker,
   });
 
   const onTriggerNeedConfirm = useLatest(() => {
@@ -91,6 +94,7 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
   }, [popupVisible]);
 
   useEffect(() => {
+    if (multiple) return;
     // 面板展开重置数据
     // Date valueType、week mode 、quarter mode nad empty string don't need to be parsed
     const dateValue =
@@ -101,8 +105,8 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
     setInputValue(formatDate(dateValue, { format }));
 
     if (popupVisible) {
-      setYear(parseToDayjs(value, format).year());
-      setMonth(parseToDayjs(value, format).month());
+      setYear(parseToDayjs(value as DateValue, format).year());
+      setMonth(parseToDayjs(value as DateValue, format).month());
       setTime(formatTime(value, format, timeFormat, defaultTime));
     } else {
       setIsHoverCell(false);
@@ -112,12 +116,14 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
 
   // 日期 hover
   function onCellMouseEnter(date: Date) {
+    if (multiple) return;
     setIsHoverCell(true);
     setInputValue(formatDate(date, { format }));
   }
 
   // 日期 leave
   function onCellMouseLeave() {
+    if (multiple) return;
     setIsHoverCell(false);
     setInputValue(formatDate(cacheValue, { format }));
   }
@@ -134,6 +140,14 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
     if (enableTimePicker) {
       setCacheValue(formatDate(date, { format }));
     } else {
+      if (multiple) {
+        const newDate = processDate(date);
+        onChange(newDate, {
+          dayjsValue: parseToDayjs(date, format),
+          trigger: 'pick',
+        });
+        return;
+      }
       onChange(formatDate(date, { format, targetFormat: valueType }), {
         dayjsValue: parseToDayjs(date, format),
         trigger: 'pick',
@@ -225,21 +239,54 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
     // eslint-disable-next-line
   }, []);
 
+  function processDate(date: Date) {
+    const isSameDate = (value as DateMultipleValue).some((val) => isSame(dayjs(val).toDate(), date));
+    let currentDate: DateMultipleValue;
+
+    if (!isSameDate) {
+      currentDate = (value as DateMultipleValue).concat(formatDate(date, { format, targetFormat: valueType }));
+    } else {
+      currentDate = (value as DateMultipleValue).filter(
+        (val) =>
+          formatDate(val, { format, targetFormat: valueType }) !==
+          formatDate(date, { format, targetFormat: valueType }),
+      );
+    }
+
+    return currentDate.sort((a, b) => dayjs(a).valueOf() - dayjs(b).valueOf());
+  }
+
+  const onTagRemoveClick = (ctx: TagInputRemoveContext) => {
+    const removeDate = dayjs(ctx.item).toDate();
+    const newDate = processDate(removeDate);
+    onChange?.(newDate, {
+      dayjsValue: parseToDayjs(removeDate, format),
+      trigger: 'pick',
+    });
+  };
+
+  const onTagClearClick = ({ e }) => {
+    e.stopPropagation();
+    setPopupVisible(false);
+    onChange([], { dayjsValue: dayjs(), trigger: 'clear' });
+  };
+
   const panelProps = {
     value: cacheValue,
     year,
     month,
     mode,
     format,
     presets,
-    time,
+    time: multiple ? false : time,
     disableDate,
     firstDayOfWeek,
     timePickerProps,
-    enableTimePicker,
+    enableTimePicker: multiple ? false : enableTimePicker,
     presetsPlacement,
     popupVisible,
     needConfirm,
+    multiple,
     onCellClick,
     onCellMouseEnter,
     onCellMouseLeave,
@@ -265,6 +312,12 @@ const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>((originalProps, r
         inputProps={inputProps}
         popupVisible={popupVisible}
         panel={<SinglePanel {...panelProps} />}
+        multiple={multiple}
+        tagInputProps={{
+          onRemove: onTagRemoveClick,
+          ...tagInputProps,
+        }}
+        onClear={onTagClearClick}
       />
     </div>
   );

src/date-picker/DatePickerPanel.tsx

@@ -86,15 +86,15 @@ const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>((origin
     if (year !== nextYear) {
       props.onYearChange?.({
         year: nextYear,
-        date: parseToDayjs(value, format).toDate(),
+        date: parseToDayjs(value as DateValue, format).toDate(),
         trigger: trigger === 'current' ? 'today' : (`year-${triggerMap[trigger]}` as DatePickerYearChangeTrigger),
       });
     }
 
     if (month !== nextMonth) {
       props.onMonthChange?.({
         month: nextMonth,
-        date: parseToDayjs(value, format).toDate(),
+        date: parseToDayjs(value as DateValue, format).toDate(),
         trigger: trigger === 'current' ? 'today' : (`month-${triggerMap[trigger]}` as DatePickerMonthChangeTrigger),
       });
     }
@@ -118,7 +118,7 @@ const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>((origin
 
     props.onTimeChange?.({
       time: val,
-      date: parseToDayjs(value, format).toDate(),
+      date: parseToDayjs(value as DateValue, format).toDate(),
       trigger: 'time-hour',
     });
   }
@@ -130,7 +130,7 @@ const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>((origin
       trigger: 'confirm',
     });
 
-    props.onConfirm?.({ date: dayjs(value).toDate(), e });
+    props.onConfirm?.({ date: dayjs(value as DateValue).toDate(), e });
   }
 
   // 预设
@@ -152,7 +152,7 @@ const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>((origin
 
     props.onYearChange?.({
       year,
-      date: parseToDayjs(value, format).toDate(),
+      date: parseToDayjs(value as DateValue, format).toDate(),
       trigger: 'year-select',
     });
   }
@@ -162,7 +162,7 @@ const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>((origin
 
     props.onMonthChange?.({
       month,
-      date: parseToDayjs(value, format).toDate(),
+      date: parseToDayjs(value as DateValue, format).toDate(),
       trigger: 'month-select',
     });
   }

src/date-picker/_example/date-time.tsx

@@ -6,7 +6,7 @@ export default function YearDatePicker() {
   const [value, setValue] = useState<DateValue>('2022-02-02 12:11:11');
   const [value2, setValue2] = useState<DateValue>('2022-02-02 am 12:11:11');
 
-  const handleChange: DatePickerProps['onChange'] = (value) => {
+  const handleChange: DatePickerProps['onChange'] = (value: DateValue) => {
     console.log(value);
     setValue(value);
   };
@@ -18,7 +18,7 @@ export default function YearDatePicker() {
       <DatePicker
         enableTimePicker
         value={value2}
-        onChange={(v) => setValue2(v)}
+        onChange={(v: DateValue) => setValue2(v)}
         allowInput
         clearable
         format="YYYY-MM-DD a hh:mm:ss"