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

package/form/_story/DynamicField/arrayFieldDemo.jsx

@@ -0,0 +1,320 @@
+/* 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,
+    Space,
+    Icon } from '../../../index';
+
+
+import { ComponentUsingFormState } from '../Hook/hookDemo';
+const { Input, Select, DatePicker, Switch, Slider, CheckboxGroup, Checkbox, RadioGroup, Radio, TimePicker, InputNumber, InputGroup } = Form;
+
+class ArrayFieldCollapseDemo extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            actions: [],
+        };
+    }
+
+    renderItems(arrayFields, values) {
+        console.log(values);
+        return (
+            <Collapse keepDOM>
+                {JSON.stringify(values)}
+                {arrayFields.map(({ field, key, remove }, i) => (
+                    <Collapse.Panel header="触发条件" itemKey={i.toString()} key={key}>
+                        <Form.Input
+                            field={`${field}[name]`}
+                            label={`特效类型：（${field}.name）`}
+                            style={{ width: 200, marginRight: 16 }}
+                        />
+                        <Button type="danger" onClick={remove} style={{ margin: 16 }}>
+                            remove
+                        </Button>
+                    </Collapse.Panel>
+                ))}
+                {/* {arrayFields.length && values.actions[0].name ? '2' : '1'} */}
+            </Collapse>
+        );
+    }
+
+    render() {
+        let { actions } = this.state;
+
+        return (
+            <Form style={{ width: 500 }} labelPosition="left" labelWidth="220px" allowEmpty>
+                {({ values }) => (
+                    <ArrayField field="actions" initValue={actions}>
+                        {({ add, arrayFields }) => (
+                            <React.Fragment>
+                                <Button onClick={add}>Add</Button>
+                                {this.renderItems(arrayFields, values)}
+                            </React.Fragment>
+                        )}
+                    </ArrayField>
+                )}
+            </Form>
+        );
+    }
+}
+
+// 使用Form Props设置 ArrayField的initValues
+class ArrayFieldWithFormInitValues extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            data: {
+                c: 'c',
+                effects: [
+                    { name: 'form-level-init-sugar', time: 'form-level-init-3min', otherKey: 1 },
+                    { name: 'form-level-init-bacon', time: 'form-level-init-6min', otherKey: 2, key: 343 },
+                ],
+            },
+            flag: true
+        };
+        this.getFormApi = this.getFormApi.bind(this);
+        this.change = this.change.bind(this);
+    }
+
+    change = () => {
+        let number = this.formApi.getValue('number');
+        let newData = Array.from({ length: 2 }, (v, i) => ({
+            name: `${i}-name`,
+            time: `${i}-time`
+        }));
+        console.log(newData);
+        this.formApi.setValue('effects', newData);
+    }
+
+    getFormApi(formApi) {
+        this.formApi = formApi;
+    }
+
+    render() {
+        return (
+            <Form
+                onChange={(...v) => console.log('onchange:' + v)}
+                onValueChange={(...v) => console.log('onValueChange:' + v)}
+                getFormApi={this.getFormApi}
+                initValues={this.state.data}
+            >
+                {/* <Button onClick={this.setValues}>setValues</Button> */}
+                <Row>
+                    <Col span={12}>
+                        <ArrayField field="effects">
+                            {({ add, arrayFields }) => (
+                                <React.Fragment>
+                                    <Button onClick={add} type="primary">Add</Button>
+                                    {
+                                        arrayFields.map(({ field, key, remove }, i) => (
+                                            <div key={key}>
+                                                <Input
+                                                    field={`${field}[name]`}
+                                                    label={`${field}.name`}
+                                                    // initValue="field-level-init-2D"
+                                                />
+                                                <Input
+                                                    field={`${field}[time]`}
+                                                    label={`${field}.time`}
+                                                />
+                                                <Button type="danger" onClick={remove}>remove</Button>
+                                            </div>
+                                        ))
+                                    }
+                                </React.Fragment>
+                            )}
+                        </ArrayField>
+                        <Button htmlType="submit">submit</Button>
+                        <Button htmlType='reset'>Reset</Button>
+                        <Form.InputNumber field="number" label="期望个数" />
+                        <Button onClick={this.change}>改变</Button>
+                    </Col>
+                    <Col span={12}>
+                        <ComponentUsingFormState />
+                    </Col>
+                </Row>
+            </Form>
+        );
+    }
+}
+
+
+// 使用 ArrayField props initValue来设置初始值
+class ArrayFieldWithInitValue extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            data: {
+                effects: [
+                    { name: 'arrayField-props.initValue-0-name', time: 'arrayField-props.initValue-0-time', otherKey: 1 },
+                    { name: 'arrayField-props.initValue-1-name', time: 'arrayField-props.initValue-1-time', otherKey: 453 },
+                ],
+            },
+            flag: true
+        };
+        this.getFormApi = this.getFormApi.bind(this);
+        this.change = this.change.bind(this);
+    }
+
+    change = () => {
+        let number = this.formApi.getValue('number');
+        let newData = Array.from({ length: 2 }, (v, i) => ({
+            name: `${i}-name`,
+            time: `${i}-time`
+        }));
+        console.log(newData);
+        this.formApi.setValue('effects', newData);
+    }
+
+    getFormApi(formApi) {
+        this.formApi = formApi;
+    }
+
+    render() {
+        const { effects }  = this.state.data;
+        return (
+            <Form
+                onChange={(...v) => console.log('onchange:' + v)}
+                onValueChange={(...v) => console.log('onValueChange:' + v)}
+                getFormApi={this.getFormApi}
+            >
+                {/* <Button onClick={this.setValues}>setValues</Button> */}
+                <Row>
+                    <Col span={12}>
+                        <ArrayField field="effects" initValue={effects}>
+                            {({ add, arrayFields }) => (
+                                <React.Fragment>
+                                    <Button onClick={add} type="primary">Add</Button>
+                                    {
+                                        arrayFields.map(({ field, key, remove }, i) => (
+                                            <div key={key}>
+                                                <Input
+                                                    field={`${field}[name]`}
+                                                    label={`${field}.name`}
+                                                    // initValue="field-level-init-2D"
+                                                />
+                                                <Input
+                                                    field={`${field}[time]`}
+                                                    label={`${field}.time`}
+                                                />
+                                                <Button type="danger" onClick={remove}>remove</Button>
+                                            </div>
+                                        ))
+                                    }
+                                </React.Fragment>
+                            )}
+                        </ArrayField>
+                        <Button htmlType="submit">submit</Button>
+                        <Button htmlType='reset'>Reset</Button>
+                        {/* <Form.InputNumber field="number" label="期望个数" /> */}
+                        {/* <Button onClick={this.change}>改变</Button> */}
+                    </Col>
+                    <Col span={12}>
+                        <ComponentUsingFormState />
+                    </Col>
+                </Row>
+            </Form>
+        );
+    }
+}
+
+/* basic usage */
+class ArrayFieldDemo extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            data: {
+                c: 'c',
+                test: [
+                    // {},
+                    // {},
+                    { name: 'sugar', time: '3min' },
+                    // { name: 'bacon', time: '6min', key: 'c2' },
+                    { name: 'bacon', time: '6min' },
+                ],
+            },
+            flag: true
+        };
+        this.getFormApi = this.getFormApi.bind(this);
+    }
+
+    change = () => {
+        let number = this.formApi.getValue('number');
+        let newData = Array.from({ length: number }, (v, i) => ({
+            name: `${i}-name`,
+            time: `${i}-time`
+        }));
+        this.formApi.setValue('effects', newData);
+    }
+
+    clear = () => {
+        // this.formApi.setValues({ number: 3 });
+        // this.formApi.setValues({}, { isOverride: true });
+        this.formApi.setValues({ number: 3 }, { isOverride: true });
+    }
+
+    getFormApi(formApi) {
+        this.formApi = formApi;
+    }
+
+    render() {
+        return (
+            <Form
+                // onChange={(...v) => console.log(v)}
+                onValueChange={(...v) => console.log(v)}
+                getFormApi={this.getFormApi}>
+                <Row>
+                    <Col span={12}>
+                        <ArrayField field="effects" initValue={this.state.data.test}>
+                            {({ add, arrayFields }) => (
+                                <React.Fragment>
+                                    <Button onClick={add} type="primary">Add</Button>
+                                    <Button onClick={this.clear} type="primary">Clear by setValues empty Object</Button>
+                                    {
+                                        arrayFields.map(({ field, key, remove }, i) => (
+                                            <div key={key}>
+                                                <Input
+                                                    field={`${field}[name]`}
+                                                    label={`${field}.name`}
+                                                    // initValue='test'
+                                                />
+                                                <Input
+                                                    field={`${field}[time]`}
+                                                    label={`${field}.time`}
+                                                />
+                                                <Button type="danger" onClick={remove}>remove</Button>
+                                            </div>
+                                        ))
+                                    }
+                                </React.Fragment>
+                            )}
+                        </ArrayField>
+                        <Form.InputNumber field="number" label="期望个数" />
+                        <Space>
+                            <Button onClick={this.change}>改变</Button>
+                            <Button htmlType="submit">submit</Button>
+                            <Button htmlType='reset'>Reset</Button>
+                        </Space>
+                    </Col>
+                    <Col span={12}>
+                        <ComponentUsingFormState />
+                    </Col>
+                </Row>
+            </Form>
+        );
+    }
+}
+
+export { ArrayFieldCollapseDemo, ArrayFieldDemo, ArrayFieldWithFormInitValues, ArrayFieldWithInitValue };

