@douyinfe/semi-ui 2.19.1-alpha.1 → 2.19.2-alpha.0

package/form/arrayField.tsx

@@ -1,200 +0,0 @@
-/* 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;
-    context: FormUpdaterContextType;
-
-    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

@@ -1,300 +0,0 @@
-/* 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 = {
-        '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,
-        // 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),
-        id: PropTypes.string,
-    };
-
-    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: '',
-        };
-        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);
-        }
-    }
-
-    componentDidMount() {
-        this.foundation.init();
-    }
-
-    componentWillUnmount() {
-        this.foundation.destroy();
-    }
-
-    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: (callback?: () => void) => {
-                this.forceUpdate(callback);
-            },
-            notifyChange: (formState: FormState) => {
-                this.props.onChange(formState);
-            },
-            notifyValueChange: (values: any, changedValues: any) => {
-                this.props.onValueChange(values, changedValues);
-            },
-            notifyReset: () => {
-                this.props.onReset();
-            },
-            initFormId: () => {
-                this.setState({
-                    formId: getUuidv4()
-                });
-            },
-            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);
-        }
-        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

@@ -1,18 +0,0 @@
-/* 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

@@ -1,91 +0,0 @@
-/* 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 = Array<any> | React.ReactNode;
-
-export interface ErrorMessageProps {
-    error?: ReactFieldError;
-    className?: string;
-    style?: React.CSSProperties;
-    showValidateIcon?: boolean;
-    validateStatus?: string;
-    helpText?: React.ReactNode;
-    isInInputGroup?: boolean;
-    errorMessageId?: string;
-    helpTextId?: string;
-}
-
-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,
-        // internal props
-        errorMessageId: PropTypes.string,
-        helpTextId: PropTypes.string,
-    };
-
-    generatorText(error: ReactFieldError) {
-        const { helpTextId, errorMessageId } = this.props;
-        const propsError = this.props.error;
-        let id = errorMessageId;
-        if (!propsError) {
-            id = helpTextId;
-        }
-        if (typeof error === 'string') {
-            return <span id={id}>{error}</span>;
-        } else if (Array.isArray(error)) {
-            const err = error.filter(e => e);
-            return err.length ? <span id={id}>{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

@@ -1,79 +0,0 @@
-/* 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
-};