@chakra-ui/layout
Version:
Chakra UI layout components that give you massive speed
1 lines • 4.11 kB
Source Map (JSON)
{"version":3,"sources":["../src/highlight.tsx"],"sourcesContent":["import {\n forwardRef,\n HTMLChakraProps,\n omitThemingProps,\n SystemStyleObject,\n ThemingProps,\n useStyleConfig,\n} from \"@chakra-ui/system\"\nimport { Fragment, useMemo } from \"react\"\nimport { Box } from \"./box\"\n\ntype Chunk = {\n text: string\n match: boolean\n}\n\ntype HighlightOptions = {\n text: string\n query: string | string[]\n}\n\nconst escapeRegexp = (term: string): string =>\n term.replace(/[|\\\\{}()[\\]^$+*?.-]/g, (char: string) => `\\\\${char}`)\n\nfunction buildRegex(query: string[]) {\n const _query = query\n .filter((text) => text.length !== 0)\n .map((text) => escapeRegexp(text.trim()))\n if (!_query.length) {\n return null\n }\n\n return new RegExp(`(${_query.join(\"|\")})`, \"ig\")\n}\n\nfunction highlightWords({ text, query }: HighlightOptions): Chunk[] {\n const regex = buildRegex(Array.isArray(query) ? query : [query])\n if (!regex) {\n return [{ text, match: false }]\n }\n const result = text.split(regex).filter(Boolean)\n return result.map((str) => ({ text: str, match: regex.test(str) }))\n}\n\nexport type UseHighlightProps = HighlightOptions\n\nexport function useHighlight(props: UseHighlightProps) {\n const { text, query } = props\n return useMemo(() => highlightWords({ text, query }), [text, query])\n}\n\nexport type HighlightProps = {\n query: string | string[]\n children: string | ((props: Chunk[]) => React.ReactNode)\n styles?: SystemStyleObject\n}\n\nexport type MarkProps = ThemingProps<\"Mark\"> & HTMLChakraProps<\"mark\">\n\nexport const Mark = forwardRef<MarkProps, \"mark\">(function Mark(props, ref) {\n const styles = useStyleConfig(\"Mark\", props)\n const ownProps = omitThemingProps(props)\n return (\n <Box\n ref={ref}\n {...ownProps}\n as=\"mark\"\n __css={{ bg: \"transparent\", whiteSpace: \"nowrap\", ...styles }}\n />\n )\n})\n\n/**\n * `Highlight` allows you to highlight substrings of a text.\n *\n * @see Docs https://chakra-ui.com/docs/components/highlight\n */\nexport function Highlight(props: HighlightProps): JSX.Element {\n const { children, query, styles } = props\n\n if (typeof children !== \"string\") {\n throw new Error(\"The children prop of Highlight must be a string\")\n }\n\n const chunks = useHighlight({ query, text: children })\n\n return (\n <>\n {chunks.map((chunk, index) => {\n return chunk.match ? (\n <Mark key={index} sx={styles}>\n {chunk.text}\n </Mark>\n ) : (\n <Fragment key={index}>{chunk.text}</Fragment>\n )\n })}\n </>\n )\n}\n"],"mappings":";;;;;;AAAA;AAAA,EACE;AAAA,EAEA;AAAA,EAGA;AAAA,OACK;AACP,SAAS,UAAU,eAAe;AAuD9B,SAwBA,YAAAA,WAxBA;AA1CJ,IAAM,eAAe,CAAC,SACpB,KAAK,QAAQ,wBAAwB,CAAC,SAAiB,KAAK,IAAI,EAAE;AAEpE,SAAS,WAAW,OAAiB;AACnC,QAAM,SAAS,MACZ,OAAO,CAAC,SAAS,KAAK,WAAW,CAAC,EAClC,IAAI,CAAC,SAAS,aAAa,KAAK,KAAK,CAAC,CAAC;AAC1C,MAAI,CAAC,OAAO,QAAQ;AAClB,WAAO;AAAA,EACT;AAEA,SAAO,IAAI,OAAO,IAAI,OAAO,KAAK,GAAG,CAAC,KAAK,IAAI;AACjD;AAEA,SAAS,eAAe,EAAE,MAAM,MAAM,GAA8B;AAClE,QAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK,IAAI,QAAQ,CAAC,KAAK,CAAC;AAC/D,MAAI,CAAC,OAAO;AACV,WAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC;AAAA,EAChC;AACA,QAAM,SAAS,KAAK,MAAM,KAAK,EAAE,OAAO,OAAO;AAC/C,SAAO,OAAO,IAAI,CAAC,SAAS,EAAE,MAAM,KAAK,OAAO,MAAM,KAAK,GAAG,EAAE,EAAE;AACpE;AAIO,SAAS,aAAa,OAA0B;AACrD,QAAM,EAAE,MAAM,MAAM,IAAI;AACxB,SAAO,QAAQ,MAAM,eAAe,EAAE,MAAM,MAAM,CAAC,GAAG,CAAC,MAAM,KAAK,CAAC;AACrE;AAUO,IAAM,OAAO,WAA8B,SAASC,MAAK,OAAO,KAAK;AAC1E,QAAM,SAAS,eAAe,QAAQ,KAAK;AAC3C,QAAM,WAAW,iBAAiB,KAAK;AACvC,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACC,GAAG;AAAA,MACJ,IAAG;AAAA,MACH,OAAO,EAAE,IAAI,eAAe,YAAY,UAAU,GAAG,OAAO;AAAA;AAAA,EAC9D;AAEJ,CAAC;AAOM,SAAS,UAAU,OAAoC;AAC5D,QAAM,EAAE,UAAU,OAAO,OAAO,IAAI;AAEpC,MAAI,OAAO,aAAa,UAAU;AAChC,UAAM,IAAI,MAAM,iDAAiD;AAAA,EACnE;AAEA,QAAM,SAAS,aAAa,EAAE,OAAO,MAAM,SAAS,CAAC;AAErD,SACE,oBAAAD,WAAA,EACG,iBAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,WAAO,MAAM,QACX,oBAAC,QAAiB,IAAI,QACnB,gBAAM,QADE,KAEX,IAEA,oBAAC,YAAsB,gBAAM,QAAd,KAAmB;AAAA,EAEtC,CAAC,GACH;AAEJ;","names":["Fragment","Mark"]}