package/form/_story/DynamicField/nestArrayField.jsx

@@ -0,0 +1,159 @@
+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 { format } from 'date-fns';
+import {
+    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 NestArrayField extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            data: {
+                group: [
+                    {
+                        name: '0',
+                        // name: '0', items: [ { itemName: 'form', type: '0-1' } ],
+                    },
+                    // {
+                    //     name: '1', items: [ { itemName: 'form', type: '1-1' } ],
+                    // }
+                ],
+            },
+            flag: true
+        };
+        this.getFormApi = this.getFormApi.bind(this);
+        this.change = this.change.bind(this);
+    }
+
+    change = () => {
+        let number = this.formApi.getValue('number');
+        let newData = {
+            group: [
+                { name: Math.random().toString().slice(0, 3), items: [ { itemName: Math.random(), type: '0-1' } ] },
+                // { name: Math.random(), items: [ { itemName: Math.random(), type: '0-1' } ] },
+            ]
+        }
+        this.formApi.setValues(newData, { isOverride: true });
+    }
+
+    getFormApi(formApi) {
+        this.formApi = formApi;
+    }
+
+    render() {
+        return (
+            <Form
+                onValueChange={(values)=>console.log(values)}
+                getFormApi={this.getFormApi}
+                initValues={this.state.data}
+            >
+                <Row>
+                    <Col span={12}>
+                        <ArrayField field='group'>
+                            {({ add, arrayFields, addWithInitValue }) => (
+                                <React.Fragment>
+                                    <Button onClick={() => addWithInitValue({ name: 1 })} type='primary'>Add level-1</Button>
+                                    <Button onClick={this.change}>改变</Button>
+                                    {
+                                        arrayFields.map(({ field, key, remove}, i) => (
+                                            <div key={key} style={{ width: 1000 }}>
+                                                <Input
+                                                    field={`${field}[name]`}
+                                                    label={`${field}.name`}
+                                                    style={{ width: 200 }}
+                                                >
+                                                </Input>
+                                                <ArrayField field={`${field}.items`}>
+                                                    {({ add, arrayFields, addWithInitValue }) => (
+                                                        <div style={{ marginLeft: 50 }}>
+                                                            <Button onClick={() => addWithInitValue({ itemName: '2-1' })} type='primary'>add via api</Button>
+                                                            <Button onClick={add} type='primary'>add via props.initvalues</Button>
+                                                            {
+                                                                arrayFields.map(({ field, key, remove}, i) => (
+                                                                    <div key={key}>
+                                                                        <Input
+                                                                            style={{ width: 150}}
+                                                                            field={`${field}.itemName`}
+                                                                            label={`${field}.itemName`}
+                                                                            initValue='2d'
+                                                                        >
+                                                                        </Input>
+                                                                        <Button type='danger' onClick={remove}>remove level-2</Button>
+                                                                    </div>
+                                                                ))
+                                                            }
+                                                        </div>
+                                                    )}
+                                                </ArrayField>
+                                                <Button type='danger' onClick={remove}>remove level-1</Button>
+                                            </div>
+                                        ))
+                                    }
+                                </React.Fragment>
+                            )}
+                        </ArrayField>
+                    </Col>
+                    <Col span={12}>
+                        <ComponentUsingFormState/>
+                    </Col>
+                </Row>
+            </Form>
+        );
+    }
+}
+
+
+
+
+class Child extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            ts: format(new Date(), 'yyyy-MM-dd HH:mm:ss')
+        }
+    }
+    render() {
+        return <div>
+            {this.state.ts}
+        </div>
+    }
+}
+
+class Parent extends React.Component {
+    constructor(props){
+        super(props);
+        this.click = this.click.bind(this);
+    }
+
+    click() {
+        this.forceUpdate();
+    }
+    render() {
+        return <div>
+            {[1, 2, 3].map(i => (
+                <div key={i}>
+                    <Child></Child>
+                </div>
+            ))}
+            <Button onClick={this.click}>change</Button>
+        </div>
+    }
+}
+
+export { NestArrayField, Parent };

