@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
43 lines (42 loc) • 1.74 kB
JavaScript
"use client";
import { useProps } from "../../core/MantineProvider/use-props/use-props.mjs";
import { polymorphicFactory } from "../../core/factory/polymorphic-factory.mjs";
import { Text } from "../Text/Text.mjs";
import { Mark } from "../Mark/Mark.mjs";
import { highlighter } from "./highlighter/highlighter.mjs";
import { jsx } from "react/jsx-runtime";
//#region packages/@mantine/core/src/components/Highlight/Highlight.tsx
const defaultProps = {
color: "yellow",
wholeWord: false
};
const Highlight = polymorphicFactory((_props) => {
const { unstyled, children, highlight, highlightStyles, color, wholeWord, ...others } = useProps("Highlight", defaultProps, _props);
const isTermArray = Array.isArray(highlight) && typeof highlight[0] === "object";
const colorMap = /* @__PURE__ */ new Map();
let highlightStrings;
if (isTermArray) highlightStrings = highlight.map((term) => {
if (term.color) colorMap.set(term.text.toLowerCase(), term.color);
return term.text;
});
else if (Array.isArray(highlight)) highlightStrings = highlight;
else highlightStrings = [highlight];
const highlightChunks = highlighter(children, highlightStrings, { wholeWord });
return /* @__PURE__ */ jsx(Text, {
unstyled,
...others,
__staticSelector: "Highlight",
children: highlightChunks.map(({ chunk, highlighted }, i) => highlighted ? /* @__PURE__ */ jsx(Mark, {
unstyled,
color: colorMap.get(chunk.toLowerCase()) || color,
style: highlightStyles,
"data-highlight": chunk,
children: chunk
}, i) : /* @__PURE__ */ jsx("span", { children: chunk }, i))
});
});
Highlight.classes = Text.classes;
Highlight.displayName = "@mantine/core/Highlight";
//#endregion
export { Highlight };
//# sourceMappingURL=Highlight.mjs.map