fix(Form): 内嵌组件 & 样式处理

ChenlingasMx · ChenlingasMx · commit 156fdd3ae46d · 2022-09-21T16:49:59.000+08:00
diff --git a/example/examples/src/routes/Form/index.tsx b/example/examples/src/routes/Form/index.tsx
@@ -9,13 +9,61 @@ const FormDemo = () => {
     {
       type: 'input',
       field: 'name',
+      name: '姓名',
+      attr: {},
       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: '菜',
+      options: [
+        {label: '四川菜', value: 1},
+        {label: '湖北菜', value: 2},
+        {label: '西北菜', value: 3},
+        {label: '新疆菜', value: 4},
+        {label: '东北菜', value: 5},
+      ],
+    },
+    {
+      type: 'checkBox',
+      field: 'fruit',
+      name: '水果',
+      options: [
+        {label: '香蕉', value: 1},
+        {label: '西瓜', value: 2},
+        {label: '猕猴桃', value: 3},
+      ],
+    },
+    {
+      type: 'rate',
+      field: 'rate',
+      name: '评分',
+    },
+    {
+      type: 'switch',
+      field: 'switch',
+      name: '开关',
+    },
+    {
+      type: 'search',
+      field: 'search',
+      name: '搜索',
+      options: [
+        {label: '上海', value: 1},
+        {label: '南京', value: 2},
+      ],
+      attr: {
+        labelInValue: true,
+        showClear: true,
+      },
+    },
   ];
   const initialValues = {name: '王滴滴', age: '31'};
 
diff --git a/packages/core/src/Form/formItems.tsx b/packages/core/src/Form/formItems.tsx
@@ -1,8 +1,12 @@
-import React, { FC, useContext, useEffect } from 'react';
+import React, { FC, useContext } from 'react';
 import { KeyType, FormItemsProps } from './types';
 import { Context } from './hooks/context';
-import Input from '../Input';
-import { View, Text, TextInput } from 'react-native';
+import Radio from '../Radio';
+import CheckBox from '../CheckBox';
+import Rating from '../Rating';
+import Switch from '../Switch';
+import SearchBar from '../SearchBar';
+import { View, Text, SafeAreaView, StyleSheet, TextInput } from 'react-native';
 
 const FormItems: FC<any> = ({ formDatas = [] }) => {
   const {
@@ -16,28 +20,128 @@ const FormItems: FC<any> = ({ formDatas = [] }) => {
     forceUpdate();
   };
 
+  const _renderComponent = (v: FormItemsProps) => {
+    const options = v.options || [];
+    if (v.type === 'render') {
+      return v.render;
+    }
+    if (v.type === 'input') {
+      return (
+        <TextInput
+          value={store[v.field]}
+          onChangeText={(value) => change(v.field, value)}
+          onBlur={() => validate()}
+          {...v.attr}
+        />
+      );
+    }
+    if (v.type === 'radio') {
+      return options.map((item, idx) => (
+        <Radio
+          key={idx}
+          checked={item.value === store[v.field]}
+          onPress={() => change(v.field, item.value)}
+          {...v.attr}
+        >
+          {item.label}
+        </Radio>
+      ));
+    }
+    if (v.type === 'checkBox') {
+      return options.map((item, idx) => {
+        const values = store[v.field] || [];
+        return (
+          <CheckBox
+            key={idx}
+            checked={values.includes(item.value)}
+            onChange={() => {
+              let data = store[v.field] || [];
+              if (!data.includes(item.value)) {
+                data.push(item.value);
+              } else {
+                const idx = data.findIndex((v: KeyType) => v === item.value);
+                data.splice(idx, 1);
+              }
+              change(v.field, data);
+            }}
+            {...v.attr}
+          >
+            {item.label}
+          </CheckBox>
+        );
+      });
+    }
+    if (v.type === 'rate') {
+      return <Rating onPress={(number) => change(v.field, number)} {...v.attr} />;
+    }
+    if (v.type === 'switch') {
+      return <Switch checked={store[v.field]} onValueChange={() => change(v.field, !store[v.field])} {...v.attr} />;
+    }
+    if (v.type === 'search') {
+      return (
+        <SearchBar
+          options={options}
+          onChange={(val) => change(v.field, val)}
+          contentStyle={{ paddingHorizontal: 0 }}
+          {...v.attr}
+        />
+      );
+    }
+    return null;
+  };
+
+  const Label = (v: FormItemsProps) => {
+    return (
+      <Text style={styles.label} {...v.attr}>
+        {v.name}
+      </Text>
+    );
+  };
+
+  const Tip = (v: FormItemsProps) => {
+    const content = validator.message(v.field, store[v.field], {
+      validate: v?.validate,
+    });
+    return <Text style={{ color: 'red', marginBottom: content && 10, marginTop: content && 10 }}>{content}</Text>;
+  };
+
   const _render = () => {
     return formDatas.map((v: FormItemsProps, i: number) => {
-      let _render;
-      if (v.type === 'input') {
-        _render = (
-          <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, store[v.field], {
-              validate: v?.validate,
-            })}
-          </Text>
+        <View key={i} style={styles.form_items_container}>
+          <View style={styles.form_items}>
+            {Label(v)}
+            {_renderComponent(v)}
+            {Tip(v)}
+          </View>
         </View>
       );
     });
   };
 
-  return <React.Fragment>{_render()}</React.Fragment>;
+  return <SafeAreaView style={styles.warpper}>{_render()}</SafeAreaView>;
 };
 
