diff --git a/src/pro-array-table/pro.tsx b/src/pro-array-table/pro.tsx index 10e8c5c..723dd13 100644 --- a/src/pro-array-table/pro.tsx +++ b/src/pro-array-table/pro.tsx @@ -62,6 +62,46 @@ import { } from "./mixin.pro"; import { IChangeData, ProArrayTableProps } from "./types"; +export const DefaultHeaderRender = (props: { + title?: React.ReactNode; + selection?: React.ReactNode; + toolbars?: React.ReactNode; + addition?: React.ReactNode; + settings?: React.ReactNode; + extra?: React.ReactNode; +}) => { + return ( + + {props.title || props.selection ? ( + + {props.title} + {props.selection} + + ) : null} + {props.toolbars ? {props.toolbars} : null} + {props.addition || props.extra || props.settings ? ( + + {props.addition} + {props.extra} + {props.settings} + + ) : null} + + ); +}; + +export const DefaultFooterRender = (props: { + footer?: React.ReactNode; + pagination?: React.ReactNode; +}) => { + return ( + + {props.footer} + {props.pagination} + + ); +}; + const ArrayTableProInside: ReactFC = observer( ({ onAdd, onRemove, onCopy, onMoveDown, onMoveUp, onSortEnd, ...props }) => { const wrapperRef = useRef(null); @@ -177,16 +217,18 @@ const ArrayTableProInside: ReactFC = observer( ) : null; - const showHeader = - props.title || - props.rowSelection || - toolbar || - addition || - props.settings !== false; + // const showHeader = + // props.title || + // props.rowSelection || + // toolbar || + // addition || + // props.settings !== false; - const _header = !showHeader ? null : ( - - {props.title ? ( + const HeaderRender = props.headerRender || DefaultHeaderRender; + const _header = ( + = observer( {props.title} ) - ) : null} - {rowSelection?.showPro === "top" ? ( + ) : null + } + selection={ + rowSelection?.showPro ? ( - ) : null} - {toolbar} - {addition} - {!props.extra && props.settings === false ? null : ( - - {props.extra} - {props.settings !== false ? ( - - ) : null} - - )} - + ) : null + } + toolbars={toolbar} + addition={addition} + extra={props.extra} + settings={ + props.settings !== false ? ( + + ) : null + } + > ); - const showFooter = props.footer || footer || pagination; - const _footer = !showFooter ? null : ( - - - - {footer} - {pagination} - - + ) : null + } + pagination={pagination} + > ); const header = useResizeHeader({ @@ -349,8 +384,7 @@ const ArrayTableProInside: ReactFC = observer( }, ); -const useTableExpandable = () => { -}; +const useTableExpandable = () => {}; const useTableRowSelection = () => { return useContext(TableRowSelectionContext); diff --git a/src/pro-array-table/types.tsx b/src/pro-array-table/types.tsx index fd82d99..20c7f44 100644 --- a/src/pro-array-table/types.tsx +++ b/src/pro-array-table/types.tsx @@ -4,7 +4,8 @@ import type { Table } from "../adaptor"; type TableProps = React.ComponentProps; -import { Flex } from './mixin.pro' +import { Flex } from "./mixin.pro"; +import { DefaultFooterRender, DefaultHeaderRender } from "./pro"; export type TableChangeParams = Parameters< Required>["onChange"] >; @@ -56,14 +57,46 @@ export interface IProArrayTableBaseMixins { onMoveDown?: (index: number, arrayField: ArrayField) => void | Promise; } +{ + /* + {props.title ? ( + typeof props.title === "function" ? ( + props.title(dataSource) + ) : ( + + {props.title} + + ) + ) : null} + {rowSelection?.showPro === "top" ? ( + + ) : null} + {toolbar} + {addition} + {!props.extra && props.settings === false ? null : ( + + {props.extra} + {props.settings !== false ? ( + + ) : null} + + )} + +type HeaderRender = (props: { + +}) => React.ReactNode */ +} + export type ProArrayTableProps = Omit, "title"> & IProArrayTableBaseMixins & { - headerFlex?: React.ComponentProps, + headerRender?: typeof DefaultHeaderRender; + footerRender?: typeof DefaultFooterRender; + // headerFlex?: React.ComponentProps; title: string | TableProps["title"]; footer: string | TableProps["footer"]; rowSelection?: | (Exclude & { - showPro?: "top" | "bottom" | false; + showPro?: boolean; }) | true; /** 列表配置齿轮, 默认 true */