"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Fabric_styles_1 = require("./Fabric.styles");
var getClassNames = Utilities_1.classNamesFunction();
var Fabric = /** @class */ (function (_super) {
    tslib_1.__extends(Fabric, _super);
    function Fabric(props) {
        var _this = _super.call(this, props) || this;
        _this._rootElement = Utilities_1.createRef();
        _this._onMouseDown = function (ev) {
            _this.setState({ isFocusVisible: false });
        };
        _this._onKeyDown = function (ev) {
            if (Utilities_1.isDirectionalKeyCode(ev.which)) {
                _this.setState({ isFocusVisible: true });
            }
        };
        _this.state = { isFocusVisible: false };
        return _this;
    }
    Fabric.prototype.render = function () {
        var classNames = getClassNames(Fabric_styles_1.getStyles, tslib_1.__assign({}, this.props, this.state));
        var divProps = Utilities_1.getNativeProps(this.props, Utilities_1.divProperties);
        return React.createElement("div", tslib_1.__assign({}, divProps, { className: classNames.root, ref: this._rootElement }));
    };
    Fabric.prototype.componentDidMount = function () {
        var win = Utilities_1.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([
        Utilities_1.customizable('Fabric', ['theme'])
    ], Fabric);
    return Fabric;
}(Utilities_1.BaseComponent));
exports.Fabric = Fabric;
//# sourceMappingURL=Fabric.js.map