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

package/form/hoc/withFormApi.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { FormApiContext } from '../context';
-
-const withFormApi = (Component: React.ElementType) =>
-    React.forwardRef((props, ref) => (
-        <FormApiContext.Consumer>
-            {formApi => <Component formApi={formApi} ref={ref} {...props} />}
-        </FormApiContext.Consumer>
-    ));
-
-export default withFormApi;

package/form/hoc/withFormState.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-import { FormStateContext } from '../context';
-
-const withFormState = (Component: React.ElementType) =>
-    React.forwardRef((props, ref) => (
-        <FormStateContext.Consumer>
-            {formState => <Component formState={formState} ref={ref} {...props} />}
-        </FormStateContext.Consumer>
-    ));
-
-export default withFormState;

package/form/hooks/index.ts

@@ -1,12 +0,0 @@
-// hooks will export to user
-import useFormApi from './useFormApi';
-import useFormState from './useFormState';
-import useFieldState from './useFieldState';
-import useFieldApi from './useFieldApi';
-
-// hooks only use internal
-import useFormUpdater from './useFormUpdater';
-import useStateWithGetter from './useStateWithGetter';
-import useArrayFieldState from './useArrayFieldState';
-
-export { useFormApi, useFormState, useFieldState, useFieldApi, useFormUpdater, useStateWithGetter, useArrayFieldState };

package/form/hooks/useArrayFieldState.tsx

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

package/form/hooks/useFieldApi.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import useFormApi from './useFormApi';
-import { FormApi } from '../interface';
-import { ReactFieldError as FieldError } from '../errorMessage';
-
-const buildFieldApi = (formApi: FormApi, field: string) => ({
-    getError: () => formApi.getError(field),
-    setError: (error: FieldError) => formApi.setError(field, error),
-    getTouched: () => formApi.getTouched(field),
-    setTouched: (isTouched: boolean) => formApi.setTouched(field, isTouched),
-    getValue: () => formApi.getValue(field),
-    setValue: (value: any) => formApi.setValue(field, value),
-});
-
-function useFieldApi(field: string) {
-    const formApi = useFormApi();
-    const fieldApi = buildFieldApi(formApi, field);
-    return fieldApi;
-}
-
-export default useFieldApi;

package/form/hooks/useFieldState.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import useFormState from './useFormState';
-import * as ObjectUtil from '@douyinfe/semi-foundation/utils/object';
-import { FormState } from '../interface';
-
-const buildFieldState = (formState: FormState, field: string) => ({
-    value: ObjectUtil.get(formState.values, field),
-    error: ObjectUtil.get(formState.errors, field),
-    touched: ObjectUtil.get(formState.touched, field),
-});
-
-function useFieldState(field: string) {
-    const formState = useFormState();
-    const fieldState = buildFieldState(formState, field);
-    return fieldState;
-}
-
-export default useFieldState;

package/form/hooks/useFormApi.tsx

@@ -1,7 +0,0 @@
-import { BaseFormApi } from '@douyinfe/semi-foundation/form/interface';
-import React, { useContext } from 'react';
-import { FormApiContext } from '../context';
- 
-export default function useFormApi<T extends Record<string, any> = any>() {
-    return useContext<BaseFormApi<T>>(FormApiContext);
-}

package/form/hooks/useFormState.tsx

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

package/form/hooks/useFormUpdater.tsx

@@ -1,6 +0,0 @@
-import React, { useContext } from 'react';
-import { FormUpdaterContext } from '../context';
-
-export default function useFormUpdater() {
-    return useContext(FormUpdaterContext);
-}

package/form/hooks/useStateWithGetter.ts

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

package/form/index.tsx

