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

package/form/_story/FieldProps/fieldRef.jsx

@@ -1,74 +0,0 @@
-/* eslint-disable no-unused-vars */
-import React, { useState, useLayoutEffect, useEffect, useRef } from 'react';
-import { storiesOf } from '@storybook/react';
-import { Button, Modal, TreeSelect, Row, Col, Avatar, Tabs, TabPane, Badge } from '@douyinfe/semi-ui';
-import {
-    Form,
-    useFormState,
-    useFormApi,
-    useFieldApi,
-    useFieldState,
-    withFormState,
-    withFormApi,
-    withField,
-    ArrayField,
-    Icon
-} from '../../index';
-
-import {
-    UseFormApiDemo,
-    UseFormStateDemo,
-    UseFieldApiDemo,
-    UseFieldStateDemo,
-    WithFormStateDemo,
-    WithFormApiDemo,
-    ComponentUsingFormState,
-    CustomStringify
-} from '../Hook/hookDemo';
-const { Input, Select, DatePicker, Switch, Slider, CheckboxGroup, Checkbox, RadioGroup, Radio, TimePicker } = Form;
-
-const FieldRefDemo = () => {
-    const fieldRef = useRef(null);
-    const inputRef = useRef(null);
-    const [open, setOpen] = useState(false);
-
-    const onChange = () => {
-        console.log(fieldRef);
-        if (open) {
-            fieldRef.current && fieldRef.current.close();
-            setOpen(false);
-        } else {
-            fieldRef.current && fieldRef.current.open();
-            setOpen(true);
-        }
-    };
-
-    const focus = () => {
-        inputRef.current && inputRef.current.focus();
-    };
-
-    return (
-        <Form>
-            <Form.Input
-                field="name"
-                label="名称"
-                ref={inputRef}
-                rules={[
-                    { required: true, message: 'required error' },
-                    { type: 'string', message: 'type error' },
-                    { validator: (rule, value) => value === 'muji', message: 'not muji' }
-                ]}
-            />
-            <Button onClick={onChange}>toggleOpen</Button>
-            <Button onClick={focus}>focus Input</Button>
-            <Form.Select field="role" label="角色" placeholder="请选择你的角色" ref={fieldRef}>
-                <Form.Select.Option value="operate">运营</Form.Select.Option>
-                <Form.Select.Option value="rd">开发</Form.Select.Option>
-                <Form.Select.Option value="pm">产品</Form.Select.Option>
-                <Form.Select.Option value="ued">设计</Form.Select.Option>
-            </Form.Select>
-        </Form>
-    );
-};
-
-export { FieldRefDemo };

package/form/_story/FieldProps/helpAndExtra.jsx

@@ -1,136 +0,0 @@
-/* eslint-disable no-unused-vars */
-import React, { useState, useLayoutEffect, useEffect, useRef } from 'react';
-import { storiesOf } from '@storybook/react';
-import { Button, Modal, TreeSelect, Row, Col, Avatar, Tabs, TabPane, Badge } from '@douyinfe/semi-ui';
-import {
-    Form,
-    useFormState,
-    useFormApi,
-    useFieldApi,
-    useFieldState,
-    withFormState,
-    withFormApi,
-    withField,
-    ArrayField
-} from '../../index';
-
-import {
-    UseFormApiDemo,
-    UseFormStateDemo,
-    UseFieldApiDemo,
-    UseFieldStateDemo,
-    WithFormStateDemo,
-    WithFormApiDemo,
-    ComponentUsingFormState,
-    CustomStringify
-} from '../Hook/hookDemo';
-const { Input, Select, DatePicker, Switch, Slider, CheckboxGroup, Checkbox, RadioGroup, Radio, TimePicker } = Form;
-
-
-class HelpAndExtra extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            helpText: '密码建议包含大小写字母，中英文数字，以及特殊字符',
-            validateStatus: 'default'
-        };
-        this.formApi = null;
-        this.getFormApi = this.getFormApi.bind(this);
-        this.validate = this.validate.bind(this);
-        this.random = this.random.bind(this);
-    }
-
-    getFormApi(formApi) {
-        this.formApi = formApi;
-    }
-
-    validate(val, values) {
-        if (!val) {
-            this.setState({ validateStatus: 'error' });
-            return <span>密码不能为空</span>;
-        } else if (val && val.length <= 3) {
-            this.setState({
-                helpText: <span style={{ color: 'var(--semi-color-warning)' }}>密码强度：弱</span>,
-                validateStatus: 'warning'
-            }); // show helpText
-            return ''; // validate pass
-        } else {
-            this.setState({
-                helpText: '',
-                validateStatus: 'success'
-            });
-            return '';
-        }
-    }
-
-    random() {
-        let pw = (Math.random() * 100000).toString().slice(0, 5);
-        this.formApi.setValue('password', pw);
-    }
-
-    render() {
-        let { helpText, validateStatus } = this.state;
-        return (
-            <Form
-                getFormApi={this.getFormApi}
-                showValidateIcon={true}
-                onSubmit={value => console.log('submit success')}
-                onSubmitFail={errors => console.log(errors)}
-            >
-                <Form.Input
-                    validate={this.validate}
-                    field="password"
-                    validateStatus={validateStatus}
-                    helpText={helpText}
-                    extraText={(
-                        <div
-                            style={{
-                                color: 'rgba(var(--semi-blue-5), 1)',
-                                fontSize: 14,
-                                userSelect: 'none',
-                                cursor: 'pointer'
-                            }}
-                            onClick={this.random}>
-                            没有想到合适的密码？点击随机生成一个
-                        </div>
-                    )}
-                />
-                <Button htmlType="submit">Submit</Button>
-            </Form>
-        );
-    }
-}
-
-const ExtraPositionDemo = () => {
-    const helpText = <span style={{ color: 'var(--semi-color-warning)' }}>密码强度：弱</span>;
-    return (
-        <Form extraTextPosition="middle">
-            <Form.Input
-                field="a"
-                label="extraTextPosition-middle: reactNode"
-                helpText={helpText}
-                // extraTextPosition='middle'
-                extraText={(
-                    <div style={{
-                        color: 'rgba(var(--semi-blue-5), 1)',
-                        fontSize: 14,
-                        userSelect: 'none',
-                        cursor: 'pointer'
-                    }}
-                    >
-                        i am extra text
-                    </div>
-                )}
-            />
-            <Form.Input
-                field="b"
-                helpText={helpText}
-                label="extraTextPosition-bottom: string"
-                extraTextPosition="bottom"
-                extraText={'i am extra text'}
-            />
-        </Form>
-    );
-};
-
-export { HelpAndExtra, ExtraPositionDemo };

