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

package/form/_story/DynamicField/arrayFieldDemo.jsx

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

@@ -1,159 +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 { 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

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

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