@@ -1,40 +0,0 @@
-/**
- * The early design of Semi Form was inspired by informed （https://github.com/joepuzzo/informed） and formik（https://github.com/formium/formik）
- * The informed API design is very concise, and formik has very clear naming of the form status.
- * However, due to the requirements of convenient scalability (we need to split into F/A architecture), in additional they have their own binding verification library,
- * we cannot directly reuse such libraries.
- * So we fully absorbed these excellent api designs. Combining the technical principles of the two to implement our own code,
- */
-
-// FormComponent
-import Form from './baseForm';
-import Label from './label';
-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';
-
-export {
-    Form,
-    ArrayField,
-    withField,
-    useFormApi,
-    useFormState,
-    useFieldApi,
-    useFieldState,
-    withFormState,
-    withFormApi
-};
-
-export * from './interface';
-export { ArrayFieldProps } from './arrayField';
-export { ReactFieldError, ErrorMessageProps } from './errorMessage';
-export { InputGroupProps } from './group';
-export { LabelProps } from './label';
-export { SectionProps } from './section';
-export { SlotProps } from './slot';

package/form/interface.ts

@@ -1,134 +0,0 @@
-/* eslint-disable one-var */
-/* eslint-disable react/prefer-stateless-function, max-len */
-import * as React from 'react';
-import { Subtract } from 'utility-types';
-import type { RuleItem } from 'async-validator';
-import { Options as scrollIntoViewOptions } from 'scroll-into-view-if-needed';
-
-import { BaseFormApi as FormApi, FormState, WithFieldOption } from '@douyinfe/semi-foundation/form/interface';
-import { SelectProps } from '../select/index';
-import Option from '../select/option';
-import OptGroup from '../select/optionGroup';
-import { CheckboxProps } from '../checkbox/index';
-import { RadioProps } from '../radio/index';
-
-import { ErrorMessageProps, ReactFieldError as FieldError } from './errorMessage';
-import { LabelProps } from './label';
-
-export { FormState, FormApi, WithFieldOption };
-
-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 */
-    label?: LabelProps | React.ReactNode;
-    labelPosition?: 'top' | 'left' | 'inset';
-    labelAlign?: 'left' | 'right';
-    labelWidth?: number | string;
-    noLabel?: boolean;
-    noErrorMessage?: boolean;
-    name?: string;
-    fieldClassName?: string;
-    fieldStyle?: React.CSSProperties;
-    initValue?: any;
-    validate?: (fieldValue: any, values: Record<string, any>) => string | Promise<string>;
-    /** Check rules, check library based on async-validator */
-    rules?: Array<RuleItem>;
-    /** Check trigger timing */
-    trigger?: 'blur' | 'change' | 'custom' | 'mount' | Array<string>;
-    // onChange: (fieldValue: any) => void;
-    /** Converts form control values before validation */
-    transform?: (fieldValue: any) => any;
-    /** Make a second change to the component's value before the UI update */
-    convert?: (fieldValue: any) => any;
-    allowEmptyString?: boolean;
-    /** When true, use rules verification, after encountering the first rule that fails the test, the verification of subsequent rules will no longer be triggered */
-    stopValidateWithError?: boolean;
-    /* Custom prompt information is displayed in the same block as the verification information. When both have values, the verification information is displayed first */
-    helpText?: React.ReactNode;
-    /* Extra message, you can use this when you need an error message and the prompt text to appear at the same time, after helpText/errorMessage */
-    extraText?: React.ReactNode;
-    extraTextPosition?: 'middle' | 'bottom';
-    /** These declaration just hack for Subtract, not valid props in CommonFieldProps */
-    defaultValue?: any;
-    /** 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 type CommonexcludeType = {
-    defaultValue?: any;
-    value?: any;
-    checked?: boolean;
-    defaultChecked?: boolean;
-};
-
-export type RadioCheckboxExcludeProps = {
-    defaultValue?: any;
-    chekced?: boolean;
-    defaultChecked?: boolean;
-    field: string;
-};
-
-export type RCIncludeType = {
-    // Need to take into account the use of Form. Checkbox, Form. Radio and Group scenarios
-    field?: string;
-};
-
-export class FormSelect extends React.Component<Subtract<SelectProps & CommonFieldProps, CommonexcludeType>> {
-    static Option: typeof Option;
-    static OptGroup: typeof OptGroup;
-}
-
-export interface SelectStatic {
-    Option: typeof Option;
-    OptGroup: typeof OptGroup;
-}
-
-export class Field<P> extends React.Component<Subtract<P & CommonFieldProps, CommonexcludeType> & React.RefAttributes<any>> {}
-export let FormSelectType: React.ComponentType<Subtract<SelectProps & CommonFieldProps, CommonexcludeType>> & SelectStatic;
-export let FormCheckboxType: React.ComponentType<Subtract<CommonFieldProps, RadioCheckboxExcludeProps> & CheckboxProps & RCIncludeType>;
-export let FormRadioType: React.ComponentType<Subtract<CommonFieldProps, RadioCheckboxExcludeProps> & RadioProps & RCIncludeType>;
-
-export interface ErrorMsg {
-    [optionalKey: string]: FieldError;
-}
-export interface FormFCChild<K extends Record<string, any> = any> {
-    formState: FormState<K>;
-    values: K;
-    formApi: FormApi<K>;
-}
-
-interface setValuesConfig {
-    isOverride: boolean;
-}
-
-export interface BaseFormProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'children' | 'onChange'> {
-    'aria-label'?: React.AriaAttributes['aria-label'];
-    onSubmit?: (values: Record<string, any>) => void;
-    onSubmitFail?: (errors: Record<string, FieldError>, values: any) => void;
-    onReset?: () => void;
-    onValueChange?: (values: Record<string, any>, changedValue: Record<string, any>) => void;
-    onChange?: (formState: FormState) => void;
-    validateFields?: (values: Record<string, any>) => string | Record<string, any>;
-    /** Use this if you want to populate the form with initial values. */
-    initValues?: Record<string, any>;
-    id?: string;
-    /** getFormApi will be call once when Form mounted, u can save formApi reference in your component  */
-    getFormApi?: (formApi: FormApi) => void;
-    style?: React.CSSProperties;
-    className?: string;
-    layout?: 'horizontal' | 'vertical';
-    labelPosition?: 'top' | 'left' | 'inset';
-    labelWidth?: number | string;
-    labelAlign?: 'left' | 'right';
-    labelCol?: Record<string, any>;
-    wrapperCol?: Record<string, any>;
-    allowEmpty?: boolean;
-    render?: (internalProps: FormFCChild) => React.ReactNode;
-    component?: React.FC<any> | React.ComponentClass<any>;
-    children?: React.ReactNode | ((internalProps: FormFCChild) => React.ReactNode);
-    autoScrollToError?: boolean | scrollIntoViewOptions;
-    disabled?: boolean;
-    showValidateIcon?: boolean;
-    extraTextPosition?: 'middle' | 'bottom';
-}

