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

package/form/_story/Performance/performanceDemo.jsx

@@ -1,440 +0,0 @@
-import React, { useState, useLayoutEffect, Component } from 'react';
-import { storiesOf } from '@storybook/react';
-import { Button, Modal, TreeSelect, Row, Col, Avatar, Toast, Select as BasicSelect,
-    Form,
-    useFormState,
-    useFormApi,
-    useFieldApi,
-    useFieldState,
-    withFormState,
-    withFormApi,
-    withField,
-    ArrayField,
-    AutoComplete,
-    Collapse,
-    Icon } from '../../../index';
-
-
-import { cloneDeepWith, cloneDeep } from 'lodash';
-
-
-import { ComponentUsingFormState } from '../Hook/hookDemo';
-const { Input, Select, DatePicker, Switch, Slider, CheckboxGroup, Checkbox, RadioGroup, Radio, TimePicker, InputNumber, InputGroup } = Form;
-
-const Option = Select.Option;
-
-class ManyFieldDemo extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            fields: Array.from({ length: 100 }, (v, i) => i + 1),
-        };
-        this.formApi = null;
-        this.getFormApi = this.getFormApi.bind(this);
-        this.validate = this.validate.bind(this);
-        this.scroll = this.scroll.bind(this);
-    }
-
-    getFormApi(formApi) {
-        this.formApi = formApi;
-    }
-
-    validate() {
-        let begin = new Date().valueOf();
-        let end, time;
-        this.formApi
-            .validate()
-            .then(values => {
-                end = new Date().valueOf();
-                time = (end - begin) / 1000;
-                console.log(`validate用时:${ time }s`);
-                // debugger
-            })
-            .catch(err => {
-                end = new Date().valueOf();
-                time = (end - begin) / 1000;
-                console.log(`validate用时:${ time }s`);
-                // debugger
-            });
-    }
-
-    scroll() {
-        let targetIndex = Math.floor(Math.random() * 100);
-        Toast.info(`${targetIndex }`);
-        this.formApi.scrollToField(`No${targetIndex}`);
-    }
-
-    renderFields() {
-        const { fields } = this.state;
-
-        return fields.map(item => (
-            <Form.Input
-                key={`No${item}`}
-                field={`No${item}`}
-                rules={[
-                    { required: true, message: 'required error' },
-                    {
-                        pattern: /^[a-zA-Z0-9_]+$/,
-                        message: '限制输入字符为：a-z, A-Z, 0-9, _',
-                    },
-                ]}
-            />
-        ));
-    }
-    render() {
-        let fields = this.renderFields();
-        return (
-            <Form getFormApi={this.getFormApi}>
-                <ComponentUsingFormState />
-                <div style={{ height: 500, overflow: 'scroll' }}>{fields}</div>
-                <Button onClick={this.validate}>validate</Button>
-                <Button onClick={this.scroll}>scroll</Button>
-                <Button htmlType="reset">reset</Button>
-                <Button htmlType="submit">submit</Button>
-            </Form>
-        );
-    }
-}
-
-let initEmploy = [
-    {
-        id: 2229,
-        name: '马一',
-        username: 'mayi',
-        departmentId: '2879712',
-        departmentName: 'Data云',
-        employeeNumber: 18396181,
-    },
-    {
-        id: 280,
-        name: '马会',
-        username: 'mahu',
-        departmentId: '64976063',
-        departmentName: '公司架',
-        employeeNumber: 712323,
-    },
-    {
-        id: 324,
-        name: '马3克',
-        username: 'ma2ke',
-        departmentId: '288980096081',
-        departmentName: '头条-量',
-        employeeNumber: 5735271,
-    },
-    {
-        id: 3632,
-        name: '海波',
-        username: 'menibo',
-        departmentId: '2889875',
-        departmentName: '会作组',
-        employeeNumber: 37380,
-    },
-    {
-        id: 4905,
-        name: '马列',
-        username: 'memin',
-        departmentId: '2889801404',
-        departmentName: '头学习',
-        employeeNumber: 6079433,
-    },
-    {
-        id: 7353,
-        name: '马3立',
-        username: 'ma3nli',
-        departmentId: '2881335',
-        departmentName: 'Data研发',
-        employeeNumber: 103343,
-    },
-    {
-        id: 467,
-        name: '孟',
-        username: 'myu',
-        departmentId: '28837',
-        departmentName: '垂直',
-        employeeNumber: 13,
-    },
-    {
-        id: 2129,
-        name: '马一3',
-        username: 'myi',
-        departmentId: '28712',
-        departmentName: 'Data云',
-        employeeNumber: 196181,
-    },
-    {
-        id: 2830,
-        name: '马会4',
-        username: 'mahu',
-        departmentId: '649476063',
-        departmentName: '公司架',
-        employeeNumber: 7132323,
-    },
-    {
-        id: 3244,
-        name: '马32克',
-        username: 'ma24ke',
-        departmentId: '2889820096081',
-        departmentName: '头条-量',
-        employeeNumber: 57345271,
-    },
-    {
-        id: 36372,
-        name: '海波',
-        username: 'men9ibo',
-        departmentId: '28689875',
-        departmentName: '会作组',
-        employeeNumber: 377380,
-    },
-    {
-        id: 49405,
-        name: '马列',
-        username: 'memin',
-        departmentId: '28896801404',
-        departmentName: '头学习',
-        employeeNumber: 60679433,
-    },
-    {
-        id: 73553,
-        name: '马3立',
-        username: 'ma3nli',
-        departmentId: '28816335',
-        departmentName: 'Data研发',
-        employeeNumber: 1073343,
-    },
-    {
-        id: 4657,
-        name: '孟',
-        username: 'myu',
-        departmentId: '288437',
-        departmentName: '垂直',
-        employeeNumber: 134,
-    },
-];
-class EffectDemo extends React.Component {
-    constructor() {
-        super();
-        this.state = {
-            employees: [],
-        };
-    }
-
-    onSearchEmployee = () => {
-        this.setState({ employees: initEmploy });
-    };
-
-    renderMultipleSelectedItem = optionNode => {
-        let content = <div>{optionNode.name}</div>;
-        return {
-            isRenderInTag: true,
-            content,
-        };
-    };
-
-    renderEmployeeOption = item => {
-        const optionStyle = {
-            display: 'flex',
-            width: 334,
-        };
-        return (
-            <Option key={item.id} value={item.id} style={optionStyle} showTick={false} {...item}>
-                <Avatar src={item.avatarUrl} color={item.color} size="small">
-                    {item.abbr}
-                </Avatar>
-                <p className="option-employee-name">{item.name}</p>
-                <p className="option-department-name">{item.departmentName}</p>
-            </Option>
-        );
-    };
-
-    render() {
-        const { employees } = this.state;
-        return (
-            <Form>
-                <Select
-                    field="owner"
-                    filter
-                    remote
-                    onSearch={this.onSearchEmployee}
-                    label="项目负责人"
-                    placeholder="请搜索并选择项目负责人"
-                    onChangeWithObject={true}
-                    style={{ width: 340 }}
-                    rules={[{ required: true, message: '字段不能为空' }]}
-                    renderSelectedItem={optionNode => (
-                        <>
-                            <span className="option-employee-name">{optionNode.name}</span>
-                            <span className="option-department-name">{optionNode.departmentName}</span>
-                        </>
-                    )}
-                >
-                    {employees.map(item => this.renderEmployeeOption(item))}
-                </Select>
-
-                <Select
-                    field="informedOwner"
-                    filter
-                    multiple
-                    remote
-                    max={5}
-                    style={{ width: 340 }}
-                    onSearch={this.onSearchEmployee}
-                    label={(
-                        <span>
-                            项目知会人<span className="optional-label">(选填)</span>
-                        </span>
-                    )}
-                    placeholder="知会人可了解项目信息和进度 (最多五人)"
-                    // onChangeWithObject={true}
-                    renderSelectedItem={this.renderMultipleSelectedItem}
-                >
-                    {employees.map(item => this.renderEmployeeOption(item))}
-                </Select>
-                <Select
-                    field="relatedOwner"
-                    filter
-                    remote
-                    multiple
-                    max={3}
-                    style={{ width: 340 }}
-                    onSearch={this.onSearchEmployee}
-                    // onChangeWithObject={true}
-                    label={(
-                        <span>
-                            相关负责人<span className="optional-label">(选填)</span>
-                        </span>
-                    )}
-                    placeholder="相关负责人与负责人拥有同等权限 (最多三人)"
-                    renderSelectedItem={this.renderMultipleSelectedItem}
-                >
-                    {employees.map(item => this.renderEmployeeOption(item))}
-                </Select>
-            </Form>
-        );
-    }
-}
-
-
-
-
-// Form.Select 开启onChangeWithObject时，外部在modal打开关闭时调用formApi.setValues
-
-class ModalFormSelectWithObject extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            visible: false,
-        };
-        this.showDialog = this.showDialog.bind(this);
-        this.handleOk = this.handleOk.bind(this);
-        this.handleCancel = this.handleCancel.bind(this);
-        this.getFormApi = this.getFormApi.bind(this);
-    }
-
-    showDialog() {
-        // let values = this.formApi.getValues();
-        this.formApi && this.formApi.getValues();
-        this.setState({ visible: true });
-    }
-
-    handleOk() {
-        // this.formApi.validate()
-        //     .then((values) => {
-        //         console.log(values)
-        //     })
-        //     .catch((errors) => {
-        //         console.log(errors)
-        //     });
-    }
-
-    handleCancel() {
-        let start = new Date().valueOf();
-        let values = this.formApi.getValues();
-        let end = new Date().valueOf();
-        console.log(values);
-        values.region = '123';
-        let newvalues = this.formApi.getValues();
-        console.log(newvalues);
-        console.log(end - start);
-        this.setState({ visible: false });
-    }
-
-    getFormApi(formApi) {
-        this.formApi = formApi;
-    }
-
-    renderOption() {
-        const list = [
-            { value: 'semi', label: 'Semi', c: { arr: [2] } },
-            { value: 'hotsoon', label: '火山小视频', c: { arr: [3] } },
-            { value: 'pipixia', label: '皮皮虾', c: { arr: [4] } },
-            { value: 'toutiao', label: '今日头条', c: { arr: [5] } },
-        ];
-        return list.map(item => (
-            <Select.Option value={item.value} key={item.label} c={item.c}>
-                <div>
-                    {item.label}
-                    <div>random string</div>
-                    <div>{Math.random()}</div>
-                </div>
-            </Select.Option>
-        ));
-    }
-
-    render() {
-        const { visible } = this.state;
-        let message = '该项为必填项';
-        return (
-            <>
-                <Button onClick={this.showDialog}>打开弹窗</Button>
-                <Modal
-                    title="新建"
-                    visible={visible}
-                    onOk={this.handleOk}
-                    onCancel={this.handleCancel}
-                >
-                    <Form
-                        getFormApi={this.getFormApi}
-                    >
-                        <Row>
-                            <Col span={6}>
-                                <Form.Select
-                                    field="region"
-                                    onChange={object => this.change(object)}
-                                    label="国家/地区"
-                                    placeholder="请选择"
-                                    onChangeWithObject
-                                    style={{ width: 100 }}
-                                    rules={[
-                                        { required: true, message },
-                                    ]}
-                                >
-                                    {this.renderOption()}
-                                </Form.Select>
-                            </Col>
-                            <Col span={6}>
-                                <Form.Select
-                                    field="area"
-                                    label="投放区域"
-                                    placeholder="请选择"
-                                    onChangeWithObject
-                                    style={{ width: 100 }}
-                                    rules={[
-                                        { required: true, message },
-                                    ]}
-                                >
-                                    <Select.Option value="China">中国</Select.Option>
-                                    <Select.Option value="US">美国</Select.Option>
-                                    <Select.Option value="Europe">欧洲</Select.Option>
-                                    <Select.Option value="Japan">日本</Select.Option>
-                                </Form.Select>
-                            </Col>
-
-                        </Row>
-                    </Form>
-                </Modal>
-            </>
-        );
-    }
-}
-
-export { ManyFieldDemo, EffectDemo, ModalFormSelectWithObject };

