@flatbiz/antd

import { TAny, TPlainObject } from '@flatbiz/utils'; import { FormItemProps, FormListFieldData, FormListOperation, FormProps } from 'antd'; import { FormListProps } from 'antd/es/form/FormList.js'; import { CSSProperties, ReactElement, ReactNode } from 'react'; declare const PresetDefaultGrid: { xs: number; sm: number; md: number; lg: number; xl: number; xxl: number; }; export type TBoxBreakpoint = "xs" | "sm" | "md" | "lg" | "xl" | "xxl"; export type Gutter = number | undefined | Partial<Record<TBoxBreakpoint, number>>; export type GutterParams = Gutter | [ Gutter, Gutter ]; export interface BoxRowProps { /** * 在不同响应尺寸下的元素占位格数 * 应用到所有Col子元素上 */ defaultGrid?: Partial<typeof PresetDefaultGrid>; /** 间距 */ gutter?: GutterParams; /** flex 布局的垂直对齐方式 */ align?: "top" | "middle" | "bottom" | "stretch"; /** flex 布局的水平排列方式 */ justify?: "start" | "end" | "center" | "space-around" | "space-between" | "space-evenly"; /** 尺寸变化回调 */ onBoxBreakpointChange?: (breakpoint: TBoxBreakpoint) => void; } export type TFormLayoutPreClassNameProps = { /** * label宽度，Form内部所有FormItem label都生效 * ``` * 1. 可设置数值 * 2. 可设置`auto`自适应 * ``` */ labelWidth?: "auto" | "70" | "80" | "90" | "100" | "110" | "120" | "130" | "140" | "150" | "160" | "170" | "180" | "190" | "200"; /** labelItem 竖直布局 */ labelItemVertical?: boolean; /** label 对齐方式 */ labelAlign?: "left" | "right"; /** formItem之间竖直间距，默认值：24 */ formItemGap?: "24" | "15" | "8" | "5" | "0"; /** * className 中可能会包含 preDefinedClassName.form.xx，优先级大于 labelWidth、labelItemVertical、labelAlign、formItemGap */ className?: string; }; export type TFormItemLayoutPreClassNameProps = { /** * label宽度，Form内部所有FormItem label都生效 * ``` * 1. 可设置数值 * 2. 可设置`auto`自适应 * ``` */ labelWidth?: "auto" | "70" | "80" | "90" | "100" | "110" | "120" | "130" | "140" | "150" | "160" | "170" | "180" | "190" | "200"; /** labelItem 竖直布局 */ labelItemVertical?: boolean; /** label 对齐方式 */ labelAlign?: "left" | "right"; /** * className 中可能会包含 preDefinedClassName.formItem.xx，优先级大于 labelWidth、labelItemVertical、labelAlign */ className?: string; }; export type FormWrapperProps<Values = any> = TFormLayoutPreClassNameProps & FormProps<Values> & { children: ReactNode; }; export type EasyFormProps = Omit<FormWrapperProps, "children"> & { /** * 定义一行显示几列（当外层宽度尺寸大于 992px（lg）时，一行显示几列）, 默认值：3 * ``` * 1. 当外层宽度尺寸小于992px（lg），为xs、sm、md情况下不受column值影响（column=1除外） * 2. 宽度尺寸定义 * xs: 宽度 < 576px * sm: 宽度 ≥ 576px * md: 宽度 ≥ 768px * lg: 宽度 ≥ 992px * xl: 宽度 ≥ 1200px * xxl: 宽度 ≥ 1600px * 3. 列数尺寸定义 * { * 1: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24, xxl: 24 }, * 2: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12, xxl: 12 }, * 3: { xs: 24, sm: 12, md: 12, lg: 8, xl: 8, xxl: 8 }, * 4: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6, xxl: 6 }, * }; * ``` */ column?: 1 | 2 | 3 | 4; /** * 强制定义一行显示几列，不考虑响应式 * ``` * 1. 优先级大于column * 2. 建议优先使用column配置 * ``` */ forceColumn?: 1 | 2 | 3 | 4; /** * Form显示宽度，可数值、可百分比；在小屏幕尺寸（xs、sm）上无效 */ width?: number | string; /** 网格间距 */ gridGutter?: BoxRowProps["gutter"]; children: ReactNode; /** * 是否为纯净模式，对EasyForm的子节点不做任何包装处理 */ isPure?: boolean; /** * true: 当前EasyForm组件不使用Antd Form包裹，可在Form、EasyForm、FormWrapper内部使用 */ nonuseFormWrapper?: boolean; /** * 栅格占位格数，最大值：24 * ``` * 1. 当前EasyForm处在 EasyForm 直接子节点中有效，即当前EasyForm在EasyForm栅格中的占位格数； * 2. 父节点使用属性值，当前节点不使用属性值 * ``` */ span?: number; }; export type FormItemWrapperProps = Omit<FormItemProps, "hidden" | "children" | "noStyle"> & TFormItemLayoutPreClassNameProps & { wrapper?: (children: ReactNode) => ReactElement; /** 设置wrapper后，before、after失效 */ before?: ReactNode; /** 设置wrapper后，before、after失效 */ after?: ReactNode; /** 设置 before、after 属性的包装结构style */ beforeAfterStyle?: CSSProperties; /** value 序列化处理 */ inputNormalize?: (value?: TAny) => TAny; /** * onChange 参数序列化处理 * 如果设置 normalize 属性，outputNormalize将失效 */ outputNormalize?: (value?: TAny) => TAny; /** * 隐藏 Form.Item，同时清除 Form.Item 值 * ``` * 1.与 dependencies 属性配合使用，可实现当前FormItemWrapper的显示隐藏 * 2.提交不校验rules * ``` */ isClear?: boolean | ((formValues: TPlainObject) => boolean); /** * 隐藏 Form.Item，不会清除 Form.Item 值 * ``` * 1.与 dependencies 属性配合使用，可实现当前FormItemWrapper的显示隐藏 * 2.提交会校验rules * ``` */ hidden?: boolean | ((formValues: TPlainObject) => boolean); /** * 栅格占位格数，最大值：24 * ``` * 1. 当前FormItemWrapper处在 EasyForm 直接子节点中有效，即FormItemWrapper在EasyForm栅格中的占位格数； * 2. 父节点使用属性值，当前节点不使用属性值 * ``` */ span?: number; /** 不支持函数式写法，如果需要使用dependencies获取表单值，可使用FormItemWrapperDependencies 组件 */ children?: ReactNode; /** * ``` * 1. 设置noStyle后，可能会导致 FromItemWrapper 在 EasyFrom 内部渲染网格布局时出现异常 * 2. 在FormItemWrapper中使用 dependencies 逻辑不需要设置 noStyle * ``` */ noStyle?: boolean; }; export type EditableCardDataIndex = string | string[]; export interface EditableCardOperation { index: number; add: (defaultValue: TPlainObject, insertIndex?: number) => void; remove: (index: number) => void; /** 同一级内移动 */ move: (fromIndex: number, toIndex: number) => void; /** 是否可编辑 */ editable: boolean; /** * 设置当前卡片指定字段值 */ setCurrentRowField: (dataIndexConfigs: { name: EditableCardDataIndex; value?: TAny; }[]) => void; /** 获取当前卡片表单数据 */ getCurrentRowData: () => TPlainObject; /** * 当前卡片表单 name * ``` * 值为 field.name * ``` */ rowFormItemName: string | number; /** * 当前卡片表单完整 name * ``` * 例如：['dataList', 0] * ``` */ rowFormItemCompleteName: Array<string | number>; /** 当前卡片表单验证，需要自行指定nameList（dataIndex数组） */ validateRowFields: (nameList: EditableCardDataIndex[]) => Promise<void>; forceUpdate: () => void; } /** 卡片内字段配置 */ export type EditableCardColumnItem = { /** * 字段key值 * ``` * 例如： * dataIndex： 'abc' * dataIndex： ['abc', 'xyz'] * ``` */ dataIndex: EditableCardDataIndex; /** 是否可编辑 */ editable: boolean | ((operation: Pick<EditableCardOperation, "index" | "getCurrentRowData">, index: number) => boolean); /** * 布局占用网格数目（最大数值24） * ``` * 1. 一行总共等分24份 * ``` */ gridNumber?: number; /** 标题 */ title?: ReactElement | string; /** * Form.Item props */ formItemProps?: Omit<FormItemWrapperProps, "children" | "name"> | ((operation: EditableCardOperation) => Omit<FormItemWrapperProps, "children" | "name">); /** * 通过 operation.editable 来判断渲染结构，其中render返回的根节点会作为 Form.Item 的children * ``` * 例如 * render: (operation) => { * if (operation.editable) { * return <Input placeholder="请输入" />; * } * return <Tag>{value}</Tag>; * } * * 如果需要额外布局，可通过 formItemProps.wrapper 实现 * formItemProps: (operation) => { * return { * wrapper: (children) => { * return ( * <FlexLayout fullIndex={[0]} direction="horizontal" gap={10}> * <div>{children}</div> * <div>额外布局</div> * </FlexLayout> * ); * }, * }; * }, * render: (operation) => { * if (operation.editable) { * return <Input placeholder="请输入" />; * } * return <Tag>{value}</Tag>; * } * ``` */ render?: (operation: EditableCardOperation) => ReactElement; /** * 会在 title 之后展示一个 icon */ tips?: string; /** 为表格header中的字段添加必填标识，如果未配置 formItemProps.rules，内部会新增一条required rule */ required?: boolean; /** * 隐藏域设置 * ``` * 如果是动态隐藏，并且在逻辑切换后无效果，可尝试执行 operation.forceUpdate() * ``` */ hidden?: (operation: EditableCardOperation, index: number) => boolean; /** 移除设置，优先级高于 hidden */ remove?: (operation: EditableCardOperation, index: number) => boolean; formItemContainer?: (formItem: ReactElement) => ReactElement | null; }; export type EditableCardProps = { className?: string; style?: CSSProperties; /** 卡片内字段配置 */ columns: EditableCardColumnItem[]; /** * 当前Edittable处在formList内部时（必填），完整formItem的name * ``` * 例如处在formList内部 * 1. formListName=[0,dataList] * 2. formListCompleteName=[xxxList, 0, dataList] * ``` */ formListCompleteName?: Array<string | number>; /** Form.List name */ formListName: Array<string | number> | string; /** 初始化值 */ initialValue?: TPlainObject[]; /** * Form.List rules * ``` rules={[ { validator: async (_, names) => { if (!names || names.length < 2) { return Promise.reject(new Error('At least 2 passengers')); } }, }, ]} * ``` */ rules?: FormListProps["rules"]; /**`默认新增按钮`新增行默认值，hiddenFooterBtn != true 有效 */ addRowDefaultValues?: () => TPlainObject; /** 自定义新增按钮名称 */ addRowBtnName?: ReactNode; /** 隐藏底部`新增`按钮 */ hiddenFooterBtn?: boolean; /** 隐藏默认删除按钮 */ hiddenDeleteBtn?: boolean; /** 顶部区域渲染 */ contentBeforeRender?: (formListOperation: FormListOperation, nextRowIndex: number) => ReactElement | null; /** 底部区域渲染 */ contentAfterRender?: (formListOperation: FormListOperation, nextRowIndex: number) => ReactElement | null; /** 设置默认卡片名称，设置 onCustomWrapper 后失效 */ onCustomGroupName?: (index: number) => string | ReactElement; /** 自定义卡片包裹，同时可自定义删除按钮、新增按钮 */ onCustomWrapper?: (children: ReactElement, extraData: { operation: FormListOperation; fields: FormListFieldData[]; fieldItem: FormListFieldData; index: number; required?: boolean; key: string; }) => ReactElement; /** 设置必填，但只有一条数据时，隐藏默认删除按钮 */ required?: boolean; /** 默认卡片样式 */ cardClassName?: string; /** 默认卡片样式 */ cardStyle?: CSSProperties; /** * 每个卡片内容都使用了 EasyForm 包裹，此处可设置 EasyFormProps * ``` * 可使用 EasyForm 中 FormItem布局 * ``` */ cardEasyFormProps?: Omit<EasyFormProps, "nonuseFormWrapper" | "isPure" | "children">; /** * 默认卡片右侧布局，设置 onCustomWrapper 后失效 * ``` * 1. 通过before 、after自定义删除按钮左右布局 * cardExtraRender={(extraData)=>{ * return { * before: [<div>1</div>, <div>2</div>], * after: [<div>3</div>, <div>4</div>], * } * }} * 2. 返回ReactElement，可自定义右侧布局 * cardExtraRender={(extraData)=>{ * return <div>111</div> * }} * ``` */ cardExtraRender?: (extraData: { operation: FormListOperation; fields: FormListFieldData[]; fieldItem: FormListFieldData; index: number; required?: boolean; key: string; }) => { before?: ReactElement[]; after?: ReactElement[]; } | ReactElement; }; /** * 使用FormList实现可编辑卡片 * ``` * 1. 必须在外部包裹Form组件或者EasyForm组件 * 2. 行内需要联动逻辑可使用 column.render.operation.setCurrentRowField 方法 * 3. 可使用DragEditableCard组件实现拖拽排序 * * demo * https://fex.qa.tcshuke.com/docs/admin/main/form/grid * ``` */ export declare const EditableCard: (props: EditableCardProps) => import("react").JSX.Element; export {};