Merge pull request #606 from hy916/dev

fix(Form) 优化Form组件和组件文档

Author: ChenlingasMx

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

@@ -1,5 +1,5 @@
 import React, {useState, useRef} from 'react';
-import {Form, Button, Toast, Slider, Flex, Text} from '@uiw/react-native';
+import {Form, Button, Toast, Slider, Flex, Text, Spacing} from '@uiw/react-native';
 import {View} from 'react-native';
 import Layout, {Container} from '../../Layout';
 const {Body, Footer, Card} = Layout;
@@ -18,6 +18,42 @@ const FormDemo = () => {
   const [state, setStore] = useState({});
 
   const schema = [
+    {
+      type: 'input',
+      field: 'name',
+      name: '姓名',
+      attr: {},
+      required: true,
+      validate: (val: any) => (!val ? `请输入name` : ''),
+    },
+    {
+      type: 'input',
+      field: 'phone',
+      name: '电话',
+      attr: {},
+      required: true,
+      validate: (val: any) => (!val ? `请输入电话` : ''),
+    },
+    {
+      type: 'radio',
+      field: 'sex',
+      name: '单选框',
+      options: [
+        {label: '四川菜', value: 1},
+        {label: '湖北菜', value: 2},
+        {label: '西北菜', value: 3},
+        {label: '新疆菜', value: 4},
+        {label: '东北菜', value: 5},
+        {label: '四川菜', value: 6},
+        {label: '湖北菜', value: 7},
+        {label: '西北菜', value: 8},
+        {label: '新疆菜', value: 9},
+        {label: '东北菜', value: 10},
+      ],
+    },
+  ];
+
+  const schemaCard = [
     {
       type: 'input',
       field: 'name',
@@ -60,6 +96,58 @@ const FormDemo = () => {
         {label: '东北菜', value: 10},
       ],
     },
+  ];
+  const schemaType = [
+    {
+      type: 'input',
+      field: 'name',
+      name: '姓名',
+      attr: {},
+      required: true,
+      validate: (val: any) => (!val ? `请输入name` : ''),
+    },
+    {
+      type: 'input',
+      field: 'phone',
+      name: '电话',
+      attr: {},
+      required: true,
+      validate: (val: any) => (!val ? `请输入电话` : ''),
+    },
+    {
+      type: 'radio',
+      field: 'sex',
+      name: '单选框',
+      options: [
+        {label: '四川菜', value: 1},
+        {label: '湖北菜', value: 2},
+        {label: '西北菜', value: 3},
+        {label: '新疆菜', value: 4},
+        {label: '东北菜', value: 5},
+        {label: '四川菜', value: 6},
+        {label: '湖北菜', value: 7},
+        {label: '西北菜', value: 8},
+        {label: '新疆菜', value: 9},
+        {label: '东北菜', value: 10},
+      ],
+    },
+    {
+      type: 'checkBox',
+      field: 'fruit',
+      name: '多选框',
+      options: [
+        {label: '香蕉', value: 1},
+        {label: '西瓜', value: 2},
+        {label: '猕猴桃', value: 3},
+        {label: '新疆菜', value: 4},
+        {label: '东北菜', value: 5},
+        {label: '四川菜', value: 6},
+        {label: '湖北菜', value: 7},
+        {label: '西北菜', value: 8},
+        {label: '新疆菜', value: 9},
+        {label: '东北菜', value: 10},
+      ],
+    },
     {
       type: 'rate',
       field: 'rate',
@@ -275,7 +363,57 @@ const FormDemo = () => {
             <Form
               form={form}
               schema={schema}
-              initialValues={{name: '王滴滴', rate: 4, datePicker: new Date(), picker: ['2']}}
+              initialValues={{name: '王滴滴'}}
+              watch={{
+                name: (value: unknown) => console.log('value', value),
+              }}
+              customComponentList={{
+                render: <Slider />,
+              }}
+              changeValidate={true}
+            />
+            <Button
+              type="primary"
+              onPress={() => {
+                form
+                  .validateFields()
+                  .then((values: any) => setStore(values))
+                  .catch((errors: any) => Toast.warning(JSON.stringify(errors)));
+              }}>
+              确定
+            </Button>
+          </Card>
+          <Card title="卡片模式">
+            <Form
+              form={form}
+              schema={schemaCard}
+              mode="card"
+              initialValues={{name: '王滴滴', rate: 4}}
+              watch={{
+                name: (value: unknown) => console.log('value', value),
+              }}
+              customComponentList={{
+                render: <Slider />,
+              }}
+              changeValidate={true}
+            />
+            <Spacing />
+            <Button
+              type="primary"
+              onPress={() => {
+                form
+                  .validateFields()
+                  .then((values: any) => setStore(values))
+                  .catch((errors: any) => Toast.warning(JSON.stringify(errors)));
+              }}>
+              确定
+            </Button>
+          </Card>
+          <Card title="表单项类型">
+            <Form
+              form={form}
+              schema={schemaType}
+              initialValues={{name: '王滴滴', rate: 4}}
               watch={{
                 name: (value: unknown) => console.log('value', value),
               }}
@@ -284,9 +422,11 @@ const FormDemo = () => {
               }}
               changeValidate={true}
             />
+            <Spacing />
             <View>
               <Text color="primary_text">{JSON.stringify(state)}</Text>
             </View>
+            <Spacing />
             <Button
               type="primary"
               onPress={() => {
@@ -297,12 +437,15 @@ const FormDemo = () => {
               }}>
               确定
             </Button>
+            <Spacing />
             <Button type="primary" onPress={() => form.setFieldValue('age', '456')}>
               设置
             </Button>
+            <Spacing />
             <Button type="primary" onPress={() => form.resetFieldValue()}>
               重置
             </Button>
+            <Spacing />
             <Button
               type="primary"
               onPress={() => {

packages/core/src/Card/index.tsx

@@ -108,8 +108,8 @@ function createStyles({ backgroundColor = '#fff', shadowColor = '#999', selectBo
   return StyleSheet.create({
     container: {
       backgroundColor: backgroundColor,
-      padding: 15,
-      margin: 15,
+      padding: 10,
+      // margin: 10,
       marginBottom: 0,
       ...Platform.select({
         android: {

packages/core/src/Form/form.tsx

@@ -3,6 +3,8 @@ import FormItems from './formItems';
 import { Provider } from './hooks/context';
 import { FormProps } from './types';
 import { cloneDeep } from './utils';
+import { useTheme } from '@shopify/restyle';
+import { Theme } from '../theme';
 import TextArea from '../TextArea';
 import Slider from '../Slider';
 import SearchBar from '../SearchBar';
@@ -31,7 +33,7 @@ const Form = (baseProps: FormProps) => {
     changeValidate = false,
     children,
   } = baseProps;
-
+  const theme = useTheme<Theme>();
   const isMount = useRef<boolean>();
 
   const innerMethods = form.getInnerMethods(true);
@@ -65,7 +67,7 @@ const Form = (baseProps: FormProps) => {
       picker: <Picker />,
       datePicker: <DatePicker />,
       datePeriodInput: <DatePeriodInput />,
-      verificationCode: <VerificationCode outerStyle={{ backgroundColor: '#FFF' }} />,
+      verificationCode: <VerificationCode outerStyle={{ backgroundColor: theme.colors.mask }} />,
       tree: <Tree />,
     },
     changeValidate: changeValidate,