Skip to content

Commit

Permalink
Fix #6903: Missing rowGroupToggler and rowGroupTogglerIcon (#6904)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ivanpajon
ivanpajon authored Jul 18, 2024
1 parent 678b78c commit 54a8ee6
Show file tree
Hide file tree
Showing 4 changed files with 45 additions and 19 deletions.
16 changes: 15 additions & 1 deletion components/doc/common/apidoc/index.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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<HTMLAttributes<HTMLTableRowElement>>",
"description": "Uses to pass attributes to the rowgroup footer's DOM element."
},
{
"name": "rowGroupToggler",
"optional": true,
"readonly": false,
"type": "DataTablePassThroughType<HTMLAttributes<HTMLButtonElement>>",
"description": "Uses to pass attributes to the rowgroup toggler's DOM element."
},
{
"name": "rowGroupTogglerIcon",
"optional": true,
"readonly": false,
"type": "DataTablePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
"description": "Uses to pass attributes to the rowgroup toggler icon's DOM element."
},
{
"name": "emptyMessage",
"optional": true,
Expand Down
10 changes: 7 additions & 3 deletions components/lib/datatable/RowTogglerButton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand All @@ -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 || <ChevronDownIcon {...rowGroupTogglerIconProps} /> : props.collapsedRowIcon || <ChevronRightIcon {...rowGroupTogglerIconProps} />;
Expand All @@ -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')
);

Expand Down
28 changes: 14 additions & 14 deletions components/lib/datatable/TableBody.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);

Expand Down Expand Up @@ -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`;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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');
}
}

Expand All @@ -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) => {
Expand Down Expand Up @@ -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 };
Expand Down Expand Up @@ -1069,7 +1069,7 @@ export const TableBody = React.memo(
virtualScrollerOptions={props.virtualScrollerOptions}
ptCallbacks={props.ptCallbacks}
metaData={props.metaData}
unstyled={props.unstyled}
unstyled={isUnstyled()}
/>
);
}
Expand Down
10 changes: 9 additions & 1 deletion components/lib/datatable/datatable.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -943,7 +943,15 @@ export interface DataTablePassThroughOptions {
/**
* Uses to pass attributes to the rowgroup footer's DOM element.
*/
rowgroupFooter?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
rowGroupFooter?: DataTablePassThroughType<React.HTMLAttributes<HTMLTableRowElement>>;
/**
* Uses to pass attributes to the rowgroup toggler's DOM element.
*/
rowGroupToggler?: DataTablePassThroughType<React.HTMLAttributes<HTMLButtonElement>>;
/**
* Uses to pass attributes to the rowgroup toggler icon's DOM element.
*/
rowGroupTogglerIcon?: DataTablePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
/**
* Uses to pass attributes to the empty message's DOM element.
*/
Expand Down

0 comments on commit 54a8ee6

Please sign in to comment.