142 lines
3.5 KiB
TypeScript
142 lines
3.5 KiB
TypeScript
import { useState } from "react";
|
||
import type { CommentAction } from "@/entities/action/schema";
|
||
|
||
import Tabs from "@mui/material/Tabs";
|
||
import Tab from "@mui/material/Tab";
|
||
import Box from "@mui/material/Box";
|
||
import { Button, TextField } from "@mui/material";
|
||
|
||
import TextFieldsIcon from "@mui/icons-material/TextFields";
|
||
import ImageIcon from "@mui/icons-material/Image";
|
||
import RecordVoiceOverIcon from "@mui/icons-material/RecordVoiceOver";
|
||
|
||
interface TabPanelProps {
|
||
children?: React.ReactNode;
|
||
index: number;
|
||
value: number;
|
||
}
|
||
|
||
function TabPanel(props: TabPanelProps) {
|
||
const { children, value, index, ...other } = props;
|
||
|
||
return (
|
||
<div
|
||
className="mt-3"
|
||
role="tabpanel"
|
||
hidden={value !== index}
|
||
id={`simple-tabpanel-${index}`}
|
||
aria-labelledby={`simple-tab-${index}`}
|
||
{...other}
|
||
>
|
||
{value === index && <Box sx={{ p: 3 }}>{children}</Box>}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
function a11yProps(index: number) {
|
||
return {
|
||
id: `simple-tab-${index}`,
|
||
"aria-controls": `simple-tabpanel-${index}`,
|
||
};
|
||
}
|
||
|
||
interface ActionEditorProps {
|
||
actionIndex?: number;
|
||
initialAction?: CommentAction;
|
||
onSave?: (actionIndex: number, action: CommentAction) => Promise<void> | void;
|
||
onClose?: () => Promise<void> | void;
|
||
canExit?: boolean;
|
||
}
|
||
|
||
export default function ActionEditor({
|
||
actionIndex = 0,
|
||
initialAction,
|
||
onSave,
|
||
onClose,
|
||
canExit = false,
|
||
}: ActionEditorProps) {
|
||
const [value, setValue] = useState(0);
|
||
|
||
const [action, setAction] = useState<CommentAction>(
|
||
initialAction ?? {
|
||
actionType: "comment",
|
||
text: "",
|
||
fileUrls: [],
|
||
},
|
||
);
|
||
|
||
const handleChange = (_: React.SyntheticEvent, newValue: number) => {
|
||
setValue(newValue);
|
||
};
|
||
|
||
return (
|
||
<>
|
||
<div className="min-h-[500px] w-[80%] rounded-sm bg-white shadow-md">
|
||
<Box sx={{ width: "100%" }}>
|
||
<Box sx={{ borderBottom: 1, borderColor: "divider" }}>
|
||
<Tabs
|
||
value={value}
|
||
onChange={handleChange}
|
||
aria-label="Редактировать пост"
|
||
>
|
||
<Tab label="Текст" icon={<TextFieldsIcon />} {...a11yProps(0)} />
|
||
<Tab label="Изображение" icon={<ImageIcon />} {...a11yProps(1)} />
|
||
<Tab
|
||
label="Голосовое"
|
||
icon={<RecordVoiceOverIcon />}
|
||
{...a11yProps(2)}
|
||
/>
|
||
</Tabs>
|
||
</Box>
|
||
|
||
<TabPanel value={value} index={0}>
|
||
<TextField
|
||
fullWidth
|
||
multiline
|
||
minRows={10}
|
||
maxRows={10}
|
||
value={action.text}
|
||
onChange={(event) =>
|
||
setAction((currentAction) => ({
|
||
...currentAction,
|
||
text: event.target.value,
|
||
}))
|
||
}
|
||
/>
|
||
</TabPanel>
|
||
|
||
<TabPanel value={value} index={1}>
|
||
In progress
|
||
</TabPanel>
|
||
|
||
<TabPanel value={value} index={2}>
|
||
In progress
|
||
</TabPanel>
|
||
</Box>
|
||
</div>
|
||
|
||
<div className="mt-4 flex gap-x-4">
|
||
{canExit && (
|
||
<Button
|
||
color="error"
|
||
onClick={() => {
|
||
if (onClose) onClose();
|
||
}}
|
||
>
|
||
Отменить
|
||
</Button>
|
||
)}
|
||
<Button
|
||
variant="contained"
|
||
type="submit"
|
||
onClick={() => {
|
||
if (onSave) onSave(actionIndex, action);
|
||
}}
|
||
>
|
||
Сохранить
|
||
</Button>
|
||
</div>
|
||
</>
|
||
);
|
||
}
|