"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _debounce = _interopRequireDefault(require("lodash/debounce"));
var _shallowequal = _interopRequireDefault(require("shallowequal"));
var _EllipsisSt = require("./Ellipsis.st.css.js");
var _Tooltip = _interopRequireDefault(require("../../Tooltip"));
var _ZIndex = require("../ZIndex");
var _TextComponent = _interopRequireDefault(require("./components/TextComponent"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/common/Ellipsis/Ellipsis.tsx";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
class Ellipsis extends _react.default.PureComponent {
  constructor(props) {
    super(props);
    this.ref = void 0;
    this.tooltipRef = void 0;
    /**
     * Once text component has rendered,
     * Update text content and tooltip active state
     * @private
     */
    this._onTextRendered = () => {
      var {
        isActive,
        textContent
      } = this.state;
      var newTextContent = this._getTextContent();
      var shouldBeActive = this._checkShouldBeActive();
      var newState = _objectSpread(_objectSpread({
        textRendered: true
      }, newTextContent !== textContent ? {
        textContent: newTextContent
      } : {}), shouldBeActive !== isActive ? {
        isActive: shouldBeActive
      } : {});
      this.setState(oldState => _objectSpread(_objectSpread({}, oldState), newState));
    };
    /**
     * An ellipsis is considered active when either the text's scroll width/height is wider than it's container or itself.
     * @private
     */
    this._updateIsActive = () => {
      var {
        isActive
      } = this.state;
      var shouldBeActive = this._checkShouldBeActive();
      if (shouldBeActive !== isActive) {
        this.setState({
          isActive: shouldBeActive
        });
      }
    };
    this._getTextContent = () => {
      var {
        current: textElement
      } = this.ref;
      return textElement && textElement.textContent;
    };
    this._checkShouldBeActive = () => this._isOverflowingHorizontally() || this._isOverflowingVertically();
    this._isOverflowingHorizontally = () => {
      var _textElement$parentEl;
      var {
        current: textElement
      } = this.ref;
      var {
        ellipsis
      } = this.props;
      var parentWidth = textElement == null || (_textElement$parentEl = textElement.parentElement) == null ? void 0 : _textElement$parentEl.offsetWidth;
      return !!(ellipsis && textElement && (parentWidth && textElement.scrollWidth - parentWidth > 1 || textElement.offsetWidth < textElement.scrollWidth));
    };
    this._isOverflowingVertically = () => {
      var _textElement$parentEl2;
      var {
        current: textElement
      } = this.ref;
      var {
        ellipsis,
        maxLines
      } = this.props;
      var parentHeight = textElement == null || (_textElement$parentEl2 = textElement.parentElement) == null ? void 0 : _textElement$parentEl2.offsetHeight;
      return !!(maxLines && maxLines > 1 && ellipsis && textElement && (parentHeight && textElement.scrollHeight - parentHeight > 1 || textElement.offsetHeight < textElement.scrollHeight));
    };
    /**
     * A callback for resizing the window, must be debounced in order to improve performance.
     * @private
     */
    this._debouncedUpdate = (0, _debounce.default)(this._updateIsActive, 100);
    this.state = {
      isActive: false,
      textContent: null,
      textRendered: false
    };
    this.ref = /*#__PURE__*/_react.default.createRef();
    this.tooltipRef = /*#__PURE__*/_react.default.createRef();
  }
  componentDidMount() {
    var _this$props$onEllipsi, _this$props;
    window.addEventListener('resize', this._debouncedUpdate);
    (_this$props$onEllipsi = (_this$props = this.props).onEllipsisStateChange) == null || _this$props$onEllipsi.call(_this$props, this.state.isActive);
  }
  _renderText() {
    var {
      render,
      ellipsis,
      maxLines
    } = this.props;
    var {
      textRendered,
      isActive
    } = this.state;
    return /*#__PURE__*/_react.default.createElement(_TextComponent.default, {
      render,
      ellipsis,
      maxLines,
      textRendered,
      onTextRendered: this._onTextRendered,
      textElementRef: this.ref,
      isEllipsisActive: isActive,
      tooltipRef: this.tooltipRef,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 142,
        columnNumber: 7
      }
    });
  }
  render() {
    var {
      appendTo,
      wrapperClassName,
      disabled,
      enterDelay,
      exitDelay,
      fixed,
      flip,
      maxWidth,
      moveArrowTo,
      moveBy,
      onHide,
      onShow,
      placement,
      showTooltip,
      textAlign,
      zIndex,
      size,
      interactive
    } = this.props;
    var {
      isActive,
      textContent
    } = this.state;
    return showTooltip && isActive ? /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
      ref: this.tooltipRef,
      className: (0, _EllipsisSt.st)(_EllipsisSt.classes.tooltip, wrapperClassName),
      content: textContent,
      appendTo,
      disabled,
      enterDelay,
      exitDelay,
      fixed,
      flip,
      maxWidth,
      moveArrowTo,
      moveBy,
      onHide,
      onShow,
      placement,
      textAlign,
      zIndex,
      size,
      interactive,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 176,
        columnNumber: 7
      }
    }, this._renderText()) : this._renderText();
  }
  static getDerivedStateFromProps(props, state) {
    var {
      render,
      ellipsis,
      maxLines
    } = props;
    var textPropsChanged = state.prevRender !== render || state.prevEllipsis !== ellipsis || state.prevMaxLines !== maxLines;
    if (!textPropsChanged) {
      return null;
    }

    // Text changed, initialize textRendered state
    return {
      textRendered: false,
      prevRender: render,
      prevEllipsis: ellipsis,
      prevMaxLines: maxLines
    };
  }
  componentDidUpdate(prevProps, prevState) {
    var {
      textRendered,
      isActive
    } = this.state;
    if (textRendered && !(0, _shallowequal.default)(prevProps, this.props)) {
      this._updateIsActive();
    }
    if (prevState.isActive !== isActive && this.props.onEllipsisStateChange) {
      this.props.onEllipsisStateChange(this.state.isActive);
    }
  }
  componentWillUnmount() {
    this._debouncedUpdate.cancel();
    window.removeEventListener('resize', this._debouncedUpdate);
  }
}
Ellipsis.defaultProps = {
  ellipsis: false,
  appendTo: 'window',
  flip: false,
  fixed: false,
  placement: 'top',
  zIndex: _ZIndex.ZIndex.tooltip,
  enterDelay: 0,
  exitDelay: 0,
  showTooltip: true
};
var _default = exports.default = Ellipsis;
//# sourceMappingURL=Ellipsis.js.map