doui-react 1.0.0

package/lib/form/component/utils.js

@@ -0,0 +1,467 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.focusFirstInput = focusFirstInput;
+exports.generateCollectionKey = generateCollectionKey;
+exports.generateFormItem = generateFormItem;
+exports.generateListItemName = generateListItemName;
+exports.getComponentProps = getComponentProps;
+exports.getContextWrapper = getContextWrapper;
+exports.getFormItemId = getFormItemId;
+exports.getFormItemProps = getFormItemProps;
+exports.getFormProps = getFormProps;
+exports.hasItemLoading = hasItemLoading;
+exports.isEmpty = isEmpty;
+exports.isValueNotExistInOptions = isValueNotExistInOptions;
+exports.noStyle = noStyle;
+exports.parseFormFailedError = parseFormFailedError;
+exports.parseValueWhenLabelInValue = parseValueWhenLabelInValue;
+exports.removeFormListFormItems = removeFormListFormItems;
+exports.removePrefixNameIfNeed = removePrefixNameIfNeed;
+exports.removeTableEditorFormItems = removeTableEditorFormItems;
+exports.scrollToFieldOnAdd = scrollToFieldOnAdd;
+exports.setContextWrapper = setContextWrapper;
+exports.transformKeyToPath = transformKeyToPath;
+exports.transformNameToPath = transformNameToPath;
+exports.transformOptions = transformOptions;
+exports.transformPathToName = transformPathToName;
+exports.updateNotExistValue = updateNotExistValue;
+exports.validateFormOnMount = validateFormOnMount;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _api = require("../../api");
+var _utils = require("../../select/component/utils");
+var _text = require("../../text");
+var _tooltip = require("../../tooltip");
+var _icons = require("@ant-design/icons");
+var _util = require("antd/lib/form/util");
+var _delay = _interopRequireDefault(require("delay"));
+var _lodash = _interopRequireDefault(require("lodash"));
+var _constant = require("./constant");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["onValidateFailed", "initialValues", "form"],
+  _excluded2 = ["tooltip"],
+  _excluded3 = ["className", "style"],
+  _excluded4 = ["children"];
+/* eslint-disable max-lines */
+function getFormProps(props) {
+  var _props$form;
+  var _$pick = _lodash.default.pick(props, _constant.antdFormPropsKeys),
+    onValidateFailed = _$pick.onValidateFailed,
+    initialValues = _$pick.initialValues,
+    form = _$pick.form,
+    formProps = (0, _objectWithoutProperties2.default)(_$pick, _excluded);
+  return _lodash.default.merge({
+    form: form,
+    name: (_props$form = props.form) === null || _props$form === void 0 ? void 0 : _props$form.getName(),
+    component: 'div',
+    autoComplete: 'off',
+    labelWrap: true,
+    validateMessages: {
+      required: '${label} is required.'
+    },
+    validateTrigger: ['onChange', 'onBlur'],
+    onFinishFailed: function onFinishFailed(error) {
+      var errorInfo = parseFormFailedError(error);
+      onValidateFailed === null || onValidateFailed === void 0 || onValidateFailed(errorInfo);
+    }
+  }, formProps);
+}
+function getFormItemProps(props) {
+  var _props$initialValue;
+  var _$pick2 = _lodash.default.pick(props, _constant.antdFormItemKeys),
+    tooltip = _$pick2.tooltip,
+    pickProps = (0, _objectWithoutProperties2.default)(_$pick2, _excluded2);
+  var name = removePrefixNameIfNeed(props.formListContext, props.name);
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, pickProps), {}, {
+    name: name,
+    tooltip: generateTooltipWithIcon(tooltip),
+    initialValue: (_props$initialValue = props.initialValue) !== null && _props$initialValue !== void 0 ? _props$initialValue : props.defaultValue
+  });
+}
+function generateTooltipWithIcon(tooltip) {
+  if (!tooltip) {
+    return;
+  }
+  var _getTooltipProps = (0, _tooltip.getTooltipProps)((0, _text.generateTooltip)(tooltip)),
+    className = _getTooltipProps.className,
+    style = _getTooltipProps.style,
+    tooltipProps = (0, _objectWithoutProperties2.default)(_getTooltipProps, _excluded3);
+  return (0, _objectSpread2.default)({
+    icon: (0, _jsxRuntime.jsx)(_icons.InfoCircleOutlined, {
+      className: className,
+      style: style
+    })
+  }, tooltipProps);
+}
+function getComponentProps(props) {
+  var keys = [].concat((0, _toConsumableArray2.default)(_constant.antdFormItemKeys), ['formListContext', 'formItemContext', 'children', 'validator', 'removeErrorOnBlur', 'preserveStatus']);
+  return _lodash.default.omit(props, keys);
+}
+function generateFormItem(props) {
+  var item = props.item,
+    formListContext = props.formListContext;
+  var processedItem = processFormItemProps(item, formListContext);
+  return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, processedItem), {}, {
+    rules: generateRules((0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+      item: processedItem
+    })),
+    type: item.type || 'input',
+    dependencies: transformNameToPath(item.dependencies)
+  });
+}
+function processFormItemProps(_ref, formListContext) {
+  var children = _ref.children,
+    item = (0, _objectWithoutProperties2.default)(_ref, _excluded4);
+  if (children) {
+    item.render = function (params) {
+      var props = _lodash.default.pick(params, ['refs', 'id', 'value', 'onChange', 'onBlur', 'onFocus']);
+      return (0, _api.renderComponentByType)(children, props);
+    };
+  }
+
+  // 将嵌套的 name 转换 antd form 的 name
+  _lodash.default.set(item, 'name', transformNameToPath(item.name));
+
+  // 挂载 formListContext 属性，并拼接 name
+  if (!_lodash.default.isEmpty(formListContext)) {
+    item.formListContext = formListContext;
+    item.isListField = true;
+    _lodash.default.set(item, 'name', generateListItemName(formListContext.name, item.name));
+  }
+  return item;
+}
+function generateListItemName(listName, name) {
+  return _lodash.default.flattenDeep([listName, name]).filter(function (x) {
+    return !_lodash.default.isNil(x);
+  });
+}
+function removePrefixNameIfNeed(formListContext, name) {
+  var listName = formListContext === null || formListContext === void 0 ? void 0 : formListContext.name;
+  return listName ? _lodash.default.drop(name, _lodash.default.castArray(listName).length) : name;
+}
+function generateRules(_ref2) {
+  var item = _ref2.item,
+    form = _ref2.form,
+    items = _ref2.items,
+    isFormList = _ref2.isFormList;
+  var rules = _lodash.default.clone(item.rules || []);
+  var params = {
+    form: form,
+    items: items
+  };
+  if (item.required && !item.rules) {
+    var message = generateRequiredMessage(item);
+    rules.push({
+      required: true,
+      message: message
+    });
+  }
+  if (item.validator) {
+    rules.push({
+      validator: item.validator
+    });
+  }
+  if (!isFormList && !item.removeErrorOnBlur) {
+    rules.push({
+      validator: function validator() {
+        return form.callMethod(_constant.registerMethods.getInternalErrors, item.name);
+      }
+    });
+  }
+  if (item.requiredInOptions) {
+    var _message = _lodash.default.isString(item.requiredInOptions) ? item.requiredInOptions : 'The value does not exist.';
+    var validator = function validator(_ref3) {
+      var _form$getItems;
+      var value = _ref3.value;
+      var options = (_form$getItems = form.getItems(item.name)) === null || _form$getItems === void 0 ? void 0 : _form$getItems.options;
+      if (!isEmpty(value) && isValueNotExistInOptions(value, options)) {
+        return _message;
+      }
+    };
+    rules.push({
+      validator: validator
+    });
+  }
+  return _lodash.default.map(rules, function (r) {
+    var rule = _lodash.default.clone(r);
+    var originValidator = r.validator;
+    if (originValidator) {
+      rule.validator = /*#__PURE__*/function () {
+        var _ref4 = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(__, value) {
+          var res;
+          return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+            while (1) switch (_context.prev = _context.next) {
+              case 0:
+                _context.next = 2;
+                return originValidator((0, _objectSpread2.default)({
+                  value: value,
+                  item: item
+                }, params));
+              case 2:
+                res = _context.sent;
+                return _context.abrupt("return", res ? Promise.reject(res) : Promise.resolve());
+              case 4:
+              case "end":
+                return _context.stop();
+            }
+          }, _callee);
+        }));
+        return function (_x, _x2) {
+          return _ref4.apply(this, arguments);
+        };
+      }();
+    }
+    return rule;
+  });
+}
+function generateRequiredMessage(item) {
+  if (_lodash.default.isString(item.required)) {
+    return item.required;
+  }
+  if (!item.label) {
+    return 'The value is required.';
+  }
+}
+function isValueNotExistInOptions(value, options) {
+  var optionsValue = (0, _utils.getOptionsValue)(options);
+  var values = parseValueWhenLabelInValue(value);
+  return !(0, _api.includesNonStrictMode)(optionsValue, values);
+}
+function isEmpty(value) {
+  var arr = (0, _lodash.default)(value).castArray().reject(_lodash.default.isNil).value();
+  return _lodash.default.isEmpty(arr);
+}
+function parseValueWhenLabelInValue(value) {
+  return _lodash.default.castArray(value).map(function (x) {
+    return _lodash.default.isPlainObject(x) ? x === null || x === void 0 ? void 0 : x.value : x;
+  });
+}
+function updateNotExistValue(_ref5) {
+  var form = _ref5.form,
+    value = _ref5.value,
+    name = _ref5.name,
+    options = _ref5.options,
+    _ref5$filterNotExistV = _ref5.filterNotExistValue,
+    filterNotExistValue = _ref5$filterNotExistV === void 0 ? false : _ref5$filterNotExistV,
+    labelInValue = _ref5.labelInValue;
+  if (filterNotExistValue === false || !isValueNotExistInOptions(value, options)) {
+    return;
+  }
+  var namePath = transformPathToName(name);
+  // 多选
+  if (_lodash.default.isArray(value)) {
+    var filteredValue = _lodash.default.filter(value, function (item) {
+      return !isValueNotExistInOptions(item, options);
+    });
+    form.setValue(namePath, filteredValue);
+    return true;
+  }
+
+  // 单选
+  if (filterNotExistValue === true) {
+    form.reset(namePath);
+  } else {
+    var val = filterNotExistValue === 'useFirstOption' ? getFirstOptionValue(options, labelInValue) : filterNotExistValue;
+    form.setValue(namePath, val);
+  }
+  return true;
+}
+function getFirstOptionValue(options, labelInValue) {
+  if (!options) {
+    return;
+  }
+  var value = _lodash.default.first((0, _utils.getOptionsValue)(options));
+  return labelInValue ? {
+    value: value
+  } : value;
+}
+function validateFormOnMount(_x3, _x4) {
+  return _validateFormOnMount.apply(this, arguments);
+}
+function _validateFormOnMount() {
+  _validateFormOnMount = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee2(_ref6, validateOnMount) {
+    var form, items, fields;
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee2$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          form = _ref6.form, items = _ref6.items;
+          fields = [];
+          _lodash.default.forEach(items, function (item) {
+            if (validateOnMount || _lodash.default.some(item.rules, 'validateOnMount')) {
+              fields.push(item.name);
+            }
+          });
+          if (!_lodash.default.isEmpty(fields)) {
+            _context2.next = 5;
+            break;
+          }
+          return _context2.abrupt("return");
+        case 5:
+          _context2.next = 7;
+          return form.validate(fields);
+        case 7:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee2);
+  }));
+  return _validateFormOnMount.apply(this, arguments);
+}
+function transformNameToPath(name) {
+  if (_lodash.default.isString(name) && _lodash.default.includes(name, '.')) {
+    return _lodash.default.toPath(name);
+  }
+  if (_lodash.default.isArray(name)) {
+    return _lodash.default.map(name, transformNameToPath);
+  }
+  return name;
+}
+function transformPathToName(path) {
+  if (_lodash.default.isNil(path)) {
+    return;
+  }
+  if (_lodash.default.isArray(path)) {
+    return (0, _lodash.default)(path).map(transformPathToName).reject(_lodash.default.isNil).join('.');
+  }
+  return path.toString();
+}
+function transformKeyToPath(params) {
+  var result = {};
+  _lodash.default.forEach(params, function (value, key) {
+    return _lodash.default.set(result, key, value);
+  });
+  return result;
+}
+function parseFormFailedError(error) {
+  var errorInfo = {};
+  error.errorFields.forEach(function (item) {
+    var key = item.name.join('.');
+    errorInfo[key] = item.errors[0];
+  });
+  return errorInfo;
+}
+function noStyle(item) {
+  return !item.name && !!item.render;
+}
+function transformOptions(item, values, params) {
+  var options = item.options,
+    type = item.type;
+  if (!type || !_lodash.default.isFunction(options)) {
+    return options;
+  }
+  if (['select', 'treeSelect'].includes(type)) {
+    return function () {
+      var search = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+      return options(values, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params), {}, {
+        search: search
+      }));
+    };
+  }
+  return options(values, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, params), {}, {
+    search: ''
+  }));
+}
+function focusFirstInput(_ref7) {
+  var _parseFocusFirst;
+  var form = _ref7.form,
+    items = _ref7.items,
+    focusFirstOnMount = _ref7.focusFirstOnMount;
+  var name = (_parseFocusFirst = parseFocusFirst(focusFirstOnMount)) !== null && _parseFocusFirst !== void 0 ? _parseFocusFirst : _lodash.default.get(items, '0.name');
+  if (!name) {
+    return;
+  }
+  form.focus(name);
+  return true;
+}
+function parseFocusFirst(focusFirstOnMount) {
+  if (focusFirstOnMount === true) {
+    return;
+  }
+  return focusFirstOnMount;
+}
+function scrollToFieldOnAdd(_x5) {
+  return _scrollToFieldOnAdd.apply(this, arguments);
+}
+function _scrollToFieldOnAdd() {
+  _scrollToFieldOnAdd = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee3(_ref8) {
+    var name, form, insertIndex, _ref8$focusFirstOnAdd, focusFirstOnAdd, prefixName, insertItems, focusFirstOnMount;
+    return (0, _regeneratorRuntime2.default)().wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
+        case 0:
+          name = _ref8.name, form = _ref8.form, insertIndex = _ref8.insertIndex, _ref8$focusFirstOnAdd = _ref8.focusFirstOnAdd, focusFirstOnAdd = _ref8$focusFirstOnAdd === void 0 ? true : _ref8$focusFirstOnAdd;
+          if (form) {
+            _context3.next = 3;
+            break;
+          }
+          return _context3.abrupt("return");
+        case 3:
+          _context3.next = 5;
+          return (0, _delay.default)(50);
+        case 5:
+          // 等待 form.setItems 完成
+          prefixName = "".concat(transformPathToName(name), ".").concat(insertIndex);
+          insertItems = form.getItems().filter(function (item) {
+            var _transformPathToName;
+            return (_transformPathToName = transformPathToName(item.name)) === null || _transformPathToName === void 0 ? void 0 : _transformPathToName.startsWith(prefixName);
+          });
+          focusFirstOnMount = _lodash.default.isString(focusFirstOnAdd) ? "".concat(prefixName, ".").concat(focusFirstOnAdd) : focusFirstOnAdd;
+          focusFirstInput({
+            form: form,
+            items: insertItems,
+            focusFirstOnMount: focusFirstOnMount
+          });
+        case 9:
+        case "end":
+          return _context3.stop();
+      }
+    }, _callee3);
+  }));
+  return _scrollToFieldOnAdd.apply(this, arguments);
+}
+function setContextWrapper(setContext) {
+  return function (nameOrParams, value) {
+    if (_lodash.default.isString(nameOrParams)) {
+      setContext(function (state) {
+        return _lodash.default.set(state, nameOrParams, value);
+      });
+      return;
+    }
+    nameOrParams && setContext(nameOrParams);
+  };
+}
+function getContextWrapper(context) {
+  return function (name) {
+    return name ? _lodash.default.get(context, name) : context;
+  };
+}
+function generateCollectionKey(name) {
+  return _lodash.default.camelCase(name);
+}
+function removeFormListFormItems(name, collectionItems) {
+  var namePath = transformPathToName(name);
+  return _lodash.default.omitBy(collectionItems, function (item) {
+    var _item$formListContext;
+    return transformPathToName((_item$formListContext = item.formListContext) === null || _item$formListContext === void 0 ? void 0 : _item$formListContext.name) === namePath;
+  });
+}
+function removeTableEditorFormItems(name, collectionItems) {
+  var namePath = transformPathToName(name);
+  return _lodash.default.omitBy(collectionItems, function (item) {
+    return _lodash.default.startsWith(transformPathToName(item.name), namePath);
+  });
+}
+function getFormItemId(name, form) {
+  return (0, _util.getFieldId)(_lodash.default.castArray(name), form.getName());
+}
+function hasItemLoading(items) {
+  return _lodash.default.some(items, {
+    loading: true
+  });
+}

