UNPKG

react-super

Version:
274 lines (273 loc) 8.35 kB
/// <reference types="react" /> import { TableProps } from 'rs-antd'; import { ColumnType, ExpandableConfig, TablePaginationConfig, TableRowSelection } from 'rs-antd/lib/table/interface'; import { activeProps } from './activeProps'; import { columnProps } from './columnProps'; import { containerStyleProps } from './containerStyleProps'; import { DetailProps } from './detailProps'; import { formProps } from './formProps'; import { searchBarProps } from './searchBarProps'; import { slotProps } from './slotProps'; import { tableRefProps } from './tableRefProps'; export { tableRefProps, slotProps, searchBarProps, formProps, activeProps }; declare type disabledEnum = 'add' | 'update'; export interface SuperTableProps { /** * @description ant api 优先级最高 可覆盖其它自定义属性 * @default 无 */ antProps?: TableProps<any>; /** * @description 自定义表格样式类名 * @default 无 */ className?: string; /** * @description 自定义表格样式 * @default 无 */ style?: React.CSSProperties; /** * @description 容器样式配置 * @default - */ containerStyle?: containerStyleProps; /** * @description 表格数据 * @default [] */ dataSource?: any[]; /** * @description 表格选择开关 * @default false */ selection?: boolean; /** * @description 行依赖值 * @default id */ rowKey?: string; /** * @description 排序开关,数据依赖key值,确保key是唯一值 * @default false */ sortable?: boolean; /** * @description 表格勾选配置 * @default 无 */ rowSelection?: TableRowSelection<any>; /** * @description 表格只读 * @default false */ readOnly?: boolean; /** * @description 表格插槽内容 * @default - */ children?: JSX.Element[] | JSX.Element; /** * @description 表格分页配置 * @default - */ pagination?: TablePaginationConfig | boolean; /** * @description 嵌套配置,注意:嵌套展开项内部维护,通过ref获取 * @default - */ expandable?: ExpandableConfig<any>; /** * @description 隐藏序号 * @default false */ hideSort?: boolean; /** * @description 展示模式,pure纯表格,simple去除间隔和阴影、背景 * @default default */ mode?: 'default' | 'pure' | 'simple'; /** * @description 表格表单配置项 * @default 无 */ form?: formProps; /** * @description 操作区配置项 * @default 无 */ active?: activeProps; /** * @description 列字段配置项 * @default [] */ columns: columnsProps[]; /** * @description 列字段配置项 * @default [] */ dataDetail?: DetailProps; /** * @description 过滤器 * @default - */ segmented?: segmentedProps; /** * @description 搜索栏配置项 * @default - */ searchBar?: searchBarProps; /** * @description 表格插槽集合,所有插槽请查看slotProps * @default - */ slot?: slotProps; /** * @description 排序回调 * @default 无 */ onSortChange?: (newData: number, oldData: number) => void; /** * @description 发送请求回调,搜索栏查询/分页都会触发 * @default 无 */ onRequest?: (data: any) => void; /** * @description 添加之前回调,一般用于向表单填充数据使用,return true终止操作 * @default 无 */ onBeforeAdd?: () => any | void | boolean; /** * @description 添加回调,返回表单数据,return true终止操作 * @default 无 */ onAdd?: (data: any) => Promise<boolean | void> | boolean | void; /** * @description 编辑之前回调,一般用于编辑前数据处理,return true终止操作 * @default 无 */ onBeforeUpDate?: (oldData: any) => any | void | boolean; /** * @description 编辑回调,返回编辑后数据,return true终止操作 * @default 无 */ onUpDate?: (data: any, oldData: any, newData: any) => Promise<boolean | void> | boolean | void; /** * @description 删除回调,返回[id],return true终止操作 * @default 无 */ onDelete?: (ids: any[], type: 'single' | 'multiple') => Promise<boolean | void> | boolean | void; /** * @description 详情操作回调,返回数据将替代行数据,return true终止操作 * @default 无 */ onBeforeDetail?: (data: any) => Promise<boolean | void> | boolean | void; /** * @description 详情页面关闭时回调,return true阻止关闭 * @default 无 */ onDetailClose?: () => Promise<boolean | void> | boolean | void; /** * @description 下载回调,常用于下载前对表格数据处理,返回导出数据 * @default 无 */ onDownload?: (dataSource: any[] | undefined) => Promise<any[] | void> | any[] | void; /** * @description 编辑弹窗关闭时回调,返回表单数据,return true阻止弹窗关闭 * @default - */ onModalClose?: (data: any) => Promise<boolean | void> | void | boolean; /** * @description 编辑弹窗销毁时回调,返回表单数据 * @default - */ onModalAfterClose?: () => void; /** * @description 优化项,动态表格时设置不同key,达到重绘组件能力 * @default - */ key?: string; } export interface columnsProps extends columnProps, ColumnType<any> { dataIndex?: string; } export interface segmentedProps { show?: boolean; listTitle?: string; selectTitle?: string; } export interface SearchBar { handleProps: HandleProps; form: any; data: columnsProps[]; onSearchBarFinish?: Function; resetPagination: Function; searchFormSlot?: () => React.ReactElement[]; searchButtonSlot?: () => React.ReactElement[] | JSX.Element; searchText: string; containerStyle: defaultContainerStyleProps; resetText: string; slotData: any[]; defaultExpand?: boolean; hideButtonText?: boolean; } export interface defaultContainerStyleProps { boxPadding: number; background: string | 'none'; boxShadow: boolean; /** * @description 表头是否有背景色 * @default false */ headerBackground?: boolean; /** * @description 奇偶行不同色 * @default false */ multistory?: boolean; } export interface EditModalProps { title?: string; width?: string | number; height?: string | number; formData?: any; type: disabledEnum; } export interface FormTypeProps { data: columnsProps; type?: string; disabled?: boolean; } export interface ProTableProps extends SuperTableProps { onFinish: (data: any, oldData: any, type: 'add' | 'update') => Promise<boolean | void> | boolean; rowKey: string; containerStyle: defaultContainerStyleProps; rowSelection?: TableRowSelection<any>; pagination: any; columnsEdit: any[]; columnsDetail: columnsProps[]; searchForm: any; onSearchBarFinish: any; resetPagination: any; slotData: any[]; searchBarData: any; openEditModal?: Function; } export interface paginationProps { current: number; pageSize: number; total: number; } export interface HandleProps { active: any; selectedRows: any; downloadTable: any; checkedList: any; setSize: any; size: any; CheckboxData: any; onCheckAllChange: any; onChange: any; readOnly: any; setReadOnly: any; }