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

package/form/_story/form.stories.js

@@ -1,440 +0,0 @@
-import React, { useState, useLayoutEffect, useEffect, useRef } from 'react';
-import {
-  Button,
-  Modal,
-  TreeSelect,
-  Row,
-  Col,
-  Avatar,
-  Tabs,
-  TabPane,
-  Badge,
-  Notification,
-} from '../../index';
-import {
-  Form,
-  useFormState,
-  useFormApi,
-  useFieldApi,
-  useFieldState,
-  withFormState,
-  withFormApi,
-  withField,
-  ArrayField,
-  Icon,
-} from '../../index';
-import { BasicDemoWithInit, LinkFieldForm, I18nDemo, DifferentDeclareUsage } from './demo';
-const {
-  Input,
-  Select,
-  DatePicker,
-  Switch,
-  Slider,
-  CheckboxGroup,
-  Checkbox,
-  RadioGroup,
-  Radio,
-  TimePicker,
-} = Form;
-
-import {
-  UseFormApiDemo,
-  UseFormStateDemo,
-  UseFieldApiDemo,
-  UseFieldStateDemo,
-  WithFormStateDemo,
-  WithFormApiDemo,
-  ComponentUsingFormState,
-  CustomStringify,
-} from './Hook/hookDemo';
-
-// layout
-import { LayoutDemo, InsetLabelDemo, GroupFormDemo } from './Layout/layoutDemo';
-import { AssistComponent } from './Layout/slotDemo';
-import { ModalFormDemo } from './Layout/modalFormDemo';
-
-import { WithFieldDemo, CustomFieldDemo, NumberRange } from './HOC/withFieldDemo';
-import {
-  CustomValidateDemo,
-  ValidateFieldsDemo,
-  PartValidAndResetDemo,
-  RulesValidateDemo,
-  SetBugDemo,
-  UnmountedLeafDemo,
-  RulesExample,
-} from './Validate/validateDemo';
-
-// field props
-import { ConvertDemo } from './FieldProps/convert';
-import { HelpAndExtra, ExtraPositionDemo } from './FieldProps/helpAndExtra';
-import { BigNumberFieldDemo } from './FieldProps/bigNumberFieldPath';
-import { UpdateDemo, RuleupdateDemo } from './FieldProps/rulesUpdateDemo';
-import { FieldRefDemo } from './FieldProps/fieldRef';
-import { LableOptionalDemo } from './FieldProps/labelOptional';
-
-// arrayField
-import {
-  ArrayFieldCollapseDemo,
-  ArrayFieldDemo,
-  ArrayFieldWithFormInitValues,
-  ArrayFieldWithInitValue,
-} from './DynamicField/arrayFieldDemo';
-import { NestArrayField } from './DynamicField/nestArrayField';
-import { ArrayDemo } from './FormApi/arrayDemo';
-
-// performance
-import {
-  ManyFieldDemo,
-  EffectDemo,
-  ModalFormSelectWithObject,
-} from './Performance/performanceDemo';
-import { SetValuesDemo, SetValuesWithArrayField } from './FormApi/setValuesDemo';
-import { SetValueUsingParentPath } from './FormApi/formApiDemo';
-import { FieldPathWithArrayDemo } from './Debug/bugDemo';
-import ChildDidMount from './Debug/childDidMount';
-export { default as FormSubmit } from './FormSubmit';
-
-export default {
-  title: 'Form'
-}
-
-const Option = Select.Option;
-
-export const FormDeclareUsage = () => <DifferentDeclareUsage />;
-
-FormDeclareUsage.story = {
-  name: 'Form declare usage',
-};
-
-export const BasicDemo = () => <BasicDemoWithInit />;
-
-BasicDemo.story = {
-  name: 'BasicDemo',
-};
-
-export const LayoutFormInputGroup = () => <GroupFormDemo />;
-
-LayoutFormInputGroup.story = {
-  name: 'Layout-Form.InputGroup',
-};
-
-export const LayoutFormWrapperColLabelCol = () => <LayoutDemo />;
-
-LayoutFormWrapperColLabelCol.story = {
-  name: 'Layout-Form wrapperCol/labelCol',
-};
-
-export const LayoutInsetLabel = () => <InsetLabelDemo />;
-
-LayoutInsetLabel.story = {
-  name: 'Layout-insetLabel',
-};
-
-export const LableOptional = () => <LableOptionalDemo></LableOptionalDemo>;
-
-LableOptional.story = {
-  name: 'Layout-label show optional',
-};
-
-export const LayoutSlotErrorMessageLabel = () => <AssistComponent />;
-
-LayoutSlotErrorMessageLabel.story = {
-  name: 'Layout-Slot/ErrorMessage/Label',
-};
-
-export const LayoutModalDemo = () => <ModalFormDemo />;
-
-LayoutModalDemo.story = {
-  name: 'Layout- ModalDemo',
-};
-
-export const FormApiSetValuesOverride = () => <SetValuesDemo />;
-
-FormApiSetValuesOverride.story = {
-  name: 'formApi-setValues(override)',
-};
-
-export const FormApiValidate = () => <PartValidAndResetDemo />;
-
-FormApiValidate.story = {
-  name: 'formApi-validate',
-};
-
-export const FormApiSetValueUsingFieldParentPath = () => <SetValueUsingParentPath />;
-
-FormApiSetValueUsingFieldParentPath.story = {
-  name: 'formApi-setValue using field parent path',
-};
-
-export const UseFormApiSetValueUpdateArray = () => <ArrayDemo />;
-
-UseFormApiSetValueUpdateArray.story = {
-  name: 'formApi-setValue set array',
-};
-
-export const DynamicAddRemoveField = () => (
-  <Form>
-    {({ formState }) => (
-      <React.Fragment>
-        <Input field="name" label="First name:" />
-        <RadioGroup field="married" label="Are you married?">
-          <Radio value="yes">yes</Radio>
-          <Radio value="no">no</Radio>
-        </RadioGroup>
-        {formState.values.married === 'yes' ? <Input field="spouse" label="Spouse name:" /> : null}
-        <Button htmlType="submit">Submit</Button>
-        <ComponentUsingFormState />
-      </React.Fragment>
-    )}
-  </Form>
-);
-
-DynamicAddRemoveField.story = {
-  name: 'Dynamic Add / Remove Field',
-};
-
-export const ArrayFieldBasicUsage = () => <ArrayFieldDemo />;
-
-ArrayFieldBasicUsage.story = {
-  name: 'ArrayField-basic usage',
-};
-
-export const _ArrayFieldWithFormInitValues = () => <ArrayFieldWithFormInitValues />;
-
-_ArrayFieldWithFormInitValues.story = {
-  name: 'ArrayField-with form initValues',
-};
-
-export const ArrayFieldWithArrayFieldInitValue = () => <ArrayFieldWithInitValue />;
-
-ArrayFieldWithArrayFieldInitValue.story = {
-  name: 'ArrayField-with arrayField initValue',
-};
-
-export const ArrayFieldNestUsage = () => <NestArrayField />;
-
-ArrayFieldNestUsage.story = {
-  name: 'ArrayField-Nest Usage',
-};
-
-export const _ArrayFieldCollapseDemo = () => <ArrayFieldCollapseDemo />;
-
-_ArrayFieldCollapseDemo.story = {
-  name: 'ArrayField-CollapseDemo',
-};
-
-export const LinkField = () => <LinkFieldForm />;
-
-LinkField.story = {
-  name: 'LinkField',
-};
-
-export const ValidateFormLevel = () => <ValidateFieldsDemo />;
-
-ValidateFormLevel.story = {
-  name: 'Validate-FormLevel',
-};
-
-export const ValidateFieldValel = () => <CustomValidateDemo />;
-
-ValidateFieldValel.story = {
-  name: 'Validate-FieldValel',
-};
-
-export const ValidateUseRules = () => <RulesValidateDemo />;
-
-ValidateUseRules.story = {
-  name: 'Validate-use rules',
-};
-
-export const HooksUseFormApi = () => <UseFormApiDemo />;
-
-HooksUseFormApi.story = {
-  name: 'Hooks-useFormApi',
-};
-
-export const HooksUseFormState = () => <UseFormStateDemo />;
-
-HooksUseFormState.story = {
-  name: 'Hooks-useFormState',
-};
-
-export const HooksUseFieldApi = () => <UseFieldApiDemo />;
-
-HooksUseFieldApi.story = {
-  name: 'Hooks-useFieldApi',
-};
-
-export const HooksUseFieldState = () => <UseFieldStateDemo />;
-
-HooksUseFieldState.story = {
-  name: 'Hooks-useFieldState',
-};
-
-export const HocWithFormApi = () => <WithFormApiDemo />;
-
-HocWithFormApi.story = {
-  name: 'Hoc-withFormApi',
-};
-
-export const HocWithFormState = () => <WithFormStateDemo />;
-
-HocWithFormState.story = {
-  name: 'Hoc-withFormState',
-};
-
-export const WithField = () => <CustomFieldDemo />;
-
-WithField.story = {
-  name: 'withField',
-};
-
-export const WithFieldWithStatefulComponent = () => <WithFieldDemo />;
-
-WithFieldWithStatefulComponent.story = {
-  name: 'withField- with stateful component',
-};
-
-export const WithFieldNumberRange = () => (
-  <Form onChange={v => console.log(v)}>
-    <NumberRange field="number" initValue={[1, 2]} noLabel={true}></NumberRange>
-  </Form>
-);
-
-WithFieldNumberRange.story = {
-  name: 'withField - NumberRange',
-};
-
-export const PerformanceManyField = () => <ManyFieldDemo />;
-
-PerformanceManyField.story = {
-  name: 'Performance-ManyField',
-};
-
-export const PerformanceModalFormSelectWithObject = () => <ModalFormSelectWithObject />;
-
-PerformanceModalFormSelectWithObject.story = {
-  name: 'Performance-ModalFormSelectWithObject',
-};
-
-export const FiledPropConvert = () => <ConvertDemo />;
-
-FiledPropConvert.story = {
-  name: 'Filed Prop-convert',
-};
-
-export const FiledPropHelpTextExtraTextExtraTextPosition = () => (
-  <>
-    <HelpAndExtra />
-    <ExtraPositionDemo />
-    <GroupFormDemo />
-  </>
-);
-
-FiledPropHelpTextExtraTextExtraTextPosition.story = {
-  name: 'Filed Prop-helpText / extraText / extraTextPosition',
-};
-
-export const FieldPropsDynamicUpdateRulesRequired = () => <RuleupdateDemo />;
-
-FieldPropsDynamicUpdateRulesRequired.story = {
-  name: 'Field Props-dynamic update rules.required',
-};
-
-export const FieldPropInitValue = () => <InitEmptyStringDemo />;
-
-FieldPropInitValue.story = {
-  name: 'Field Prop-initValue=""',
-};
-
-export const FieldPropBigNumberFieldSubmit = () => <BigNumberFieldDemo />;
-
-FieldPropBigNumberFieldSubmit.story = {
-  name: 'Field prop-big number field submit',
-};
-
-export const FieldPropPure = () => (
-  <Form>
-    <Form.Select
-      field="name"
-      pure
-      className="fefefe"
-      fieldClassName="feichang"
-      style={{ width: 400 }}
-    />
-  </Form>
-);
-
-FieldPropPure.story = {
-  name: 'Field Prop-pure',
-};
-
-export const FieldPropRef = () => <FieldRefDemo />;
-
-FieldPropRef.story = {
-  name: 'Field Prop-ref',
-};
-
-const InitEmptyStringDemo = () => {
-  return (
-    <Form allowEmpty>
-      <Form.Input field="name" initValue="" />
-      <ComponentUsingFormState />
-    </Form>
-  );
-};
-
-export const DebugSetBugDemo = () => (
-  <>
-    <SetBugDemo />
-    <UnmountedLeafDemo />
-  </>
-);
-
-DebugSetBugDemo.story = {
-  name: 'Debug-SetBugDemo',
-};
-
-export const DebugSetValuesWithArrayField = () => (
-  <>
-    <SetValuesWithArrayField />
-  </>
-);
-
-DebugSetValuesWithArrayField.story = {
-  name: 'Debug-SetValuesWithArrayField',
-};
-
-import { SetValuesArray, DoubleRerender } from './Debug/bugDemo';
-
-export const DebugArrayFieldPath = () => <FieldPathWithArrayDemo />;
-
-DebugArrayFieldPath.story = {
-  name: 'Debug-数组类fieldPath',
-};
-
-export const DebugSetValuesDemo = () => (
-  <>
-    <SetValuesArray />
-  </>
-);
-
-DebugSetValuesDemo.story = {
-  name: 'Debug-SetValuesDemo',
-};
-
-export const DebugRerenderTwice = () => (
-  <>
-    <DoubleRerender />
-  </>
-);
-
-DebugRerenderTwice.story = {
-  name: 'Debug-RerenderTwice',
-};
-
-export const _ChildDidMount = () => <ChildDidMount />;
-
-_ChildDidMount.story = {
-  name: 'child did mount',
-};

