@geezee/react-ui/esm/shared/fuzzy-match.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React from 'react';
import useTheme from '../styles/use-theme';
import withDefaults from '../utils/with-defaults';
import { tuple } from '../utils/prop-types';
var colorTypes = tuple('secondary', 'primary');
var defaultProps = {
  color: 'default'
};

var FuzzyMatchComponent = function FuzzyMatchComponent(_ref) {
  var colorType = _ref.color,
      className = _ref.className,
      label = _ref.label,
      query = _ref.query,
      height = _ref.height,
      props = _objectWithoutProperties(_ref, ["color", "className", "label", "query", "height"]);

  var theme = useTheme();
  var color = {
    secondary: theme.palette.cNeutral5,
    primary: 'inherit'
  }[colorType];
  var highlightColor = {
    secondary: theme.palette.cNeutral7,
    primary: theme.palette.cTheme5
  }[colorType];
  query = query.trim() // https://stackoverflow.com/a/6969486/5671288
  .replace(/[.*+?^${}()|[\]\\]/g, '\\$&').replace(/\ /g, '.*');
  var beforeMatched = '';
  var matched = '';
  var afterMatched = '';
  var matchResult = label.match(new RegExp(query, 'i'));

  if (matchResult) {
    beforeMatched = matchResult.input.slice(0, matchResult.index);
    matched = matchResult[0];
    afterMatched = matchResult.input.slice(matchResult.index + matchResult[0].length);
    if (matched === '') afterMatched = '';
  }

  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
    className: _JSXStyle.dynamic([["363209421", [height, color, highlightColor]]]) + " " + (props && props.className != null && props.className || "fuzzy-match ".concat(className || ''))
  }), Boolean(beforeMatched) && /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["363209421", [height, color, highlightColor]]]) + " " + "before-match"
  }, beforeMatched), Boolean(matched) && /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["363209421", [height, color, highlightColor]]]) + " " + "match"
  }, matched), Boolean(afterMatched) && /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["363209421", [height, color, highlightColor]]]) + " " + "after-match"
  }, afterMatched), !Boolean(matched) && /*#__PURE__*/React.createElement("span", {
    className: _JSXStyle.dynamic([["363209421", [height, color, highlightColor]]])
  }, label), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "363209421",
    dynamic: [height, color, highlightColor]
  }, ".fuzzy-match.__jsx-style-dynamic-selector{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:".concat(height, ";min-width:0;color:").concat(color, ";}.fuzzy-match.__jsx-style-dynamic-selector span.match.__jsx-style-dynamic-selector{color:").concat(highlightColor, ";}")));
};

var FuzzyMatch = React.memo(FuzzyMatchComponent);
export default withDefaults(FuzzyMatch, defaultProps);