react-native-highlight-text/lib/module/index.js

A simple way to highlight text in React Native

import React from 'react';
import { Text } from 'react-native';

const Highlight = props => {
  var _props$highlightRegex;

  const highlightStyle = {
    color: props.highlightTextColor,
    backgroundColor: props.highlightColor
  };

  const matchAll = regex => {
    var _props$children;

    return Array.from(((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.matchAll(regex)) || []).map(match => {
      var _match$;

      return [match.index || 0, (match.index || 0) + (((_match$ = match[0]) === null || _match$ === void 0 ? void 0 : _match$.length) || 0)];
    });
  };

  let split = [];

  if ((_props$highlightRegex = props.highlightRegex) !== null && _props$highlightRegex !== void 0 && _props$highlightRegex.global) {
    split = matchAll(props.highlightRegex);
  } else if (props.wordMatch && props.wordMatch.length > 0) {
    split = matchAll(new RegExp(`(${props.wordMatch.join('|')})`, 'g'));
  } else {
    var _props$split;

    split = ((_props$split = props.split) === null || _props$split === void 0 ? void 0 : _props$split.sort((a, b) => a[0] - b[0])) || [];
  }

  const splitString = (index, prev) => {
    var _split, _props$children2, _props$children3, _split2, _props$children4;

    const {
      0: start,
      1: end,
      2: color,
      3: backgroundColor
    } = ((_split = split) === null || _split === void 0 ? void 0 : _split[index]) || [];

    if (start === undefined || end === undefined) {
      console.warn(`Index ${index} contains undefined value`);
      return null;
    }

    const pre = /*#__PURE__*/React.createElement(Text, null, (_props$children2 = props.children) === null || _props$children2 === void 0 ? void 0 : _props$children2.substring(prev, start));
    const cur = /*#__PURE__*/React.createElement(Text, {
      style: [highlightStyle, {
        color: color || props.highlightTextColor,
        backgroundColor: backgroundColor || props.highlightColor
      }, props.highlightStyle]
    }, (_props$children3 = props.children) === null || _props$children3 === void 0 ? void 0 : _props$children3.substring(start, end));
    return index + 1 !== ((_split2 = split) === null || _split2 === void 0 ? void 0 : _split2.length) ? /*#__PURE__*/React.createElement(React.Fragment, null, pre, cur, splitString(index + 1, end)) : /*#__PURE__*/React.createElement(React.Fragment, null, pre, cur, /*#__PURE__*/React.createElement(Text, null, (_props$children4 = props.children) === null || _props$children4 === void 0 ? void 0 : _props$children4.substring(end)));
  };

  const isSplitArrayCorrect = () => {
    if (split[0][0] > split[0][1]) {
      console.warn('Split start value needs to be less than the end value');
      return false;
    }

    let highest = split[0][1];

    for (let i = 1; i < split.length; i++) {
      if (split[i][0] < highest) {
        console.warn('Split array values can not overlap');
        return false;
      }

      if (split[i][0] > split[i][1]) {
        console.warn('Split start value needs to be less than the end value');
        return false;
      }

      highest = split[i][1];
    }

    return true;
  };

  if (split.length === 0 || !isSplitArrayCorrect()) {
    return /*#__PURE__*/React.createElement(Text, {
      style: [highlightStyle, props.style]
    }, props.children);
  }

  return /*#__PURE__*/React.createElement(Text, {
    style: props.style
  }, splitString(0, 0));
};

const defaultProps = {
  highlightTextColor: 'white',
  highlightColor: 'black'
};
Highlight.defaultProps = defaultProps;
export default Highlight;
//# sourceMappingURL=index.js.map