@kne/react-form-antd 4.1.3 → 4.1.5

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);
 
@@ -517,7 +649,7 @@ function warning(valid, message) {
   warningOnce(valid, `[@ant-design/icons] ${message}`);
 }
 function isIconDefinition(target) {
-  return typeof target === 'object' && typeof target.name === 'string' && typeof target.theme === 'string' && (typeof target.icon === 'object' || typeof target.icon === 'function');
+  return target !== null && typeof target === 'object' && typeof target.name === 'string' && typeof target.theme === 'string' && (typeof target.icon === 'object' || typeof target.icon === 'function');
 }
 function normalizeAttrs(attrs = {}) {
   return Object.keys(attrs).reduce((acc, key) => {
@@ -642,7 +774,7 @@ const IconBase = props => {
   } = props;
   const svgRef = React__namespace.useRef(null);
   useInsertStyles(svgRef);
-  warning(isIconDefinition(icon), `icon should be icon definiton, but got ${icon}`);
+  warning(isIconDefinition(icon), `icon should be icon definiton, but got ${typeof icon}`);
   if (!isIconDefinition(icon)) {
     return null;
   }
@@ -682,6 +814,10 @@ const Icon = /*#__PURE__*/React__namespace.forwardRef((props, ref) => {
     prefixCls = 'anticon',
     rootClassName
   } = React__namespace.useContext(Context);
+  warning(isIconDefinition(icon), `icon should be icon definiton, but got ${typeof icon}`);
+  if (!isIconDefinition(icon)) {
+    return null;
+  }
   const classString = clsx(rootClassName, prefixCls, {
     [`${prefixCls}-${icon.name}`]: !!icon.name,
     [`${prefixCls}-spin`]: !!spin || icon.name === 'loading'
@@ -713,11 +849,8 @@ if (process.env.NODE_ENV !== 'production') {
 var AntdIcon = Icon;
 
 // This icon file is generated automatically.
-
 var CalendarOutlined$2 = { "icon": { "tag": "svg", "attrs": { "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z" } }] }, "name": "calendar", "theme": "outlined" };
-var _default$1 = CalendarOutlined$2;
-
-var CalendarOutlinedSvg = _default$1;
+var CalendarOutlinedSvg = CalendarOutlined$2;
 
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
 const CalendarOutlined = (props, ref) => /*#__PURE__*/React__namespace.createElement(AntdIcon, _extends$1({}, props, {
@@ -733,11 +866,8 @@ if (process.env.NODE_ENV !== 'production') {
 var CalendarOutlined$1 = RefIcon$1;
 
 // This icon file is generated automatically.
-
 var CloseCircleFilled$2 = { "icon": { "tag": "svg", "attrs": { "fill-rule": "evenodd", "viewBox": "64 64 896 896", "focusable": "false" }, "children": [{ "tag": "path", "attrs": { "d": "M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z" } }] }, "name": "close-circle", "theme": "filled" };
-var _default = CloseCircleFilled$2;
-
-var CloseCircleFilledSvg = _default;
+var CloseCircleFilledSvg = CloseCircleFilled$2;
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const CloseCircleFilled = (props, ref) => /*#__PURE__*/React__namespace.createElement(AntdIcon, _extends({}, props, {
@@ -1047,6 +1177,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;
@@ -1060,9 +1206,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;
@@ -1076,9 +1222,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;
@@ -1092,9 +1238,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;
@@ -1108,9 +1254,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);