refactor(Field): convert to TypeScript, impove docs and tests

alibaba-fusion · Jan 31, 2024 · 64ac384 · 64ac384
1 parent 63dec10
commit 64ac384
Show file tree

Hide file tree

Showing 16 changed files with 432 additions and 525 deletions.
diff --git a/components/field/__docs__/demo/custom/index.tsx b/components/field/__docs__/demo/custom/index.tsx
@@ -2,8 +2,16 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Button, Field } from '@alifd/next';
 
-class Custom extends React.Component {
-    constructor(props) {
+interface CustomProps {
+    value?: any[];
+    onChange?: (value: any[]) => void;
+}
+
+interface CustomState {
+    value: any[];
+}
+class Custom extends React.Component<CustomProps, CustomState> {
+    constructor(props: CustomProps) {
         super(props);
 
         this.state = {
@@ -12,7 +20,7 @@ class Custom extends React.Component {
     }
 
     // update value
-    componentWillReceiveProps(nextProps) {
+    componentWillReceiveProps(nextProps: CustomProps) {
         if ('value' in nextProps) {
             this.setState({
                 value: typeof nextProps.value === 'undefined' ? [] : nextProps.value,
@@ -27,7 +35,7 @@ class Custom extends React.Component {
         this.setState({
             value,
         });
-        this.props.onChange(value);
+        this.props?.onChange?.(value);
     };
 
     render() {
@@ -47,6 +55,7 @@ class Custom extends React.Component {
 /* eslint-disable react/no-multi-comp */
 class App extends React.Component {
     field = new Field(this, {
+        // @ts-expect-error FieldOption has no property 'deepReset'
         deepReset: true,
     });
 

diff --git a/components/field/__docs__/demo/dynamic/index.tsx b/components/field/__docs__/demo/dynamic/index.tsx
@@ -2,8 +2,12 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Button, Input, Table, Field } from '@alifd/next';
 
-class Demo extends React.Component {
-    constructor(props) {
+interface ValueItem {
+    id: number;
+    input: number;
+}
+class Demo extends React.Component<unknown> {
+    constructor(props: unknown) {
         super(props);
 
         this.idx = 3;
@@ -17,23 +21,27 @@ class Demo extends React.Component {
             },
         });
     }
+    field: Field;
+    idx: number;
 
     getValues = () => {
         const values = this.field.getValues();
         console.log(values);
     };
 
-    addItem(index) {
+    addItem(index: number) {
         ++this.idx;
         this.field.addArrayValue('name', index, { id: this.idx, input: this.idx });
     }
 
-    removeItem(index) {
+    removeItem(index: number) {
         this.field.deleteArrayValue('name', index);
     }
 
-    input = (value, index) => <Input {...this.field.init(`name.${index}.input`)} />;
-    op = (value, index) => {
+    input = (value: unknown, index: number) => (
+        <Input {...this.field.init(`name.${index}.input`)} />
+    );
+    op = (value: unknown, index: number) => {
         return (
             <span>
                 <Button type="primary" onClick={this.addItem.bind(this, index + 1)}>
@@ -51,7 +59,7 @@ class Demo extends React.Component {
     };
 
     render() {
-        const dataSource = this.field.getValue('name');
+        const dataSource = this.field.getValue<ValueItem[]>('name');
         return (
             <div>
                 <Table dataSource={dataSource}>

diff --git a/components/field/__docs__/demo/hooks/index.tsx b/components/field/__docs__/demo/hooks/index.tsx
@@ -3,9 +3,9 @@ import React from 'react';
 import { Input, Button, Field } from '@alifd/next';
 
 function App() {
-    const field = Field.useField();
+    const field = Field.useField() as Field;
 
-    const { init, setValue, reset, getError } = field;
+    const { init, getError } = field;
 
     function onGetValue() {
         console.log(field.getValue('input'));

diff --git a/components/field/__docs__/demo/mix/index.tsx b/components/field/__docs__/demo/mix/index.tsx
@@ -68,6 +68,7 @@ class App extends React.Component {
                 <Range
                     style={{ ...layout, marginTop: 30 }}
                     slider={'double'}
+                    /* @ts-expect-error Range is not been refractor */
                     scales={10}
                     marks={10}
                     {...init('range', { initValue: [20, 40] })}

diff --git a/components/field/__docs__/demo/onchange/index.tsx b/components/field/__docs__/demo/onchange/index.tsx
@@ -49,6 +49,7 @@ class App extends React.Component {
                     <Range
                         style={{ ...layout, marginTop: 30 }}
                         slider={'double'}
+                        /* @ts-expect-error Range is not been refractor */
                         scales={10}
                         marks={10}
                         {...init('range', { initValue: [20, 40], trigger: 'onProcess' })}

diff --git a/components/field/__docs__/demo/redux/index.tsx b/components/field/__docs__/demo/redux/index.tsx
@@ -5,7 +5,10 @@ import { Input, Button, Field } from '@alifd/next';
 import { combineReducers, createStore } from 'redux';
 import { Provider, connect } from 'react-redux';
 
-function formReducer(state = { email: '[email protected]' }, action) {
+function formReducer(
+    state = { email: '[email protected]' },
+    action: { type: string; payload: { [key: string]: string } }
+) {
     switch (action.type) {
         case 'save_fields':
             return {
@@ -17,8 +20,13 @@ function formReducer(state = { email: '[email protected]' }, action) {
     }
 }
 
-class Demo extends React.Component {
-    componentWillReceiveProps(nextProps) {
+interface DemoProps {
+    email: string;
+    dispatch: (action: { type: string; payload: { [key: string]: string } }) => void;
+}
+
+class Demo extends React.Component<DemoProps> {
+    componentWillReceiveProps(nextProps: DemoProps) {
         this.field.setValues({
             email: nextProps.email,
             newlen: nextProps.email.length,
@@ -71,7 +79,7 @@ class Demo extends React.Component {
     }
 }
 
-const ReduxDemo = connect(state => {
+const ReduxDemo = connect((state: { formReducer: { email: string } }) => {
     return {
         email: state.formReducer.email,
     };

diff --git a/components/field/__docs__/demo/validator/index.tsx b/components/field/__docs__/demo/validator/index.tsx
@@ -19,21 +19,22 @@ const list = [
     },
 ];
 
+type callbackInterface = (message?: string) => void;
 class App extends React.Component {
     state = {
         checkboxStatus: true,
     };
     field = new Field(this, { scrollToFirstError: -10 });
 
-    isChecked(rule, value, callback) {
+    isChecked(rule: unknown, value: unknown, callback: callbackInterface) {
         if (!value) {
             return callback('consent agreement not checked ');
         } else {
             return callback();
         }
     }
 
-    userName(rule, value, callback) {
+    userName(rule: unknown, value: string, callback: callbackInterface) {
         if (value === 'frank') {
             setTimeout(() => callback('name existed'), 200);
         } else {
@@ -48,7 +49,9 @@ class App extends React.Component {
             <div className="demo">
                 <Input {...init('input', { initValue: 'delete all', rules: { required: true } })} />
                 {this.field.getError('input') ? (
-                    <span style={{ color: 'red' }}>{this.field.getError('input').join(',')}</span>
+                    <span style={{ color: 'red' }}>
+                        {(this.field.getError('input') as string[]).join(',')}
+                    </span>
                 ) : (
                     ''
                 )}
@@ -67,7 +70,9 @@ class App extends React.Component {
                     })}
                 />
                 {this.field.getError('input1') ? (
-                    <span style={{ color: 'red' }}>{this.field.getError('input1').join(',')}</span>
+                    <span style={{ color: 'red' }}>
+                        {(this.field.getError('input1') as string[]).join(',')}
+                    </span>
                 ) : (
                     ''
                 )}
@@ -85,10 +90,11 @@ class App extends React.Component {
                         ],
                     })}
                 />
+                {/* @ts-expect-error @alifd/next error */}
                 {this.field.getState('username') === 'loading' ? 'validating...' : ''}
                 {this.field.getError('username') ? (
                     <span style={{ color: 'red' }}>
-                        {this.field.getError('username').join(',')}
+                        {(this.field.getError('username') as string[]).join(',')}
                     </span>
                 ) : (
                     ''
@@ -104,7 +110,7 @@ class App extends React.Component {
                 />
                 {this.field.getError('checkbox') ? (
                     <span style={{ color: 'red' }}>
-                        {this.field.getError('checkbox').join(',')}
+                        {(this.field.getError('checkbox') as string[]).join(',')}
                     </span>
                 ) : (
                     ''
@@ -125,7 +131,7 @@ class App extends React.Component {
                 />
                 {this.field.getError('textarea') ? (
                     <span style={{ color: 'red' }}>
-                        {this.field.getError('textarea').join(',')}
+                        {(this.field.getError('textarea') as string[]).join(',')}
                     </span>
                 ) : (
                     ''
@@ -150,7 +156,7 @@ class App extends React.Component {
                         />
                         {this.field.getError('checkboxgroup') ? (
                             <span style={{ color: 'red' }}>
-                                {this.field.getError('checkboxgroup').join(',')}
+                                {(this.field.getError('checkboxgroup') as string[]).join(',')}
                             </span>
                         ) : (
                             ''

diff --git a/components/field/__docs__/demo/validatorPromise/index.tsx b/components/field/__docs__/demo/validatorPromise/index.tsx
@@ -25,15 +25,15 @@ class App extends React.Component {
     };
     field = new Field(this, { scrollToFirstError: -10 });
 
-    isChecked(rule, value) {
+    isChecked(rule: unknown, value: string) {
         if (!value) {
             return Promise.reject('consent agreement not checked ');
         } else {
             return Promise.resolve(null);
         }
     }
 
-    userName(rule, value) {
+    userName(rule: unknown, value: string) {
         if (value === 'frank') {
             return new Promise((resolve, reject) => {
                 setTimeout(() => reject('name existed'), 200);
@@ -62,10 +62,11 @@ class App extends React.Component {
                         ],
                     })}
                 />
+                {/* @ts-expect-error @alifd/next state is error */}
                 {this.field.getState('username') === 'loading' ? 'validating...' : ''}
                 {this.field.getError('username') ? (
                     <span style={{ color: 'red' }}>
-                        {this.field.getError('username').join(',')}
+                        {(this.field.getError('username') as string[]).join(',')}
                     </span>
                 ) : (
                     ''
@@ -81,7 +82,7 @@ class App extends React.Component {
                 />
                 {this.field.getError('checkbox') ? (
                     <span style={{ color: 'red' }}>
-                        {this.field.getError('checkbox').join(',')}
+                        {(this.field.getError('checkbox') as string[]).join(',')}
                     </span>
                 ) : (
                     ''

diff --git a/components/field/__docs__/demo/watch/index.tsx b/components/field/__docs__/demo/watch/index.tsx
@@ -69,7 +69,7 @@ class ClassApp extends Component<unknown, { showInput: boolean }> {
 
 function FunctionApp() {
     const [showInput, setShowInput] = useState(false);
-    const field = Field.useField();
+    const field = Field.useField() as Field;
     Field.useWatch(field, ['switch', 'input'], (name, value, oldValue, triggerType) => {
         console.group('[detect change]');
         console.log('name: ', name);
@@ -79,7 +79,7 @@ function FunctionApp() {
 
         if (name === 'switch') {
             // use switch value to control showInput
-            setShowInput(value);
+            setShowInput(value as boolean);
         }
     });