@douyinfe/semi-ui 2.1.0-alpha.1 → 2.1.0-beta.3

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

@@ -1,557 +0,0 @@
-"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; }
-
-/* argus-disable unPkgSensitiveInfo */
-
-/* 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
-      // Fixed issue 328
-      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

@@ -1,3 +0,0 @@
-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

@@ -1,25 +0,0 @@
-"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

@@ -1,3 +0,0 @@
-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

@@ -1,25 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-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 };