From ee10a7a7f0c8d1094d84f4517347b287c0dd1fb9 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Sun, 20 Sep 2020 19:49:54 +0300
Subject: [PATCH] Fixed #1593 - Add expandIcon and collapseIcon properties to
 Accordion

---
 src/components/accordion/Accordion.d.ts |  3 +++
 src/components/accordion/Accordion.js   | 12 ++++++++++--
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/accordion/Accordion.d.ts b/src/components/accordion/Accordion.d.ts
index 38c1b67319..89005480b1 100644
--- 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
index 5efa98ceb9..9204681bd8 100644
--- 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>
         );