@kne/react-form-antd 4.1.4 → 4.1.6

package/README.md

@@ -539,6 +539,23 @@ const DatePickerExample = () => {
                 </Form>
             </Card>
 
+            <Card title="字符串初始值（兼容 antd 6）" size="small">
+                <Form
+                    data={{
+                        stringDate: '2024-06-15',
+                        stringRange: ['2024-01-01', '2024-12-31'],
+                        stringTime: '14:30:00'
+                    }}
+                    onSubmit={setFormData}
+                >
+                    <Flex vertical gap={16}>
+                        <DatePicker name="stringDate" label="日期字符串" placeholder="请选择日期" />
+                        <DatePicker.RangePicker name="stringRange" label="范围字符串" placeholder={['开始日期', '结束日期']} />
+                        <TimePicker name="stringTime" label="时间字符串" format="HH:mm:ss" placeholder="请选择时间" />
+                    </Flex>
+                </Form>
+            </Card>
+
             <Card title="TimePicker 时间选择" size="small">
                 <Form onSubmit={setFormData}>
                     <Flex vertical gap={16}>

package/dist/index.js

@@ -6,6 +6,7 @@ var merge = require('lodash/merge');
 var antd = require('antd');
 var reactIntl = require('@kne/react-intl');
 var dayjs = require('dayjs');
+var customParseFormat = require('dayjs/plugin/customParseFormat');
 var useControlValue = require('@kne/use-control-value');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -34,6 +35,7 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 var ReactForm__default = /*#__PURE__*/_interopDefaultLegacy(ReactForm);
 var merge__default = /*#__PURE__*/_interopDefaultLegacy(merge);
 var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+var customParseFormat__default = /*#__PURE__*/_interopDefaultLegacy(customParseFormat);
 var useControlValue__default = /*#__PURE__*/_interopDefaultLegacy(useControlValue);
 
 function _extends$3() {
@@ -77,7 +79,7 @@ var preset = (function (props) {
   ReactForm.preset(globalParams.rules);
 });
 
-var _excluded$4 = ["className", "cache", "enterSubmit", "scrollToError", "scrollProps", "type", "size", "children"];
+var _excluded$5 = ["className", "cache", "enterSubmit", "scrollToError", "scrollProps", "type", "size", "children"];
 var ScrollToError = reactFormHelper.widget.ScrollToError,
   EnterSubmit = reactFormHelper.widget.EnterSubmit,
   FormStore = reactFormHelper.widget.FormStore,
@@ -95,7 +97,7 @@ var Form = React.forwardRef(function (originProps, ref) {
       block: 'center'
     } : _originProps$scrollPr,
     children = originProps.children,
-    props = _objectWithoutPropertiesLoose(originProps, _excluded$4);
+    props = _objectWithoutPropertiesLoose(originProps, _excluded$5);
   var baseClass = 'react-form';
   var computedClass = baseClass;
   var _Object$assign = Object.assign({
@@ -179,8 +181,138 @@ TreeSelectInner.Field = antd.TreeSelect;
 TreeSelectInner.TreeNode = antd.TreeSelect.TreeNode;
 var _TreeSelect = withLocale(TreeSelectInner);
 
+dayjs__default["default"].extend(customParseFormat__default["default"]);
+
+/**
+ * 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.
+ */
+var toDayjs = function toDayjs(value, format) {
+  if (value == null || value === '') {
+    return null;
+  }
+  if (dayjs__default["default"].isDayjs(value)) {
+    return value;
+  }
+  if (typeof value === 'string' && typeof format === 'string' && format) {
+    var _parsed = dayjs__default["default"](value, format, true);
+    if (_parsed.isValid()) {
+      return _parsed;
+    }
+  }
+  var parsed = dayjs__default["default"](value);
+  return parsed.isValid() ? parsed : null;
+};
+var toDayjsValue = function toDayjsValue(value, format) {
+  if (Array.isArray(value)) {
+    return value.map(function (item) {
+      return 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".
+ */
+var startOfByPicker = function startOfByPicker(value, picker) {
+  if (picker === void 0) {
+    picker = 'date';
+  }
+  if (!value || !dayjs__default["default"].isDayjs(value) || !value.isValid()) {
+    return value;
+  }
+  var unit = picker === 'week' ? 'week' : picker === 'month' ? 'month' : picker === 'quarter' ? 'quarter' : picker === 'year' ? 'year' : 'day';
+  return value.startOf(unit);
+};
+var normalizeDateValue = function normalizeDateValue(value, picker) {
+  if (picker === void 0) {
+    picker = 'date';
+  }
+  if (Array.isArray(value)) {
+    return value.map(function (item) {
+      return startOfByPicker(item, picker);
+    });
+  }
+  return startOfByPicker(value, picker);
+};
+
+var _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).
+ */
+var withDayjsValue = function withDayjsValue(WrappedComponent, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  var _options = options,
+    _options$stripTime = _options.stripTime,
+    stripTime = _options$stripTime === void 0 ? false : _options$stripTime,
+    _options$defaultPicke = _options.defaultPicker,
+    defaultPicker = _options$defaultPicke === void 0 ? 'date' : _options$defaultPicke;
+  var Component = React.forwardRef(function (_ref, ref) {
+    var value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      format = _ref.format,
+      showTime = _ref.showTime,
+      picker = _ref.picker,
+      onChange = _ref.onChange,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+    var mergedPicker = picker || defaultPicker;
+    var shouldStripTime = stripTime && !showTime;
+    var mergedValue = React.useMemo(function () {
+      if (value === undefined) {
+        return undefined;
+      }
+      var next = toDayjsValue(value, format);
+      return shouldStripTime ? normalizeDateValue(next, mergedPicker) : next;
+    }, [value, format, shouldStripTime, mergedPicker]);
+    var mergedDefaultValue = React.useMemo(function () {
+      if (defaultValue === undefined) {
+        return undefined;
+      }
+      var next = toDayjsValue(defaultValue, format);
+      return shouldStripTime ? normalizeDateValue(next, mergedPicker) : next;
+    }, [defaultValue, format, shouldStripTime, mergedPicker]);
+    var handleChange = React.useCallback(function (next) {
+      var rest = [].slice.call(arguments, 1);
+      if (!onChange) {
+        return;
+      }
+      if (shouldStripTime && next != null) {
+        onChange.apply(void 0, [normalizeDateValue(next, mergedPicker)].concat(rest));
+        return;
+      }
+      onChange.apply(void 0, [next].concat(rest));
+    }, [onChange, shouldStripTime, mergedPicker]);
+    return /*#__PURE__*/React__default["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(function (key) {
+    return ['$$typeof', 'render', 'field'].indexOf(key) === -1;
+  }).forEach(function (key) {
+    Component[key] = WrappedComponent[key];
+  });
+  return Component;
+};
+
 var useOnChange$a = reactFormHelper.hooks.useOnChange;
 var RangePicker$1 = antd.TimePicker.RangePicker;
+var DayjsTimePicker = withDayjsValue(antd.TimePicker);
+var DayjsRangePicker$1 = withDayjsValue(RangePicker$1);
 var TimePickerInner = function TimePickerInner(props) {
   var _useIntl = reactIntl.useIntl(),
     formatMessage = _useIntl.formatMessage;
@@ -194,9 +326,9 @@ var TimePickerInner = function TimePickerInner(props) {
       label: mergedProps.label || ''
     })
   }, mergedProps));
-  return render(antd.TimePicker);
+  return render(DayjsTimePicker);
 };
-TimePickerInner.Field = antd.TimePicker;
+TimePickerInner.Field = DayjsTimePicker;
 var RangePickerInner$1 = function RangePickerInner(props) {
   var _useIntl2 = reactIntl.useIntl(),
     formatMessage = _useIntl2.formatMessage;
@@ -210,9 +342,9 @@ var RangePickerInner$1 = function RangePickerInner(props) {
       label: mergedProps.label || ''
     })
   }, mergedProps));
-  return render(RangePicker$1);
+  return render(DayjsRangePicker$1);
 };
-RangePickerInner$1.Field = RangePicker$1;
+RangePickerInner$1.Field = DayjsRangePicker$1;
 var _TimePicker = withLocale(TimePickerInner);
 _TimePicker.RangePicker = withLocale(RangePickerInner$1);
 
@@ -863,30 +995,33 @@ var PickerTodayInner = function PickerTodayInner(_ref) {
     setOpenEnd(false);
   }, [onChange]);
 
