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

package/form/__test__/group.test.js

@@ -1,108 +0,0 @@
-import { Form } from '../../index';
-
-function getFormGroup(props = {}) {
-    let {
-        inputGroupProps = {},
-        fieldAProps = {},
-        fieldBProps = {},
-        formProps = {},
-    } = props;
-
-    return mount(<Form {...formProps}>
-        <Form.InputGroup {...inputGroupProps}>
-            <Form.Input field='a' {...fieldAProps}></Form.Input>
-            <Form.Input field='b' {...fieldBProps}></Form.Input>
-        </Form.InputGroup>
-    </Form>);
-}
-
-describe('Form-group', () => {
-
-    it('error aggregation', () => {
-        let errorA = 'fieldAError';
-        let errorB = 'fieldBError';
-        let props = {
-            fieldAProps: {
-                validate: () => errorA,
-                trigger: 'mount'
-            },
-            fieldBProps: {
-                validate: () => errorB,
-                trigger: 'mount'
-            }
-        };
-        let form = getFormGroup(props);
-        let errors = form.find('.semi-form-field-error-message span');
-        expect(errors.at(1).text()).toEqual(`${errorA}, ${errorB}`);
-    });
-
-    it('label-string', () => {
-        let props = {
-            fieldAProps: { },
-            fieldBProps: { },
-            inputGroupProps: {
-                label: 'semi'
-            }
-        };
-        let form = getFormGroup(props);
-        let labelText = form.find('.semi-form-field-label-text').text();
-        expect(labelText).toEqual('semi');
-    });
-
-    it('label-object', () => {
-        let props = {
-            fieldAProps: { },
-            fieldBProps: { },
-            inputGroupProps: {
-                label: {
-                    text: <span>semi</span>,
-                    required: true
-                }
-            }
-        };
-        let form = getFormGroup(props);
-        expect(form.find('.semi-form-field-label-text').text()).toEqual('semi');
-    });
-
-    it('labelPosition', () => {
-        let props = {
-            fieldAProps: { },
-            fieldBProps: { },
-            inputGroupProps: {
-                label: 'semi',
-                labelPosition: 'left'
-            }
-        };
-        let form = getFormGroup(props);
-        expect(form.exists('.semi-form-field-label-left')).toEqual(true);
-    });
-
-    it('children', () => {
-        let props = {
-            fieldAProps: {
-                
-            },
-        }
-        let form = getFormGroup();
-        // exist field a\b and theirs label are hidden
-        expect(form.exists('.semi-input-group .semi-form-field-label')).toEqual(false);
-    });
-
-    it('decleare labelPosition, labelWidth via form props', () => {
-        let props = {
-            formProps: {
-                labelPosition: 'left',
-                labelWidth: 300
-            },
-            inputGroupProps: {
-                label: {
-                    text: 'semi'
-                }
-            }
-        };
-        let form = getFormGroup(props);
-        expect(form.exists('.semi-form-field-label-left')).toEqual(true);
-        expect(form.find('.semi-form-field-label')).toHaveStyle('width', 300);
-    });
-
-});

package/form/__test__/hoc.test.js

@@ -1,24 +0,0 @@
-import { Form } from '../../index';
-import { noop } from 'lodash';
-
-describe('Form-hoc', () => {
-    beforeEach(() => {
-        document.body.innerHTML = '';
-        // Avoid `attachTo: document.body` Warning
-        const div = document.createElement('div');
-        div.setAttribute('id', 'container');
-        document.body.appendChild(div);
-    });
-
-    afterEach(() => {
-        const div = document.getElementById('container');
-        if (div) {
-            document.body.removeChild(div);
-        }
-    });
-
-    it('withField', () => {});
-    it('withField-shouldMemo:false', () => {});
-    // it('withFormState', () => {});
-    // it('withFormApi', () => {});
-});

package/form/__test__/label.test.js