package/form/_story/FieldProps/labelOptional.jsx

@@ -1,30 +0,0 @@
-/* eslint-disable no-unused-vars */
-import React, { useState, useLayoutEffect, useEffect, useRef } from 'react';
-import { storiesOf } from '@storybook/react';
-import { Button, Modal, TreeSelect, Row, Col, Avatar, Tabs, TabPane, Badge, LocaleProvider } from '@douyinfe/semi-ui';
-import {
-    Form,
-} from '../../index';
-
-const { Input, Select, DatePicker, Switch, Slider, CheckboxGroup, Checkbox, RadioGroup, Radio, TimePicker } = Form;
-
-
-const LableOptionalDemo = () => {
-    const helpText = <span style={{ color: 'var(--semi-color-warning)' }}>密码强度：弱</span>;
-    return (
-        <Form>
-            <Form.Input
-                field="semi"
-                label={{ text: 'semi', optional: true }}
-                helpText={helpText}
-            />
-            <Form.Input
-                field="label2"
-                label={{ text: 'semi', optional: true }}
-                helpText={helpText}
-            />
-        </Form>
-    );
-};
-
-export { LableOptionalDemo };

package/form/_story/FieldProps/rulesUpdateDemo.js

@@ -1,116 +0,0 @@
-
-/* eslint-disable */
-import React, { useLayoutEffect, useRef, useContext, useState, Component } from 'react';
-import { Button, Form, Select } from '@douyinfe/semi-ui';
-
-const ApiContext = React.createContext({});
-
-const HOC = Component => props => {
-    let { text } = props;
-    let { field } = props;
-
-    const parentApi = useContext(ApiContext);
-
-    const ref = useRef(props);
-
-    const logProps = () => {
-        // 通过props取，只能是当次render时的值
-        console.log(`props: ${props.text}`);
-        // 通过ref取，始终是最新的值
-        // console.log(`ref.current: ${ref.current.text}`);
-    };
-
-    let content = (() => (
-        <>
-            {Component}
-            <span>Props.text:</span> {text}
-            <Button onClick={logProps}>子级自己内部触发log</Button>
-        </>
-    ))();
-
-    useLayoutEffect(() => {
-        ref.current = props;
-    }, [props]);
-
-    useLayoutEffect(() => {
-        parentApi.register(field, {
-            log: logProps,
-        });
-
-        return () => {};
-    }, [field]);
-
-    return content;
-};
-
-let D = HOC(<div />);
-
-class UpdateDemo extends React.Component {
-    constructor() {
-        super();
-        this.state = {
-            text: 'semi',
-        };
-        this.change = this.change.bind(this);
-        this.triggerChildLog = this.triggerChildLog.bind(this);
-        this.fields = {};
-    }
-
-    change() {
-        this.setState({ text: Math.random() });
-    }
-
-    register(field, fieldApi) {
-        this.fields.name = {
-            func: fieldApi,
-        };
-    }
-
-    triggerChildLog() {
-        this.fields.name.func.log();
-    }
-
-    render() {
-        const { text } = this.state;
-        const api = {
-            register: this.register.bind(this),
-        };
-        return (
-            <div>
-                <ApiContext.Provider value={api}>
-                    <div>
-                        <D text={text} field="name" />
-                    </div>
-                    <Button onClick={this.change}>父级动态改变子级props</Button>
-                    <Button onClick={this.triggerChildLog}>由父级触发子级的log函数</Button>
-                </ApiContext.Provider>
-            </div>
-        );
-    }
-}
-
-const RuleupdateDemo = () => {
-    const [val, setVal] = useState(['fefe']);
-    const change = () => {
-        let arr = [];
-        arr[0] = Math.random();
-        setVal(arr);
-        return false;
-    };
-    return (
-        <Form layout="horizontal">
-            {({ formState, values, formApi }) => (
-                <>
-                    <Form.Input field="UserName" label="用户名" test={val} rules={ values.required ? [{ required: values.required }]: [] } />
-                    {/* <Form.Input field="UserName" label="用户名" test={val} rules={ [{ required: values.required }] } /> */}
-                    <Form.Switch field="required" />
-                    <Button onClick={change}>change</Button>
-                    <Button htmlType="submit">submit</Button>
-                    <code style={{ marginTop: 30 }}>{JSON.stringify(formState)}</code>
-                </>
-            )}
-        </Form>
-    );
-};
-
-export { UpdateDemo, RuleupdateDemo };

