doui-react 1.0.0 → 2.0.0

package/lib/input/component/number.d.ts

@@ -1,4 +1,4 @@
-import { InputNumberProps } from 'antd/lib/input-number';
+import { InputNumberProps } from 'antd/es/input-number';
 import { InputProps } from '../type';
 export declare function useNumber({ validate, onBlur, refs, allowResetOnEmpty, ...props }: InputProps): InputNumberProps;
 export declare function Number(props: InputProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/input/component/number.js

@@ -10,43 +10,22 @@ var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/obje
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _api = require("../../api");
 var _antd = require("antd");
-var _lodash = _interopRequireDefault(require("lodash"));
-var _reactUse = require("react-use");
 var _style = _interopRequireDefault(require("../style"));
 var _utils = require("./utils");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _excluded = ["validate", "onBlur", "refs", "allowResetOnEmpty"];
-/**
- * 前提条件: 1. 输入的内容为 1.1.1    2. precision 为 0 时
- * Bug: Blur 后 Antd 会自动将显示的值 format 为 1，但 value 还是 1.1，导致真实值和显示的值不同
- */
-function useChangeWhenHasPrecision(_ref) {
-  var value = _ref.value,
-    precision = _ref.precision,
-    onChange = _ref.onChange;
-  var prevValue = (0, _reactUse.usePrevious)(value);
-  function onBlur() {
-    if (prevValue === value || _lodash.default.isNil(value) || _lodash.default.isNil(precision)) {
-      return;
-    }
-    var numberValue = (0, _utils.formatNumber)(+value, precision);
-    onChange === null || onChange === void 0 || onChange(numberValue);
-  }
-  return onBlur;
-}
-function useNumber(_ref2) {
-  var validate = _ref2.validate,
-    onBlur = _ref2.onBlur,
-    refs = _ref2.refs,
-    allowResetOnEmpty = _ref2.allowResetOnEmpty,
-    props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-  var changeOnBlur = useChangeWhenHasPrecision(props);
+function useNumber(_ref) {
+  var validate = _ref.validate,
+    onBlur = _ref.onBlur,
+    refs = _ref.refs,
+    allowResetOnEmpty = _ref.allowResetOnEmpty,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var resetOnEmpty = (0, _utils.useResetOnEmpty)((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
     allowResetOnEmpty: allowResetOnEmpty
   }));
   return (0, _objectSpread2.default)({
     ref: refs,
-    onBlur: (0, _api.mergeFunction)(changeOnBlur, onBlur, resetOnEmpty)
+    onBlur: (0, _api.mergeFunction)(onBlur, resetOnEmpty)
   }, props);
 }
 function Number(props) {

package/lib/input/component/utils.d.ts

@@ -1,15 +1,16 @@
 import { validateScript, validateString } from "../../api";
 import { InputProps } from "..";
+import { FocusEvent } from 'react';
 export declare const validateTypeMap: {
     default: typeof validateString;
     script: typeof validateScript;
 };
 export declare function validateInput(value: string, validate?: InputProps['validate']): boolean;
 export declare function validateEnter(value: any, allowEnter: boolean): boolean;
-export declare function useInputValidate({ value, onChange, onBlur, validate, refs, allowEnter, allowResetOnEmpty, ...props }: InputProps): any;
-export declare function formatNumber(value: number, precision: number): number;
+export declare function useInputValidate({ value, onChange, onBlur, validate, refs, allowEnter, allowResetOnEmpty, allowTrim, ...props }: InputProps): any;
 interface ResetOnEmptyProps extends InputProps {
     validate?: (value: string | number) => boolean;
 }
 export declare function useResetOnEmpty({ name, allowResetOnEmpty, validate }: ResetOnEmptyProps): () => Promise<void>;
+export declare function useTrim({ value, onChange, allowTrim }: InputProps): (event: FocusEvent<HTMLInputElement>) => Promise<void>;
 export {};

package/lib/input/component/utils.js

@@ -4,9 +4,9 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.formatNumber = formatNumber;
 exports.useInputValidate = useInputValidate;
 exports.useResetOnEmpty = useResetOnEmpty;
+exports.useTrim = useTrim;
 exports.validateEnter = validateEnter;
 exports.validateInput = validateInput;
 exports.validateTypeMap = void 0;
@@ -19,7 +19,7 @@ var _form = require("../../form");
 var _utils = require("../../form/component/utils");
 var _delay = _interopRequireDefault(require("delay"));
 var _lodash = _interopRequireDefault(require("lodash"));
-var _excluded = ["value", "onChange", "onBlur", "validate", "refs", "allowEnter", "allowResetOnEmpty"];
+var _excluded = ["value", "onChange", "onBlur", "validate", "refs", "allowEnter", "allowResetOnEmpty", "allowTrim"];
 var validateTypeMap = exports.validateTypeMap = {
   default: _api.validateString,
   script: _api.validateScript
@@ -47,6 +47,7 @@ function useInputValidate(_ref) {
     _ref$allowEnter = _ref.allowEnter,
     allowEnter = _ref$allowEnter === void 0 ? true : _ref$allowEnter,
     allowResetOnEmpty = _ref.allowResetOnEmpty,
+    allowTrim = _ref.allowTrim,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var resetOnEmpty = useResetOnEmpty((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
     allowResetOnEmpty: allowResetOnEmpty,
@@ -54,6 +55,11 @@ function useInputValidate(_ref) {
       return !value;
     }
   }));
+  var trim = useTrim({
+    value: value,
+    onChange: onChange,
+    allowTrim: allowTrim
+  });
   var handleChange = function handleChange(e) {
     var value = e.target.value;
     if (validateInput(value, validate) && validateEnter(value, allowEnter)) {
@@ -67,12 +73,9 @@ function useInputValidate(_ref) {
     autoComplete: 'off',
     value: _lodash.default.isNil(value) ? '' : value,
     onChange: handleChange,
-    onBlur: (0, _api.mergeFunction)(onBlur, resetOnEmpty)
+    onBlur: (0, _api.mergeFunction)(trim, resetOnEmpty, onBlur)
   });
 }
-function formatNumber(value, precision) {
-  return +value.toFixed(precision);
-}
 function useResetOnEmpty(_ref2) {
   var name = _ref2.name,
     allowResetOnEmpty = _ref2.allowResetOnEmpty,
@@ -111,4 +114,36 @@ function useResetOnEmpty(_ref2) {
     return _onBlur.apply(this, arguments);
   }
   return onBlur;
+}
+function useTrim(_ref3) {
+  var value = _ref3.value,
+    onChange = _ref3.onChange,
+    allowTrim = _ref3.allowTrim;
+  function onBlur(_x) {
+    return _onBlur2.apply(this, arguments);
+  }
+  function _onBlur2() {
+    _onBlur2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(event) {
+      var trimValue;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (!(!allowTrim || !value)) {
+              _context2.next = 2;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 2:
+            trimValue = _lodash.default.trim("".concat(value));
+            onChange === null || onChange === void 0 || onChange(trimValue);
+            _lodash.default.set(event, 'target.value', trimValue);
+          case 5:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return _onBlur2.apply(this, arguments);
+  }
+  return onBlur;
 }

package/lib/input/type/index.d.ts

@@ -2,9 +2,9 @@ import { BaseComponentProps } from "../../api";
 import { inputMap } from "../component";
 import { validateTypeMap } from "../component/utils";
 import { InputProps as AntdInputProps } from 'antd';
-import { InputNumberProps } from 'antd/lib/input-number';
-import { PasswordProps } from 'antd/lib/input/Password';
-import { TextAreaProps } from 'antd/lib/input/TextArea';
+import { InputNumberProps } from 'antd/es/input-number';
+import { PasswordProps } from 'antd/es/input/Password';
+import { TextAreaProps } from 'antd/es/input/TextArea';
 type UnionType = BaseComponentProps & AntdInputProps & TextAreaProps & InputNumberProps & PasswordProps;
 export interface InputProps extends Omit<UnionType, 'form' | 'onChange'> {
     /**
@@ -32,6 +32,11 @@ export interface InputProps extends Omit<UnionType, 'form' | 'onChange'> {
      * @default false
      */
     allowResetOnEmpty?: boolean;
+    /**
+     * @description 是否 trim 输入框前后空格
+     * @default false
+     */
+    allowTrim?: boolean;
     /**
      * @description 输入框值改变的回调
      */

package/lib/modal-prompt/component/index.js

@@ -50,7 +50,9 @@ function openConfirm(_ref) {
       style: {
         display: showCancel ? 'unset' : 'none'
       }
-    }
+    },
+    okText: '确定',
+    cancelText: '取消'
   }, props);
   return new Promise(function (resolve) {
     _antd.Modal.confirm((0, _objectSpread2.default)((0, _objectSpread2.default)({}, mergedProps), {}, {

package/lib/modal-prompt/component/utils.js

@@ -39,7 +39,8 @@ function openModalFunction(props) {
     duration = _mergeProps.duration,
     restProps = (0, _objectWithoutProperties2.default)(_mergeProps, _excluded2);
   return new Promise(function (resolve) {
-    var modal = _antd.Modal[type]((0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
+    var modalMethod = _antd.Modal[type];
+    var modal = modalMethod((0, _objectSpread2.default)((0, _objectSpread2.default)({}, restProps), {}, {
       onOk: function onOk() {
         return resolve();
       }

package/lib/modal-prompt/type/index.d.ts

@@ -1,5 +1,5 @@
-import { ModalFuncProps as AntdModalFuncProps } from 'antd/lib/modal/Modal';
-import { SpinProps } from 'antd/lib/spin';
+import type { ModalFuncProps as AntdModalFuncProps } from 'antd/es/modal';
+import { SpinProps } from 'antd/es/spin';
 import { CSSProperties, ReactNode } from 'react';
 export interface ConfirmModalProps extends AntdModalFuncProps {
     /**

package/lib/open-modal/component/footer.d.ts

@@ -1,2 +1,2 @@
 import { HStackProps } from "../../stack";
-export declare function Footer({ className, children: Children, ...props }: HStackProps): import("@emotion/react/jsx-runtime").JSX.Element;
+export declare function Footer({ className, children, ...props }: HStackProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/open-modal/component/footer.js

@@ -11,13 +11,12 @@ var _form = require("../../form");
 var _portal = require("../../portal");
 var _stack = require("../../stack");
 var _css = require("@emotion/css");
-var _lodash = _interopRequireDefault(require("lodash"));
 var _reactUse = require("react-use");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");
 var _excluded = ["className", "children"];
 function Footer(_ref) {
   var className = _ref.className,
-    Children = _ref.children,
+    children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useFormContext = (0, _form.useFormContext)(),
     setModalProps = _useFormContext.setModalProps;
@@ -26,7 +25,6 @@ function Footer(_ref) {
       footer: null
     });
   });
-  var component = _lodash.default.isFunction(Children) ? (0, _jsxRuntime.jsx)(Children, {}) : Children;
   return (0, _jsxRuntime.jsx)(_portal.Portal, {
     container: function container(current) {
       return current.closest('.ant-modal-content');
@@ -35,7 +33,7 @@ function Footer(_ref) {
       className: (0, _css.cx)('ant-modal-footer', className),
       justify: "right"
     }, props), {}, {
-      children: component
+      children: children
     }))
   });
 }

package/lib/open-modal/component/modal.js

@@ -24,9 +24,9 @@ var Modal = exports.Modal = function Modal(props) {
     ok = context.ok,
     close = context.close;
   return (0, _jsxRuntime.jsx)(_hook.ModalProvider, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, context), {}, {
-    children: (0, _jsxRuntime.jsx)(_antd.Modal, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    children: (0, _jsxRuntime.jsxs)(_antd.Modal, (0, _objectSpread2.default)((0, _objectSpread2.default)({
       open: open,
-      destroyOnClose: true
+      destroyOnHidden: true
     }, modalProps), {}, {
       title: (0, _jsxRuntime.jsx)(_text.Text, {
         children: modalProps.title
@@ -34,9 +34,17 @@ var Modal = exports.Modal = function Modal(props) {
       confirmLoading: confirmLoading,
       onCancel: close,
       onOk: ok,
-      children: (0, _jsxRuntime.jsx)(_form.Form, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, formProps), {}, {
+      children: [(0, _jsxRuntime.jsx)(_antd.Divider, {
+        style: {
+          margin: '15px 0 24px'
+        }
+      }), (0, _jsxRuntime.jsx)(_form.Form, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, formProps), {}, {
         context: context
-      }))
+      })), (0, _jsxRuntime.jsx)(_antd.Divider, {
+        style: {
+          margin: '15px 0 20px'
+        }
+      })]
     }))
   }));
 };

package/lib/open-modal/component/utils.js

@@ -81,7 +81,7 @@ function getModalAndFormProps(props) {
     footer: _lodash.default.isNull(formProps.footer) ? null : undefined,
     // 为 null 时，不显示 footer
     css: _style.default.wrapper({
-      bodyBottomMargin: getBodyBottomMargin(bodyBottomMargin, formProps),
+      bodyBottomMargin: getBodyBottomMargin(bodyBottomMargin),
       titleCenter: titleCenter
     }),
     style: modalProps.centered ? {} : {
@@ -94,14 +94,10 @@ function getModalAndFormProps(props) {
     modalProps: mergedModalProps
   };
 }
-function getBodyBottomMargin(bodyBottomMargin, formProps) {
-  var _formProps$items;
+function getBodyBottomMargin(bodyBottomMargin) {
   if (!_lodash.default.isNil(bodyBottomMargin)) {
     return (0, _api.transformValueWithStyleUnit)(bodyBottomMargin);
   }
-  if ((_formProps$items = formProps.items) !== null && _formProps$items !== void 0 && _formProps$items.length) {
-    return '10px';
-  }
 }
 function shouldEnableButton(_ref2) {
   var _onValidate;

package/lib/open-modal/hook/use-modal.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useModal = useModal;
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _usePatchElement3 = _interopRequireDefault(require("antd/lib/_util/hooks/usePatchElement"));
+var _usePatchElement3 = _interopRequireDefault(require("antd/es/_util/hooks/usePatchElement"));
 var _lodash = _interopRequireDefault(require("lodash"));
 var _component = require("../component");
 var _jsxRuntime = require("@emotion/react/jsx-runtime");

package/lib/open-modal/style/index.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _api = require("../../api");
 var _react = require("@emotion/react");
 var _templateObject, _templateObject2, _templateObject3;
 function titleStyle(titleCenter) {
@@ -19,7 +18,7 @@ var style = {
   wrapper: function wrapper(_ref) {
     var bodyBottomMargin = _ref.bodyBottomMargin,
       titleCenter = _ref.titleCenter;
-    return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n\n    .ant-modal-title {\n      font-weight: 600;\n      ", "\n    }\n\n    .ant-modal-body {\n      padding-bottom: ", ";\n    }\n  "])), _api.commonFontFamily, titleStyle(titleCenter), bodyBottomMargin);
+    return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n    .ant-modal-title {\n      font-size: 16px;\n      ", "\n    }\n\n    .ant-modal-body {\n      padding-bottom: ", ";\n    }\n  "])), titleStyle(titleCenter), bodyBottomMargin);
   }
 };
 var _default = exports.default = style;

package/lib/open-modal/style/wrap.js

@@ -9,5 +9,5 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _css = require("@emotion/css");
 var _templateObject;
 function getWrapStyle(wrapStyle) {
-  return (0, _css.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    &.ant-modal-centered .ant-select-dropdown {\n      text-align: left;\n    }\n\n    ", "\n  "])), wrapStyle);
+  return (0, _css.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n  "])), wrapStyle);
 }

package/lib/open-modal/type/index.d.ts

@@ -1,7 +1,7 @@
 import { FunctionReturn } from "../../api";
 import { FormInstance, FormItemProps, FormProps, FormValues } from "../../form";
 import { CSSObject } from '@emotion/react';
-import { ModalProps as AntdModalProps } from 'antd/lib/modal/Modal';
+import type { ModalProps as AntdModalProps } from 'antd/es/modal';
 import { ReactNode } from 'react';
 type AntdComponentProps = Omit<AntdModalProps, 'onOk' | 'children'> & Omit<FormProps, 'children' | 'content' | 'title'>;
 /**
@@ -56,7 +56,7 @@ export interface OpenModalProps extends AntdComponentProps {
      */
     onOk?(values: FormValues, form: FormInstance): FunctionReturn<boolean | void>;
     /**
-     * @description 关闭弹框时的回调
+     * @description 关闭弹窗时的回调
      */
     unmount?: () => void;
 }