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

package/form/_story/FormApi/setValuesDemo.jsx

@@ -1,133 +0,0 @@
-import React, { useState, useLayoutEffect } from 'react';
-import { storiesOf } from '@storybook/react';
-import { Button, Modal, TreeSelect, Row, Col, Avatar, TextArea } from '../../../index';
-import { Select as BasicSelect } from '../../../index';
-import {
-    Form,
-    useFormState,
-    useFormApi,
-    useFieldApi,
-    useFieldState,
-    withFormState,
-    withFormApi,
-    withField,
-    ArrayField,
-    AutoComplete,
-    Collapse,
-    Icon,
-} from '../../../index';
-import { ComponentUsingFormState, CustomStringify } from '../Hook/hookDemo';
-const { Input, Select, DatePicker, Switch, Slider, CheckboxGroup, Checkbox, RadioGroup, Radio, TimePicker, InputNumber, InputGroup } = Form;
-
-class SetValuesDemo extends React.Component {
-    constructor() {
-        super();
-        this.formApi = null;
-        this.state = {
-            flag: false,
-        };
-        this.getFormApi = this.getFormApi.bind(this);
-        this.change = this.change.bind(this);
-    }
-    change() {
-        let a = this.formApi.getFieldExist('ffff');
-        let b = this.formApi.getFieldExist('name');
-        this.formApi.setValues({ name: 'nike', notExist: '12' }, { isOverride: true });
-        this.setState({ flag: true });
-    }
-    getFormApi(formApi) {
-        this.formApi = formApi;
-    }
-    render() {
-        const { flag } = this.state;
-        return (
-            <Form getFormApi={this.getFormApi} onChange={v => console.log(v)} onSubmit={v => console.log(v)}>
-                {({ formState }) => (
-                    <>
-                        <Input field="name" initValue=""></Input>
-                        <Select field="familyName" multiple style={{ width: 200 }}>
-                            <Select.Option value="mike">Mike</Select.Option>
-                            <Select.Option value="jane">Jane</Select.Option>
-                            <Select.Option value="kate">Kate</Select.Option>
-                        </Select>
-                        {/* { flag ? <Input field='notExist' /> : null} */}
-                        <Checkbox value="false" field="agree" noLabel={true}>
-                            我已阅读并清楚相关规定（Checkbox）
-                        </Checkbox>
-                        <Button onClick={this.change}>change</Button>
-                        <Button htmlType="submit">Submit</Button>
-                        <code>{CustomStringify(formState)}</code>
-                    </>
-                )}
-            </Form>
-        );
-    }
-}
-
-
-
-class SetValuesWithArrayField extends React.Component {
-    constructor() {
-        super();
-        this.formApi = null;
-        this.state = {
-            flag: false,
-        };
-        this.getFormApi = this.getFormApi.bind(this);
-        this.change = this.change.bind(this);
-    }
-
-    change() {
-        let length = Math.floor(Math.random() * 100);
-        let newEffect = Array.from({ length }, (v, i) => {
-            return { name: Math.random(), type: Math.random() }
-        })
-        this.formApi.setValues({ name: 'nike', notExist: '12', effects: newEffect }, { isOverride: true });
-    }
-
-    getFormApi(formApi) {
-        this.formApi = formApi;
-    }
-
-    render() {
-        const { flag } = this.state;
-        return (
-            <Form getFormApi={this.getFormApi} onValueChange={v => console.log(v)} onSubmit={v => console.log(v)}>
-                {({ formState }) => (
-                    <>
-                        <ArrayField field='effects' initValue={[]}>
-                            {({ add, arrayFields }) => (
-                                <React.Fragment>
-                                    <Button onClick={add}>Add</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>
-                                                <Form.Input
-                                                    field={`${field}[type]`}
-                                                    label={`类型：（${field}.type）`}
-                                                    style={{width: 90}}
-                                                >
-                                                </Form.Input>
-                                                <Button type='danger' onClick={remove} style={{ margin: 16 }}>remove</Button>
-                                            </div>
-                                        ))
-                                    }
-                                </React.Fragment>
-                            )}
-                        </ArrayField>
-                        <Button onClick={this.change}>change</Button>
-                        <Button htmlType="submit">Submit</Button>
-                        <TextArea value={CustomStringify(formState)}></TextArea>
-                    </>
-                )}
-            </Form>
-        );
-    }
-}
-export { SetValuesDemo, SetValuesWithArrayField }

