wix-style-react/dist/src/common/Ellipsis/Ellipsis.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _debounce = _interopRequireDefault(require("lodash/debounce"));

var _shallowequal = _interopRequireDefault(require("shallowequal"));

var _EllipsisSt = require("./Ellipsis.st.css");

var _Tooltip = _interopRequireDefault(require("../../Tooltip"));

var _ZIndex = require("../../ZIndex");

var _TooltipCommon = require("../PropTypes/TooltipCommon");

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }

function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }

var TextComponent = /*#__PURE__*/function (_React$PureComponent) {
  (0, _inherits2["default"])(TextComponent, _React$PureComponent);

  var _super = _createSuper(TextComponent);

  function TextComponent() {
    var _this;

    (0, _classCallCheck2["default"])(this, TextComponent);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = _super.call.apply(_super, [this].concat(args));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "_getEllipsisClasses", function () {
      var _this$props = _this.props,
          ellipsis = _this$props.ellipsis,
          maxLines = _this$props.maxLines;
      var ellipsisLines = maxLines > 1 ? 'multiline' : 'singleLine';
      return function (className) {
        return ellipsis ? (0, _EllipsisSt.st)(_EllipsisSt.classes.text, {
          ellipsisLines: ellipsisLines
        }, className) : className;
      };
    });
    return _this;
  }

  (0, _createClass2["default"])(TextComponent, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (!this.props.textRendered) {
        this.props.onTextRendered();
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      if (!this.props.textRendered) {
        this.props.onTextRendered();
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props2 = this.props,
          render = _this$props2.render,
          maxLines = _this$props2.maxLines,
          textElementRef = _this$props2.textElementRef;
      return render({
        ref: textElementRef,
        ellipsisClasses: this._getEllipsisClasses(),
        ellipsisInlineStyle: (0, _defineProperty2["default"])({}, _EllipsisSt.vars.maxLines, maxLines)
      });
    }
  }]);
  return TextComponent;
}(_react["default"].PureComponent);