package/form/_story/FieldProps/bigNumberFieldPath.jsx

@@ -0,0 +1,73 @@
+/* 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 BigNumberFieldDemo = () => (
+    <Form
+        onSubmit={values => {
+            console.log(values);
+            Notification.success({ title: 'submit', content: JSON.stringify(values) });
+        }}
+        onValueChange={v => {
+            console.log('change', v);
+        }}
+        labelPosition="top"
+        style={{ width: 400 }}
+    >
+        <Form.InputGroup label={{ text: <span>手机号码</span>, required: true }} labelPosition="top">
+            <Form.Select
+                style={{ width: 150 }}
+                field="phonePrefix"
+                initValue="+86"
+                rules={[{ required: true }]}
+                showClear
+            >
+                <Form.Select.Option value="+1">美国+1</Form.Select.Option>
+                <Form.Select.Option value="+852">香港+852</Form.Select.Option>
+                <Form.Select.Option value="+86">中国+86</Form.Select.Option>
+                <Form.Select.Option value="+81">日本+81</Form.Select.Option>
+            </Form.Select>
+            <Form.Input
+                initValue="18912345678"
+                style={{ width: 250 }}
+                field="phoneNumber"
+                rules={[{ required: true }]}
+                showClear
+            />
+        </Form.InputGroup>
+        <Form.Input field="姓名" trigger="blur" initValue="Semi" />
+        <Form.Input field='test["123"]' trigger="blur" initValue="Semi1" />
+        <Form.Input field='test["24"]' trigger="blur" initValue="Semi1" />
+        <Form.Input field='test["543"]' trigger="blur" initValue="Semi1" />
+        <Form.Input field='extra["202011051537460"]' trigger="blur" initValue="Semi1" />
+        <Form.Input field='extra["202011051537461"]' trigger="blur" initValue="Semi2" />
+        <Form.Input field='extra["202011051537462"]' trigger="blur" initValue="Semi3" />
+        <Button htmlType="submit">提交</Button>
+    </Form>
+);
+
+export { BigNumberFieldDemo };

package/form/_story/FieldProps/convert.jsx

@@ -0,0 +1,100 @@
+/* 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;
+
+class ConvertDemo extends React.Component {
+    constructor(props) {
+        super(props);
+        this.formApi = null;
+    }
+
+    handleChange = val => {
+        let finalVal = val;
+        let firstClassOption = ['Asia', 'North America'];
+        // 在这里去做你的value替换逻辑
+        console.log(`originVal:${ val}`);
+        if (val.length === 1) {
+            // do nothing
+        } else {
+            if (val.every(item => firstClassOption.includes(item))) {
+                finalVal = val[val.length - 1];
+            }
+        }
+        console.log(`finalVal:${ finalVal}`);
+        return finalVal;
+    };
+
+    render() {
+        const treeData = [
+            {
+                label: '亚洲',
+                value: 'Asia',
+                key: '0',
+                children: [
+                    {
+                        label: '中国',
+                        value: 'China',
+                        key: '0-0',
+                        children: [
+                            {
+                                label: '北京',
+                                value: 'Beijing',
+                                key: '0-0-0',
+                            },
+                            {
+                                label: '上海',
+                                value: 'Shanghai',
+                                key: '0-0-1',
+                            },
+                        ],
+                    },
+                ],
+            },
+            {
+                label: '北美洲',
+                value: 'North America',
+                key: '1',
+            },
+        ];
+        return (
+            <Form getFormApi={this.getFormApi}>
+                <Form.TreeSelect
+                    field="tree"
+                    label="节点（TreeSelect）"
+                    placeholder="请选择服务节点"
+                    treeData={treeData}
+                    convert={this.handleChange}
+                    filterTreeNode
+                    multiple
+                />
+            </Form>
+        );
+    }
+}
+
+export { ConvertDemo };