chayns-components/dist/cjs-split-css/react-chayns-searchbox/component/result-selection/ResultSelection.js

A set of beautiful React components for developing chayns® applications.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
const escapeRegExp = string => string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const ResultSelection = _ref => {
  let {
    text = '',
    search = ''
  } = _ref;
  const regexp = new RegExp(escapeRegExp(search), 'gi');
  const mismatches = text.split(regexp);
  const matches = text.match(regexp);
  const mismatchesWithId = mismatches.map((part, index) => ({
    value: part,
    id: index
  }));
  return mismatchesWithId.map((mismatch, mismatchIndex) => [/*#__PURE__*/_react.default.createElement("span", {
    key: `${mismatch.id}_missmatch`,
    className: "cc__result-selection cc__result-selection--mismatch"
  }, mismatch.value), matches && mismatchIndex < matches.length && /*#__PURE__*/_react.default.createElement("span", {
    key: `${mismatch.id}_match`,
    className: "cc__result-selection cc__result-selection--match"
  }, matches[mismatchIndex])]);
};
ResultSelection.propTypes = {
  text: _propTypes.default.string,
  search: _propTypes.default.string
};
ResultSelection.displayName = 'ResultSelection';
var _default = ResultSelection;
exports.default = _default;
//# sourceMappingURL=ResultSelection.js.map