@@ -1,69 +0,0 @@
-import { Form } from '../../index';
-import { noop } from 'lodash';
-import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
-
-const Label = Form.Label;
-
-function getLabel(props) {
-    return mount(<Label {...props}></Label>);
-}
-
-describe('Form.Label', () => {
-    it('className & style', () => {
-        let props = {
-            className: 'label-test',
-            style: {
-                color: 'red',
-            },
-        };
-        const label = getLabel(props);
-        expect(label.exists('label.label-test')).toEqual(true);
-        expect(label.find('label.label-test')).toHaveStyle('color', 'red');
-    });
-
-    it('required', () => {
-        let props = {
-            required: true,
-        };
-        const label = getLabel(props);
-        expect(label.exists(`.${BASE_CLASS_PREFIX}-form-field-label-required`)).toEqual(true);
-    });
-
-    it('text', () => {
-        let props = {
-            text: 'semi',
-        };
-        const label = getLabel(props);
-        expect(label.text()).toEqual('semi');
-        // text = 0
-        label.setProps({ text: 0 });
-        label.update();
-        expect(label.text()).toEqual('0');
-        let text = <div>{'semi'}</div>;
-        // text = reactNode
-        label.setProps({ text: text });
-        label.update();
-        expect(label.contains(text)).toEqual(true);
-    });
-    it('text-align', () => {
-        let props = {
-            align: 'right',
-        };
-        const label = getLabel(props);
-        expect(label.exists(`.${BASE_CLASS_PREFIX}-form-field-label-right`)).toEqual(true);
-    });
-    it('width', () => {
-        let props = {
-            width: 200,
-        };
-        const label = getLabel(props);
-        expect(label.find(`.${BASE_CLASS_PREFIX}-form-field-label`)).toHaveStyle('width', 200);
-    });
-    it('disabled', () => {
-        let props = {
-            disabled: true,
-        };
-        const label = getLabel(props);
-        expect(label.exists(`.${BASE_CLASS_PREFIX}-form-field-label-disabled`)).toEqual(true);
-    });
-});

package/form/__test__/section.test.js

@@ -1,49 +0,0 @@
-import { Form } from '../../index';
-import { noop } from 'lodash';
-import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
-
-const Section = Form.Section;
-
-function getSection(props) {
-    return mount(<Section {...props}></Section>);
-}
-
-describe('Form.Label', () => {
-    it('className & style', () => {
-        let props = {
-            className: 'sec-test',
-            style: {
-                color: 'red',
-            },
-        };
-        const section = getSection(props);
-        expect(section.exists('section.sec-test')).toEqual(true);
-        expect(section.find('section.sec-test')).toHaveStyle('color', 'red');
-    });
-
-    it('children', () => {
-        const section = mount(<Form>
-            <Section>
-                <Form.Input field='test' className='test'></Form.Input>
-            </Section>
-        </Form>)
-        expect(section.exists(`.test`)).toEqual(true);
-    });
-
-    it('text', () => {
-        let props = {
-            text: 'semi',
-        };
-        const section = getSection(props);
-        expect(section.find('.semi-form-section-text').text()).toEqual('semi');
-        // text = 0
-        section.setProps({ text: 0 });
-        section.update();
-        expect(section.find('.semi-form-section-text').text()).toEqual('0');
-        let text = <div>{'semi'}</div>;
-        // text = reactNode
-        section.setProps({ text: text });
-        section.update();
-        expect(section.contains(text)).toEqual(true);
-    });
-});

package/form/__test__/slot.test.js

