/
search-input.tsx
55 lines (49 loc) · 1.46 KB
/
search-input.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
"use client";
import { forwardRef } from "react";
import { experimental_RichInput as RichInput, RichInputHandle, createRegexRenderer } from "rich-textarea";
import { twMerge } from "tailwind-merge";
import { SEARCH_PARAM_NAMES } from "@/search-param-names";
import { shinryokouiMasterFields } from "../shinryoukoui-master-fields/shinryoukoui-master-fields";
const FIELD_NAMES = shinryokouiMasterFields.map((f) => f.name);
const FIELD_HIGHLIGHT_REG = new RegExp(
`(?<=(^|\\s)|-)(${FIELD_NAMES.map((f) => `${f}`).join("|")}):`,
"g"
);
const renderer = createRegexRenderer([
[
FIELD_HIGHLIGHT_REG,
{ background: "#EAF5F9", color: "#698199", borderRadius: "2px" },
],
]);
type SearchInputProps = {
value?: string;
onChange?: (value: string) => void;
className?: string;
}
export const SearchInput = forwardRef<RichInputHandle, SearchInputProps>(function SearchInput({
value,
onChange,
className,
}, ref) {
return (
<>
<RichInput
ref={ref}
name={SEARCH_PARAM_NAMES.SEARCH.QUERY}
autoFocus
placeholder="診療行為を検索"
style={{
width: "100%",
}}
className={twMerge(
"bg-gray-50 border border-gray-300 text-gray-900 rounded focus:ring-blue-500 focus:border-blue-500 block w-full p-2",
className
)}
onChange={onChange ? (e) => onChange(e.target.value) : undefined}
value={value}
>
{renderer}
</RichInput>
</>
);
});