Skip to content

Commit 54a8ee6

Browse files
ivanpajonivanpajon
authored
Fix #6903: Missing rowGroupToggler and rowGroupTogglerIcon (#6904)
1 parent 678b78c commit 54a8ee6

File tree

4 files changed

+45
-19
lines changed

4 files changed

+45
-19
lines changed

‎components/doc/common/apidoc/index.json

Lines changed: 15 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19353,12 +19353,26 @@
1935319353
"description": "Uses to pass attributes to the row expansion's DOM element."
1935419354
},
1935519355
{
19356-
"name": "rowgroupFooter",
19356+
"name": "rowGroupFooter",
1935719357
"optional": true,
1935819358
"readonly": false,
1935919359
"type": "DataTablePassThroughType<HTMLAttributes<HTMLTableRowElement>>",
1936019360
"description": "Uses to pass attributes to the rowgroup footer's DOM element."
1936119361
},
19362+
{
19363+
"name": "rowGroupToggler",
19364+
"optional": true,
19365+
"readonly": false,
19366+
"type": "DataTablePassThroughType<HTMLAttributes<HTMLButtonElement>>",
19367+
"description": "Uses to pass attributes to the rowgroup toggler's DOM element."
19368+
},
19369+
{
19370+
"name": "rowGroupTogglerIcon",
19371+
"optional": true,
19372+
"readonly": false,
19373+
"type": "DataTablePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
19374+
"description": "Uses to pass attributes to the rowgroup toggler icon's DOM element."
19375+
},
1936219376
{
1936319377
"name": "emptyMessage",
1936419378
"optional": true,

‎components/lib/datatable/RowTogglerButton.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { IconUtils } from '../utils/Utils';
99

1010
export const RowTogglerButton = React.memo((props) => {
1111
const mergeProps = useMergeProps();
12-
const { ptm, ptmo, cx } = props.ptCallbacks;
12+
const { ptm, ptmo, cx, isUnstyled } = props.ptCallbacks;
1313

1414
const onClick = (event) => {
1515
props.onClick({
@@ -34,8 +34,10 @@ export const RowTogglerButton = React.memo((props) => {
3434
const rowGroupTogglerIconProps = mergeProps(
3535
{
3636
className: cx('rowGroupTogglerIcon'),
37-
'aria-hidden': true
37+
'aria-hidden': true,
38+
unstyled: isUnstyled()
3839
},
40+
ptm('rowGroupTogglerIcon'),
3941
getColumnPTOptions('rowGroupTogglerIcon')
4042
);
4143
const icon = props.expanded ? props.expandedRowIcon || <ChevronDownIcon {...rowGroupTogglerIconProps} /> : props.collapsedRowIcon || <ChevronRightIcon {...rowGroupTogglerIconProps} />;
@@ -47,8 +49,10 @@ export const RowTogglerButton = React.memo((props) => {
4749
onClick: (e) => onClick(e),
4850
className: cx('rowGroupToggler'),
4951
tabIndex: props.tabIndex,
50-
'aria-label': label
52+
'aria-label': label,
53+
unstyled: isUnstyled()
5154
},
55+
ptm('rowGroupToggler'),
5256
getColumnPTOptions('rowGroupToggler')
5357
);
5458

‎components/lib/datatable/TableBody.js

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { RowTogglerButton } from './RowTogglerButton';
99
export const TableBody = React.memo(
1010
React.forwardRef((props, ref) => {
1111
const mergeProps = useMergeProps();
12-
const { ptm, ptmo, cx, isUnsyled } = props.ptCallbacks;
12+
const { ptm, ptmo, cx, isUnstyled } = props.ptCallbacks;
1313
const [rowGroupHeaderStyleObjectState, setRowGroupHeaderStyleObjectState] = React.useState({});
1414
const getColumnProps = (column) => ColumnBase.getCProps(column);
1515

@@ -451,7 +451,7 @@ export const TableBody = React.memo(
451451
if (props.dragSelection && !dragSelectionHelper.current) {
452452
dragSelectionHelper.current = document.createElement('div');
453453
dragSelectionHelper.current.setAttribute('p-datatable-drag-selection-helper', 'true');
454-
!isUnsyled && DomHandler.addClass(dragSelectionHelper.current, 'p-datatable-drag-selection-helper');
454+
!isUnstyled() && DomHandler.addClass(dragSelectionHelper.current, 'p-datatable-drag-selection-helper');
455455

456456
initialDragPosition.current = { x: event.clientX, y: event.clientY };
457457
dragSelectionHelper.current.style.top = `${event.pageY}px`;
@@ -606,7 +606,7 @@ export const TableBody = React.memo(
606606
const onRowMouseDown = (e) => {
607607
const { originalEvent: event } = e;
608608

609-
if (!isUnsyled && DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) {
609+
if (!isUnstyled() && DomHandler.hasClass(event.target, 'p-datatable-reorderablerow-handle')) {
610610
event.currentTarget.draggable = true;
611611
event.target.draggable = false;
612612
} else {
@@ -701,29 +701,29 @@ export const TableBody = React.memo(
701701

702702
if (pageY < rowMidY) {
703703
rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
704-
!isUnsyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
704+
!isUnstyled() && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
705705

706706
droppedRowIndex.current = index;
707707

708708
if (prevRowElement) {
709709
prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true');
710-
!isUnsyled && DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
710+
!isUnstyled() && DomHandler.addClass(prevRowElement, 'p-datatable-dragpoint-bottom');
711711
} else {
712712
rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true');
713-
!isUnsyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
713+
!isUnstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
714714
}
715715
} else {
716716
if (prevRowElement) {
717717
prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
718-
!isUnsyled && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
718+
!isUnstyled() && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
719719
} else {
720720
rowElement.setAttribute('data-p-datatable-dragpoint-top', 'true');
721-
!isUnsyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
721+
!isUnstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-top');
722722
}
723723

724724
droppedRowIndex.current = index + 1;
725725
rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'true');
726-
!isUnsyled && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
726+
!isUnstyled() && DomHandler.addClass(rowElement, 'p-datatable-dragpoint-bottom');
727727
}
728728
}
729729

@@ -737,13 +737,13 @@ export const TableBody = React.memo(
737737

738738
if (prevRowElement) {
739739
prevRowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
740-
!isUnsyled && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
740+
!isUnstyled() && DomHandler.removeClass(prevRowElement, 'p-datatable-dragpoint-bottom');
741741
}
742742

743743
rowElement.setAttribute('data-p-datatable-dragpoint-bottom', 'false');
744-
!isUnsyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
744+
!isUnstyled() && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-bottom');
745745
rowElement.setAttribute('data-p-datatable-dragpoint-top', 'false');
746-
!isUnsyled && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
746+
!isUnstyled() && DomHandler.removeClass(rowElement, 'p-datatable-dragpoint-top');
747747
};
748748

749749
const onRowDragEnd = (e) => {
@@ -943,7 +943,7 @@ export const TableBody = React.memo(
943943
collapsedRowIcon={props.collapsedRowIcon}
944944
ptCallbacks={props.ptCallbacks}
945945
metaData={props.metaData}
946-
unstyled={props.unstyled}
946+
unstyled={isUnstyled()}
947947
/>
948948
);
949949
const options = { index: rowIndex, props: props.tableProps, customRendering: false };
@@ -1069,7 +1069,7 @@ export const TableBody = React.memo(
10691069
virtualScrollerOptions={props.virtualScrollerOptions}
10701070
ptCallbacks={props.ptCallbacks}
10711071
metaData={props.metaData}
1072-
unstyled={props.unstyled}
1072+
unstyled={isUnstyled()}
10731073
/>
10741074
);
10751075
}

‎components/lib/datatable/datatable.d.ts

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -943,7 +943,15 @@ export interface DataTablePassThroughOptions {
943943
/**
944944
* Uses to pass attributes to the rowgroup footer's DOM element.
945945
*/
946-
rowgroupFooter?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
946+
rowGroupFooter?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
947+
/**
948+
* Uses to pass attributes to the rowgroup toggler's DOM element.
949+
*/
950+
rowGroupToggler?: DataTablePassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
951+
/**
952+
* Uses to pass attributes to the rowgroup toggler icon's DOM element.
953+
*/
954+
rowGroupTogglerIcon?: DataTablePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
947955
/**
948956
* Uses to pass attributes to the empty message's DOM element.
949957
*/

0 commit comments

Comments
 (0)