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

package/form/_story/Layout/layoutDemo.jsx

@@ -0,0 +1,348 @@
+import React, { useState, useLayoutEffect, Component } from 'react';
+import { storiesOf } from '@storybook/react';
+import { Button, Modal, TreeSelect, Row, Col, Avatar, Icon, Select as BasicSelect,
+    Form,
+    useFormState,
+    useFormApi,
+    useFieldApi,
+    useFieldState,
+    withFormState,
+    withFormApi,
+    withField,
+    ArrayField,
+    AutoComplete,
+    Collapse } from '../../../index';
+import { ComponentUsingFormState } from '../Hook/hookDemo';
+const { Input, Select, DatePicker, Switch, Slider, CheckboxGroup, Checkbox, RadioGroup, Radio, TimePicker, InputNumber, InputGroup } = Form;
+const plainOptions = ['Apple', 'Pear', 'Orange'];
+
+
+const { Option } = Select;
+const { Label } = Form;
+const { Section } = Form;
+
+// wrapperCol, labelCol
+class LayoutDemo extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            labelPosition: 'left',
+            labelAlign: 'left',
+            // labelWidth: '180px'
+        };
+        this.changeLabelPos = this.changeLabelPos.bind(this);
+        this.changeLabelAlign = this.changeLabelAlign.bind(this);
+    }
+
+    changeLabelPos(labelPosition) {
+        let labelWidth;
+        // labelPosition === 'left' ? labelWidth = '180px' : labelWidth = 'auto';
+        this.setState({ labelPosition, labelWidth });
+    }
+
+    changeLabelAlign(labelAlign) {
+        this.setState({ labelAlign });
+    }
+
+    setValues() {
+        this.formApi.setValues({
+
+        });
+    }
+
+    render() {
+        const { labelPosition, labelAlign, labelWidth } = this.state;
+        return (
+            <>
+                <div>
+                    <Label style={{ marginLeft: 10 }}>lablPosition:</Label>
+                    <BasicSelect onChange={this.changeLabelPos} value={labelPosition}>
+                        <Select.Option value="top">top</Select.Option>
+                        <Select.Option value="left">left</Select.Option>
+                    </BasicSelect>
+                    <Label style={{ marginLeft: 10 }}>lablAlign:</Label>
+                    <BasicSelect onChange={this.changeLabelAlign} value={labelAlign}>
+                        <Select.Option value="left">left</Select.Option>
+                        <Select.Option value="right">right</Select.Option>
+                    </BasicSelect>
+                </div>
+                <hr />
+                <Form
+                    labelPosition={labelPosition}
+                    labelWidth={labelWidth}
+                    labelAlign={labelAlign}
+                    labelCol={{ span: 6 }}
+                    wrapperCol={{ span: 18 }}
+                    onChange={formState => console.log(formState)}
+                    onValueChange={formState => console.log(formState)}
+                    style={{ padding: '10px', width: 600 }}>
+                    <Form.Input
+                        field="input"
+                        label="我是label阿"
+                        trigger="blur"
+                        rules={[
+                            { required: true, message: 'required error' },
+                            { type: 'string', message: 'type error' },
+                            { validator: (rule, value) => value === 'muji', message: 'not muji' }
+                        ]}
+                    />
+                    <Form.Switch field="agree" />
+                    <Form.InputNumber field="price" />
+                    <Form.Select field="name">
+                        <Option value="mike">mike</Option>
+                        <Option value="jane">jane</Option>
+                        <Option value="kate">kate</Option>
+                    </Form.Select>
+                    <Form.CheckboxGroup field="role">
+                        <Form.Checkbox value="admin">管理员admin</Form.Checkbox>
+                        <Form.Checkbox value="user">用户user</Form.Checkbox>
+                        <Form.Checkbox value="guest">访客guest</Form.Checkbox>
+                        <Form.Checkbox value="root">根用户root</Form.Checkbox>
+                    </Form.CheckboxGroup>
+                    <Form.Checkbox useOutSideGroup field="root">root</Form.Checkbox>
+                    <Form.RadioGroup field="sex" name="apple">
+                        <Form.Radio value="1">man</Form.Radio>
+                        <Form.Radio value="2">woman</Form.Radio>
+                    </Form.RadioGroup>
+                    <Form.Slot label={{ text: 'texxt', required: true }}>
+                        <div>slot</div>
+                    </Form.Slot>
+                </Form>
+            </>
+        );
+    }
+}
+
+class InsetLabelDemo extends React.Component {
+    constructor(props) {
+        super();
+        this.state = {
+            labelPosition: 'left',
+            labelAlign: 'left',
+            // labelWidth: '180px'
+        };
+        this.changeLabelPos = this.changeLabelPos.bind(this);
+        this.changeLabelAlign = this.changeLabelAlign.bind(this);
+    }
+
+
+    changeLabelPos(labelPosition) {
+        let labelWidth;
+        // labelPosition === 'left' ? labelWidth = '180px' : labelWidth = 'auto';
+        this.setState({ labelPosition, labelWidth });
+    }
+
+    changeLabelAlign(labelAlign) {
+        this.setState({ labelAlign });
+    }
+
+    render() {
+        const { labelPosition, labelAlign } = this.state;
+
+        return (
+            <Form
+                labelPosition={'inset'}
+                labelCol={{ span: 6 }}
+                wrapperCol={{ span: 18 }}
+                onChange={formState => console.log(formState)}
+                onValueChange={formState => console.log(formState)}
+                style={{ padding: '10px', width: 600 }}>
+                <Form.Input
+                    field="input"
+                />
+                <Form.InputNumber field="price" />
+                <Form.DatePicker field="date" placeholder="请选择日期时间范围" />
+                <Form.TimePicker field="time" />
+                <Form.Slot label={{ text: 'texxt', required: true }}>
+                    <div>slot</div>
+                </Form.Slot>
+            </Form>
+        );
+    }
+}
+
+
+
+class GroupFormDemo extends React.Component {
+
+    constructor() {
+        super();
+        this.saveFormApi = this.saveFormApi.bind(this);
+        this.manualSubmit = this.manualSubmit.bind(this);
+    }
+    saveFormApi(formApi) {
+        this.formApi = formApi;
+    }
+
+    manualSubmit() {
+        this.formApi.submitForm();
+    }
+
+    render() {
+        const selectProps = {
+            style: { width: '100px' },
+            placeholder: '国家',
+            field: 'country',
+            rules: [
+                { required: true }
+            ]
+        };
+        return (
+            <>
+                <Form onSubmit={values => console.log(values)} labelPosition="left" getFormApi={this.saveFormApi}>
+                    <InputGroup label={{ text: 'Movie', required: true }} labelPosition="left">
+                        <Select {...selectProps}>
+                            <Select.Option value="crime">+86</Select.Option>
+                            <Select.Option value="comedy">+1</Select.Option>
+                            <Select.Option value="tragedy">+83</Select.Option>
+                        </Select>
+                        <Input placeholder="手机号码" style={{ width: 100 }} field="phone" noLabel rules={[{ required: true }]} />
+                        <InputNumber placeholder="评分" style={{ width: 140 }} field="MovieScore" noLabel />
+                    </InputGroup>
+                    <Input field="name" trigger="blur" rules={[{ required: true }]} />
+                    <Input field="familyName[0].before" trigger="blur" />
+                    <Input field="familyName[0].after" trigger="blur" />
+                    <Select field="Sex">
+                        <Option value="female">female</Option>
+                        <Option value="male">male</Option>
+                    </Select>
+
+                    <Button htmlType="submit">提交</Button>
+                    <Button onClick={this.manualSubmit}>手动提交</Button>
+                </Form>
+            </>
+        );
+    }
+}
+
+
+class LayoutForm extends React.Component {
+    constructor() {
+        super();
+        this.state = {
+            filed: {},
+            layout: 'vertical',
+            labelPosition: 'top',
+            // horizontal
+        };
+        this.getFormApi = this.getFormApi.bind(this);
+        this.changeLayout = this.changeLayout.bind(this);
+        this.changeLabelPos = this.changeLabelPos.bind(this);
+    }
+
+    changeLayout(layout) {
+        this.setState({ layout });
+    }
+
+    changeLabelPos(labelPosition) {
+        this.setState({ labelPosition });
+    }
+
+    changeInput() {
+        this.formApi.setValue('input', Math.random());
+    }
+
+    getFormApi(formApi) {
+        this.formApi = formApi;
+    }
+
+    render() {
+        const { field } = this.state;
+        const { layout, labelPosition } = this.state;
+        return (
+            <>
+                <div>
+                    <BasicSelect onChange={this.changeLayout} value={layout}>
+                        <BasicSelect.Option value="vertical">vertical</BasicSelect.Option>
+                        <BasicSelect.Option value="horizontal">horizontal</BasicSelect.Option>
+                    </BasicSelect>
+                    <BasicSelect onChange={this.changeLabelPos} value={labelPosition}>
+                        <BasicSelect.Option value="top">top</BasicSelect.Option>
+                        <BasicSelect.Option value="left">left</BasicSelect.Option>
+                    </BasicSelect>
+                </div>
+                <Form
+                    layout={layout}
+                    labelPosition={labelPosition}
+                    labelWidth={'auto'}
+                    getFormApi={this.getFormApi}
+                    style={{ padding: '10px' }}>
+                    <Row>
+                        <Col span={6}>
+                            <Input
+                                field="input"
+                                label="我是label阿"
+                                style={{ width: '250px' }}
+                                trigger="blur"
+                                rules={[
+                                    { required: true, message: 'required error' },
+                                    { type: 'string', message: 'type error' },
+                                    { validator: (rule, value) => value === 'muji', message: 'not muji' }
+                                ]}
+                            />
+                        </Col>
+                        <Col span={6}>
+                            <Switch field="switch" />
+                        </Col>
+                        <Col span={6}>
+                            <InputNumber field="number" />
+                        </Col>
+                        <Col span={6}>
+                            <Select field="select">
+                                <Option value="mike">mike</Option>
+                                <Option value="jane">jane</Option>
+                                <Option value="kate">kate</Option>
+                            </Select>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col span={6}>
+                            <Select
+                                field="peoples"
+                                multiple
+                                label="Select [multiple]"
+                                rules={[
+                                    { type: 'array', min: 1, max: 3, messag: 'peoples errors' }
+                                ]}
+                            >
+                                <Option value="a">a</Option>
+                                <Option value="b">b</Option>
+                                <Option value="c">c</Option>
+                                <Option value="d">d</Option>
+                                <Option value="e">e</Option>
+                            </Select>
+                        </Col>
+                        <Col span={6}>
+                            <CheckboxGroup options={plainOptions} field="checkbox" />
+                        </Col>
+                        <Col span={6}>
+                            <CheckboxGroup
+                                field="role"
+                                rules={[
+                                    { required: true }
+                                ]}
+                            >
+                                <Checkbox value="admin">admin</Checkbox>
+                                <Checkbox value="user">user</Checkbox>
+                                <Checkbox value="guest">guest</Checkbox>
+                                <Checkbox value="root">root</Checkbox>
+                            </CheckboxGroup>
+                        </Col>
+                    </Row>
+                    <Row>
+                        <Col span={12}>
+                            <Button type="primary" htmlType="submit">
+                                Submit
+                            </Button>
+                            <Button htmlType="reset">reset</Button>
+                            <Button onClick={this.changeInput.bind(this)}>change Input</Button>
+                            <ComponentUsingFormState />
+                        </Col>
+                    </Row>
+                </Form>
+            </>
+        );
+    }
+}
+
+export { LayoutDemo, InsetLabelDemo, GroupFormDemo };

