@wordpress/components/build/text/utils.js

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.createHighlighterText = createHighlighterText;

var _memize = _interopRequireDefault(require("memize"));

var _highlightWordsCore = require("highlight-words-core");

var _element = require("@wordpress/element");

/**
 * External dependencies
 */

/**
 * WordPress dependencies
 */

/**
 * Source:
 * https://github.com/bvaughn/react-highlight-words/blob/HEAD/src/Highlighter.js
 */

/* eslint-disable jsdoc/valid-types */

/**
 * @typedef Options
 * @property {string} [activeClassName=''] Classname for active highlighted areas.
 * @property {number} [activeIndex=-1] The index of the active highlighted area.
 * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [activeStyle] Styles to apply to the active highlighted area.
 * @property {boolean} [autoEscape] Whether to automatically escape text.
 * @property {boolean} [caseSensitive=false] Whether to highlight in a case-sensitive manner.
 * @property {string} children Children to highlight.
 * @property {import('highlight-words-core').FindAllArgs['findChunks']} [findChunks] Custom `findChunks` function to pass to `highlight-words-core`.
 * @property {string | Record<string, unknown>} [highlightClassName=''] Classname to apply to highlighted text or a Record of classnames to apply to given text (which should be the key).
 * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [highlightStyle={}] Styles to apply to highlighted text.
 * @property {keyof JSX.IntrinsicElements} [highlightTag='mark'] Tag to use for the highlighted text.
 * @property {import('highlight-words-core').FindAllArgs['sanitize']} [sanitize] Custom `santize` function to pass to `highlight-words-core`.
 * @property {string[]} [searchWords=[]] Words to search for and highlight.
 * @property {string} [unhighlightClassName=''] Classname to apply to unhighlighted text.
 * @property {import('react').AllHTMLAttributes<HTMLDivElement>['style']} [unhighlightStyle] Style to apply to unhighlighted text.
 */

/**
 * Maps props to lowercase names.
 *
 * @template {Record<string, unknown>} T
 * @param {T} object Props to map.
 * @return {{[K in keyof T as Lowercase<string & K>]: T[K]}} The mapped props.
 */

/* eslint-enable jsdoc/valid-types */
const lowercaseProps = object => {
  /** @type {any} */
  const mapped = {};

  for (const key in object) {
    mapped[key.toLowerCase()] = object[key];
  }

  return mapped;
};

const memoizedLowercaseProps = (0, _memize.default)(lowercaseProps);
/**
 *
 * @param {Options} options
 */

function createHighlighterText({
  activeClassName = '',
  activeIndex = -1,
  activeStyle,
  autoEscape,
  caseSensitive = false,
  children,
  findChunks,
  highlightClassName = '',
  highlightStyle = {},
  highlightTag = 'mark',
  sanitize,
  searchWords = [],
  unhighlightClassName = '',
  unhighlightStyle
}) {
  if (!children) return null;
  if (typeof children !== 'string') return children;
  const textToHighlight = children;
  const chunks = (0, _highlightWordsCore.findAll)({
    autoEscape,
    caseSensitive,
    findChunks,
    sanitize,
    searchWords,
    textToHighlight
  });
  const HighlightTag = highlightTag;
  let highlightIndex = -1;
  let highlightClassNames = '';
  let highlightStyles;
  const textContent = chunks.map((chunk, index) => {
    const text = textToHighlight.substr(chunk.start, chunk.end - chunk.start);

    if (chunk.highlight) {
      highlightIndex++;
      let highlightClass;

      if (typeof highlightClassName === 'object') {
        if (!caseSensitive) {
          highlightClassName = memoizedLowercaseProps(highlightClassName);
          highlightClass = highlightClassName[text.toLowerCase()];
        } else {
          highlightClass = highlightClassName[text];
        }
      } else {
        highlightClass = highlightClassName;
      }

      const isActive = highlightIndex === +activeIndex;
      highlightClassNames = `${highlightClass} ${isActive ? activeClassName : ''}`;
      highlightStyles = isActive === true && activeStyle !== null ? Object.assign({}, highlightStyle, activeStyle) : highlightStyle;
      /** @type {Record<string, any>} */

      const props = {
        children: text,
        className: highlightClassNames,
        key: index,
        style: highlightStyles
      }; // Don't attach arbitrary props to DOM elements; this triggers React DEV warnings (https://fb.me/react-unknown-prop)
      // Only pass through the highlightIndex attribute for custom components.

      if (typeof HighlightTag !== 'string') {
        props.highlightIndex = highlightIndex;
      }

      return (0, _element.createElement)(HighlightTag, props);
    }

    return (0, _element.createElement)('span', {
      children: text,
      className: unhighlightClassName,
      key: index,
      style: unhighlightStyle
    });
  });
  return textContent;
}
//# sourceMappingURL=utils.js.map