@@ -1,108 +0,0 @@
-import { Form } from '../../index';
-import { noop } from 'lodash';
-import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
-
-const Slot = Form.Slot;
-
-function getSlot(slotProps, formProps = {}) {
-    return mount(
-        <Form {...formProps}>
-            <Slot {...slotProps}></Slot>
-        </Form>
-    );
-}
-
-describe('Form-slot', () => {
-    it('className & style', () => {
-        let props = {
-            className: 'slot-test',
-            style: {
-                color: 'red',
-            },
-        };
-        const slot = getSlot(props).find(`.${BASE_CLASS_PREFIX}-form-slot`);
-        expect(slot.exists('.slot-test')).toEqual(true);
-        expect(slot.find(`.${BASE_CLASS_PREFIX}-form-slot`)).toHaveStyle('color', 'red');
-    });
-
-    it('label - objLabel, stringLabel, numberLabel, reactNodeLabel', () => {
-        let objProps = {
-            label: {
-                required: true,
-                text: 'semi',
-            },
-        };
-        const objLabel = getSlot(objProps).find(`.semi-form-field-label-text`).text();
-        expect(objLabel).toEqual('semi');
-
-        let stringProps = { label: 'semi' };
-        const stringLabel = getSlot(stringProps).find(`.semi-form-field-label-text`).text();
-        expect(stringLabel).toEqual('semi');
-
-        let numberProps = { label: 888 };
-        const numberLabel = getSlot(numberProps).find(`.semi-form-field-label-text`).text();
-        expect(numberLabel).toEqual('888');
-
-        let reactNodeLabel = { label: <div>hahaha</div> };
-        const modeLabel = getSlot(reactNodeLabel).find(`.semi-form-field-label-text div`).text();
-        expect(modeLabel).toEqual('hahaha');
-    });
-
-    it('error - objError, stringError, numberError, reactNodeError', () => {
-        let objProps = {
-            error: {
-                error: 'semi',
-            },
-        };
-        const objError = getSlot(objProps).find(`.semi-form-field-error-message span`).text();
-        expect(objError).toEqual('semi');
-
-        let stringProps = { error: 'semi' };
-        const stringError = getSlot(stringProps).find(`.semi-form-field-error-message span`).text();
-        expect(stringError).toEqual('semi');
-
-        let numerProps = { error: 888 };
-        const numerError = getSlot(numerProps).find(`.semi-form-field-error-message`).text();
-        expect(numerError).toEqual('');
-
-        let reactNodeLabel = { error: <div>hahaha</div> };
-        const modeLabel = getSlot(reactNodeLabel).find(`.semi-form-field-error-message div`).text();
-        expect(modeLabel).toEqual('hahaha');
-    });
-
-    it('children', () => {
-        let children = <div className="slot-child">semi</div>;
-        let props = {
-            children: children,
-        };
-        const slot = getSlot(props).find(`.${BASE_CLASS_PREFIX}-form-slot`);
-        expect(slot.contains(children)).toEqual(true);
-    });
-
-    it('extends Form.labelWidth, Form.labelPosition ', () => {
-        let formProps = {
-            labelWidth: 200,
-            labelPosition: 'left',
-        };
-        let props = {};
-        const form = getSlot(props, formProps);
-        expect(form.exists(`.${BASE_CLASS_PREFIX}-form-field-label-left`)).toEqual(true);
-        expect(form.find(`.${BASE_CLASS_PREFIX}-form-slot .${BASE_CLASS_PREFIX}-form-field-label`)).toHaveStyle('width', 200);
-    });
-
-    // TODO wrapperCol
-    // it('extends Form.wrapperCol / Form.labelCol', () => {
-    //     let props = {};
-    //     let formProps = {
-    //         wrapperCol: { span: 20 },
-    //         labelCol: { span: 2 },
-    //     };
-    //     const formContent = (
-    //         <Form {...formProps}>
-    //             <Slot {...slotProps}></Slot>
-    //         </Form>
-    //     );
-    //     const form = mount(formContent, { attachTo: document.getElementById('container') });
-    //     debugger;
-    // });
-});

package/form/_story/Debug/bugDemo.jsx

