@douyinfe/semi-ui 2.1.3 → 2.1.4-alpha.0

package/form/arrayField.tsx

@@ -0,0 +1,199 @@
+/* eslint-disable react/destructuring-assignment */
+import React, { Component } from 'react';
+import { getUuidv4 } from '@douyinfe/semi-foundation/utils/uuid';
+import { cloneDeep, isUndefined } from 'lodash';
+import { FormUpdaterContext, ArrayFieldContext } from './context';
+import warning from '@douyinfe/semi-foundation/utils/warning';
+import { ArrayFieldStaff, FormUpdaterContextType } from '@douyinfe/semi-foundation/form/interface';
+
+export interface ArrayFieldProps {
+    initValue?: any[];
+    field?: string;
+    children?: (props: ArrayFieldChildrenProps) => React.ReactNode;
+}
+
+export interface ArrayFieldChildrenProps {
+    arrayFields: {
+        key: string;
+        field: string;
+        remove: () => void;
+    }[];
+    add: () => void;
+    addWithInitValue: (lineObject: Record<string, any>) => void;
+}
+
+export interface ArrayFieldState {
+    keys: string[];
+}
+
+const filterArrayByIndex = (array: any[], index: number) => array.filter((item, i) => i !== index);
+
+const getUuidByArray = (array: any[]) => array.map(() => getUuidv4());
+
+const getUpdateKey = (arrayField: ArrayFieldStaff): string | undefined => {
+    if (!arrayField) {
+        return undefined;
+    }
+    if (arrayField && arrayField.updateKey) {
+        return arrayField.updateKey;
+    }
+    return undefined;
+};
+
+const initValueAdapter = (initValue: any) => {
+    const iv: any[] = [];
+    if (Array.isArray(initValue)) {
+        return initValue;
+    } else {
+        warning(
+            !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: any[], oldKeys?: string[]) => {
+    const val = initValueAdapter(value);
+    const newKeys = getUuidByArray(val);
+    // return newKeys;
+    const keys = newKeys.map((key, i) => (oldKeys && oldKeys[i] ? oldKeys[i] : key));
+    return keys;
+};
+
+class ArrayFieldComponent extends Component<ArrayFieldProps, ArrayFieldState> {
+    static contextType = FormUpdaterContext;
+
+    cacheFieldValues: any[];
+    shouldUseInitValue: boolean;
+    cacheUpdateKey: string;
+
+    constructor(props: ArrayFieldProps, context: FormUpdaterContextType) {
+        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 = this.add.bind(this);
+        this.addWithInitValue = this.addWithInitValue.bind(this);
+        this.remove = this.remove.bind(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 = 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.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(getUuidv4());
+        this.shouldUseInitValue = true;
+        this.setState({ keys });
+    }
+
+    addWithInitValue(lineObject: Record<string, any>) {
+        const updater = this.context;
+        const { field } = this.props;
+        const newArrayFieldVal = updater.getValue(field) ? updater.getValue(field).slice() : [];
+        newArrayFieldVal.push(lineObject);
+        updater.updateStateValue(field, newArrayFieldVal, {});
+        updater.updateArrayField(field, { updateKey: new Date().valueOf() });
+    }
+
+    remove(i: number) {
+        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 (Array.isArray(newArrayFieldError)) {
+            newArrayFieldError = newArrayFieldError.slice();
+            newArrayFieldError.splice(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 (Array.isArray(newArrayFieldValue)) {
+            newArrayFieldValue = newArrayFieldValue.slice();
+            newArrayFieldValue.splice(i, 1);
+            updater.updateStateValue(field, newArrayFieldValue);
+        }
+
+        this.setState({ keys: newKeys });
+    }
+
+    render() {
+        const { children, field } = this.props;
+        const { keys } = this.state;
+        const arrayFields = keys.map((key, i) => ({
+            // key: i,
+            key,
+            field: `${field}[${i}]`,
+            remove: () => this.remove(i),
+        }));
+        const { add } = this;
+        const { addWithInitValue } = this;
+        const contextVal = {
+            shouldUseInitValue: this.shouldUseInitValue,
+        };
+        return (
+            <ArrayFieldContext.Provider value={contextVal}>
+                {children({ arrayFields, add, addWithInitValue })}
+            </ArrayFieldContext.Provider>
+        );
+    }
+}
+
+export default ArrayFieldComponent;

package/form/baseForm.tsx

@@ -0,0 +1,290 @@
+/* eslint-disable prefer-template, max-len, @typescript-eslint/no-unused-vars */
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import FormFoundation, { BaseFormAdapter } from '@douyinfe/semi-foundation/form/foundation';
+import { strings, cssClasses } from '@douyinfe/semi-foundation/form/constants';
+import { getUuidv4 } from '@douyinfe/semi-foundation/utils/uuid';
+import warning from '@douyinfe/semi-foundation/utils/warning';
+import BaseComponent from '../_base/baseComponent';
+import { FormStateContext, FormApiContext, FormUpdaterContext } from './context';
+import { isEmptyChildren } from '../_base/reactUtils';
+import Row from '../grid/row';
+import { cloneDeep } from '../_utils/index';
+import Slot from './slot';
+import Section from './section';
+import Label from './label';
+import ErrorMessage from './errorMessage';
+import FormInputGroup from './group';
+import { noop } from 'lodash';
+import '@douyinfe/semi-foundation/form/form.scss';
+import { FormInput,
+    FormInputNumber,
+    FormTextArea,
+    FormSelect,
+    FormCheckboxGroup,
+    FormCheckbox,
+    FormRadioGroup,
+    FormRadio,
+    FormDatePicker,
+    FormSwitch,
+    FormSlider,
+    FormTimePicker,
+    FormTreeSelect,
+    FormCascader,
+    FormRating,
+    FormAutoComplete,
+    FormUpload,
+    FormTagInput } from './field';
+import {
+    BaseFormProps,
+    FormState,
+    FormApi,
+    ErrorMsg
+} from './interface';
+const prefix = cssClasses.PREFIX;
+
+interface BaseFormState {
+    formId: string;
+}
+class Form extends BaseComponent<BaseFormProps, BaseFormState> {
+    static propTypes = {
+        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,
+        // Triggered when the value of the form is updated, only when the value of the subfield changes. The entry parameter is formState.values
+        onValueChange: PropTypes.func,
+        initValues: PropTypes.object,
+        getFormApi: PropTypes.func,
+        component: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+        render: PropTypes.func,
+        validateFields: PropTypes.func,
+        style: PropTypes.object,
+        className: PropTypes.string,
+        layout: PropTypes.oneOf(strings.LAYOUT),
+        labelPosition: PropTypes.oneOf(strings.LABEL_POS),
+        labelWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+        labelAlign: PropTypes.oneOf(strings.LABEL_ALIGN),
+        labelCol: PropTypes.object, // Control labelCol {span: number, offset: number} for all field child nodes
+        wrapperCol: PropTypes.object, // Control wrapperCol {span: number, offset: number} for all field child nodes
+        allowEmpty: PropTypes.bool,
+        autoScrollToError: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+        disabled: PropTypes.bool,
+        showValidateIcon: PropTypes.bool,
+        extraTextPosition: PropTypes.oneOf(strings.EXTRA_POS),
+    };
+
+    static defaultProps = {
+        onChange: noop,
+        onSubmitFail: noop,
+        onSubmit: noop,
+        onReset: noop,
+        onValueChange: noop,
+        layout: 'vertical',
+        labelPosition: 'top',
+        allowEmpty: false,
+        autoScrollToError: false,
+        showValidateIcon: true,
+    };
+
+    static Input = FormInput;
+    static TextArea = FormTextArea;
+    static InputNumber = FormInputNumber;
+    static Select = FormSelect;
+    static Checkbox = FormCheckbox;
+    static CheckboxGroup = FormCheckboxGroup;
+    static Radio = FormRadio;
+    static RadioGroup = FormRadioGroup;
+    static DatePicker = FormDatePicker;
+    static TimePicker = FormTimePicker;
+    static Switch = FormSwitch;
+    static Slider = FormSlider;
+    static TreeSelect = FormTreeSelect;
+    static Cascader = FormCascader;
+    static Rating = FormRating;
+    static AutoComplete = FormAutoComplete;
+    static Upload = FormUpload;
+    static TagInput = FormTagInput;
+
+    static Slot = Slot;
+    static ErrorMessage = ErrorMessage;
+    static InputGroup = FormInputGroup;
+    static Label = Label;
+    static Section = Section;
+
+    formApi: FormApi;
+
+    constructor(props: BaseFormProps) {
+        super(props);
+        this.state = {
+            formId: getUuidv4(),
+        };
+        warning(
+            Boolean(props.component && props.render),
+            '[Semi Form] You should not use <Form component> and <Form render> in ths same time; <Form render> will be ignored'
+        );
+        warning(
+            props.component && props.children && !isEmptyChildren(props.children),
+            '[Semi Form] You should not use <Form component> and <Form>{children}</Form> in ths same time; <Form>{children}</Form> will be ignored'
+        );
+        warning(
+            props.render && props.children && !isEmptyChildren(props.children),
+            '[Semi Form] You should not use <Form render> and <Form>{children}</Form> in ths same time; <Form>{children}</Form> will be ignored'
+        );
+        this.submit = this.submit.bind(this);
+        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);
+        }
+    }
+
+    componentWillUnmount() {
+        this.foundation.destroy();
+        this.foundation = null;
+        this.formApi = null;
+    }
+
+    get adapter(): BaseFormAdapter<BaseFormProps, BaseFormState> {
+        return {
+            ...super.adapter,
+            cloneDeep,
+            notifySubmit: (values: any) => {
+                this.props.onSubmit(values);
+            },
+            notifySubmitFail: (errors: ErrorMsg, values: any) => {
+                this.props.onSubmitFail(errors, values);
+            },
+            forceUpdate: () => {
+                this.forceUpdate();
+            },
+            notifyChange: (formState: FormState) => {
+                this.props.onChange(formState);
+            },
+            notifyValueChange: (values: any, changedValues: any) => {
+                this.props.onValueChange(values, changedValues);
+            },
+            notifyReset: () => {
+                this.props.onReset();
+            },
+            getInitValues: () => this.props.initValues,
+            getFormProps: (keys: undefined | string | Array<string>) => {
+                if (typeof keys === 'undefined') {
+                    return this.props;
+                } else if (typeof keys === 'string') {
+                    return this.props[keys];
+                } else {
+                    const props = {};
+                    keys.forEach(key => {
+                        props[key] = this.props[key];
+                    });
+                    return props;
+                }
+            },
+            getAllErrorDOM: () => {
+                const { formId } = this.state;
+                return document.querySelectorAll(
+                    `form[x-form-id="${formId}"] .${cssClasses.PREFIX}-field-error-message`
+                );
+            },
+            getFieldDOM: (field: string) =>
+                document.querySelector(`.${cssClasses.PREFIX}-field[x-field-id="${field}"]`),
+        };
+    }
+
+    get content() {
+        const { children, component, render } = this.props;
+        const formState = this.foundation.getFormState();
+        const props = {
+            formState,
+            formApi: this.foundation.getFormApi(),
+            values: formState.values,
+        };
+        if (component) {
+            return React.createElement(component, props, children);
+        }
+        if (render) {
+            return render(props);
+        }
+        if (typeof children === 'function') {
+            return children(props);
+        }
+        return children;
+    }
+
+    submit(e: React.FormEvent<HTMLFormElement>) {
+        e.preventDefault();
+        this.foundation.submit();
+    }
+
+    reset(e: React.FormEvent<HTMLFormElement>) {
+        e.preventDefault();
+        this.foundation.reset();
+    }
+
+    render() {
+        const needClone = false;
+        const formState = this.foundation.getFormState(needClone);
+        const updaterApi = this.foundation.getModifyFormStateApi();
+        const { formId } = this.state;
+        const {
+            children,
+            getFormApi,
+            onChange,
+            onSubmit,
+            onSubmitFail,
+            onValueChange,
+            component,
+            render,
+            validateFields,
+            initValues,
+            layout,
+            style,
+            className,
+            labelPosition,
+            labelWidth,
+            labelAlign,
+            labelCol,
+            wrapperCol,
+            allowEmpty,
+            autoScrollToError,
+            showValidateIcon,
+            extraTextPosition,
+            ...rest
+        } = this.props;
+
+        const formCls = classNames(prefix, className, {
+            [prefix + '-vertical']: layout === 'vertical',
+            [prefix + '-horizontal']: layout === 'horizontal',
+        });
+        const showldAppendRow = wrapperCol && labelCol;
+
+        const formContent = (
+            <form
+                style={style}
+                {...rest}
+                onReset={this.reset}
+                onSubmit={this.submit}
+                className={formCls}
+                x-form-id={formId}
+            >
+                {this.content}
+            </form>
+        );
+        const withRowForm = <Row>{formContent}</Row>;
+        return (
+            <FormUpdaterContext.Provider value={updaterApi}>
+                <FormApiContext.Provider value={this.formApi}>
+                    <FormStateContext.Provider value={formState}>
+                        {showldAppendRow ? withRowForm : formContent}
+                    </FormStateContext.Provider>
+                </FormApiContext.Provider>
+            </FormUpdaterContext.Provider>
+        );
+    }
+}
+
+export default Form;

package/form/context.tsx

@@ -0,0 +1,18 @@
+/* eslint-disable @typescript-eslint/no-empty-function */
+import React from 'react';
+import { BaseFormApi, FormUpdaterContextType, FormState } from '@douyinfe/semi-foundation/form/interface';
+
+const FormStateContext = React.createContext<FormState>({});
+FormStateContext.displayName = 'FormState';
+
+const FormApiContext = React.createContext<BaseFormApi>({} as BaseFormApi);
+FormApiContext.displayName = 'FormApi';
+
+const FormUpdaterContext = React.createContext<FormUpdaterContextType>({} as FormUpdaterContextType);
+FormUpdaterContext.displayName = 'FormUpdater';
+
+const ArrayFieldContext = React.createContext({
+    shouldUseInitValue: true,
+});
+
+export { FormStateContext, FormApiContext, FormUpdaterContext, ArrayFieldContext };

package/form/errorMessage.tsx

@@ -0,0 +1,80 @@
+/* eslint-disable prefer-template */
+import React, { PureComponent } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import { cssClasses } from '@douyinfe/semi-foundation/form/constants';
+import { IconAlertTriangle, IconAlertCircle } from '@douyinfe/semi-icons';
+
+const prefix = cssClasses.PREFIX;
+
+export type ReactFieldError = boolean | string | Array<any> | React.ReactNode | undefined;
+
+export interface ErrorMessageProps {
+    error?: ReactFieldError;
+    className?: string;
+    style?: React.CSSProperties;
+    showValidateIcon?: boolean;
+    validateStatus?: string;
+    helpText?: React.ReactNode;
+    isInInputGroup?: boolean;
+}
+
+export default class ErrorMessage extends PureComponent<ErrorMessageProps> {
+    static propTypes = {
+        error: PropTypes.oneOfType([PropTypes.bool, PropTypes.string, PropTypes.array, PropTypes.node]),
+        className: PropTypes.string,
+        style: PropTypes.object,
+        validateStatus: PropTypes.string,
+        showValidateIcon: PropTypes.bool,
+        helpText: PropTypes.node,
+        isInInputGroup: PropTypes.bool,
+    };
+
+    generatorText(error: ReactFieldError) {
+        if (typeof error === 'string') {
+            return <span>{error}</span>;
+        } else if (Array.isArray(error)) {
+            const err = error.filter(e => e);
+            return err.length ? <span>{err.join(', ')}</span> : null;
+        } else if (React.isValidElement(error)) {
+            return error;
+        }
+        return null;
+    }
+
+    render() {
+        const { error, className, style, validateStatus, helpText, showValidateIcon, isInInputGroup } = this.props;
+        const cls = classNames(
+            {
+                [prefix + '-field-error-message']: Boolean(error),
+                [prefix + '-field-help-text']: Boolean(helpText),
+            },
+            className
+        );
+
+        if (!error && !helpText) {
+            return null;
+        }
+        const iconMap = {
+            warning: <IconAlertTriangle />,
+            error: <IconAlertCircle />,
+        };
+        const text = error ? this.generatorText(error) : this.generatorText(helpText);
+        const iconCls = `${prefix }-field-validate-status-icon`;
+        let icon = null;
+        if (isInInputGroup) {
+            icon = <IconAlertCircle className={iconCls} />;
+        } else {
+            if (iconMap[validateStatus]) {
+                icon = React.cloneElement(iconMap[validateStatus], { className: iconCls });
+            }
+        }
+
+        return (
+            <div className={cls} style={style}>
+                {showValidateIcon && text ? icon : null}
+                {text}
+            </div>
+        );
+    }
+}

package/form/field.tsx

@@ -0,0 +1,79 @@
+/* eslint-disable max-len */
+
+import withField from './hoc/withField';
+
+// Basic component
+import Input from '../input/index';
+import TextArea from '../input/textarea';
+import InputNumber from '../inputNumber/index';
+import Select from '../select/index';
+import { Checkbox } from '../checkbox/index';
+import CheckboxGroup from '../checkbox/checkboxGroup';
+import { Radio } from '../radio/index';
+import RadioGroup from '../radio/radioGroup';
+
+import DatePicker from '../datePicker/index';
+import Switch from '../switch/index';
+import Slider from '../slider/index';
+import TimePicker from '../timePicker/index';
+import TreeSelect from '../treeSelect/index';
+import Cascader from '../cascader/index';
+import Rating from '../rating/index';
+import AutoComplete from '../autoComplete/index';
+import Upload from '../upload/index';
+import TagInput from '../tagInput/index';
+import { FormCheckboxType, FormRadioType, FormSelectType } from './interface';
+
+const FormInput = withField(Input, { maintainCursor: true });
+const FormInputNumber = withField(InputNumber, { maintainCursor: true });
+const FormTextArea = withField(TextArea, { maintainCursor: true });
+
+const FormSelect = withField(Select) as typeof FormSelectType;
+// 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);
+const FormCheckbox = withField(Checkbox, {
+    valueKey: 'checked',
+    valuePath: 'target.checked',
+    shouldInject: false,
+}) as typeof FormCheckboxType;
+const FormRadioGroup = withField(RadioGroup, { valuePath: 'target.value' });
+const FormRadio = withField(Radio, {
+    valueKey: 'checked',
+    valuePath: 'target.checked',
+    shouldInject: false,
+}) as typeof FormRadioType;
+
+const FormDatePicker = withField(DatePicker);
+const FormSwitch = withField(Switch, { valueKey: 'checked' });
+const FormSlider = withField(Slider);
+const FormTimePicker = withField(TimePicker);
+const FormTreeSelect = withField(TreeSelect);
+const FormCascader = withField(Cascader);
+const FormRating = withField(Rating);
+const FormAutoComplete = withField(AutoComplete, { valueKey: 'value', onKeyChangeFnName: 'onChange' });
+const FormUpload = withField(Upload, { valueKey: 'fileList', valuePath: 'fileList', onKeyChangeFnName: 'onChange' });
+const FormTagInput = withField(TagInput);
+
+export {
+    FormInput,
+    FormInputNumber,
+    FormTextArea,
+    FormSelect,
+    FormCheckboxGroup,
+    FormCheckbox,
+    FormRadioGroup,
+    FormRadio,
+    FormDatePicker,
+    FormSwitch,
+    FormSlider,
+    FormTimePicker,
+    FormTreeSelect,
+    FormCascader,
+    FormRating,
+    FormAutoComplete,
+    FormUpload,
+    FormTagInput
+};