From a993fb0ffbda18863ec7bff6b33ace2eba833bc4 Mon Sep 17 00:00:00 2001 From: dimmageiras Date: Tue, 27 May 2025 15:29:11 +0300 Subject: [PATCH 1/3] 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] --- components/doc/common/apidoc/index.json | 30 +++++++++++++++++++++++ components/lib/tree/Tree.js | 1 + components/lib/tree/TreeBase.js | 1 + components/lib/tree/UITreeNode.js | 3 ++- components/lib/tree/tree.d.ts | 8 ++++++ components/lib/treetable/TreeTable.js | 1 + components/lib/treetable/TreeTableBody.js | 1 + components/lib/treetable/TreeTableRow.js | 3 ++- components/lib/treetable/treetable.d.ts | 8 ++++++ 9 files changed, 54 insertions(+), 2 deletions(-) diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json index 08b5e1fe79..064d6460d7 100644 --- a/components/doc/common/apidoc/index.json +++ b/components/doc/common/apidoc/index.json @@ -52597,6 +52597,14 @@ "default": "", "description": "Icon to display in the checkbox." }, + { + "name": "checkboxPartialIcon", + "optional": true, + "readonly": false, + "type": "IconType", + "default": "", + "description": "Icon to display in the partially selected checkbox." + }, { "name": "children", "optional": true, @@ -53335,6 +53343,13 @@ "type": "TreePassThroughType | SVGProps>", "description": "Uses to pass attributes to the checkbox icon's DOM element." }, + { + "name": "checkboxPartialIcon", + "optional": true, + "readonly": false, + "type": "TreePassThroughType | SVGProps>", + "description": "Uses to pass attributes to the checkbox partial icon's DOM element." + }, { "name": "nodeIcon", "optional": true, @@ -55109,6 +55124,14 @@ "default": "", "description": "Icon of the checkbox when checked." }, + { + "name": "checkboxPartialIcon", + "optional": true, + "readonly": false, + "type": "IconType", + "default": "", + "description": "Icon to display in the partially selected checkbox." + }, { "name": "children", "optional": true, @@ -56357,6 +56380,13 @@ "type": "TreeTablePassThroughType | SVGProps>", "description": "Uses to pass attributes to the checkbox icon's DOM element." }, + { + "name": "checkboxPartialIcon", + "optional": true, + "readonly": false, + "type": "TreeTablePassThroughType | SVGProps>", + "description": "Uses to pass attributes to the checkbox partial icon's DOM element." + }, { "name": "filterInput", "optional": true, diff --git a/components/lib/tree/Tree.js b/components/lib/tree/Tree.js index 03129c9c50..a7edb04e43 100644 --- a/components/lib/tree/Tree.js +++ b/components/lib/tree/Tree.js @@ -414,6 +414,7 @@ export const Tree = React.memo( last={last} path={String(index)} checkboxIcon={props.checkboxIcon} + checkboxPartialIcon={props.checkboxPartialIcon} collapseIcon={props.collapseIcon} contextMenuSelectionKey={props.contextMenuSelectionKey} cx={cx} diff --git a/components/lib/tree/TreeBase.js b/components/lib/tree/TreeBase.js index 33c24ee0b1..e7ac0d221d 100644 --- a/components/lib/tree/TreeBase.js +++ b/components/lib/tree/TreeBase.js @@ -117,6 +117,7 @@ export const TreeBase = ComponentBase.extend({ ariaLabel: null, ariaLabelledBy: null, checkboxIcon: null, + checkboxPartialIcon: null, className: null, collapseIcon: null, contentClassName: null, diff --git a/components/lib/tree/UITreeNode.js b/components/lib/tree/UITreeNode.js index 2c641292e8..a8c8972bc2 100644 --- a/components/lib/tree/UITreeNode.js +++ b/components/lib/tree/UITreeNode.js @@ -735,7 +735,7 @@ export const UITreeNode = React.memo((props) => { const checkboxIconProps = mergeProps({ className: cx('checkIcon') }); - const icon = checked ? props.checkboxIcon || : partialChecked ? props.checkboxIcon || : null; + const icon = checked ? props.checkboxIcon || : partialChecked ? props.checkboxPartialIcon || : null; const checkboxIcon = IconUtils.getJSXIcon(icon, { ...checkboxIconProps }, props); const checkboxProps = mergeProps( { @@ -902,6 +902,7 @@ export const UITreeNode = React.memo((props) => { key={childNode.key || childNode.label} node={childNode} checkboxIcon={props.checkboxIcon} + checkboxPartialIcon={props.checkboxPartialIcon} collapseIcon={props.collapseIcon} contextMenuSelectionKey={props.contextMenuSelectionKey} cx={cx} diff --git a/components/lib/tree/tree.d.ts b/components/lib/tree/tree.d.ts index 1566a76d76..2695da94ec 100644 --- a/components/lib/tree/tree.d.ts +++ b/components/lib/tree/tree.d.ts @@ -81,6 +81,10 @@ export interface TreePassThroughOptions { * Uses to pass attributes to the checkbox icon's DOM element. */ checkboxIcon?: TreePassThroughType | React.HTMLAttributes>; + /** + * Uses to pass attributes to the checkbox partial icon's DOM element. + */ + checkboxPartialIcon?: TreePassThroughType | React.HTMLAttributes>; /** * Uses to pass attributes to the node icon's DOM element. */ @@ -512,6 +516,10 @@ export interface TreeProps { * Icon to display in the checkbox. */ checkboxIcon?: IconType | undefined; + /** + * Icon to display for partially selected checkbox. + */ + checkboxPartialIcon?: IconType | undefined; /** * Icon of an expanded tab. */ diff --git a/components/lib/treetable/TreeTable.js b/components/lib/treetable/TreeTable.js index 32b1d60b76..35819d48be 100644 --- a/components/lib/treetable/TreeTable.js +++ b/components/lib/treetable/TreeTable.js @@ -1194,6 +1194,7 @@ export const TreeTable = React.forwardRef((inProps, ref) => { { node={node} originalOptions={props.originalOptions} checkboxIcon={props.checkboxIcon} + checkboxPartialIcon={props.checkboxPartialIcon} columns={props.columns} expandedKeys={props.expandedKeys} onToggle={props.onToggle} diff --git a/components/lib/treetable/TreeTableRow.js b/components/lib/treetable/TreeTableRow.js index fca8c8ce04..321a1af667 100644 --- a/components/lib/treetable/TreeTableRow.js +++ b/components/lib/treetable/TreeTableRow.js @@ -527,7 +527,7 @@ export const TreeTableRow = React.memo((props) => { }, getColumnPTOptions(column, 'rowCheckbox.icon') ); - const icon = checked ? props.checkboxIcon || : partialChecked ? props.checkboxIcon || : null; + const icon = checked ? props.checkboxIcon || : partialChecked ? props.checkboxPartialIcon || : null; const checkIcon = IconUtils.getJSXIcon(icon, {}, { props, checked, partialChecked }); const rowCheckboxProps = mergeProps( { @@ -596,6 +596,7 @@ export const TreeTableRow = React.memo((props) => { node={childNode} originalOptions={props.originalOptions} checkboxIcon={props.checkboxIcon} + checkboxPartialIcon={props.checkboxPartialIcon} columns={props.columns} expandedKeys={props.expandedKeys} selectOnEdit={props.selectOnEdit} diff --git a/components/lib/treetable/treetable.d.ts b/components/lib/treetable/treetable.d.ts index 5139b4beb0..6ad4b3ed80 100644 --- a/components/lib/treetable/treetable.d.ts +++ b/components/lib/treetable/treetable.d.ts @@ -145,6 +145,10 @@ export interface TreeTablePassThroughOptions { */ checkboxIcon?: TreeTablePassThroughType | React.HTMLAttributes>; /** + * Uses to pass attributes to the checkbox partial icon's DOM element. + */ + checkboxPartialIcon?: TreePassThroughType | React.HTMLAttributes>; + /** * Uses to pass attributes to the resize helper's DOM element. * @see {@link InputTextPassThroughOptions} */ @@ -590,6 +594,10 @@ export interface TreeTableProps extends Omit | undefined; + /** + * Icon to display for partially selected checkbox. + */ + checkboxPartialIcon?: IconType | undefined; /** * Used to get the child elements of the component. * @readonly From 39fc6fc748173f18cb256d333f75b6d9ab3c7bff Mon Sep 17 00:00:00 2001 From: dimmageiras Date: Tue, 27 May 2025 15:37:59 +0300 Subject: [PATCH 2/3] fixed code format --- components/lib/treetable/treetable.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/lib/treetable/treetable.d.ts b/components/lib/treetable/treetable.d.ts index 6ad4b3ed80..6a9855de5c 100644 --- a/components/lib/treetable/treetable.d.ts +++ b/components/lib/treetable/treetable.d.ts @@ -148,7 +148,7 @@ export interface TreeTablePassThroughOptions { * Uses to pass attributes to the checkbox partial icon's DOM element. */ checkboxPartialIcon?: TreePassThroughType | React.HTMLAttributes>; - /** + /** * Uses to pass attributes to the resize helper's DOM element. * @see {@link InputTextPassThroughOptions} */ From 889c3781f6ecb3c67c372d928c746737eaf8ed7d Mon Sep 17 00:00:00 2001 From: dimmageiras Date: Tue, 27 May 2025 15:42:47 +0300 Subject: [PATCH 3/3] fixed TS errors --- components/lib/treetable/treetable.d.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/lib/treetable/treetable.d.ts b/components/lib/treetable/treetable.d.ts index 6a9855de5c..d5a7b2e36e 100644 --- a/components/lib/treetable/treetable.d.ts +++ b/components/lib/treetable/treetable.d.ts @@ -147,7 +147,7 @@ export interface TreeTablePassThroughOptions { /** * Uses to pass attributes to the checkbox partial icon's DOM element. */ - checkboxPartialIcon?: TreePassThroughType | React.HTMLAttributes>; + checkboxPartialIcon?: TreeTablePassThroughType | React.HTMLAttributes>; /** * Uses to pass attributes to the resize helper's DOM element. * @see {@link InputTextPassThroughOptions} @@ -597,7 +597,7 @@ export interface TreeTableProps extends Omit | undefined; + checkboxPartialIcon?: IconType | undefined; /** * Used to get the child elements of the component. * @readonly