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