package/form/_story/Layout/modalFormDemo.jsx

@@ -0,0 +1,94 @@
+import React, { useState, useLayoutEffect } from 'react';
+import { Form, Button, Icon, Row, Col, Modal } from '../../../index';
+
+class ModalFormDemo 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() {
+        this.setState({ visible: true });
+    }
+
+    handleOk() {
+        this.formApi
+            .validate()
+            .then(values => {
+                console.log(values);
+            })
+            .catch(errors => {
+                console.log(errors);
+            });
+    }
+
+    handleCancel() {
+        this.setState({ visible: false });
+    }
+
+    getFormApi(formApi) {
+        this.formApi = formApi;
+    }
+
+    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"
+                                    label="国家/地区"
+                                    placeholder="请选择"
+                                    style={{ width: 100 }}
+                                    rules={[{ required: true, message }]}
+                                >
+                                    <Form.Select.Option value="China">中国</Form.Select.Option>
+                                    <Form.Select.Option value="US">美国</Form.Select.Option>
+                                    <Form.Select.Option value="Europe">欧洲</Form.Select.Option>
+                                    <Form.Select.Option value="Japan">日本</Form.Select.Option>
+                                </Form.Select>
+                            </Col>
+                            <Col span={18}>
+                                <Form.Input field="owner" label="业务执行人" rules={[{ required: true, message }]} />
+                            </Col>
+                            <Col span={6}>
+                                <Form.Select
+                                    field="area"
+                                    label="投放区域"
+                                    placeholder="请选择"
+                                    style={{ width: 100 }}
+                                    rules={[{ required: true, message }]}
+                                >
+                                    <Form.Select.Option value="China">中国</Form.Select.Option>
+                                    <Form.Select.Option value="US">美国</Form.Select.Option>
+                                    <Form.Select.Option value="Europe">欧洲</Form.Select.Option>
+                                    <Form.Select.Option value="Japan">日本</Form.Select.Option>
+                                </Form.Select>
+                            </Col>
+                            <Col span={18}>
+                                <Form.Input
+                                    field="department"
+                                    label="业务执行部门"
+                                    rules={[{ required: true, message }]}
+                                />
+                            </Col>
+                        </Row>
+                    </Form>
+                </Modal>
+            </>
+        );
+    }
+}
+
+export { ModalFormDemo }

