@wix/design-system/dist/cjs/common/Ellipsis/components/TextComponent/TextComponent.js

@wix/design-system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _TextComponentSt = require("./TextComponent.st.css.js");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/common/Ellipsis/components/TextComponent/TextComponent.tsx";
var isTestEnv = process.env.NODE_ENV === 'test';
class TextComponent extends _react.default.PureComponent {
  constructor(props) {
    super(props);
    this.requestedRecalculationMount = null;
    this.requestedRecalculationUpdate = [];
    this._getEllipsisClasses = () => {
      var {
        ellipsis,
        maxLines
      } = this.props;
      var ellipsisLines = maxLines && maxLines > 1 ? 'multiline' : 'singleLine';
      return className => ellipsis ? (0, _TextComponentSt.st)(_TextComponentSt.classes.text, {
        ellipsisLines
      }, className) : className;
    };
    this.renderChildren = this.renderChildren.bind(this);
    this.renderElement = this.renderElement.bind(this);
  }
  componentDidMount() {
    if (!this.props.textRendered) {
      /**
       * The requestAnimationFrame implementation is meant for browser only race condition bug fix.
       * It does not get reproduced in test environment due JSDOM being not a browser.
       * So we skip the requestAnimationFrame part in order not to have delays in calculations.
       */
      if (isTestEnv) {
        return this.props.onTextRendered();
      }
      this.requestedRecalculationMount = requestAnimationFrame(() => {
        this.props.onTextRendered();
      });
    }
  }
  componentDidUpdate() {
    if (!this.props.textRendered) {
      /**
       * The requestAnimationFrame implementation is meant for browser only race condition bug fix.
       * It does not get reproduced in test environment due JSDOM being not a browser.
       * So we skip the requestAnimationFrame part in order not to have delays in calculations.
       */
      if (isTestEnv) {
        return this.props.onTextRendered();
      }
      this.requestedRecalculationUpdate.push(requestAnimationFrame(() => {
        this.props.onTextRendered();
      }));
    }
  }
  componentWillUnmount() {
    if (this.requestedRecalculationMount) {
      cancelAnimationFrame(this.requestedRecalculationMount);
    }
    if (this.requestedRecalculationUpdate.length !== 0) {
      this.requestedRecalculationUpdate.forEach(id => cancelAnimationFrame(id));
    }
  }
  renderChildren(_ref) {
    var {
      text,
      suffix
    } = _ref;
    var {
      textElementRef,
      isEllipsisActive,
      tooltipRef
    } = this.props;
    if (suffix && isEllipsisActive) {
      var lineHeight = (textElementRef == null ? void 0 : textElementRef.current) && window.getComputedStyle(textElementRef.current).lineHeight;
      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
        style: {
          shapeOutside: "inset(calc(100% - ".concat(lineHeight, ") 0 0)")
        },
        className: (0, _TextComponentSt.st)(_TextComponentSt.classes.suffix, _TextComponentSt.classes.multilineSuffix),
        onMouseEnter: () => {
          var _tooltipRef$current;
          return tooltipRef == null || (_tooltipRef$current = tooltipRef.current) == null ? void 0 : _tooltipRef$current.close();
        },
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 101,
          columnNumber: 11
        }
      }, suffix), /*#__PURE__*/_react.default.createElement("span", {
        onMouseEnter: () => {
          var _tooltipRef$current2;
          return tooltipRef == null || (_tooltipRef$current2 = tooltipRef.current) == null ? void 0 : _tooltipRef$current2.open();
        },
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 108,
          columnNumber: 11
        }
      }, text));
    } else if (suffix) {
      return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 114,
          columnNumber: 11
        }
      }, text), /*#__PURE__*/_react.default.createElement("span", {
        className: _TextComponentSt.classes.suffix,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 115,
          columnNumber: 11
        }
      }, suffix));
    } else {
      return text;
    }
  }
  renderElement(_ref2) {
    var {
      element,
      suffix
    } = _ref2;
    var {
      maxLines = 1
    } = this.props;
    var hasMultilineSuffix = maxLines > 1 && !!suffix;
    return hasMultilineSuffix ? /*#__PURE__*/_react.default.createElement("div", {
      className: _TextComponentSt.classes.multilineSuffixWrapper,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 134,
        columnNumber: 7
      }
    }, element) : element;
  }
  render() {
    var {
      render,
      maxLines,
      textElementRef
    } = this.props;
    return render({
      ref: textElementRef,
      ellipsisClasses: this._getEllipsisClasses(),
      ellipsisInlineStyle: {
        [_TextComponentSt.vars.maxLines]: maxLines
      },
      renderChildren: this.renderChildren,
      renderElement: this.renderElement
    });
  }
}
var _default = exports.default = TextComponent;
//# sourceMappingURL=TextComponent.js.map