fix: 【Form】组件增加displayType 横向布局

uiwjs · Jul 1, 2023 · b795000 · b795000
1 parent fb7e457
commit b795000
Show file tree

Hide file tree

Showing 7 changed files with 115 additions and 25 deletions.
diff --git a/example/examples/src/routes/Form/index.tsx b/example/examples/src/routes/Form/index.tsx
@@ -1,6 +1,6 @@
 import React, {useState, useRef} from 'react';
 import {Form, Button, Toast, Slider, Flex, Text, Spacing} from '@uiw/react-native';
-import {View} from 'react-native';
+import {View, TextInput} from 'react-native';
 import Layout, {Container} from '../../Layout';
 const {Body, Footer, Card} = Layout;
 
@@ -12,6 +12,18 @@ interface actionProps {
   moveToBottom: () => void;
 }
 
+const Input = ({value, onChange, ...others}: any) => {
+  return (
+    <TextInput
+      value={value}
+      onChangeText={value => {
+        onChange?.(value);
+      }}
+      {...others}
+    />
+  );
+};
+
 const FormDemo = () => {
   const form = Form.useForm();
   const ref = useRef();
@@ -386,6 +398,9 @@ const FormDemo = () => {
           <Card title="卡片模式">
             <Form
               form={form}
+              cardProps={{borderRadius: 10}}
+              displayType="row"
+              labelStyle={{width: 120}}
               schema={schemaCard}
               mode="card"
               initialValues={{name: '王滴滴', rate: 4}}
@@ -409,6 +424,13 @@ const FormDemo = () => {
               确定
             </Button>
           </Card>
+          <Card title="Form.Item">
+            <Form type="custom" mode="card" displayType="row" labelStyle={{width: 120}} form={form} changeValidate={true}>
+              <Form.Item required field="name" name="姓名" validate={val => (!val ? '请输入姓名' : '')}>
+                <Input placeholder="请输入" />
+              </Form.Item>
+            </Form>
+          </Card>
           <Card title="表单项类型">
             <Form
               form={form}

diff --git a/packages/core/src/Form/comps/container.tsx b/packages/core/src/Form/comps/container.tsx
@@ -1,16 +1,26 @@
 import React from 'react';
-import Card from '../../Card';
-import { SafeAreaView } from 'react-native';
+import Card, { CardProps } from '../../Card';
+import { SafeAreaView, ViewStyle } from 'react-native';
 import styles from '../styles';
 import { useTheme } from '@shopify/restyle';
 import { Theme } from '../../theme';
 
-const Container = ({ mode, children }: { mode: 'card' | 'default'; children?: React.ReactNode }) => {
+const Container = ({
+  containerStyle,
+  cardProps,
+  mode,
+  children,
+}: {
+  containerStyle?: ViewStyle;
+  cardProps?: CardProps;
+  mode: 'card' | 'default';
+  children?: React.ReactNode;
+}) => {
   const theme = useTheme<Theme>();
   return mode === 'card' ? (
-    <Card>{children}</Card>
+    <Card {...cardProps}>{children}</Card>
   ) : (
-    <SafeAreaView style={{ backgroundColor: theme.colors.background }}>{children}</SafeAreaView>
+    <SafeAreaView style={{ backgroundColor: theme.colors.background, ...containerStyle }}>{children}</SafeAreaView>
   );
 };
 

diff --git a/packages/core/src/Form/comps/label.tsx b/packages/core/src/Form/comps/label.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import Flex from '../../Flex';
 import { FormItemsProps } from '../types';
-import { StyleSheet } from 'react-native';
+import { StyleSheet, ViewStyle } from 'react-native';
 import Text from '../../Typography/Text';
 
-const Label = ({ v }: { v: Partial<FormItemsProps> }) => {
+const Label = ({ v, labelStyle }: { v: Partial<FormItemsProps>; labelStyle?: ViewStyle }) => {
   return (
-    <Flex>
+    <Flex align="center" justify="start" style={{ ...labelStyle }}>
       {v.required && <Text style={{ color: 'red', marginRight: 5 }}>*</Text>}
-      <Text color="primary_text" style={styles.label} {...v.attr}>
+      <Text color="primary_text" numberOfLines={1} ellipsizeMode="tail" style={[styles.label]} {...v.attr}>
         {v.name}
       </Text>
     </Flex>

diff --git a/packages/core/src/Form/form.tsx b/packages/core/src/Form/form.tsx
@@ -31,6 +31,10 @@ const Form = (baseProps: FormProps) => {
     watch,
     customComponentList = {},
     changeValidate = false,
+    cardProps = {},
+    containerStyle,
+    displayType = 'column',
+    labelStyle = {},
     children,
   } = baseProps;
   const theme = useTheme<Theme>();
@@ -62,7 +66,7 @@ const Form = (baseProps: FormProps) => {
       search: <SearchBar />,
       switch: <Switch />,
       checkBox: <CheckBox />,
-      stepper: <Stepper value={0} onChange={() => { }} />,
+      stepper: <Stepper value={0} onChange={() => {}} />,
       treeSelect: <TreeSelect options={[]} />,
       picker: <Picker />,
       datePicker: <DatePicker />,
@@ -71,6 +75,10 @@ const Form = (baseProps: FormProps) => {
       tree: <Tree />,
     },
     changeValidate: changeValidate,
+    cardProps: cardProps,
+    containerStyle: containerStyle,
+    displayType: displayType,
+    labelStyle: labelStyle,
   };
 
   return <Provider contextProps={contextProps}>{type === 'json' ? <FormItems schema={schema} /> : children}</Provider>;

diff --git a/packages/core/src/Form/formItems.tsx b/packages/core/src/Form/formItems.tsx
@@ -8,6 +8,7 @@ import FormList from './formList';
 import Container from './comps/container';
 import { View } from 'react-native';
 import styles from './styles';
+import Flex from '../Flex';
 
 const FormItems = ({ schema = [] }: Pick<FormProps, 'schema'>) => {
   const {
@@ -16,8 +17,11 @@ const FormItems = ({ schema = [] }: Pick<FormProps, 'schema'>) => {
     watch,
     customComponentList,
     changeValidate,
+    cardProps,
+    containerStyle,
+    displayType,
+    labelStyle,
   } = useContext(Context);
-
   const change = (field: KeyType, value: unknown) => {
     updateStore?.({ store: { ...store, [field]: value } });
     watch && watch[field]?.(value);
@@ -49,19 +53,37 @@ const FormItems = ({ schema = [] }: Pick<FormProps, 'schema'>) => {
       if (v.hide) {
         return null;
       }
-      return (
-        <View key={i} style={styles.form_items_container}>
+      let child = (
+        <View style={[styles.form_items]}>
+          <Label v={v} />
+          {_renderComponent(v)}
+          <Tip v={v} />
+        </View>
+      );
+      if (displayType === 'row') {
+        child = (
           <View style={[styles.form_items]}>
-            <Label v={v} />
-            {_renderComponent(v)}
+            <Flex justify="between" align="center">
+              <Label v={v} labelStyle={labelStyle} />
+              <View style={{ flex: 1 }}>{_renderComponent(v)}</View>
+            </Flex>
             <Tip v={v} />
           </View>
+        );
+      }
+      return (
+        <View key={i} style={styles.form_items_container}>
+          {child}
         </View>
       );
     });
   };
 
-  return <Container mode={mode}>{_render()}</Container>;
+  return (
+    <Container containerStyle={containerStyle} cardProps={cardProps} mode={mode}>
+      {_render()}
+    </Container>
+  );
 };
 
 export default FormItems;
diff --git a/packages/core/src/Form/formchildItem.tsx b/packages/core/src/Form/formchildItem.tsx
@@ -4,6 +4,7 @@ import { Context } from './hooks/context';
 import { KeyType, FormItemsProps } from './types';
 import Label from './comps/label';
 import Tip from './comps/tip';
+import Flex from '../Flex';
 import Container from './comps/container';
 import styles from './styles';
 
@@ -14,6 +15,10 @@ const formchildItem = (props: Partial<FormItemsProps> & { field: string; childre
     innerMethods: { store = {}, updateStore, innerValidate },
     watch,
     changeValidate,
+    cardProps,
+    containerStyle,
+    displayType,
+    labelStyle,
   } = useContext(Context);
 
   const change = (field: KeyType, value: unknown) => {
@@ -32,15 +37,32 @@ const formchildItem = (props: Partial<FormItemsProps> & { field: string; childre
         } as any)
       : null;
   };
-  return (
-    <Container mode={mode}>
-      <View style={styles.form_items_container}>
-        <View style={[styles.form_items]}>
-          <Label v={{ name: name, required: required }} />
-          {_renderComponent(children)}
-          <Tip v={{ validate: validate, field: field }} />
-        </View>
+
+  let child = (
+    <View style={[styles.form_items]}>
+      <View style={[styles.form_items]}>
+        <Label v={{ name: name, required: required }} />
+        {_renderComponent(children)}
+        <Tip v={{ validate: validate, field: field }} />
       </View>
+    </View>
+  );
+
+  if (displayType === 'row') {
+    child = (
+      <View style={[styles.form_items]}>
+        <Flex justify="between" align="center">
+          <Label v={{ name: name, required: required }} labelStyle={labelStyle} />
+          <View style={{ flex: 1 }}>{_renderComponent(children)}</View>
+        </Flex>
+        <Tip v={{ validate: validate, field: field }} />
+      </View>
+    );
+  }
+
+  return (
+    <Container mode={mode} cardProps={cardProps} containerStyle={containerStyle}>
+      <View style={styles.form_items_container}>{child}</View>
     </Container>
   );
 };

diff --git a/packages/core/src/Form/types/index.tsx b/packages/core/src/Form/types/index.tsx
@@ -1,6 +1,8 @@
 import { RulesOption } from '@validator.tool/hook';
 import React from 'react';
 import Validator from 'validator.tool';
+import { CardProps } from '../../Card';
+import { ViewStyle, TextStyle } from 'react-native';
 
 type KeyType = string | number | symbol;
 
@@ -37,6 +39,10 @@ interface FormProps<FormData = any, FieldValue = FormData[keyof FormData], Field
   changeValidate?: boolean;
   type?: 'json' | 'custom';
   children?: React.ReactElement;
+  cardProps?: CardProps;
+  containerStyle?: ViewStyle;
+  displayType?: 'row' | 'column';
+  labelStyle?: ViewStyle;
 }
 
 interface actionProps {