@kne/react-form-antd 4.1.7 → 4.1.9

package/dist/index.modern.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { forwardRef, useState, useRef, useCallback, useLayoutEffect, useEffect, useMemo, createContext, useContext } from 'react';
+import React__default, { createContext, useContext, forwardRef, useState, useRef, useCallback, useLayoutEffect, useEffect, useMemo } from 'react';
 import classnames from 'classnames';
 import ReactForm__default, { preset as preset$2, useReset, useSubmit } from '@kne/react-form';
 export * from '@kne/react-form';
@@ -55,7 +55,16 @@ var preset = props => {
   preset$2(globalParams.rules);
 };
 
-const _excluded$6 = ["className", "cache", "enterSubmit", "scrollToError", "scrollProps", "type", "size", "children"];
+/** 仅控制表单布局；字段弹层、字号等字段级移动端优化不读这里 */
+const FormMobileContext = createContext(undefined);
+const useFormMobile = () => useContext(FormMobileContext);
+const useFormIsMobile = () => {
+  const mobile = useFormMobile();
+  const isMobile = useIsMobile();
+  return mobile === false ? false : isMobile;
+};
+
+const _excluded$7 = ["className", "cache", "enterSubmit", "scrollToError", "scrollProps", "type", "size", "mobile", "children"];
 const {
   ScrollToError,
   EnterSubmit,
@@ -72,10 +81,13 @@ const Form = forwardRef((originProps, ref) => {
       scrollProps = {
         block: 'center'
       },
+      mobile: originMobile,
       children
     } = originProps,
-    props = _objectWithoutPropertiesLoose(originProps, _excluded$6);
+    props = _objectWithoutPropertiesLoose(originProps, _excluded$7);
   const isMobile = useIsMobile();
+  const parentMobile = useFormMobile();
+  const mobile = originMobile !== undefined ? originMobile : parentMobile !== undefined ? parentMobile : globalParams.mobile;
   const baseClass = 'react-form';
   let computedClass = baseClass;
   const {
@@ -93,11 +105,13 @@ const Form = forwardRef((originProps, ref) => {
   }
   const maxLabel = /*#__PURE__*/React__default.createElement(MaxLabelProvider, null, children);
   return /*#__PURE__*/React__default.createElement("form", {
-    className: classnames(baseClass, computedClass, isMobile && 'is-mobile', className),
+    className: classnames(baseClass, computedClass, isMobile && 'is-mobile', mobile === false && 'is-mobile-disabled', className),
     onSubmit: e => {
       e.preventDefault();
       e.stopPropagation();
     }
+  }, /*#__PURE__*/React__default.createElement(FormMobileContext.Provider, {
+    value: mobile
   }, /*#__PURE__*/React__default.createElement(SizeProvider, {
     value: {
       size
@@ -108,7 +122,7 @@ const Form = forwardRef((originProps, ref) => {
     cache: cache
   }) : null, scrollToError ? /*#__PURE__*/React__default.createElement(ScrollToError, {
     scrollProps: scrollProps
-  }) : null, enterSubmit ? /*#__PURE__*/React__default.createElement(EnterSubmit, null, maxLabel) : maxLabel)));
+  }) : null, enterSubmit ? /*#__PURE__*/React__default.createElement(EnterSubmit, null, maxLabel) : maxLabel))));
 });
 
 const locale$1 = {
@@ -31282,18 +31296,12 @@ const useMobileFieldPopup = ({
   disabled: _disabled = false,
   unlockTriggerWidth: _unlockTriggerWidth = false,
   syncListHeight: _syncListHeight = false,
-  dropdownVisibleEvent: _dropdownVisibleEvent = false,
   anchorRef: anchorRefProp,
   open: openProp,
   onOpenChange,
-  onDropdownVisibleChange,
   getPopupContainer: getPopupContainerProp,
   classNames: classNamesProp,
   styles: stylesProp,
-  popupClassName,
-  dropdownClassName,
-  popupStyle,
-  dropdownStyle,
   placement,
   zIndex,
   inputReadOnly,
@@ -31566,8 +31574,7 @@ const useMobileFieldPopup = ({
       updatePopupMetrics();
     }
     onOpenChange && onOpenChange(next);
-    onDropdownVisibleChange && onDropdownVisibleChange(next);
-  }, [controlled, isMobile, onDropdownVisibleChange, onOpenChange, updatePopupMetrics]);
+  }, [controlled, isMobile, onOpenChange, updatePopupMetrics]);
   const close = useCallback(() => {
     emitOpenChange(false);
   }, [emitOpenChange]);
