@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
46 lines • 2.5 kB
JavaScript
/*!
* Copyright (C) Microsoft Corporation. All rights reserved.
*/
import * as tslib_1 from "tslib";
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
import { BaseComponent, css } from 'office-ui-fabric-react/lib/Utilities';
import * as React from 'react';
import './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 || DefaultButton;
if (!menuIconProps) {
menuIconProps = this.state.isContentVisible ? { iconName: 'ChevronUp' } : { iconName: 'ChevronDown' };
}
onRenderContent = onRenderContent || onRenderMenu;
return (React.createElement("div", { className: 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;
}(BaseComponent));
export { Accordion };
//# sourceMappingURL=Accordion.js.map