package/form/_story/FormApi/arrayDemo.jsx

@@ -1,94 +0,0 @@
-/* eslint-disable */
-import React, { useState, useLayoutEffect, Component } from 'react';
-import { storiesOf } from '@storybook/react';
-import { Button, Modal, TreeSelect, Row, Col, Avatar, Select as BasicSelect,
-    Form,
-    useFormState,
-    useFormApi,
-    useFieldApi,
-    useFieldState,
-    withFormState,
-    withFormApi,
-    withField,
-    ArrayField,
-    AutoComplete,
-    Collapse,
-    Icon } from '../../../index';
-
-import { ComponentUsingFormState } from '../Hook/hookDemo';
-const { Input, Select, DatePicker, Switch, Slider, CheckboxGroup, Checkbox, RadioGroup, Radio, TimePicker, InputNumber, InputGroup } = Form;
-
-class ArrayDemo extends React.Component {
-    constructor() {
-        super();
-        this.state = {
-            initValues: {
-                effects: [
-                    { name: '1-name', type: '1-type', key: 0 },
-                    { name: '2-name', type: '2-type', key: 1 },
-                    { name: '3-name', type: '3-type', key: 2 },
-                ]
-            }
-        };
-        this.id = 3;
-        this.getFormApi = this.getFormApi.bind(this);
-        this.add = this.add.bind(this);
-        this.remove = this.remove.bind(this);
-        this.renderItems = this.renderItems.bind(this);
-    }
-    getFormApi(formApi) {
-        this.formApi = formApi;
-    }
-    add(obj) {
-        let effects = this.formApi.getValue('effects');
-        if (!effects) {
-            effects = [];
-        }
-        effects.push({ name: '', type: '', key: this.id++ });
-        this.formApi.setValue('effects', effects);
-    }
-    remove(key) {
-        let effects = this.formApi.getValue('effects');
-        effects = effects.filter((effect, index) => key !== effect.key);
-        if (!effects.length) {
-            effects = undefined;
-        }
-        this.formApi.setValue('effects', effects);
-    }
-    renderItems(formState, values) {
-        return values.effects && values.effects.map((effect, i) => (
-            <div key={effect.key} style={{ width: 1000, display: 'flex' }}>
-                <Form.Input field={`effects[${i}].name`} style={{ width: 200, marginRight: 16 }} />
-                <Form.Input field={`effects[${i}].type`} style={{ width: 90 }} />
-                <Button type="danger" onClick={() => this.remove(effect.key)} style={{ margin: 16 }}>Remove</Button>
-            </div>
-        ));
-    }
-    render() {
-        let { initValues } = this.state;
-        return (
-            <Form
-                getFormApi={this.getFormApi}
-                initValues={initValues}
-                style={{ width: 500 }}
-                labelPosition="left"
-                labelWidth="180px"
-            >
-                {({ formState, values }) => (
-                    <>
-                        <Button onClick={this.add}>add</Button>
-                        {this.renderItems(formState, values)}
-                        <div>
-                            {JSON.stringify(formState)}
-                        </div>
-                    </>
-                )}
-            </Form>
-        );
-    }
-}
-
-
-
-
-export { ArrayDemo };

