Fixed #1593 - Add expandIcon and collapseIcon properties to Accordion

primefaces · Sep 20, 2020 · ee10a7a · ee10a7a
1 parent f336a30
commit ee10a7a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 2 deletions.
diff --git a/src/components/accordion/Accordion.d.ts b/src/components/accordion/Accordion.d.ts
@@ -5,6 +5,7 @@ interface AccordionTabProps {
     disabled?: boolean;
     headerStyle?: object;
     headerClassName?: string;
+    headerTemplate?: any;
     contentStyle?: object;
     contentClassName?: string;
 }
@@ -17,6 +18,8 @@ interface AccordionProps {
     className?: string;
     style?: object;
     multiple?: boolean;
+    expandIcon?: string;
+    collapseIcon?: string;
     onTabOpen?(e: {originalEvent: Event, index: number}): void;
     onTabClose?(e: {originalEvent: Event, index: number}): void;
     onTabChange?(e: {originalEvent: Event, index: number}): void;

diff --git a/src/components/accordion/Accordion.js b/src/components/accordion/Accordion.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import UniqueComponentId from '../utils/UniqueComponentId';
 import { CSSTransition } from 'react-transition-group';
+import ObjectUtils from '../utils/ObjectUtils';
 
 export class AccordionTab extends Component {
 
@@ -11,6 +12,7 @@ export class AccordionTab extends Component {
         disabled: false,
         headerStyle: null,
         headerClassName: null,
+        headerTemplate: null,
         contentStyle: null,
         contentClassName: null
     }
@@ -20,6 +22,7 @@ export class AccordionTab extends Component {
         disabled: PropTypes.bool,
         headerStyle: PropTypes.object,
         headerClassName: PropTypes.string,
+        headerTemplate: PropTypes.any,
         contentStyle: PropTypes.object,
         contentClassName: PropTypes.string
     }
@@ -33,6 +36,8 @@ export class Accordion extends Component {
         className: null,
         style: null,
         multiple: false,
+        expandIcon: 'pi pi-chevron-right',
+        collapseIcon: 'pi pi-chevron-down',
         onTabOpen: null,
         onTabClose: null,
         onTabChange: null
@@ -44,6 +49,8 @@ export class Accordion extends Component {
         className: PropTypes.string,
         style: PropTypes.object,
         multiple: PropTypes.bool,
+        expandIcon: PropTypes.string,
+        collapseIcon: PropTypes.string,
         onTabOpen: PropTypes.func,
         onTabClose: PropTypes.func,
         onTabChange: PropTypes.func
@@ -108,16 +115,17 @@ export class Accordion extends Component {
 
     renderTabHeader(tab, selected, index) {
         const tabHeaderClass = classNames('p-accordion-header', {'p-highlight': selected, 'p-disabled': tab.props.disabled}, tab.props.headerClassName);
-        const iconClassName = classNames('p-accordion-toggle-icon pi', { 'pi-chevron-right': !selected, 'pi-chevron-down': selected });
+        const iconClassName = classNames('p-accordion-toggle-icon', { [`${this.props.expandIcon}`]: !selected, [`${this.props.collapseIcon}`]: selected });
         const id = this.id + '_header_' + index;
         const ariaControls = this.id + '_content_' + index;
         const tabIndex = tab.props.disabled ? -1 : null;
+        const header = tab.props.headerTemplate ? ObjectUtils.getJSXElement(tab.props.headerTemplate, tab.props) : <span className="p-accordion-header-text">{tab.props.header}</span>;
 
         return (
             <div className={tabHeaderClass} style={tab.props.headerStyle}>
                 <a href={'#' + ariaControls} id={id} className="p-accordion-header-link" aria-controls={ariaControls} role="tab" aria-expanded={selected} onClick={(event) => this.onTabHeaderClick(event, tab, index)} tabIndex={tabIndex}>
                     <span className={iconClassName}></span>
-                    <span className="p-accordion-header-text">{tab.props.header}</span>
+                    {header}
                 </a>
             </div>
         );