@mikezimm/fps-library-v2
Version:
Library of reusable typescript/javascript functions, interfaces and constants
81 lines • 4.04 kB
JavaScript
import * as React from 'react';
import { Icon, } from '@fluentui/react/lib/Icon';
require('@mikezimm/fps-styles/dist/AccordionStyles.css');
export default class Accordion extends React.Component {
constructor(props) {
super(props);
this.state = {
showAccordion: this.props.showAccordion !== undefined ? this.props.showAccordion : false,
};
}
componentDidMount() {
}
componentDidUpdate(prevProps) {
let refresh = false;
if (prevProps.showAccordion !== this.props.showAccordion) {
refresh = true;
}
if (prevProps.refreshId !== this.props.refreshId) {
refresh = true;
}
if (refresh === true) {
}
return refresh;
}
shouldComponentUpdate(nextProps, nextState) {
if (this.props.refreshId !== nextProps.refreshId) {
return true;
}
else if (this.props.showAccordion !== nextProps.showAccordion) {
return true;
}
else if (this.state.showAccordion !== nextState.showAccordion) {
return true;
}
return false;
}
render() {
const { title, content, defaultIcon, animation, componentClass, titleClass, titleExpandClass, titleCollapseClass, titleStyles, componentStyles, contentStylesVis, contentStylesHidden } = this.props;
const { showAccordion, } = this.state;
let accordionClassName = '';
switch (this.props.animation) {
case 'CenterExpand':
accordionClassName = showAccordion === true || contentStylesHidden ? 'show-fps-accordion-2' : 'hide-fps-accordion-2';
break;
case 'TopDown':
accordionClassName = showAccordion === true || contentStylesHidden ? 'show-fps-accordion-1' : 'hide-fps-accordion-1';
break;
default:
accordionClassName = showAccordion === true || contentStylesHidden ? 'show-fps-accordion-1' : 'hide-fps-accordion-1';
}
const ExpandIconName = defaultIcon ? defaultIcon : 'ChevronDownSmall';
const AccordionIcon = React.createElement(Icon, { style: { paddingLeft: '20px' }, iconName: showAccordion === true ? 'ChevronUpSmall' : ExpandIconName });
const TitleClassNames = ['fps-accordion-title-flex'];
if (typeof title === 'string')
TitleClassNames.push('fps-accordion-title');
if (titleClass)
TitleClassNames.push(titleClass);
if (showAccordion === true && titleExpandClass)
TitleClassNames.push(titleExpandClass);
if (showAccordion !== true && titleCollapseClass)
TitleClassNames.push(titleCollapseClass);
const contentStylesWhenVisible = contentStylesVis ? contentStylesVis : { height: '100px' };
const contentStyles = showAccordion === true ? contentStylesWhenVisible : contentStylesHidden ? contentStylesHidden : {};
if (!title)
contentStyles.cursor = 'pointer'; // Make entire content the button if there is no title
const AccordionComponent = React.createElement("div", { className: componentClass, style: componentStyles, onClick: title ? null : this._toggleAccordion.bind(this) },
React.createElement("div", { className: TitleClassNames.join(' '), style: titleStyles, onClick: title ? this._toggleAccordion.bind(this) : null },
title,
" ",
AccordionIcon),
React.createElement("div", { className: ['fps-accordion', accordionClassName].join(' '), style: contentStyles }, content));
return (AccordionComponent);
}
_toggleAccordion() {
let showAccordion = this.state.showAccordion === true ? false : true;
this.setState({ showAccordion: showAccordion });
if (this.props.toggleCallback)
this.props.toggleCallback(showAccordion);
}
}
//# sourceMappingURL=Accordion.js.map