106 lines
2.6 KiB
TypeScript
106 lines
2.6 KiB
TypeScript
import { Box, useMediaQuery, useTheme } from "@mui/material";
|
|
import { FC } from "react";
|
|
import { StepButtonsBlock } from "./StepButtonsBlock";
|
|
import { CustomSelect } from "../../../../components/CustomSelect/CustomSelect";
|
|
import { CustomRadioGroup } from "../../../../components/CustomRadioGroup/CustomRadioGroup";
|
|
import { MinifiedData } from "./types";
|
|
import { ModalTitle } from "./ModalTitle";
|
|
|
|
type Props = {
|
|
pipelines: MinifiedData[];
|
|
users: MinifiedData[];
|
|
handlePrevStep: () => void;
|
|
handleNextStep: () => void;
|
|
selectedDealUser: string | null;
|
|
setSelectedDealPerformer: (value: string | null) => void;
|
|
selectedPipeline: string | null;
|
|
setSelectedPipeline: (value: string | null) => void;
|
|
|
|
titleProps: {
|
|
step: number;
|
|
title: string;
|
|
desc: string;
|
|
toSettings: () => void;
|
|
}
|
|
onScroll: () => void;
|
|
onScrollUsers: () => void;
|
|
};
|
|
|
|
export const Pipelines: FC<Props> = ({
|
|
pipelines,
|
|
selectedPipeline,
|
|
setSelectedPipeline,
|
|
titleProps,
|
|
|
|
users,
|
|
selectedDealUser,
|
|
setSelectedDealPerformer,
|
|
onScroll,
|
|
onScrollUsers,
|
|
|
|
handlePrevStep,
|
|
handleNextStep,
|
|
}) => {
|
|
const theme = useTheme();
|
|
const isMobile = useMediaQuery(theme.breakpoints.down(600));
|
|
const isTablet = useMediaQuery(theme.breakpoints.down(1000));
|
|
return (
|
|
<>
|
|
<Box
|
|
sx={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
height: "100%",
|
|
overflow: "auto",
|
|
flexGrow: 1,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
height: "100%",
|
|
overflow: "auto",
|
|
zIndex: 3,
|
|
width: "100%",
|
|
}}>
|
|
<Box sx={{ width: "100%", zIndex: 3 }}>
|
|
<ModalTitle
|
|
{...titleProps}
|
|
/>
|
|
<CustomSelect
|
|
items={users}
|
|
selectedItemId={selectedDealUser}
|
|
setSelectedItem={setSelectedDealPerformer}
|
|
handleScroll={onScrollUsers}
|
|
/>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
marginTop: "13px",
|
|
flexGrow: 1,
|
|
width: "100%",
|
|
}}
|
|
>
|
|
<CustomRadioGroup
|
|
items={pipelines}
|
|
selectedItemId={selectedPipeline}
|
|
setSelectedItem={setSelectedPipeline}
|
|
handleScroll={onScroll}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
<Box
|
|
sx={{
|
|
alignSelf: "end",
|
|
}}
|
|
>
|
|
<StepButtonsBlock
|
|
onLargeBtnClick={handleNextStep}
|
|
onSmallBtnClick={handlePrevStep}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
</>
|
|
);
|
|
};
|