package/form/_story/form.stories.tsx

@@ -1,191 +0,0 @@
-import React, { FunctionComponent } from 'react';
-import { storiesOf } from '@storybook/react';
-import { Form, useFormState, useFormApi, withField, Input, Button, Upload } from '../../index';
-import { values } from 'lodash';
-const stories = storiesOf('Form', module);
-
-import { FormApi, FormFCChild } from '../interface';
-
-const treeData = [
-    {
-        label: '浙江省',
-        value: 'zhejiang',
-        key: '0',
-        children: [
-            {
-                label: '杭州市',
-                value: 'hangzhou',
-                key: '0-0',
-                children: [
-                    {
-                        label: '西湖区',
-                        value: 'xihu',
-                        key: '0-0-0',
-                    },
-                    {
-                        label: '萧山区',
-                        value: 'xiaoshan',
-                        key: '0-0-1',
-                    },
-                    {
-                        label: '临安区',
-                        value: 'linan',
-                        key: '0-0-2',
-                    },
-                ],
-            },
-            {
-                label: '宁波市',
-                value: 'ningbo',
-                key: '0-1',
-                children: [
-                    {
-                        label: '海曙区',
-                        value: 'haishu',
-                        key: '0-1-0',
-                    },
-                    {
-                        label: '江北区',
-                        value: 'jiangbei',
-                        key: '0-1-1',
-                    },
-                ],
-            },
-        ],
-    },
-];
-
-const htmlInput = (props: any) => {
-    let value = props.value || '';
-    delete props.validateStatus; // prevent props being transparently transmitted to DOM
-    return <input {...props} value={value} />;
-};
-
-const FieldB = withField(Input);
-const FieldA = withField(htmlInput, { valueKey: 'value', onKeyChangeFnName: 'onChange', valuePath: 'target.value' });
-
-const Fields: FunctionComponent<FormFCChild> = ({ formState, values, formApi }) => {
-    const ref = React.useRef();
-    return (
-    <>
-        <Form.Rating field='test' className='fe' count={2} ref={ref}  />
-
-        <Form.Input field='test'  ref={ref}  />
-        <Input size='default' showClear insetLabel />
-        <FieldB insetLabel placeholder='fe' fieldClassName='fefe' field='custom' />
-
-        <Button onClick={() => formApi.setValue('fieldA', 'fe')}>set</Button>
-        <Form.Select field='test' ref={ref}>
-            <Form.Select.Option value="f1"></Form.Select.Option>
-            <Form.Select.Option value="f2"></Form.Select.Option>
-        </Form.Select>
-        <Form.Input field="UserName" label="用户名" ref={ref} />
-        <Form.TextArea field="textarea" onKeyDown={(v: any) => console.log(v)}  ref={ref}  />
-        <Form.Input field="Password" label="密码" />
-        <Form.InputNumber field="number"  ref={ref} />
-        <Form.Rating field="rating" />
-        <Form.Switch field="switch" checkedText="on" uncheckedText="off"  ref={ref} />
-
-        <Form.Cascader
-            placeholder="请选择所在地区"
-            field="area"
-            ref={ref} 
-            label={{ text: '123', required: true, extra: 123 }}
-            treeData={treeData}
-        ></Form.Cascader>
-        <Form.TimePicker field="time" minuteStep={2} ref={ref} />
-        <Form.AutoComplete field="fe" />
-
-        <Form.TreeSelect field="treeSelect" treeData={treeData} ref={ref} />
-        <Form.Slider field="slider" ref={ref}  />
-        <Form.DatePicker field="datepicker" ref={ref} />
-        <Form.CheckboxGroup
-            field="type"
-            ref={ref} 
-            label="申请类型（CheckboxGroup）"
-            initValue={['user', 'admin']}
-            rules={[{ required: true }]}
-        >
-            <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.RadioGroup
-            field="radio"
-            ref={ref} 
-            label="是否独占资源（Radio）"
-            rules={[{ type: 'boolean' }, { required: true, message: '必须选择是否独占 ' }]}
-        >
-            <Form.Radio value={1}>是</Form.Radio>
-            <Form.Radio value={0}>否</Form.Radio>
-        </Form.RadioGroup>
-        <Form.Checkbox field='abc' noLabel>
-            我已阅读并清楚相关规定（Checkbox）
-        </Form.Checkbox>
-        <Form.Label text="fe" required />
-        <Form.ErrorMessage error="errorText" />
-        <FieldB field="custom" />
-        <FieldA field="cuB" />
-        <Form.TagInput field='tagInput' ref={ref} ></Form.TagInput>
-        <Form.Upload ref={ref} fileName='semi' action='https://test.com' field='file' />
-        <Form.Slot />
-        <code style={{ marginTop: 30 }}>{JSON.stringify(formState)}</code>
-    </>
-    )
-};
-
-stories.add('Form', () => <Form>{Fields}</Form>);
-
-
-
-interface IProps {
-    [x:string]: any;
-}
-interface IState {
-    visible: boolean;
-}
-
-interface FData {
-    test: boolean;
-    test2: boolean;
-    test3: string;
-    // [x: string]: unknown;
-}
-class Demo extends React.Component<IProps, IState> {
-    constructor(props:any) {
-      super(props);
-      this.state = { visible: false};
-    }
-
-    getFormApi(formApi: FormApi<FData>) {
-        formApi.getValue()
-    }
-
-    render() {
-      const { visible } = this.state;
-      return (
-        <>
-          <Form getFormApi={this.getFormApi}>
-
-          </Form>
-        </>
-      );
-    }
-  }
-
-
-
-stories.add('Form render', () => <Form render={({values, formApi, formState}) => <div></div>}></Form>);
-
-
-stories.add('Form children', () => <Form>
-    {({ formState, formApi, values }) => (
-        <>
-        <Form.Input field='fe'>
-        </Form.Input>
-        <Form.DatePicker field='role'/>
-        </>
-        )
-    }
-</Form>);