package/form/_story/FormSubmit/index.tsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import { Form, Tooltip, Button } from '@douyinfe/semi-ui';
-import { IconHelpCircle } from '@douyinfe/semi-icons';
-
-/**
- * @description input, button may trigger submit of form
- * 
- * case 1: 当 form 中只有一个 input，在 input 上敲击 enter 会触发 form submit
- * case 2: 当 form 中有 2 个 input，在任意一个 input 上敲击 enter 都不会触发 form submit
- * case 3: 当 from 中有一个 input 和一个 button，在 input 上敲击 enter 会触发 form submit
- * 
- * @summary 如果不想触发 form submit，监听 input key down，如果 `e.key` 等于 `Enter` 则调用 e.preventDefault
- * 
- * @see https://github.com/DouyinFE/semi-design/issues/767#issuecomment-1098836675
- */
-const App = () => {
-    const { Option } = Form.Select;
-
-    return (
-        <Form onSubmit={() => { console.log('submit');} }>
-            <Form.Select field="Role" label='角色' style={{ width:176 }}>
-                <Option value="admin">管理员</Option>
-                <Option value="user">普通用户</Option>
-                <Option value="guest">访客</Option>
-            </Form.Select>
-            <Form.Input field='UserName' label='用户名' style={{ width:80 }} onKeyDown={e => {
-                if (e.key === 'Enter') {
-                    e.preventDefault();
-                }
-            }} />
-            <Form.Input
-                field='Password'
-                label={{ 
-                    text: '密码',
-                    extra: <Tooltip content='详情'><IconHelpCircle style={{ color: '--semi-color-text-1' }}/></Tooltip> 
-                }}
-                style={{ width:176 }}
-            />
-            <Button>提交</Button>
-        </Form>
-    );
-};
-App.storyName = 'form submit';
-
-export default App;

package/form/_story/HOC/displayName.jsx

@@ -1,19 +0,0 @@
-/* eslint-disable no-unused-vars */
-import React, { useState, useLayoutEffect, Component } from 'react';
-import { storiesOf } from '@storybook/react';
-
-const FunctionHOC = Component => {
-    const funName = props => <Component name="abc" attr={props.attr} />;
-    funName.displayName = 'HOC rename';
-    return funName;
-};
-
-const MyComponent = props => (
-    <div className="fesf">
-        {props.name} + {props.attr}
-    </div>
-);
-
-const WithDisplayName = FunctionHOC(MyComponent);
-
-export { WithDisplayName };

package/form/_story/HOC/withFieldDemo.jsx

