@douyinfe/semi-ui 2.1.3 → 2.1.4-alpha.0

package/form/_story/Performance/performanceDemo.jsx

@@ -0,0 +1,440 @@
+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

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

@@ -0,0 +1,110 @@
+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 };