package/form/_story/Performance/selectUseReactNode.jsx

@@ -1,110 +0,0 @@
-
-// select use reactNode as option label & onChangeWithObject is true
-import React from 'react';
-import { Form, Button } from '@douyinfe/semi-ui';
-
-class TestDemo extends React.Component {
-    constructor() {
-        super();
-        this.renderMaterialChoice = this.renderMaterialChoice.bind(this);
-        this.renderDynamicChoice = this.renderDynamicChoice.bind(this);
-    }
-
-    renderMaterialChoice = val => {
-        let options = [];
-        switch (val) {
-            case '美妆':
-                options = ['面具', '眉毛', '美瞳', '眼妆', '唇部效果'];
-                break;
-            case '人脸变形' || '滤镜' || '染发':
-                options = ['功能'];
-                break;
-            default:
-                options = ['2D素材'];
-                break;
-        }
-        return options.map(item => (
-            <Form.Select.Option value={item} key={item}>
-                {item}
-            </Form.Select.Option>
-        ));
-    };
-
-    renderDynamicChoice = val => {
-        let options = [];
-
-        if (val === '2D素材' || val === '面具' || val === '唇部效果') {
-            options = ['静态', '动态'];
-        } else {
-            options = ['静态'];
-        }
-        return options.map(item => (
-            <Form.Select.Option value={item} key={item}>
-                {item}
-            </Form.Select.Option>
-        ));
-    };
-
-    render() {
-        return (
-            <Form onChange={v => console.log(v)} onSubmit={v => console.log(v)}>
-                {({ formState }) => (
-                    <>
-                        <Form.Select
-                            labelPosition="left"
-                            labelWidth={100}
-                            labelAlign="right"
-                            field="type"
-                            label="特效类型"
-                            placeholder="请选择特效类型"
-                            rules={[
-                                {
-                                    required: true,
-                                    message: '内容不能为空',
-                                },
-                            ]}
-                        >
-                            <Form.Select.Option value="脸部贴纸">脸部贴纸</Form.Select.Option>
-                            <Form.Select.Option value="前景贴纸">前景贴纸</Form.Select.Option>
-                            <Form.Select.Option value="人手贴纸">人手贴纸</Form.Select.Option>
-                            <Form.Select.Option value="人脸变形">人脸变形</Form.Select.Option>
-                            <Form.Select.Option value="美妆">美妆</Form.Select.Option>
-                            <Form.Select.Option value="滤镜">滤镜</Form.Select.Option>
-                            <Form.Select.Option value="染发">染发</Form.Select.Option>
-                            <Form.Select.Option value="猫脸贴纸">猫脸贴纸</Form.Select.Option>
-                        </Form.Select>
-                        <Form.Select
-                            field="material"
-                            label="素材类型"
-                            placeholder="请选择素材类型"
-                            rules={[
-                                {
-                                    required: true,
-                                    message: '内容不能为空',
-                                },
-                            ]}
-                        >
-                            {this.renderMaterialChoice(formState.values.type)}
-                        </Form.Select>
-
-                        <Form.Select
-                            field="dynamic"
-                            label="静态/动态"
-                            placeholder="请选择静/动态"
-                            rules={[
-                                {
-                                    required: true,
-                                    message: '内容不能为空',
-                                },
-                            ]}
-                        >
-                            {this.renderDynamicChoice(formState.values.material)}
-                        </Form.Select>
-                        <Button htmlType="submit">Submit</Button>
-                        {/* <ComponentUsingFormState />  */}
-                    </>
-                )}
-            </Form>
-        );
-    }
-}

