office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
163 lines (161 loc) • 10.7 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "../FocusTrapZone/index", "./Panel.Props", "../Layer/Layer", "../../Overlay", "../../Popup", "../../Button", "../../Styling", "./Panel.scss"], function (require, exports, tslib_1, React, Utilities_1, index_1, Panel_Props_1, Layer_1, Overlay_1, Popup_1, Button_1, Styling_1, stylesImport) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var styles = stylesImport;
var Panel = (function (_super) {
tslib_1.__extends(Panel, _super);
function Panel(props) {
var _this = _super.call(this, props) || this;
_this.state = {
isFooterSticky: false,
isOpen: false,
isAnimating: false,
id: Utilities_1.getId('Panel')
};
return _this;
}
Panel.prototype.componentDidMount = function () {
this._events.on(window, 'resize', this._updateFooterPosition);
if (this.props.isOpen) {
this.open();
}
};
Panel.prototype.componentWillReceiveProps = function (newProps) {
if (newProps.isOpen !== this.state.isOpen) {
if (newProps.isOpen) {
this.open();
}
else {
this.dismiss();
}
}
};
Panel.prototype.render = function () {
var _a = this.props, children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, closeButtonAriaLabel = _a.closeButtonAriaLabel, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, forceFocusInsideTrap = _a.forceFocusInsideTrap, hasCloseButton = _a.hasCloseButton, headerText = _a.headerText, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isLightDismiss = _a.isLightDismiss, layerProps = _a.layerProps, type = _a.type, customWidth = _a.customWidth, headerClassName = _a.headerClassName, _c = _a.onRenderNavigation, onRenderNavigation = _c === void 0 ? this._onRenderNavigation : _c, _d = _a.onRenderHeader, onRenderHeader = _d === void 0 ? this._onRenderHeader : _d, _e = _a.onRenderBody, onRenderBody = _e === void 0 ? this._onRenderBody : _e, _f = _a.onRenderFooter, onRenderFooter = _f === void 0 ? this._onRenderFooter : _f;
var _g = this.state, isOpen = _g.isOpen, isAnimating = _g.isAnimating, id = _g.id, isFooterSticky = _g.isFooterSticky;
var isLeft = type === Panel_Props_1.PanelType.smallFixedNear ? true : false;
var isRTL = Utilities_1.getRTL();
var isOnRightSide = isRTL ? isLeft : !isLeft;
var headerTextId = id + '-headerText';
var customWidthStyles = (type === Panel_Props_1.PanelType.custom) ? { width: customWidth } : {};
var renderProps = tslib_1.__assign({}, this.props, { componentId: id });
if (!isOpen && !isAnimating) {
return null;
}
var overlay;
if (isBlocking) {
overlay = (React.createElement(Overlay_1.Overlay, { className: Utilities_1.css(styles.overlay, isOpen && isAnimating && Styling_1.AnimationClassNames.fadeIn200, !isOpen && isAnimating && Styling_1.AnimationClassNames.fadeOut200), isDarkThemed: false, onClick: isLightDismiss ? this._onPanelClick : null }));
}
return (React.createElement(Layer_1.Layer, tslib_1.__assign({}, layerProps),
React.createElement(Popup_1.Popup, { role: 'dialog', ariaLabelledBy: headerText && headerTextId, onDismiss: this.dismiss },
React.createElement("div", { className: Utilities_1.css('ms-Panel', styles.root, className,
// because the RTL animations are not being used, we need to set a class
isOpen && ('is-open ' + styles.rootIsOpen), type === Panel_Props_1.PanelType.smallFluid && ('ms-Panel--smFluid ' + styles.rootIsSmallFluid), type === Panel_Props_1.PanelType.smallFixedNear && ('ms-Panel--smLeft ' + styles.rootIsSmallLeft), type === Panel_Props_1.PanelType.smallFixedFar && ('ms-Panel--sm ' + styles.rootIsSmall), type === Panel_Props_1.PanelType.medium && ('ms-Panel--md ' + styles.rootIsMedium), (type === Panel_Props_1.PanelType.large || type === Panel_Props_1.PanelType.largeFixed) && ('ms-Panel--lg ' + styles.rootIsLarge), type === Panel_Props_1.PanelType.largeFixed && ('ms-Panel--fixed ' + styles.rootIsFixed), type === Panel_Props_1.PanelType.extraLarge && ('ms-Panel--xl ' + styles.rootIsXLarge), type === Panel_Props_1.PanelType.custom && ('ms-Panel--custom ' + styles.rootIsCustom), hasCloseButton && ('ms-Panel--hasCloseButton ' + styles.rootHasCloseButton)) },
overlay,
React.createElement(index_1.FocusTrapZone, { className: Utilities_1.css('ms-Panel-main', styles.main, isOpen && isAnimating && !isOnRightSide && Styling_1.AnimationClassNames.slideRightIn40, isOpen && isAnimating && isOnRightSide && Styling_1.AnimationClassNames.slideLeftIn40, !isOpen && isAnimating && !isOnRightSide && Styling_1.AnimationClassNames.slideLeftOut40, !isOpen && isAnimating && isOnRightSide && Styling_1.AnimationClassNames.slideRightOut40), style: customWidthStyles, elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isLightDismiss, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector },
React.createElement("div", { className: Utilities_1.css('ms-Panel-commands'), "data-is-visible": true }, onRenderNavigation(renderProps, this._onRenderNavigation)),
React.createElement("div", { className: Utilities_1.css('ms-Panel-contentInner', styles.contentInner) },
onRenderHeader(renderProps, this._onRenderHeader),
onRenderBody(renderProps, this._onRenderBody),
onRenderFooter(renderProps, this._onRenderFooter)))))));
};
Panel.prototype.open = function () {
var _this = this;
if (!this.state.isOpen) {
this.setState({
isOpen: true,
isAnimating: true
}, function () {
_this._async.setTimeout(_this._onTransitionComplete, 200);
});
}
};
Panel.prototype.dismiss = function () {
var _this = this;
if (this.state.isOpen) {
this.setState({
isOpen: false,
isAnimating: true
}, function () {
_this._async.setTimeout(_this._onTransitionComplete, 200);
});
if (this.props.onDismiss) {
this.props.onDismiss();
}
}
};
Panel.prototype._onRenderNavigation = function (props) {
var closeButtonAriaLabel = props.closeButtonAriaLabel, hasCloseButton = props.hasCloseButton;
return (hasCloseButton &&
React.createElement(Button_1.IconButton, { className: Utilities_1.css('ms-Panel-closeButton ms-PanelAction-close', styles.closeButton), onClick: this._onPanelClick, ariaLabel: closeButtonAriaLabel, "data-is-visible": true, iconProps: { iconName: 'Cancel' } }));
};
Panel.prototype._onRenderHeader = function (props) {
var headerText = props.headerText, componentId = props.componentId, _a = props.headerClassName, headerClassName = _a === void 0 ? '' : _a;
var id = this.state.id;
return (headerText &&
React.createElement("div", { className: Utilities_1.css('ms-Panel-header', styles.header) },
React.createElement("p", { className: Utilities_1.css('ms-Panel-headerText', styles.headerText, headerClassName), id: componentId + '-headerText', role: 'heading' }, headerText)));
};
Panel.prototype._onRenderBody = function (props) {
return (React.createElement("div", { className: Utilities_1.css('ms-Panel-content', styles.content), ref: this._resolveRef('_content') }, props.children));
};
Panel.prototype._onRenderFooter = function (props) {
var isFooterSticky = this.state.isFooterSticky;
var _a = this.props.onRenderFooterContent, onRenderFooterContent = _a === void 0 ? null : _a;
return (onRenderFooterContent != null &&
React.createElement("div", { className: Utilities_1.css('ms-Panel-footer', styles.footer, isFooterSticky && styles.footerIsSticky) },
React.createElement("div", { className: Utilities_1.css('ms-Panel-footerInner', styles.footerInner) }, onRenderFooterContent())));
};
Panel.prototype._updateFooterPosition = function () {
var _content = this._content;
if (_content) {
var height = _content.clientHeight;
var innerHeight_1 = _content.scrollHeight;
this.setState({
isFooterSticky: height < innerHeight_1 ? true : false
});
}
};
Panel.prototype._onPanelClick = function () {
this.dismiss();
};
Panel.prototype._onTransitionComplete = function () {
this.setState({
isAnimating: false
});
if (!this.state.isOpen && this.props.onDismissed) {
this.props.onDismissed();
}
};
return Panel;
}(Utilities_1.BaseComponent));
Panel.defaultProps = {
isOpen: false,
isBlocking: true,
hasCloseButton: true,
type: Panel_Props_1.PanelType.smallFixedFar,
};
tslib_1.__decorate([
Utilities_1.autobind
], Panel.prototype, "dismiss", null);
tslib_1.__decorate([
Utilities_1.autobind
], Panel.prototype, "_onRenderNavigation", null);
tslib_1.__decorate([
Utilities_1.autobind
], Panel.prototype, "_onRenderHeader", null);
tslib_1.__decorate([
Utilities_1.autobind
], Panel.prototype, "_onRenderBody", null);
tslib_1.__decorate([
Utilities_1.autobind
], Panel.prototype, "_onRenderFooter", null);
tslib_1.__decorate([
Utilities_1.autobind
], Panel.prototype, "_onPanelClick", null);
tslib_1.__decorate([
Utilities_1.autobind
], Panel.prototype, "_onTransitionComplete", null);
exports.Panel = Panel;
});
//# sourceMappingURL=Panel.js.map