package/form/_story/Layout/slotDemo.jsx

@@ -0,0 +1,126 @@
+import React, { useState, useLayoutEffect } from 'react';
+import { Form, Select } from '../../../index';
+import { IconSemiLogo } from '@douyinfe/semi-icons';
+
+const { Option } = Select;
+class AssistComponent extends React.Component {
+
+    render() {
+        return (
+            <>
+                <Form
+                    onChange={v => console.log(v)}
+                    onSubmit={v => console.log(v)}
+                    style={{
+                        width: 600,
+                    }}
+                    labelPosition="left"
+                    labelWidth={100}
+                >
+                    <Form.Input
+                        field="特效名称"
+                        style={{
+                            width: 250,
+                        }}
+                        trigger="blur"
+                        rules={[
+                            {
+                                required: true,
+                            },
+                        ]}
+                    />
+                    <Form.Select
+                        style={{
+                            width: 250,
+                        }}
+                        field="type"
+                        label="特效类型"
+                    >
+                        <Option value="脸部贴纸">脸部贴纸</Option>
+                        <Option value="前景贴纸">前景贴纸</Option>
+                    </Form.Select>
+                    <Form.ErrorMessage />
+                    <Form.Slot
+                        label={{
+                            text: 'SlotA',
+                            required: true,
+                        }}
+                    >
+                        <div
+                            style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                height: '100%',
+                            }}
+                        >
+                            我是Semi Form SlotA, 我是自定义的ReactNode
+                        </div>
+                    </Form.Slot>
+                    <Form.Slot label="string Label">
+                        <div
+                            style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                height: '100%',
+                            }}
+                        >
+                            我是一个传string label的slot
+                        </div>
+                    </Form.Slot>
+                    <Form.Slot label={<IconSemiLogo />}>
+                        <div
+                            style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                height: '100%',
+                            }}
+                        >
+                            我是一个传ReactNode label的slot
+                        </div>
+                    </Form.Slot>
+                    <Form.Slot label={<IconSemiLogo />} error={'我是slot的错误信息'}>
+                        <div>我是一个带error的slot</div>
+                    </Form.Slot>
+                    <Form.Slot
+                        label={{
+                            text: 'SlotB',
+                            width: 170,
+                            align: 'right',
+                        }}
+                    >
+                        <div
+                            style={{
+                                display: 'flex',
+                                alignItems: 'center',
+                                height: '100%',
+                            }}
+                        >
+                            我是Semi Form SlotB, 我的Label Align、Width与众不同
+                        </div>
+                    </Form.Slot>
+                </Form>,
+                <Form.Slot
+                    label={{
+                        text: 'SlotB',
+                        width: 170,
+                        align: 'right',
+                        extra: 'se',
+                        required: true,
+                    }}
+                >
+                    <div
+                        style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            height: '100%',
+                        }}
+                    >
+                        我是Slot，我并没有被Form包裹，我是单独使用的
+                    </div>
+                </Form.Slot>,
+            </>
+        );
+    }
+}
+
+export { AssistComponent };