Spaces:
Running
Running
File size: 1,805 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 |
import Input from "@/components/generics/input/Input";
import "./AbbreviationsBlock.scss";
import { AbbreviationsBlockProps } from "./AbbreviationBlock.interface";
import { useEffect, useMemo, useState } from "react";
import { useAppDispatch, useAppSelector } from "@/store/hooks";
import { setAbbreviation } from "@/shared/hooks/useAbbreviations/reducer";
export const AbbreviationsBlock = ({ abbreviation, values }: AbbreviationsBlockProps) => {
const { abbreviations } = useAppSelector((state) => state.request);
const storedValue = useMemo(() => abbreviations.find((e) => e.key === abbreviation), [abbreviations, abbreviation]);
const [selectedOption, setSelectedOption] = useState<string>(storedValue?.value ?? values[0]);
const dispatch = useAppDispatch();
useEffect(() => {
dispatch(setAbbreviation({ key: abbreviation, value: selectedOption }));
}, [abbreviation, dispatch, selectedOption]);
return (
<div className="abbreviation_block">
<div className="label">
<span>
Сокращение <b className="abbreviation">{abbreviation}</b> :
</span>
</div>
<div className="abbreviation_container">
<div className="values">
{values.map((value, index) => (
<div key={value + index} className="values_optiuon" onClick={() => setSelectedOption(value)}>
<div className={`name ${selectedOption === value ? "checked" : ""}`}>{value}</div>
<div className="radio">
<Input
type="radio"
name={`${abbreviation}_value`}
onSetValue={() => {}}
checked={selectedOption === value}
/>
</div>
</div>
))}
</div>
</div>
</div>
);
};
|