wix-style-react/dist/src/Highlighter/HighlightedItem.js

wix-style-react

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _escapeRegExp = _interopRequireDefault(require("lodash/escapeRegExp"));
var _HighlighterSt = require("./Highlighter.st.css");
var _jsxFileName = "/home/builduser/work/a9c1ac8876d5057c/packages/wix-style-react/dist/cjs/Highlighter/HighlightedItem.js";
class HighlightedItem extends _react.default.PureComponent {
  renderElement() {
    var {
      children,
      match
    } = this.props;
    if (match) {
      var matchRegExp = this.getMatchRegExp();
      return this.highlightChildren(children, matchRegExp);
    }
    return children;
  }
  getMatchRegExp() {
    var {
      match,
      caseSensitive
    } = this.props;
    return new RegExp((0, _escapeRegExp.default)(match), caseSensitive ? '' : 'i');
  }
  getMatchBoundaries(subject, matchRegExp) {
    var matches = matchRegExp.exec(subject);
    if (matches) {
      return {
        first: matches.index,
        last: matches.index + matches[0].length
      };
    }
  }
  getMatchReactKey(index) {
    return "match-index-".concat(index);
  }
  highlightChildren(children, matchRegExp) {
    var processedChildren = [];
    var matchIndex = 0;
    while (children) {
      if (!matchRegExp.test(children)) {
        processedChildren.push(this.renderPlain(children, this.getMatchReactKey(matchIndex++)));
        return processedChildren;
      }
      var boundaries = this.getMatchBoundaries(children, matchRegExp);
      var nonMatch = children.slice(0, boundaries.first);
      if (nonMatch) {
        processedChildren.push(this.renderPlain(nonMatch, this.getMatchReactKey(matchIndex++)));
      }
      var match = children.slice(boundaries.first, boundaries.last);
      if (match) {
        processedChildren.push(this.renderHighlight(match, this.getMatchReactKey(matchIndex++)));
      }
      children = children.slice(boundaries.last);
    }
    return processedChildren;
  }
  renderPlain(plainString, key) {
    return /*#__PURE__*/_react.default.createElement("span", {
      key: key,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 83,
        columnNumber: 12
      }
    }, plainString);
  }
  renderHighlight(matchString, key) {
    var {
      emphasize = 'text'
    } = this.props;
    if (emphasize === 'background') {
      return /*#__PURE__*/_react.default.createElement("span", {
        key: key,
        className: (0, _HighlighterSt.st)(_HighlighterSt.classes.root, {
          emphasize
        }),
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 90,
          columnNumber: 9
        }
      }, matchString);
    }
    return /*#__PURE__*/_react.default.createElement("strong", {
      key: key,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 101,
        columnNumber: 12
      }
    }, matchString);
  }
  render() {
    var {
      dataHook
    } = this.props;
    return /*#__PURE__*/_react.default.createElement("span", {
      "data-hook": dataHook,
      __self: this,
      __source: {
        fileName: _jsxFileName,
        lineNumber: 106,
        columnNumber: 12
      }
    }, this.renderElement());
  }
}
HighlightedItem.propTypes = {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes.default.string,
  match: _propTypes.default.string,
  emphasize: _propTypes.default.oneOf(['text', 'background']),
  caseSensitive: _propTypes.default.bool
};
var _default = exports.default = HighlightedItem;
//# sourceMappingURL=HighlightedItem.js.map