From 38b03a66c8cc8503cd1e922f317906dfe3cdd374 Mon Sep 17 00:00:00 2001
From: KumJungMin <37934668+KumJungMin@users.noreply.github.com>
Date: Thu, 5 Dec 2024 05:07:17 +0900
Subject: [PATCH] style(TreeTable): add highlight for rows selected with
 checkbox (#7406)

* style: add highlight for rows selected with checkbox

* style: change checkbox active color

* style: change check color

* Revert "style: change checkbox active color"

This reverts commit 8a5465a95ea30c1cc05bfee9f091277e8a90f0cb.

* Revert "style: change check color"

This reverts commit 28ac80cf223bab7fcb57f914f86b5cb30a48393f.

* style: set checkboxIconProps
---
 components/lib/treetable/TreeTableBase.js |  1 +
 components/lib/treetable/TreeTableRow.js  | 20 +++++++++++++-------
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/components/lib/treetable/TreeTableBase.js b/components/lib/treetable/TreeTableBase.js
index 7893871a51..c3e4bd0624 100644
--- a/components/lib/treetable/TreeTableBase.js
+++ b/components/lib/treetable/TreeTableBase.js
@@ -148,6 +148,7 @@ const classes = {
     loadingWrapper: 'p-treetable-loading',
     loadingOverlay: 'p-treetable-loading-overlay p-component-overlay',
     header: 'p-treetable-header',
+    checkIcon: 'p-checkbox-icon',
     footer: 'p-treetable-footer',
     resizeHelper: 'p-column-resizer-helper',
     reorderIndicatorUp: 'p-treetable-reorder-indicator-up',
diff --git a/components/lib/treetable/TreeTableRow.js b/components/lib/treetable/TreeTableRow.js
index 78ad49274f..96172edd76 100644
--- a/components/lib/treetable/TreeTableRow.js
+++ b/components/lib/treetable/TreeTableRow.js
@@ -13,8 +13,6 @@ import { Checkbox } from '../checkbox/Checkbox';
 
 export const TreeTableRow = React.memo((props) => {
     const elementRef = React.useRef(null);
-    const checkboxRef = React.useRef(null);
-    const checkboxBoxRef = React.useRef(null);
     const nodeTouched = React.useRef(false);
     const mergeProps = useMergeProps();
     const expanded = props.expandedKeys ? props.expandedKeys[props.node.key] !== undefined : false;
@@ -455,11 +453,13 @@ export const TreeTableRow = React.memo((props) => {
     };
 
     const isSelected = () => {
-        if (props.selectionMode === 'single' || (props.selectionMode === 'multiple' && props.selectionKeys)) {
-            return props.selectionMode === 'single' ? props.selectionKeys === props.node.key : props.selectionKeys[props.node.key] !== undefined;
+        if (props.selectionMode === 'single') {
+            return props.selectionKeys === props.node.key;
+        } else if ((props.selectionMode === 'multiple' || props.selectionMode === 'checkbox') && props.selectionKeys) {
+            return props.selectionKeys[props.node.key] !== undefined;
+        } else {
+            return false;
         }
-
-        return false;
     };
 
     const isChecked = () => {
@@ -521,7 +521,13 @@ export const TreeTableRow = React.memo((props) => {
         if (props.selectionMode === 'checkbox' && props.node.selectable !== false) {
             const checked = isChecked();
             const partialChecked = isPartialChecked();
-            const icon = checked ? props.checkboxIcon || <CheckIcon /> : partialChecked ? props.checkboxIcon || <MinusIcon /> : null;
+            const checkboxIconProps = mergeProps(
+                {
+                    className: cx('checkIcon')
+                },
+                getColumnPTOptions('rowCheckbox.icon')
+            );
+            const icon = checked ? props.checkboxIcon || <CheckIcon {...checkboxIconProps} /> : partialChecked ? props.checkboxIcon || <MinusIcon /> : null;
             const checkIcon = IconUtils.getJSXIcon(icon, {}, { props, checked, partialChecked });
             const rowCheckboxProps = mergeProps(
                 {