From a3f377c2ceafac79450e495697312228a47ce60f Mon Sep 17 00:00:00 2001 From: melloware Date: Tue, 27 Sep 2022 09:13:06 -0400 Subject: [PATCH] Fix #3368: Column add headerTooltip and headerTooltipOptions --- api-generator/components/column.js | 12 ++ components/doc/datatable/index.js | 12 ++ components/lib/column/Column.js | 118 +++++++++---------- components/lib/column/column.d.ts | 121 ++++++++++---------- components/lib/datatable/HeaderCell.js | 47 ++++---- components/lib/treetable/TreeTableHeader.js | 55 +++++---- 6 files changed, 205 insertions(+), 160 deletions(-) diff --git a/api-generator/components/column.js b/api-generator/components/column.js index a76a281459..9099a44fdd 100644 --- a/api-generator/components/column.js +++ b/api-generator/components/column.js @@ -149,6 +149,18 @@ const ColumnProps = [ default: 'null', description: 'Style class of the header.' }, + { + name: 'headerTooltip', + type: 'any', + default: 'null', + description: 'Content of the header tooltip.' + }, + { + name: 'headerTooltipOptions', + type: 'object', + default: 'null', + description: 'Configuration of the header tooltip, refer to the tooltip documentation for more information.' + }, { name: 'bodyStyle', type: 'object', diff --git a/components/doc/datatable/index.js b/components/doc/datatable/index.js index 2d5588944f..5ae7c4cb38 100644 --- a/components/doc/datatable/index.js +++ b/components/doc/datatable/index.js @@ -1373,6 +1373,18 @@ export const DataTableDemo = () => { null Style class of the header. + + headerTooltip + any + null + Content of the header tooltip. + + + headerTooltipOptions + object + null + Configuration of the header tooltip, refer to the tooltip documentation for more information. + bodyStyle object diff --git a/components/lib/column/Column.js b/components/lib/column/Column.js index f15c38b12b..b26d59ff01 100644 --- a/components/lib/column/Column.js +++ b/components/lib/column/Column.js @@ -3,78 +3,80 @@ export const Column = () => {}; Column.displayName = 'Column'; Column.defaultProps = { __TYPE: 'Column', - columnKey: null, - field: null, - sortField: null, - filterField: null, - exportField: null, - header: null, + align: null, + alignFrozen: 'left', + alignHeader: null, body: null, - footer: null, - sortable: false, - sortableDisabled: false, - sortFunction: null, + bodyClassName: null, + bodyStyle: null, + cellEditValidator: null, + cellEditValidatorEvent: 'click', + className: null, + colSpan: null, + columnKey: null, dataType: 'text', + editor: null, + excludeGlobalFilter: false, + expander: false, + exportField: null, + exportable: true, + field: null, filter: false, - filterMatchMode: null, - filterPlaceholder: null, - filterType: 'text', - filterMaxLength: null, + filterApply: null, + filterClear: null, filterElement: null, + filterField: null, + filterFooter: null, filterFunction: null, - filterHeaderStyle: null, + filterHeader: null, filterHeaderClassName: null, - showFilterMenu: true, - showFilterOperator: true, - showClearButton: true, - showApplyButton: true, - showFilterMatchModes: true, - showFilterMenuOptions: true, - showAddButton: true, + filterHeaderStyle: null, + filterMatchMode: null, filterMatchModeOptions: null, - maxConstraints: 2, + filterMaxLength: null, filterMenuClassName: null, filterMenuStyle: null, - align: null, - alignHeader: null, - alignFrozen: 'left', - hidden: false, - onFilterClear: null, - onFilterApplyClick: null, - onFilterMatchModeChange: null, - onFilterOperatorChange: null, - onFilterConstraintAdd: null, - onFilterConstraintRemove: null, - filterClear: null, - filterApply: null, - filterHeader: null, - filterFooter: null, - style: null, - className: null, - headerStyle: null, - headerClassName: null, - bodyStyle: null, - bodyClassName: null, - footerStyle: null, + filterPlaceholder: null, + filterType: 'text', + footer: null, footerClassName: null, - expander: false, + footerStyle: null, frozen: false, - selectionMode: null, - colSpan: null, - rowSpan: null, - editor: null, - cellEditValidator: null, - cellEditValidatorEvent: 'click', + header: null, + headerClassName: null, + headerStyle: null, + headerTooltip: null, + headerTooltipOptions: null, + hidden: false, + maxConstraints: 2, onBeforeCellEditHide: null, onBeforeCellEditShow: null, - onCellEditInit: null, - onCellEditComplete: null, onCellEditCancel: null, - excludeGlobalFilter: false, + onCellEditComplete: null, + onCellEditInit: null, + onFilterApplyClick: null, + onFilterClear: null, + onFilterConstraintAdd: null, + onFilterConstraintRemove: null, + onFilterMatchModeChange: null, + onFilterOperatorChange: null, + reorderable: true, + resizeable: true, + rowEditor: false, rowReorder: false, rowReorderIcon: 'pi pi-bars', - rowEditor: false, - exportable: true, - reorderable: true, - resizeable: true + rowSpan: null, + selectionMode: null, + showAddButton: true, + showApplyButton: true, + showClearButton: true, + showFilterMatchModes: true, + showFilterMenu: true, + showFilterMenuOptions: true, + showFilterOperator: true, + sortField: null, + sortFunction: null, + sortable: false, + sortableDisabled: false, + style: null }; diff --git a/components/lib/column/column.d.ts b/components/lib/column/column.d.ts index 9ee7da8934..e00e544498 100644 --- a/components/lib/column/column.d.ts +++ b/components/lib/column/column.d.ts @@ -1,4 +1,5 @@ import * as React from 'react'; +import TooltipOptions from '../tooltip/tooltipoptions'; type ColumnHeaderType = React.ReactNode | ((options: ColumnHeaderOptions) => React.ReactNode); @@ -179,80 +180,82 @@ interface ColumnFilterMatchModeOptions { } export interface ColumnProps { - columnKey?: string; - field?: string; - sortField?: string; - filterField?: string; - header?: ColumnHeaderType; + align?: ColumnAlignType; + alignFrozen?: ColumnAlignFrozenType; + alignHeader?: ColumnAlignType; body?: ColumnBodyType; - footer?: ColumnFooterType; - sortable?: boolean; - sortableDisabled?: boolean; + bodyClassName?: string; + bodyStyle?: object; + cellEditValidatorEvent?: string; + children?: React.ReactNode; + className?: string; + colSpan?: number; + columnKey?: string; dataType?: ColumnDataType; + editor?: ColumnEditorType; + excludeGlobalFilter?: boolean; + expander?: boolean; + exportable?: boolean; + field?: string; filter?: boolean; - filterMatchMode?: ColumnFilterMatchModeType; - filterPlaceholder?: string; - filterType?: string; - filterMaxLength?: number; + filterApply?: ColumnFilterApplyType; + filterClear?: ColumnFilterClearType; filterElement?: ColumnFilterElementType; - filterHeaderStyle?: object; + filterField?: string; + filterFooter?: ColumnFilterFooterType; + filterHeader?: ColumnFilterHeaderType; filterHeaderClassName?: string; - showFilterMenu?: boolean; - showFilterOperator?: boolean; - showClearButton?: boolean; - showApplyButton?: boolean; - showFilterMatchModes?: boolean; - showFilterMenuOptions?: boolean; - showAddButton?: boolean; + filterHeaderStyle?: object; + filterMatchMode?: ColumnFilterMatchModeType; filterMatchModeOptions?: ColumnFilterMatchModeOptions[]; - maxConstraints?: number; + filterMaxLength?: number; filterMenuClassName?: string; filterMenuStyle?: object; - align?: ColumnAlignType; - alignHeader?: ColumnAlignType; - alignFrozen?: ColumnAlignFrozenType; - hidden?: boolean; - onFilterClear?(): void; - onFilterApplyClick?(e: ColumnFilterApplyClickParams): void; - onFilterMatchModeChange?(e: ColumnFilterMatchModeChangeParams): void; - onFilterOperatorChange?(e: ColumnFilterOperatorChangeParams): void; - onFilterConstraintAdd?(e: ColumnFilterConstraintAddParams): void; - onFilterConstraintRemove?(e: ColumnFilterConstraintRemoveParams): void; - filterClear?: ColumnFilterClearType; - filterApply?: ColumnFilterApplyType; - filterHeader?: ColumnFilterHeaderType; - filterFooter?: ColumnFilterFooterType; - style?: object; - className?: string; - headerStyle?: object; - headerClassName?: string; - bodyStyle?: object; - bodyClassName?: string; - footerStyle?: object; + filterPlaceholder?: string; + filterType?: string; + footer?: ColumnFooterType; footerClassName?: string; - expander?: boolean; + footerStyle?: object; frozen?: boolean; - selectionMode?: ColumnSelectionModeType; - colSpan?: number; - rowSpan?: number; - rowReorder?: boolean; - rowReorderIcon?: string; - cellEditValidatorEvent?: string; - rowEditor?: boolean; - exportable?: boolean; + header?: ColumnHeaderType; + headerClassName?: string; + headerStyle?: object; + headerTooltip?: string; + headerTooltipOptions?: TooltipOptions; + hidden?: boolean; + maxConstraints?: number; reorderable?: boolean; resizeable?: boolean; - excludeGlobalFilter?: boolean; - onCellEditInit?(e: ColumnEventParams): void; - onCellEditComplete?(e: ColumnEventParams): void; - onCellEditCancel?(e: ColumnEventParams): void; - sortFunction?(e: ColumnSortParams): void; - filterFunction?(value: any, filter: any, filterLocale: string, params: ColumnFilterParams): void; - editor?: ColumnEditorType; + rowEditor?: boolean; + rowReorder?: boolean; + rowReorderIcon?: string; + rowSpan?: number; + selectionMode?: ColumnSelectionModeType; + showAddButton?: boolean; + showApplyButton?: boolean; + showClearButton?: boolean; + showFilterMatchModes?: boolean; + showFilterMenu?: boolean; + showFilterMenuOptions?: boolean; + showFilterOperator?: boolean; + sortField?: string; + sortable?: boolean; + sortableDisabled?: boolean; + style?: object; cellEditValidator?(e: ColumnEventParams): boolean; + filterFunction?(value: any, filter: any, filterLocale: string, params: ColumnFilterParams): void; onBeforeCellEditHide?(e: ColumnEventParams): void; onBeforeCellEditShow?(e: ColumnEventParams): void; - children?: React.ReactNode; + onCellEditCancel?(e: ColumnEventParams): void; + onCellEditComplete?(e: ColumnEventParams): void; + onCellEditInit?(e: ColumnEventParams): void; + onFilterApplyClick?(e: ColumnFilterApplyClickParams): void; + onFilterClear?(): void; + onFilterConstraintAdd?(e: ColumnFilterConstraintAddParams): void; + onFilterConstraintRemove?(e: ColumnFilterConstraintRemoveParams): void; + onFilterMatchModeChange?(e: ColumnFilterMatchModeChangeParams): void; + onFilterOperatorChange?(e: ColumnFilterOperatorChangeParams): void; + sortFunction?(e: ColumnSortParams): void; } export declare class Column extends React.Component {} diff --git a/components/lib/datatable/HeaderCell.js b/components/lib/datatable/HeaderCell.js index 1460d8d8be..669912e4f9 100644 --- a/components/lib/datatable/HeaderCell.js +++ b/components/lib/datatable/HeaderCell.js @@ -1,5 +1,6 @@ import * as React from 'react'; import { usePrevious } from '../hooks/Hooks'; +import { Tooltip } from '../tooltip/Tooltip'; import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; import { ColumnFilter } from './ColumnFilter'; import { HeaderCheckbox } from './HeaderCheckbox'; @@ -287,31 +288,37 @@ export const HeaderCell = React.memo((props) => { const colSpan = getColumnProp('colSpan'); const rowSpan = getColumnProp('rowSpan'); const ariaSort = getAriaSort(sortMeta); + const headerTooltip = getColumnProp('headerTooltip'); + const hasTooltip = ObjectUtils.isNotEmpty(headerTooltip); + const headerTooltipOptions = getColumnProp('headerTooltipOptions'); const resizer = createResizer(); const header = createHeader(sortMeta); return ( - - {resizer} - {header} - + <> + + {resizer} + {header} + + {hasTooltip && } + ); }; diff --git a/components/lib/treetable/TreeTableHeader.js b/components/lib/treetable/TreeTableHeader.js index 480ad29ae9..26bf7448cd 100644 --- a/components/lib/treetable/TreeTableHeader.js +++ b/components/lib/treetable/TreeTableHeader.js @@ -1,6 +1,7 @@ import * as React from 'react'; import { InputText } from '../inputtext/InputText'; -import { classNames, DomHandler } from '../utils/Utils'; +import { Tooltip } from '../tooltip/Tooltip'; +import { classNames, DomHandler, ObjectUtils } from '../utils/Utils'; export const TreeTableHeader = React.memo((props) => { const filterTimeout = React.useRef(null); @@ -202,6 +203,7 @@ export const TreeTableHeader = React.memo((props) => { ); } else { + const headerCellRef = React.createRef(null); const sortMetaDataIndex = getMultiSortMetaDataIndex(column); const multiSortMetaData = sortMetaDataIndex !== -1 ? props.multiSortMeta[sortMetaDataIndex] : null; const singleSorted = column.props.field === props.sortField; @@ -222,31 +224,38 @@ export const TreeTableHeader = React.memo((props) => { 'p-resizable-column': props.resizableColumns && getColumnProp(column, 'resizeable') }); + const headerTooltip = column.props.headerTooltip; + const hasTooltip = ObjectUtils.isNotEmpty(headerTooltip); + const resizer = createResizer(column); return ( - onHeaderClick(e, column)} - onMouseDown={(e) => onHeaderMouseDown(e, column)} - onKeyDown={(e) => onHeaderKeyDown(e, column)} - rowSpan={column.props.rowSpan} - colSpan={column.props.colSpan} - aria-sort={ariaSortData} - onDragStart={(e) => onDragStart(e, column)} - onDragOver={(e) => onDragOver(e, column)} - onDragLeave={(e) => onDragLeave(e, column)} - onDrop={(e) => onDrop(e, column)} - > - {resizer} - {column.props.header} - {sortIconElement} - {sortBadge} - {filterElement} - + <> + onHeaderClick(e, column)} + onMouseDown={(e) => onHeaderMouseDown(e, column)} + onKeyDown={(e) => onHeaderKeyDown(e, column)} + rowSpan={column.props.rowSpan} + colSpan={column.props.colSpan} + aria-sort={ariaSortData} + onDragStart={(e) => onDragStart(e, column)} + onDragOver={(e) => onDragOver(e, column)} + onDragLeave={(e) => onDragLeave(e, column)} + onDrop={(e) => onDrop(e, column)} + > + {resizer} + {column.props.header} + {sortIconElement} + {sortBadge} + {filterElement} + + {hasTooltip && } + ); } };