@antmjs/vantui/lib/highlight/index.js

一套适用于Taro3及React的vantui组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Highlight = Highlight;
exports.default = void 0;
var _components = require("@tarojs/components");
var _react = require("react");
var _classnames = _interopRequireDefault(require("classnames"));
var utils = _interopRequireWildcard(require("../wxs/utils"));
var _jsxRuntime = require("react/jsx-runtime");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
function Highlight(props) {
  var autoEscape = props.autoEscape,
    caseSensitive = props.caseSensitive,
    keywords = props.keywords,
    sourceString = props.sourceString;
  var highlightChunks = (0, _react.useMemo)(function () {
    // 是否区分大小写
    var flags = caseSensitive ? 'g' : 'gi';
    // 转数组
    var _keywords = Array.isArray(keywords) ? keywords : [keywords];

    // 生成分组
    var chunks = _keywords.filter(function (keyword) {
      return keyword;
    }).reduce(function (chunks, keyword) {
      // 是否自动转义
      if (autoEscape) {
        keyword = keyword.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
      }

      // 用正则匹配
      var regex = new RegExp(keyword, flags);

      // 遍历关键词匹配值，最后生成 [{start, end, highlight: false}] 开始和结束值，高亮与否的数组
      var match;
      while (match = regex.exec(sourceString)) {
        var start = match.index;
        var end = regex.lastIndex;
        if (start >= end) {
          regex.lastIndex++;
          continue;
        }
        chunks.push({
          start: start,
          end: end,
          highlight: true
        });
      }
      return chunks;
    }, []);

    // 合并分组
    chunks = chunks.sort(function (a, b) {
      return a.start - b.start;
    }).reduce(function (chunks, currentChunk) {
      var prevChunk = chunks[chunks.length - 1];
      if (!prevChunk || currentChunk.start > prevChunk.end) {
        var unhighlightStart = prevChunk ? prevChunk.end : 0;
        var unhighlightEnd = currentChunk.start;
        if (unhighlightStart !== unhighlightEnd) {
          chunks.push({
            start: unhighlightStart,
            end: unhighlightEnd,
            highlight: false
          });
        }
        chunks.push(currentChunk);
      } else {
        prevChunk.end = Math.max(prevChunk.end, currentChunk.end);
      }
      return chunks;
    }, []);
    var lastChunk = chunks[chunks.length - 1];

    // 没有关键词时，没匹配到 chunks 的时候
    if (!lastChunk) {
      chunks.push({
        start: 0,
        end: sourceString.length,
        highlight: false
      });
    }
    if (lastChunk && lastChunk.end < sourceString.length) {
      chunks.push({
        start: lastChunk.end,
        end: sourceString.length,
        highlight: false
      });
    }
    return chunks;
  }, [autoEscape, caseSensitive, keywords, sourceString]);
  var renderContent = function renderContent() {
    var sourceString = props.sourceString,
      highlightClass = props.highlightClass,
      unhighlightClass = props.unhighlightClass;
    return highlightChunks.map(function (chunk, index) {
      var start = chunk.start,
        end = chunk.end,
        highlight = chunk.highlight;
      // 取出文本
      var text = sourceString.slice(start, end);
      if (highlight) {
        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
          className: (0, _classnames.default)(utils.bem('highlight'), highlightClass),
          children: text
        }, index);
      }
      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.Text, {
        className: unhighlightClass,
        children: text
      }, index);
    });
  };
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_components.View, {
    children: renderContent()
  });
}
var _default = Highlight;
exports.default = _default;