-  // 处理开始时间变化
-  var handleStartChange = React.useCallback(function (date) {
+  // 开始日期确认后切到结束选择。
+  // 必须用 onSelect：已有值时再次点选同一天，antd 的 onChange 不会触发，弹层会直接关闭。
+  var switchToEndPicker = React.useCallback(function (date) {
+    if (!date) {
+      return;
+    }
     setTempStart(date);
-    isSwitchingRef.current = true; // 标记正在切换
+    isSwitchingRef.current = true;
     setOpenStart(false);
     setTimeout(function () {
       setOpenEnd(true);
       isSwitchingRef.current = false;
     }, 100);
   }, []);
+  var handleStartSelect = React.useCallback(function (date) {
+    switchToEndPicker(date);
+  }, [switchToEndPicker]);
 
-  // 处理结束时间变化（选择日期时实时更新显示，选择后确认值）
-  var handleEndChange = React.useCallback(function (date) {
-    if (date) {
-      // 选择了有效日期，确认值
-      if (!tempStart) return;
-      onChange([tempStart.toISOString(), date.toISOString()]);
-      setOpenEnd(false);
-      setTempStart(null);
-      setTempEnd(null);
-    } else {
-      // 清空选择
-      setTempEnd(null);
+  // 结束日期确认（同样用 onSelect，避免与当前结束值相同时无法提交）
+  var handleEndSelect = React.useCallback(function (date) {
+    if (!date || !tempStart) {
+      return;
     }
+    onChange([tempStart.toISOString(), date.toISOString()]);
+    setOpenEnd(false);
+    setTempStart(null);
+    setTempEnd(null);
   }, [tempStart, onChange]);
 
   // 点击"至今"按钮
@@ -996,7 +1131,7 @@ var PickerTodayInner = function PickerTodayInner(_ref) {
     open: openStart,
     onOpenChange: handleStartOpenChange,
     value: tempStart || parsedValue.start,
-    onChange: handleStartChange,
+    onSelect: handleStartSelect,
     renderExtraFooter: renderEmptyFooter,
     showNow: false,
     getPopupContainer: function getPopupContainer() {
@@ -1014,7 +1149,7 @@ var PickerTodayInner = function PickerTodayInner(_ref) {
     open: openEnd,
     onOpenChange: handleEndOpenChange,
     value: tempEnd || parsedValue.end,
-    onChange: handleEndChange,
+    onSelect: handleEndSelect,
     onPanelChange: handleEndPanelChange,
     disabledDate: endDisabledDate,
     renderExtraFooter: renderExtraFooter,
@@ -1045,6 +1180,22 @@ var useOnChange$5 = reactFormHelper.hooks.useOnChange;
 var MonthPicker = antd.DatePicker.MonthPicker,
   RangePicker = antd.DatePicker.RangePicker,
   WeekPicker = antd.DatePicker.WeekPicker;
+var DayjsDatePicker = withDayjsValue(antd.DatePicker, {
+  stripTime: true,
+  defaultPicker: 'date'
+});
+var DayjsMonthPicker = MonthPicker ? withDayjsValue(MonthPicker, {
+  stripTime: true,
+  defaultPicker: 'month'
+}) : DayjsDatePicker;
+var DayjsRangePicker = withDayjsValue(RangePicker, {
+  stripTime: true,
+  defaultPicker: 'date'
+});
+var DayjsWeekPicker = WeekPicker ? withDayjsValue(WeekPicker, {
+  stripTime: true,
+  defaultPicker: 'week'
+}) : DayjsDatePicker;
 var DatePickerInner = function DatePickerInner(props) {
   var _useIntl = reactIntl.useIntl(),
     formatMessage = _useIntl.formatMessage;
@@ -1058,9 +1209,9 @@ var DatePickerInner = function DatePickerInner(props) {
       label: mergedProps.label || ''
     })
   }, mergedProps));
-  return render(antd.DatePicker);
+  return render(DayjsDatePicker);
 };
-DatePickerInner.Field = antd.DatePicker;
+DatePickerInner.Field = DayjsDatePicker;
 var MonthPickerInner = function MonthPickerInner(props) {
   var _useIntl2 = reactIntl.useIntl(),
     formatMessage = _useIntl2.formatMessage;
@@ -1074,9 +1225,9 @@ var MonthPickerInner = function MonthPickerInner(props) {
       id: 'EndTime'
     })]
   }, mergedProps));
