79 lines
1.9 KiB
TypeScript
79 lines
1.9 KiB
TypeScript
import { Box, useTheme } from "@mui/material";
|
|
import { Item } from "../Item/Item";
|
|
import { StepButtonsBlock } from "../../StepButtonsBlock/StepButtonsBlock";
|
|
import { FC } from "react";
|
|
import { TQuestionEntity } from "../../IntegrationsModal";
|
|
|
|
type TitleKeys = "contacts" | "company" | "deal" | "users" | "buyers";
|
|
|
|
type ItemDetailsViewProps = {
|
|
setIsSelection: (value: boolean) => void;
|
|
handlePrevStep: () => void;
|
|
handleNextStep: () => void;
|
|
questionEntity: TQuestionEntity;
|
|
setActiveItem: (value: string | null) => void;
|
|
};
|
|
|
|
export const ItemDetailsView: FC<ItemDetailsViewProps> = ({
|
|
handlePrevStep,
|
|
handleNextStep,
|
|
questionEntity,
|
|
setActiveItem,
|
|
setIsSelection,
|
|
}) => {
|
|
const theme = useTheme();
|
|
|
|
return (
|
|
<Box
|
|
sx={{
|
|
marginTop: "20px",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
height: "100%",
|
|
flexGrow: 1,
|
|
}}
|
|
>
|
|
<Box
|
|
sx={{
|
|
width: "100%",
|
|
height: "400px",
|
|
flexGrow: 1,
|
|
borderRadius: "10px",
|
|
padding: "10px",
|
|
boxShadow: "0 0 20px rgba(0, 0, 0, 0.15)",
|
|
display: "flex",
|
|
overflowY: "auto",
|
|
flexWrap: "wrap",
|
|
justifyContent: "start",
|
|
}}
|
|
>
|
|
{questionEntity &&
|
|
Object.keys(questionEntity).map((item) => (
|
|
<Item
|
|
key={item}
|
|
title={item as TitleKeys}
|
|
onAddBtnClick={() => {
|
|
setIsSelection(true);
|
|
setActiveItem(item);
|
|
}}
|
|
data={questionEntity}
|
|
/>
|
|
))}
|
|
</Box>
|
|
|
|
<Box
|
|
sx={{
|
|
marginTop: "20px",
|
|
alignSelf: "end",
|
|
}}
|
|
>
|
|
<StepButtonsBlock
|
|
onSmallBtnClick={handlePrevStep}
|
|
onLargeBtnClick={handleNextStep}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
};
|