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 8a5465a. * Revert "style: change check color" This reverts commit 28ac80c. * style: set checkboxIconProps
primefaces · Dec 4, 2024 · 38b03a6 · 38b03a6
1 parent bcb43d0
commit 38b03a6
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 7 deletions.
diff --git 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
@@ -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(
                 {