@teamias/rex-design 0.0.26 → 0.0.27

package/dist/components/base-form/components/ProFormDateRangePickerV2.js

@@ -19,7 +19,9 @@ import { DatePicker, Form } from 'antd';
 import dayjs from 'dayjs';
 import { get } from 'radash';
 import { useContext, useMemo, useState } from 'react';
+import { ResetView } from "./ResetView";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var ProFormDateRangePickerV2 = function ProFormDateRangePickerV2(_ref) {
   var name = _ref.name,
@@ -95,17 +97,29 @@ export var ProFormDateRangePickerV2 = function ProFormDateRangePickerV2(_ref) {
                 startValue = form.getFieldValue(startFieldName);
                 endValue = form.getFieldValue(endFieldName);
                 if (!(!startValue || !endValue)) {
-                  _context.next = 6;
+                  _context.next = 7;
                   break;
                 }
                 setValidateStatus('error');
                 setHelp(!startValue && !endValue ? "\u8BF7\u9009\u62E9".concat(label || '') : '');
+                form.setFields([{
+                  name: startFieldName,
+                  errors: !startValue ? ["\u8BF7\u9009\u62E9".concat(label || '')] : []
+                }, {
+                  name: endFieldName,
+                  errors: !endValue ? ["\u8BF7\u9009\u62E9".concat(label || '')] : []
+                }]);
                 return _context.abrupt("return", Promise.reject(new Error("\u8BF7\u9009\u62E9".concat(label || ''))));
-              case 6:
+              case 7:
                 setValidateStatus('');
                 setHelp('');
+                form.setFields([{
+                  name: startFieldName
+                }, {
+                  name: endFieldName
+                }]);
                 return _context.abrupt("return", Promise.resolve());
-              case 9:
+              case 11:
               case "end":
                 return _context.stop();
             }
@@ -153,23 +167,35 @@ export var ProFormDateRangePickerV2 = function ProFormDateRangePickerV2(_ref) {
             children: startValue && endValue ? "".concat(startValue, " ~ ").concat(endValue) : '-'
           });
         }
-        return /*#__PURE__*/_jsx(DatePicker.RangePicker, _objectSpread(_objectSpread({
-          placeholder: placeholder,
-          format: dataFormat,
-          allowClear: allowClear
-        }, fieldProps), {}, {
-          style: _objectSpread({
-            width: '100%'
-          }, fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.style),
-          value: startValue && endValue ? [dayjs(startValue), dayjs(endValue)] : undefined,
-          onChange: function onChange(dates, dateStrings) {
-            form.setFieldValue(startFieldName, dateStrings[0] || undefined);
-            form.setFieldValue(endFieldName, dateStrings[1] || undefined);
-            setTimeout(function () {
-              validateRules === null || validateRules === void 0 || validateRules[0].validator().catch(function () {});
-            }, 0);
-          }
-        }));
+        return /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx(ResetView, {
+            data: data,
+            onReset: function onReset() {
+              if (!form.getFieldsError([startFieldName, endFieldName]).map(function (ii) {
+                return ii.errors;
+              }).flat().length && validateStatus !== '') {
+                setValidateStatus('');
+                setHelp('');
+              }
+            }
+          }), /*#__PURE__*/_jsx(DatePicker.RangePicker, _objectSpread(_objectSpread({
+            placeholder: placeholder,
+            format: dataFormat,
+            allowClear: allowClear
+          }, fieldProps), {}, {
+            style: _objectSpread({
+              width: '100%'
+            }, fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.style),
+            value: startValue && endValue ? [dayjs(startValue), dayjs(endValue)] : undefined,
+            onChange: function onChange(dates, dateStrings) {
+              form.setFieldValue(startFieldName, dateStrings[0] || undefined);
+              form.setFieldValue(endFieldName, dateStrings[1] || undefined);
+              setTimeout(function () {
+                validateRules === null || validateRules === void 0 || validateRules[0].validator().catch(function () {});
+              }, 0);
+            }
+          }))]
+        });
       }
     })]
   }));