package/lib/form/component/validator-item.d.ts

@@ -0,0 +1,7 @@
+import { FunctionReturn } from "../../api";
+import { FormContext, FormItemProps } from "..";
+export interface ValidatorItemProps extends Omit<FormItemProps, 'validator'> {
+    validator?: (props: FormContext) => FunctionReturn<boolean | void>;
+    shouldTriggerValidate?: any;
+}
+export declare function ValidatorItem({ validator, shouldTriggerValidate, ...props }: ValidatorItemProps): import("@emotion/react/jsx-runtime").JSX.Element;

package/lib/form/component/validator-item.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidatorItem = ValidatorItem;
+var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _ = require("./..");
+var _reactUse = require("react-use");
+var _constant = require("./constant");
+var _formItem = require("./form-item");
+var _jsxRuntime = require("@emotion/react/jsx-runtime");
+var _excluded = ["validator", "shouldTriggerValidate"];
+function ValidatorItem(_ref) {
+  var validator = _ref.validator,
+    shouldTriggerValidate = _ref.shouldTriggerValidate,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var context = (0, _.useFormContext)();
+  function validate() {
+    return _validate.apply(this, arguments);
+  }
+  function _validate() {
+    _validate = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee() {
+      var res;
+      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return validator === null || validator === void 0 ? void 0 : validator(context);
+          case 2:
+            res = _context.sent;
+            return _context.abrupt("return", res === false ? 'error' : '');
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return _validate.apply(this, arguments);
+  }
+  (0, _reactUse.useUpdateEffect)(function () {
+    context.form.callMethod(_constant.registerMethods.triggerValidate);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [shouldTriggerValidate]);
+  return (0, _jsxRuntime.jsx)(_formItem.FormItem, (0, _objectSpread2.default)((0, _objectSpread2.default)({
+    name: "__validatorItem__"
+  }, props), {}, {
+    hidden: true,
+    noStyle: true,
+    __noCollectState__: true,
+    validator: validate,
+    render: function render() {
+      return (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+    }
+  }));
+}

package/lib/form/hook/index.d.ts

@@ -0,0 +1,16 @@
+import { FunctionReturn } from "../../api";
+import { FormProps, FormValues } from "..";
+import { FormItemSelectProps } from "../component/form-item-map";
+import { SelectCallbackProps } from "../../select";
+import { DependencyList } from 'react';
+export * from './list-provider';
+export * from './provider';
+export * from './use-form';
+export declare function useFormValueChange<T>(fn: (values: FormValues) => FunctionReturn<T>, deps?: DependencyList): T | undefined;
+interface UseValidateFormProps extends Pick<FormProps, 'onValidate'> {
+    validateOnly?: boolean;
+}
+export declare function useValidateForm({ onValidate, validateOnly }?: UseValidateFormProps): boolean;
+export interface ValidateNotExistValueProps extends FormItemSelectProps, SelectCallbackProps {
+}
+export declare function useValidateNotExistValue({ loading, value, options, ...props }: ValidateNotExistValueProps): void;