wix-style-react/dist/src/Highlighter/Highlighter.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 _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 _HighlightedItem = _interopRequireDefault(require("./HighlightedItem"));

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

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; } }

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; }

/**
 * Highlighter
 *
 * It highlights string type children by wrapping match
 * with strong dom element.
 * It remains children element structure.
 */
var childKeyGenerator = function childKeyGenerator() {
  var childKey = 0;
  return function () {
    return "highlighted-child-".concat(childKey++);
  };
};

var ELEM_TYPES = {
  STRING: 'string',
  ARRAY: 'array',
  REACT_ELEMENT: 'React_element'
};

var getElementType = function getElementType(element) {
  if (Array.isArray(element)) {
    return ELEM_TYPES.ARRAY;
  }

  if ( /*#__PURE__*/_react["default"].isValidElement(element)) {
    return ELEM_TYPES.REACT_ELEMENT;
  }

  if (typeof element === 'string') {
    return ELEM_TYPES.STRING;
  }

  return '';
};

var highlight = function highlight(element, match, nextChildKey) {
  var _elementTypesMap;

  if (!element) {
    return null;
  }

  var elementType = getElementType(element);
  var elementTypesMap = (_elementTypesMap = {}, (0, _defineProperty2["default"])(_elementTypesMap, ELEM_TYPES.STRING, function (elem, _match) {
    return /*#__PURE__*/_react["default"].createElement(_HighlightedItem["default"], {
      key: nextChildKey(),
      match: _match
    }, elem);
  }), (0, _defineProperty2["default"])(_elementTypesMap, ELEM_TYPES.REACT_ELEMENT, function (elem) {
    if (elem.props.children) {
      return /*#__PURE__*/_react["default"].cloneElement(elem, _objectSpread(_objectSpread({}, elem.props), {}, {
        key: nextChildKey()
      }), highlight(elem.props.children, match, nextChildKey));
    }

    return elem;
  }), (0, _defineProperty2["default"])(_elementTypesMap, ELEM_TYPES.ARRAY, function (elem) {
    return elem.map(function (el) {
      return highlight(el, match, nextChildKey);
    });
  }), _elementTypesMap);
  return elementTypesMap[elementType] ? elementTypesMap[elementType](element, match) : element;
};

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

  var _super = _createSuper(Highlighter);

  function Highlighter(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, Highlighter);
    _this = _super.call(this, props); // we want to create new react keys generator for instance of highlighter

    _this.nextChildKey = childKeyGenerator();
    return _this;
  }

  (0, _createClass2["default"])(Highlighter, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          dataHook = _this$props.dataHook,
          children = _this$props.children,
          match = _this$props.match;
      return /*#__PURE__*/_react["default"].createElement("span", {
        "data-hook": dataHook
      }, highlight(children, match, this.nextChildKey));
    }
  }]);
  return Highlighter;
}(_react["default"].PureComponent);

(0, _defineProperty2["default"])(Highlighter, "propTypes", {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: _propTypes["default"].string,

  /** match to highlight */
  match: _propTypes["default"].string
});
Highlighter.displayName = 'Highlighter';
var _default = Highlighter;
exports["default"] = _default;