office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
69 lines • 3.27 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, divProperties, doesElementContainFocus, getDocument, getNativeProps, autobind } from '../../Utilities';
/**
* This adds accessibility to Dialog and Panel controls
*/
var Popup = /** @class */ (function (_super) {
tslib_1.__extends(Popup, _super);
function Popup() {
return _super !== null && _super.apply(this, arguments) || this;
}
Popup.prototype.componentWillMount = function () {
this._originalFocusedElement = getDocument().activeElement;
};
Popup.prototype.componentDidMount = function () {
this._events.on(this._root, 'focus', this._onFocus, true);
this._events.on(this._root, 'blur', this._onBlur, true);
if (doesElementContainFocus(this._root)) {
this._containsFocus = true;
}
};
Popup.prototype.componentWillUnmount = function () {
if (this.props.shouldRestoreFocus &&
this._originalFocusedElement &&
this._containsFocus &&
this._originalFocusedElement !== window) {
// This slight delay is required so that we can unwind the stack, let react try to mess with focus, and then
// apply the correct focus. Without the setTimeout, we end up focusing the correct thing, and then React wants
// to reset the focus back to the thing it thinks should have been focused.
if (this._originalFocusedElement) {
this._originalFocusedElement.focus();
}
}
};
Popup.prototype.render = function () {
var _a = this.props, role = _a.role, className = _a.className, ariaLabel = _a.ariaLabel, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy, style = _a.style;
var needsVerticalScrollBar = false;
if (this._root && this._root.firstElementChild) {
needsVerticalScrollBar = this._root.firstElementChild.clientHeight > this._root.clientHeight;
}
return (React.createElement("div", tslib_1.__assign({ ref: this._resolveRef('_root') }, getNativeProps(this.props, divProperties), { className: className, role: role, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, onKeyDown: this._onKeyDown, style: tslib_1.__assign({ overflowY: needsVerticalScrollBar ? 'scroll' : 'auto' }, style) }), this.props.children));
};
Popup.prototype._onKeyDown = function (ev) {
switch (ev.which) {
case 27 /* escape */:
if (this.props.onDismiss) {
this.props.onDismiss(ev);
ev.preventDefault();
ev.stopPropagation();
}
break;
}
};
Popup.prototype._onFocus = function () {
this._containsFocus = true;
};
Popup.prototype._onBlur = function () {
this._containsFocus = false;
};
Popup.defaultProps = {
shouldRestoreFocus: true
};
tslib_1.__decorate([
autobind
], Popup.prototype, "_onKeyDown", null);
return Popup;
}(BaseComponent));
export { Popup };
//# sourceMappingURL=Popup.js.map