all files / lib/components/Fabric/ Fabric.js

48.94% Statements 23/47
26.67% Branches 4/15
27.27% Functions 3/11
50% Lines 22/44
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87                                                                                                                                 
"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