@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
48 lines • 2.61 kB
JavaScript
;
/*!
* Copyright (C) Microsoft Corporation. All rights reserved.
*/
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var Button_1 = require("office-ui-fabric-react/lib/Button");
var Utilities_1 = require("office-ui-fabric-react/lib/Utilities");
var React = require("react");
require("./Accordion.scss");
var Accordion = /** @class */ (function (_super) {
tslib_1.__extends(Accordion, _super);
function Accordion(props) {
var _this = _super.call(this, props) || this;
_this.toggleState = function () {
_this.setState(function (prevState) {
return { isContentVisible: !prevState.isContentVisible };
});
};
_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 () {
var _a = this.props, onRenderMenu = _a.onRenderMenu, className = _a.className, buttonAs = _a.buttonAs, onClick = _a.onClick, other = tslib_1.__rest(_a, ["onRenderMenu", "className", "buttonAs", "onClick"]);
var _b = this.props, menuIconProps = _b.menuIconProps, onRenderContent = _b.onRenderContent;
var AccordionButton = buttonAs || Button_1.DefaultButton;
if (!menuIconProps) {
menuIconProps = this.state.isContentVisible ? { iconName: 'ChevronUp' } : { iconName: 'ChevronDown' };
}
onRenderContent = onRenderContent || onRenderMenu;
return (React.createElement("div", { className: Utilities_1.css('ba-Accordion', this.state.isContentVisible && 'ba-Accordion--contentVisible', className) },
React.createElement(AccordionButton, tslib_1.__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 && onRenderContent(this.props.menuProps)))));
};
return Accordion;
}(Utilities_1.BaseComponent));
exports.Accordion = Accordion;
//# sourceMappingURL=Accordion.js.map