@uifabric/experiments
Version:
Experimental React components for building experiences for Microsoft 365.
50 lines • 2.62 kB
JavaScript
/*!
* Copyright (C) Microsoft Corporation. All rights reserved.
*/
import { __assign, __extends, __rest } from "tslib";
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { initializeComponentRef, css, composeRenderFunction } from 'office-ui-fabric-react/lib/Utilities';
import * as React from 'react';
import './Accordion.scss';
var Accordion = /** @class */ (function (_super) {
__extends(Accordion, _super);
function Accordion(props) {
var _this = _super.call(this, props) || this;
_this.toggleState = function () {
_this.setState(function (prevState) {
return { isContentVisible: !prevState.isContentVisible };
});
};
initializeComponentRef(_this);
_this.state = {
isContentVisible: false,
};
return _this;
}
Accordion.prototype.componentDidUpdate = function (prevProps, prevState) {
if (this.state.isContentVisible && !prevState.isContentVisible && this.props.onOpen) {
this.props.onOpen();
}
else if (!this.state.isContentVisible && prevState.isContentVisible && this.props.onClose) {
this.props.onClose();
}
};
Accordion.prototype.render = function () {
// eslint-disable-next-line deprecation/deprecation
var _a = this.props, onRenderMenu = _a.onRenderMenu, className = _a.className, buttonAs = _a.buttonAs, onClick = _a.onClick, other = __rest(_a, ["onRenderMenu", "className", "buttonAs", "onClick"]);
var menuIconProps = this.props.menuIconProps;
var AccordionButton = buttonAs || DefaultButton;
if (!menuIconProps) {
menuIconProps = this.state.isContentVisible ? { iconName: 'ChevronUp' } : { iconName: 'ChevronDown' };
}
var onRenderContent = onRenderMenu
? composeRenderFunction(this.props.onRenderContent, onRenderMenu)
: this.props.onRenderContent;
return (React.createElement("div", { className: css('ba-Accordion', this.state.isContentVisible && 'ba-Accordion--contentVisible', className) },
React.createElement(AccordionButton, __assign({ onClick: this.toggleState, onMenuClick: this.toggleState, menuIconProps: menuIconProps, className: 'ba-Accordion-header', "aria-expanded": this.state.isContentVisible }, other)),
this.state.isContentVisible && (React.createElement("div", { className: 'ba-Accordion-content' }, onRenderContent(this.props.menuProps)))));
};
return Accordion;
}(React.Component));
export { Accordion };
//# sourceMappingURL=Accordion.js.map