@@ -1,216 +0,0 @@
-/* eslint-disable no-unused-vars, no-debugger */
-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
-} from '../../../index';
-
-import { BASE_CLASS_PREFIX } from '@douyinfe/semi-foundation/base/constants';
-
-import { ComponentUsingFormState, CustomStringify } from '../Hook/hookDemo';
-
-const {
-    Input,
-    Select,
-    DatePicker,
-    Switch,
-    Slider,
-    CheckboxGroup,
-    Checkbox,
-    RadioGroup,
-    Radio,
-    TimePicker,
-    InputNumber,
-    InputGroup,
-} = Form;
-
-// 这里将html原生的input封装
-const htmlInput = props => {
-    let { validateStatus, ...rest } = props;
-    let value = props.value || '';
-    return <input {...rest} value={value} />;
-};
-const CustomInput = withField(htmlInput, {
-    valueKey: 'value',
-    onKeyChangeFnName: 'onChange',
-    valuePath: 'target.value',
-});
-
-class CustomFieldDemo extends React.PureComponent {
-    render() {
-        // 观察formState，看input的数据流是否已被form接管
-        const ComponentUsingFormState = () => {
-            const formState = useFormState();
-            return (
-                <pre>
-                    <code>{CustomStringify(formState)}</code>
-                </pre>
-            );
-        };
-        return (
-            <Form>
-                <CustomInput field="name" />
-                <div>test</div>
-                <ComponentUsingFormState />
-            </Form>
-        );
-    }
-}
-
-const StateFulSelect = ({ value, onChange, onBlur, validateStatus }) => {
-    const [song, setSong] = useState([]);
-
-    const onSearch = inputValue => {
-        if (inputValue === '') {
-            setSong([]);
-        } else {
-            let songs = ['@XiamiMusic', '@TmeMusic', '@NeteaseMusic'].map(company => ({
-                value: String(inputValue) + company,
-                label: String(inputValue) + company,
-            }));
-            setSong(songs);
-        }
-    };
-    return (
-        <div>
-            <BasicSelect
-                value={value}
-                style={{ width: 300 }}
-                onChange={onChange}
-                onSearch={onSearch}
-                optionList={song}
-                filter
-                placeholder="type someting to search"
-            />
-        </div>
-    );
-};
-
-class StatefulSelectClass extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            songs: [],
-        };
-    }
-
-    onSearch = inputValue => {
-        if (inputValue === '') {
-            this.setState({ songs: [] });
-        } else {
-            let songs = ['@XiamiMusic', '@TmeMusic', '@NeteaseMusic'].map(company => ({
-                value: String(inputValue) + company,
-                label: String(inputValue) + company,
-            }));
-            this.setState({ song: songs });
-        }
-    };
-
-    render() {
-        let { value, onChange } = this.props;
-        let { song } = this.state;
-        return (
-            <BasicSelect
-                value={value}
-                style={{ width: 300 }}
-                onChange={onChange}
-                onSearch={this.onSearch}
-                optionList={song}
-                filter
-                multiple
-                placeholder="type someting to search"
-            />
-        );
-    }
-}
-
-let SelectField = withField(StateFulSelect);
-let CSelectField = withField(StatefulSelectClass);
-
-class WithFieldDemo extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            visible: true,
-        };
-        this.formApi = null;
-        this.validate = this.validate.bind(this);
-        this.saveFormApi = this.saveFormApi.bind(this);
-    }
-    saveFormApi(formApi) {
-        this.formApi = formApi;
-    }
-
-    validate() {
-        this.formApi.validate().then(() => {
-            debugger;
-        });
-    }
-
-    render() {
-        return (
-            <Form getFormApi={this.saveFormApi}>
-                <SelectField field="name" />
-                <CSelectField field="name2" />
-                <ComponentUsingFormState />
-                <Button onClick={() => this.validate()}>validate</Button>
-            </Form>
-        );
-    }
-}
-
-class PureTest extends React.PureComponent {
-    render() {
-        console.log('render: test');
-        return <div>test</div>;
-    }
-}
-const PureTextWithField = withField(PureTest);
-
-let NumberRange = props => {
-    const { onChange = () => {} } = props || {};
-
-    let value = props && props.value ? props.value : [null, null];
-    let label = props && props.labelText ? props.labelText : null;
-    let style = props && props.style ? props.style : null;
-    console.log(props);
-    const rangeChange = v => {
-        onChange(v);
-    };
-    const oc1 = v => {
-        rangeChange([v, value[1]]);
-    };
-    const oc2 = v => {
-        rangeChange([value[0], v]);
-    };
-
-
-    return (
-        <div className="number-range" style={{ width: 280 }}>
-            {label ? <span className={`${BASE_CLASS_PREFIX}-select-inline-label`}>{label}</span> : null}
-            <InputNumber style={{ width: 90 }} value={value[0]} onChange={oc1} min={0} />
-            <span style={{ margin: '0 5px' }}>~</span>
-            <InputNumber style={{ width: 90 }} value={value[1]} onChange={oc2} min={0} />
-        </div>
-    );
-};
-
-NumberRange = withField(NumberRange);
-
-export { CustomFieldDemo, WithFieldDemo, NumberRange };

package/form/_story/Hook/hookDemo.jsx

