# 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
    1×
    1×
    1×
    1×

    1×
    1×
    1×
    1×
    1×

    1×
    1×
    1×
    1×

    1×

    1×

    1×

    1×

    1×

    1×

    1×

    1×

    1×

     "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