office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
71 lines • 3.35 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../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 = Utilities_1.getDocument().activeElement;
};
Popup.prototype.componentDidMount = function () {
this._events.on(this.refs.root, 'focus', this._onFocus, true);
this._events.on(this.refs.root, 'blur', this._onBlur, true);
if (Utilities_1.doesElementContainFocus(this.refs.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.refs.root && this.refs.root.firstElementChild) {
needsVerticalScrollBar = this.refs.root.firstElementChild.clientHeight > this.refs.root.clientHeight;
}
return (React.createElement("div", tslib_1.__assign({ ref: 'root' }, Utilities_1.getNativeProps(this.props, Utilities_1.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([
Utilities_1.autobind
], Popup.prototype, "_onKeyDown", null);
return Popup;
}(Utilities_1.BaseComponent));
exports.Popup = Popup;
//# sourceMappingURL=Popup.js.map