-  return render(MonthPicker);
+  return render(DayjsMonthPicker);
 };
-MonthPickerInner.Field = MonthPicker;
+MonthPickerInner.Field = DayjsMonthPicker;
 var RangePickerInner = function RangePickerInner(props) {
   var _useIntl3 = reactIntl.useIntl(),
     formatMessage = _useIntl3.formatMessage;
@@ -1090,9 +1241,9 @@ var RangePickerInner = function RangePickerInner(props) {
       id: 'EndTime'
     })]
   }, mergedProps));
-  return render(RangePicker);
+  return render(DayjsRangePicker);
 };
-RangePickerInner.Field = RangePicker;
+RangePickerInner.Field = DayjsRangePicker;
 var WeekPickerInner = function WeekPickerInner(props) {
   var _useIntl4 = reactIntl.useIntl(),
     formatMessage = _useIntl4.formatMessage;
@@ -1106,9 +1257,9 @@ var WeekPickerInner = function WeekPickerInner(props) {
       id: 'EndTime'
     })]
   }, mergedProps));
-  return render(WeekPicker);
+  return render(DayjsWeekPicker);
 };
-WeekPickerInner.Field = WeekPicker;
+WeekPickerInner.Field = DayjsWeekPicker;
 var _DatePicker = withLocale(DatePickerInner);
 _DatePicker.MonthPicker = withLocale(MonthPickerInner);
 _DatePicker.RangePicker = withLocale(RangePickerInner);