fix(Form): 增加自定义布局Form.Item子组件

Author: ChenlingasMx

packages/core/src/Form/README.md

@@ -268,6 +268,45 @@ const FormComponent = Form.create(FormDemo)
 export default FormComponent;
 ```
 
+### Form.Item
+
+<!--DemoStart-->
+```jsx mdx:preview&background=#bebebe29
+import React from 'react';
+import { SafeAreaView,TextInput } from 'react-native';
+import { Form } from '@uiw/react-native';
+
+const Input = ({ value, onChange, ...others }) => {
+  return (
+    <TextInput
+      value={value}
+      onChangeText={(value) => {
+        onChange?.(value);
+      }}
+      {...others}
+    />
+  );
+};
+
+const FormDemo = () => {
+  const form = Form.useForm();
+  const watch = {
+    name: (value) => console.log('value', value)
+  }
+  return (
+    <SafeAreaView>
+      <Form type="custom" form={form}  watch={watch} changeValidate={true}>
+        <Form.Item required field="name" name="姓名" validate={(val) => (!val ? '请输入姓名' : '')}>
+          <Input placeholder='请输入' />
+        </Form.Item>
+      </Form>
+    </SafeAreaView>
+  );
+};
+export default FormDemo
+```
+<!--End-->
+
 ### Props
 
 | 参数 | 说明 | 类型 | 默认值 |
@@ -276,10 +315,12 @@ export default FormComponent;
 | `form` | 经 Form.useForm() 创建的 form 控制实例，不提供时会自动创建 | FormInstance<`FormData`, `FieldValue`, `FieldKey`> | - |
 | `initialValues` | 表单默认值，只有初始化以及重置时生效 | Partial<`FormData`> | - |
 | `mode` | 支持默认和卡片两种模式 | `default` \| `card` | | default |
+| `type` | 表单布局模式 | `json` \| `custom` | `json` |
 | `changeValidate` | 表单是否在onChange时进行验证 | boolean | false |
 | `watch` | 监听表单字段变化 | Partial<Record<string, (value: unknown) => void>> | - |
 | `customComponentList` | 自定义组件 | Partial<Record<string, JSX.Element>> | - |
 
+
 ### FormItemsProps
 
 | 参数 | 说明 | 类型 | 默认值 |

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

@@ -3,7 +3,7 @@ import Flex from '../../Flex';
 import { FormItemsProps } from '../types';
 import { Text, StyleSheet } from 'react-native';
 
-const Label = ({ v }: { v: FormItemsProps }) => {
+const Label = ({ v }: { v: Partial<FormItemsProps> }) => {
   return (
     <Flex>
       {v.required && <Text style={{ color: 'red', marginRight: 5 }}>*</Text>}

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

@@ -3,7 +3,7 @@ import { Context } from '../hooks/context';
 import { FormItemsProps } from '../types';
 import { Text } from 'react-native';
 
-const Tip = ({ v }: { v: FormItemsProps }) => {
+const Tip = ({ v }: { v: Partial<FormItemsProps> & { field: string } }) => {
   const {
     innerMethods: { store = {}, validator },
   } = useContext(Context);

packages/core/src/Form/form.tsx

@@ -19,9 +19,11 @@ const Form = (baseProps: FormProps) => {
     form,
     initialValues = {},
     mode = 'default',
+    type = 'json',
     watch,
     customComponentList = {},
     changeValidate = false,
+    children,
   } = baseProps;
 
   const isMount = useRef<boolean>();
@@ -57,11 +59,7 @@ const Form = (baseProps: FormProps) => {
     changeValidate: changeValidate,
   };
 
-  return (
-    <Provider contextProps={contextProps}>
-      <FormItems schema={schema} />
-    </Provider>
-  );
+  return <Provider contextProps={contextProps}>{type === 'json' ? <FormItems schema={schema} /> : children}</Provider>;
 };
 
 export default Form;

packages/core/src/Form/formchildItem.tsx

@@ -0,0 +1,48 @@
+import React, { useContext } from 'react';
+import { View } from 'react-native';
+import { Context } from './hooks/context';
+import { KeyType, FormItemsProps } from './types';
+import Label from './comps/label';
+import Tip from './comps/tip';
+import Container from './comps/container';
+import styles from './styles';
+
+const formchildItem = (props: Partial<FormItemsProps> & { field: string; children: React.ReactElement }) => {
+  const { field, name = '', required = false, validate, children } = props;
+  const {
+    mode,
+    innerMethods: { store = {}, updateStore, innerValidate },
+    watch,
+    changeValidate,
+  } = useContext(Context);
+
+  const change = (field: KeyType, value: unknown) => {
+    updateStore?.({ store: { ...store, [field]: value } });
+    watch && watch[field]?.(value);
+  };
+
+  const _renderComponent = (children: React.ReactElement) => {
+    return React.isValidElement(children)
+      ? React.cloneElement(children, {
+          value: store[field],
+          onChange: (value: unknown) => {
+            change(field, value);
+            if (changeValidate) innerValidate();
+          },
+        } as any)
+      : null;
+  };
+  return (
+    <Container mode={mode}>
+      <View style={styles.form_items_container}>
+        <View style={[styles.form_items, styles.border_none]}>
+          <Label v={{ name: name, required: required }} />
+          {_renderComponent(children)}
+          <Tip v={{ validate: validate, field: field }} />
+        </View>
+      </View>
+    </Container>
+  );
+};
+
+export default formchildItem;

packages/core/src/Form/index.tsx

@@ -1,4 +1,5 @@
 import Form from './form';
+import FormChildItem from './formchildItem';
 import create from './createForm';
 import useForm from './hooks/useForm';
 
@@ -7,11 +8,13 @@ type RefForm = typeof Form;
 export interface FormComponent extends RefForm {
   useForm: typeof useForm;
   create: typeof create;
+  Item: typeof FormChildItem;
 }
 
 const FormComp: FormComponent = Form as FormComponent;
 
 FormComp.useForm = useForm;
 FormComp.create = create;
+FormComp.Item = FormChildItem;
 
 export default FormComp;

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;
@@ -34,6 +35,8 @@ interface FormProps<FormData = any, FieldValue = FormData[keyof FormData], Field
   watch?: Partial<Record<string, (value: unknown) => void>>;
   customComponentList?: Partial<Record<string, JSX.Element>>;
   changeValidate?: boolean;
+  type?: 'json' | 'custom';
+  children?: React.ReactElement;
 }
 
 interface actionProps {