@@ -1,219 +0,0 @@
-/* eslint-disable */
-import React, { useState, useLayoutEffect, Component, useEffect } from 'react';
-import { storiesOf } from '@storybook/react';
-import { Button, Modal, TreeSelect, Row, Col, Avatar, TextArea, Input as BasicInput, Select as BasicSelect,
-    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 Test extends React.Component {
-    constructor() {
-        super();
-        console.log(this.props);
-        debugger;
-    }
-    componentWillReceiveProps(prevProps) {
-        console.log(this.props);
-        debugger;
-    }
-    componentDidMount() {
-        console.log(this.props);
-        debugger;
-    }
-    componentWillUnmount() {
-        console.log(this.props);
-        debugger;
-    }
-    render() {
-        return this.props.value;
-    }
-}
-
-const FCC = (() => () => {
-    useEffect(() => {
-        // effect
-        debugger;
-        return () => {
-            debugger;
-        };
-    }, []);
-    return <div>t</div>;
-})();
-
-class SetValuesArray extends React.Component {
-    constructor() {
-        super();
-        this.state = {
-            initValues: {
-                effects: [
-                    { name: 'A', key: '12312' },
-                    { name: 'B', key: '234234' },
-                    { name: 'C', key: '345435' },
-                ]
-            }
-        };
-        this.id = 3;
-        this.getFormApi = this.getFormApi.bind(this);
-        this.add = this.add.bind(this);
-        this.remove = this.remove.bind(this);
-        this.renderItems = this.renderItems.bind(this);
-        const iii = Form.Input;
-    }
-    getFormApi(formApi) {
-        this.formApi = formApi;
-    }
-    add(obj) {
-        let effects = this.formApi.getValue('effects');
-        if (!effects) {
-            effects = [];
-        }
-        effects.push({ name: '', type: '', key: Math.random() });
-        // effects.push({ name: '', type: '', key: this.id++  });
-        //    this.formApi.setValue('effects', effects);
-        this.formApi.setValues({
-            ...this.formApi.getValue(),
-            effects
-        }, { isOverride: true });
-    }
-    remove(key) {
-        let effects = this.formApi.getValue('effects');
-        effects = effects.filter((effect, index) => key !== effect.key);
-        if (!effects.length) {
-            effects = undefined;
-        }
-        //    this.formApi.setValue('effects', effects);
-        this.formApi.setValues({
-            ...this.formApi.getValue(),
-            effects
-        }, { isOverride: true });
-    }
-
-    renderItems(formState, values) {
-        console.log(values);
-        return values.effects && values.effects.map((effect, i) => (
-            // <div style={{ width: 1000, display: 'flex' }}>
-            <div style={{ width: 1000, display: 'flex' }} key={effect.key}>
-                {/* <Test value={`effects[${i}].name`} /> */}
-                {/* <FCC value={`effects[${i}].name`} /> */}
-                {/* <BasicInput props={`effects[${i}].name`} /> */}
-                {/* <Button type='danger' onClick={() => this.remove(effect.key)} style={{ margin: 12 }}>Remove</Button> */}
-                <Form.Input field={`effects[${i}].name`} style={{ width: 200, marginRight: 12 }} key={`effects[${i}].name`} />
-                {/* <Form.Input field={`effects[${i}].name`} style={{width: 200, marginRight: 12}} key={effect.key}></Form.Input> */}
-                <Button type="danger" onClick={() => this.remove(effect.key)} style={{ margin: 12 }}>Remove</Button>
-                <span>{effect.key}</span>
-            </div>
-        ));
-    }
-
-    render() {
-        let { initValues } = this.state;
-        return (
-            <>
-                <dd />
-                <Form
-                    getFormApi={this.getFormApi}
-                    initValues={initValues}
-                    style={{ width: 500 }}
-                    labelPosition="left"
-                    labelWidth="180px"
-                >
-                    {({ formState, values }) => (
-                        <>
-                            <Button onClick={this.add}>add</Button>
-                            {this.renderItems(formState, values)}
-                            <TextArea style={{ marginTop: 10 }} value={JSON.stringify(formState.values)} />
-                        </>
-                    )}
-                </Form>
-                <div className="test">will be render by react</div>
-            </>
-        );
-    }
-}
-
-class FieldPathWithArrayDemo extends React.Component {
-    constructor(props) {
-        super();
-        this.state = {
-            data: {
-                value: [
-                    { name: 'kkk' },
-                    { name: 'ccc' },
-                    { name: 'ddd' },
-                ]
-            },
-            regionLoad: 0
-        };
-        this.change = this.change.bind(this);
-    }
-
-    change() {
-        let { regionLoad } = this.state;
-        if (regionLoad !== 0) {
-            this.setState({ regionLoad: 0 });
-        } else {
-            this.setState({ regionLoad: 1 });
-        }
-    }
-
-    render() {
-        const { data, regionLoad } = this.state;
-
-        return (
-            <Form
-                initValues={data}
-                onChange={formState => console.log(formState)}
-                onValueChange={formState => console.log(formState)}
-                style={{ padding: '10px', width: 600 }}>
-                {
-                    regionLoad === 0 ? (
-                        <Form.Input
-                            field="value[0].name"
-                        />
-                    ) : null
-                }
-                <Button onClick={this.change}>change</Button>
-            </Form>
-        );
-    }
-}
-
-
-
-const Twice = () => {
-    // 或者把useFormState去掉
-    // const { values } = useFormState();
-    console.log('render');
-    return (
-        <Form.Input
-            field="test"
-            // 把rules去掉就不会render两次
-            rules={[{ required: true, message: '版本号不能为空' }]}
-        />
-    );
-};
-class DoubleRerender extends React.Component {
-    render() {
-        return (
-            <Form>
-                <Twice />
-            </Form>
-        );
-    }
-}
-
-
-export { SetValuesArray, FieldPathWithArrayDemo, DoubleRerender };

package/form/_story/Debug/childDidMount.jsx

@@ -1,30 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Form, Row, Col } from '@douyinfe/semi-ui';
-
-import MyRadio from './myRadio';
-
-export default function Demo() {
-    const formRef = useRef(null);
-    const [checkboxValue, setValue] = useState(false);
-
-    useEffect(() => {
-        console.log('didMount outer');
-    }, []);
-
-    return (
-        <Form
-            ref={formRef}
-            style={{ padding: 10, width: '100%' }}
-        >
-            <Row>
-                <Col span={12}>
-                    {/* 为了避免子组件重新mount，需要在函数为抽取为单独的组件，或者在函数内useMemo、useCallback下 */}
-                    {/* 否则setState引起子组件重新mount会重新消费initValue，可能会造成不符合预期的结果 */}
-                    {/* 如点击Radio后并没有选中点击项，而选中的是initValue */}
-                    <MyRadio formRef={formRef} setValue={setValue} />
-                </Col>
-            </Row>
-            <div>checkboxValue: {`${checkboxValue}`}</div>
-        </Form>
-    );
-}

package/form/_story/Debug/myRadio.jsx

@@ -1,32 +0,0 @@
-import React, { useEffect } from 'react';
-import { Form } from '@douyinfe/semi-ui';
-const { RadioGroup, Radio } = Form;
-
-export default function MyRadio(props) {
-    const { formRef, setValue } = props;
-
-    useEffect(() => {
-        console.log('didMount inner');
-    }, []);
-
-    return (
-        <RadioGroup mode="advanced" field="radio" label="是否独占资源（Radio）" initValue={false}>
-            <div style={{ display: 'flex' }}>
-                <div
-                    style={{ width: 100, height: 100, border: '1px solid red' }} onClick={() => {
-                        formRef.current.formApi.setValue('radio', true);
-                        setValue(true);
-                    }}>
-                    <Radio value={true}>是</Radio>
-                </div>
-                <div
-                    style={{ width: 100, height: 100, border: '1px solid red' }} onClick={() => {
-                        formRef.current.formApi.setValue('radio', false);
-                        setValue(false);
-                    }}>
-                    <Radio value={false}>否</Radio>
-                </div>
-            </div>
-        </RadioGroup>
-    );
-}