UNPKG

office-ui-fabric-react

Version:

Reusable React components for building experiences for Office 365.

142 lines (140 loc) 6.44 kB
"use strict"; var __extends = (this && this.__extends) || function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; function __() { this.constructor = d; } d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __()); }; /* tslint:disable:no-unused-variable */ var React = require('react'); /* tslint:enable:no-unused-variable */ var BaseComponent_1 = require('../../common/BaseComponent'); var Panel_Props_1 = require('./Panel.Props'); var Layer_1 = require('../Layer/Layer'); var Overlay_1 = require('../../Overlay'); var index_1 = require('../Popup/index'); var css_1 = require('../../utilities/css'); var object_1 = require('../../utilities/object'); var rtl_1 = require('../../utilities/rtl'); require('./Panel.scss'); var Panel = (function (_super) { __extends(Panel, _super); function Panel(props) { _super.call(this, props); this._onPanelClick = this._onPanelClick.bind(this); this._onPanelRef = this._onPanelRef.bind(this); this.state = { isOpen: !!props.isOpen, isAnimatingOpen: props.isOpen, isAnimatingClose: false, id: object_1.getId('Panel') }; } Panel.prototype.componentDidMount = function () { var _this = this; if (this.state.isOpen) { this._async.setTimeout(function () { _this.setState({ isAnimatingOpen: false }); }, 2000); } }; Panel.prototype.componentWillReceiveProps = function (newProps) { if (newProps.isOpen !== this.state.isOpen) { this.setState({ isOpen: newProps.isOpen, isAnimatingOpen: newProps.isOpen ? true : false, isAnimatingClose: newProps.isOpen ? false : true }); } }; Panel.prototype.render = function () { var _a = this.props, children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, type = _a.type, hasCloseButton = _a.hasCloseButton, isLightDismiss = _a.isLightDismiss, headerText = _a.headerText, closeButtonAriaLabel = _a.closeButtonAriaLabel, _c = _a.headerClassName, headerClassName = _c === void 0 ? '' : _c; var _d = this.state, isOpen = _d.isOpen, isAnimatingOpen = _d.isAnimatingOpen, isAnimatingClose = _d.isAnimatingClose, id = _d.id; var isLeft = type === Panel_Props_1.PanelType.smallFixedNear ? true : false; var isRTL = rtl_1.getRTL(); var isOnRightSide = isRTL ? isLeft : !isLeft; var headerTextId = id + '-headerText'; var pendingCommandBarContent = ''; var header; if (headerText) { header = React.createElement("p", {className: css_1.css('ms-Panel-headerText', headerClassName), id: headerTextId}, headerText); } var closeButton; if (hasCloseButton) { closeButton = React.createElement("button", {className: 'ms-Panel-closeButton ms-PanelAction-close', onClick: this._onPanelClick, "aria-label": closeButtonAriaLabel, "data-is-visible": true}, React.createElement("i", {className: 'ms-Panel-closeIcon ms-Icon ms-Icon--Cancel'}) ); } return (React.createElement(Layer_1.Layer, null, React.createElement(index_1.Popup, {role: 'dialog', ariaLabelledBy: headerText ? headerTextId : undefined, onDismiss: this.props.onDismiss}, React.createElement("div", {ref: this._onPanelRef, className: css_1.css('ms-Panel', className, { 'ms-Panel--openLeft': !isOnRightSide, 'ms-Panel--openRight': isOnRightSide, 'is-open': isOpen, 'ms-Panel-animateIn': isAnimatingOpen, 'ms-Panel-animateOut': isAnimatingClose, 'ms-Panel--smFluid': type === Panel_Props_1.PanelType.smallFluid, 'ms-Panel--smLeft': type === Panel_Props_1.PanelType.smallFixedNear, 'ms-Panel--sm': type === Panel_Props_1.PanelType.smallFixedFar, 'ms-Panel--md': type === Panel_Props_1.PanelType.medium, 'ms-Panel--lg': type === Panel_Props_1.PanelType.large || type === Panel_Props_1.PanelType.largeFixed, 'ms-Panel--fixed': type === Panel_Props_1.PanelType.largeFixed, 'ms-Panel--xl': type === Panel_Props_1.PanelType.extraLarge, })}, React.createElement(Overlay_1.Overlay, {isDarkThemed: false, onClick: isLightDismiss ? this._onPanelClick : null}), React.createElement("div", {className: 'ms-Panel-main'}, React.createElement("div", {className: 'ms-Panel-commands', "data-is-visible": true}, pendingCommandBarContent, closeButton), React.createElement("div", {className: 'ms-Panel-contentInner'}, header, React.createElement("div", {className: 'ms-Panel-content'}, children)))) ) )); }; Panel.prototype.dismiss = function () { if (this.state.isOpen) { this.setState({ isAnimatingOpen: false, isAnimatingClose: true }); } }; Panel.prototype._onPanelClick = function () { this.dismiss(); }; Panel.prototype._onPanelRef = function (ref) { if (ref) { this._events.on(ref, 'animationend', this._onAnimationEnd); } else { this._events.off(); } }; Panel.prototype._onAnimationEnd = function (ev) { if (ev.animationName.indexOf('In') > -1) { this.setState({ isOpen: true, isAnimatingOpen: false }); } if (ev.animationName.indexOf('Out') > -1) { this.setState({ isOpen: false, isAnimatingClose: false }); if (this.props.onDismiss) { this.props.onDismiss(); } } }; Panel.defaultProps = { isOpen: false, hasCloseButton: true, type: Panel_Props_1.PanelType.smallFixedFar, }; return Panel; }(BaseComponent_1.BaseComponent)); exports.Panel = Panel; //# sourceMappingURL=Panel.js.map