fix(Form): useForm优化

Author: ChenlingasMx

example/examples/src/routes/Form/index.tsx

@@ -18,7 +18,7 @@ const FormDemo = () => {
 
   const initialValues = {name: '王滴滴'};
 
-  const [form] = Form.useForm();
+  const form = Form.useForm();
 
   return (
     <Container>

packages/core/src/Form/form.tsx

@@ -14,11 +14,11 @@ const Form = <
   const { formDatas, form, initialValues = {} } = baseProps;
 
   const isMount = useRef<boolean>();
-  const [formInstance] = useForm<FormData, FieldValue, FieldKey>(form);
-  const innerMethods = formInstance.getInnerMethods(true);
+
+  const innerMethods = form.getInnerMethods(true);
 
   if (!isMount.current) {
-    innerMethods.innerSetInitialValues(initialValues);
+    innerMethods.updateStore({ initialValues: initialValues, store: initialValues });
   }
 
   useEffect(() => {

packages/core/src/Form/formItems.tsx

@@ -1,45 +1,37 @@
-import React, { FC, useContext } from 'react';
+import React, { FC, useContext, useEffect } from 'react';
 import { FormProps, KeyType, FormItemsProps } from './types';
 import { Context } from './hooks/context';
 import Input from '../Input';
 import { View, Text } from 'react-native';
-import { useValidator } from '@validator.tool/hook';
 
-const FormItems: FC<FormProps> = ({ formDatas = [] }) => {
-  const { innerMethods } = useContext(Context);
+const FormItems: FC<any> = ({ formDatas = [] }) => {
+  const {
+    innerMethods: { store = {}, updateStore },
+  } = useContext(Context);
 
-  const formValues = innerMethods.innerGetStore();
+  const change = (field: KeyType, value: any) => updateStore?.({ store: { ...store, [field]: value } });
 
-  const { validator, forceUpdate } = useValidator({
-    initValues: { ...formValues },
-  });
-
-  const change = (field: KeyType, value: any) => innerMethods?.innerUpdateStore(field, value);
+  const validate = async () => {
+    // showMessages();
+    // forceUpdate();
+  };
 
   const _render = () => {
     return formDatas.map((v: FormItemsProps, i: number) => {
       let _render;
       if (v.type === 'input') {
         _render = (
-          <Input
-            value={formValues[v.field]}
-            onChangeText={(value) => change(v.field, value)}
-            onBlur={() => {
-              validator.showMessages();
-              forceUpdate();
-              console.log('validator', validator);
-            }}
-          />
+          <Input value={store[v.field]} onChangeText={(value) => change(v.field, value)} onBlur={() => validate()} />
         );
       }
       return (
         <View key={i}>
           {_render}
-          <Text style={{ color: 'red' }}>
-            {validator.message(v.field, formValues[v.field], {
+          {/* <Text style={{ color: 'red' }}>
+            {message(v.field, formValues[v.field], {
               validate: v?.validate,
             })}
-          </Text>
+          </Text> */}
         </View>
       );
     });

packages/core/src/Form/hooks/store.ts

@@ -1,43 +1,59 @@
-import { useRef } from 'react';
-import { KeyType, InnerMethodsReturnType, FormInstance } from '../types';
-import Store from './store';
+import { KeyType, InnerMethodsReturnType } from '../types';
+import { useState } from 'react';
 
-export function getFormInstance<
-  FormData = any,
-  FieldValue = FormData[keyof FormData],
-  FieldKey extends KeyType = keyof FormData,
->() {
-  const store = new Store<FormData, FieldValue, FieldKey>();
-  return {
-    getStore: store.getStore,
-    getFieldValue: store.getFieldValue,
-    getInnerMethods: (inner?: boolean): InnerMethodsReturnType<FormData, FieldValue, FieldKey> => {
-      let methods = {} as InnerMethodsReturnType<FormData, FieldValue, FieldKey>;
-      if (inner) {
-        methods = {
-          innerSetInitialValues: store.innerSetInitialValues,
-          innerGetStore: store.innerGetStore,
-          innerUpdateStore: store.innerUpdateStore,
-        };
-      }
-      return methods;
-    },
-  };
-}
+type State<FormData = any> = {
+  store: Partial<FormData>;
+  initialValues: Partial<FormData>;
+  errorMessages: Partial<Record<string, string>>;
+};
 
 export default function useForm<
   FormData = any,
   FieldValue = FormData[keyof FormData],
   FieldKey extends KeyType = keyof FormData,
->(form?: FormInstance<FormData, FieldValue, FieldKey>): [FormInstance<FormData, FieldValue, FieldKey>] {
-  const formRef = useRef(form);
-
-  if (!formRef.current) {
-    if (form) {
-      formRef.current = form;
-    } else {
-      formRef.current = getFormInstance<FormData, FieldValue, FieldKey>();
-    }
-  }
-  return [formRef.current];
+>(): any {
+  const [state, setState] = useState<State>({
+    initialValues: {},
+    errorMessages: {},
+    store: {},
+  });
+
+  const updateStore = (datas: any) => {
+    setState({
+      ...state,
+      ...datas,
+    });
+  };
+
+  const innerUseValidator = () => {};
+
+  const getFieldValue = (field: FieldKey): FieldValue => {
+    const { store } = state;
+    return store[field];
+  };
+
+  const getStore = (): Partial<FormData> => {
+    const { store } = state;
+    return store;
+  };
+
+  const getFormInstance = () => {
+    return {
+      getStore: getStore,
+      getFieldValue: getFieldValue,
+      getInnerMethods: (inner?: boolean): InnerMethodsReturnType<FormData, FieldValue, FieldKey> => {
+        let methods = {} as any;
+        if (inner) {
+          methods = {
+            store: state.store,
+            initialValues: state.initialValues,
+            updateStore: updateStore,
+          };
+        }
+        return methods;
+      },
+    };
+  };
+
+  return getFormInstance();
 }

packages/core/src/Form/hooks/useForm.ts

@@ -1,4 +1,3 @@
-import Store from '../hooks/store';
 import { RulesOption } from '@validator.tool/hook';
 
 type KeyType = string | number | symbol;
@@ -7,19 +6,21 @@ export type InnerMethodsReturnType<
   FormData = any,
   FieldValue = FormData[keyof FormData],
   FieldKey extends KeyType = keyof FormData,
-> = Pick<Store<FormData, FieldValue, FieldKey>, 'innerSetInitialValues' | 'innerGetStore' | 'innerUpdateStore'>;
+> = {
+  store: Partial<FormData>;
+  initialValues: Partial<FormData>;
+  updateStore: (value: any) => void;
+};
 
-type FormInstance<
-  FormData = any,
-  FieldValue = FormData[keyof FormData],
-  FieldKey extends KeyType = keyof FormData,
-> = Pick<Store<FormData, FieldValue, FieldKey>, 'getStore' | 'getFieldValue'> & {
+type FormInstance<FormData = any, FieldValue = FormData[keyof FormData], FieldKey extends KeyType = keyof FormData> = {
+  getStore: () => FormData;
+  getFieldValue: () => FieldValue;
   getInnerMethods: (inner?: boolean) => InnerMethodsReturnType<FormData, FieldValue, FieldKey>;
 };
 
 interface FormProps<FormData = any, FieldValue = FormData[keyof FormData], FieldKey extends KeyType = keyof FormData> {
   formDatas?: FormItemsProps[];
-  form?: FormInstance<FormData, FieldValue, FieldKey>;
+  form: FormInstance<FormData, FieldValue, FieldKey>;
   initialValues?: Partial<FormData>;
 }