跳到主要内容

ModalForm 弹出表单

用于将其他表单封装为一个弹出表单,例如单列选择器、日期选择器都是由这个组件封装的

这里包含了

  • ModalForm 单出单个表单,作为一个表单使用,放在 Form.Item
  • ModalForms 弹出多个表单,独立内容,放在Form内任何位置

示例

import {
Header, ScrollView, TopView, Form, Card, Divider,
Cascade, ModalForm, ModalForms, DatePicker, Input, Text, CardSelect, duxappTheme, Space, Row, Column,
px
} from '@/duxuiExample'

const cascadeData = [
{
name: '分类1', value: 1, children: [
{ name: '分类1-1', value: 11 },
{ name: '分类1-2', value: 12 },
{ name: '分类1-3', value: 13 },
]
},
{
name: '分类2', value: 2, children: [
{ name: '分类2-1', value: 21 },
{ name: '分类2-2', value: 22 },
{ name: '分类2-3', value: 23 },
]
},
{
name: '分类3', value: 3, children: [
{ name: '分类3-1', value: 31 },
{ name: '分类3-2', value: 32 },
{ name: '分类3-3', value: 33 },
]
}
]

const defaultValues = {
cascade1: 32,
cascade2: [22, 23],
dateshow: '2011-03-30',
pull1: '这是默认值'
}

const PullForm = () => <Card shadow={false}>
<Column style={{ height: global.systemInfo.statusBarHeight + (process.env.TARO_ENV === 'weapp' ? 22 : 0) }} />
<Form.Item label='输入框' field='pull1' direction='vertical'>
<Input placeholder='请输入' />
</Form.Item>
<Form.Item label='cardSelect' field='pull2' direction='vertical'>
<CardSelect.Group checkedProps={{ color: duxappTheme.primaryColor, border: true }}>
<Space row wrap>
<CardSelect color={duxappTheme.textColor1} value={1} plain border={false} radiusType='round'>
<Text size={3}>选项1</Text>
</CardSelect>
<CardSelect color={duxappTheme.textColor1} value={2} plain border={false} radiusType='round'>
<Text size={3}>选项2</Text>
</CardSelect>
<CardSelect color={duxappTheme.textColor1} value={3} plain border={false} radiusType='round'>
<Text size={3}>选项3</Text>
</CardSelect>
</Space>
</CardSelect.Group>
</Form.Item>
</Card>

export default function ModalFormExample() {
return <TopView>
<Header title='ModalForm' />
<Form onSubmit={console.log} defaultValues={defaultValues}>
<ScrollView>
<Card margin verticalPadding={false}>
<Divider.Group>
<Form.Item label='日期' field='date' >
<ModalForm
renderForm={<DatePicker />}
placeholder='请选择日期'
grow
title='请选择日期'
/>
</Form.Item>
<Form.Item label='日期时间' field='datetime' >
<ModalForm
renderForm={<DatePicker mode='datetime' />}
placeholder='请选择日期时间'
grow
title='请选择日期时间'
/>
</Form.Item>
<Form.Item label='弹出级联选择' field='cascade3' >
<ModalForm
renderForm={<Cascade data={cascadeData} level={2} mode='checkbox' theme='fill' anyLevel style={{ height: px(800) }} />}
placeholder='请选择等级'
grow
title='级联选择'
>

</ModalForm>
</Form.Item>
<ModalForms
side='right'
renderForm={<ScrollView>
<PullForm />
</ScrollView>}
>
<Text style={{ padding: 20 }}>弹出多个表单</Text>
</ModalForms>
<ModalForms
side='right'
renderForm={<>
<ScrollView>
<PullForm />
</ScrollView>
<Row>
<ModalForms.Reset>
<Text>重制</Text>
</ModalForms.Reset>
<ModalForms.Submit>
<Text>提交</Text>
</ModalForms.Submit>
</Row>
</>}
showButton={false}
>
<Text style={{ padding: 20 }}>弹出多个表单 自定义按钮</Text>
</ModalForms>
</Divider.Group>
</Card>
</ScrollView>
</Form>
</TopView>
}

Props

value

类型必填默认值
any

onChange

值变化时的回调函数

类型必填默认值
(value: any) => void

renderForm

渲染表单的组件,例如你需要封装Input就传入 <Input />,他需要是一个表单组件,也就是说他要存在 value属性和onChange事件

类型必填默认值
ReactElement

getValue

获取value的显示值,如果是你自定义的表单,value不是你想要显示的值,你可以传入一个函数来返回要显示的值

函数会把当前的value传入,需要返回要显示给用户的字符串

类型必填默认值
(value: any) => string

placeholder

提示文本

类型必填默认值
string请选择

side

弹出位置

类型必填默认值
enum('bottom', 'top', 'left', 'right')bottom

title

弹出后顶部显示的标题

renderHeader

内容显示在renderForm的上边

类型必填默认值
ReactElement

renderFooter