package/dist/components/base-form/components/ProFormDigitRangeV2.js

@@ -13,11 +13,12 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { ProForm } from '@ant-design/pro-components';
+import { ProForm, ProFormDependency } from '@ant-design/pro-components';
 import { EditOrReadOnlyContext } from '@ant-design/pro-form/es/BaseForm/EditOrReadOnlyContext';
 import { Form, Input, InputNumber, Space } from 'antd';
-import { useCallback, useContext, useMemo } from 'react';
+import { useCallback, useContext, useMemo, useState } from 'react';
 import { RenderText } from "./RenderText";
+import { ResetView } from "./ResetView";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export var ProFormDigitRangeV2 = function ProFormDigitRangeV2(_ref) {
@@ -37,6 +38,16 @@ export var ProFormDigitRangeV2 = function ProFormDigitRangeV2(_ref) {
   var context = useContext(EditOrReadOnlyContext);
   var formReadonly = context.mode === 'read';
 
+  // 校验状态
+  var _useState = useState(''),
+    _useState2 = _slicedToArray(_useState, 2),
+    validateStatus = _useState2[0],
+    setValidateStatus = _useState2[1];
+  var _useState3 = useState(''),
+    _useState4 = _slicedToArray(_useState3, 2),
+    help = _useState4[0],
+    setHelp = _useState4[1];
+
   // 获取字段名
   var _useMemo = useMemo(function () {
       return name || [undefined, undefined];
@@ -46,84 +57,56 @@ export var ProFormDigitRangeV2 = function ProFormDigitRangeV2(_ref) {
     maxFieldName = _useMemo2[1];
 
   // 生成校验规则
-  var minRules = useMemo(function () {
-    if (!required) return undefined;
-    if (requiredMode === 'both') {
-      // 两边都必填
-      return [{
-        required: true,
-        message: '请输入最小值'
-      }];
-    } else {
-      // 至少填一边
-      return [{
-        validator: function () {
-          var _validator = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_, value) {
-            var maxValue;
-            return _regeneratorRuntime().wrap(function _callee$(_context) {
-              while (1) switch (_context.prev = _context.next) {
-                case 0:
-                  maxValue = form.getFieldValue(maxFieldName);
-                  if (!((value === null || value === undefined || value === '') && (maxValue === null || maxValue === undefined || maxValue === ''))) {
-                    _context.next = 3;
-                    break;
-                  }
-                  return _context.abrupt("return", Promise.reject(new Error('请至少输入一个值')));
-                case 3:
-                  return _context.abrupt("return", Promise.resolve());
-                case 4:
-                case "end":
-                  return _context.stop();
-              }
-            }, _callee);
-          }));
-          function validator(_x, _x2) {
-            return _validator.apply(this, arguments);
-          }
-          return validator;
-        }()
-      }];
-    }
-  }, [required, requiredMode, maxFieldName, form]);
-  var maxRules = useMemo(function () {
+  var validateRules = useMemo(function () {
     if (!required) return undefined;
-    if (requiredMode === 'both') {
-      // 两边都必填
-      return [{
-        required: true,
-        message: '请输入最大值'
-      }];
-    } else {
-      // 至少填一边
-      return [{
-        validator: function () {
-          var _validator2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(_, value) {
-            var minValue;
-            return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-              while (1) switch (_context2.prev = _context2.next) {
-                case 0:
-                  minValue = form.getFieldValue(minFieldName);
-                  if (!((value === null || value === undefined || value === '') && (minValue === null || minValue === undefined || minValue === ''))) {
-                    _context2.next = 3;
-                    break;
-                  }
-                  return _context2.abrupt("return", Promise.reject(new Error('请至少输入一个值')));
-                case 3:
-                  return _context2.abrupt("return", Promise.resolve());
-                case 4:
-                case "end":
-                  return _context2.stop();
-              }
-            }, _callee2);
-          }));
-          function validator(_x3, _x4) {
-            return _validator2.apply(this, arguments);
-          }
-          return validator;
-        }()
-      }];
-    }
-  }, [required, requiredMode, minFieldName, form]);
+    return [{
+      validator: function () {
+        var _validator = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+          var minValue, maxValue;
+          return _regeneratorRuntime().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                minValue = form.getFieldValue(minFieldName);
+                maxValue = form.getFieldValue(maxFieldName);
+                if (!(requiredMode === 'both')) {
+                  _context.next = 9;
+                  break;
+                }
+                if (!(minValue === null || minValue === undefined || minValue === '' || maxValue === null || maxValue === undefined || maxValue === '')) {
+                  _context.next = 7;
+                  break;
+                }
+                setValidateStatus('error');
+                setHelp((minValue === null || minValue === undefined || minValue === '') && (maxValue === null || maxValue === undefined || maxValue === '') ? "\u8BF7\u8F93\u5165".concat(label || '数值范围') : minValue === null || minValue === undefined || minValue === '' ? '请输入最小值' : '请输入最大值');
+                return _context.abrupt("return", Promise.reject(new Error("\u8BF7\u8F93\u5165".concat(label || '数值范围'))));
+              case 7:
+                _context.next = 13;
+                break;
+              case 9:
+                if (!((minValue === null || minValue === undefined || minValue === '') && (maxValue === null || maxValue === undefined || maxValue === ''))) {
+                  _context.next = 13;
+                  break;
+                }
+                setValidateStatus('error');
+                setHelp('请至少输入一个值');
+                return _context.abrupt("return", Promise.reject(new Error('请至少输入一个值')));
+              case 13:
+                setValidateStatus('');
+                setHelp('');
+                return _context.abrupt("return", Promise.resolve());
+              case 16:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        function validator() {
+          return _validator.apply(this, arguments);
+        }
+        return validator;
+      }()
+    }];
+  }, [required, requiredMode, minFieldName, maxFieldName, form, label]);
 
   // 处理最小值失去焦点
   var handleMinBlur = useCallback(function () {
@@ -156,11 +139,28 @@ export var ProFormDigitRangeV2 = function ProFormDigitRangeV2(_ref) {
       }
     }, 0);
   }, [autoSwap, minFieldName, maxFieldName, form]);
