nice-ui
Version:
React design system, components, and utilities
38 lines (37 loc) • 1.56 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Highlight = void 0;
const React = require("react");
const nano_theme_1 = require("nano-theme");
const util_1 = require("./util");
const highlightClass = (0, nano_theme_1.rule)({
bg: 'rgba(235, 213, 52,.5)',
fw: 'bold',
bdrad: '3px',
pad: '1px 3px',
mar: '-1px -3px',
});
const preserveSpaces = (text) => {
const leading = text[0] === ' ';
const trailing = text[text.length - 1] === ' ';
if (!leading && !trailing)
return text;
return (React.createElement(React.Fragment, null,
leading ? React.createElement(React.Fragment, null, "\u00A0") : null,
React.createElement(React.Fragment, null, text.trim()),
trailing ? React.createElement(React.Fragment, null, "\u00A0") : null));
};
const Highlight = ({ text, query }) => {
const parts = React.useMemo(() => {
if (!query)
return [text];
let highlighted = (0, util_1.highlight)(text, query);
if (highlighted.length === 1 && typeof highlighted[0] === 'string')
highlighted = (0, util_1.highlightFuzzy)(text, query.join(''));
else
highlighted = (0, util_1.normalize)(highlighted);
return highlighted.map((part, i) => typeof part === 'string' ? (preserveSpaces(part)) : (React.createElement("span", { key: i, className: highlightClass }, preserveSpaces(part[0]))));
}, [text, query]);
return React.createElement(React.Fragment, {}, ...parts);
};
exports.Highlight = Highlight;