84 lines
2.6 KiB
TypeScript
84 lines
2.6 KiB
TypeScript
import React, { FC, ReactNode } from "react";
|
||
import { IconEdit } from "@tabler/icons-react";
|
||
import { motion } from "framer-motion";
|
||
import { Box, Tabs, Text } from "@mantine/core";
|
||
import GeneralTab from "@/app/deals/drawers/DealEditorDrawer/tabs/GeneralTab/GeneralTab";
|
||
import useIsMobile from "@/hooks/utils/useIsMobile";
|
||
import { DealSchema, ProjectSchema } from "@/lib/client";
|
||
import { MODULES } from "@/modules/modules";
|
||
import styles from "../DealEditorDrawer.module.css";
|
||
|
||
type Props = {
|
||
value: DealSchema;
|
||
onChange: (deal: DealSchema) => void;
|
||
onDelete: (deal: DealSchema) => void;
|
||
project: ProjectSchema | null;
|
||
};
|
||
|
||
const DealEditorBody: FC<Props> = props => {
|
||
const isMobile = useIsMobile();
|
||
|
||
const getTabPanel = (value: string, component: ReactNode): ReactNode => (
|
||
<Tabs.Panel
|
||
key={value}
|
||
value={value}>
|
||
<motion.div
|
||
initial={{ opacity: 0 }}
|
||
animate={{ opacity: 1 }}
|
||
transition={{ duration: 0.2 }}>
|
||
<Box
|
||
h={"100%"}
|
||
w={"100%"}>
|
||
{component}
|
||
</Box>
|
||
</motion.div>
|
||
</Tabs.Panel>
|
||
);
|
||
|
||
const getModuleTabs = () =>
|
||
props.project?.builtInModules.map(module => {
|
||
const moduleRender = MODULES[module.key].renderInfo;
|
||
return (
|
||
<Tabs.Tab
|
||
key={moduleRender.key}
|
||
value={moduleRender.key}
|
||
leftSection={moduleRender.icon}>
|
||
<Box
|
||
style={{
|
||
justifyItems: "left",
|
||
}}>
|
||
<Text>{moduleRender.label}</Text>
|
||
</Box>
|
||
</Tabs.Tab>
|
||
);
|
||
});
|
||
|
||
const getModuleTabPanels = () =>
|
||
props.project?.builtInModules.map(module =>
|
||
getTabPanel(module.key, MODULES[module.key]?.getTab?.(props))
|
||
);
|
||
|
||
return (
|
||
<Tabs
|
||
defaultValue="general"
|
||
orientation={isMobile ? "horizontal" : "vertical"}
|
||
h={"97vh"}
|
||
mih={"97vh"}
|
||
classNames={{ tab: styles.tab }}>
|
||
<Tabs.List>
|
||
<Tabs.Tab
|
||
value="general"
|
||
leftSection={<IconEdit />}>
|
||
Общая информация
|
||
</Tabs.Tab>
|
||
{getModuleTabs()}
|
||
</Tabs.List>
|
||
|
||
{getTabPanel("general", <GeneralTab {...props} />)}
|
||
{getModuleTabPanels()}
|
||
</Tabs>
|
||
);
|
||
};
|
||
|
||
export default DealEditorBody;
|