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

package/lib/cjs/form/arrayField.js

@@ -0,0 +1,265 @@
+"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 _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
+
+var _slice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/slice"));
+
+var _splice = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/splice"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _uuid = require("@douyinfe/semi-foundation/lib/cjs/utils/uuid");
+
+var _lodashEs = require("lodash-es");
+
+var _context6 = require("./context");
+
+var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/warning"));
+
+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 react/destructuring-assignment */
+const filterArrayByIndex = (array, index) => (0, _filter.default)(array).call(array, (item, i) => i !== index);
+
+const getUuidByArray = array => (0, _map.default)(array).call(array, () => (0, _uuid.getUuidv4)());
+
+const getUpdateKey = arrayField => {
+  if (!arrayField) {
+    return undefined;
+  }
+
+  if (arrayField && arrayField.updateKey) {
+    return arrayField.updateKey;
+  }
+
+  return undefined;
+};
+
+const initValueAdapter = initValue => {
+  const iv = [];
+
+  if ((0, _isArray.default)(initValue)) {
+    return initValue;
+  } else {
+    (0, _warning.default)(!(0, _lodashEs.isUndefined)(initValue), '[Semi Form ArrayField] initValue of ArrayField must be an array. Please check the type of your props');
+    return iv;
+  }
+};
+/**
+ *
+ * @param {any[]} value
+ * @param {string[]} oldKeys
+ * @returns string[]
+ */
+
+
+const generateKeys = (value, oldKeys) => {
+  const val = initValueAdapter(value);
+  const newKeys = getUuidByArray(val); // return newKeys;
+
+  const keys = (0, _map.default)(newKeys).call(newKeys, (key, i) => oldKeys && oldKeys[i] ? oldKeys[i] : key);
+  return keys;
+};
+
+class ArrayFieldComponent extends _react.Component {
+  constructor(props, context) {
+    var _context, _context2, _context3;
+
+    super(props, context);
+    const initValueInProps = this.props.initValue;
+    const {
+      field
+    } = this.props;
+    const initValueInForm = context.getValue(field);
+    const initValue = initValueInProps || initValueInForm;
+    this.state = {
+      keys: generateKeys(initValue)
+    };
+    this.add = (0, _bind.default)(_context = this.add).call(_context, this);
+    this.addWithInitValue = (0, _bind.default)(_context2 = this.addWithInitValue).call(_context2, this);
+    this.remove = (0, _bind.default)(_context3 = this.remove).call(_context3, this);
+    this.cacheFieldValues = null;
+    this.cacheUpdateKey = null;
+    /*
+        If updateKey exists, it means that the arrayField (usually a nested ArrayField not at the first level) is only re-mounted due to setValues,
+        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
+
+    const initValueCopyForFormState = (0, _lodashEs.cloneDeep)(initValue);
+    const initValueCopyForReset = (0, _lodashEs.cloneDeep)(initValue);
+    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 {
+      field
+    } = this.props;
+    updater.unRegisterArrayField(field);
+  }
+
+  componentDidUpdate() {
+    const updater = this.context;
+    const {
+      field
+    } = this.props;
+    const {
+      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
+    // re generate keys to update arrayField;
+
+    if (updateKey !== this.cacheUpdateKey) {
+      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
+    } = this.state;
+    keys.push((0, _uuid.getUuidv4)());
+    this.shouldUseInitValue = true;
+    this.setState({
+      keys
+    });
+  }
+
+  addWithInitValue(lineObject) {
+    var _context4;
+
+    const updater = this.context;
+    const {
+      field
+    } = this.props;
+    const newArrayFieldVal = updater.getValue(field) ? (0, _slice.default)(_context4 = updater.getValue(field)).call(_context4) : [];
+    newArrayFieldVal.push(lineObject);
+    updater.updateStateValue(field, newArrayFieldVal, {});
+    updater.updateArrayField(field, {
+      updateKey: new Date().valueOf()
+    });
+  }
+
+  remove(i) {
+    const updater = this.context;
+    const {
+      keys
+    } = this.state;
+    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
+
+    let newArrayFieldError = updater.getError(field);
+    const opts = {
+      notNotify: true,
+      notUpdate: true
+    };
+
+    if ((0, _isArray.default)(newArrayFieldError)) {
+      newArrayFieldError = (0, _slice.default)(newArrayFieldError).call(newArrayFieldError);
+      (0, _splice.default)(newArrayFieldError).call(newArrayFieldError, i, 1);
+      updater.updateStateError(field, newArrayFieldError, opts);
+    } // if (Array.isArray(newArrayFieldTouched)) {
+    //     newArrayFieldTouched = newArrayFieldTouched.slice();
+    //     newArrayFieldTouched.splice(i, 1);
+    //     updater.updateStateTouched(field, newArrayFieldTouched, opts);
+    // }
+
+
+    let newArrayFieldValue = updater.getValue(field);
+
+    if ((0, _isArray.default)(newArrayFieldValue)) {
+      newArrayFieldValue = (0, _slice.default)(newArrayFieldValue).call(newArrayFieldValue);
+      (0, _splice.default)(newArrayFieldValue).call(newArrayFieldValue, i, 1);
+      updater.updateStateValue(field, newArrayFieldValue);
+    }
+
+    this.setState({
+      keys: newKeys
+    });
+  }
+
+  render() {
+    const {
+      children,
+      field
+    } = this.props;
+    const {
+      keys
+    } = this.state;
+    const arrayFields = (0, _map.default)(keys).call(keys, (key, i) => {
+      var _context5;
+
+      return {
+        // key: i,
+        key,
+        field: (0, _concat.default)(_context5 = "".concat(field, "[")).call(_context5, i, "]"),
+        remove: () => this.remove(i)
+      };
+    });
+    const {
+      add
+    } = this;
+    const {
+      addWithInitValue
+    } = this;
+    const contextVal = {
+      shouldUseInitValue: this.shouldUseInitValue
+    };
+    return /*#__PURE__*/_react.default.createElement(_context6.ArrayFieldContext.Provider, {
+      value: contextVal
+    }, children({
+      arrayFields,
+      add,
+      addWithInitValue
+    }));
+  }
+
+}
+
+ArrayFieldComponent.contextType = _context6.FormUpdaterContext;
+var _default = ArrayFieldComponent;
+exports.default = _default;

