office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
40 lines • 1.74 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { BaseComponent, createRef, customizable, getNativeProps, divProperties, classNamesFunction, getWindow, isDirectionalKeyCode } from '../../Utilities';
import { getStyles } from './Fabric.styles';
var getClassNames = classNamesFunction();
var Fabric = /** @class */ (function (_super) {
tslib_1.__extends(Fabric, _super);
function Fabric(props) {
var _this = _super.call(this, props) || this;
_this._rootElement = createRef();
_this._onMouseDown = function (ev) {
_this.setState({ isFocusVisible: false });
};
_this._onKeyDown = function (ev) {
if (isDirectionalKeyCode(ev.which)) {
_this.setState({ isFocusVisible: true });
}
};
_this.state = { isFocusVisible: false };
return _this;
}
Fabric.prototype.render = function () {
var classNames = getClassNames(getStyles, tslib_1.__assign({}, this.props, this.state));
var divProps = getNativeProps(this.props, divProperties);
return (React.createElement("div", tslib_1.__assign({}, divProps, { className: classNames.root, ref: this._rootElement })));
};
Fabric.prototype.componentDidMount = function () {
var win = getWindow(this._rootElement.value);
if (win) {
this._events.on(win, 'mousedown', this._onMouseDown, true);
this._events.on(win, 'keydown', this._onKeyDown, true);
}
};
Fabric = tslib_1.__decorate([
customizable('Fabric', ['theme'])
], Fabric);
return Fabric;
}(BaseComponent));
export { Fabric };
//# sourceMappingURL=Fabric.js.map