Skip to content

Commit a993fb0

Browse files
dimmageirasmelloware
dimmageiras
authored and
melloware
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 053e619 commit a993fb0

9 files changed

Lines changed: 54 additions & 2 deletions

File tree

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

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52597,6 +52597,14 @@
5259752597
"default": "",
5259852598
"description": "Icon to display in the checkbox."
5259952599
},
52600+
{
52601+
"name": "checkboxPartialIcon",
52602+
"optional": true,
52603+
"readonly": false,
52604+
"type": "IconType<TreeProps>",
52605+
"default": "",
52606+
"description": "Icon to display in the partially selected checkbox."
52607+
},
5260052608
{
5260152609
"name": "children",
5260252610
"optional": true,
@@ -53335,6 +53343,13 @@
5333553343
"type": "TreePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
5333653344
"description": "Uses to pass attributes to the checkbox icon's DOM element."
5333753345
},
53346+
{
53347+
"name": "checkboxPartialIcon",
53348+
"optional": true,
53349+
"readonly": false,
53350+
"type": "TreePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
53351+
"description": "Uses to pass attributes to the checkbox partial icon's DOM element."
53352+
},
5333853353
{
5333953354
"name": "nodeIcon",
5334053355
"optional": true,
@@ -55109,6 +55124,14 @@
5510955124
"default": "",
5511055125
"description": "Icon of the checkbox when checked."
5511155126
},
55127+
{
55128+
"name": "checkboxPartialIcon",
55129+
"optional": true,
55130+
"readonly": false,
55131+
"type": "IconType<TreeProps>",
55132+
"default": "",
55133+
"description": "Icon to display in the partially selected checkbox."
55134+
},
5511255135
{
5511355136
"name": "children",
5511455137
"optional": true,
@@ -56357,6 +56380,13 @@
5635756380
"type": "TreeTablePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
5635856381
"description": "Uses to pass attributes to the checkbox icon's DOM element."
5635956382
},
56383+
{
56384+
"name": "checkboxPartialIcon",
56385+
"optional": true,
56386+
"readonly": false,
56387+
"type": "TreeTablePassThroughType<HTMLAttributes<HTMLSpanElement> | SVGProps<SVGSVGElement>>",
56388+
"description": "Uses to pass attributes to the checkbox partial icon's DOM element."
56389+
},
5636056390
{
5636156391
"name": "filterInput",
5636256392
"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)