Improve custom CascadeSelect icon implementation Related - #4220

Add CascadeSelect icon templating support Related - #4226
primefaces · Apr 10, 2023 · a5c8d7b · a5c8d7b
1 parent 5ac238b
commit a5c8d7b
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 11 deletions.
diff --git a/components/lib/cascadeselect/CascadeSelect.js b/components/lib/cascadeselect/CascadeSelect.js
@@ -4,10 +4,10 @@ import { CSSTransition } from '../csstransition/CSSTransition';
 import { useMountEffect, useOverlayListener, useUnmountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { OverlayService } from '../overlayservice/OverlayService';
 import { Portal } from '../portal/Portal';
-import { classNames, DomHandler, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
+import { classNames, DomHandler, IconUtils, ObjectUtils, UniqueComponentId, ZIndexUtils } from '../utils/Utils';
 import { CascadeSelectBase } from './CascadeSelectBase';
 import { CascadeSelectSub } from './CascadeSelectSub';
-
+import { ChevronDownIcon } from '../icon/chevrondown';
 export const CascadeSelect = React.memo(
     React.forwardRef((inProps, ref) => {
         const props = CascadeSelectBase.getProps(inProps);
@@ -305,11 +305,13 @@ export const CascadeSelect = React.memo(
         };
 
         const createDropdownIcon = () => {
-            const iconClassName = classNames('p-cascadeselect-trigger-icon', props.dropdownIcon);
+            const iconClassName = 'p-cascadeselect-trigger-icon';
+            const icon = props.dropdownIcon || <ChevronDownIcon className={iconClassName} />;
+            const dropdownIcon = IconUtils.getJSXIcon(icon, { className: iconClassName }, { props });
 
             return (
                 <div className="p-cascadeselect-trigger" role="button" aria-haspopup="listbox" aria-expanded={overlayVisibleState}>
-                    <span className={iconClassName}></span>
+                    {dropdownIcon}
                 </div>
             );
         };
@@ -334,6 +336,7 @@ export const CascadeSelect = React.memo(
                                 options={props.options}
                                 selectionPath={selectionPath.current}
                                 className={'p-cascadeselect-items'}
+                                optionGroupIcon={props.optionGroupIcon}
                                 optionLabel={props.optionLabel}
                                 optionValue={props.optionValue}
                                 level={0}

diff --git a/components/lib/cascadeselect/CascadeSelectBase.js b/components/lib/cascadeselect/CascadeSelectBase.js
@@ -12,6 +12,7 @@ export const CascadeSelectBase = {
         options: null,
         optionLabel: null,
         optionValue: null,
+        optionGroupIcon: null,
         optionGroupLabel: null,
         optionGroupChildren: null,
         placeholder: null,
@@ -24,7 +25,7 @@ export const CascadeSelectBase = {
         ariaLabelledBy: null,
         appendTo: null,
         transitionOptions: null,
-        dropdownIcon: 'pi pi-chevron-down',
+        dropdownIcon: null,
         scrollHeight: '400px',
         onChange: null,
         onGroupChange: null,

diff --git a/components/lib/cascadeselect/CascadeSelectSub.js b/components/lib/cascadeselect/CascadeSelectSub.js
@@ -2,8 +2,8 @@ import * as React from 'react';
 import PrimeReact from '../api/Api';
 import { useMountEffect, useUpdateEffect } from '../hooks/Hooks';
 import { Ripple } from '../ripple/Ripple';
-import { classNames, DomHandler, ObjectUtils } from '../utils/Utils';
-
+import { classNames, DomHandler, IconUtils, ObjectUtils } from '../utils/Utils';
+import { AngleRightIcon } from '../icon/angleright';
 export const CascadeSelectSub = React.memo((props) => {
     const [activeOptionState, setActiveOptionState] = React.useState(null);
     const elementRef = React.useRef(null);
@@ -208,7 +208,9 @@ export const CascadeSelectSub = React.memo((props) => {
         );
         const submenu = createSubmenu(option);
         const content = props.template ? ObjectUtils.getJSXElement(props.template, getOptionValue(option)) : <span className="p-cascadeselect-item-text">{getOptionLabelToRender(option)}</span>;
-        const optionGroup = isOptionGroup(option) && <span className="p-cascadeselect-group-icon pi pi-angle-right" />;
+        const iconClassName = 'p-cascadeselect-group-icon';
+        const icon = props.optionGroupIcon || <AngleRightIcon className={iconClassName} />;
+        const optionGroup = isOptionGroup(option) && IconUtils.getJSXIcon(icon, { className: iconClassName }, { props });
         const key = getOptionLabelToRender(option) + '_' + index;
 
         return (

diff --git a/components/lib/cascadeselect/cascadeselect.d.ts b/components/lib/cascadeselect/cascadeselect.d.ts
@@ -10,6 +10,7 @@
 import * as React from 'react';
 import { CSSTransitionProps } from '../csstransition';
 import { SelectItemOptionsType } from '../selectitem/selectitem';
+import { IconType } from '../utils/utils';
 
 /**
  * Custom change event
@@ -76,6 +77,10 @@ export interface CascadeSelectProps extends Omit<React.DetailedHTMLProps<React.I
      * Property name or getter function to use as the value of an option, defaults to the option itself when not defined.
      */
     optionValue?: string | undefined;
+    /**
+     * Icon of the option group.
+     */
+    optionGroupIcon?: IconType<CascadeSelectProps> | undefined;
     /**
      * Property name or getter function to use as the label of an option group.
      */
@@ -128,10 +133,9 @@ export interface CascadeSelectProps extends Omit<React.DetailedHTMLProps<React.I
      */
     transitionOptions?: CSSTransitionProps | undefined;
     /**
-     * Icon class of the dropdown icon.
-     * @defaultValue pi pi-chevron-down
+     * Icon of the dropdown icon.
      */
-    dropdownIcon?: string | undefined;
+    dropdownIcon?: IconType<CascadeSelectProps> | undefined;
     /**
      * Maximum height of the options panel on responsive mode.
      * @defaultValue 400px