+const styles = StyleSheet.create({
+  warpper: {
+    backgroundColor: '#fff',
+  },
+  form_items_container: {
+    flex: 1,
+  },
+  form_items: {
+    textAlign: 'center',
+    margin: 10,
+    borderBottomWidth: 0.5,
+    borderBottomColor: '#eee',
+  },
+  label: {
+    width: 110,
+    fontSize: 16,
+    color: '#434343',
+    fontWeight: '500',
+    marginBottom: 10,
+  },
+});
+
 export default FormItems;
diff --git a/packages/core/src/Form/hooks/useForm.ts b/packages/core/src/Form/hooks/useForm.ts
@@ -77,14 +77,8 @@ export default function useForm<
     });
   };
 
-  const getStore = (): Partial<FormData> => {
-    const { store } = state;
-    return store;
-  };
-
   const getFormInstance = () => {
     return {
-      getStore,
       getFieldValue,
       setFieldValue,
       resetFieldValue,
diff --git a/packages/core/src/Form/types/index.tsx b/packages/core/src/Form/types/index.tsx
@@ -1,4 +1,5 @@
 import { RulesOption } from '@validator.tool/hook';
+import React from 'react';
 import Validator from 'validator.tool';
 
 type KeyType = string | number | symbol;
@@ -16,7 +17,6 @@ export type InnerMethodsReturnType<
 };
 
 type FormInstance<FormData = any, FieldValue = FormData[keyof FormData], FieldKey extends KeyType = keyof FormData> = {
-  getStore: () => FormData;
   getFieldValue: (field: FieldKey) => FieldValue;
   setFieldValue: (field: FieldKey, value: FieldValue) => void;
   resetFieldValue: () => void;
@@ -34,7 +34,11 @@ interface FormProps<FormData = any, FieldValue = FormData[keyof FormData], Field
 interface FormItemsProps {
   field: string;
   type: string;
+  name: string;
   validate?: RulesOption['validate'];
+  options?: Array<{ label: string; value: KeyType | any }>;
+  attr?: any;
+  render?: React.ReactNode;
 }
 
 export type { FormProps, FormItemsProps, KeyType, FormInstance };
diff --git a/packages/core/src/SearchBar/README.md b/packages/core/src/SearchBar/README.md
@@ -17,7 +17,7 @@ function Demo() {
         {label:'上海',value:1},
         {label:'南京',value:2}
       ]} 
-      onFocu={()=>{}}  
+      onFocus={()=>{}}  
       onChange={val=>console.log('val',val)} 
     />
   );
diff --git a/packages/core/src/SearchBar/index.tsx b/packages/core/src/SearchBar/index.tsx
@@ -7,6 +7,8 @@ import {
   TouchableWithoutFeedback,
   ActivityIndicator,
   Pressable,
+  StyleProp,
+  ViewStyle,
 } from 'react-native';
 import MaskLayer from '../MaskLayer';
 import SearchInputBar from '../SearchInputBar';
@@ -27,6 +29,7 @@ interface SearchBarProps {
   placeholder?: String;
   extra?: JSX.Element;
   showClear?: boolean;
+  contentStyle?: StyleProp<ViewStyle>;
 }
 
 interface OptionsState {
@@ -48,6 +51,7 @@ function SearchBar({
   placeholder,
   extra,
   showClear = true,
+  contentStyle = {},
 }: SearchBarProps) {
   const [curValue, setCurValue] = useState<any>(value);
   const [visible, setVisivble] = useState(false);
@@ -76,7 +80,7 @@ function SearchBar({
 
   return !visible ? (
     <Pressable onPress={showSearchBar}>
-      <View style={[styles.content]}>
+      <View style={[styles.content, contentStyle]}>
         <Text style={styles.contentTitle}>{textValue ? textValue : placeholder}</Text>
         {React.isValidElement(extra) ? (
           extra
@@ -91,7 +95,7 @@ function SearchBar({
             <Icon name="circle-close-o" size={18} color="#ccc" />
           </Pressable>
         ) : (
-          <Icon xml={down} size={18} color="#A19EA0" />
+          <Icon name="right" size={18} color="#A19EA0" />
         )}
       </View>
     </Pressable>
