@douyinfe/semi-ui 2.1.0-beta.3 → 2.1.0-next.3

package/lib/cjs/form/hoc/withField.js

@@ -0,0 +1,554 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _includes = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/includes"));
+
+var _promise = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/promise"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/values"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/form/constants");
+
+var _utils = require("@douyinfe/semi-foundation/lib/cjs/form/utils");
+
+var ObjectUtil = _interopRequireWildcard(require("@douyinfe/semi-foundation/lib/cjs/utils/object"));
+
+var _isPromise = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isPromise"));
+
+var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/warning"));
+
+var _index = require("../hooks/index");
+
+var _errorMessage = _interopRequireDefault(require("../errorMessage"));
+
+var _reactUtils = require("../../_base/reactUtils");
+
+var _label = _interopRequireDefault(require("../label"));
+
+var _grid = require("../../grid");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/* eslint-disable max-lines-per-function, react-hooks/rules-of-hooks, prefer-const, max-len */
+const prefix = _constants.cssClasses.PREFIX;
+/**
+ * withFiled is used to inject components
+ * 1. Takes over the value and onChange of the component and synchronizes them to Form Foundation
+ * 2. Insert <Label>
+ * 3. Insert <ErrorMessage>
+ */
+
+function withField(Component, opts) {
+  let SemiField = (props, ref) => {
+    let {
+      // condition,
+      field,
+      label,
+      labelPosition,
+      labelWidth,
+      labelAlign,
+      labelCol,
+      wrapperCol,
+      noLabel,
+      noErrorMessage,
+      isInInputGroup,
+      initValue,
+      validate,
+      validateStatus,
+      trigger,
+      allowEmptyString,
+      allowEmpty,
+      emptyValue,
+      rules,
+      required,
+      keepState,
+      transform,
+      name,
+      fieldClassName,
+      fieldStyle,
+      convert,
+      stopValidateWithError,
+      helpText,
+      extraText,
+      extraTextPosition,
+      pure,
+      rest
+    } = (0, _utils.mergeProps)(props);
+    let {
+      options,
+      shouldInject
+    } = (0, _utils.mergeOptions)(opts, props);
+    (0, _warning.default)(typeof field === 'undefined' && options.shouldInject, "[Semi Form]: 'field' is required, please check your props of Field Component"); // 无需注入的直接返回，eg：Group内的checkbox、radio
+    // Return without injection, eg: <Checkbox> / <Radio> inside CheckboxGroup/RadioGroup
+
+    if (!shouldInject) {
+      return /*#__PURE__*/_react.default.createElement(Component, (0, _assign.default)({}, rest));
+    } // grab formState from context
+
+
+    const formState = (0, _index.useFormState)(); // grab formUpdater (the api for field to read/modify FormState) from context
+
+    const updater = (0, _index.useFormUpdater)();
+
+    if (!updater.getFormProps) {
+      (0, _warning.default)(true, '[Semi Form]: Field Component must be use inside the Form, please check your dom declaration');
+      return null;
+    } // To prevent user forgetting to pass the field, use undefined as the key, and updater.getValue will get the wrong value.
+
+
+    let initValueInFormOpts = typeof field !== 'undefined' ? updater.getValue(field) : undefined; // Get the init value of form from formP rops.init Values Get the initial value set in the initValues of Form
+
+    let initVal = typeof initValue !== 'undefined' ? initValue : initValueInFormOpts; // use arrayFieldState to fix issue 615
+
+    let arrayFieldState;
+
+    try {
+      arrayFieldState = (0, _index.useArrayFieldState)();
+
+      if (arrayFieldState) {
+        initVal = arrayFieldState.shouldUseInitValue && typeof initValue !== 'undefined' ? initValue : initValueInFormOpts;
+      }
+    } catch (err) {}
+
+    const [value, setValue, getVal] = (0, _index.useStateWithGetter)(typeof initVal !== undefined ? initVal : null);
+    const validateOnMount = (0, _includes.default)(trigger).call(trigger, 'mount');
+    allowEmpty = allowEmpty || updater.getFormProps().allowEmpty; // Error information: Array, String, undefined
+
+    const [error, setError, getError] = (0, _index.useStateWithGetter)();
+    const [touched, setTouched] = (0, _react.useState)();
+    const [cursor, setCursor, getCursor] = (0, _index.useStateWithGetter)(0);
+    const [status, setStatus] = (0, _react.useState)(validateStatus); // use props.validateStatus to init
+
+    const rulesRef = (0, _react.useRef)(rules); // notNotify is true means that the onChange of the Form does not need to be triggered
+    // notUpdate is true means that this operation does not need to trigger the forceUpdate
+
+    const updateTouched = (isTouched, callOpts) => {
+      setTouched(isTouched);
+      updater.updateStateTouched(field, isTouched, callOpts);
+    };
+
+    const updateError = (errors, callOpts) => {
+      if (errors === getError()) {
+        // When the inspection result is unchanged, no need to update, saving a forceUpdate overhead
+        // When errors is an array, deepEqual is not used, and it is always treated as a need to update
+        // 检验结果不变时，无需更新，节省一次forceUpdate开销
+        // errors为数组时，不做deepEqual，始终当做需要更新处理
+        return;
+      }
+
+      setError(errors);
+      updater.updateStateError(field, errors, callOpts);
+
+      if (!(0, _utils.isValid)(errors)) {
+        setStatus('error');
+      } else {
+        setStatus('success');
+      }
+    };
+
+    const updateValue = (val, callOpts) => {
+      setValue(val);
+      let newOpts = (0, _assign.default)((0, _assign.default)({}, callOpts), {
+        allowEmpty
+      });
+      updater.updateStateValue(field, val, newOpts);
+    };
+
+    const reset = () => {
+      let callOpts = {
+        notNotify: true,
+        notUpdate: true
+      }; // reset is called by the FormFoundaion uniformly. The field level does not need to trigger notify and update.
+
+      updateValue(initVal !== null ? initVal : undefined, callOpts);
+      updateError(undefined, callOpts);
+      updateTouched(undefined, callOpts);
+      setStatus('default');
+    }; // Execute the validation rules specified by rules
+
+
+    const _validateInternal = (val, callOpts) => {
+      let latestRules = rulesRef.current || [];
+      const validator = (0, _utils.generateValidatesFromRules)(field, latestRules);
+      const model = {
+        [field]: val
+      };
+      return new _promise.default((resolve, reject) => {
+        validator.validate(model, {
+          first: stopValidateWithError
+        }, // eslint-disable-next-line @typescript-eslint/no-empty-function
+        (errors, fields) => {}).then(res => {
+          // validation passed
+          setStatus('success');
+          updateError(undefined, callOpts);
+          resolve({});
+        }).catch(err => {
+          let {
+            errors,
+            fields
+          } = err;
+
+          if (errors && fields) {
+            let messages = (0, _map.default)(errors).call(errors, e => e.message);
+
+            if (messages.length === 1) {
+              // eslint-disable-next-line prefer-destructuring
+              messages = messages[0];
+            }
+
+            updateError(messages, callOpts);
+
+            if (!(0, _utils.isValid)(messages)) {
+              setStatus('error');
+              resolve(errors);
+            }
+          } else {
+            // Some grammatical errors in rules
+            setStatus('error');
+            updateError(err.message, callOpts);
+            resolve(err.message);
+            throw err;
+          }
+        });
+      });
+    }; // execute custom validate function
+
+
+    const _validate = (val, values, callOpts) => new _promise.default(resolve => {
+      let maybePromisedErrors; // let errorThrowSync;
+
+      try {
+        maybePromisedErrors = validate(val, values);
+      } catch (err) {
+        // error throw by syncValidate
+        maybePromisedErrors = err;
+      }
+
+      if (maybePromisedErrors === undefined) {
+        resolve({});
+        updateError(undefined, callOpts);
+      } else if ((0, _isPromise.default)(maybePromisedErrors)) {
+        maybePromisedErrors.then(result => {
+          if ((0, _utils.isValid)(result)) {
+            // validate success，no need to do anything with result
+            updateError(undefined, callOpts);
+            resolve(null);
+          } else {
+            // validate failed
+            updateError(result, callOpts);
+            resolve(result);
+          }
+        });
+      } else {
+        if ((0, _utils.isValid)(maybePromisedErrors)) {
+          updateError(undefined, callOpts);
+          resolve(null);
+        } else {
+          updateError(maybePromisedErrors, callOpts);
+          resolve(maybePromisedErrors);
+        }
+      }
+    });
+
+    const fieldValidate = (val, callOpts) => {
+      let finalVal = val;
+      let latestRules = rulesRef.current;
+
+      if (transform) {
+        finalVal = transform(val);
+      }
+
+      if (validate) {
+        return _validate(finalVal, updater.getValue(), callOpts);
+      } else if (latestRules) {
+        return _validateInternal(finalVal, callOpts);
+      }
+
+      return null;
+    };
+    /**
+     * parse / format
+     * validate when trigger
+     *
+     */
+
+
+    const handleChange = function (newValue, e) {
+      let fnKey = options.onKeyChangeFnName;
+
+      if (fnKey in props && typeof props[options.onKeyChangeFnName] === 'function') {
+        for (var _len = arguments.length, other = new Array(_len > 2 ? _len - 2 : 0), _key = 2; _key < _len; _key++) {
+          other[_key - 2] = arguments[_key];
+        }
+
+        props[options.onKeyChangeFnName](newValue, e, ...other);
+      } // support various type component
+
+
+      let val;
+
+      if (!options.valuePath) {
+        val = newValue;
+      } else {
+        val = ObjectUtil.get(newValue, options.valuePath);
+      } // User can use convert function to updateValue before Component UI render
+
+
+      if (typeof convert === 'function') {
+        val = convert(val);
+      } // TODO: allowEmptyString split into allowEmpty, emptyValue
+      // Added abandonment warning
+      // if (process.env.NODE_ENV !== 'production') {
+      //     warning(allowEmptyString, `'allowEmptyString' will be de deprecated in next version, please replace with 'allowEmpty' & 'emptyValue'
+      // `)
+      // }
+      // set value to undefined if it's an empty string
+      // allowEmptyString={true} is equivalent to allowEmpty = {true} emptyValue = "
+
+
+      if (allowEmptyString || allowEmpty) {
+        if (val === '') {// do nothing
+        }
+      } else {
+        if (val === emptyValue) {
+          val = undefined;
+        }
+      } // maintain compoent cursor if needed
+
+
+      try {
+        if (e && e.target && e.target.selectionStart) {
+          setCursor(e.target.selectionStart);
+        }
+      } catch (err) {}
+
+      updateTouched(true, {
+        notNotify: true,
+        notUpdate: true
+      });
+      updateValue(val); // only validate when trigger includes change
+
+      if ((0, _includes.default)(trigger).call(trigger, 'change')) {
+        fieldValidate(val);
+      }
+    };
+
+    const handleBlur = function () {
+      if (props.onBlur) {
+        props.onBlur(...arguments);
+      }
+
+      if (!touched) {
+        updateTouched(true);
+      }
+
+      if ((0, _includes.default)(trigger).call(trigger, 'blur')) {
+        let val = getVal();
+        fieldValidate(val);
+      }
+    };
+    /** Field level maintains a separate layer of data, which is convenient for Form to control Field to update the UI */
+    // The field level maintains a separate layer of data, which is convenient for the Form to control the Field for UI updates.
+
+
+    const fieldApi = {
+      setValue: updateValue,
+      setTouched: updateTouched,
+      setError: updateError,
+      reset,
+      validate: fieldValidate
+    };
+    const fieldState = {
+      value,
+      error,
+      touched,
+      status
+    }; // avoid hooks capture value, fixed issue 346
+
+    (0, _react.useLayoutEffect)(() => {
+      rulesRef.current = rules;
+    }, [rules]); // exec validate once when trigger inlcude 'mount'
+
+    (0, _react.useLayoutEffect)(() => {
+      if (validateOnMount) {
+        fieldValidate(value);
+      } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+    }, []); // register when mounted，unregister when unmounted
+    // register again when field change
+
+    (0, _react.useLayoutEffect)(() => {
+      // register
+      if (typeof field === 'undefined') {
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
+        return () => {};
+      } // log('register: ' + field);
+
+
+      updater.register(field, fieldState, {
+        field,
+        fieldApi,
+        keepState,
+        allowEmpty: allowEmpty || allowEmptyString
+      }); // return unRegister cb
+
+      return () => {
+        updater.unRegister(field); // log('unRegister: ' + field);
+      }; // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [field]);
+    let formProps = updater.getFormProps(['labelPosition', 'labelWidth', 'labelAlign', 'labelCol', 'wrapperCol', 'disabled', 'showValidateIcon', 'extraTextPosition']);
+    let mergeLabelPos = labelPosition || formProps.labelPosition;
+    let mergeLabelWidth = labelWidth || formProps.labelWidth;
+    let mergeLabelAlign = labelAlign || formProps.labelAlign;
+    let mergeLabelCol = labelCol || formProps.labelCol;
+    let mergeWrapperCol = wrapperCol || formProps.wrapperCol;
+    let mergeExtraPos = extraTextPosition || formProps.extraTextPosition || 'bottom';
+
+    let FieldComponent = (() => {
+      var _context, _context3;
+
+      // prefer to use validateStatus which pass by user throught props
+      let blockStatus = validateStatus ? validateStatus : status;
+      let newProps = (0, _assign.default)((0, _assign.default)({
+        disabled: formProps.disabled
+      }, rest), {
+        ref,
+        onBlur: handleBlur,
+        [options.onKeyChangeFnName]: handleChange,
+        [options.valueKey]: value,
+        validateStatus: blockStatus
+      });
+      const fieldCls = (0, _classnames.default)({
+        ["".concat(prefix, "-field")]: true,
+        [(0, _concat.default)(_context = "".concat(prefix, "-field-")).call(_context, name)]: Boolean(name),
+        [fieldClassName]: Boolean(fieldClassName)
+      });
+      const fieldMaincls = (0, _classnames.default)({
+        ["".concat(prefix, "-field-main")]: true
+      });
+
+      if (mergeLabelPos === 'inset' && !noLabel) {
+        newProps.insetLabel = label || field;
+
+        if (typeof label === 'object' && !(0, _reactUtils.isElement)(label)) {
+          newProps.insetLabel = label.text;
+        }
+      }
+
+      const com = /*#__PURE__*/_react.default.createElement(Component, (0, _assign.default)({}, newProps)); // when use in InputGroup, no need to insert <Label>、<ErrorMessage> inside Field, just add it at Group
+
+
+      if (isInInputGroup) {
+        return com;
+      }
+
+      if (pure) {
+        var _context2;
+
+        let pureCls = (0, _classnames.default)(rest.className, {
+          ["".concat(prefix, "-field-pure")]: true,
+          [(0, _concat.default)(_context2 = "".concat(prefix, "-field-")).call(_context2, name)]: Boolean(name),
+          [fieldClassName]: Boolean(fieldClassName)
+        });
+        newProps.className = pureCls;
+        return /*#__PURE__*/_react.default.createElement(Component, (0, _assign.default)({}, newProps));
+      }
+
+      let withCol = mergeLabelCol && mergeWrapperCol;
+      const labelColCls = mergeLabelAlign ? (0, _concat.default)(_context3 = "".concat(prefix, "-col-")).call(_context3, mergeLabelAlign) : ''; // get label
+
+      let labelContent = null;
+
+      if (!noLabel && mergeLabelPos !== 'inset') {
+        let needSpread = typeof label === 'object' && !(0, _reactUtils.isElement)(label) ? label : {};
+        labelContent = /*#__PURE__*/_react.default.createElement(_label.default, (0, _assign.default)({
+          text: label || field,
+          required: required,
+          name: name || field,
+          width: mergeLabelWidth,
+          align: mergeLabelAlign
+        }, needSpread));
+      }
+
+      const extraCls = (0, _classnames.default)("".concat(prefix, "-field-extra"), {
+        ["".concat(prefix, "-field-extra-string")]: typeof extraText === 'string',
+        ["".concat(prefix, "-field-extra-middle")]: mergeExtraPos === 'middle',
+        ["".concat(prefix, "-field-extra-botttom")]: mergeExtraPos === 'bottom'
+      });
+      const extraContent = extraText ? /*#__PURE__*/_react.default.createElement("div", {
+        className: extraCls
+      }, extraText) : null;
+
+      const fieldMainContent = /*#__PURE__*/_react.default.createElement("div", {
+        className: fieldMaincls
+      }, mergeExtraPos === 'middle' ? extraContent : null, com, !noErrorMessage ? /*#__PURE__*/_react.default.createElement(_errorMessage.default, {
+        error: error,
+        validateStatus: blockStatus,
+        helpText: helpText,
+        showValidateIcon: formProps.showValidateIcon
+      }) : null, mergeExtraPos === 'bottom' ? extraContent : null);
+
+      const withColContent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, mergeLabelPos === 'top' ? /*#__PURE__*/_react.default.createElement("div", {
+        style: {
+          overflow: 'hidden'
+        }
+      }, /*#__PURE__*/_react.default.createElement(_grid.Col, (0, _assign.default)({}, mergeLabelCol, {
+        className: labelColCls
+      }), labelContent)) : /*#__PURE__*/_react.default.createElement(_grid.Col, (0, _assign.default)({}, mergeLabelCol, {
+        className: labelColCls
+      }), labelContent), /*#__PURE__*/_react.default.createElement(_grid.Col, (0, _assign.default)({}, mergeWrapperCol), fieldMainContent));
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: fieldCls,
+        style: fieldStyle,
+        "x-label-pos": mergeLabelPos,
+        "x-field-id": field,
+        "x-extra-pos": mergeExtraPos
+      }, withCol ? withColContent : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, labelContent, fieldMainContent));
+    })(); // !important optimization
+
+
+    const shouldUpdate = [...(0, _values.default)(fieldState), ...(0, _values.default)(props), field, mergeLabelPos, mergeLabelAlign, formProps.disabled];
+
+    if (options.shouldMemo) {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      return (0, _react.useMemo)(() => FieldComponent, [...shouldUpdate]);
+    } else {
+      // Some Custom Component with inner state shouldn't be memo, otherwise the component will not updated when the internal state is updated
+      return FieldComponent;
+    }
+  };
+
+  SemiField = /*#__PURE__*/(0, _react.forwardRef)(SemiField);
+  SemiField.displayName = (0, _utils.getDisplayName)(Component);
+  return SemiField;
+} // eslint-disable-next-line
+
+
+var _default = withField;
+exports.default = _default;

