"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;exports.__esModule = true;exports.Indicator = void 0;var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
var _lodash = _interopRequireDefault(require("lodash.throttle"));
var _globalObject = require("@skbkontur/global-object");

var _isInstanceOf = require("../../lib/isInstanceOf");
var LayoutEvents = _interopRequireWildcard(require("../../lib/LayoutEvents"));

var _ThemeContext = require("../../lib/theming/ThemeContext");

var _Emotion = require("../../lib/theming/Emotion");

var _rootNode = require("../../lib/rootNode");
var _getDOMRect = require("../../lib/dom/getDOMRect");

var _Indicator2 = require("./Indicator.styles");

var _TabsContext = require("./TabsContext");

var _Tabs = require("./Tabs");var _class, _Indicator;var














Indicator = exports.Indicator = (0, _rootNode.rootNode)(_class = (_Indicator = /*#__PURE__*/function (_React$Component) {function Indicator() {var _this;for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {args[_key] = arguments[_key];}_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;_this.

    context = _this.context;_this.

    state = {
      styles: {}
    };_this.



    eventListener =

    null;_this.

    removeTabUpdatesListener = null;_this.






























































    reflow = (0, _lodash.default)(function () {
      var _this$context = _this.context,getTab = _this$context.getTab,activeTab = _this$context.activeTab;
      var node = getTab(activeTab);
      var nodeStyles = _this.getStyles(node);
      var stylesUpdated = ['left', 'top', 'width', 'height'].some(
        function (prop) {return nodeStyles[prop] !== _this.state.styles[prop];}
      );
      if (stylesUpdated) {
        _this.setState({ styles: nodeStyles });
      }
    }, 100);return _this;}(0, _inheritsLoose2.default)(Indicator, _React$Component);var _proto = Indicator.prototype;_proto.componentDidMount = function componentDidMount() {this.eventListener = LayoutEvents.addListener(this.reflow);this.removeTabUpdatesListener = this.props.tabUpdates.on(this.reflow);this.reflow();};_proto.componentWillUnmount = function componentWillUnmount() {this.reflow.cancel();if (this.eventListener) {this.eventListener.remove();}if (this.removeTabUpdatesListener) {this.removeTabUpdatesListener();}};_proto.componentDidUpdate = function componentDidUpdate() {this.reflow();};_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this$context2 = this.context,getTab = _this$context2.getTab,activeTab = _this$context2.activeTab;var node = getTab(activeTab);var indicators = node && node.getIndicators && node.getIndicators() || { error: false, warning: false, success: false, primary: false, disabled: false };return /*#__PURE__*/_react.default.createElement("div", { "data-tid": _Tabs.TabsDataTids.indicatorRoot, className: (0, _Emotion.cx)(_Indicator2.styles.root(this.theme), indicators.primary && _Indicator2.styles.primary(this.theme), indicators.success && _Indicator2.styles.success(this.theme), indicators.warning && _Indicator2.styles.warning(this.theme), indicators.error && _Indicator2.styles.error(this.theme), this.props.className), style: this.state.styles, ref: this.setRootNode });};_proto.

  getStyles = function getStyles(node) {
    var htmlNode = (0, _rootNode.getRootNode)(node);

    if ((0, _isInstanceOf.isInstanceOf)(htmlNode, _globalObject.globalObject.HTMLElement)) {
      var rect = (0, _getDOMRect.getDOMRect)(htmlNode);
      if (this.props.vertical) {
        return {
          width: this.theme.tabBorderWidth,
          left: htmlNode.offsetLeft,
          top: htmlNode.offsetTop,
          height: rect.bottom - rect.top
        };
      }

      var tabBorderWidth = parseInt(this.theme.tabBorderWidth, 10) || 0;
      return {
        left: htmlNode.offsetLeft,
        top: htmlNode.offsetHeight + htmlNode.offsetTop - tabBorderWidth,
        width: rect.right - rect.left
      };
    }

    return {};
  };return Indicator;}(_react.default.Component), _Indicator.contextType = _TabsContext.TabsContext, _Indicator)) || _class;