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

wix-style-react

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";

function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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) { _defineProperty(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; }

import React from 'react';
import HighlightedItem from './HighlightedItem';
import PropTypes from 'prop-types';
/**
 * 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.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 = {}, _defineProperty(_elementTypesMap, ELEM_TYPES.STRING, function (elem, _match) {
    return /*#__PURE__*/React.createElement(HighlightedItem, {
      key: nextChildKey(),
      match: _match
    }, elem);
  }), _defineProperty(_elementTypesMap, ELEM_TYPES.REACT_ELEMENT, function (elem) {
    if (elem.props.children) {
      return /*#__PURE__*/React.cloneElement(elem, _objectSpread(_objectSpread({}, elem.props), {}, {
        key: nextChildKey()
      }), highlight(elem.props.children, match, nextChildKey));
    }

    return elem;
  }), _defineProperty(_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) {
  _inherits(Highlighter, _React$PureComponent);

  var _super = _createSuper(Highlighter);

  function Highlighter(props) {
    var _this;

    _classCallCheck(this, Highlighter);

    _this = _super.call(this, props); // we want to create new react keys generator for instance of highlighter

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

  _createClass(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.createElement("span", {
        "data-hook": dataHook
      }, highlight(children, match, this.nextChildKey));
    }
  }]);

  return Highlighter;
}(React.PureComponent);

_defineProperty(Highlighter, "propTypes", {
  /** Applied as data-hook HTML attribute that can be used in the tests */
  dataHook: PropTypes.string,

  /** match to highlight */
  match: PropTypes.string
});

Highlighter.displayName = 'Highlighter';
export default Highlighter;