ArrayTable&ArrayCard

使用表格来进行数组数据的录入，数组的形式通常分为两种，字符串数组和对象数组

const ArrayTable = React.FC<Omit<IArrayCustomProps, 'renderTitle'>>

const ArrayCard = React.FC<IArrayCustomProps>

export interface IArrayRenderOptions {

// 数组工具方法

mutators: IArrayMutators;

// 当前操作行

currentIndex: number;

// 数组最大条数限制

maxLimit: number;

// 最小数据的限制

minLimit: number;

// 是否是第一项，当时第一项的时候，不应该使用moveUp方法

isFirst?: boolean;

// 是否是最后一项，当时最后一项时，不应该是用moveDown方法

isLast?: boolean;

// 是否可以删除，当数组数量小于minLimit的时候为false，其他时候为true

canDelete?: boolean;

// 是否可以新增， 当数组的数量大于maxLimit的时候为false，其他时候为true

canAdd?: boolean;

// 获取当前表格的数据

getValue: () => any;

}

export interface IArrayCustomProps {

maxLimit?: number;

minLimit?: number;

// 标题的渲染方法

renderTitle?: (options: IArrayRenderOptions) => React.ReactNode;

// 新增按钮的渲染方法

renderAddition?: (options: IArrayRenderOptions) => React.ReactNode;

// 数据为空时的渲染

renderEmpty?: (options: IArrayRenderOptions) => React.ReactNode;

// 操作区域的渲染方法

renderOperations?: (options: IArrayRenderOptions) => React.ReactNode;

}

export interface IArrayMutators {

// 新增一个

push: (newValue: any) => void;

// 最前面新增一个

unshift: (newValue: any) => void;

// 移除最前面一个

shift: () => void;

// 移除最后一个

pop: () => void

// 插入一个

insert: (index: number, newValue :any) => void

// 下移

moveDown: (index: number) => void;

// 上移

moveUp: (index: number) => void;

// 移除一个

remove: (index: number) => void;

// 移除全部

removeAll: () => void;

// 交换位置

move: (preIndex: number, nextIndex: number) => void;

// 获取空数据

getEmptyValue: (options: { type: BaseType, defaultValue: any}) => any

}

Sample

字符串数组

The fallback content to display on prerendering

---

对象数组

The fallback content to display on prerendering

---

组件部分自定义渲染

The fallback content to display on prerendering

---

复杂数组

The fallback content to display on prerendering

import React from 'react';

import { hippoComponents } from '@alife/hippo-form-library';

import { formBuilder, FormLayout, LayoutType } from '@alife/rdx-form';

import { Button } from '@alife/hippo';

const baseForm = formBuilder({

components: hippoComponents,

});

interface IModel {

users: { name: string; age: number }[];

articles: string[];

userInfo: {

email: string;

firstName: string;

lastName: string;

password: string;

birthday: string;

concat: {

name: string;

relation: string;

phone: string;

}[];

}[];

}

const CommonForms = baseForm<IModel>();

export function 字符串数组() {

return (

<CommonForms.RdxFormRoot enabledStatePreview={true}>

<CommonForms.FormItem

type='array'

componentType={'arrayTable'}

defaultValue={['']}

name='articles'

>

<CommonForms.FormItem

type='string'

title='文章标题'

></CommonForms.FormItem>

</CommonForms.FormItem>

</CommonForms.RdxFormRoot>

);

}

export function 对象数组() {

return (

<CommonForms.RdxFormRoot enabledStatePreview={true} >

<CommonForms.FormItem

type='array'

defaultValue={[{}]}

componentType={'arrayTable'}

name='users'

>

<CommonForms.FormItem type='object'>

<CommonForms.FormItem

type='string'

name='name'

title='名称'

></CommonForms.FormItem>

<CommonForms.FormItem

type='number'

name='age'

title='年龄'

componentType='numberInput'

></CommonForms.FormItem>

</CommonForms.FormItem>

</CommonForms.FormItem>

</CommonForms.RdxFormRoot>

);

}

