@kne/react-form-antd 4.1.3 → 4.1.5

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);
 
@@ -524,7 +640,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) => {
@@ -649,7 +765,7 @@ const IconBase = props => {
   } = props;
   const svgRef = React.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;
   }
@@ -689,6 +805,10 @@ const Icon = /*#__PURE__*/React.forwardRef((props, ref) => {
     prefixCls = 'anticon',
     rootClassName
   } = React.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'
@@ -720,11 +840,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.createElement(AntdIcon, _extends$1({}, props, {
@@ -740,11 +857,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.createElement(AntdIcon, _extends({}, props, {
@@ -1033,6 +1147,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
@@ -1047,9 +1177,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
@@ -1064,9 +1194,9 @@ const MonthPickerInner = props => {
       id: 'EndTime'
     })]
   }, mergedProps));
-  return render(MonthPicker);
+  return render(DayjsMonthPicker);
 };
-MonthPickerInner.Field = MonthPicker;
+MonthPickerInner.Field = DayjsMonthPicker;
 const RangePickerInner = props => {
   const {
     formatMessage
@@ -1081,9 +1211,9 @@ const RangePickerInner = props => {
       id: 'EndTime'
     })]
   }, mergedProps));
-  return render(RangePicker);
+  return render(DayjsRangePicker);
 };
-RangePickerInner.Field = RangePicker;
+RangePickerInner.Field = DayjsRangePicker;
 const WeekPickerInner = props => {
   const {
     formatMessage
@@ -1098,9 +1228,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);