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

…libaba-fusion#4585

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 (

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>
  );
  }

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',
  });

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,6 +70,7 @@ class Demo extends React.Component {
  style={{ maxWidth: '800px' }}
  >
  <FormItem label="disabled: " disabled={false} style={{ marginBottom: 0 }}>
+ {/* @ts-expect-error 不能将类型“"large"”分配给类型“"medium" | "small" | undefined” */}
  <Switch size="large" onChange={this.onDisabledChange} />
  </FormItem>
  <div style={{ height: 1, width: '100%', margin: '20px 0' }} />

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: any, value: any) {
+ 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: any, value: any, callback: any) {
  const { validate } = this.field;
  if (value) {
  validate(['rePasswd']);
  }
  callback();
  }
 
- checkPass2(rule, value, callback) {
+ checkPass2(rule: any, value: any, callback: any) {
  const { getValue } = this.field;
  if (value && value !== getValue('passwd')) {
  return callback('Inconsistent password input twice!');

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 (

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,6 +70,7 @@ class Demo extends React.Component {
  </FormItem>
 
  <FormItem label="Range:" required name="range">
+ {/* @ts-expect-error Range 上不存在scales属性 */}
  <Range defaultValue={30} scales={[0, 100]} marks={[0, 100]} />
  </FormItem>
 

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,
  });

components/form/__docs__/demo/onsubmit/index.tsx

@@ -5,7 +5,7 @@ import { Form, Input } from '@alifd/next';
 const FormItem = Form.Item;
 
 class Demo extends React.Component {
- onSubmit(e) {
+ onSubmit(e: React.FormEvent) {
  e.preventDefault(); // form will auto submit if remove this line
  console.log('onsubmit');
  }

components/form/__docs__/demo/preview/index.tsx

@@ -5,7 +5,6 @@ import {
  Input,
  Switch,
  Rating,
- Field,
  Icon,
  Radio,
  Range,
@@ -56,18 +55,18 @@ 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: React.ReactNode) => {
  return (
  <p>
- {value} {value > 2.5 ? <Icon type="smile" /> : <Icon type="cry" />}
+ {value} {(value as number) > 2.5 ? <Icon type="smile" /> : <Icon type="cry" />}
  </p>
  );
  };
@@ -80,6 +79,7 @@ class Demo extends React.Component {
  style={{ maxWidth: '800px' }}
  >
  <FormItem label="preview: " isPreview={false} style={{ marginBottom: 0 }}>
+ {/* @ts-expect-error large size is not in type */}
  <Switch size="large" onChange={this.onPreviewChange} />
  </FormItem>
  <div style={{ height: 1, width: '100%', margin: '20px 0' }} />

components/form/__docs__/demo/register/index.tsx

@@ -15,14 +15,14 @@ class Demo extends React.Component {
  second: 60,
  };
 
- handleSubmit = (values, errors) => {
+ handleSubmit = (values: any, errors: any) => {
  if (errors) {
  return;
  }
  console.log('Get form value:', values);
  };
 
- sendCode = (values, errors) => {
+ sendCode = (values: any, errors: any) => {
  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);
  };

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,
  });