71 lines
2.3 KiB
TypeScript
71 lines
2.3 KiB
TypeScript
import React, { ReactNode } from "react";
|
|
import { Box, Group, Text } from "@mantine/core";
|
|
import StatusMenu from "@/app/deals/components/shared/StatusMenu/StatusMenu";
|
|
import { useStatusesContext } from "@/app/deals/contexts/StatusesContext";
|
|
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
|
|
import { StatusSchema } from "@/lib/client";
|
|
import styles from "./StatusColumnWrapper.module.css";
|
|
|
|
type Props = {
|
|
status: StatusSchema;
|
|
isDragging?: boolean;
|
|
children: ReactNode;
|
|
};
|
|
|
|
const StatusColumnWrapper = ({
|
|
status,
|
|
children,
|
|
isDragging = false,
|
|
}: Props) => {
|
|
const { onUpdateStatus } = useStatusesContext();
|
|
|
|
const handleSave = (value: string) => {
|
|
const newValue = value.trim();
|
|
if (newValue && newValue !== status.name) {
|
|
onUpdateStatus(status.id, { name: newValue });
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Box className={styles.container}>
|
|
<Group
|
|
justify={"space-between"}
|
|
p={"sm"}
|
|
wrap={"nowrap"}
|
|
mb={"xs"}
|
|
className={styles.header}>
|
|
<InPlaceInput
|
|
defaultValue={status.name}
|
|
onComplete={value => handleSave(value)}
|
|
inputStyles={{
|
|
input: {
|
|
height: 25,
|
|
minHeight: 25,
|
|
},
|
|
}}
|
|
getChildren={startEditing => (
|
|
<>
|
|
<Text
|
|
style={{
|
|
cursor: "grab",
|
|
userSelect: "none",
|
|
opacity: isDragging ? 0.5 : 1,
|
|
}}>
|
|
{status.name}
|
|
</Text>
|
|
<StatusMenu
|
|
status={status}
|
|
handleEdit={startEditing}
|
|
/>
|
|
</>
|
|
)}
|
|
modalTitle={"Редактирование статуса"}
|
|
/>
|
|
</Group>
|
|
{children}
|
|
</Box>
|
|
);
|
|
};
|
|
|
|
export default StatusColumnWrapper;
|