refactor(Form): convert to TypeScript, impove docs and tests, close a…

…libaba-fusion#4585
FairyYang · Aug 7, 2024 · b7b001e · b7b001e
1 parent 45f1cca
commit b7b001e
Show file tree

Hide file tree

Showing 35 changed files with 2,434 additions and 2,352 deletions.
diff --git a/components/form/__docs__/demo/accessibility/index.tsx b/components/form/__docs__/demo/accessibility/index.tsx
@@ -1,22 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {
-    Form,
-    Input,
-    Select,
-    Radio,
-    Checkbox,
-    DatePicker,
-    Switch,
-    Upload,
-    Grid,
-    Field,
-} from '@alifd/next';
+import { Form, Input, Radio, Checkbox, DatePicker, Switch, Upload } from '@alifd/next';
 
 const RadioGroup = Radio.Group;
-const { Row, Col } = Grid;
 const FormItem = Form.Item;
-const Option = Select.Option;
 const formItemLayout = {
     labelCol: {
         span: 7,
@@ -26,11 +13,13 @@ const formItemLayout = {
     },
 };
 class Demo extends React.Component {
-    state = {
+    state: {
+        size: 'medium';
+    } = {
         size: 'medium',
     };
-    submitHandle = e => {
-        console.log(e);
+    submitHandle = (values: unknown) => {
+        console.log(values);
     };
     render() {
         return (

diff --git a/components/form/__docs__/demo/base/index.tsx b/components/form/__docs__/demo/base/index.tsx
@@ -1,70 +1,29 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Form, Input, Checkbox } from '@alifd/next';
+import { Form, Input, Message } from '@alifd/next';
 
-const FormItem = Form.Item;
+const Reset = Form.Reset;
 
-const formItemLayout = {
-    labelCol: {
-        fixedSpan: 8,
-    },
-    wrapperCol: {
-        span: 14,
-    },
-};
+const FormItem = Form.Item;
 
 class Demo extends React.Component {
-    handleSubmit = (values, errors) => {
+    handleSubmit = (values: { first?: string; second?: string }, errors: unknown) => {
         console.log('value & errors', values, errors);
+        Message.success('values');
     };
 
     render() {
         return (
-            <Form style={{ width: '60%' }} {...formItemLayout} colon>
-                <FormItem
-                    name="baseUser"
-                    label="Username"
-                    required
-                    requiredMessage="Please input your username!"
-                >
-                    <Input />
-                </FormItem>
-                <FormItem
-                    name="basePass"
-                    label="Password"
-                    required
-                    requiredMessage="Please input your password!"
-                >
-                    <Input.Password placeholder="Please Enter Password" />
-                </FormItem>
-                <FormItem
-                    name="email"
-                    label="Email"
-                    format="email"
-                    requiredMessage="Please input your email!"
-                >
-                    <Input placeholder="Please Enter Email" />
-                </FormItem>
-                <FormItem name="phone" label="Phone Number" format="tel">
-                    <Input placeholder="Please Enter phone number" />
-                </FormItem>
-                <FormItem name="homepage" label="Homepage" format="url">
-                    <Input defaultValue="https://" placeholder="e.g. https://www.taobao.com" />
-                </FormItem>
-                <FormItem name="agreement" label=" " colon={false}>
-                    <Checkbox defaultChecked>Agree</Checkbox>
+            <Form>
+                <FormItem>
+                    <Input name="first" defaultValue="test" />
                 </FormItem>
-                <FormItem label=" " colon={false}>
-                    <Form.Submit
-                        type="primary"
-                        validate
-                        onClick={this.handleSubmit}
-                        style={{ marginRight: 8 }}
-                    >
-                        Submit
-                    </Form.Submit>
-                    <Form.Reset>Reset</Form.Reset>
+                <FormItem>
+                    <Input name="second" />
                 </FormItem>
+                <Reset toDefault names={['first']}>
+                    click
+                </Reset>
             </Form>
         );
     }

diff --git a/components/form/__docs__/demo/custom/index.tsx b/components/form/__docs__/demo/custom/index.tsx
@@ -23,10 +23,12 @@ const label = (
 );
 
 class Demo extends React.Component {
-    state = {
+    state: {
+        labelAlign: 'top' | 'left';
+    } = {
         labelAlign: 'top',
     };
-    handleChange = v => {
+    handleChange = (v: boolean) => {
         this.setState({
             labelAlign: v ? 'left' : 'top',
         });

diff --git a/components/form/__docs__/demo/disabled/index.tsx b/components/form/__docs__/demo/disabled/index.tsx
@@ -5,8 +5,6 @@ import {
     Input,
     Switch,
     Rating,
-    Field,
-    Icon,
     Radio,
     Range,
     Checkbox,
@@ -57,7 +55,7 @@ class Demo extends React.Component {
         disabled: false,
     };
 
-    onDisabledChange = checked => {
+    onDisabledChange = (checked: boolean) => {
         this.setState({
             disabled: checked,
         });
@@ -72,7 +70,7 @@ class Demo extends React.Component {
                     style={{ maxWidth: '800px' }}
                 >
                     <FormItem label="disabled: " disabled={false} style={{ marginBottom: 0 }}>
-                        <Switch size="large" onChange={this.onDisabledChange} />
+                        <Switch onChange={this.onDisabledChange} />
                     </FormItem>
                     <div style={{ height: 1, width: '100%', margin: '20px 0' }} />
                     <FormItem name="username" required label="Username:">

diff --git a/components/form/__docs__/demo/field/index.tsx b/components/form/__docs__/demo/field/index.tsx
@@ -17,8 +17,8 @@ const formItemLayout = {
 class BasicDemo extends React.Component {
     field = new Field(this);
 
-    userExists(rule, value) {
-        return new Promise((resolve, reject) => {
+    userExists(rule: unknown, value: unknown) {
+        return new Promise<void>((resolve, reject) => {
             if (!value) {
                 resolve();
             } else {
@@ -33,15 +33,15 @@ class BasicDemo extends React.Component {
         });
     }
 
-    checkPass(rule, value, callback) {
+    checkPass(rule: unknown, value: unknown, callback: () => void) {
         const { validate } = this.field;
         if (value) {
             validate(['rePasswd']);
         }
         callback();
     }
 
-    checkPass2(rule, value, callback) {
+    checkPass2(rule: unknown, value: unknown, callback: (error?: string) => void) {
         const { getValue } = this.field;
         if (value && value !== getValue('passwd')) {
             return callback('Inconsistent password input twice!');

diff --git a/components/form/__docs__/demo/layout/index.tsx b/components/form/__docs__/demo/layout/index.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Form, Field, Input, Radio, Switch } from '@alifd/next';
 
-function handleSubmit(v) {
+function handleSubmit(v: unknown) {
     console.log(v);
 }
 
@@ -16,8 +16,10 @@ const App = () => {
         autoUnmount: false,
         values: { inline: false, labelAlign: 'left' },
     });
-    const inline = field.getValue('inline');
-    const labelAlign = inline ? 'left' : field.getValue('labelAlign');
+    const inline: boolean | undefined = field.getValue('inline');
+    const labelAlign: 'left' | 'top' | 'inset' | undefined = inline
+        ? 'left'
+        : field.getValue('labelAlign');
     const layout = inline ? {} : formItemLayout;
 
     return (

diff --git a/components/form/__docs__/demo/mix/index.tsx b/components/form/__docs__/demo/mix/index.tsx
@@ -31,7 +31,7 @@ const formItemLayout = {
 class Demo extends React.Component {
     field = new Field(this);
 
-    handleSubmit(value) {
+    handleSubmit(value: unknown) {
         console.log('Form values：', value);
     }
 
@@ -70,7 +70,7 @@ class Demo extends React.Component {
                 </FormItem>
 
                 <FormItem label="Range:" required name="range">
-                    <Range defaultValue={30} scales={[0, 100]} marks={[0, 100]} />
+                    <Range defaultValue={30} marks={[0, 100]} />
                 </FormItem>
 
                 <FormItem label="Select:" required name="select">

diff --git a/components/form/__docs__/demo/mobile/index.tsx b/components/form/__docs__/demo/mobile/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { Form, Input, Checkbox, Switch, Radio } from '@alifd/next';
+import { Form, Input, Checkbox, Radio } from '@alifd/next';
 
 const FormItem = Form.Item;
 
@@ -14,11 +14,13 @@ const formItemLayout = {
 };
 
 class Demo extends React.Component {
-    state = {
+    state: {
+        device: 'desktop' | 'tablet' | 'desktop' | 'phone';
+    } = {
         device: 'desktop',
     };
 
-    handleDeviceChange = device => {
+    handleDeviceChange = (device: string) => {
         this.setState({
             device,
         });

diff --git a/components/form/__docs__/demo/onsubmit/index.tsx b/components/form/__docs__/demo/onsubmit/index.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
+import React, { type FormEvent, Component } from 'react';
 import ReactDOM from 'react-dom';
 import { Form, Input } from '@alifd/next';
 
 const FormItem = Form.Item;
 
-class Demo extends React.Component {
-    onSubmit(e) {
+class Demo extends Component {
+    onSubmit(e: FormEvent) {
         e.preventDefault(); // form will auto submit if remove this line
         console.log('onsubmit');
     }

diff --git a/components/form/__docs__/demo/preview/index.tsx b/components/form/__docs__/demo/preview/index.tsx
@@ -5,7 +5,6 @@ import {
     Input,
     Switch,
     Rating,
-    Field,
     Icon,
     Radio,
     Range,
@@ -56,15 +55,15 @@ class Demo extends React.Component {
     state = {
         preview: false,
     };
-    submitHandler = e => {
+    submitHandler = (e: React.FormEvent) => {
         console.log(e);
     };
-    onPreviewChange = checked => {
+    onPreviewChange = (checked: boolean) => {
         this.setState({
             preview: checked,
         });
     };
-    ratingPreview = value => {
+    ratingPreview = (value: number) => {
         return (
             <p>
                 {value} {value > 2.5 ? <Icon type="smile" /> : <Icon type="cry" />}
@@ -80,7 +79,7 @@ class Demo extends React.Component {
                     style={{ maxWidth: '800px' }}
                 >
                     <FormItem label="preview: " isPreview={false} style={{ marginBottom: 0 }}>
-                        <Switch size="large" onChange={this.onPreviewChange} />
+                        <Switch onChange={this.onPreviewChange} />
                     </FormItem>
                     <div style={{ height: 1, width: '100%', margin: '20px 0' }} />
                     <FormItem name="username" required label="Username:">

diff --git a/components/form/__docs__/demo/register/index.tsx b/components/form/__docs__/demo/register/index.tsx
@@ -15,14 +15,14 @@ class Demo extends React.Component {
         second: 60,
     };
 
-    handleSubmit = (values, errors) => {
+    handleSubmit = (values: unknown, errors: unknown) => {
         if (errors) {
             return;
         }
         console.log('Get form value:', values);
     };
 
-    sendCode = (values, errors) => {
+    sendCode = (values: unknown, errors: unknown) => {
         if (errors) {
             return;
         }
@@ -32,7 +32,7 @@ class Demo extends React.Component {
 
         setInterval(() => {
             this.setState({
-                second: --this.state.second,
+                second: this.state.second - 1,
             });
         }, 1000);
     };

diff --git a/components/form/__docs__/demo/responsive-grid/index.tsx b/components/form/__docs__/demo/responsive-grid/index.tsx
@@ -1,26 +1,15 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {
-    Form,
-    Input,
-    Switch,
-    Grid,
-    Button,
-    Icon,
-    Balloon,
-    ResponsiveGrid,
-    ConfigProvider,
-    Box,
-} from '@alifd/next';
+import { Form, Input, Switch, Button, Icon, Balloon, ConfigProvider } from '@alifd/next';
 
 const FormItem = Form.Item;
-const { Row, Col } = Grid;
 
 const style = {
     padding: '20px',
     background: '#F7F8FA',
     margin: '20px',
 };
+
 const formItemLayout = {
     labelWidth: 100,
     colSpan: 4,
@@ -36,16 +25,19 @@ const label = (
 );
 
 class Demo extends React.Component {
-    state = {
+    state: {
+        labelAlign: 'top' | 'left';
+        device: 'desktop' | 'tablet' | 'phone';
+    } = {
         labelAlign: 'top',
         device: 'desktop',
     };
-    handleChange = v => {
+    handleChange = (v: boolean) => {
         this.setState({
             labelAlign: v ? 'left' : 'top',
         });
     };
-    btn = device => {
+    btn = (device: string) => {
         this.setState({
             device,
         });