From 54a8ee66007de8a4af4619b2f948aa0d49336b1d Mon Sep 17 00:00:00 2001 From: Ivan Date: Fri, 19 Jul 2024 01:10:03 +0200 Subject: [PATCH] Fix #6903: Missing rowGroupToggler and rowGroupTogglerIcon (#6904) --- components/doc/common/apidoc/index.json | 16 ++++++++++- components/lib/datatable/RowTogglerButton.js | 10 ++++--- components/lib/datatable/TableBody.js | 28 ++++++++++---------- components/lib/datatable/datatable.d.ts | 10 ++++++- 4 files changed, 45 insertions(+), 19 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 13c0b6155f..b468dfe039 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -19353,12 +19353,26 @@ "description": "Uses to pass attributes to the row expansion's DOM element." }, { - "name": "rowgroupFooter", + "name": "rowGroupFooter", "optional": true, "readonly": false, "type": "DataTablePassThroughType>", "description": "Uses to pass attributes to the rowgroup footer's DOM element." }, + { + "name": "rowGroupToggler", + "optional": true, + "readonly": false, + "type": "DataTablePassThroughType>", + "description": "Uses to pass attributes to the rowgroup toggler's DOM element." + }, + { + "name": "rowGroupTogglerIcon", + "optional": true, + "readonly": false, + "type": "DataTablePassThroughType | SVGProps>", + "description": "Uses to pass attributes to the rowgroup toggler icon's DOM element." + }, { "name": "emptyMessage", "optional": true, diff --git a/components/lib/datatable/RowTogglerButton.js b/components/lib/datatable/RowTogglerButton.js index d6a07f0268..ee8175eadd 100644 --- a/components/lib/datatable/RowTogglerButton.js +++ b/components/lib/datatable/RowTogglerButton.js @@ -9,7 +9,7 @@ import { IconUtils } from '../utils/Utils'; export const RowTogglerButton = React.memo((props) => { const mergeProps = useMergeProps(); - const { ptm, ptmo, cx } = props.ptCallbacks; + const { ptm, ptmo, cx, isUnstyled } = props.ptCallbacks; const onClick = (event) => { props.onClick({ @@ -34,8 +34,10 @@ export const RowTogglerButton = React.memo((props) => { const rowGroupTogglerIconProps = mergeProps( { className: cx('rowGroupTogglerIcon'), - 'aria-hidden': true + 'aria-hidden': true, + unstyled: isUnstyled() }, + ptm('rowGroupTogglerIcon'), getColumnPTOptions('rowGroupTogglerIcon') ); const icon = props.expanded ? props.expandedRowIcon || : props.collapsedRowIcon || ; @@ -47,8 +49,10 @@ export const RowTogglerButton = React.memo((props) => { onClick: (e) => onClick(e), className: cx('rowGroupToggler'), tabIndex: props.tabIndex, - 'aria-label': label + 'aria-label': label, + unstyled: isUnstyled() }, + ptm('rowGroupToggler'), getColumnPTOptions('rowGroupToggler') ); diff --git a/components/lib/datatable/TableBody.js b/components/lib/datatable/TableBody.js index 8e072cb2cc..b07975754e 100644 --- a/components/lib/datatable/TableBody.js +++ b/components/lib/datatable/TableBody.js @@ -9,7 +9,7 @@ import { RowTogglerButton } from './RowTogglerButton'; export const TableBody = React.memo( React.forwardRef((props, ref) => { const mergeProps = useMergeProps(); - const { ptm, ptmo, cx, isUnsyled } = props.ptCallbacks; + const { ptm, ptmo, cx, isUnstyled } = props.ptCallbacks; const [rowGroupHeaderStyleObjectState, setRowGroupHeaderStyleObjectState] = React.useState({}); const getColumnProps = (column) => ColumnBase.getCProps(column); @@ -451,7 +451,7 @@ export const TableBody = React.memo( if (props.dragSelection && !dragSelectionHelper.current) { dragSelectionHelper.current = document.createElement('div'); dragSelectionHelper.current.setAttribute('p-datatable-drag-selection-helper', 'true'); - !isUnsyled && DomHandler.addClass(dragSelectionHelper.current, 'p-datatable-drag-selection-helper'); + !isUnstyled() && DomHandler.addClass(dragSelectionHelper.current, 'p-datatable-drag-selection-helper'); initialDragPosition.current = { x: event.clientX, y: event.clientY }; dragSelectionHelper.current.style.top = `${event.pageY}px`; @@ -606,7 +606,7 @@ export const TableBody = React.memo( const onRowMouseDown = (e) => { const { originalEvent: event } = e; - if (!isUnsyled && DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) { + if (!isUnstyled() && DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) { event.currentTarget.draggable = true; event.target.draggable = false; } else { @@ -701,29 +701,29 @@ export const TableBody = React.memo( if (pageY < rowMidY) { rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false'); - !isUnsyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom'); + !isUnstyled() && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom'); droppedRowIndex.current = index; if (prevRowElement) { prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true'); - !isUnsyled && DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom'); + !isUnstyled() && DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom'); } else { rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true'); - !isUnsyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top'); + !isUnstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top'); } } else { if (prevRowElement) { prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false'); - !isUnsyled && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom'); + !isUnstyled() && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom'); } else { rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true'); - !isUnsyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top'); + !isUnstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top'); } droppedRowIndex.current = index + 1; rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true'); - !isUnsyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom'); + !isUnstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom'); } } @@ -737,13 +737,13 @@ export const TableBody = React.memo( if (prevRowElement) { prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false'); - !isUnsyled && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom'); + !isUnstyled() && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom'); } rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false'); - !isUnsyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom'); + !isUnstyled() && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom'); rowElement.setAttribute('data-p-datatable-dragpoint-top', 'false'); - !isUnsyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top'); + !isUnstyled() && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top'); }; const onRowDragEnd = (e) => { @@ -943,7 +943,7 @@ export const TableBody = React.memo( collapsedRowIcon={props.collapsedRowIcon} ptCallbacks={props.ptCallbacks} metaData={props.metaData} - unstyled={props.unstyled} + unstyled={isUnstyled()} /> ); const options = { index: rowIndex, props: props.tableProps, customRendering: false }; @@ -1069,7 +1069,7 @@ export const TableBody = React.memo( virtualScrollerOptions={props.virtualScrollerOptions} ptCallbacks={props.ptCallbacks} metaData={props.metaData} - unstyled={props.unstyled} + unstyled={isUnstyled()} /> ); } diff --git a/components/lib/datatable/datatable.d.ts b/components/lib/datatable/datatable.d.ts index 112fc9ed2d..ce200cd1c4 100644 --- a/components/lib/datatable/datatable.d.ts +++ b/components/lib/datatable/datatable.d.ts @@ -943,7 +943,15 @@ export interface DataTablePassThroughOptions { /** * Uses to pass attributes to the rowgroup footer's DOM element. */ - rowgroupFooter?: DataTablePassThroughType>; + rowGroupFooter?: DataTablePassThroughType>; + /** + * Uses to pass attributes to the rowgroup toggler's DOM element. + */ + rowGroupToggler?: DataTablePassThroughType>; + /** + * Uses to pass attributes to the rowgroup toggler icon's DOM element. + */ + rowGroupTogglerIcon?: DataTablePassThroughType | React.HTMLAttributes>; /** * Uses to pass attributes to the empty message's DOM element. */