Skip to content

Commit b795000

Browse files
ChenlingasMxChenlingasMx
committed
fix: 【Form】组件增加displayType 横向布局
1 parent fb7e457 commit b795000

File tree

7 files changed

+115
-25
lines changed

7 files changed

+115
-25
lines changed

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

Lines changed: 23 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {useState, useRef} from 'react';
22
import {Form, Button, Toast, Slider, Flex, Text, Spacing} from '@uiw/react-native';
3-
import {View} from 'react-native';
3+
import {View, TextInput} from 'react-native';
44
import Layout, {Container} from '../../Layout';
55
const {Body, Footer, Card} = Layout;
66

@@ -12,6 +12,18 @@ interface actionProps {
1212
moveToBottom: () => void;
1313
}
1414

15+
const Input = ({value, onChange, ...others}: any) => {
16+
return (
17+
<TextInput
18+
value={value}
19+
onChangeText={value => {
20+
onChange?.(value);
21+
}}
22+
{...others}
23+
/>
24+
);
25+
};
26+
1527
const FormDemo = () => {
1628
const form = Form.useForm();
1729
const ref = useRef();
@@ -386,6 +398,9 @@ const FormDemo = () => {
386398
<Card title="卡片模式">
387399
<Form
388400
form={form}
401+
cardProps={{borderRadius: 10}}
402+
displayType="row"
403+
labelStyle={{width: 120}}
389404
schema={schemaCard}
390405
mode="card"
391406
initialValues={{name: '王滴滴', rate: 4}}
@@ -409,6 +424,13 @@ const FormDemo = () => {
409424
确定
410425
</Button>
411426
</Card>
427+
<Card title="Form.Item">
428+
<Form type="custom" mode="card" displayType="row" labelStyle={{width: 120}} form={form} changeValidate={true}>
429+
<Form.Item required field="name" name="姓名" validate={val => (!val ? '请输入姓名' : '')}>
430+
<Input placeholder="请输入" />
431+
</Form.Item>
432+
</Form>
433+
</Card>
412434
<Card title="表单项类型">
413435
<Form
414436
form={form}

‎packages/core/src/Form/comps/container.tsx‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,26 @@
11
import React from 'react';
2-
import Card from '../../Card';
3-
import { SafeAreaView } from 'react-native';
2+
import Card, { CardProps } from '../../Card';
3+
import { SafeAreaView, ViewStyle } from 'react-native';
44
import styles from '../styles';
55
import { useTheme } from '@shopify/restyle';
66
import { Theme } from '../../theme';
77

8-
const Container = ({ mode, children }: { mode: 'card' | 'default'; children?: React.ReactNode }) => {
8+
const Container = ({
9+
containerStyle,
10+
cardProps,
11+
mode,
12+
children,
13+
}: {
14+
containerStyle?: ViewStyle;
15+
cardProps?: CardProps;
16+
mode: 'card' | 'default';
17+
children?: React.ReactNode;
18+
}) => {
919
const theme = useTheme<Theme>();
1020
return mode === 'card' ? (
11-
<Card>{children}</Card>
21+
<Card {...cardProps}>{children}</Card>
1222
) : (
13-
<SafeAreaView style={{ backgroundColor: theme.colors.background }}>{children}</SafeAreaView>
23+
<SafeAreaView style={{ backgroundColor: theme.colors.background, ...containerStyle }}>{children}</SafeAreaView>
1424
);
1525
};
1626

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
import React from 'react';
22
import Flex from '../../Flex';
33
import { FormItemsProps } from '../types';
4-
import { StyleSheet } from 'react-native';
4+
import { StyleSheet, ViewStyle } from 'react-native';
55
import Text from '../../Typography/Text';
66

7-
const Label = ({ v }: { v: Partial<FormItemsProps> }) => {
7+
const Label = ({ v, labelStyle }: { v: Partial<FormItemsProps>; labelStyle?: ViewStyle }) => {
88
return (
9-
<Flex>
9+
<Flex align="center" justify="start" style={{ ...labelStyle }}>
1010
{v.required && <Text style={{ color: 'red', marginRight: 5 }}>*</Text>}
11-
<Text color="primary_text" style={styles.label} {...v.attr}>
11+
<Text color="primary_text" numberOfLines={1} ellipsizeMode="tail" style={[styles.label]} {...v.attr}>
1212
{v.name}
1313
</Text>
1414
</Flex>

‎packages/core/src/Form/form.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,10 @@ const Form = (baseProps: FormProps) => {
3131
watch,
3232
customComponentList = {},
3333
changeValidate = false,
34+
cardProps = {},
35+
containerStyle,
36+
displayType = 'column',
37+
labelStyle = {},
3438
children,
3539
} = baseProps;
3640
const theme = useTheme<Theme>();
@@ -62,7 +66,7 @@ const Form = (baseProps: FormProps) => {
6266
search: <SearchBar />,
6367
switch: <Switch />,
6468
checkBox: <CheckBox />,
65-
stepper: <Stepper value={0} onChange={() => { }} />,
69+
stepper: <Stepper value={0} onChange={() => {}} />,
6670
treeSelect: <TreeSelect options={[]} />,
6771
picker: <Picker />,
6872
datePicker: <DatePicker />,
@@ -71,6 +75,10 @@ const Form = (baseProps: FormProps) => {
7175
tree: <Tree />,
7276
},
7377
changeValidate: changeValidate,
78+
cardProps: cardProps,
79+
containerStyle: containerStyle,
80+
displayType: displayType,
81+
labelStyle: labelStyle,
7482
};
7583

7684
return <Provider contextProps={contextProps}>{type === 'json' ? <FormItems schema={schema} /> : children}</Provider>;

‎packages/core/src/Form/formItems.tsx‎

Lines changed: 28 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import FormList from './formList';
88
import Container from './comps/container';
99
import { View } from 'react-native';
1010
import styles from './styles';
11+
import Flex from '../Flex';
1112

1213
const FormItems = ({ schema = [] }: Pick<FormProps, 'schema'>) => {
1314
const {
@@ -16,8 +17,11 @@ const FormItems = ({ schema = [] }: Pick<FormProps, 'schema'>) => {
1617
watch,
1718
customComponentList,
1819
changeValidate,
20+
cardProps,
21+
containerStyle,
22+
displayType,
23+
labelStyle,
1924
} = useContext(Context);
20-
2125
const change = (field: KeyType, value: unknown) => {
2226
updateStore?.({ store: { ...store, [field]: value } });
2327
watch && watch[field]?.(value);
@@ -49,19 +53,37 @@ const FormItems = ({ schema = [] }: Pick<FormProps, 'schema'>) => {
4953
if (v.hide) {
5054
return null;
5155
}
52-
return (
53-
<View key={i} style={styles.form_items_container}>
56+
let child = (
57+
<View style={[styles.form_items]}>
58+
<Label v={v} />
59+
{_renderComponent(v)}
60+
<Tip v={v} />
61+
</View>
62+
);
63+
if (displayType === 'row') {
64+
child = (
5465
<View style={[styles.form_items]}>
55-
<Label v={v} />
56-
{_renderComponent(v)}
66+
<Flex justify="between" align="center">
67+
<Label v={v} labelStyle={labelStyle} />
68+
<View style={{ flex: 1 }}>{_renderComponent(v)}</View>
69+
</Flex>
5770
<Tip v={v} />
5871
</View>
72+
);
73+
}
74+
return (
75+
<View key={i} style={styles.form_items_container}>
76+
{child}
5977
</View>
6078
);
6179
});
6280
};
6381

64-
return <Container mode={mode}>{_render()}</Container>;
82+
return (
83+
<Container containerStyle={containerStyle} cardProps={cardProps} mode={mode}>
84+
{_render()}
85+
</Container>
86+
);
6587
};
6688

6789
export default FormItems;

‎packages/core/src/Form/formchildItem.tsx‎

Lines changed: 30 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { Context } from './hooks/context';
44
import { KeyType, FormItemsProps } from './types';
55
import Label from './comps/label';
66
import Tip from './comps/tip';
7+
import Flex from '../Flex';
78
import Container from './comps/container';
89
import styles from './styles';
910

@@ -14,6 +15,10 @@ const formchildItem = (props: Partial<FormItemsProps> & { field: string; childre
1415
innerMethods: { store = {}, updateStore, innerValidate },
1516
watch,
1617
changeValidate,
18+
cardProps,
19+
containerStyle,
20+
displayType,
21+
labelStyle,
1722
} = useContext(Context);
1823

1924
const change = (field: KeyType, value: unknown) => {
@@ -32,15 +37,32 @@ const formchildItem = (props: Partial<FormItemsProps> & { field: string; childre
3237
} as any)
3338
: null;
3439
};
35-
return (
36-
<Container mode={mode}>
37-
<View style={styles.form_items_container}>
38-
<View style={[styles.form_items]}>
39-
<Label v={{ name: name, required: required }} />
40-
{_renderComponent(children)}
41-
<Tip v={{ validate: validate, field: field }} />
42-
</View>
40+
41+
let child = (
42+
<View style={[styles.form_items]}>
43+
<View style={[styles.form_items]}>
44+
<Label v={{ name: name, required: required }} />
45+
{_renderComponent(children)}
46+
<Tip v={{ validate: validate, field: field }} />
4347
</View>
48+
</View>
49+
);
50+
51+
if (displayType === 'row') {
52+
child = (
53+
<View style={[styles.form_items]}>
54+
<Flex justify="between" align="center">
55+
<Label v={{ name: name, required: required }} labelStyle={labelStyle} />
56+
<View style={{ flex: 1 }}>{_renderComponent(children)}</View>
57+
</Flex>
58+
<Tip v={{ validate: validate, field: field }} />
59+
</View>
60+
);
61+
}
62+
63+
return (
64+
<Container mode={mode} cardProps={cardProps} containerStyle={containerStyle}>
65+
<View style={styles.form_items_container}>{child}</View>
4466
</Container>
4567
);
4668
};

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { RulesOption } from '@validator.tool/hook';
22
import React from 'react';
33
import Validator from 'validator.tool';
4+
import { CardProps } from '../../Card';
5+
import { ViewStyle, TextStyle } from 'react-native';
46

57
type KeyType = string | number | symbol;
68

@@ -37,6 +39,10 @@ interface FormProps<FormData = any, FieldValue = FormData[keyof FormData], Field
3739
changeValidate?: boolean;
3840
type?: 'json' | 'custom';
3941
children?: React.ReactElement;
42+
cardProps?: CardProps;
43+
containerStyle?: ViewStyle;
44+
displayType?: 'row' | 'column';
45+
labelStyle?: ViewStyle;
4046
}
4147

4248
interface actionProps {

0 commit comments

Comments
 (0)