package/form/label.tsx

@@ -1,96 +0,0 @@
-import React, { PureComponent } from 'react';
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-import { cssClasses } from '@douyinfe/semi-foundation/form/constants';
-import LocaleConsumer from '../locale/localeConsumer';
-import { Locale } from '../locale/interface';
-
-const prefixCls = cssClasses.PREFIX;
-
-export interface LabelProps {
-    /** text-align of label */
-    align?: string;
-    className?: string;
-    children?: React.ReactNode;
-    disabled?: boolean;
-    id?: string;
-    /** Whether to display the required * symbol */
-    required?: boolean;
-    /** Content of label */
-    text?: React.ReactNode;
-    /** Used to configure the htmlFor attribute of the label tag */
-    name?: string;
-    /** width of label */
-    width?: number | string;
-    style?: React.CSSProperties;
-    extra?: React.ReactNode;
-    optional?: boolean;
-}
-
-export default class Label extends PureComponent<LabelProps> {
-    static defaultProps = {
-        required: false,
-        name: '',
-        align: 'left',
-        className: '',
-        optional: false,
-    };
-
-    static propTypes = {
-        id: PropTypes.string,
-        children: PropTypes.node,
-        required: PropTypes.bool,
-        text: PropTypes.node,
-        disabled: PropTypes.bool,
-        name: PropTypes.string,
-        align: PropTypes.string,
-        width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-        style: PropTypes.object,
-        className: PropTypes.string,
-        extra: PropTypes.node,
-        optional: PropTypes.bool,
-    };
-
-    render() {
-        const { children, required, text, disabled, name, width, align, style, className, extra, id, optional } = this.props;
-
-        const labelCls = classNames(className, {
-            [`${prefixCls}-field-label`]: true,
-            [`${prefixCls}-field-label-left`]: align === 'left',
-            [`${prefixCls}-field-label-right`]: align === 'right',
-            [`${prefixCls}-field-label-required`]: required,
-            [`${prefixCls}-field-label-disabled`]: disabled,
-            [`${prefixCls}-field-label-with-extra`]: extra,
-        });
-        const labelStyle = style ? style : {};
-        width ? labelStyle.width = width : null;
-
-        const optionalText = (
-            <LocaleConsumer<Locale['Form']> componentName="Form" >
-                {(locale: Locale['Form']) => (
-                    <span className={`${prefixCls}-field-label-optional-text`}>{locale.optional}</span>
-                )}
-            </LocaleConsumer>
-        );
-
-        const textContent = (
-            <div className={`${prefixCls}-field-label-text`} x-semi-prop="label">
-                {typeof text !== 'undefined' ? text : children}
-                {optional ? optionalText : null}
-            </div>
-        );
-
-        const contentWithExtra = (
-            <>
-                {textContent}
-                <div className={`${prefixCls}-field-label-extra`}>{extra}</div>
-            </>
-        );
-
-        return (
-            <label className={labelCls} htmlFor={name} style={labelStyle} id={id}>
-                {extra ? contentWithExtra : textContent}
-            </label>
-        );
-    }
-}

