@flatbiz/antd

import { TAny, TPlainObject } from '@flatbiz/utils'; import { DatePicker, FormItemProps, FormListFieldData, FormListOperation, GetProps, InputNumberProps, InputProps, PopoverProps, RadioGroupProps, SelectProps, SwitchProps, TableProps, TooltipProps, UploadProps } from 'antd'; import { PickerProps } from 'antd/es/date-picker/generatePicker'; import { FormListProps } from 'antd/es/form'; import { ColumnsType } from 'antd/es/table'; import { CheckboxGroupProps } from 'antd/lib/checkbox'; import { TextAreaProps } from 'antd/lib/input'; import { UploadChangeParam } from 'antd/lib/upload'; import { UploadFile } from 'antd/lib/upload/interface.js'; import { CSSProperties, ReactElement, ReactNode } from 'react'; export type TipsWrapperProps = { gap?: number; className?: string; style?: CSSProperties; children?: ReactNode; icon?: ReactElement; /** Icon添加点击事件，设置hoverTips后失效 */ onClick?: (event: any) => void; /** * 提示效果类型 * ``` * 1. popover 气泡卡片，内容通过popoverProps设置 * 2. tooltip 文字提示，内容通过tooltipProps设置 * ``` */ tipType?: "popover" | "tooltip"; popoverProps?: PopoverProps; tooltipProps?: TooltipProps; trigger?: "icon" | "all"; }; export type TDayjsDateType = "YYYY-MM-DD HH:mm:ss" | "YYYY-MM-DD HH:mm" | "YYYY-MM-DD HH" | "YYYY-MM-DD" | (string & {}); export type DatePickerWrapperProps = Omit<PickerProps<TAny>, "value" | "onChange" | "format"> & { /** 默认格式为 'YYYY-MM-DD' */ value?: string; onChange?: (value?: string) => void; disabledDateConfig?: { minDate?: TDayjsDateType; maxDate?: TDayjsDateType; /** 禁用小时刻度列表，与日期无关 */ disabledHourList?: number[]; /** 禁用分钟刻度列表，与日期无关 */ disabledMinuteList?: number[]; /** 禁用秒钟刻度列表，与日期无关 */ disabledSecondList?: number[]; }; /** 可自定义格式 */ format?: TDayjsDateType; /** value 输出适配 */ outputNormalize?: (value?: TAny) => TAny; /** value 输入适配 */ inputNormalize?: (value?: TAny) => string | undefined; }; export type RangePickerDateProps = GetProps<typeof DatePicker.RangePicker>; export type DateRangePickerWrapperProps = Omit<RangePickerDateProps, "value" | "onChange" | "onCalendarChange" | "format"> & { value?: [ string, string ]; onChange?: (value?: [ string, string ]) => void; /** * 1. minDate、maxDate 与 format格式相同；默认：YYYY-MM-DD * 2. maxDays 最大可选的天数 */ disabledDateConfig?: { minDate?: TDayjsDateType; maxDate?: TDayjsDateType; maxDays?: number; /** 禁用小时刻度列表，与日期无关 */ disabledHourList?: number[]; /** 禁用分钟刻度列表，与日期无关 */ disabledMinuteList?: number[]; /** 禁用秒钟刻度列表，与日期无关 */ disabledSecondList?: number[]; }; format?: TDayjsDateType; /** value 输出适配 */ outputNormalize?: (value: [ string, string ]) => TAny; /** value 输入适配 */ inputNormalize?: (value?: TAny) => [ string, string ] | undefined; }; export type TRequestStatus = "request-init" | "request-progress" | "request-success" | "request-error" | "no-dependencies-params"; export type TRequestStatusProps = { status?: TRequestStatus; errorButton?: ReactElement; messageConfig?: Partial<Record<TRequestStatus, string>>; loading?: boolean; }; export type SelectorWrapperValue = string | number | Array<string | number> | TPlainObject<string | number> | Array<TPlainObject<string | number>>; export type SelectorServiceConfig = { params?: TPlainObject; /** 与 params 配合使用 */ requiredParamsKeys?: string[]; onRequest?: (params?: TAny) => Promise<TAny>; /** * 响应数据适配器 */ onRequestResultAdapter?: (respData: TAny) => TPlainObject[]; }; export type SelectorWrapperProps = Omit<SelectProps, "onSearch" | "notFoundContent" | "options" | "fieldNames" | "onChange" | "value" | "loading" | "mode"> & { /** 不支持 tags 模式，tags模式请使用 SelectorWrapperSimple 组件 */ mode?: "multiple"; /** key值，相同的key 同页面可共用缓存数据 */ modelKey: string; /** * 参数Key映射 * ``` * 1. 默认值：value=value、label=label、disabled=disabled * 2. list 为 onRequest 返回数据中列表key值，可多级取值，例如： 'a.b.c' * 3. 配置 serviceConfig.onRequestResultAdapter后，fieldNames.list配置失效 * 4. 如果没有配置list，可说明接口返回为数组 * ``` */ fieldNames?: { list?: string; label?: string; value?: string; disabled?: string; }; /** * 请求服务需求的数据 */ serviceConfig?: SelectorServiceConfig; /** * 同步设置选择器选项列表 * ``` * 1. 如果配置fieldNames，会转换后使用 * 2. 值为undefined、null不会更新，需要清空可传递空数组 * ``` */ selectorList?: TPlainObject[]; /** * select 数据源发生变更时触发，第一次不调用 */ onSelectorListChange?: (dataList: TPlainObject[]) => void; /** select 数据源发生变更时触发，每次都会调用 */ onSelectorListAllChange?: (dataList: TPlainObject[]) => void; /** * 通过服务获取数据异常回调 */ onSelectorRequestError?: (error: Error) => void; /** * 添加全部选项 * ``` * 1. 默认值label="全部"，value="" * 2. 可配置label、value * ``` */ showAllOption?: true | { label: string; value: string | number; }; onLabelRenderAdapter?: (dataItem: TPlainObject) => string | ReactElement; onChange?: (value?: SelectorWrapperValue, selectedList?: TPlainObject[] | TPlainObject) => void; showIcon?: boolean; /** select option添加图标；与showIcon组合使用 */ icon?: (data: TPlainObject, index: number) => ReactElement; requestMessageConfig?: TRequestStatusProps["messageConfig"]; /** * value格式 *``` * 1. string 、number * 2. Array<string | number> * 3. lableInValue = true，根据fieldNames配置格式 * 4. lableInValue = true，Array<fieldNames配置> * ``` */ value?: SelectorWrapperValue; /** * 使用缓存，默认值：true * ``` * 1. true: 在 modelKey下使用请求参数缓存数据，如果相同modelKey、相同请求参数直接使用缓存数据 * 2. false: 每次都调用接口，不参与缓存数据、不使用缓存数据 * 3. useCache=false 在 serviceConfig.requiredParamsKeys.length > 0 有效 * ``` */ useCache?: boolean; }; export type SwitchWrapperValue = string | number | boolean; export type SwitchWrapperProps = Omit<SwitchProps, "checked" | "defaultChecked" | "onChange" | "value"> & { value?: SwitchWrapperValue; checkedValue: SwitchWrapperValue; unCheckedValue: SwitchWrapperValue; onChange?: (value: SwitchWrapperValue) => void; tooltipProps?: Omit<TooltipProps, "title">; tooltipTitle?: string | ((value?: SwitchWrapperValue) => string | undefined); serviceConfig?: { onRequest: (value: SwitchWrapperValue) => TAny; message?: { success?: string; defaultError?: string; }; }; }; export type UploadWrapperProps<T extends TPlainObject = TPlainObject> = { value?: T[] | T; onChange?: (value?: T[]) => void; onUploadError?: (message?: string) => void; onUploadChange?: (info: UploadChangeParam<UploadFile>) => void; /** * 属性取值映射 */ fieldNames?: { uid: string; name?: string; url?: string; /** 文件大小 */ size?: string | number; }; /** * 接口响应数据适配器，如果配置了fieldNames，适配器返回值会再进过fieldNames转换 */ onRequestResultAdapter?: (respData: TAny) => TPlainObject; /** 操作触发显示文本 */ triggerText?: string; /** 超过maxCount 隐藏上传入口 */ limitHidden?: boolean; /** * 自动提交，默认：true * ``` * 1. 自定义beforeUpload配置后 autoSubmit 失效 * ``` */ autoSubmit?: boolean; /** 图片预览开关, 重写 onPreview 方法后失效 */ imagePreviewSwitch?: boolean; /** 图片预览文件类型，默认：['png', 'jpg', 'jpeg', 'gif'] */ imagePreviewAccept?: string[]; /** * 配置文件额外操作 * ``` * 额外操作超过两项后，listType为 picture-card、picture-circle 时会出现显示异常，需要自行修改覆盖样式 * ``` */ extraOperate?: { icon: ReactElement; onClick: (file: UploadFile, fileList: UploadFile[], e: any) => void; }[]; } & Omit<UploadProps, "onChange" | "fileList">; export type EditableTableName = string | number | Array<string | number>; export type EditableTableRecordType = FormListFieldData & { operation: FormListOperation; }; export type EditableInputConfig = { type: "input"; editableComptProps?: InputProps; }; export type EditableInputNumberConfig = { type: "inputNumber"; editableComptProps?: InputNumberProps; }; export type EditableSelectWrapperConfig = { type: "selectorWrapper"; editableComptProps: SelectorWrapperProps; }; export type EditableDatePickerWrapperConfig = { type: "datePickerWrapper"; editableComptProps?: DatePickerWrapperProps; }; export type EditableDateRangePickerWrapperConfig = { type: "dateRangePickerWrapper"; editableComptProps?: DateRangePickerWrapperProps; }; export type EditableCheckboxGroupConfig = { type: "checkboxGroup"; editableComptProps: CheckboxGroupProps; }; export type EditableRadioGroupConfig = { type: "radioGroup"; editableComptProps: RadioGroupProps; }; export type EditableTextareaConfig = { type: "textArea"; editableComptProps: TextAreaProps; }; export type EditableFileUploadConfig = { type: "uploadWrapper"; editableComptProps: UploadWrapperProps; }; export type EditableSwitchWrapperConfig = { type: "switchWrapper"; editableComptProps: SwitchWrapperProps; }; /** * 自定义编辑组件 * ``` * 1.需要处理Form.Item * 2. 例如 * editableConfig: { type: 'custom', editableComptProps: (props) => { return ( <Form.Item name={props.name}> <Input /> </Form.Item> ); }, }, ``` */ export type EditableCustomConfig = { type: "custom"; editableComptProps: (props: { name: Array<number | string>; editable?: boolean; completeName: Array<number | string>; tableRowIndex: number; }) => ReactElement; }; export type EditableTypeConfig = EditableCustomConfig | EditableInputConfig | EditableSelectWrapperConfig | EditableDatePickerWrapperConfig | EditableDateRangePickerWrapperConfig | EditableCheckboxGroupConfig | EditableTextareaConfig | EditableInputNumberConfig | EditableRadioGroupConfig | EditableFileUploadConfig | EditableSwitchWrapperConfig; export type FieldSingleConfig = { editable?: boolean | ((data: { tableRowIndex: number; }) => boolean); editableConfig?: EditableTypeConfig; /** * 当editableConfig type=custom时，此配置无效 */ formItemProps?: Omit<FormItemProps, "name">; /** * 自定义非编辑渲染 * 1. 当editableConfig type=custom时，此配置无效 * 2. 只在editable=false的情况下有效 * 3. 同级配置 editableConfigList后，同级render配置失效 * 4. checkboxGroup、radioGroup、selectorWrapper第二次参数为options数组 */ render?: (params?: TAny, other?: TAny) => ReactNode; }; export type FormListItemMethodOperateProps = { tableRowIndex: number; add: FormListOperation["add"]; remove: () => void; formListItemIndex: number; value: TAny; }; export type FormListMethodOperateProps = { tableRowIndex: number; add: FormListOperation["add"]; value: TAny; }; export type FormListConfig = { editableConfigList: Array<FieldSingleConfig & { fieldName: string; }>; onFormListBeforeRender?: (data: FormListMethodOperateProps) => ReactElement | null; onFormListAfterRender?: (data: FormListMethodOperateProps) => ReactElement | null; onFormListItemBeforeRender?: (data: FormListItemMethodOperateProps) => ReactElement | null; onFormListItemAfterRender?: (data: FormListItemMethodOperateProps) => ReactElement | null; deleteOperateRender?: (data: { remove: () => void; formListItemIndex: number; }) => ReactElement; }; export type fieldConfigFunctionParams = { tableRowIndex: number; name: EditableTableName; tableRowName: EditableTableName; getTableRowData: () => TPlainObject; }; /** * antd 默认render功能此处不能使用 */ export type EditableTableColumn = Omit<ColumnsType["0"], "render"> & { /** * @description 请使用 tipsWrapperProps 属性配置 * ``` * 会在 title 之后展示一个 icon，hover 之后提示一些信息 * 1. title为string类型、ReactElement有效 * 2. hoverArea 默认值：icon * ``` */ /** * 会在 title 之后展示一个 icon * ``` * 1. title为string类型有效 * 2. 可为icon添加提示效果 * 3. 可为icon添加点击事件 * ``` */ tipsWrapperProps?: string | TipsWrapperProps; dataIndex?: string; fieldConfig?: FieldSingleConfig | FormListConfig | ((data: fieldConfigFunctionParams) => FieldSingleConfig | FormListConfig); /** 隐藏域字段 */ hiddenField?: { dataIndex: string; } | { dataIndex: string; }[]; /** * 渲染中间件，如果renderMiddleware返回值为ReactElement格式，则会终止后续逻辑，fieldConfig配置将失效 * ``` * 1. tableRowIndex: 当前row的索引值 * 2. name: 当前table单元格的form.item的name值 * 3. operation Form.List的操作函数 * 4. 对 table children column渲染无效 * ``` */ renderMiddleware?: (item: { tableRowIndex: number; name: EditableTableName; tableRowName: EditableTableName; operation: FormListOperation; index: number; getTableRowData: () => TPlainObject; }) => ReactElement | null; /** table datasource children column 自定义渲染 */ tableChildrenColumnRender?: (value: TAny, record: TPlainObject, index: number) => ReactElement | null; /** 为表格header中的字段添加必填标识，无验证拦截功能 */ required?: boolean; }; export type EditableTableProps = { /** FormList name属性 */ name: EditableTableName; /** * 当前Edittable处在formList内部时（必填），完整formItem的name * ``` * 例如处在formList内部 * 1. name=[0,dataList] * 2. completeName=[xxxList, 0, dataList] * ``` */ completeName?: Array<string | number>; /** * 表格行数据，唯一值字段Key * ``` * 1. 如果数据中没有可前端添加key * 2. 有问题可咨询 xg15472 * ``` */ uidFieldKey: string; /** * ``` * antd table属性 * 1. 新增cellVerticalAlign，单元格竖直方向对齐方式，设置table column onCell属性后失效 * ``` */ tableProps?: Omit<TableProps<EditableTableRecordType>, "dataSource" | "columns" | "rowKey"> & { cellVerticalAlign?: "baseline" | "middle" | "top" | "bottom"; }; columns: EditableTableColumn[]; onTableBeforeRender?: (formListOperation: FormListOperation, nextRowIndex: number) => ReactElement | null; /** * 设置后，将覆盖底部`新增`按钮 */ onTableAfterRender?: (formListOperation: FormListOperation, nextRowIndex: number) => ReactElement | null; /** 新增行默认值，自定义onTableAfterRender后失效 */ getAddRowDefaultValues?: () => TPlainObject; /** 隐藏底部`新增`按钮，设置 onTableAfterRender后失效 */ hiddenFooterBtn?: boolean; /** * Form.List rules * ``` rules={[ { validator: async (_, names) => { if (!names || names.length < 2) { return Promise.reject(new Error('At least 2 passengers')); } }, }, ]} * ``` */ rules?: FormListProps["rules"]; /** 空效果显示尺寸，默认值：small */ emptyShowSize?: "small" | "large"; className?: string; style?: CSSProperties; }; export type DragEditableTableProps = EditableTableProps & { /** * 拖拽图标自定义，默认使用 DragOutlined 图标 */ dragIcon?: ReactElement; /** 禁用拖拽 */ disabledDrag?: boolean; /** * 表格数据唯一值字段Key * ``` * ``` */ uidFieldKey: string; /** * 拖拽结束事件 * ``` * dataSource: 拖拽完成后的数据源 * dragData * 1. activeId 拖拽ID * 2. activeIndex 拖拽起始表格数组索引值 * 3. overIndex 拖拽结束表格数组索引值 * ``` */ onDragChange?: (dataSource: TPlainObject[], dragData: { activeId: string | number; overId?: string | number; activeIndex: number; overIndex: number; }) => void; }; /** * 可拖拽编辑表格 * @deprecated 已过期，请使用 DragEditableTablePro组件 * ``` * 1. 表格数据必须要有唯一值字段，通过参数 uidFieldKey 告诉组件 * 2. Table 参数 components.body.row 被组件内部使用 * ``` */ export declare const DragEditableTable: (props: DragEditableTableProps) => import("react").JSX.Element; export {};