@kne/react-form-antd 4.1.4 → 4.1.6

package/dist/index.modern.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { forwardRef, useCallback, createContext, useContext, useEffect, useState, useRef, useMemo } from 'react';
+import React__default, { forwardRef, useMemo, useCallback, createContext, useContext, useEffect, useState, useRef } from 'react';
 import classnames from 'classnames';
 import ReactForm__default, { preset as preset$2, useReset, useSubmit } from '@kne/react-form';
 export * from '@kne/react-form';
@@ -9,6 +9,7 @@ import merge from 'lodash/merge';
 import { TreeSelect, TimePicker, Input, Switch as Switch$1, Select, Radio, InputNumber, Button, DatePicker, Checkbox as Checkbox$1, Cascader as Cascader$1, Rate as Rate$1, Slider as Slider$1 } from 'antd';
 import { createWithIntlProvider, useIntl } from '@kne/react-intl';
 import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
 import useControlValue from '@kne/use-control-value';
 
 function _extends$3() {
@@ -52,7 +53,7 @@ var preset = props => {
   preset$2(globalParams.rules);
 };
 
-const _excluded$4 = ["className", "cache", "enterSubmit", "scrollToError", "scrollProps", "type", "size", "children"];
+const _excluded$5 = ["className", "cache", "enterSubmit", "scrollToError", "scrollProps", "type", "size", "children"];
 const {
   ScrollToError,
   EnterSubmit,
@@ -71,7 +72,7 @@ const Form = forwardRef((originProps, ref) => {
       },
       children
     } = originProps,
-    props = _objectWithoutPropertiesLoose(originProps, _excluded$4);
+    props = _objectWithoutPropertiesLoose(originProps, _excluded$5);
   const baseClass = 'react-form';
   let computedClass = baseClass;
   const {
@@ -159,12 +160,127 @@ TreeSelectInner.Field = TreeSelect;
 TreeSelectInner.TreeNode = TreeSelect.TreeNode;
 const _TreeSelect = withLocale(TreeSelectInner);
 
+dayjs.extend(customParseFormat);
+
+/**
+ * Convert form/API date values to dayjs for antd DatePicker/TimePicker.
+ * Newer @rc-component/picker getUDayjs returns non-dayjs values as-is,
+ * then calls .isValid() and throws on plain strings.
+ */
+const toDayjs = (value, format) => {
+  if (value == null || value === '') {
+    return null;
+  }
+  if (dayjs.isDayjs(value)) {
+    return value;
+  }
+  if (typeof value === 'string' && typeof format === 'string' && format) {
+    const _parsed = dayjs(value, format, true);
+    if (_parsed.isValid()) {
+      return _parsed;
+    }
+  }
+  const parsed = dayjs(value);
+  return parsed.isValid() ? parsed : null;
+};
+const toDayjsValue = (value, format) => {
+  if (Array.isArray(value)) {
+    return value.map(item => toDayjs(item, format));
+  }
+  return toDayjs(value, format);
+};
+
+/**
+ * Date-only pickers should emit start of the selected unit (e.g. day at 00:00:00),
+ * not "selected date + current clock time".
+ */
+const startOfByPicker = (value, picker = 'date') => {
+  if (!value || !dayjs.isDayjs(value) || !value.isValid()) {
+    return value;
+  }
+  const unit = picker === 'week' ? 'week' : picker === 'month' ? 'month' : picker === 'quarter' ? 'quarter' : picker === 'year' ? 'year' : 'day';
+  return value.startOf(unit);
+};
+const normalizeDateValue = (value, picker = 'date') => {
+  if (Array.isArray(value)) {
+    return value.map(item => startOfByPicker(item, picker));
+  }
+  return startOfByPicker(value, picker);
+};
+
+const _excluded$4 = ["value", "defaultValue", "format", "showTime", "picker", "onChange"];
+
+/**
+ * Wrap antd picker so string/number initial values from form/API become dayjs.
+ * When options.stripTime is true and showTime is off, onChange values are
+ * normalized to start of the picker unit (date → 00:00:00).
+ */
+const withDayjsValue = (WrappedComponent, options = {}) => {
+  const {
+    stripTime = false,
+    defaultPicker = 'date'
+  } = options;
+  const Component = forwardRef((_ref, ref) => {
+    let {
+        value,
+        defaultValue,
+        format,
+        showTime,
+        picker,
+        onChange
+      } = _ref,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    const mergedPicker = picker || defaultPicker;
+    const shouldStripTime = stripTime && !showTime;
+    const mergedValue = useMemo(() => {
+      if (value === undefined) {
+        return undefined;
+      }
+      const next = toDayjsValue(value, format);
+      return shouldStripTime ? normalizeDateValue(next, mergedPicker) : next;
+    }, [value, format, shouldStripTime, mergedPicker]);
+    const mergedDefaultValue = useMemo(() => {
+      if (defaultValue === undefined) {
+        return undefined;
+      }
+      const next = toDayjsValue(defaultValue, format);
+      return shouldStripTime ? normalizeDateValue(next, mergedPicker) : next;
+    }, [defaultValue, format, shouldStripTime, mergedPicker]);
+    const handleChange = useCallback((next, ...rest) => {
+      if (!onChange) {
+        return;
+      }
+      if (shouldStripTime && next != null) {
+        onChange(normalizeDateValue(next, mergedPicker), ...rest);
+        return;
+      }
+      onChange(next, ...rest);
+    }, [onChange, shouldStripTime, mergedPicker]);
+    return /*#__PURE__*/React__default.createElement(WrappedComponent, _extends$3({}, props, {
+      ref: ref,
+      format: format,
+      showTime: showTime,
+      picker: picker,
+      value: mergedValue,
+      defaultValue: mergedDefaultValue,
+      onChange: handleChange
+    }));
+  });
+  Component.displayName = `withDayjsValue(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+  Object.keys(WrappedComponent).filter(key => ['$$typeof', 'render', 'field'].indexOf(key) === -1).forEach(key => {
+    Component[key] = WrappedComponent[key];
+  });
+  return Component;
+};
+
 const {
   useOnChange: useOnChange$a
 } = hooks;
 const {
   RangePicker: RangePicker$1
 } = TimePicker;
+const DayjsTimePicker = withDayjsValue(TimePicker);
+const DayjsRangePicker$1 = withDayjsValue(RangePicker$1);
 const TimePickerInner = props => {
   const {
     formatMessage
@@ -179,9 +295,9 @@ const TimePickerInner = props => {
       label: mergedProps.label || ''
     })
   }, mergedProps));
-  return render(TimePicker);
+  return render(DayjsTimePicker);
 };
-TimePickerInner.Field = TimePicker;
+TimePickerInner.Field = DayjsTimePicker;
 const RangePickerInner$1 = props => {
   const {
     formatMessage
@@ -196,9 +312,9 @@ const RangePickerInner$1 = props => {
       label: mergedProps.label || ''
     })
   }, mergedProps));
-  return render(RangePicker$1);
+  return render(DayjsRangePicker$1);
 };
-RangePickerInner$1.Field = RangePicker$1;
+RangePickerInner$1.Field = DayjsRangePicker$1;
 const _TimePicker = withLocale(TimePickerInner);
 _TimePicker.RangePicker = withLocale(RangePickerInner$1);
 
@@ -855,30 +971,33 @@ const PickerTodayInner = _ref => {
     setOpenEnd(false);
   }, [onChange]);
 
-  // 处理开始时间变化
-  const handleStartChange = useCallback(date => {
+  // 开始日期确认后切到结束选择。
+  // 必须用 onSelect：已有值时再次点选同一天，antd 的 onChange 不会触发，弹层会直接关闭。
+  const switchToEndPicker = useCallback(date => {
+    if (!date) {
+      return;
+    }
     setTempStart(date);
-    isSwitchingRef.current = true; // 标记正在切换
+    isSwitchingRef.current = true;
     setOpenStart(false);
     setTimeout(() => {
       setOpenEnd(true);
       isSwitchingRef.current = false;
     }, 100);
   }, []);
+  const handleStartSelect = useCallback(date => {
+    switchToEndPicker(date);
+  }, [switchToEndPicker]);
 
-  // 处理结束时间变化（选择日期时实时更新显示，选择后确认值）
-  const handleEndChange = useCallback(date => {
-    if (date) {
-      // 选择了有效日期，确认值
-      if (!tempStart) return;
-      onChange([tempStart.toISOString(), date.toISOString()]);
-      setOpenEnd(false);
-      setTempStart(null);
-      setTempEnd(null);
-    } else {
-      // 清空选择
-      setTempEnd(null);
+  // 结束日期确认（同样用 onSelect，避免与当前结束值相同时无法提交）
+  const handleEndSelect = useCallback(date => {
+    if (!date || !tempStart) {
+      return;
     }
+    onChange([tempStart.toISOString(), date.toISOString()]);
+    setOpenEnd(false);
+    setTempStart(null);
+    setTempEnd(null);
   }, [tempStart, onChange]);
 
   // 点击"至今"按钮
@@ -982,7 +1101,7 @@ const PickerTodayInner = _ref => {
     open: openStart,
     onOpenChange: handleStartOpenChange,
     value: tempStart || parsedValue.start,
-    onChange: handleStartChange,
+    onSelect: handleStartSelect,
     renderExtraFooter: renderEmptyFooter,
     showNow: false,
     getPopupContainer: () => containerRef.current || document.body,
@@ -998,7 +1117,7 @@ const PickerTodayInner = _ref => {
     open: openEnd,
     onOpenChange: handleEndOpenChange,
     value: tempEnd || parsedValue.end,
-    onChange: handleEndChange,
+    onSelect: handleEndSelect,
     onPanelChange: handleEndPanelChange,
     disabledDate: endDisabledDate,
     renderExtraFooter: renderExtraFooter,
@@ -1031,6 +1150,22 @@ const {
   RangePicker,
   WeekPicker
 } = DatePicker;
+const DayjsDatePicker = withDayjsValue(DatePicker, {
+  stripTime: true,
+  defaultPicker: 'date'
+});
+const DayjsMonthPicker = MonthPicker ? withDayjsValue(MonthPicker, {
+  stripTime: true,
+  defaultPicker: 'month'
+}) : DayjsDatePicker;
+const DayjsRangePicker = withDayjsValue(RangePicker, {
+  stripTime: true,
+  defaultPicker: 'date'
+});
+const DayjsWeekPicker = WeekPicker ? withDayjsValue(WeekPicker, {
+  stripTime: true,
+  defaultPicker: 'week'
+}) : DayjsDatePicker;
 const DatePickerInner = props => {
   const {
     formatMessage
@@ -1045,9 +1180,9 @@ const DatePickerInner = props => {
       label: mergedProps.label || ''
     })
   }, mergedProps));
-  return render(DatePicker);
+  return render(DayjsDatePicker);
 };
-DatePickerInner.Field = DatePicker;
+DatePickerInner.Field = DayjsDatePicker;
 const MonthPickerInner = props => {
   const {
     formatMessage
@@ -1062,9 +1197,9 @@ const MonthPickerInner = props => {
       id: 'EndTime'
     })]
   }, mergedProps));
-  return render(MonthPicker);
+  return render(DayjsMonthPicker);
 };
-MonthPickerInner.Field = MonthPicker;
+MonthPickerInner.Field = DayjsMonthPicker;
 const RangePickerInner = props => {
   const {
     formatMessage
@@ -1079,9 +1214,9 @@ const RangePickerInner = props => {
       id: 'EndTime'
     })]
   }, mergedProps));
-  return render(RangePicker);
+  return render(DayjsRangePicker);
 };
-RangePickerInner.Field = RangePicker;
+RangePickerInner.Field = DayjsRangePicker;
 const WeekPickerInner = props => {
   const {
     formatMessage
@@ -1096,9 +1231,9 @@ const WeekPickerInner = props => {
       id: 'EndTime'
     })]
   }, mergedProps));
-  return render(WeekPicker);
+  return render(DayjsWeekPicker);
 };
-WeekPickerInner.Field = WeekPicker;
+WeekPickerInner.Field = DayjsWeekPicker;
 const _DatePicker = withLocale(DatePickerInner);
 _DatePicker.MonthPicker = withLocale(MonthPickerInner);
 _DatePicker.RangePicker = withLocale(RangePickerInner);