package/form/section.tsx

@@ -1,38 +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';
-
-const prefix = cssClasses.PREFIX;
-
-export interface SectionProps {
-    className?: string;
-    style?: React.CSSProperties;
-    text?: React.ReactNode;
-    children?: React.ReactNode;
-}
-
-export default class Section extends PureComponent<SectionProps> {
-    static propTypes = {
-        text: PropTypes.node,
-        className: PropTypes.string,
-        style: PropTypes.object,
-        children: PropTypes.node,
-    };
-
-    render() {
-        const { text, className, style, children } = this.props;
-        const cls = classNames({
-            [prefix + '-section']: true,
-        }, className);
-        const textCls = prefix + '-section-text';
-
-        return (
-            <section className={cls} style={style}>
-                <h5 className={textCls}>{text}</h5>
-                {children}
-            </section>
-        );
-    }
-}

package/form/slot.tsx

@@ -1,167 +0,0 @@
-/* eslint-disable max-lines-per-function, prefer-destructuring, prefer-const, @typescript-eslint/no-unused-vars */
-import React, { useContext } from 'react';
-import classNames from 'classnames';
-import { cssClasses } from '@douyinfe/semi-foundation/form/constants';
-import { isString, isNumber, isObject } from 'lodash';
-import Label, { LabelProps } from './label';
-import { Col } from '../grid';
-import { FormUpdaterContext } from './context';
-import ErrorMessage, { ErrorMessageProps } from './errorMessage';
-
-const prefix = cssClasses.PREFIX;
-
-export interface SlotProps {
-    className?: string;
-    style?: React.CSSProperties;
-    label?: LabelProps | React.ReactNode;
-    noLabel?: boolean;
-    labelPosition?: 'top' | 'left';
-    error?: ErrorMessageProps;
-    children?: React.ReactNode;
-}
-
-const FormSlot = (props: SlotProps) => {
-    let labelCol, wrapperCol, labelWidth, labelAlign, content;
-    let labelPosition = 'top';
-
-    try {
-        const updater = useContext(FormUpdaterContext);
-        const formProps = updater.getFormProps(['labelPosition', 'labelWidth', 'labelAlign', 'labelCol', 'wrapperCol']);
-        labelCol = formProps.labelCol;
-        wrapperCol = formProps.wrapperCol;
-        labelWidth = formProps.labelWidth;
-        labelAlign = formProps.labelAlign;
-        labelPosition = formProps.labelPosition ? formProps.labelPosition : labelPosition;
-    } catch (error) {
-    }
-
-    // eslint-disable-next-line react/destructuring-assignment
-    props.labelPosition ? labelPosition = props.labelPosition : null;
-
-    let { children, label, className, style, error, noLabel, ...rest } = props;
-
-    const appendCol = labelCol && wrapperCol;
-
-    const slotCls = classNames(
-        {
-            [`${prefix}-field`]: true,
-            [`${prefix}-slot`]: true,
-        },
-        className
-    );
-
-    const labelColCls = classNames({
-        [`${prefix}-col-${labelAlign}`]: true,
-    });
-
-    switch (true) {
-        case isObject(label) && !React.isValidElement(label):
-            // do nothing
-            break;
-        case isString(label) || isNumber(label):
-            // @ts-ignore skip type check, the actual type is already determined
-            label = { text: label };
-            break;
-        case React.isValidElement(label):
-            // @ts-ignore skip type check, the actual type is already determined
-            label = { text: label };
-            break;
-        default:
-            break;
-    }
-
-    let slotError = null;
-    if (typeof error !== undefined) {
-        let emProps = {};
-        switch (true) {
-            case isObject(error) && !React.isValidElement(error):
-                // do nothing
-                emProps = error;
-                break;
-            case isString(error) || isNumber(error):
-                emProps = { error };
-                break;
-            case React.isValidElement(error):
-                emProps = { error };
-                break;
-            default:
-                break;
-        }
-        slotError = <ErrorMessage {...emProps} />;
-    }
-
-    let mergeLabelProps = {
-        align: labelAlign,
-        width: labelWidth,
-        // @ts-ignore: After the above switch statement, label must be of object type
-        ...label,
-    };
-
-    let mainCls = classNames({
-        [`${prefix}-field-main`]: true,
-        [`${prefix}-slot-main`]: true,
-    });
-
-    switch (true) {
-        case !appendCol && !noLabel:
-            content = (
-                <>
-                    <Label {...mergeLabelProps} />
-                    <div className={mainCls}>
-                        {children}
-                        {slotError}
-                    </div>
-                </>
-            );
-            break;
-        case !appendCol && noLabel:
-            content = (
-                <>
-                    <div className={mainCls}>
-                        {children}
-                        {slotError}
-                    </div>
-                </>
-            );
-            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 = (
-                <>
-                    <div style={{ overflow: 'hidden' }}>
-                        <Col {...labelCol} className={labelColCls}>
-                            <Label {...mergeLabelProps} />
-                        </Col>
-                    </div>
-                    <Col>
-                        {children}
-                        {slotError}
-                    </Col>
-                </>
-            );
-            break;
-        case appendCol && labelPosition !== 'top':
-            content = (
-                <>
-                    <Col {...labelCol} className={labelColCls}>
-                        <Label {...mergeLabelProps} />
-                    </Col>
-                    <Col>
-                        {children}
-                        {slotError}
-                    </Col>
-                </>
-            );
-            break;
-        default:
-            break;
-    }
-
-    return (
-        <div className={slotCls} x-label-pos={labelPosition} style={style}>
-            {content}
-        </div>
-    );
-};
-
-export default FormSlot;

package/getBabelConfig.js

@@ -1,25 +0,0 @@
-module.exports = ({ isESM }) => {
-    return {
-        presets: [
-            '@babel/preset-react',
-            [
-                '@babel/preset-env',
-                {
-                    modules: isESM ? false : 'commonjs',
-                    targets: {
-                        browsers: [
-                            "> 0.5%",
-                            "last 2 versions",
-                            "Firefox ESR",
-                            "not dead",
-                            "not IE 11"
-                        ]
-                    }
-                },
-            ],
-        ],
-        plugins: [
-            'lodash'
-        ]
-    };
-};