test: update form test demo

packages/semi-ui/form/_story/Validate/validateDemo.jsx

@@ -478,7 +478,7 @@ class RaceAsyncDemo extends React.Component {
                 />
                 <Form.Input
                     field='nick'
-                    label='props.validate ract async validate'
+                    label='props.validate race async validate'
                     validate={this.asyncValidate}
                     trigger='blur'
                 />

packages/semi-ui/form/_story/Validate/validateWithUnmount.jsx

@@ -0,0 +1,67 @@
+import { Button, Form, Toast, Switch } from '@douyinfe/semi-ui';
+import React, { useCallback, useRef, useState } from 'react';
+
+const UnmountValidate = () => {
+    const formRef = useRef();
+    const [showInput, setShowInput] = useState(true);
+    const [t, setT] = useState('xxxx');
+
+    const test = useCallback(() => {
+        setShowInput(false);
+        setTimeout(() => {
+            console.log('100ms, show input');
+            setShowInput(true);
+        }, 100);
+    }, []);
+
+    return (
+        <Form layout="horizontal" onValueChange={values => console.log(values)} ref={formRef}>
+            {({ formState, values, formApi }) => (
+                <>
+                    <Switch value={showInput} onChange={e => setShowInput(e)}></Switch>
+                    {JSON.stringify(formState)}
+                    {/* <Button
+                        onClick={() => {
+                            formRef.current.formApi.setError('input', `error by formApi${Math.random()}`);
+                        }}
+                    >
+                        formApi setError
+                    </Button> */}
+                    {showInput && (
+                        <Form.Input
+                            label="输入te，然后组件会被卸载然后再挂载。卸载前触发的校验，异步结果后也不应该被写入"
+                            field="input"
+                            rules={[
+                                {
+                                    asyncValidator: (_, value) =>
+                                        new Promise((resolve, reject) => {
+                                            console.log('asyncValidator');
+                                            // 测试
+                                            if (value === 'te') {
+                                                test();
+                                            }
+                                            if (value === 'ggg') {
+                                                reject('这也是一个error值');
+                                            }
+                                            setTimeout(() => {
+                                                if (value === 'te') {
+                                                    console.log('asyncValidator reject');
+                                                    debugger;
+                                                    reject('不能输入 te（该错误返回时，组件已被卸载后重新挂载，旧的校验不应该再被写入）');
+                                                } else {
+                                                    console.log('asyncValidator resolve');
+                                                    resolve();
+                                                }
+                                            }, 1000);
+                                        }),
+                                },
+                            ]}
+                        />
+                    )}
+                </>
+            )}
+        </Form>
+    );
+};
+
+export default UnmountValidate;

packages/semi-ui/form/_story/form.stories.jsx

@@ -1,24 +1,17 @@
 import React, { useState, useLayoutEffect, useEffect, useRef } from 'react';
-import {
-  Button,
-} from '../../index';
 import {
   Form,
+  Button,
 } from '../../index';
 import { BasicDemoWithInit, LinkFieldForm, DifferentDeclareUsage } from './demo';
-const {
-  Input,
-  Select,
-  DatePicker,
-  Switch,
-  Slider,
-  CheckboxGroup,
-  Checkbox,
-  RadioGroup,
-  Radio,
-  TimePicker,
-} = Form;
 
+
+// layout
+import { LayoutDemo, InsetLabelDemo } from './Layout/layoutDemo';
+import { AssistComponent } from './Layout/slotDemo';
+import { ModalFormDemo } from './Layout/modalFormDemo';
+
+// hooks + HOC
 import {
   UseFormApiDemo,
   UseFormStateDemo,
@@ -29,13 +22,9 @@ import {
   ComponentUsingFormState,
   CustomStringify,
 } from './Hook/hookDemo';
-
-// layout
-import { LayoutDemo, InsetLabelDemo } from './Layout/layoutDemo';
-import { AssistComponent } from './Layout/slotDemo';
-import { ModalFormDemo } from './Layout/modalFormDemo';
-
 import { WithFieldDemo, CustomFieldDemo, NumberRange } from './HOC/withFieldDemo';
+
+// validate
 import {
   CustomValidateDemo,
   ValidateFieldsDemo,
@@ -47,6 +36,7 @@ import {
   RaceAsyncDemo,
 } from './Validate/validateDemo';
 import { TriggerDemo } from './Validate/TriggerAndStopValidateWithError';
+import UnmountValidateDemo from './Validate/validateWithUnmount';
 
 // field props
 import { ConvertDemo } from './FieldProps/convert';
@@ -85,79 +75,49 @@ import ChildDidMount from './Debug/childDidMount';
 export { default as FormSubmit } from './FormSubmit';
 export { default as TabelForm } from './TableDemo';
 
+const {
+  Input,
+  Select,
+  DatePicker,
+  Switch,
+  Slider,
+  CheckboxGroup,
+  Checkbox,
+  RadioGroup,
+  Radio,
+  TimePicker,
+} = Form;
+
 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',
-};
-
+// Layout-Form wrapperCol/labelCol
+// Layout-insetLabel
+// Layout-label show optional
+// Layout-Slot/ErrorMessage/Label
+// Layout- ModalDemo
 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',
-};
-
+// formApi-setValues(override)
+// formApi-validate
+// formApi-setValue using field parent path
+// formApi-setValue set array
 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',
-};
-
+// Dynamic Add / Remove Field
 export const DynamicAddRemoveField = () => (
   <Form>
     {({ formState }) => (
@@ -175,125 +135,52 @@ export const DynamicAddRemoveField = () => (
   </Form>
 );
 
-DynamicAddRemoveField.story = {
-  name: 'Dynamic Add / Remove Field',
-};
 
+// ArrayField-basic usage
+// ArrayField-with form initValues
+// ArrayField-with arrayField initValue
+// ArrayField-setValues didMount
+// ArrayField-Nest Usage
+// ArrayField-CollapseDemo
 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 ArrayFieldSetValuesDemo = () => <ArrayFieldSetValues />;
-ArrayFieldSetValuesDemo.story ={
-  name: 'ArrayField-setValues didMount'
-}
-
 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',
-};
-
+// Valdiate-FormLevel
+// Validate-FieldLevel
+// Validate-FieldLevel-use rules
+// Validate-FieldLevel-race async
 export const ValidateFormLevel = () => <ValidateFieldsDemo />;
-
-ValidateFormLevel.story = {
-  name: 'Validate-FormLevel',
-};
-
-export const ValidateFieldValel = () => <CustomValidateDemo />;
-
-ValidateFieldValel.story = {
-  name: 'Validate-FieldValel',
-};
-
+export const ValidateFieldLevel = () => <CustomValidateDemo />;
 export const ValidateUseRules = () => <RulesValidateDemo />;
-
-ValidateUseRules.story = {
-  name: 'Validate-use rules',
-};
-
-
 export const RaceAsync = () => <RaceAsyncDemo />;
-RaceAsyncDemo.story = {
-  name: 'Validate - race async'
-}
+export const UnmountValidate = () => <UnmountValidateDemo />;
 
 export const Trigger = () => <TriggerDemo></TriggerDemo>;
 
+// Hooks-useFormApi
+// Hooks-useFormState
+// Hooks-useFormState
+// Hooks-useFieldApi
+// Hooks-useFieldState
+// Hooks-withFormApi
+// Hooks-withFormState
+// withField
+// 
 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>
@@ -449,4 +336,5 @@ export const _ChildDidMount = () => <ChildDidMount />;
 
 _ChildDidMount.story = {
   name: 'child did mount',
-};
+};
+