@@ -1,195 +0,0 @@
-import React, { useState, useLayoutEffect, Component } from 'react';
-import { storiesOf } from '@storybook/react';
-import { Button, Modal, TreeSelect, Row, Col, Avatar } from '../../../index';
-import { Select as BasicSelect } from '../../../index';
-import {
-    Form,
-    useFormState,
-    useFormApi,
-    useFieldApi,
-    useFieldState,
-    withFormState,
-    withFormApi,
-    withField,
-    ArrayField,
-    AutoComplete,
-    Collapse,
-    Icon,
-} from '../../../index';
-const { Input, Select, DatePicker, Switch, Slider, CheckboxGroup, Checkbox, RadioGroup, Radio, TimePicker, InputNumber, InputGroup } = Form;
-
-const UseFormApiDemo = () => {
-    return (
-        <Form>
-            <Form.Input field="name" initValue="mike"></Form.Input>
-            <ArrayField field="arrays" initValue={[]}>
-                {({ add, arrayFields }) => (
-                    <React.Fragment>
-                        <Button onClick={add}>Add</Button>
-                        {arrayFields.map(({ field, key, remove }, i) => (
-                            <div key={key} style={{ width: 1000, display: 'flex' }}>
-                                <Form.Input
-                                    field={`${field}[name]`}
-                                    label={`name：（${field}.name）`}
-                                    style={{ width: 200, marginRight: 16 }}
-                                ></Form.Input>
-                                <Form.Input
-                                    field={`${field}[type]`}
-                                    label={`type：（${field}.type`}
-                                    style={{ width: 200, marginRight: 16 }}
-                                ></Form.Input>
-                                {/* <Form.Select
-                                            field={`${field}[type]`}
-                                            label={`素材类型：（${field}.type）`}
-                                            style={{width: 90}}
-                                        >
-                                            <Form.Select.Option value='2D'>2D</Form.Select.Option>
-                                            <Form.Select.Option value='3D'>3D</Form.Select.Option>
-                                        </Form.Select> */}
-                                <Button type="danger" onClick={remove} style={{ margin: 16 }}>
-                                    remove
-                                </Button>
-                            </div>
-                        ))}
-                    </React.Fragment>
-                )}
-            </ArrayField>
-            <ComponentUsingFormApi />
-            <ComponentUsingFormState />
-        </Form>
-    );
-};
-
-const CustomStringify = values => {
-    return JSON.stringify(values, (k, v) => (v === undefined ? '__undefined' : v)).replace(
-        '"__undefined"',
-        'undefined'
-    );
-};
-
-
-const ComponentUsingFormApi = () => {
-    const formApi = useFormApi();
-    const [count, setCount] = useState(0);
-    const change = () => {
-        let value0 = {
-            name: 'mikeyyaya',
-            cc: 'adele',
-            arrays: [
-                { name: 1, type: '1' },
-                { name: 2, type: '2' },
-            ],
-        };
-        formApi.setValues(value0, { isOverride: true });
-    };
-    const change2 = () => {
-        let value2 = {
-            // name: '2',
-            // cc: 'mike',
-            arrays: [],
-        };
-        formApi.setValues(value2, { isOverride: true });
-    };
-
-    return (
-        <>
-            <Button onClick={change}>ChangeName By【formApi】</Button>
-            <Button onClick={change2}>Change 2</Button>
-        </>
-    );
-};
-
-
-/** */
-const ComponentUsingFormState = () => {
-    const formState = useFormState();
-    return (
-        <pre>
-            <code style={{wordBreak:'break-all', width: 600, whiteSpace: 'normal'}}>{JSON.stringify(formState)}</code>
-            {/* <code style={{wordBreak:'break-all', width: 600, whiteSpace: 'normal'}}>{CustomStringify(formState)}</code> */}
-        </pre>
-    );
-};
-
-const UseFormStateDemo = () => {
-    return (
-        <Form>
-            <Input field="name" initValue="nike" />
-            <h5>FormState read by 【useFormState】：</h5>
-            <ComponentUsingFormState />
-        </Form>
-    );
-};
-
-const ComponentUsingFieldApi = () => {
-    const nameFieldApi = useFieldApi('name');
-    const change = () => {
-        nameFieldApi.setValue(Math.random());
-    };
-    return <Button onClick={change}>changeNameBy【fieldApi】</Button>;
-};
-const UseFieldApiDemo = () => {
-    return (
-        <Form>
-            <Form.Input field="name"></Form.Input>
-            <ComponentUsingFieldApi />
-        </Form>
-    );
-};
-
-const ComponentUsingFieldState = props => {
-    const fieldState = useFieldState(props.field);
-    return (
-        <pre>
-            <code>{CustomStringify(fieldState)}</code>
-        </pre>
-    );
-};
-const UseFieldStateDemo = () => {
-    return (
-        <Form>
-            <Form.Input field="name" initValue="mike"></Form.Input>
-            <h5> 【name】FieldState read by 【useFieldState】：</h5>
-            <ComponentUsingFieldState field="name" />
-            <Form.Input field="country" initValue="china"></Form.Input>
-            <h5> 【country】FieldState read by 【useFieldState】：</h5>
-            <ComponentUsingFieldState field="country" />
-        </Form>
-    );
-};
-
-
-const WithFormStateDemo = () => {
-    const SomeComponent = props => <code>{CustomStringify(props.formState)}</code>;
-    const ComponentWithFormState = withFormState(SomeComponent);
-    return (
-        <Form>
-            <Form.Input field="name" initValue="steve"></Form.Input>
-            <Form.Input field="familyName" initValue="jobs"></Form.Input>
-            <Button htmlType="submit">submit</Button>
-            <ComponentWithFormState />
-        </Form>
-    );
-};
-
-const WithFormApiDemo = () => {
-    const SomeComponet = props => (
-        <Button
-            onClick={() => {
-                props.formApi.setValue('name', Math.random());
-            }}
-        >
-            ChangeName By【formApi】
-        </Button>
-    );
-    const ComponentWithFormApi = withFormApi(SomeComponet);
-    return (
-        <Form>
-            <Input field="name" initValue="mike"></Input>
-            <Button htmlType="submit">submit</Button>
-            <ComponentWithFormApi />
-        </Form>
-    );
-};
-
-export { UseFormApiDemo, UseFormStateDemo, UseFieldApiDemo,  UseFieldStateDemo, WithFormStateDemo, WithFormApiDemo, ComponentUsingFormState, CustomStringify }