office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
66 lines (64 loc) • 2.82 kB
JavaScript
;
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 __());
};
var React = require('react');
var KeyCodes_1 = require('../../utilities/KeyCodes');
var BaseComponent_1 = require('../../common/BaseComponent');
/**
* This adds accessibility to Dialog and Panel controls
*/
var Popup = (function (_super) {
__extends(Popup, _super);
function Popup() {
_super.apply(this, arguments);
}
Popup.prototype.componentWillMount = function () {
this._originalFocusedElement = document.activeElement;
};
Popup.prototype.componentDidMount = function () {
var _this = this;
this._events.on(this.refs.root, 'keydown', this._onKeyDown);
this._events.on(this.refs.root, 'focus', function () { return _this._containsFocus = true; }, true);
this._events.on(this.refs.root, 'blur', function () { return _this._containsFocus = false; }, true);
};
Popup.prototype.componentWillUnmount = function () {
var _this = this;
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.
setTimeout(function () {
if (_this._originalFocusedElement) {
_this._originalFocusedElement.focus();
}
}, 0);
}
};
Popup.prototype.render = function () {
var _a = this.props, role = _a.role, className = _a.className, ariaLabelledBy = _a.ariaLabelledBy, ariaDescribedBy = _a.ariaDescribedBy;
return (React.createElement("div", {ref: 'root', className: className, role: role, "aria-labelledby": ariaLabelledBy, "aria-desribedby": ariaDescribedBy}, this.props.children));
};
Popup.prototype._onKeyDown = function (ev) {
switch (ev.which) {
case KeyCodes_1.KeyCodes.escape:
if (this.props.onDismiss) {
this.props.onDismiss();
ev.preventDefault();
ev.stopPropagation();
}
break;
}
};
Popup.defaultProps = {
shouldRestoreFocus: true
};
return Popup;
}(BaseComponent_1.BaseComponent));
exports.Popup = Popup;
//# sourceMappingURL=Popup.js.map