package/form/_story/Reference/inform.test.js

@@ -1,110 +0,0 @@
-import React from 'react';
-// import {
-//     storiesOf
-// } from '@storybook/react';
-
-import { Form, Text } from 'informed';
-import { TextArea } from '@douyinfe/semi-ui';
-
-// import { Form, asField } from '../src/index';
-// import Input from '../../input/index';
-// import Select from '../../select/index';
-
-// const stories = storiesOf('informed', module);
-
-// // // stories.addDecorator(withKnobs);;
-
-// const validate = value => {
-//     return !value || value.length < 5
-//         ? 'Field must be at least five characters'
-//         : undefined;
-// };
-
-// const ErrorText = asField(({
-//         fieldState,
-//         fieldApi,
-//         ...props
-//     }) => {
-//     const {value} = fieldState;
-//     const {setValue, setTouched} = fieldApi;
-//     const {
-//         onChange,
-//         onBlur,
-//         initialValue,
-//         forwardedRef,
-//         ...rest
-//     } = props;
-//     return (
-//         <React.Fragment>
-//             <Input
-//                 {...rest}
-//                 ref={forwardedRef}
-//                 value={!value && value !== 0 ? '' : value}
-//                 onChange={(value, e) => {
-//                     setValue(e.target.value);
-//                     if (onChange) {
-//                         onChange(e);
-//                     }
-
-//                 }}
-//                 onBlur={e => {
-//                     setTouched();
-//                     if (onBlur) {
-//                         onBlur(e);
-//                     }
-//                 }}
-//                 />
-//             </React.Fragment>
-//     );
-// });
-
-// const FromScratch = () => (
-//     <div>
-//     <Form id='custom-form-2'>
-//       {({formApi, formState}) => (
-//         <React.Fragment>
-//           <label>
-//             First name:
-//             <ErrorText
-//                 field='name'
-//                 validate={validate}
-//                 validateOnChange
-//                 validateOnBlur
-//                 />
-//           </label>
-//           <button type='submit'>Submit</button>
-//         <code>{JSON.stringify(formState)}</code>
-//         </React.Fragment>
-//     )}
-//     </Form>
-//   </div>
-// );
-
-// stories.add('Form施工现场', () => (<FromScratch />));
-
-const submit = values => window.alert(`Form successfully submitted with ${JSON.stringify(values)}`);
-
-const validate = value => {
-    if (!value) {
-        return '不能为空';
-    }
-};
-
-class InformDemo extends React.Component {
-    render() {
-        return (
-            <Form onSubmit={submit}>
-                {({ formState, values }) => (
-                    <>
-                        <Text field="panels[11].name" validateOnBlur />
-                        <Text field="panels[11].type" validateOnBlur />
-                        <button type="submit">Submit</button>
-                        <TextArea value={JSON.stringify(formState)} />
-                    </>
-                )}
-            </Form>
-        );
-    }
-}
-
-export { InformDemo };