import * as tslib_1 from "tslib";
import * as React from 'react';
import { getNativeProps, on, divProperties, classNamesFunction, getWindow, isDirectionalKeyCode } from '../../Utilities';
import { getStyles } from './Fabric.styles';
var getClassNames = classNamesFunction();
var FabricBase = /** @class */ (function (_super) {
    tslib_1.__extends(FabricBase, _super);
    function FabricBase(props) {
        var _this = _super.call(this, props) || this;
        _this._rootElement = React.createRef();
        _this._disposables = [];
        _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;
    }
    FabricBase.prototype.render = function () {
        var className = this.props.className;
        var classNames = getClassNames(getStyles, {
            theme: this.props.theme,
            className: className,
            isFocusVisible: this.state.isFocusVisible
        });
        var divProps = getNativeProps(this.props, divProperties);
        return React.createElement("div", tslib_1.__assign({}, divProps, { className: classNames.root, ref: this._rootElement }));
    };
    FabricBase.prototype.componentDidMount = function () {
        var win = getWindow(this._rootElement.current);
        if (win) {
            this._disposables.push(on(win, 'mousedown', this._onMouseDown, true), on(win, 'keydown', this._onKeyDown, true));
        }
    };
    FabricBase.prototype.componentWillUnmount = function () {
        this._disposables.forEach(function (dispose) { return dispose(); });
    };
    return FabricBase;
}(React.Component));
export { FabricBase };
//# sourceMappingURL=Fabric.base.js.map