docs(Form): Form组件文档

Author: ChenlingasMx

packages/core/src/Form/README.md

@@ -0,0 +1,187 @@
+Form 表单
+---
+
+集成react-native-uiw表单控件,并支持自定义组件
+
+### 基础示例
+
+<!--DemoStart--> 
+```jsx
+import {  SafeAreaView } from 'react-native';
+import { Form } from '@uiw/react-native';
+
+const FormDemo = () => {
+  const form = Form.useForm();
+  const initialValues = { name: '王滴滴' };
+  const items = [
+    {
+      type: 'input',
+      field: 'name',
+      name: '输入框',
+    }
+  ];
+  return (
+    <SafeAreaView>
+      <Form form={form} formDatas={items} initialValues={initialValues} />
+    </SafeAreaView>
+  );
+}
+```
+<!--End-->
+
+### 自定义验证提交
+
+<!--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: 'input',
+      field: 'name',
+      name: '输入框',
+      attr: {},
+      required: true,
+      validate: (val) => (!val ? `请输入name` : ''),
+    }
+  ];
+  return (
+    <SafeAreaView>
+      <Form form={form} formDatas={items} initialValues={initialValues} />
+        <Button
+          type="primary"
+          onPress={() => {
+            form
+              .validateFields()
+              .then((values) => Toast.success(JSON.stringify(values)))
+              .catch((errors) => Toast.warning(JSON.stringify(errors)));
+          }}>
+          确定
+        </Button>
+    </SafeAreaView>
+  );
+};
+```
+<!--End-->
+
+### 自定义表单组件
+
+<!--DemoStart--> 
+```jsx
+import { SafeAreaView,Toast,Slider } from 'react-native';
+import { Form } from '@uiw/react-native';
+
+const FormDemo = () => {
+  const form = Form.useForm({
+    changeValidate: true,
+    customComponentList: {
+      render: <Slider />,
+    },
+  });
+  const initialValues = {name: ''};
+  const items = [
+    {
+      type: 'input',
+      field: 'name',
+      name: '输入框',
+      required: true,
+    },
+    {
+      type: 'render',
+      field: 'render',
+      name: '自定义',
+    },
+  ];
+  return (
+    <SafeAreaView>
+      <Form form={form} formDatas={items} initialValues={initialValues} />
+    </SafeAreaView>
+  );
+};
+```
+<!--End-->
+
+### 监听表单变化
+
+<!--DemoStart--> 
+```jsx
+import { SafeAreaView,Toast } from 'react-native';
+import { Form } from '@uiw/react-native';
+
+const FormDemo = () => {
+  const form = Form.useForm({
+    changeValidate: true,
+    watch: {
+      name: (value: unknown) => {
+        console.log('value', value);
+      },
+    }
+  });
+  const initialValues = {name: ''};
+  const items = [
+    {
+      type: 'input',
+      field: 'name',
+      name: '输入框',
+      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> {
+  /**
+   * 表单集合
+  */
+  formDatas?: FormItemsProps[];
+  /**
+   * useForm表单实例
+  */
+  form: FormInstance<FormData, FieldValue, FieldKey>;
+  /**
+   * 表单默认值
+  */
+  initialValues?: Partial<FormData>;
+}
+```
+
+### FormItemsProps
+```ts
+interface FormItemsProps {
+  field: string;
+  type: string;
+  name: string;
+  validate?: RulesOption['validate'];
+  options?: Array<{ label: string; value: KeyType | any }>;
+  attr?: any;
+  required?: boolean;
+  render?: JSX.Element;
+}
+```
+
+### FormInstance
+```ts
+type FormInstance<FormData = any, FieldValue = FormData[keyof FormData], FieldKey extends KeyType = keyof FormData> = {
+  getFieldValue: (field: FieldKey) => FieldValue;
+  setFieldValue: (field: FieldKey, value: FieldValue) => void;
+  resetFieldValue: () => void;
+  validate: () => Partial<Record<string, string>>;
+  validateFields: () => Promise<FormData> | any;
+  getInnerMethods: (inner?: boolean) => InnerMethodsReturnType<FormData>;
+};
+```
+

packages/core/src/Form/types/index.tsx

@@ -3,7 +3,7 @@ import Validator from 'validator.tool';
 
 type KeyType = string | number | symbol;
 
-export type InnerMethodsReturnType<FormData = any> = {
+type InnerMethodsReturnType<FormData = any> = {
   store: Partial<FormData>;
   initialValues: Partial<FormData>;
   updateStore: (value: any) => void;
@@ -40,4 +40,4 @@ interface FormItemsProps {
   render?: JSX.Element;
 }
 
-export type { FormProps, FormItemsProps, KeyType, FormInstance };
+export type { FormProps, FormItemsProps, KeyType, FormInstance, InnerMethodsReturnType };