@@ -31593,7 +31600,6 @@ const useMobileFieldPopup = ({
     left: (_popupMetrics$left = popupMetrics.left) != null ? _popupMetrics$left : 0,
     zIndex: panelZIndex
   };
-  const mergedPopupStyle = Object.assign({}, popupStyle, dropdownStyle, mobilePopupStyle);
   let popupProps = {};
   if (isMobile) {
     popupProps = {
@@ -31604,16 +31610,9 @@ const useMobileFieldPopup = ({
       // 位置由我们按可用空间计算，禁止 antd 再自动翻转，否则遮罩会和弹层错位
       autoAdjustOverflow: false,
       transitionName: '',
-      popupClassName: classnames(popupClassName, popupClass),
-      dropdownClassName: classnames(dropdownClassName, popupClass),
-      popupStyle: mergedPopupStyle,
-      dropdownStyle: mergedPopupStyle,
       classNames: mergeClassNames(classNamesProp, popupClass),
       styles: mergeStyles(stylesProp, mobilePopupStyle)
     };
-    if (_dropdownVisibleEvent) {
-      popupProps.onDropdownVisibleChange = emitOpenChange;
-    }
     if (_kind === 'picker' || _kind === 'range-picker') {
       popupProps.inputReadOnly = inputReadOnly !== undefined ? inputReadOnly : true;
     }
@@ -31646,13 +31645,13 @@ const useMobileFieldPopup = ({
   };
 };
 
-const _excluded$5 = ["disableMobilePopup"];
+const _excluded$6 = ["disableMobilePopup"];
 const withMobilePopup = (WrappedComponent, options = {}) => {
   const MobilePopupField = forwardRef((props, ref) => {
     const {
         disableMobilePopup
       } = props,
-      rest = _objectWithoutPropertiesLoose(props, _excluded$5);
+      rest = _objectWithoutPropertiesLoose(props, _excluded$6);
     const {
       isMobile,
       mask,
@@ -31662,14 +31661,9 @@ const withMobilePopup = (WrappedComponent, options = {}) => {
       disabled: disableMobilePopup,
       open: rest.open,
       onOpenChange: rest.onOpenChange,
-      onDropdownVisibleChange: rest.onDropdownVisibleChange,
       getPopupContainer: rest.getPopupContainer,
       classNames: rest.classNames,
       styles: rest.styles,
-      popupClassName: rest.popupClassName,
-      dropdownClassName: rest.dropdownClassName,
-      popupStyle: rest.popupStyle,
-      dropdownStyle: rest.dropdownStyle,
       placement: rest.placement,
       zIndex: rest.zIndex,
       inputReadOnly: rest.inputReadOnly,
@@ -31773,7 +31767,7 @@ const normalizeDateValue = (value, picker = 'date') => {
   return startOfByPicker(value, picker);
 };
 
-const _excluded$4 = ["value", "defaultValue", "format", "showTime", "picker", "onChange"];
+const _excluded$5 = ["value", "defaultValue", "format", "showTime", "picker", "onChange"];
 
 /**
  * Wrap antd picker so string/number initial values from form/API become dayjs.
@@ -31794,7 +31788,7 @@ const withDayjsValue = (WrappedComponent, options = {}) => {
         picker,
         onChange
       } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+      props = _objectWithoutPropertiesLoose(_ref, _excluded$5);
     const mergedPicker = picker || defaultPicker;
     const shouldStripTime = stripTime && !showTime;
     const mergedValue = useMemo(() => {
@@ -31951,8 +31945,7 @@ const {
 const MobileSelect = withMobilePopup(Select, {
   kind: 'select',
   unlockTriggerWidth: true,
-  syncListHeight: true,
-  dropdownVisibleEvent: true
+  syncListHeight: true
 });
 const SelectInner = props => {
   const {
@@ -31975,7 +31968,7 @@ SelectInner.Option = Select.Option;
 SelectInner.OptGroup = Select.OptGroup;
 const _Select = withLocale(SelectInner);
 
-const _excluded$3 = ["onChange"];
+const _excluded$4 = ["onChange"];
 const {
   useOnChange: useOnChange$7
 } = hooks;
@@ -31983,7 +31976,7 @@ const RadioGroup = _ref => {
   let {
       onChange
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$4);
   props = Object.assign({}, {
     fieldName: 'radioGroup'
   }, props);
@@ -32001,9 +31994,30 @@ const _RadioGroup = props => {
 _RadioGroup.Field = RadioGroup;
 _RadioGroup.Radio = Radio;
 
+const MOBILE_STEPPER_CLASS = 'react-form-antd-mobile-stepper';
+const withMobileStepper = WrappedComponent => {
+  const MobileStepper = forwardRef((props, ref) => {
+    const isMobile = useIsMobile();
+    if (!isMobile) {
+      return /*#__PURE__*/React__default.createElement(WrappedComponent, _extends$3({
+        ref: ref
+      }, props));
+    }
+    return /*#__PURE__*/React__default.createElement(WrappedComponent, _extends$3({
+      ref: ref
+    }, props, {
+      mode: props.mode || 'spinner',
+      className: classnames(props.className, MOBILE_STEPPER_CLASS)
+    }));
+  });
+  MobileStepper.displayName = `withMobileStepper(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+  return MobileStepper;
+};
+
 const {
   useDecorator: useDecorator$1
 } = hooks;
+const MobileInputNumber = withMobileStepper(InputNumber);
 const InputNumberFieldInner = props => {
   const {
     formatMessage
@@ -32019,7 +32033,7 @@ const InputNumberFieldInner = props => {
       label: mergedProps.label
     })
   }, mergedProps));
-  return render(InputNumber);
+  return render(MobileInputNumber);
 };
 InputNumberFieldInner.Field = InputNumber;
 const InputNumberField = withLocale(InputNumberFieldInner);
@@ -32468,7 +32482,7 @@ if (process.env.NODE_ENV !== 'production') {
 }
 var CloseCircleFilled$1 = RefIcon;
 
-const _excluded$2 = ["soFarText", "soFarValue", "picker", "placeholder"];
+const _excluded$3 = ["soFarText", "soFarValue", "picker", "placeholder"];
 const {
   useOnChange: useOnChange$6
 } = hooks;
@@ -32479,7 +32493,7 @@ const PickerTodayInner = _ref => {
       picker = 'date',
       placeholder
     } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$3);
   const {
     formatMessage
   } = useIntl();
@@ -32957,18 +32971,26 @@ const Slider = props => {
 };
 Slider.Field = Slider$1;
 
-const ResetButton = props => {
+const _excluded$2 = ["className"];
+const ResetButton = _ref => {
+  let {
+      className
+    } = _ref,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded$2);
   const resetProps = useReset();
-  return /*#__PURE__*/React__default.createElement(Button, _extends$3({}, resetProps, props));
+  return /*#__PURE__*/React__default.createElement(Button, _extends$3({}, resetProps, props, {
+    className: classnames('react-form__action-button', className)
+  }));
 };
 
-const _excluded$1 = ["type", "realtime", "disabled"],
+const _excluded$1 = ["type", "realtime", "disabled", "className"],
   _excluded2 = ["isPass", "isLoading"];
 const SubmitButton = _ref => {
   let {
       type = 'primary',
       realtime,
-      disabled = false
+      disabled = false,
+      className
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
   const _useSubmit = useSubmit(props),
@@ -32981,20 +33003,24 @@ const SubmitButton = _ref => {
     type: type,
     loading: isLoading,
     disabled: disabled || (realtime ? !isPass : false)
-  }, props, submitProps));
+  }, props, submitProps, {
+    className: classnames('react-form__action-button', className)
+  }));
 };
 
-const _excluded = ["onClick"];
+const _excluded = ["onClick", "className"];
 const {
   useCacheRemove
 } = hooks;
 const CancelButton = _ref => {
   let {
-      onClick
+      onClick,
+      className
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const remove = useCacheRemove();
   return /*#__PURE__*/React__default.createElement(Button, _extends$3({}, props, {
+    className: classnames('react-form__action-button', className),
     onClick: (...args) => {
       remove();
       onClick && onClick(...args);
@@ -33021,5 +33047,5 @@ const fields = {
   Slider
 };
 
-export { CancelButton, Cascader, Checkbox, CheckboxGroup, _DatePicker as DatePicker, RangePickerToday as DatePickerToday, FormAntd, InputField as Input, InputNumberField as InputNumber, _RadioGroup as RadioGroup, Rate, ResetButton, _Select as Select, Slider, SubmitButton, Switch, TextArea, _TimePicker as TimePicker, _TreeSelect as TreeSelect, Form as default, fields, preset };
+export { CancelButton, Cascader, Checkbox, CheckboxGroup, _DatePicker as DatePicker, RangePickerToday as DatePickerToday, FormAntd, FormMobileContext, InputField as Input, InputNumberField as InputNumber, _RadioGroup as RadioGroup, Rate, ResetButton, _Select as Select, Slider, SubmitButton, Switch, TextArea, _TimePicker as TimePicker, _TreeSelect as TreeSelect, Form as default, fields, preset, useFormIsMobile, useFormMobile };
 //# sourceMappingURL=index.modern.js.map