fix(Form): 纠正ts类型

ChenlingasMx · ChenlingasMx · commit 43ec537e0095 · 2022-09-24T16:12:27.000+08:00
diff --git a/example/examples/src/routes/Form/index.tsx b/example/examples/src/routes/Form/index.tsx
@@ -1,4 +1,4 @@
-import React, {useState} from 'react';
+import React, {useState, useRef} from 'react';
 import {Form, Button, Toast, Slider, Flex} from '@uiw/react-native';
 import {Text, View} from 'react-native';
 import Layout, {Container} from '../../Layout';
@@ -13,15 +13,8 @@ interface actionProps {
 }
 
 const FormDemo = () => {
-  const form = Form.useForm({
-    changeValidate: true,
-    watch: {
-      name: (value: unknown) => console.log('value', value),
-    },
-    customComponentList: {
-      render: <Slider />,
-    },
-  });
+  const form = Form.useForm();
+  const ref = useRef();
   const [state, setStore] = useState({});
 
   const schema = [
@@ -170,7 +163,18 @@ const FormDemo = () => {
     <Container>
       <Layout>
         <Body>
-          <Form form={form} schema={schema} initialValues={{name: '王滴滴', rate: 4}} />
+          <Form
+            form={form}
+            schema={schema}
+            initialValues={{name: '王滴滴', rate: 4}}
+            watch={{
+              name: (value: unknown) => console.log('value', value),
+            }}
+            customComponentList={{
+              render: <Slider />,
+            }}
+            changeValidate={true}
+          />
           <View>
             <Text>{JSON.stringify(state)}</Text>
           </View>
diff --git a/packages/core/src/Form/README.md b/packages/core/src/Form/README.md
@@ -37,9 +37,7 @@ import {  SafeAreaView,Toast } from 'react-native';
 import { Form } from '@uiw/react-native';
 
 const FormDemo = () => {
-  const form = Form.useForm({
-    changeValidate: true,
-  });
+  const form = Form.useForm();
   const initialValues = {name: ''};
   const items = [
     {
@@ -78,12 +76,10 @@ import { SafeAreaView,Toast,Slider } from 'react-native';
 import { Form } from '@uiw/react-native';
 
 const FormDemo = () => {
-  const form = Form.useForm({
-    changeValidate: true,
-    customComponentList: {
+  const form = Form.useForm();
+  const customComponentList = {
       render: <Slider />,
-    },
-  });
+  }
   const initialValues = {name: ''};
   const items = [
     {
@@ -100,7 +96,7 @@ const FormDemo = () => {
   ];
   return (
     <SafeAreaView>
-      <Form form={form} schema={items} initialValues={initialValues} />
+      <Form form={form} schema={items} changeValidate={true} customComponentList={customComponentList} initialValues={initialValues} />
     </SafeAreaView>
   );
 };
@@ -115,14 +111,10 @@ import { SafeAreaView,Toast } from 'react-native';
 import { Form } from '@uiw/react-native';
 
 const FormDemo = () => {
-  const form = Form.useForm({
-    changeValidate: true,
-    watch: {
-      name: (value: unknown) => {
-        console.log('value', value);
-      },
-    }
-  });
+  const form = Form.useForm();
+  const watch = {
+    name: (value) => console.log('value', value)
+  }
   const initialValues = {name: ''};
   const items = [
     {
@@ -134,7 +126,7 @@ const FormDemo = () => {
   ];
   return (
     <SafeAreaView>
-      <Form form={form} schema={items} initialValues={initialValues} />
+      <Form form={form} schema={items} watch={watch} initialValues={initialValues} />
     </SafeAreaView>
   );
 };
@@ -154,9 +146,7 @@ import { SafeAreaView,View,Text } from 'react-native';
 import { Form,Button,Flex } from '@uiw/react-native';
 
 const FormDemo = () => {
-  const form = Form.useForm({
-    changeValidate: true,
-  });
+  const form = Form.useForm();
   const initialValues = {name: ''};
   const items = [
     {
@@ -177,7 +167,7 @@ const FormDemo = () => {
           </Flex>
         </View>
       ),
-      renderAdd: ({add}: {add: () => void}) => (
+      renderAdd: ({ add }) => (
         <View style={{marginTop: 12}}>
           <Button onPress={() => add()} type="primary" size="default" bordered={false}>
             新增数据
@@ -225,7 +215,13 @@ interface FormProps<FormData = any, FieldValue = FormData[keyof FormData], Field
   /**
    * 支持默认和卡片两种模式
   */
-  mode?:'default' | 'card'
+  mode?:'default' | 'card';
+  // 表单是否在onChange时进行验证
+  changeValidate?: boolean;
+  // 监听表单字段变化
+  watch?: Partial<Record<string, (value: unknown) => void>>;
+  // 自定义组件
+  customComponentList?: Partial<Record<string, JSX.Element>>;
 }
 ```
 
@@ -240,7 +236,7 @@ interface FormItemsProps {
   name: string;
   // 验证规则
   validate?: RulesOption['validate'];
-  options?: Array<{ label: string; value: KeyType | any }>;
+  options?: Array<{ label: string; value: KeyType }>;
   // 表单控件props
   attr?: any;
   // 展示是否必填
@@ -283,3 +279,5 @@ type FormInstance<FormData = any, FieldValue = FormData[keyof FormData], FieldKe
 };
 ```
 
+
+
diff --git a/packages/core/src/Form/comps/container.tsx b/packages/core/src/Form/comps/container.tsx
@@ -3,7 +3,7 @@ import Card from '../../Card';
 import { SafeAreaView } from 'react-native';
 import styles from '../styles';
 
-const Container = ({ mode, children }: { mode: 'card' | 'default'; children?: JSX.Element }) => {
+const Container = ({ mode, children }: { mode: 'card' | 'default'; children?: React.ReactNode }) => {
   return mode === 'card' ? <Card>{children}</Card> : <SafeAreaView style={styles.warpper}>{children}</SafeAreaView>;
 };
 
diff --git a/packages/core/src/Form/form.tsx b/packages/core/src/Form/form.tsx
@@ -3,22 +3,35 @@ import FormItems from './formItems';
 import { Provider } from './hooks/context';
 import { FormProps, KeyType } from './types';
 import { cloneDeep } from './utils';
+import TextArea from '../TextArea';
+import Slider from '../Slider';
+import SearchBar from '../SearchBar';
+import Stepper from '../Stepper';
+import Input from './comps/input';
+import Rating from './comps/rate';
+import Radio from './comps/radio';
+import Switch from './comps/switch';
+import CheckBox from './comps/checkBox';
 
-const Form = <
-  FormData extends unknown = any,
-  FieldValue = FormData[keyof FormData],
-  FieldKey extends KeyType = keyof FormData,
->(
-  baseProps: FormProps,
-) => {
-  const { schema, form, initialValues = {}, mode = 'default' } = baseProps;
+const Form = (baseProps: FormProps) => {
+  const {
+    schema,
+    form,
+    initialValues = {},
+    mode = 'default',
+    watch,
+    customComponentList = {},
+    changeValidate = false,
+  } = baseProps;
 
   const isMount = useRef<boolean>();
 
   const innerMethods = form.getInnerMethods(true);
 
   useEffect(() => {
-    if (!isMount.current) innerMethods.updateStore({ initialValues: cloneDeep(initialValues), store: initialValues });
+    if (!isMount.current) {
+      innerMethods.updateStore({ initialValues: cloneDeep(initialValues), store: initialValues });
+    }
   }, []);
 
   useEffect(() => {
@@ -28,6 +41,20 @@ const Form = <
   const contextProps = {
     innerMethods: innerMethods,
     mode: mode,
+    watch: watch,
+    customComponentList: {
+      ...customComponentList,
+      input: <Input />,
+      textArea: <TextArea />,
+      slider: <Slider />,
+      rate: <Rating disabled={false} />,
+      radio: <Radio />,
+      search: <SearchBar />,
+      switch: <Switch />,
+      checkBox: <CheckBox />,
+      stepper: <Stepper value={0} onChange={() => {}} />,
+    },
+    changeValidate: changeValidate,
   };
 
   return (
diff --git a/packages/core/src/Form/formItems.tsx b/packages/core/src/Form/formItems.tsx
@@ -1,5 +1,5 @@
-import React, { FC, useContext } from 'react';
-import { KeyType, FormItemsProps } from './types';
+import React, { useContext } from 'react';
+import { KeyType, FormItemsProps, FormProps } from './types';
 import { isObjectEmpty } from './utils/is';
 import { Context } from './hooks/context';
 import Label from './comps/label';
@@ -9,10 +9,13 @@ import Container from './comps/container';
 import { View } from 'react-native';
 import styles from './styles';
 
-const FormItems: FC<any> = ({ schema = [] }) => {
+const FormItems = ({ schema = [] }: Pick<FormProps, 'schema'>) => {
   const {
     mode,
-    innerMethods: { store = {}, updateStore, innerValidate, watch, customComponentList, initialValues },
+    innerMethods: { store = {}, updateStore, innerValidate },
+    watch,
+    customComponentList,
+    changeValidate,
   } = useContext(Context);
 
   const change = (field: KeyType, value: unknown) => {
@@ -33,15 +36,15 @@ const FormItems: FC<any> = ({ schema = [] }) => {
             value: store[v.field],
             onChange: (value: unknown) => {
               change(v.field, value);
-              innerValidate();
+              if (changeValidate) innerValidate();
             },
           })
         : null;
     }
     return null;
   };
 
-  const _render = (): JSX.Element => {
+  const _render = () => {
     return schema.map((v: FormItemsProps, i: number) => {
       const last = schema.length - 1 === i;
       if (v.hide) {
diff --git a/packages/core/src/Form/formList.tsx b/packages/core/src/Form/formList.tsx
@@ -20,7 +20,8 @@ const FormList = ({
   },
 }: FormListProps) => {
   const {
-    innerMethods: { store = {}, updateStore, customComponentList },
+    innerMethods: { store = {}, updateStore },
+    customComponentList,
   } = useContext(Context);
 
   const { field, items = [], renderAdd, renderHeader } = formListValue;
diff --git a/packages/core/src/Form/hooks/useForm.tsx b/packages/core/src/Form/hooks/useForm.tsx
@@ -1,18 +1,9 @@
-import React from 'react';
+import { useRef } from 'react';
 import { KeyType, InnerMethodsReturnType, FormInstance } from '../types';
 import { useState } from 'react';
 import { useValidator } from '@validator.tool/hook';
 import { isObjectEmpty } from '../utils/is';
 import { cloneDeep } from '../utils';
-import TextArea from '../../TextArea';
-import Slider from '../../Slider';
-import SearchBar from '../../SearchBar';
-import Stepper from '../../Stepper';
-import Input from '../comps/input';
-import Rating from '../comps/rate';
-import Radio from '../comps/radio';
-import Switch from '../comps/switch';
-import CheckBox from '../comps/checkBox';
 
 type State<FormData = any> = {
   store: Partial<FormData>;
@@ -23,15 +14,7 @@ export default function useForm<
   FormData = any,
   FieldValue = FormData[keyof FormData],
   FieldKey extends KeyType = keyof FormData,
->({
-  changeValidate = false,
-  watch = {},
-  customComponentList,
-}: {
-  changeValidate?: boolean;
-  watch?: Partial<Record<string, (value: unknown) => void>>;
-  customComponentList?: Partial<Record<string, unknown>>;
-}): FormInstance<FormData, FieldValue, FieldKey> {
+>(): FormInstance<FormData, FieldValue, FieldKey> {
   const [state, setState] = useState<State>({
     initialValues: {},
     store: {},
@@ -50,10 +33,8 @@ export default function useForm<
 
   const innerValidate = () => {
     const { showMessages } = validator;
-    if (changeValidate) {
-      showMessages?.();
-      forceUpdate?.();
-    }
+    showMessages?.();
+    forceUpdate?.();
   };
 
   // 获取表单字段的值
@@ -111,7 +92,7 @@ export default function useForm<
       validate,
       validateFields,
       getInnerMethods: (inner?: boolean): InnerMethodsReturnType<FormData> => {
-        let methods = {} as any;
+        let methods = {} as InnerMethodsReturnType<FormData>;
         if (inner) {
           methods = {
             store: state.store,
@@ -120,19 +101,6 @@ export default function useForm<
             validator,
             forceUpdate,
             innerValidate,
-            watch,
-            customComponentList: {
-              ...customComponentList,
-              input: <Input />,
-              textArea: <TextArea />,
-              slider: <Slider />,
-              rate: <Rating disabled={false} />,
-              radio: <Radio />,
-              search: <SearchBar />,
-              switch: <Switch />,
-              checkBox: <CheckBox />,
-              stepper: <Stepper value={0} onChange={() => {}} />,
-            },
           };
         }
         return methods;
diff --git a/packages/core/src/Form/types/index.tsx b/packages/core/src/Form/types/index.tsx
@@ -10,8 +10,8 @@ type InnerMethodsReturnType<FormData = any> = {
   validator: Validator;
   forceUpdate: () => void;
   innerValidate: () => void;
-  watch: Partial<Record<string, (value: unknown) => void>>;
-  customComponentList: Partial<Record<string, JSX.Element>>;
+  // watch: Partial<Record<string, (value: unknown) => void>>;
+  // customComponentList: Partial<Record<string, JSX.Element>>;
 };
 
 type FormInstance<FormData = any, FieldValue = FormData[keyof FormData], FieldKey extends KeyType = keyof FormData> = {
@@ -31,6 +31,9 @@ interface FormProps<FormData = any, FieldValue = FormData[keyof FormData], Field
    * 支持默认和卡片两种模式
    */
   mode?: 'default' | 'card';
+  watch?: Partial<Record<string, (value: unknown) => void>>;
+  customComponentList?: Partial<Record<string, JSX.Element>>;
+  changeValidate?: boolean;
 }
 
 interface actionProps {
@@ -46,7 +49,7 @@ interface FormItemsProps {
   type: string;
   name: string;
   validate?: RulesOption['validate'];
-  options?: Array<{ label: string; value: KeyType | any }>;
+  options?: Array<{ label: string; value: KeyType }>;
   attr?: any;
   required?: boolean;
   renderHeader?: (index: number, { remove, moveUp, moveDown }: actionProps) => React.ReactNode;
