116 lines
3.3 KiB
TypeScript
116 lines
3.3 KiB
TypeScript
import * as React from "react";
|
||
import { FC, useMemo } from "react";
|
||
import CheckboxIcon from "@icons/Checkbox";
|
||
import { SelectChangeEvent, Typography, useTheme, Box, FormControlLabel, RadioGroup, Radio, useMediaQuery } from "@mui/material";
|
||
import { MinifiedData, TagKeys } from "@/pages/IntegrationsPage/IntegrationsModal/Amo/types";
|
||
import { determineScrollBottom } from "@/utils/throttle";
|
||
import { throttle } from "@frontend/kitui";
|
||
|
||
type CustomRadioGroupProps = {
|
||
items: MinifiedData[] | [];
|
||
selectedItemId?: string | null;
|
||
setSelectedItem: (value: string | null) => void;
|
||
handleScroll: () => void;
|
||
activeScope?: TagKeys;
|
||
};
|
||
|
||
export const CustomRadioGroup: FC<CustomRadioGroupProps> = ({
|
||
items,
|
||
selectedItemId = "",
|
||
setSelectedItem,
|
||
handleScroll,
|
||
activeScope,
|
||
}) => {
|
||
const theme = useTheme();
|
||
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
||
|
||
const currentItem =
|
||
(selectedItemId !== null && selectedItemId.length > 0) ?
|
||
items.find((item) => item.id === selectedItemId) || null
|
||
:
|
||
null;
|
||
|
||
const filteredItems =
|
||
(activeScope !== undefined) ?
|
||
items.filter((item) => {
|
||
return item.entity === activeScope;
|
||
}) : items
|
||
|
||
const formControlLabels =
|
||
(filteredItems.length !== 0) ?
|
||
filteredItems.map((item) => (
|
||
<FormControlLabel
|
||
key={item.id}
|
||
sx={{
|
||
color: "black",
|
||
padding: "15px",
|
||
borderBottom: `1px solid ${theme.palette.background.default}`,
|
||
display: "flex",
|
||
justifyContent: "space-between",
|
||
borderRadius: "12px",
|
||
margin: 0,
|
||
backgroundColor:
|
||
currentItem?.id === item.id ? theme.palette.background.default : theme.palette.common.white,
|
||
"&.MuiFormControlLabel-root > .MuiTypography-root": {
|
||
width: isMobile ? "150px" : "200px",
|
||
overflow: "hidden",
|
||
textOverflow: "ellipsis",
|
||
whiteSpace: "nowrap"
|
||
},
|
||
}}
|
||
value={item.id}
|
||
control={
|
||
<Radio
|
||
checkedIcon={
|
||
<CheckboxIcon
|
||
checked
|
||
isRounded
|
||
color={theme.palette.brightPurple.main}
|
||
/>
|
||
}
|
||
icon={<CheckboxIcon isRounded />}
|
||
/>
|
||
}
|
||
label={item.title}
|
||
labelPlacement={"start"}
|
||
/>
|
||
))
|
||
:
|
||
(
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
height: "100%",
|
||
padding: "15px",
|
||
}}
|
||
>
|
||
<Typography>Нет элементов</Typography>
|
||
</Box>
|
||
)
|
||
|
||
return (
|
||
<Box
|
||
|
||
onScroll={(e) => determineScrollBottom(e, throttle(handleScroll, 700))}
|
||
sx={{
|
||
border: `1px solid ${theme.palette.grey2.main}`,
|
||
borderRadius: "12px",
|
||
padding: "5px",
|
||
maxHeight: "305px",
|
||
overflowY: "auto",
|
||
}}
|
||
>
|
||
<RadioGroup
|
||
aria-labelledby="demo-controlled-radio-buttons-group"
|
||
name="controlled-radio-buttons-group"
|
||
value={selectedItemId}
|
||
onChange={({ target }: SelectChangeEvent<string>) => setSelectedItem(target.value)}
|
||
>
|
||
{formControlLabels}
|
||
</RadioGroup>
|
||
</Box>
|
||
);
|
||
};
|