office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
69 lines (67 loc) • 2.63 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Fabric_styles_1 = require("./Fabric.styles");
var DIRECTIONAL_KEY_CODES = [
38 /* up */,
40 /* down */,
37 /* left */,
39 /* right */,
36 /* home */,
35 /* end */,
9 /* tab */,
33 /* pageUp */,
34 /* pageDown */
];
// We will track the last focus visibility state so that if we tear down and recreate
// the Fabric component, we will use the last known value as the default.
var _lastIsFocusVisible = false;
// Ensure that the HTML element has a dir specified. This helps to ensure RTL/LTR macros in css for all components will work.
if (typeof (document) === 'object' && document.documentElement && !document.documentElement.getAttribute('dir')) {
document.documentElement.setAttribute('dir', 'ltr');
}
var Fabric = (function (_super) {
tslib_1.__extends(Fabric, _super);
function Fabric() {
var _this = _super.call(this) || this;
_this.state = {
isFocusVisible: _lastIsFocusVisible
};
return _this;
}
Fabric.prototype.componentDidMount = function () {
this._events.on(document.body, 'mousedown', this._onMouseDown, true);
this._events.on(document.body, 'keydown', this._onKeyDown, true);
};
Fabric.prototype.render = function () {
var isFocusVisible = this.state.isFocusVisible;
var styles = Fabric_styles_1.getStyles(this.props.theme);
var rootClass = Utilities_1.css('ms-Fabric', styles.root, this.props.className, isFocusVisible && 'is-focusVisible');
var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
return (React.createElement("div", tslib_1.__assign({}, divProps, { className: rootClass, ref: this._resolveRef('_root') })));
};
Fabric.prototype._onMouseDown = function () {
if (this.state.isFocusVisible) {
this.setState({
isFocusVisible: false
});
_lastIsFocusVisible = false;
}
};
Fabric.prototype._onKeyDown = function (ev) {
if (!this.state.isFocusVisible && DIRECTIONAL_KEY_CODES.indexOf(ev.which) > -1) {
this.setState({
isFocusVisible: true
});
_lastIsFocusVisible = true;
}
};
return Fabric;
}(Utilities_1.BaseComponent));
Fabric = tslib_1.__decorate([
Utilities_1.customizable(['theme'])
], Fabric);
exports.Fabric = Fabric;
//# sourceMappingURL=Fabric.js.map