"use strict";
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 css_1 = require('../../utilities/css');
var EventGroup_1 = require('../../utilities/eventGroup/EventGroup');
var KeyCodes_1 = require('../../utilities/KeyCodes');
var DIRECTIONAL_KEY_CODES = [
KeyCodes_1.KeyCodes.up,
KeyCodes_1.KeyCodes.down,
KeyCodes_1.KeyCodes.left,
KeyCodes_1.KeyCodes.right,
KeyCodes_1.KeyCodes.home,
KeyCodes_1.KeyCodes.end,
KeyCodes_1.KeyCodes.tab,
KeyCodes_1.KeyCodes.pageUp,
KeyCodes_1.KeyCodes.pageDown
];
var STATIONARY_DETECTION_DELAY = 100;
var Fabric = (function (_super) {
__extends(Fabric, _super);
function Fabric() {
_super.call(this);
this.state = {
isFocusVisible: false,
isStationary: true
};
this._events = new EventGroup_1.EventGroup(this);
this._onScrollEnd = this._onScrollEnd.bind(this);
}
Fabric.prototype.componentDidMount = function () {
this._events.on(document.body, 'mousedown', this._onMouseDown, true);
this._events.on(document.body, 'keydown', this._onKeyDown, true);
this._events.on(window, 'scroll', this._onScroll, true);
};
Fabric.prototype.componentWillUnmount = function () {
this._events.dispose();
clearTimeout(this._scrollTimerId);
};
Fabric.prototype.render = function () {
var _a = this.state, isFocusVisible = _a.isFocusVisible, isStationary = _a.isStationary;
var rootClass = css_1.css('ms-Fabric ms-font-m', this.props.className, {
'is-focusVisible': isFocusVisible,
'is-stationary': isStationary,
'is-scrolling': !isStationary
});
return (React.createElement("div", React.__spread({}, this.props, {className: rootClass, ref: 'root'})));
};
Fabric.prototype._onMouseDown = function () {
if (this.state.isFocusVisible) {
this.setState({
isFocusVisible: false
});
}
};
Fabric.prototype._onKeyDown = function (ev) {
if (!this.state.isFocusVisible && DIRECTIONAL_KEY_CODES.indexOf(ev.which) > -1) {
this.setState({
isFocusVisible: true
});
}
};
Fabric.prototype._onScroll = function () {
var isStationary = this.state.isStationary;
clearTimeout(this._scrollTimerId);
if (isStationary) {
this.setState({
isStationary: false
});
}
this._scrollTimerId = setTimeout(this._onScrollEnd, STATIONARY_DETECTION_DELAY);
};
Fabric.prototype._onScrollEnd = function () {
this.setState({
isStationary: true
});
};
return Fabric;
}(React.Component));
exports.Fabric = Fabric;
//# sourceMappingURL=Fabric.js.map
|