office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
67 lines (65 loc) • 2.99 kB
JavaScript
define(["require", "exports", "tslib", "react", "../../Utilities", "./Fabric.styles"], function (require, exports, tslib_1, React, Utilities_1, Fabric_styles_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var DIRECTIONAL_KEY_CODES = [
Utilities_1.KeyCodes.up,
Utilities_1.KeyCodes.down,
Utilities_1.KeyCodes.left,
Utilities_1.KeyCodes.right,
Utilities_1.KeyCodes.home,
Utilities_1.KeyCodes.end,
Utilities_1.KeyCodes.tab,
Utilities_1.KeyCodes.pageUp,
Utilities_1.KeyCodes.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