react-text-highlighting/lib/components/TextHighlighting.js

react text highlight component

'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true
});

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var React = require('react');
var BASE_STYLES = require('./BaseStyle');
var getRangesFromString = require('./Helper').getRangesFromString;

var TextHighlighting = function TextHighlighting(props) {
  var chars = props.children.split('');
  var styles = props.styles || BASE_STYLES;
  var ranges = null;

  if (props.highlight) {
    ranges = getRangesFromString(props.highlight, props.children);
  }

  var getStylesForRanges = function getStylesForRanges(ranges, index) {
    var _iteratorNormalCompletion = true;
    var _didIteratorError = false;
    var _iteratorError = undefined;

    try {
      for (var _iterator = ranges[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
        var range = _step.value;

        var _styles = getStylesForRange(range, index);
        if (_styles) return _styles;
      }
    } catch (err) {
      _didIteratorError = true;
      _iteratorError = err;
    } finally {
      try {
        if (!_iteratorNormalCompletion && _iterator['return']) {
          _iterator['return']();
        }
      } finally {
        if (_didIteratorError) {
          throw _iteratorError;
        }
      }
    }
  };

  var getStylesForRange = function getStylesForRange(range, index) {
    var style = styles.range;
    var single = range.start === range.end && range.end === index;

    if (single) return Object.assign(style.start, style.end);
    if (range.start === index) return style.start;
    if (range.end === index) return style.end;
    if (range.start < index && range.end > index) return style.between;
  };

  var coloredChars = chars.map(function (char, index) {
    var style = {};
    var ranges = ranges || props.highlightCharsRanges;
    var highlight = props.highlightChars && props.highlightChars.includes(index);

    if (highlight) style = styles.highlight;
    if (ranges) style = getStylesForRanges(ranges, index);

    return React.createElement('span', { key: index, style: style, children: char });
  });

  return React.createElement('span', _extends({}, props, { children: coloredChars }));
};

TextHighlighting.propTypes = {
  highlight: React.PropTypes.string,
  highlightChars: React.PropTypes.array,
  highlightCharsRanges: React.PropTypes.array,
  styles: React.PropTypes.object
};

exports['default'] = TextHighlighting;
module.exports = exports['default'];