Improve custom Tree icon implementation Related - #4220

Add Tree icon templating support Related - #4226
Refactor on checkox.d.ts

components/lib/checkbox/checkbox.d.ts

@@ -89,7 +89,7 @@ export interface CheckboxProps extends Omit<React.DetailedHTMLProps<React.InputH
      */
     tabIndex?: number | undefined;
     /**
-     * Icon of the checkbox icon.
+     * Icon to display in checkbox.
      */
     icon?: IconType<CheckboxProps> | undefined;
     /**

components/lib/tree/Tree.js

@@ -1,7 +1,9 @@
 import * as React from 'react';
-import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
+import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
 import { TreeBase } from './TreeBase';
 import { UITreeNode } from './UITreeNode';
+import { SearchIcon } from '../icon/search';
+import { SpinnerIcon } from '../icon/spinner';
 
 export const Tree = React.memo(
     React.forwardRef((inProps, ref) => {
@@ -305,6 +307,9 @@ export const Tree = React.memo(
                     index={index}
                     last={last}
                     path={String(index)}
+                    checkboxIcon={props.checkboxIcon}
+                    expandIcon={props.expandIcon}
+                    collapseIcon={props.collapseIcon}
                     disabled={props.disabled}
                     selectionMode={props.selectionMode}
                     selectionKeys={props.selectionKeys}
@@ -363,13 +368,11 @@ export const Tree = React.memo(
 
         const createLoader = () => {
             if (props.loading) {
-                const icon = classNames('p-tree-loading-icon pi-spin', props.loadingIcon);
+                const iconClassName = 'p-tree-loading-icon';
+                const icon = props.loadingIcon || <SpinnerIcon width={'2rem'} height={'2rem'} className={iconClassName} spin />;
+                const loadingIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props });
 
-                return (
-                    <div className="p-tree-loading-overlay p-component-overlay">
-                        <i className={icon} />
-                    </div>
-                );
+                return <div className="p-tree-loading-overlay p-component-overlay">{loadingIcon}</div>;
             }
 
             return null;
@@ -378,6 +381,10 @@ export const Tree = React.memo(
         const createFilter = () => {
             if (props.filter) {
                 const value = ObjectUtils.isNotEmpty(filteredValue) ? filteredValue : '';
+                const iconClassName = 'p-tree-filter-icon';
+                const icon = props.filterIcon || <SearchIcon className={iconClassName} />;
+                const filterIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props });
+
                 let content = (
                     <div className="p-tree-filter-container">
                         <input
@@ -390,7 +397,7 @@ export const Tree = React.memo(
                             onChange={onFilterInputChange}
                             disabled={props.disabled}
                         />
-                        <span className="p-tree-filter-icon pi pi-search"></span>
+                        {filterIcon}
                     </div>
                 );
 
@@ -401,7 +408,7 @@ export const Tree = React.memo(
                         filterOptions: filterOptions,
                         filterInputKeyDown: onFilterInputKeyDown,
                         filterInputChange: onFilterInputChange,
-                        filterIconClassName: 'p-dropdown-filter-icon pi pi-search',
+                        filterIconClassName: 'p-dropdown-filter-icon',
                         props
                     };
 
@@ -422,7 +429,7 @@ export const Tree = React.memo(
                 if (props.header) {
                     const defaultContentOptions = {
                         filterContainerClassName: 'p-tree-filter-container',
-                        filterIconClasssName: 'p-tree-filter-icon pi pi-search',
+                        filterIconClassName: 'p-tree-filter-icon',
                         filterInput: {
                             className: 'p-tree-filter p-inputtext p-component',
                             onKeyDown: onFilterInputKeyDown,

components/lib/tree/TreeBase.js

@@ -5,6 +5,7 @@ export const TreeBase = {
         __TYPE: 'Tree',
         id: null,
         value: null,
+        checkboxIcon: null,
         disabled: false,
         selectionMode: null,
         selectionKeys: null,
@@ -20,12 +21,15 @@ export const TreeBase = {
         propagateSelectionUp: true,
         propagateSelectionDown: true,
         loading: false,
-        loadingIcon: 'pi pi-spinner',
+        loadingIcon: null,
+        expandIcon: null,
+        collapseIcon: null,
         dragdropScope: null,
         header: null,
         footer: null,
         showHeader: true,
         filter: false,
+        filterIcon: null,
         filterValue: null,
         filterBy: 'label',
         filterMode: 'lenient',

components/lib/tree/UITreeNode.js

@@ -1,7 +1,11 @@
 import * as React from 'react';
 import { ariaLabel } from '../api/Api';
 import { Ripple } from '../ripple/Ripple';
-import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
+import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
+import { CheckIcon } from '../icon/check';
+import { ChevronDownIcon } from '../icon/chevrondown';
+import { ChevronRightIcon } from '../icon/chevronright';
+import { MinusIcon } from '../icon/minus';
 
 export const UITreeNode = React.memo((props) => {
     const contentRef = React.useRef(null);
@@ -549,12 +553,14 @@ export const UITreeNode = React.memo((props) => {
             const checked = isChecked();
             const partialChecked = isPartialChecked();
             const className = classNames('p-checkbox-box', { 'p-highlight': checked, 'p-indeterminate': partialChecked, 'p-disabled': props.disabled });
-            const icon = classNames('p-checkbox-icon p-c', { 'pi pi-check': checked, 'pi pi-minus': partialChecked });
+            const iconClassName = 'p-checkbox-icon p-c';
+            const icon = checked ? props.checkboxIcon || <CheckIcon className={iconClassName} /> : partialChecked ? props.checkboxIcon || <MinusIcon className={iconClassName} /> : null;
+            const checkboxIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, props);
 
             return (
                 <div className="p-checkbox p-component">
                     <div className={className} role="checkbox" aria-checked={checked}>
-                        <span className={icon}></span>
+                        {checkboxIcon}
                     </div>
                 </div>
             );
@@ -577,10 +583,12 @@ export const UITreeNode = React.memo((props) => {
 
     const createToggler = () => {
         const label = expanded ? ariaLabel('collapseLabel') : ariaLabel('expandLabel');
-        const iconClassName = classNames('p-tree-toggler-icon pi pi-fw', { 'pi-chevron-right': !expanded, 'pi-chevron-down': expanded });
+        const iconProps = { className: 'p-tree-toggler-icon', 'aria-hidden': true };
+        const icon = expanded ? props.collapseIcon || <ChevronDownIcon {...iconProps} /> : props.expandIcon || <ChevronRightIcon {...iconProps} />;
+        const togglerIcon = IconUtils.getJSXIcon(icon, { ...iconProps }, { props, expanded });
         let content = (
             <button type="button" className="p-tree-toggler p-link" tabIndex={-1} onClick={onTogglerClick} aria-label={label}>
-                <span className={iconClassName} aria-hidden="true"></span>
+                {togglerIcon}
                 <Ripple />
             </button>
         );

components/lib/tree/tree.d.ts

@@ -9,6 +9,7 @@
  */
 import * as React from 'react';
 import TreeNode from '../treenode';
+import { IconType } from '../utils/utils';
 
 /**
  * Custom tree header template options
@@ -364,9 +365,20 @@ export interface TreeProps {
     loading?: boolean | undefined;
     /**
      * Icon to display when tree is loading.
-     * @defaultValue pi pi-spin
      */
-    loadingIcon?: string | undefined;
+    loadingIcon?: IconType<TreeProps> | undefined;
+    /**
+     * Icon to display in the checkbox.
+     */
+    checkboxIcon?: IconType<TreeProps> | undefined;
+    /**
+     * Icon of an expanded tab.
+     */
+    collapseIcon?: IconType<TreeProps> | undefined;
+    /**
+     * Icon of an collapsed tab.
+     */
+    expandIcon?: IconType<TreeProps> | undefined;
     /**
      * Unique key to enable dragdrop functionality.
      * @defaultValue false
@@ -394,6 +406,10 @@ export interface TreeProps {
      * @defaultValue false
      */
     filter?: boolean | undefined;
+    /**
+     * Icon of the filter.
+     */
+    filterIcon?: IconType<TreeProps> | string;
     /**
      * When filtering is enabled, the value of input field.
      */