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

package/form/_story/Layout/layoutDemo.jsx

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

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

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