package/lib/cjs/form/baseForm.d.ts

@@ -0,0 +1,148 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { BaseFormAdapter } from '@douyinfe/semi-foundation/lib/cjs/form/foundation';
+import BaseComponent from '../_base/baseComponent';
+import Section from './section';
+import Label from './label';
+import ErrorMessage from './errorMessage';
+import FormInputGroup from './group';
+import '@douyinfe/semi-foundation/lib/cjs/form/form.css';
+import { BaseFormProps, FormApi } from './interface';
+interface BaseFormState {
+    formId: string;
+}
+declare class Form extends BaseComponent<BaseFormProps, BaseFormState> {
+    static propTypes: {
+        onSubmit: PropTypes.Requireable<(...args: any[]) => any>;
+        onSubmitFail: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onReset: PropTypes.Requireable<(...args: any[]) => any>;
+        onValueChange: PropTypes.Requireable<(...args: any[]) => any>;
+        initValues: PropTypes.Requireable<object>;
+        getFormApi: PropTypes.Requireable<(...args: any[]) => any>;
+        component: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        render: PropTypes.Requireable<(...args: any[]) => any>;
+        validateFields: PropTypes.Requireable<(...args: any[]) => any>;
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+        layout: PropTypes.Requireable<string>;
+        labelPosition: PropTypes.Requireable<string>;
+        labelWidth: PropTypes.Requireable<string | number>;
+        labelAlign: PropTypes.Requireable<string>;
+        labelCol: PropTypes.Requireable<object>;
+        wrapperCol: PropTypes.Requireable<object>;
+        allowEmpty: PropTypes.Requireable<boolean>;
+        autoScrollToError: PropTypes.Requireable<boolean | object>;
+        disabled: PropTypes.Requireable<boolean>;
+        showValidateIcon: PropTypes.Requireable<boolean>;
+        extraTextPosition: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        onChange: (...args: any[]) => void;
+        onSubmitFail: (...args: any[]) => void;
+        onSubmit: (...args: any[]) => void;
+        onReset: (...args: any[]) => void;
+        onValueChange: (...args: any[]) => void;
+        layout: string;
+        labelPosition: string;
+        allowEmpty: boolean;
+        autoScrollToError: boolean;
+        showValidateIcon: boolean;
+    };
+    static Input: React.ComponentType<import("utility-types").Subtract<Omit<import("../input").InputProps, "forwardRef"> & React.RefAttributes<HTMLInputElement>, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
+    static TextArea: React.ComponentType<import("utility-types").Subtract<Omit<import("../input").TextAreaProps, "forwardRef"> & React.RefAttributes<HTMLTextAreaElement>, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
+    static InputNumber: React.ComponentType<import("utility-types").Subtract<any, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
+    static Select: React.ComponentType<import("utility-types").Subtract<{
+        autoFocus?: boolean;
+        arrowIcon?: React.ReactNode;
+        defaultValue?: string | number | any[] | Record<string, any>;
+        value?: string | number | any[] | Record<string, any>;
+        placeholder?: React.ReactNode;
+        onChange?: (value: string | number | any[] | Record<string, any>) => void;
+        multiple?: boolean;
+        filter?: boolean | ((inpueValue: string, option: import("../select").OptionProps) => boolean);
+        max?: number;
+        maxTagCount?: number;
+        maxHeight?: string | number;
+        style?: React.CSSProperties;
+        className?: string;
+        size?: import("../select").SelectSize;
+        disabled?: boolean;
+        emptyContent?: React.ReactNode;
+        onDropdownVisibleChange?: (visible: boolean) => void;
+        zIndex?: number;
+        position?: "top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver";
+        onSearch?: (value: string) => void;
+        dropdownClassName?: string;
+        dropdownStyle?: React.CSSProperties;
+        outerTopSlot?: React.ReactNode;
+        innerTopSlot?: React.ReactNode;
+        outerBottomSlot?: React.ReactNode;
+        innerBottomSlot?: React.ReactNode;
+        optionList?: import("../select").OptionProps[];
+        dropdownMatchSelectWidth?: boolean;
+        loading?: boolean;
+        defaultOpen?: boolean;
+        validateStatus?: "default" | "error" | "warning" | "success";
+        defaultActiveFirstOption?: boolean;
+        onChangeWithObject?: boolean;
+        suffix?: React.ReactNode;
+        prefix?: React.ReactNode;
+        insetLabel?: React.ReactNode;
+        showClear?: boolean;
+        showArrow?: boolean;
+        renderSelectedItem?: import("../select").RenderSelectedItemFn;
+        renderCreateItem?: (inputValue: string | number, focus: boolean) => React.ReactNode;
+        renderOptionItem?: (props: import("../select").optionRenderProps) => React.ReactNode;
+        onMouseEnter?: (e: React.MouseEvent<Element, MouseEvent>) => any;
+        onMouseLeave?: (e: React.MouseEvent<Element, MouseEvent>) => any;
+        clickToHide?: boolean;
+        onExceed?: (option: import("../select").OptionProps) => void;
+        onCreate?: (option: import("../select").OptionProps) => void;
+        remote?: boolean;
+        onDeselect?: (value: string | number | any[] | Record<string, any>, option: Record<string, any>) => void;
+        onSelect?: (value: string | number | any[] | Record<string, any>, option: Record<string, any>) => void;
+        allowCreate?: boolean;
+        triggerRender?: (props?: any) => React.ReactNode;
+        onClear?: () => void;
+        virtualize?: import("../select").virtualListProps;
+        onFocus?: (e: React.FocusEvent<Element, Element>) => void;
+        onBlur?: (e: React.FocusEvent<Element, Element>) => void;
+        onListScroll?: (e: React.UIEvent<HTMLDivElement, UIEvent>) => void;
+        children?: React.ReactNode;
+    } & Pick<import("../tooltip").TooltipProps, "stopPropagation" | "spacing" | "mouseEnterDelay" | "autoAdjustOverflow" | "mouseLeaveDelay" | "getPopupContainer" | "motion"> & React.RefAttributes<any> & import("./interface").CommonFieldProps, import("./interface").CommonexcludeType>> & import("./interface").SelectStatic;
+    static Checkbox: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../checkbox").CheckboxProps & import("./interface").RCIncludeType>;
+    static CheckboxGroup: React.ComponentType<import("utility-types").Subtract<import("../checkbox").CheckboxGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
+    static Radio: React.ComponentType<import("utility-types").Subtract<import("./interface").CommonFieldProps, import("./interface").RadioCheckboxExcludeProps> & import("../radio").RadioProps & import("./interface").RCIncludeType>;
+    static RadioGroup: React.ComponentType<import("utility-types").Subtract<import("../radio").RadioGroupProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
+    static DatePicker: React.ComponentType<import("utility-types").Subtract<import("../datePicker").DatePickerProps & React.RefAttributes<import("../datePicker/datePicker").default>, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
+    static TimePicker: React.ComponentType<import("utility-types").Subtract<import("../timePicker").TimePickerProps | (import("../timePicker").TimePickerProps & {
+        children?: React.ReactNode;
+    }), import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
+    static Switch: React.ComponentType<import("utility-types").Subtract<import("../switch").SwitchProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
+    static Slider: React.ComponentType<import("utility-types").Subtract<import("../slider").SliderProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
+    static TreeSelect: React.ComponentType<import("utility-types").Subtract<import("../treeSelect").TreeSelectProps | (import("../treeSelect").TreeSelectProps & {
+        children?: React.ReactNode;
+    }), import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
+    static Cascader: React.ComponentType<import("utility-types").Subtract<import("../cascader").CascaderProps | (import("../cascader").CascaderProps & {
+        children?: React.ReactNode;
+    }), import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
+    static Rating: React.ComponentType<import("utility-types").Subtract<import("../rating").RatingProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
+    static AutoComplete: React.ComponentType<import("utility-types").Subtract<import("../autoComplete").AutoCompleteProps<import("../autoComplete").BaseDataItem>, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
+    static Upload: React.ComponentType<import("utility-types").Subtract<import("../upload").UploadProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
+    static TagInput: React.ComponentType<import("utility-types").Subtract<import("../tagInput").TagInputProps, import("./interface").CommonexcludeType> & import("./interface").CommonFieldProps>;
+    static Slot: (props: import("./slot").SlotProps) => JSX.Element;
+    static ErrorMessage: typeof ErrorMessage;
+    static InputGroup: typeof FormInputGroup;
+    static Label: typeof Label;
+    static Section: typeof Section;
+    formApi: FormApi;
+    constructor(props: BaseFormProps);
+    componentWillUnmount(): void;
+    get adapter(): BaseFormAdapter<BaseFormProps, BaseFormState>;
+    get content(): any;
+    submit(e: React.FormEvent<HTMLFormElement>): void;
+    reset(e: React.FormEvent<HTMLFormElement>): void;
+    render(): JSX.Element;
+}
+export default Form;