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

package/lib/es/form/arrayField.js

@@ -1,31 +1,23 @@
 import _isUndefined from "lodash/isUndefined";
 import _cloneDeep from "lodash/cloneDeep";
-
 /* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
 import { getUuidv4 } from '@douyinfe/semi-foundation/lib/es/utils/uuid';
 import { FormUpdaterContext, ArrayFieldContext } from './context';
 import warning from '@douyinfe/semi-foundation/lib/es/utils/warning';
-
 const filterArrayByIndex = (array, index) => array.filter((item, i) => i !== index);
-
 const getUuidByArray = array => array.map(() => getUuidv4());
-
 const getUpdateKey = arrayField => {
   if (!arrayField) {
     return undefined;
   }
-
   if (arrayField && arrayField.updateKey) {
     return arrayField.updateKey;
   }
-
   return undefined;
 };
-
 const initValueAdapter = initValue => {
   const iv = [];
-
   if (Array.isArray(initValue)) {
     return initValue;
   } else {
@@ -39,16 +31,13 @@ const initValueAdapter = initValue => {
  * @param {string[]} oldKeys
  * @returns string[]
  */
-
-
 const generateKeys = (value, oldKeys) => {
   const val = initValueAdapter(value);
-  const newKeys = getUuidByArray(val); // return newKeys;
-
+  const newKeys = getUuidByArray(val);
+  // return newKeys;
   const keys = newKeys.map((key, i) => oldKeys && oldKeys[i] ? oldKeys[i] : key);
   return keys;
 };
