Spaces:
Running
Running
File size: 2,899 Bytes
79278ec |
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 |
import { useCallback, useMemo } from "react";
import "./RequestTextArea.scss";
import Editable from "@/components/generics/editable/Editable";
import Spinner from "@/components/generics/spinner/Spinner";
import { filterMatches, getAllMatches, highlightMatches } from "@/shared/utils/highlightMatches";
import { AbbreviationsBlock } from "../abbreviationBlock/AbbreviationsBlock";
import RequestTextAreaProps from "./RequestTextAreaProps";
import { useAppSelector } from "@/store/hooks";
import { useGetAbbreviations } from "@/api/predictions/hooks";
const RequestTextArea = ({
openAbbreviations,
content,
setContent,
abbreviationArray,
handleEditRequest,
}: RequestTextAreaProps) => {
const { hasAbbreviations } = useAppSelector((state) => state.request);
const { data: abbreviationsData, isLoading } = useGetAbbreviations();
const sortedAbbreviations = useMemo(
() => Object.keys(abbreviationsData ?? {}).sort((a, b) => b.length - a.length),
[abbreviationsData]
);
const onContentChange = useCallback(
(divContent: string) => {
const initialRequest = divContent;
const newContent = initialRequest.toString().replace(/\s+/g, " ");
const allMatches: { match: string; index: number; element: string }[] = getAllMatches(
sortedAbbreviations,
newContent
);
const resultString = highlightMatches(newContent, filterMatches(allMatches));
if (newContent !== content) {
setContent(resultString === "<br>" ? "" : resultString);
}
handleEditRequest();
},
[content, handleEditRequest, setContent, sortedAbbreviations]
);
return (
<div className="request_block">
<div className="label">
<span>Строка запроса</span>
</div>
<div className="request_container">
<Editable
content={content}
handleClick={!openAbbreviations && hasAbbreviations ? handleEditRequest : undefined}
onContentChange={onContentChange}
className={!openAbbreviations && hasAbbreviations ? "clickable" : ""}
placeholder="Введите запрос поиска. Например, какие действия являются первоочередными в момент обнаружения происшествия?"
/>
{openAbbreviations && hasAbbreviations ? (
<>
<hr />
{[...new Set(abbreviationArray)].map((abbr, index) => (
<AbbreviationsBlock key={abbr + index} abbreviation={abbr} values={abbreviationsData?.[abbr] ?? []} />
))}
</>
) : null}
</div>
<div className="abbr_message">
{isLoading ? (
<>
<Spinner />
<span>Загрузка аббревиатур</span>
</>
) : null}
</div>
</div>
);
};
export default RequestTextArea;
|