feat(Form): 新增动态表单

Author: ChenlingasMx

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

@@ -105,6 +105,23 @@ const FormDemo = () => {
       field: 'render',
       name: '自定义',
     },
+    {
+      type: 'cardList',
+      field: 'cardList',
+      name: '动态list',
+      items: [
+        {
+          type: 'input',
+          field: 'cardListItem1',
+          name: '动态表单项1',
+        },
+        {
+          type: 'input',
+          field: 'cardListItem2',
+          name: '动态表单项2',
+        },
+      ],
+    },
   ];
   const initialValues = {name: '王滴滴'};
 

packages/core/src/Card/Card.Actions.tsx

@@ -22,13 +22,14 @@ export type CardActionsProps = {
     actionsTextStyle?: StyleProp<TextStyle>;
   }>;
   actionsContainerStyle?: StyleProp<ViewStyle>;
+  driver?: boolean;
   children?: React.ReactNode;
 };
 
-const CardActions = ({ actions = [], actionsContainerStyle, children }: CardActionsProps) => {
+const CardActions = ({ actions = [], actionsContainerStyle, children, driver = true }: CardActionsProps) => {
   return (
     <Fragment>
-      <Divider style={StyleSheet.flatten({ marginTop: 15 })} lineStyle={{ backgroundColor: '#e6e6e6' }} />
+      {driver && <Divider style={StyleSheet.flatten({ marginTop: 15 })} lineStyle={{ backgroundColor: '#e6e6e6' }} />}
       {React.isValidElement(children) ? React.cloneElement(children) : null}
       <View style={[styles.actionsContainer, actionsContainerStyle]}>
         {map(actions, (item, index) => {

packages/core/src/Form/README.md

@@ -29,7 +29,7 @@ const FormDemo = () => {
 ```
 <!--End-->
 
-### 自定义验证提交
+### form.validateFields进行表单验证提交
 
 <!--DemoStart--> 
 ```jsx
@@ -70,7 +70,7 @@ const FormDemo = () => {
 ```
 <!--End-->
 
-### 自定义表单组件
+### customComponentList自定义表单组件
 
 <!--DemoStart--> 
 ```jsx
@@ -107,7 +107,7 @@ const FormDemo = () => {
 ```
 <!--End-->
 
-### 监听表单变化
+### watch监听表单变化
 
 <!--DemoStart--> 
 ```jsx
@@ -141,6 +141,46 @@ const FormDemo = () => {
 ```
 <!--End-->
 
+### 动态表单list
+
+> ⚠️ 警告:目前仅能嵌套一层cardList<!--rehype:style=background: #F08800; color: #fff;-->。
+<!--rehype:style=border-left: 8px solid #ffe564;background-color: #ffe56440;padding: 12px 16px;-->
+
+<!--DemoStart--> 
+```jsx
+import { SafeAreaView,Toast } from 'react-native';
+import { Form } from '@uiw/react-native';
+
+const FormDemo = () => {
+  const form = Form.useForm({
+    changeValidate: true,
+  });
+  const initialValues = {name: ''};
+  const items = [
+    {
+      type: 'cardList',
+      field: 'cardList',
+      name: '动态list',
+      required: true,
+      items:[
+        {
+          type: 'input',
+          field: 'cardList',
+          name: '动态list',
+          required: true,
+        }
+      ]
+    }
+  ];
+  return (
+    <SafeAreaView>
+      <Form form={form} formDatas={items} initialValues={initialValues} />
+    </SafeAreaView>
+  );
+};
+```
+<!--End-->
+
 ### FormProps
 ```ts
 interface FormProps<FormData = any, FieldValue = FormData[keyof FormData], FieldKey extends KeyType = keyof FormData> {
@@ -167,9 +207,10 @@ interface FormItemsProps {
   name: string;
   validate?: RulesOption['validate'];
   options?: Array<{ label: string; value: KeyType | any }>;
-  attr?: any;
+  attr?: un;
   required?: boolean;
   render?: JSX.Element;
+  hide?:boolean
 }
 ```
 

packages/core/src/Form/comps/label.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Flex from '../../Flex';
+import { FormItemsProps } from '../types';
+import { Text, StyleSheet } from 'react-native';
+
+const Label = ({ v }: { v: FormItemsProps }) => {
+  return (
+    <Flex>
+      {v.required && <Text style={{ color: 'red', marginRight: 5 }}>*</Text>}
+      <Text style={styles.label} {...v.attr}>
+        {v.name}
+      </Text>
+    </Flex>
+  );
+};
+
+const styles = StyleSheet.create({
+  label: {
+    width: 110,
+    fontSize: 16,
+    color: '#434343',
+    fontWeight: '500',
+    marginBottom: 10,
+  },
+});
+
+export default Label;

packages/core/src/Form/comps/tip.tsx

@@ -0,0 +1,17 @@
+import React, { useContext } from 'react';
+import { Context } from '../hooks/context';
+import { FormItemsProps } from '../types';
+import { Text } from 'react-native';
+
+const Tip = ({ v }: { v: FormItemsProps }) => {
+  const {
+    innerMethods: { store = {}, validator },
+  } = useContext(Context);
+
+  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>;
+};
+
+export default Tip;

packages/core/src/Form/formItems.tsx

@@ -11,8 +11,11 @@ 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';
+import Label from './comps/label';
+import Tip from './comps/tip';
+import FormList from './formList';
+import { View, SafeAreaView, StyleSheet, TextInput } from 'react-native';
+import styles from './styles';
 
 const FormItems: FC<any> = ({ formDatas = [] }) => {
   const {
@@ -153,11 +156,15 @@ const FormItems: FC<any> = ({ formDatas = [] }) => {
         />
       );
     }
+    if (v.type === 'cardList') {
+      return <FormList formListValue={v} />;
+    }
     // 自定义组件
     if (!isObjectEmpty(customComponentList) && Object.keys(customComponentList).includes(v.type)) {
       return React.isValidElement(customComponentList[v.type])
         ? React.cloneElement(customComponentList[v.type], {
             ...v.attr,
+            value: store[v.field],
             onChange: (value: unknown) => {
               change(v.field, value);
               innerValidate();
@@ -168,32 +175,17 @@ const FormItems: FC<any> = ({ formDatas = [] }) => {
     return null;
   };
 
-  const Label = (v: FormItemsProps) => {
-    return (
-      <Flex>
-        {v.required && <Text style={{ color: 'red', marginRight: 5 }}>*</Text>}
-        <Text style={styles.label} {...v.attr}>
-          {v.name}
-        </Text>
-      </Flex>
-    );
-  };
-
-  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) => {
+      if (v.hide) {
+        return null;
+      }
       return (
         <View key={i} style={styles.form_items_container}>
           <View style={styles.form_items}>
-            {Label(v)}
+            <Label v={v} />
             {_renderComponent(v)}
-            {Tip(v)}
+            <Tip v={v} />
           </View>
         </View>
       );
@@ -203,26 +195,4 @@ const FormItems: FC<any> = ({ formDatas = [] }) => {
   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;