package/form/_story/FormApi/formApiDemo.jsx

@@ -1,83 +0,0 @@
-import React, { useState, useLayoutEffect, useRef } from 'react';
-import { storiesOf } from '@storybook/react';
-import {
-    Form,
-    useFormState,
-    useFormApi,
-    useFieldApi,
-    useFieldState,
-    withFormState,
-    withFormApi,
-    withField,
-    ArrayField,
-    AutoComplete,
-    Collapse,
-    Icon,
-    Button, Modal, TreeSelect, Row, Col, Avatar, Select as BasicSelect
-} from '../../../index';
-const { Input, Select, DatePicker, Switch, Slider, CheckboxGroup, Checkbox, RadioGroup, Radio, TimePicker, InputNumber, InputGroup } = Form;
-
-import { IconPlusCircle, IconMinusCircle } from '@douyinfe/semi-icons';
-
-const SetValueUsingParentPath = () => {
-    const { Option } = Form.Select;
-    const formApi = useRef();
-    let arr = [
-        { name: '脸部贴纸', type: '2D' },
-        { name: '前景贴纸', type: '3D' },
-    ];
-    const setVal = () => {
-        console.log(formApi);
-        // formApi.current.setValue('a', { b: '123', d: '456' });
-        // formApi.current.setValue('peoples', [1, 2]);
-        // formApi.current.setError('peoples', ['not valid', 'same']);
-        // formApi.current.setValue('effects', arr);
-        formApi.current.setError('effects', [
-            { type: 'type error', name: 'name error ' },
-            { type: 'type error 2', name: 'name error 2' },
-        ]);
-    };
-    const [menu, setMenu] = useState(arr);
-    return (
-        <Form layout="horizontal" onValueChange={values => console.log(values)} getFormApi={api => formApi.current = api}>
-            <Button onClick={setVal}>set</Button>
-            {/* <Form.Input field="c" style={{ width: 80 }} /> */}
-            {/* <Form.Input field="peoples[0]" style={{ width: 176 }} /> */}
-            {/* <Form.Input field="peoples[1]" style={{ width: 176 }} /> */}
-            {/* <Form.Input field="a.b" style={{ width: 176 }} /> */}
-            {/* <Form.Input field="a.d" style={{ width: 176 }} /> */}
-            <ArrayField field="effects" initValue={arr}>
-                {/* <ArrayField field="effects" initValue={[]}> */}
-                {({ add, arrayFields, addWithInitValue }) => (
-                    <React.Fragment>
-                        <Button onClick={add} icon="plus_circle" theme="light">新增空白行</Button>
-                        <Button
-                            icon={<IconPlusCircle></IconPlusCircle>} onClick={() => {
-                                addWithInitValue({ name: '自定义贴纸', type: '2D' });
-                            }} style={{ marginLeft: 8 }}>新增带有初始值的行
-                        </Button>
-                        {
-                            arrayFields.map(({ field, key, remove }, i) => (
-                                <div key={key} style={{ width: 1000, display: 'flex' }}>
-                                    <Form.Input
-                                        field={`${field}[name]`}
-                                        label={`特效类型：（${field}.name）`}
-                                        style={{ width: 200, marginRight: 16 }}
-                                    />
-                                    <Form.Input
-                                        field={`${field}[type]`}
-                                        label={`素材类型：（${field}.type）`}
-                                        style={{ width: 90 }}
-                                    />
-                                    <Button type="danger" theme="borderless" icon={<IconMinusCircle></IconMinusCircle>} onClick={remove} style={{ margin: 12 }} />
-                                </div>
-                            ))
-                        }
-                    </React.Fragment>
-                )}
-            </ArrayField>
-        </Form>
-    );
-};
-
-export { SetValueUsingParentPath };

package/form/_story/FormApi/resetDemo.jsx

@@ -1,41 +0,0 @@
-/* eslint-disable */
-import React, { useState, useLayoutEffect } from 'react';
-import { storiesOf } from '@storybook/react';
-import {
-    Form,
-    Button,
-    Modal,
-    TreeSelect,
-    Row,
-    Col,
-    Avatar,
-    Select as BasicSelect,
-    useFormState,
-    useFormApi,
-    useFieldApi,
-    useFieldState,
-    withFormState,
-    withFormApi,
-    withField,
-    ArrayField,
-    AutoComplete,
-    Collapse,
-    Icon
-} from '../../../index';
-import { ComponentUsingFormState } from './Hook/hookDemo';
-const {
-    Input,
-    Select,
-    DatePicker,
-    Switch,
-    Slider,
-    CheckboxGroup,
-    Checkbox,
-    RadioGroup,
-    Radio,
-    TimePicker,
-    InputNumber,
-    InputGroup,
-} = Form;
-
-//