export function 组件部分自定义渲染() {

return (

<CommonForms.RdxFormRoot enabledStatePreview={true}>

<CommonForms.FormItem

type='array'

componentType={'arrayTable'}

name='users'

componentProps={{

renderAddition: ({ mutators }) => (

<div>

<Button onClick={() => mutators.push(mutators.getEmptyValue())}>

push

</Button>

<Button onClick={() => mutators.unshift({})}>unshift</Button>

<Button onClick={() => mutators.pop()}>pop</Button>

<Button onClick={() => mutators.shift()}>shift</Button>

<Button onClick={() => mutators.clear()}>clear</Button>

</div>

),

renderEmpty: () => (

<div style={{ height: 50, lineHeight: '50px' }}>自定义空样式</div>

),

renderOperations: ({ mutators, currentIndex }) => {

return (

<div>

<div

onClick={() => {

mutators.remove(currentIndex);

}}

>

删除当前行

</div>

<div

onClick={() => {

mutators.insert(currentIndex, mutators.getEmptyValue());

}}

>

向上插入一个

</div>

<div

onClick={() => {

mutators.insert(currentIndex + 1, mutators.getEmptyValue());

}}

>

向下插入一个

</div>

</div>

);

},

}}

>

<CommonForms.FormItem type='object'>

<CommonForms.FormItem

type='string'

name='name'

title='名称'

></CommonForms.FormItem>

<CommonForms.FormItem

type='number'

name='age'

title='年龄'

componentType='numberInput'

></CommonForms.FormItem>

</CommonForms.FormItem>

</CommonForms.FormItem>

</CommonForms.RdxFormRoot>

);

}

export function 复杂数组() {

return (

<CommonForms.RdxFormRoot enabledStatePreview={true}>

<CommonForms.FormItem

type='array'

componentType={'array'}

name='userInfo'

defaultValue={[{}]}

componentProps={{

renderTitle: () => <span>用户信息项</span>,

}}

>

<CommonForms.FormItem type='object'>

<FormLayout layoutType={LayoutType.Grid} autoRow={true}>

<CommonForms.FormItem

type='string'

name='email'

title='邮箱地址'

layoutExtends={{

span: 12,

}}

></CommonForms.FormItem>

<CommonForms.FormItem

type='string'

name='firstName'

defaultValue={'赵6'}

layoutExtends={{

span: 12,

}}

title='姓名'

></CommonForms.FormItem>

<CommonForms.FormItem

type='string'

name='password'

layoutExtends={{

span: 12,

}}

defaultValue={'你猜'}

title='密码'

></CommonForms.FormItem>

<CommonForms.FormItem

type='string'

name='birthday'

defaultValue={new Date() as any}

title='出生日期'

layoutExtends={{

span: 12,

}}

componentType='date'

></CommonForms.FormItem>

</FormLayout>

<FormLayout layoutType={LayoutType.Classic} labelCol={4} wrapCol={20}>

<CommonForms.FormItem

type='array'

name='concat'

title='紧急联系人'

defaultValue={[{}]}

componentProps={{

renderAddition: (options) => (

<div

style={{

fontWeight: 500,

display: 'flex',

justifyContent: 'center',

}}

onClick={() => {

options.mutators.push({});

}}

>

新增一个紧急联系人

</div>

),

}}

componentType={'arrayTable'}

>

<CommonForms.FormItem type='object'>

<CommonForms.FormItem

type='string'

name='name'

tips='你猜有啥用'

title='名字'

layoutExtends={{

width: 80,

}}

defaultValue={'张三'}

componentType='string'

></CommonForms.FormItem>

<CommonForms.FormItem

type='string'

name='relation'

layoutExtends={{

width: 300,

}}

title='关系'

desc={'我就是一个描述'}

defaultValue={'1'}

componentProps={{

dataSource: [

{

label: '父母',

value: '1',

},

{

label: '兄弟姐妹',

value: '2',

},

{

label: '亲戚',

value: '3',

},

{

label: '朋友',

value: '4',

},

],

}}

componentType='select'

></CommonForms.FormItem>

<CommonForms.FormItem

layoutExtends={{

width: 80,

}}

type='string'

name='phone'

title='联系方式'

defaultValue={'110'}

componentType='string'

></CommonForms.FormItem>

</CommonForms.FormItem>

</CommonForms.FormItem>

</FormLayout>

</CommonForms.FormItem>

</CommonForms.FormItem>

</CommonForms.RdxFormRoot>

);

}