diff --git a/example/examples/src/routes/Form/index.tsx b/example/examples/src/routes/Form/index.tsx index b4ba54c6d..8bd45bf45 100644 --- 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 ( + { + onChange?.(value); + }} + {...others} + /> + ); +}; + const FormDemo = () => { const form = Form.useForm(); const ref = useRef(); @@ -386,6 +398,9 @@ const FormDemo = () => {
{ 确定 + + + (!val ? '请输入姓名' : '')}> + + + +
{ +const Container = ({ + containerStyle, + cardProps, + mode, + children, +}: { + containerStyle?: ViewStyle; + cardProps?: CardProps; + mode: 'card' | 'default'; + children?: React.ReactNode; +}) => { const theme = useTheme(); return mode === 'card' ? ( - {children} + {children} ) : ( - {children} + {children} ); }; diff --git a/packages/core/src/Form/comps/label.tsx b/packages/core/src/Form/comps/label.tsx index d23d6c224..bc6e4e157 100644 --- 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 }) => { +const Label = ({ v, labelStyle }: { v: Partial; labelStyle?: ViewStyle }) => { return ( - + {v.required && *} - + {v.name} diff --git a/packages/core/src/Form/form.tsx b/packages/core/src/Form/form.tsx index 5f5876632..650ed93e9 100644 --- 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(); @@ -62,7 +66,7 @@ const Form = (baseProps: FormProps) => { search: , switch: , checkBox: , - stepper: { }} />, + stepper: {}} />, treeSelect: , picker: , datePicker: , @@ -71,6 +75,10 @@ const Form = (baseProps: FormProps) => { tree: , }, changeValidate: changeValidate, + cardProps: cardProps, + containerStyle: containerStyle, + displayType: displayType, + labelStyle: labelStyle, }; return {type === 'json' ? : children}; diff --git a/packages/core/src/Form/formItems.tsx b/packages/core/src/Form/formItems.tsx index f37f9e1d0..4fff35421 100644 --- 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) => { const { @@ -16,8 +17,11 @@ const FormItems = ({ schema = [] }: Pick) => { 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) => { if (v.hide) { return null; } - return ( - + let child = ( + + + ); + if (displayType === 'row') { + child = ( - + ); + } + return ( + + {child} ); }); }; - return {_render()}; + return ( + + {_render()} + + ); }; export default FormItems; diff --git a/packages/core/src/Form/formchildItem.tsx b/packages/core/src/Form/formchildItem.tsx index e83f9cd41..a8ef4a0df 100644 --- 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 & { 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 & { field: string; childre } as any) : null; }; - return ( - - - - + + let child = ( + + + + + ); + + if (displayType === 'row') { + child = ( + + + + + + ); + } + + return ( + + {child} ); }; diff --git a/packages/core/src/Form/types/index.tsx b/packages/core/src/Form/types/index.tsx index e533866cd..821a7251d 100644 --- 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