@douyinfe/semi-ui 2.36.0-beta.0 → 2.36.0

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

@@ -11,9 +11,9 @@ import ErrorMessage from '../errorMessage';
 import { isElement } from '../../_base/reactUtils';
 import Label from '../label';
 import { Col } from '../../grid';
-const prefix = cssClasses.PREFIX; // To avoid useLayoutEffect warning when ssr, refer: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
+const prefix = cssClasses.PREFIX;
+// To avoid useLayoutEffect warning when ssr, refer: https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
 // Fix issue 1140
-
 const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 /**
  * withFiled is used to inject components
@@ -21,7 +21,6 @@ const useIsomorphicEffect = typeof window !== 'undefined' ? useLayoutEffect : us
  * 2. Insert <Label>
  * 3. Insert <ErrorMessage>
  */
-
 function withField(Component, opts) {
   let SemiField = (props, ref) => {
     let {
@@ -63,60 +62,51 @@ function withField(Component, opts) {
       options,
       shouldInject
     } = mergeOptions(opts, props);
-    warning(typeof field === 'undefined' && options.shouldInject, "[Semi Form]: 'field' is required, please check your props of Field Component"); // 无需注入的直接返回，eg：Group内的checkbox、radio
+    warning(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.createElement(Component, Object.assign({}, rest, {
         ref: ref
       }));
-    } // grab formState from context
-
-
-    const formState = useFormState(); // grab formUpdater (the api for field to read/modify FormState) from context
-
+    }
+    // grab formState from context
+    const formState = useFormState();
+    // grab formUpdater (the api for field to read/modify FormState) from context
     const updater = useFormUpdater();
-
     if (!updater.getFormProps) {
       warning(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.
-
-
+    }
+    // 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 initVal = typeof initValue !== 'undefined' ? initValue : initValueInFormOpts;
+    // use arrayFieldState to fix issue 615
     let arrayFieldState;
-
     try {
       arrayFieldState = useArrayFieldState();
-
       if (arrayFieldState) {
         initVal = arrayFieldState.shouldUseInitValue && typeof initValue !== 'undefined' ? initValue : initValueInFormOpts;
       }
-    } catch (err) {} // FIXME typeof initVal
-
-
+    } catch (err) {}
+    // FIXME typeof initVal
     const [value, setValue, getVal] = useStateWithGetter(typeof initVal !== undefined ? initVal : null);
     const validateOnMount = trigger.includes('mount');
-    allowEmpty = allowEmpty || updater.getFormProps().allowEmpty; // Error information: Array, String, undefined
-
+    allowEmpty = allowEmpty || updater.getFormProps().allowEmpty;
+    // Error information: Array, String, undefined
     const [error, setError, getError] = useStateWithGetter();
     const [touched, setTouched] = useState();
     const [cursor, setCursor, getCursor] = useStateWithGetter(0);
     const [status, setStatus] = useState(validateStatus); // use props.validateStatus to init
-
     const rulesRef = useRef(rules);
     const validateRef = useRef(validate);
-    const validatePromise = useRef(null); // notNotify is true means that the onChange of the Form does not need to be triggered
+    const validatePromise = useRef(null);
+    // 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
@@ -125,17 +115,14 @@ function withField(Component, opts) {
         // errors为数组时，不做deepEqual，始终当做需要更新处理
         return;
       }
-
       setError(errors);
       updater.updateStateError(field, errors, callOpts);
-
       if (!isValid(errors)) {
         setStatus('error');
       } else {
         setStatus('success');
       }
     };
-
     const updateValue = (val, callOpts) => {
       setValue(val);
       let newOpts = Object.assign(Object.assign({}, callOpts), {
@@ -143,20 +130,18 @@ function withField(Component, opts) {
       });
       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.
-
+      };
+      // 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
-
-
+    };
+    // Execute the validation rules specified by rules
     const _validateInternal = (val, callOpts) => {
       let latestRules = rulesRef.current || [];
       const validator = generateValidatesFromRules(field, latestRules);
@@ -166,13 +151,13 @@ function withField(Component, opts) {
       const rootPromise = new Promise((resolve, reject) => {
         validator.validate(model, {
           first: stopValidateWithError
-        }, // eslint-disable-next-line @typescript-eslint/no-empty-function
+        },
+        // eslint-disable-next-line @typescript-eslint/no-empty-function
         (errors, fields) => {}).then(res => {
           if (validatePromise.current !== rootPromise) {
             return;
-          } // validation passed
-
-
+          }
+          // validation passed
           setStatus('success');
           updateError(undefined, callOpts);
           resolve({});
@@ -180,22 +165,17 @@ function withField(Component, opts) {
           if (validatePromise.current !== rootPromise) {
             return;
           }
-
           let {
             errors,
             fields
           } = err;
-
           if (errors && fields) {
             let messages = errors.map(e => e.message);
-
             if (messages.length === 1) {
               // eslint-disable-next-line prefer-destructuring
               messages = messages[0];
             }
-
             updateError(messages, callOpts);
-
             if (!isValid(messages)) {
               setStatus('error');
               resolve(errors);
@@ -211,20 +191,18 @@ function withField(Component, opts) {
       });
       validatePromise.current = rootPromise;
       return rootPromise;
-    }; // execute custom validate function
-
-
+    };
+    // execute custom validate function
     const _validate = (val, values, callOpts) => {
       const rootPromise = new Promise(resolve => {
-        let maybePromisedErrors; // let errorThrowSync;
-
+        let maybePromisedErrors;
+        // let errorThrowSync;
         try {
           maybePromisedErrors = validateRef.current(val, values);
         } catch (err) {
           // error throw by syncValidate
           maybePromisedErrors = err;
         }
-
         if (maybePromisedErrors === undefined) {
           resolve({});
           updateError(undefined, callOpts);
@@ -234,7 +212,6 @@ function withField(Component, opts) {
             if (validatePromise.current !== rootPromise) {
               return;
             }
-
             if (isValid(result)) {
               // validate success，no need to do anything with result
               updateError(undefined, callOpts);
@@ -258,21 +235,17 @@ function withField(Component, opts) {
       validatePromise.current = rootPromise;
       return rootPromise;
     };
-
     const fieldValidate = (val, callOpts) => {
       let finalVal = val;
       let latestRules = rulesRef.current;
-
       if (transform) {
         finalVal = transform(val);
       }
-
       if (validateRef.current) {
         return _validate(finalVal, updater.getValue(), callOpts);
       } else if (latestRules) {
         return _validateInternal(finalVal, callOpts);
       }
-
       return null;
     };
     /**
@@ -280,32 +253,26 @@ function withField(Component, opts) {
      * 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
-
-
+      }
+      // 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
-
-
+      }
+      // User can use convert function to updateValue before Component UI render
       if (typeof convert === 'function') {
         val = convert(val);
-      } // TODO: allowEmptyString split into allowEmpty, emptyValue
+      }
+      // 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'
@@ -313,44 +280,38 @@ function withField(Component, opts) {
       // }
       // 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
+        if (val === '') {
+          // do nothing
         }
       } else {
         if (val === emptyValue) {
           val = undefined;
         }
-      } // maintain compoent cursor if needed
-
-
+      }
+      // 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
-
+      updateValue(val);
+      // only validate when trigger includes change
       if (trigger.includes('change')) {
         fieldValidate(val);
       }
     };
-
     const handleBlur = function () {
       if (props.onBlur) {
         props.onBlur(...arguments);
       }
-
       if (!touched) {
         updateTouched(true);
       }
-
       if (trigger.includes('blur')) {
         let val = getVal();
         fieldValidate(val);
@@ -358,8 +319,6 @@ function withField(Component, opts) {
     };
     /** 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,
@@ -372,30 +331,29 @@ function withField(Component, opts) {
       error,
       touched,
       status
-    }; // avoid hooks capture value, fixed issue 346
-
+    };
+    // avoid hooks capture value, fixed issue 346
     useIsomorphicEffect(() => {
       rulesRef.current = rules;
       validateRef.current = validate;
-    }, [rules, validate]); // exec validate once when trigger inlcude 'mount'
-
+    }, [rules, validate]);
+    // exec validate once when trigger inlcude 'mount'
     useIsomorphicEffect(() => {
       if (validateOnMount) {
         fieldValidate(value);
-      } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-    }, []); // register when mounted，unregister when unmounted
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    // register when mounted，unregister when unmounted
     // register again when field change
-
     useIsomorphicEffect(() => {
       // register
       if (typeof field === 'undefined') {
         // eslint-disable-next-line @typescript-eslint/no-empty-function
         return () => {};
-      } // log('register: ' + field);
+      }
+      // log('register: ' + field);
       // field value may change after field component mounted, we use ref value here to get changed value
-
-
       const refValue = getVal();
       updater.register(field, {
         value: refValue,
@@ -407,11 +365,13 @@ function withField(Component, opts) {
         fieldApi,
         keepState,
         allowEmpty: allowEmpty || allowEmptyString
-      }); // return unRegister cb
-
+      });
+      // return unRegister cb
       return () => {
-        updater.unRegister(field); // log('unRegister: ' + field);
-      }; // eslint-disable-next-line react-hooks/exhaustive-deps
+        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;
@@ -419,14 +379,13 @@ function withField(Component, opts) {
     let mergeLabelAlign = labelAlign || formProps.labelAlign;
     let mergeLabelCol = labelCol || formProps.labelCol;
     let mergeWrapperCol = wrapperCol || formProps.wrapperCol;
-    let mergeExtraPos = extraTextPosition || formProps.extraTextPosition || 'bottom'; // id attribute to improve a11y
-
+    let mergeExtraPos = extraTextPosition || formProps.extraTextPosition || 'bottom';
+    // id attribute to improve a11y
     const a11yId = id ? id : field;
     const labelId = `${a11yId}-label`;
     const helpTextId = `${a11yId}-helpText`;
     const extraTextId = `${a11yId}-extraText`;
     const errorMessageId = `${a11yId}-errormessage`;
-
     const FieldComponent = () => {
       // prefer to use validateStatus which pass by user throught props
       let blockStatus = validateStatus ? validateStatus : status;
@@ -452,24 +411,19 @@ function withField(Component, opts) {
         'aria-required': required,
         'aria-labelledby': labelId
       });
-
       if (name) {
         newProps['name'] = name;
       }
-
       if (helpText) {
         newProps['aria-describedby'] = extraText ? `${helpTextId} ${extraTextId}` : helpTextId;
       }
-
       if (extraText) {
         newProps['aria-describedby'] = helpText ? `${helpTextId} ${extraTextId}` : extraTextId;
       }
-
       if (status === 'error') {
         newProps['aria-errormessage'] = errorMessageId;
         newProps['aria-invalid'] = true;
       }
-
       const fieldCls = classNames({
         [`${prefix}-field`]: true,
         [`${prefix}-field-${name}`]: Boolean(name),
@@ -478,23 +432,19 @@ function withField(Component, opts) {
       const fieldMaincls = classNames({
         [`${prefix}-field-main`]: true
       });
-
       if (mergeLabelPos === 'inset' && !noLabel) {
         newProps.insetLabel = label || field;
         newProps.insetLabelId = labelId;
-
         if (typeof label === 'object' && !isElement(label)) {
           newProps.insetLabel = label.text;
           newProps.insetLabelId = labelId;
         }
       }
-
-      const com = /*#__PURE__*/React.createElement(Component, Object.assign({}, newProps)); // when use in InputGroup, no need to insert <Label>、<ErrorMessage> inside Field, just add it at Group
-
+      const com = /*#__PURE__*/React.createElement(Component, Object.assign({}, newProps));
+      // when use in InputGroup, no need to insert <Label>、<ErrorMessage> inside Field, just add it at Group
       if (isInInputGroup) {
         return com;
       }
-
       if (pure) {
         let pureCls = classNames(rest.className, {
           [`${prefix}-field-pure`]: true,
@@ -504,12 +454,10 @@ function withField(Component, opts) {
         newProps.className = pureCls;
         return /*#__PURE__*/React.createElement(Component, Object.assign({}, newProps));
       }
-
       let withCol = mergeLabelCol && mergeWrapperCol;
-      const labelColCls = mergeLabelAlign ? `${prefix}-col-${mergeLabelAlign}` : ''; // get label
-
+      const labelColCls = mergeLabelAlign ? `${prefix}-col-${mergeLabelAlign}` : '';
+      // get label
       let labelContent = null;
-
       if (!noLabel && mergeLabelPos !== 'inset') {
         let needSpread = typeof label === 'object' && !isElement(label) ? label : {};
         labelContent = /*#__PURE__*/React.createElement(Label, Object.assign({
@@ -521,7 +469,6 @@ function withField(Component, opts) {
           align: mergeLabelAlign
         }, needSpread));
       }
-
       const fieldMainContent = /*#__PURE__*/React.createElement("div", {
         className: fieldMaincls
       }, mergeExtraPos === 'middle' ? extraContent : null, com, !noErrorMessage ? /*#__PURE__*/React.createElement(ErrorMessage, {
@@ -548,11 +495,9 @@ function withField(Component, opts) {
         "x-field-id": field,
         "x-extra-pos": mergeExtraPos
       }, withCol ? withColContent : /*#__PURE__*/React.createElement(React.Fragment, null, labelContent, fieldMainContent));
-    }; // !important optimization
-
-
+    };
+    // !important optimization
     const shouldUpdate = [...Object.values(fieldState), ...Object.values(props), field, mergeLabelPos, mergeLabelAlign, formProps.disabled];
-
     if (options.shouldMemo) {
       // eslint-disable-next-line react-hooks/exhaustive-deps
       return useMemo(FieldComponent, [...shouldUpdate]);
@@ -561,11 +506,9 @@ function withField(Component, opts) {
       return FieldComponent();
     }
   };
-
   SemiField = /*#__PURE__*/forwardRef(SemiField);
   SemiField.displayName = getDisplayName(Component);
   return SemiField;
-} // eslint-disable-next-line
-
-
+}
+// eslint-disable-next-line
 export default withField;

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

@@ -1,6 +1,5 @@
 import React, { forwardRef } from 'react';
 import { FormApiContext } from '../context';
-
 function withFormApi(Component) {
   let WithApiCom = (props, ref) => {
     return /*#__PURE__*/React.createElement(FormApiContext.Consumer, null, formApi => /*#__PURE__*/React.createElement(Component, Object.assign({
@@ -8,9 +7,7 @@ function withFormApi(Component) {
       ref: ref
     }, props)));
   };
-
   WithApiCom = /*#__PURE__*/forwardRef(WithApiCom);
   return WithApiCom;
 }
-
 export default withFormApi;

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

@@ -1,6 +1,5 @@
 import React, { forwardRef } from 'react';
 import { FormStateContext } from '../context';
-
 function withFormState(Component) {
   let WithStateCom = (props, ref) => {
     return /*#__PURE__*/React.createElement(FormStateContext.Consumer, null, formState => /*#__PURE__*/React.createElement(Component, Object.assign({
@@ -8,9 +7,7 @@ function withFormState(Component) {
       ref: ref
     }, props)));
   };
-
   WithStateCom = /*#__PURE__*/forwardRef(WithStateCom);
   return WithStateCom;
 }
-
 export default withFormState;

package/lib/es/form/hooks/index.js

@@ -2,8 +2,8 @@
 import useFormApi from './useFormApi';
 import useFormState from './useFormState';
 import useFieldState from './useFieldState';
-import useFieldApi from './useFieldApi'; // hooks only use internal
-
+import useFieldApi from './useFieldApi';
+// hooks only use internal
 import useFormUpdater from './useFormUpdater';
 import useStateWithGetter from './useStateWithGetter';
 import useArrayFieldState from './useArrayFieldState';

package/lib/es/form/hooks/useArrayFieldState.js

@@ -1,9 +1,7 @@
 import { useContext } from 'react';
 import { ArrayFieldContext } from '../context';
-
 function useArrayFieldState() {
   const arrayFieldContext = useContext(ArrayFieldContext);
   return arrayFieldContext;
 }
-
 export default useArrayFieldState;

package/lib/es/form/hooks/useFieldApi.js

@@ -1,5 +1,4 @@
 import useFormApi from './useFormApi';
-
 const buildFieldApi = (formApi, field) => ({
   getError: () => formApi.getError(field),
   setError: error => formApi.setError(field, error),
@@ -8,11 +7,9 @@ const buildFieldApi = (formApi, field) => ({
   getValue: () => formApi.getValue(field),
   setValue: value => formApi.setValue(field, value)
 });
-
 function useFieldApi(field) {
   const formApi = useFormApi();
   const fieldApi = buildFieldApi(formApi, field);
   return fieldApi;
 }
-
 export default useFieldApi;

package/lib/es/form/hooks/useFieldState.js

@@ -1,16 +1,13 @@
 import useFormState from './useFormState';
 import * as ObjectUtil from '@douyinfe/semi-foundation/lib/es/utils/object';
-
 const buildFieldState = (formState, field) => ({
   value: ObjectUtil.get(formState.values, field),
   error: ObjectUtil.get(formState.errors, field),
   touched: ObjectUtil.get(formState.touched, field)
 });
-
 function useFieldState(field) {
   const formState = useFormState();
   const fieldState = buildFieldState(formState, field);
   return fieldState;
 }
-
 export default useFieldState;

package/lib/es/form/hooks/useFormState.js

@@ -1,9 +1,7 @@
 import { useContext } from 'react';
 import { FormStateContext } from '../context';
-
 function useFormState() {
   const formState = useContext(FormStateContext);
   return formState;
 }
-
 export default useFormState;

package/lib/es/form/hooks/useStateWithGetter.js

@@ -1,16 +1,13 @@
-import { useRef, useState } from 'react'; // https://github.com/facebook/react/issues/14543
-
+import { useRef, useState } from 'react';
+// https://github.com/facebook/react/issues/14543
 export default function useStateWithGetter(initial) {
   const ref = useRef();
   const [state, setState] = useState(initial);
   ref.current = state;
-
   const set = value => {
     ref.current = value;
     setState(value);
   };
-
   const get = () => ref.current;
-
   return [state, set, get];
 }

package/lib/es/form/index.js

@@ -7,10 +7,10 @@
  */
 // FormComponent
 import Form from './baseForm';
-import ArrayField from './arrayField'; // Form Hooks
-
-import { useFormApi, useFormState, useFieldState, useFieldApi } from './hooks/index'; // Form Hoc
-
+import ArrayField from './arrayField';
+// Form Hooks
+import { useFormApi, useFormState, useFieldState, useFieldApi } from './hooks/index';
+// Form Hoc
 import withField from './hoc/withField';
 import withFormState from './hoc/withFormState';
 import withFormApi from './hoc/withFormApi';

package/lib/es/form/interface.d.ts

@@ -11,7 +11,7 @@ import type { RadioProps } from '../radio/index';
 import { ReactFieldError as FieldError } from './errorMessage';
 import type { LabelProps } from './label';
 export type { FormState, FormApi, WithFieldOption, RuleItem };
-export declare type CommonFieldProps = {
+export type CommonFieldProps = {
     /** Field is required (except Form. Checkbox within the Group, Form. Radio) */
     field: string;
     /** The label text of the form control is the same name as the field by default when it is not passed */
@@ -45,19 +45,19 @@ export declare type CommonFieldProps = {
     /** Whether to take over only the data stream, when true, it will not automatically insert modules such as ErrorMessage, Label, extraText, etc. The style and DOM structure are consistent with the original component */
     pure?: boolean;
 };
-export declare type CommonexcludeType = {
+export type CommonexcludeType = {
     defaultValue?: any;
     value?: any;
     checked?: boolean;
     defaultChecked?: boolean;
 };
-export declare type RadioCheckboxExcludeProps = {
+export type RadioCheckboxExcludeProps = {
     defaultValue?: any;
     chekced?: boolean;
     defaultChecked?: boolean;
     field: string;
 };
-export declare type RCIncludeType = {
+export type RCIncludeType = {
     field?: string;
 };
 export declare class FormSelect extends React.Component<Subtract<SelectProps & CommonFieldProps, CommonexcludeType>> {