fix(Form): 集成uiw表单控件

ChenlingasMx · ChenlingasMx · commit 02670a12622f · 2022-09-22T14:43:43.000+08:00
diff --git a/example/examples/src/routes/Form/index.tsx b/example/examples/src/routes/Form/index.tsx
@@ -4,25 +4,22 @@ import Layout, {Container} from '../../Layout';
 const {Body, Footer} = Layout;
 
 const FormDemo = () => {
-  const form = Form.useForm();
+  const form = Form.useForm({
+    changeValidate: true,
+  });
   const items = [
     {
       type: 'input',
       field: 'name',
-      name: '姓名',
+      name: '输入框',
       attr: {},
+      required: true,
       validate: (val: any) => (!val ? `请输入name` : ''),
     },
-    {
-      type: 'input',
-      field: 'age',
-      name: '年龄',
-      validate: (val: any) => (Number(val) > 30 || Number(val) < 10 ? `起输入10-30` : ''),
-    },
     {
       type: 'radio',
       field: 'sex',
-      name: '菜',
+      name: '单选框',
       options: [
         {label: '四川菜', value: 1},
         {label: '湖北菜', value: 2},
@@ -34,7 +31,7 @@ const FormDemo = () => {
     {
       type: 'checkBox',
       field: 'fruit',
-      name: '水果',
+      name: '多选框',
       options: [
         {label: '香蕉', value: 1},
         {label: '西瓜', value: 2},
@@ -70,8 +67,33 @@ const FormDemo = () => {
       name: '时间',
       attr: {},
     },
+    {
+      type: 'stepper',
+      field: 'stepper',
+      name: '步进器',
+      attr: {
+        size: 'small',
+      },
+    },
+    {
+      type: 'textArea',
+      field: 'textArea',
+      name: '多行输入框',
+      attr: {
+        showWords: true,
+        maxLength: 100,
+      },
+    },
+    {
+      type: 'slider',
+      field: 'slider',
+      name: '滑块输入条',
+      attr: {
+        step: 0.2,
+      },
+    },
   ];
-  const initialValues = {name: '王滴滴', age: '31'};
+  const initialValues = {name: '王滴滴'};
 
   return (
     <Container>
diff --git a/packages/core/src/Form/formItems.tsx b/packages/core/src/Form/formItems.tsx
@@ -7,20 +7,19 @@ import Rating from '../Rating';
 import Switch from '../Switch';
 import SearchBar from '../SearchBar';
 import FormDatePicker from './comps/datePicker';
+import Stepper from '../Stepper';
+import TextArea from '../TextArea';
+import Slider from '../Slider';
+import Flex from '../Flex';
 import { View, Text, SafeAreaView, StyleSheet, TextInput } from 'react-native';
 
 const FormItems: FC<any> = ({ formDatas = [] }) => {
   const {
-    innerMethods: { store = {}, updateStore, forceUpdate, validator },
+    innerMethods: { store = {}, updateStore, validator, innerValidate },
   } = useContext(Context);
 
   const change = (field: KeyType, value: any) => updateStore?.({ store: { ...store, [field]: value } });
 
-  const validate = () => {
-    validator.showMessages();
-    forceUpdate();
-  };
-
   const _renderComponent = (v: FormItemsProps) => {
     const options = v.options || [];
     if (v.type === 'render') {
@@ -30,8 +29,24 @@ const FormItems: FC<any> = ({ formDatas = [] }) => {
       return (
         <TextInput
           value={store[v.field]}
-          onChangeText={(value) => change(v.field, value)}
-          onBlur={() => validate()}
+          onChangeText={(value) => {
+            change(v.field, value);
+            v?.attr?.onChangeText?.(value);
+            innerValidate();
+          }}
+          {...v.attr}
+        />
+      );
+    }
+    if (v.type === 'textArea') {
+      return (
+        <TextArea
+          onChange={(value: string) => {
+            change(v.field, value);
+            v?.attr?.onChange?.(value);
+            innerValidate();
+          }}
+          value={store[v.field]}
           {...v.attr}
         />
       );
@@ -41,7 +56,11 @@ const FormItems: FC<any> = ({ formDatas = [] }) => {
         <Radio
           key={idx}
           checked={item.value === store[v.field]}
-          onPress={() => change(v.field, item.value)}
+          onPress={() => {
+            change(v.field, item.value);
+            v?.attr?.onPress?.(item.value);
+            innerValidate();
+          }}
           {...v.attr}
         >
           {item.label}
@@ -64,8 +83,9 @@ const FormItems: FC<any> = ({ formDatas = [] }) => {
                 data.splice(idx, 1);
               }
               change(v.field, data);
+              v?.attr?.onChange?.(data);
+              innerValidate();
             }}
-            onBlur={() => validate()}
             {...v.attr}
           >
             {item.label}
@@ -74,17 +94,39 @@ const FormItems: FC<any> = ({ formDatas = [] }) => {
       });
     }
     if (v.type === 'rate') {
-      return <Rating onPress={(number) => change(v.field, number)} {...v.attr} />;
+      return (
+        <Rating
+          onPress={(number) => {
+            change(v.field, number);
+            v?.attr?.onPress?.(number);
+            innerValidate();
+          }}
+          {...v.attr}
+        />
+      );
     }
     if (v.type === 'switch') {
-      return <Switch checked={store[v.field]} onValueChange={() => change(v.field, !store[v.field])} {...v.attr} />;
+      return (
+        <Switch
+          checked={store[v.field]}
+          onValueChange={(value) => {
+            change(v.field, !store[v.field]);
+            v?.attr?.onValueChange?.(value);
+            innerValidate();
+          }}
+          {...v.attr}
+        />
+      );
     }
     if (v.type === 'search') {
       return (
         <SearchBar
           options={options}
-          onChange={(val) => change(v.field, val)}
-          onBlur={() => validate()}
+          onChange={(value) => {
+            change(v.field, value);
+            v?.attr?.onChange?.(value);
+            innerValidate();
+          }}
           contentStyle={{ paddingHorizontal: 0 }}
           {...v.attr}
         />
@@ -93,14 +135,43 @@ const FormItems: FC<any> = ({ formDatas = [] }) => {
     if (v.type === 'datePicker') {
       return <FormDatePicker value={store[v.field]} ok={(value) => change(v.field, value)} {...v.attr} />;
     }
+    if (v.type === 'stepper') {
+      return (
+        <Stepper
+          value={store[v.field]}
+          onChange={(value) => {
+            change(v.field, value);
+            v?.attr?.onChange?.(value);
+            innerValidate();
+          }}
+          {...v.attr}
+        />
+      );
+    }
+    if (v.type === 'slider') {
+      return (
+        <Slider
+          value={store[v.field]}
+          onChange={(value) => {
+            change(v.field, value);
+            v?.attr?.onChange?.(value);
+            innerValidate();
+          }}
+          {...v.attr}
+        />
+      );
+    }
     return null;
   };
 
   const Label = (v: FormItemsProps) => {
     return (
-      <Text style={styles.label} {...v.attr}>
-        {v.name}
-      </Text>
+      <Flex>
+        {v.required && <Text style={{ color: 'red', marginRight: 5 }}>*</Text>}
+        <Text style={styles.label} {...v.attr}>
+          {v.name}
+        </Text>
+      </Flex>
     );
   };
 
diff --git a/packages/core/src/Form/hooks/useForm.ts b/packages/core/src/Form/hooks/useForm.ts
@@ -1,4 +1,4 @@
-import { KeyType, InnerMethodsReturnType } from '../types';
+import { KeyType, InnerMethodsReturnType, FormInstance } from '../types';
 import { useState } from 'react';
 import { useValidator } from '@validator.tool/hook';
 import { isObjectEmpty } from '../utils/is';
@@ -13,7 +13,7 @@ export default function useForm<
   FormData = any,
   FieldValue = FormData[keyof FormData],
   FieldKey extends KeyType = keyof FormData,
->(): any {
+>({ changeValidate = false }: { changeValidate?: boolean }): FormInstance<FormData, FieldValue, FieldKey> {
   const [state, setState] = useState<State>({
     initialValues: {},
     store: {},
@@ -30,6 +30,14 @@ export default function useForm<
     });
   };
 
+  const innerValidate = () => {
+    const { showMessages } = validator;
+    if (changeValidate) {
+      showMessages?.();
+      forceUpdate?.();
+    }
+  };
+
   // 获取表单字段的值
   const getFieldValue = (field: FieldKey): FieldValue => {
     const { store } = state;
@@ -84,7 +92,7 @@ export default function useForm<
       resetFieldValue,
       validate,
       validateFields,
-      getInnerMethods: (inner?: boolean): InnerMethodsReturnType<FormData, FieldValue, FieldKey> => {
+      getInnerMethods: (inner?: boolean): InnerMethodsReturnType<FormData> => {
         let methods = {} as any;
         if (inner) {
           methods = {
@@ -93,6 +101,7 @@ export default function useForm<
             updateStore: updateStore,
             validator,
             forceUpdate,
+            innerValidate,
           };
         }
         return methods;
diff --git a/packages/core/src/Form/types/index.tsx b/packages/core/src/Form/types/index.tsx
@@ -4,16 +4,13 @@ import Validator from 'validator.tool';
 
 type KeyType = string | number | symbol;
 
-export type InnerMethodsReturnType<
-  FormData = any,
-  FieldValue = FormData[keyof FormData],
-  FieldKey extends KeyType = keyof FormData,
-> = {
+export type InnerMethodsReturnType<FormData = any> = {
   store: Partial<FormData>;
   initialValues: Partial<FormData>;
   updateStore: (value: any) => void;
   validator: Validator;
   forceUpdate: () => void;
+  innerValidate: () => void;
 };
 
 type FormInstance<FormData = any, FieldValue = FormData[keyof FormData], FieldKey extends KeyType = keyof FormData> = {
@@ -22,7 +19,7 @@ type FormInstance<FormData = any, FieldValue = FormData[keyof FormData], FieldKe
   resetFieldValue: () => void;
   validate: () => Partial<Record<string, string>>;
   validateFields: () => Promise<FormData> | any;
-  getInnerMethods: (inner?: boolean) => InnerMethodsReturnType<FormData, FieldValue, FieldKey>;
+  getInnerMethods: (inner?: boolean) => InnerMethodsReturnType<FormData>;
 };
 
 interface FormProps<FormData = any, FieldValue = FormData[keyof FormData], FieldKey extends KeyType = keyof FormData> {
@@ -38,6 +35,7 @@ interface FormItemsProps {
   validate?: RulesOption['validate'];
   options?: Array<{ label: string; value: KeyType | any }>;
   attr?: any;
+  required?: boolean;
   render?: React.ReactNode;
 }
 
diff --git a/packages/core/src/Stepper/index.tsx b/packages/core/src/Stepper/index.tsx
@@ -118,7 +118,7 @@ function Stepper(props: StepProps) {
     onChange(valueRef.current);
   };
   return (
-    <View style={[ControlStyle.elementCenter]}>
+    <View style={[ControlStyle.elementCenter, { justifyContent: 'flex-start' }]}>
       <ControlValue
         size={size}
         delayLong={delayLong}
