Skip to content

Commit e895dd9

Browse files
dimmageirasdimmageiras
committed
feat: add checkboxPartialIcon prop to Tree and TreeTable
Allows customization of partial checkbox state icons in both Tree and TreeTable components. Maintains backward compatibility with MinusIcon default. Closes #[4037]
1 parent 22dc3b9 commit e895dd9

File tree

9 files changed

+54
-2
lines changed

9 files changed

+54
-2
lines changed

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52517,6 +52517,14 @@
5251752517
"default": "",
5251852518
"description": "Icon to display in the checkbox."
5251952519
},
52520+
{
52521+
"name": "checkboxPartialIcon",
52522+
"optional": true,
52523+
"readonly": false,
52524+
"type": "IconType<TreeProps>",
52525+
"default": "",
52526+
"description": "Icon to display in the partially selected checkbox."
52527+
},
5252052528
{
5252152529
"name": "children",
5252252530
"optional": true,
@@ -53255,6 +53263,13 @@
5325553263
"type": "TreePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
5325653264
"description": "Uses to pass attributes to the checkbox icon's DOM element."
5325753265
},
53266+
{
53267+
"name": "checkboxPartialIcon",
53268+
"optional": true,
53269+
"readonly": false,
53270+
"type": "TreePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
53271+
"description": "Uses to pass attributes to the checkbox partial icon's DOM element."
53272+
},
5325853273
{
5325953274
"name": "nodeIcon",
5326053275
"optional": true,
@@ -54961,6 +54976,14 @@
5496154976
"default": "",
5496254977
"description": "Icon of the checkbox when checked."
5496354978
},
54979+
{
54980+
"name": "checkboxPartialIcon",
54981+
"optional": true,
54982+
"readonly": false,
54983+
"type": "IconType<TreeProps>",
54984+
"default": "",
54985+
"description": "Icon to display in the partially selected checkbox."
54986+
},
5496454987
{
5496554988
"name": "children",
5496654989
"optional": true,
@@ -56209,6 +56232,13 @@
5620956232
"type": "TreeTablePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
5621056233
"description": "Uses to pass attributes to the checkbox icon's DOM element."
5621156234
},
56235+
{
56236+
"name": "checkboxPartialIcon",
56237+
"optional": true,
56238+
"readonly": false,
56239+
"type": "TreeTablePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
56240+
"description": "Uses to pass attributes to the checkbox partial icon's DOM element."
56241+
},
5621256242
{
5621356243
"name": "filterInput",
5621456244
"optional": true,

‎components/lib/tree/Tree.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -414,6 +414,7 @@ export const Tree = React.memo(
414414
last={last}
415415
path={String(index)}
416416
checkboxIcon={props.checkboxIcon}
417+
checkboxPartialIcon={props.checkboxPartialIcon}
417418
collapseIcon={props.collapseIcon}
418419
contextMenuSelectionKey={props.contextMenuSelectionKey}
419420
cx={cx}

‎components/lib/tree/TreeBase.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@ export const TreeBase = ComponentBase.extend({
117117
ariaLabel: null,
118118
ariaLabelledBy: null,
119119
checkboxIcon: null,
120+
checkboxPartialIcon: null,
120121
className: null,
121122
collapseIcon: null,
122123
contentClassName: null,

‎components/lib/tree/UITreeNode.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -735,7 +735,7 @@ export const UITreeNode = React.memo((props) => {
735735
const checkboxIconProps = mergeProps({
736736
className: cx('checkIcon')
737737
});
738-
const icon = checked ? props.checkboxIcon || <CheckIcon {...checkboxIconProps} /> : partialChecked ? props.checkboxIcon || <MinusIcon {...checkboxIconProps} /> : null;
738+
const icon = checked ? props.checkboxIcon || <CheckIcon {...checkboxIconProps} /> : partialChecked ? props.checkboxPartialIcon || <MinusIcon {...checkboxIconProps} /> : null;
739739
const checkboxIcon = IconUtils.getJSXIcon(icon, { ...checkboxIconProps }, props);
740740
const checkboxProps = mergeProps(
741741
{
@@ -902,6 +902,7 @@ export const UITreeNode = React.memo((props) => {
902902
key={childNode.key || childNode.label}
903903
node={childNode}
904904
checkboxIcon={props.checkboxIcon}
905+
checkboxPartialIcon={props.checkboxPartialIcon}
905906
collapseIcon={props.collapseIcon}
906907
contextMenuSelectionKey={props.contextMenuSelectionKey}
907908
cx={cx}

‎components/lib/tree/tree.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,10 @@ export interface TreePassThroughOptions {
8181
* Uses to pass attributes to the checkbox icon's DOM element.
8282
*/
8383
checkboxIcon?: TreePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
84+
/**
85+
* Uses to pass attributes to the checkbox partial icon's DOM element.
86+
*/
87+
checkboxPartialIcon?: TreePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
8488
/**
8589
* Uses to pass attributes to the node icon's DOM element.
8690
*/
@@ -512,6 +516,10 @@ export interface TreeProps {
512516
* Icon to display in the checkbox.
513517
*/
514518
checkboxIcon?: IconType<TreeProps> | undefined;
519+
/**
520+
* Icon to display for partially selected checkbox.
521+
*/
522+
checkboxPartialIcon?: IconType<TreeProps> | undefined;
515523
/**
516524
* Icon of an expanded tab.
517525
*/

‎components/lib/treetable/TreeTable.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1194,6 +1194,7 @@ export const TreeTable = React.forwardRef((inProps, ref) => {
11941194
<TreeTableBody
11951195
hostName="TreeTable"
11961196
checkboxIcon={props.checkboxIcon}
1197+
checkboxPartialIcon={props.checkboxPartialIcon}
11971198
columns={columns}
11981199
contextMenuSelectionKey={props.contextMenuSelectionKey}
11991200
emptyMessage={props.emptyMessage}

‎components/lib/treetable/TreeTableBody.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -181,6 +181,7 @@ export const TreeTableBody = React.memo((props) => {
181181
node={node}
182182
originalOptions={props.originalOptions}
183183
checkboxIcon={props.checkboxIcon}
184+
checkboxPartialIcon={props.checkboxPartialIcon}
184185
columns={props.columns}
185186
expandedKeys={props.expandedKeys}
186187
onToggle={props.onToggle}

‎components/lib/treetable/TreeTableRow.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -527,7 +527,7 @@ export const TreeTableRow = React.memo((props) => {
527527
},
528528
getColumnPTOptions(column, 'rowCheckbox.icon')
529529
);
530-
const icon = checked ? props.checkboxIcon || <CheckIcon {...checkboxIconProps} /> : partialChecked ? props.checkboxIcon || <MinusIcon /> : null;
530+
const icon = checked ? props.checkboxIcon || <CheckIcon {...checkboxIconProps} /> : partialChecked ? props.checkboxPartialIcon || <MinusIcon {...checkboxIconProps} /> : null;
531531
const checkIcon = IconUtils.getJSXIcon(icon, {}, { props, checked, partialChecked });
532532
const rowCheckboxProps = mergeProps(
533533
{
@@ -596,6 +596,7 @@ export const TreeTableRow = React.memo((props) => {
596596
node={childNode}
597597
originalOptions={props.originalOptions}
598598
checkboxIcon={props.checkboxIcon}
599+
checkboxPartialIcon={props.checkboxPartialIcon}
599600
columns={props.columns}
600601
expandedKeys={props.expandedKeys}
601602
selectOnEdit={props.selectOnEdit}

‎components/lib/treetable/treetable.d.ts‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -145,6 +145,10 @@ export interface TreeTablePassThroughOptions {
145145
*/
146146
checkboxIcon?: TreeTablePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
147147
/**
148+
* Uses to pass attributes to the checkbox partial icon's DOM element.
149+
*/
150+
checkboxPartialIcon?: TreePassThroughType<React.SVGProps<SVGSVGElement> | React.HTMLAttributes<HTMLSpanElement>>;
151+
/**
148152
* Uses to pass attributes to the resize helper's DOM element.
149153
* @see {@link InputTextPassThroughOptions}
150154
*/
@@ -590,6 +594,10 @@ export interface TreeTableProps extends Omit<React.DetailedHTMLProps<React.Input
590594
* Icon of the checkbox when checked.
591595
*/
592596
checkboxIcon?: IconType<TreeTableProps> | undefined;
597+
/**
598+
* Icon to display for partially selected checkbox.
599+
*/
600+
checkboxPartialIcon?: IconType<TreeProps> | undefined;
593601
/**
594602
* Used to get the child elements of the component.
595603
* @readonly

0 commit comments

Comments
 (0)