office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
65 lines • 2.61 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, customizable, getNativeProps, divProperties } from '../../Utilities';
import { getClassNames } from './Fabric.classNames';
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 = /** @class */ (function (_super) {
tslib_1.__extends(Fabric, _super);
function Fabric(props) {
var _this = _super.call(this, props) || 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 className = this.props.className;
var classNames = getClassNames(this.props.theme, className, isFocusVisible);
var divProps = getNativeProps(this.props, divProperties);
return (React.createElement("div", tslib_1.__assign({}, divProps, { className: classNames.root, 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;
}
};
Fabric = tslib_1.__decorate([
customizable('Fabric', ['theme'])
], Fabric);
return Fabric;
}(BaseComponent));
export { Fabric };
//# sourceMappingURL=Fabric.js.map