-
 class ArrayFieldComponent extends Component {
   constructor(props, context) {
     super(props, context);
@@ -71,21 +60,17 @@ class ArrayFieldComponent extends Component {
         and the fields it contains do not need to consume initValue
     */
     // whether the fields inside arrayField should use props.initValue in current render process
-
-    this.shouldUseInitValue = !context.getArrayField(field); // Separate the arrays that reset and the usual add and remove modify, otherwise they will affect each other
-
+    this.shouldUseInitValue = !context.getArrayField(field);
+    // Separate the arrays that reset and the usual add and remove modify, otherwise they will affect each other
     const initValueCopyForFormState = _cloneDeep(initValue);
-
     const initValueCopyForReset = _cloneDeep(initValue);
-
-    context.registerArrayField(field, initValueCopyForReset); // register ArrayField will update state.updateKey to render, So there is no need to execute forceUpdate here
-
+    context.registerArrayField(field, initValueCopyForReset);
+    // register ArrayField will update state.updateKey to render, So there is no need to execute forceUpdate here
     context.updateStateValue(field, initValueCopyForFormState, {
       notNotify: true,
       notUpdate: true
     });
   }
-
   componentWillUnmount() {
     const updater = this.context;
     const {
@@ -93,7 +78,6 @@ class ArrayFieldComponent extends Component {
     } = this.props;
     updater.unRegisterArrayField(field);
   }
-
   componentDidUpdate() {
     const updater = this.context;
     const {
@@ -103,23 +87,21 @@ class ArrayFieldComponent extends Component {
       keys
     } = this.state;
     const fieldValues = updater.getValue(field);
-    const updateKey = getUpdateKey(updater.getArrayField(field)); // when update form outside, like use formApi.setValue('field', [{newItem1, newItem2}]),  formApi.setValues
+    const updateKey = getUpdateKey(updater.getArrayField(field));
+    // when update form outside, like use formApi.setValue('field', [{newItem1, newItem2}]),  formApi.setValues
     // re generate keys to update arrayField;
-
     if (updateKey !== this.cacheUpdateKey) {
-      const newKeys = generateKeys(fieldValues, keys); // eslint-disable-next-line
-
+      const newKeys = generateKeys(fieldValues, keys);
+      // eslint-disable-next-line
       this.setState({
         keys: newKeys
       });
       this.cacheUpdateKey = updateKey;
-
       if (this.cacheUpdateKey !== null) {
         this.shouldUseInitValue = false;
       }
     }
   }
-
   add() {
     const {
       keys
@@ -130,7 +112,6 @@ class ArrayFieldComponent extends Component {
       keys
     });
   }
-
   addWithInitValue(lineObject) {
     const updater = this.context;
     const {
@@ -143,7 +124,6 @@ class ArrayFieldComponent extends Component {
       updateKey: new Date().valueOf()
     });
   }
-
   remove(i) {
     const updater = this.context;
     const {
@@ -152,38 +132,33 @@ class ArrayFieldComponent extends Component {
     const {
       field
     } = this.props;
-    const newKeys = filterArrayByIndex(keys, i); // Make sure that all the keys in the line are removed, because some keys are not taken over by the field, only set in the initValue
-
+    const newKeys = filterArrayByIndex(keys, i);
+    // Make sure that all the keys in the line are removed, because some keys are not taken over by the field, only set in the initValue
     let newArrayFieldError = updater.getError(field);
     const opts = {
       notNotify: true,
       notUpdate: true
     };
-
     if (Array.isArray(newArrayFieldError)) {
       newArrayFieldError = newArrayFieldError.slice();
       newArrayFieldError.splice(i, 1);
       updater.updateStateError(field, newArrayFieldError, opts);
-    } // if (Array.isArray(newArrayFieldTouched)) {
+    }
+    // if (Array.isArray(newArrayFieldTouched)) {
     //     newArrayFieldTouched = newArrayFieldTouched.slice();
     //     newArrayFieldTouched.splice(i, 1);
     //     updater.updateStateTouched(field, newArrayFieldTouched, opts);
     // }
-
-
     let newArrayFieldValue = updater.getValue(field);
-
     if (Array.isArray(newArrayFieldValue)) {
       newArrayFieldValue = newArrayFieldValue.slice();
       newArrayFieldValue.splice(i, 1);
       updater.updateStateValue(field, newArrayFieldValue);
     }
-
     this.setState({
       keys: newKeys
     });
   }
-
   render() {
     const {
       children,
@@ -215,8 +190,6 @@ class ArrayFieldComponent extends Component {
       addWithInitValue
     }));
   }
-
 }
-
 ArrayFieldComponent.contextType = FormUpdaterContext;
 export default ArrayFieldComponent;

package/lib/es/form/baseForm.js

@@ -1,18 +1,13 @@
 import _noop from "lodash/noop";
-
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
 /* eslint-disable prefer-template, max-len, @typescript-eslint/no-unused-vars */
-
-
 import React from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
@@ -33,7 +28,6 @@ import FormInputGroup from './group';
 import '@douyinfe/semi-foundation/lib/es/form/form.css';
 import { FormInput, FormInputNumber, FormTextArea, FormSelect, FormCheckboxGroup, FormCheckbox, FormRadioGroup, FormRadio, FormDatePicker, FormSwitch, FormSlider, FormTimePicker, FormTreeSelect, FormCascader, FormRating, FormAutoComplete, FormUpload, FormTagInput } from './field';
 const prefix = cssClasses.PREFIX;
-
 class Form extends BaseComponent {
   constructor(props) {
     super(props);
@@ -47,20 +41,16 @@ class Form extends BaseComponent {
     this.reset = this.reset.bind(this);
     this.foundation = new FormFoundation(this.adapter);
     this.formApi = this.foundation.getFormApi();
-
     if (this.props.getFormApi) {
       this.props.getFormApi(this.formApi);
     }
   }
-
   componentDidMount() {
     this.foundation.init();
   }
-
   componentWillUnmount() {
     this.foundation.destroy();
   }
-
   get adapter() {
     return Object.assign(Object.assign({}, super.adapter), {
       cloneDeep,
@@ -114,7 +104,6 @@ class Form extends BaseComponent {
       getFieldDOM: field => document.querySelector(`.${cssClasses.PREFIX}-field[x-field-id="${field}"]`)
     });
   }
-
   get content() {
     const {
       children,
@@ -127,32 +116,25 @@ class Form extends BaseComponent {
       formApi: this.foundation.getFormApi(),
       values: formState.values
     };
-
     if (component) {
       return /*#__PURE__*/React.createElement(component, props);
     }
-
     if (render) {
       return render(props);
     }
-
     if (typeof children === 'function') {
       return children(props);
     }
-
     return children;
   }
-
   submit(e) {
     e.preventDefault();
     this.foundation.submit();
   }
-
   reset(e) {
     e.preventDefault();
     this.foundation.reset();
   }
-
   render() {
     const needClone = false;
     const formState = this.foundation.getFormState(needClone);
@@ -160,35 +142,33 @@ class Form extends BaseComponent {
     const {
       formId
     } = this.state;
-
     const _a = this.props,
-          {
-      children,
-      getFormApi,
-      onChange,
-      onSubmit,
-      onSubmitFail,
-      onValueChange,
-      component,
-      render,
-      validateFields,
-      initValues,
-      layout,
-      style,
-      className,
-      labelPosition,
-      labelWidth,
-      labelAlign,
-      labelCol,
-      wrapperCol,
-      allowEmpty,
-      autoScrollToError,
-      showValidateIcon,
-      extraTextPosition,
-      id
-    } = _a,
-          rest = __rest(_a, ["children", "getFormApi", "onChange", "onSubmit", "onSubmitFail", "onValueChange", "component", "render", "validateFields", "initValues", "layout", "style", "className", "labelPosition", "labelWidth", "labelAlign", "labelCol", "wrapperCol", "allowEmpty", "autoScrollToError", "showValidateIcon", "extraTextPosition", "id"]);
-
+      {
+        children,
+        getFormApi,
+        onChange,
+        onSubmit,
+        onSubmitFail,
+        onValueChange,
+        component,
+        render,
+        validateFields,
+        initValues,
+        layout,
+        style,
+        className,
+        labelPosition,
+        labelWidth,
+        labelAlign,
+        labelCol,
+        wrapperCol,
+        allowEmpty,
+        autoScrollToError,
+        showValidateIcon,
+        extraTextPosition,
+        id
+      } = _a,
+      rest = __rest(_a, ["children", "getFormApi", "onChange", "onSubmit", "onSubmitFail", "onValueChange", "component", "render", "validateFields", "initValues", "layout", "style", "className", "labelPosition", "labelWidth", "labelAlign", "labelCol", "wrapperCol", "allowEmpty", "autoScrollToError", "showValidateIcon", "extraTextPosition", "id"]);
     const formCls = classNames(prefix, className, {
       [prefix + '-vertical']: layout === 'vertical',
       [prefix + '-horizontal']: layout === 'horizontal'
@@ -211,14 +191,11 @@ class Form extends BaseComponent {
       value: formState
     }, showldAppendRow ? withRowForm : formContent)));
   }
-
 }
-
 Form.propTypes = {
   'aria-label': PropTypes.string,
   onSubmit: PropTypes.func,
   onSubmitFail: PropTypes.func,
-
   /* Triggered from update, including field mount/unmount/value change/blur/verification status change/error prompt change, input parameter is formState, currentField */
   onChange: PropTypes.func,
   onReset: PropTypes.func,

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

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import type { BasicFieldError } from '@douyinfe/semi-foundation/lib/es/form/interface';
-export declare type ReactFieldError = BasicFieldError | React.ReactNode;
+export type ReactFieldError = BasicFieldError | React.ReactNode;
 export interface ErrorMessageProps {
     error?: ReactFieldError;
     className?: string;

package/lib/es/form/errorMessage.js

@@ -13,11 +13,9 @@ export default class ErrorMessage extends PureComponent {
     } = this.props;
     const propsError = this.props.error;
     let id = errorMessageId;
-
     if (!propsError) {
       id = helpTextId;
     }
-
     if (typeof error === 'string') {
       return /*#__PURE__*/React.createElement("span", {
         id: id
@@ -30,10 +28,8 @@ export default class ErrorMessage extends PureComponent {
     } else if ( /*#__PURE__*/React.isValidElement(error)) {
       return error;
     }
-
     return null;
   }
-
   render() {
     const {
       error,
@@ -48,11 +44,9 @@ export default class ErrorMessage extends PureComponent {
       [prefix + '-field-error-message']: Boolean(error),
       [prefix + '-field-help-text']: Boolean(helpText)
     }, className);
-
     if (!error && !helpText) {
       return null;
     }
-
     const iconMap = {
       warning: /*#__PURE__*/React.createElement(IconAlertTriangle, null),
       error: /*#__PURE__*/React.createElement(IconAlertCircle, null)
@@ -60,7 +54,6 @@ export default class ErrorMessage extends PureComponent {
     const text = error ? this.generatorText(error) : this.generatorText(helpText);
     const iconCls = `${prefix}-field-validate-status-icon`;
     let icon = null;
-
     if (isInInputGroup) {
       icon = /*#__PURE__*/React.createElement(IconAlertCircle, {
         className: iconCls
@@ -72,13 +65,11 @@ export default class ErrorMessage extends PureComponent {
         });
       }
     }
-
     return /*#__PURE__*/React.createElement("div", {
       className: cls,
       style: style
     }, showValidateIcon && text ? icon : null, text);
   }
-
 }
 ErrorMessage.propTypes = {
   error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.array, PropTypes.node]),

package/lib/es/form/field.js

@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
-import withField from './hoc/withField'; // Basic component
-
+import withField from './hoc/withField';
+// Basic component
 import Input from '../input/index';
 import TextArea from '../input/textarea';
 import InputNumber from '../inputNumber/index';
@@ -28,8 +28,8 @@ const FormInputNumber = withField(InputNumber, {
 const FormTextArea = withField(TextArea, {
   maintainCursor: true
 });
-const FormSelect = withField(Select); // Select after withField is a new Component, without the Option attribute, it needs to be manually assigned once
-
+const FormSelect = withField(Select);
+// Select after withField is a new Component, without the Option attribute, it needs to be manually assigned once
 FormSelect.Option = Select.Option;
 FormSelect.OptGroup = Select.OptGroup;
 const FormCheckboxGroup = withField(CheckboxGroup);

package/lib/es/form/group.js

@@ -1,18 +1,13 @@
 import _isString from "lodash/isString";
-
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
 /* eslint-disable react/destructuring-assignment */
-
-
 import React, { Component } from 'react';
 import classNames from 'classnames';
 import { isValid } from '@douyinfe/semi-foundation/lib/es/form/utils';
@@ -24,28 +19,25 @@ import { FormUpdaterContext } from './context';
 import { useFormState } from './hooks/index';
 import InputGroup from '../input/inputGroup';
 import { Col } from '../grid/index';
-const prefix = cssClasses.PREFIX; // Group component to remove Labels and ErrorMessages from its child fields
+const prefix = cssClasses.PREFIX;
+// Group component to remove Labels and ErrorMessages from its child fields
 // Unified insertion of Labels and ErrorMessages from the group level
 // Get Errors of all field in this group
-
 const GroupError = props => {
   const {
     fieldSet
   } = props;
   const formState = useFormState();
   const error = fieldSet.map(field => ObjectUtil.get(formState.errors, field));
-
   if (isValid(error)) {
     return null;
   }
-
   return /*#__PURE__*/React.createElement(ErrorMessage, {
     error: error,
     showValidateIcon: props.showValidateIcon,
     isInInputGroup: props.isInInputGroup
   });
 };
-
 class FormInputGroup extends Component {
   renderLabel(label, formProps) {
     if (label) {
@@ -60,20 +52,17 @@ class FormInputGroup extends Component {
         }, label));
       }
     }
-
     return null;
   }
-
   render() {
     const _a = this.props,
-          {
-      children,
-      label,
-      extraText,
-      extraTextPosition
-    } = _a,
-          rest = __rest(_a, ["children", "label", "extraText", "extraTextPosition"]);
-
+      {
+        children,
+        label,
+        extraText,
+        extraTextPosition
+      } = _a,
+      rest = __rest(_a, ["children", "label", "extraText", "extraTextPosition"]);
     const updater = this.context;
     const formProps = updater.getFormProps(['labelPosition', 'labelWidth', 'labelAlign', 'showValidateIcon', 'wrapperCol', 'labelCol', 'disabled']);
     const labelPosition = this.props.labelPosition || formProps.labelPosition;
@@ -82,9 +71,9 @@ class FormInputGroup extends Component {
       if (child && child.props && child.props.field) {
         groupFieldSet.push(child.props.field);
         return /*#__PURE__*/React.cloneElement(child, {
-          isInInputGroup: true // noErrorMessage: true,
+          isInInputGroup: true
+          // noErrorMessage: true,
           // noLabel: true
-
         });
       }
 
@@ -117,12 +106,10 @@ class FormInputGroup extends Component {
       "x-semi-prop": "extraText"
     }, extraText) : null;
     let content;
-
     switch (true) {
       case !appendCol:
         content = /*#__PURE__*/React.createElement(React.Fragment, null, labelContent, /*#__PURE__*/React.createElement("div", null, extraTextPosition === 'middle' ? extraContent : null, inputGroupContent, extraTextPosition === 'bottom' ? extraContent : null, groupErrorContent));
         break;
-
       case appendCol && labelPosition === 'top':
         // When labelPosition is top, you need to add an overflow hidden div to the label, otherwise it will be arranged horizontally
         content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -133,24 +120,19 @@ class FormInputGroup extends Component {
           className: labelColCls
         }), labelContent)), /*#__PURE__*/React.createElement(Col, Object.assign({}, wrapperCol), extraTextPosition === 'middle' ? extraContent : null, inputGroupContent, extraTextPosition === 'bottom' ? extraContent : null, groupErrorContent));
         break;
-
       case appendCol && labelPosition !== 'top':
         content = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Col, Object.assign({}, labelCol, {
           className: labelColCls
         }), labelContent), /*#__PURE__*/React.createElement(Col, Object.assign({}, wrapperCol), extraTextPosition === 'middle' ? extraContent : null, inputGroupContent, extraTextPosition === 'bottom' ? extraContent : null, groupErrorContent));
         break;
-
       default:
         break;
     }
-
     return /*#__PURE__*/React.createElement("div", {
       "x-label-pos": labelPosition,
       className: groupCls
     }, content);
   }
-
 }
-
 FormInputGroup.contextType = FormUpdaterContext;
 export default FormInputGroup;