内容显示在renderForm的下边,如果你需要自定义提交按钮,可以将它放在这个位置

类型必填默认值
ReactElement

childPropsValueKey

传递给子内容的value的Props的名称

如果你要自定义显示,这可以用到这个属性,例如像下面这样使用

<ModalForm
renderForm={<DatePicker mode='month' />}
childPropsValueKey='value'
title='月份选择'
value={date}
onChange={setDate}
>
<Dates />
</ModalForm>

const Dates = ({ value, ...props }) => {
return <Row className='ph-1 gap-1 ca-bg' justify='end' shrink items='center' {...props}>
<Text color={2} size={1} align='right'>{value}</Text>
<ChiAnIcon name='calendar' color={duxappTheme.textColor2} size={40} />
</Row>
}

需要注意的是需要接收 onClick 事件,并且赋值给你的组件的点击事件,否则将无法点击弹出

类型必填默认值
string

showButton

是否显示按钮,显示提交和重置按钮,关闭后你可以自定义显示这两个按钮

类型必填默认值
booleantrue

autoSubmit

是否在值发生改变时自动提交,也就是不需要点击提交就将值赋值到表单中

如果设置为true 提交和重置按钮也不会显示

类型必填默认值
booleanfalse

resetMode

重置按钮重置的方式

  • default 重置到Form设置的默认值 此属性是默认值
  • clear 清除value 设置为undefined
  • prev 重置到上一次的value
类型必填默认值
enum('default', 'clear', 'prev')default

onSubmitBefore

可以监听用户提交,传入要提交的值,通过抛出错误的方式阻止用户提交,这个方法可以是同步,也可以是异步的

类型必填默认值
(val: any) => Promise<{}>

ModalForm.Reset Props

重置按钮,showButton设置为fasle后,你可以自定义重置按钮

默认使用 Button 渲染按钮,如果你要自定义按钮内容,请使用一个可点击的元素作为子元素

继承自ButtonProps

resetMode

重置按钮重置的方式

  • default 重置到Form设置的默认值 此属性是默认值
  • clear 清除value 设置为undefined
  • prev 重置到上一次的value
类型必填默认值
enum('default', 'clear', 'prev')default

children

子元素

类型必填默认值
ReactElement

ModalForm.Submit Props

提交按钮,showButton设置为fasle后,你可以自定义提交按钮

默认使用 Button 渲染按钮,如果你要自定义按钮内容,请使用一个可点击的元素作为子元素

继承自ButtonProps

value

设置提交的值,如果设置了提交的时候将按照此值提交

类型必填默认值
any

defaultValue

默认值

类型必填默认值
any

children

子元素

类型必填默认值
ReactElement

ModalForms Props

用于弹出多个表单,由于context的作用域问题,当你表单中的一部分需要弹出显示的时候,需要用这个组件来进行弹出

如果你使用了PullView、Modal等弹出,填写的值将不会在表单中

renderForm

弹出的表单内容,你可以自定义弹出任何内容

类型必填默认值
ReactElement

side

弹出位置

类型必填默认值
enum('bottom', 'top', 'left', 'right')bottom

title

弹出后顶部显示的标题

showButton

是否显示按钮,显示提交和重置按钮,关闭后你可以自定义显示这两个按钮

类型必填默认值
booleantrue

autoSubmit

是否在值发生改变时自动提交,也就是不需要点击提交就将值赋值到表单中

如果设置为true 提交和重置按钮也不会显示

类型必填默认值
booleanfalse

resetMode

重置按钮重置的方式

  • default 重置到Form设置的默认值 此属性是默认值
  • clear 清除value 设置为undefined
  • prev 重置到上一次的value
类型必填默认值
enum('default', 'clear', 'prev')default

children

子元素,需要是一个可点击的单个元素

类型必填默认值
ReactElement

onSubmitBefore

可以监听用户提交,传入要提交的值,通过抛出错误的方式阻止用户提交,这个方法可以是同步,也可以是异步的

类型必填默认值
(val: {[key: string]: any}) => Promise<{}>

ModalForms.Reset Props

重置按钮,showButton设置为fasle后,你可以自定义重置按钮

默认使用 Button 渲染按钮,如果你要自定义按钮内容,请使用一个可点击的元素作为子元素

继承自ButtonProps

resetMode

重置按钮重置的方式

  • default 重置到Form设置的默认值 此属性是默认值
  • clear 清除value 设置为undefined
  • prev 重置到上一次的value
类型必填默认值
enum('default', 'clear', 'prev')default

children

子元素

类型必填默认值
ReactElement

ModalForms.Submit Props

提交按钮,showButton设置为fasle后,你可以自定义提按钮

默认使用 Button 渲染按钮,如果你要自定义按钮内容,请使用一个可点击的元素作为子元素

继承自ButtonProps

value

设置提交的值,如果设置了提交的时候将按照此值提交

类型必填默认值
any

children

子元素

类型必填默认值
ReactElement