package/lib/cjs/form/hoc/withFormApi.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const withFormApi: (Component: React.ElementType) => React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+export default withFormApi;

package/lib/cjs/form/hoc/withFormApi.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _context = require("../context");
+
+const withFormApi = Component => /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(_context.FormApiContext.Consumer, null, formApi => /*#__PURE__*/_react.default.createElement(Component, (0, _assign.default)({
+  formApi: formApi,
+  ref: ref
+}, props))));
+
+var _default = withFormApi;
+exports.default = _default;

package/lib/cjs/form/hoc/withFormState.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const withFormState: (Component: React.ElementType) => React.ForwardRefExoticComponent<React.RefAttributes<unknown>>;
+export default withFormState;

package/lib/cjs/form/hoc/withFormState.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _context = require("../context");
+
+const withFormState = Component => /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/_react.default.createElement(_context.FormStateContext.Consumer, null, formState => /*#__PURE__*/_react.default.createElement(Component, (0, _assign.default)({
+  formState: formState,
+  ref: ref
+}, props))));
+
+var _default = withFormState;
+exports.default = _default;

package/lib/cjs/form/hooks/index.d.ts

@@ -0,0 +1,8 @@
+import useFormApi from './useFormApi';
+import useFormState from './useFormState';
+import useFieldState from './useFieldState';
+import useFieldApi from './useFieldApi';
+import useFormUpdater from './useFormUpdater';
+import useStateWithGetter from './useStateWithGetter';
+import useArrayFieldState from './useArrayFieldState';
+export { useFormApi, useFormState, useFieldState, useFieldApi, useFormUpdater, useStateWithGetter, useArrayFieldState };