var Ellipsis = /*#__PURE__*/function (_React$PureComponent2) {
  (0, _inherits2["default"])(Ellipsis, _React$PureComponent2);

  var _super2 = _createSuper(Ellipsis);

  function Ellipsis(props) {
    var _this2;

    (0, _classCallCheck2["default"])(this, Ellipsis);
    _this2 = _super2.call(this, props);
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "_onTextRendered", function () {
      var _this2$state = _this2.state,
          isActive = _this2$state.isActive,
          textContent = _this2$state.textContent;
      var newState = {
        textRendered: true
      };

      var newTextContent = _this2._getTextContent();

      if (newTextContent !== textContent) {
        newState.textContent = newTextContent;
      }

      var shouldBeActive = _this2._checkShouldBeActive();

      if (shouldBeActive !== isActive) {
        newState.isActive = shouldBeActive;
      }

      _this2.setState(newState);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "_updateIsActive", function () {
      var isActive = _this2.state.isActive;

      var shouldBeActive = _this2._checkShouldBeActive();

      if (shouldBeActive !== isActive) {
        _this2.setState({
          isActive: shouldBeActive
        });
      }
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "_getTextContent", function () {
      var textElement = _this2.ref.current;
      return textElement && textElement.textContent;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "_checkShouldBeActive", function () {
      return _this2._isOverflowingHorizontally() || _this2._isOverflowingVertically();
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "_isOverflowingHorizontally", function () {
      var textElement = _this2.ref.current;
      var ellipsis = _this2.props.ellipsis;
      return ellipsis && textElement && (textElement.scrollWidth - textElement.parentNode.offsetWidth > 1 || textElement.offsetWidth < textElement.scrollWidth);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "_isOverflowingVertically", function () {
      var textElement = _this2.ref.current;
      var _this2$props = _this2.props,
          ellipsis = _this2$props.ellipsis,
          maxLines = _this2$props.maxLines;
      return maxLines > 1 && ellipsis && textElement && (textElement.scrollHeight - textElement.parentNode.offsetHeight > 1 || textElement.offsetHeight < textElement.scrollHeight);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this2), "_debouncedUpdate", (0, _debounce["default"])(_this2._updateIsActive, 100));
    _this2.state = {
      isActive: false,
      textContent: null,
      textRendered: false
    };
    _this2.ref = /*#__PURE__*/_react["default"].createRef();
    return _this2;
  }
  /**
   * Once text component has rendered,
   * Update text content and tooltip active state
   * @private
   */


  (0, _createClass2["default"])(Ellipsis, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      window.addEventListener('resize', this._debouncedUpdate);
    }
  }, {
    key: "_renderText",
    value: function _renderText() {
      var _this$props3 = this.props,
          render = _this$props3.render,
          ellipsis = _this$props3.ellipsis,
          maxLines = _this$props3.maxLines;
      var textRendered = this.state.textRendered;
      return /*#__PURE__*/_react["default"].createElement(TextComponent, {
        render: render,
        ellipsis: ellipsis,
        maxLines: maxLines,
        textRendered: textRendered,
        onTextRendered: this._onTextRendered,
        textElementRef: this.ref
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props4 = this.props,
          appendTo = _this$props4.appendTo,
          wrapperClassName = _this$props4.wrapperClassName,
          disabled = _this$props4.disabled,
          enterDelay = _this$props4.enterDelay,
          exitDelay = _this$props4.exitDelay,
          fixed = _this$props4.fixed,
          flip = _this$props4.flip,
          maxWidth = _this$props4.maxWidth,
          moveArrowTo = _this$props4.moveArrowTo,
          onHide = _this$props4.onHide,
          onShow = _this$props4.onShow,
          placement = _this$props4.placement,
          showTooltip = _this$props4.showTooltip,
          textAlign = _this$props4.textAlign,
          zIndex = _this$props4.zIndex,
          size = _this$props4.size;
      var _this$state = this.state,
          isActive = _this$state.isActive,
          textContent = _this$state.textContent;
      return showTooltip && isActive ? /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], {
        className: (0, _EllipsisSt.st)(_EllipsisSt.classes.tooltip, wrapperClassName),
        content: textContent,
        appendTo: appendTo,
        disabled: disabled,
        enterDelay: enterDelay,
        exitDelay: exitDelay,
        fixed: fixed,
        flip: flip,
        maxWidth: maxWidth,
        moveArrowTo: moveArrowTo,
        onHide: onHide,
        onShow: onShow,
        placement: placement,
        textAlign: textAlign,
        zIndex: zIndex,
        size: size
      }, this._renderText()) : this._renderText();
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps) {
      var textRendered = this.state.textRendered;

      if (textRendered && !(0, _shallowequal["default"])(prevProps, this.props)) {
        this._updateIsActive();
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      this._debouncedUpdate.cancel();

      window.removeEventListener('resize', this._debouncedUpdate);
    }
  }], [{
    key: "getDerivedStateFromProps",
    value: function getDerivedStateFromProps(props, state) {
      var render = props.render,
          ellipsis = props.ellipsis,
          maxLines = props.maxLines;
      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
      };
    }
  }]);
  return Ellipsis;
}(_react["default"].PureComponent);

(0, _defineProperty2["default"])(Ellipsis, "propTypes", _objectSpread({
  /** When true, text that is longer than it's container will be truncated to a single line followed by ellipsis. Otherwise the text will break into several lines. */
  ellipsis: _propTypes["default"].bool,

  /** True by default, set it to false in order to show ellipsis without a tooltip. */
  showTooltip: _propTypes["default"].bool,

  /** A className to be applied to the Ellipsis wrapper. */
  wrapperClassName: _propTypes["default"].string,

  /** The render function, use it to render a text you want to truncate with ellipsis. */
  render: _propTypes["default"].func,

  /** maxLines truncates text at a specific number of lines. */
  maxLines: _propTypes["default"].number
}, _TooltipCommon.TooltipCommonProps));
(0, _defineProperty2["default"])(Ellipsis, "defaultProps", {
  ellipsis: false,
  appendTo: 'window',
  flip: false,
  fixed: false,
  placement: 'top',
  zIndex: (0, _ZIndex.ZIndex)('Tooltip'),
  enterDelay: 0,
  exitDelay: 0,
  showTooltip: true
});
var _default = Ellipsis;
exports["default"] = _default;