office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
194 lines • 11.4 kB
JavaScript
import * as tslib_1 from "tslib";
/* tslint:disable:no-unused-variable */
import * as React from 'react';
/* tslint:enable:no-unused-variable */
import { BaseComponent, autobind, css, getId, getRTL } from '../../Utilities';
import { FocusTrapZone } from '../FocusTrapZone/index';
import { PanelType } from './Panel.types';
import { Layer } from '../Layer/Layer';
import { Overlay } from '../../Overlay';
import { Popup } from '../../Popup';
import { IconButton } from '../../Button';
import { AnimationClassNames, getTheme, IconFontSizes } from '../../Styling';
import * as stylesImport from './Panel.scss';
var styles = stylesImport;
var theme = getTheme();
var Panel = /** @class */ (function (_super) {
tslib_1.__extends(Panel, _super);
function Panel(props) {
var _this = _super.call(this, props) || this;
_this._warnDeprecations({
'ignoreExternalFocusing': 'focusTrapZoneProps',
'forceFocusInsideTrap': 'focusTrapZoneProps',
'firstFocusableSelector': 'focusTrapZoneProps'
});
_this.state = {
isFooterSticky: false,
isOpen: false,
isAnimating: false,
id: 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, _b = _a.className, className = _b === void 0 ? '' : _b, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, firstFocusableSelector = _a.firstFocusableSelector, focusTrapZoneProps = _a.focusTrapZoneProps, forceFocusInsideTrap = _a.forceFocusInsideTrap, hasCloseButton = _a.hasCloseButton, headerText = _a.headerText, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isLightDismiss = _a.isLightDismiss, isHiddenOnDismiss = _a.isHiddenOnDismiss, layerProps = _a.layerProps, type = _a.type, customWidth = _a.customWidth, _c = _a.onLightDismissClick, onLightDismissClick = _c === void 0 ? this._onPanelClick : _c, _d = _a.onRenderNavigation, onRenderNavigation = _d === void 0 ? this._onRenderNavigation : _d, _e = _a.onRenderHeader, onRenderHeader = _e === void 0 ? this._onRenderHeader : _e, _f = _a.onRenderBody, onRenderBody = _f === void 0 ? this._onRenderBody : _f, _g = _a.onRenderFooter, onRenderFooter = _g === void 0 ? this._onRenderFooter : _g;
var _h = this.state, isOpen = _h.isOpen, isAnimating = _h.isAnimating, id = _h.id;
var isLeft = type === PanelType.smallFixedNear ? true : false;
var isRTL = getRTL();
var isOnRightSide = isRTL ? isLeft : !isLeft;
var headerTextId = id + '-headerText';
var customWidthStyles = (type === PanelType.custom) ? { width: customWidth } : {};
var renderProps = tslib_1.__assign({}, this.props, { componentId: id });
if (!isOpen && !isAnimating && !isHiddenOnDismiss) {
return null;
}
var overlay;
if (isBlocking && isOpen) {
overlay = (React.createElement(Overlay, { className: css(styles.overlay, isOpen && isAnimating && AnimationClassNames.fadeIn200, !isOpen && isAnimating && AnimationClassNames.fadeOut200), isDarkThemed: false, onClick: isLightDismiss ? onLightDismissClick : undefined }));
}
return (React.createElement(Layer, tslib_1.__assign({}, layerProps),
React.createElement(Popup, { role: 'dialog', ariaLabelledBy: headerText && headerTextId, onDismiss: this.dismiss, className: css(!isOpen && !isAnimating && isHiddenOnDismiss && styles.hiddenPanel) },
React.createElement("div", { className: 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 === PanelType.smallFluid && ('ms-Panel--smFluid ' + styles.rootIsSmallFluid), type === PanelType.smallFixedNear && ('ms-Panel--smLeft ' + styles.rootIsSmallLeft), type === PanelType.smallFixedFar && ('ms-Panel--sm ' + styles.rootIsSmall), type === PanelType.medium && ('ms-Panel--md ' + styles.rootIsMedium), (type === PanelType.large || type === PanelType.largeFixed) && ('ms-Panel--lg ' + styles.rootIsLarge), type === PanelType.largeFixed && ('ms-Panel--fixed ' + styles.rootIsFixed), type === PanelType.extraLarge && ('ms-Panel--xl ' + styles.rootIsXLarge), type === PanelType.custom && ('ms-Panel--custom ' + styles.rootIsCustom), hasCloseButton && ('ms-Panel--hasCloseButton ' + styles.rootHasCloseButton), !isOpen && !isAnimating && isHiddenOnDismiss && styles.hiddenPanel) },
overlay,
React.createElement(FocusTrapZone, tslib_1.__assign({ ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector }, focusTrapZoneProps, { className: css('ms-Panel-main', styles.main, isOpen && isAnimating && !isOnRightSide && AnimationClassNames.slideRightIn40, isOpen && isAnimating && isOnRightSide && AnimationClassNames.slideLeftIn40, !isOpen && isAnimating && !isOnRightSide && AnimationClassNames.slideLeftOut40, !isOpen && isAnimating && isOnRightSide && AnimationClassNames.slideRightOut40, focusTrapZoneProps ? focusTrapZoneProps.className : undefined), style: customWidthStyles, elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isLightDismiss || isHiddenOnDismiss }),
React.createElement("div", { className: css('ms-Panel-commands'), "data-is-visible": true }, onRenderNavigation(renderProps, this._onRenderNavigation)),
React.createElement("div", { className: 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;
if (hasCloseButton) {
return (React.createElement("div", { className: css('ms-Panel-navigation', styles.navigation) },
React.createElement(IconButton, { styles: {
root: {
height: 'auto',
width: '44px',
color: theme.palette.neutralSecondary,
fontSize: IconFontSizes.large,
},
rootHovered: {
color: theme.palette.neutralPrimary
}
}, className: css('ms-Panel-closeButton ms-PanelAction-close'), onClick: this._onPanelClick, ariaLabel: closeButtonAriaLabel, "data-is-visible": true, iconProps: { iconName: 'Cancel' } })));
}
return null;
};
Panel.prototype._onRenderHeader = function (props) {
var headerText = props.headerText, componentId = props.componentId, _a = props.headerClassName, headerClassName = _a === void 0 ? '' : _a;
if (headerText) {
return (React.createElement("div", { className: css('ms-Panel-header', styles.header) },
React.createElement("p", { className: css('ms-Panel-headerText', styles.headerText, headerClassName), id: componentId + '-headerText', role: 'heading' }, headerText)));
}
return null;
};
Panel.prototype._onRenderBody = function (props) {
var contentClass = css('ms-Panel-content', styles.content, props.isFooterAtBottom && styles.contentGrow);
return (React.createElement("div", { ref: this._resolveRef('_content'), className: contentClass }, props.children));
};
Panel.prototype._onRenderFooter = function (props) {
var isFooterSticky = this.state.isFooterSticky;
var _a = this.props.onRenderFooterContent, onRenderFooterContent = _a === void 0 ? null : _a;
if (onRenderFooterContent) {
return (React.createElement("div", { className: css('ms-Panel-footer', styles.footer, isFooterSticky && styles.footerIsSticky) },
React.createElement("div", { className: css('ms-Panel-footerInner', styles.footerInner) }, onRenderFooterContent())));
}
return null;
};
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();
}
};
Panel.defaultProps = {
isHiddenOnDismiss: false,
isOpen: false,
isBlocking: true,
hasCloseButton: true,
type: PanelType.smallFixedFar,
};
tslib_1.__decorate([
autobind
], Panel.prototype, "dismiss", null);
tslib_1.__decorate([
autobind
], Panel.prototype, "_onRenderNavigation", null);
tslib_1.__decorate([
autobind
], Panel.prototype, "_onRenderHeader", null);
tslib_1.__decorate([
autobind
], Panel.prototype, "_onRenderBody", null);
tslib_1.__decorate([
autobind
], Panel.prototype, "_onRenderFooter", null);
tslib_1.__decorate([
autobind
], Panel.prototype, "_onPanelClick", null);
tslib_1.__decorate([
autobind
], Panel.prototype, "_onTransitionComplete", null);
return Panel;
}(BaseComponent));
export { Panel };
//# sourceMappingURL=Panel.js.map