/
highlight.tsx
91 lines (77 loc) · 2.14 KB
/
highlight.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
import {
forwardRef,
HTMLChakraProps,
omitThemingProps,
SystemStyleObject,
ThemingProps,
useStyleConfig,
} from "@chakra-ui/system"
import React, { Fragment, useMemo } from "react"
import { Box } from "./box"
type Chunk = {
text: string
match: boolean
}
type Options = {
text: string
query: string | string[]
}
const escapeRegexp = (term: string): string =>
term.replace(/[|\\{}()[\]^$+*?.-]/g, (char: string) => `\\${char}`)
function buildRegex(query: string[]) {
const _query = query
.filter((text) => text.length !== 0)
.map((text) => escapeRegexp(text.trim()))
if (!_query.length) {
return null
}
return new RegExp(`(${_query.join("|")})`, "ig")
}
function highlightWords({ text, query }: Options): Chunk[] {
const regex = buildRegex(Array.isArray(query) ? query : [query])
if (!regex) {
return []
}
const result = text.split(regex).filter(Boolean)
return result.map((str) => ({ text: str, match: regex.test(str) }))
}
export function useHighlight(props: Options) {
const { text, query } = props
return useMemo(() => highlightWords({ text, query }), [text, query])
}
export type HighlightProps = {
query: string | string[]
children: string | ((props: Chunk[]) => React.ReactNode)
styles?: SystemStyleObject
}
export type MarkProps = ThemingProps<"Mark"> & HTMLChakraProps<"mark">
export const Mark = forwardRef<MarkProps, "mark">((props, ref) => {
const styles = useStyleConfig("Mark", props)
const ownProps = omitThemingProps(props)
return (
<Box
ref={ref}
{...ownProps}
as="mark"
__css={{ bg: "transparent", whiteSpace: "nowrap", ...styles }}
/>
)
})
export function Highlight(props: HighlightProps): JSX.Element {
const { children, query, styles } = props
if (typeof children !== "string") {
throw new Error("The children prop of Highlight must be a string")
}
const chunks = useHighlight({ query, text: children })
return (
<>
{chunks.map((chunk, index) => {
return chunk.match ? (
<Mark sx={styles}>{chunk.text}</Mark>
) : (
<Fragment key={index}>{chunk.text}</Fragment>
)
})}
</>
)
}