116 lines
3.7 KiB
TypeScript
116 lines
3.7 KiB
TypeScript
import React, { FC, ReactNode } from "react";
|
|
import { IconEdit, IconHistory } from "@tabler/icons-react";
|
|
import { motion } from "framer-motion";
|
|
import { Box, Tabs, Text } from "@mantine/core";
|
|
import TabsList from "@/app/deals/drawers/DealEditorDrawer/components/TabsList";
|
|
import DealStatusHistoryTab from "@/app/deals/drawers/DealEditorDrawer/tabs/DealStatusHistoryTab/DealStatusHistoryTab";
|
|
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 getTab = (key: string, label: string, icon: ReactNode) => (
|
|
<Tabs.Tab
|
|
key={key}
|
|
value={key}
|
|
leftSection={icon}>
|
|
<Box
|
|
style={{
|
|
justifyItems: "left",
|
|
}}>
|
|
<Text>{label}</Text>
|
|
</Box>
|
|
</Tabs.Tab>
|
|
);
|
|
|
|
const getModuleTabs = (): ReactNode[] => {
|
|
if (!props.project) return [];
|
|
const tabs: ReactNode[] = [];
|
|
|
|
for (const module of props.project.builtInModules) {
|
|
const moduleInfo = MODULES[module.key];
|
|
for (const tab of moduleInfo.tabs) {
|
|
if (
|
|
(tab.device === "desktop" && isMobile) ||
|
|
(tab.device === "mobile" && !isMobile)
|
|
)
|
|
continue;
|
|
|
|
tabs.push(getTab(tab.key, tab.label, tab.icon));
|
|
}
|
|
}
|
|
|
|
return tabs;
|
|
};
|
|
|
|
const getModuleTabPanels = () => {
|
|
if (!props.project) return [];
|
|
const tabPanels: ReactNode[] = [];
|
|
|
|
for (const module of props.project.builtInModules) {
|
|
const moduleInfo = MODULES[module.key];
|
|
for (const tab of moduleInfo.tabs) {
|
|
if (
|
|
(tab.device === "desktop" && isMobile) ||
|
|
(tab.device === "mobile" && !isMobile)
|
|
)
|
|
continue;
|
|
|
|
tabPanels.push(getTabPanel(tab.key, tab.tab(props)));
|
|
}
|
|
}
|
|
|
|
return tabPanels;
|
|
};
|
|
|
|
return (
|
|
<Tabs
|
|
defaultValue="general"
|
|
orientation={isMobile ? "horizontal" : "vertical"}
|
|
h={isMobile ? "min-content" : "97vh"}
|
|
mih={isMobile ? "min-content" : "97vh"}
|
|
keepMounted={false}
|
|
classNames={{ tab: styles.tab }}>
|
|
<TabsList>
|
|
{getTab("general", "Общая информация", <IconEdit />)}
|
|
{getTab("history", "История", <IconHistory />)}
|
|
{getModuleTabs()}
|
|
</TabsList>
|
|
|
|
{getTabPanel("general", <GeneralTab {...props} />)}
|
|
{getTabPanel("history", <DealStatusHistoryTab {...props} />)}
|
|
{getModuleTabPanels()}
|
|
</Tabs>
|
|
);
|
|
};
|
|
|
|
export default DealEditorBody;
|