-  return /*#__PURE__*/_jsx(Form.Item, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsxs(Form.Item, _objectSpread(_objectSpread({
     label: label,
-    required: required
+    required: required,
+    validateStatus: validateStatus,
+    help: help
   }, formItemProps), {}, {
-    children: /*#__PURE__*/_jsxs(Space.Compact, {
+    children: [/*#__PURE__*/_jsx(ProFormDependency, {
+      name: [minFieldName, maxFieldName],
+      children: function children(data) {
+        return /*#__PURE__*/_jsx(ResetView, {
+          data: data,
+          onReset: function onReset() {
+            if (!form.getFieldsError([minFieldName, maxFieldName]).map(function (ii) {
+              return ii.errors;
+            }).flat().length && validateStatus !== '') {
+              setValidateStatus('');
+              setHelp('');
+            }
+          }
+        });
+      }
+    }), /*#__PURE__*/_jsxs(Space.Compact, {
       style: {
         width: '100%'
       },
@@ -168,7 +168,8 @@ export var ProFormDigitRangeV2 = function ProFormDigitRangeV2(_ref) {
         noStyle: true,
         name: minFieldName,
         initialValue: initialValue === null || initialValue === void 0 ? void 0 : initialValue[0],
-        rules: minRules,
+        rules: validateRules,
+        validateStatus: validateStatus,
         children: formReadonly ? /*#__PURE__*/_jsx(RenderText, {}) : /*#__PURE__*/_jsx(InputNumber, _objectSpread(_objectSpread({
           placeholder: (placeholder === null || placeholder === void 0 ? void 0 : placeholder[0]) || '最小值',
           precision: precision,
@@ -177,7 +178,12 @@ export var ProFormDigitRangeV2 = function ProFormDigitRangeV2(_ref) {
           style: _objectSpread({
             flex: 1
           }, fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.style),
-          onBlur: handleMinBlur
+          onBlur: handleMinBlur,
+          onChange: function onChange() {
+            setTimeout(function () {
+              validateRules === null || validateRules === void 0 || validateRules[0].validator().catch(function () {});
+            }, 0);
+          }
         }))
       }), formReadonly ? /*#__PURE__*/_jsx(RenderText, {
         value: "~",
@@ -199,7 +205,8 @@ export var ProFormDigitRangeV2 = function ProFormDigitRangeV2(_ref) {
         noStyle: true,
         name: maxFieldName,
         initialValue: initialValue === null || initialValue === void 0 ? void 0 : initialValue[1],
-        rules: maxRules,
+        rules: validateRules,
+        validateStatus: validateStatus,
         children: formReadonly ? /*#__PURE__*/_jsx(RenderText, {}) : /*#__PURE__*/_jsx(InputNumber, _objectSpread(_objectSpread({
           placeholder: (placeholder === null || placeholder === void 0 ? void 0 : placeholder[1]) || '最大值',
           precision: precision,
@@ -208,9 +215,14 @@ export var ProFormDigitRangeV2 = function ProFormDigitRangeV2(_ref) {
           style: _objectSpread({
             flex: 1
           }, fieldProps === null || fieldProps === void 0 ? void 0 : fieldProps.style),
-          onBlur: handleMaxBlur
+          onBlur: handleMaxBlur,
+          onChange: function onChange() {
+            setTimeout(function () {
+              validateRules === null || validateRules === void 0 || validateRules[0].validator().catch(function () {});
+            }, 0);
+          }
         }))
       })]
-    })
+    })]
   }));
 };

package/dist/components/base-form/components/ResetView.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+export declare const ResetView: FC<{
+    data: any;
+    onReset: () => void;
+}>;

package/dist/components/base-form/components/ResetView.js

@@ -0,0 +1,15 @@
+import { useDebounceEffect } from 'ahooks';
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var ResetView = function ResetView(_ref) {
+  var data = _ref.data,
+    onReset = _ref.onReset;
+  useDebounceEffect(function () {
+    onReset();
+  }, [data], {
+    wait: 0,
+    trailing: true,
+    leading: false
+  });
+  return /*#__PURE__*/_jsx(_Fragment, {});
+};

package/dist/components/base-form/demo/BaseProFormDateRangePickerV2.js

@@ -20,8 +20,8 @@ export default (function () {
         data: {
           // min: 2,
           // max: 1111,
-        },
-        testName: 'qweqwe'
+        }
+        // testName: 'qweqwe',
       }
       // size="small"
       // disabled
@@ -32,10 +32,10 @@ export default (function () {
         console.log(values);
       },
       children: [/*#__PURE__*/_jsx(ProFormDateRangePickerV2, {
-        required: false,
+        required: true,
         label: "\u65E5\u671F\u8303\u56F4",
-        name: [['data', 'start'], ['data', 'end']],
-        initialValue: -30
+        name: [['data', 'start'], ['data', 'end']]
+        // initialValue={-30}
         // dataFormat="YYYY-MM-DD"
       }), /*#__PURE__*/_jsx(ProFormText, {
         required: true,

package/dist/components/base-form/demo/BaseProFormDigitRangeV2.js

@@ -35,12 +35,13 @@ export default (function () {
         required: true,
         label: "\u6570\u5B57\u8303\u56F4",
         name: [['data', 'min'], ['data', 'max']],
-        initialValue: [undefined, 3],
-        formItemProps: {
-          style: {
-            margin: 0
-          }
-        },
+        initialValue: [undefined, 3]
+        // formItemProps={{
+        //   style: {
+        //     margin: 0,
+        //   },
+        // }}
+        ,
         fieldProps: {
           min: 0,
           max: 1000

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@teamias/rex-design",
-  "version": "0.0.26",
+  "version": "0.0.27",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",