66 lines
2.3 KiB
TypeScript
66 lines
2.3 KiB
TypeScript
import React, { FC, useState } from "react";
|
|
import classNames from "classnames";
|
|
import { Box, Group, Text } from "@mantine/core";
|
|
import BoardMenu from "@/app/deals/components/shared/BoardMenu/BoardMenu";
|
|
import { useBoardsContext } from "@/app/deals/contexts/BoardsContext";
|
|
import InPlaceInput from "@/components/ui/InPlaceInput/InPlaceInput";
|
|
import useIsMobile from "@/hooks/useIsMobile";
|
|
import { BoardSchema } from "@/lib/client";
|
|
import styles from "./Board.module.css";
|
|
|
|
type Props = {
|
|
board: BoardSchema;
|
|
};
|
|
|
|
const Board: FC<Props> = ({ board }) => {
|
|
const { selectedBoard, onUpdateBoard, onDeleteBoard } = useBoardsContext();
|
|
const isMobile = useIsMobile();
|
|
const [isHovered, setIsHovered] = useState(false);
|
|
|
|
return (
|
|
<Group
|
|
px={"md"}
|
|
py={"xs"}
|
|
className={classNames(
|
|
styles.board,
|
|
selectedBoard?.id === board.id && styles["board-selected"]
|
|
)}
|
|
justify={"space-between"}
|
|
onMouseEnter={() => setIsHovered(true)}
|
|
onMouseLeave={() => setIsHovered(false)}>
|
|
<InPlaceInput
|
|
defaultValue={board.name}
|
|
onComplete={value => onUpdateBoard(board.id, { name: value })}
|
|
inputStyles={{
|
|
input: {
|
|
height: 24,
|
|
minHeight: 24,
|
|
},
|
|
}}
|
|
getChildren={startEditing => (
|
|
<>
|
|
<Box>
|
|
<Text style={{ textWrap: "nowrap" }}>
|
|
{board.name}
|
|
</Text>
|
|
</Box>
|
|
{!isMobile && (
|
|
<BoardMenu
|
|
isHovered={
|
|
selectedBoard?.id === board.id || isHovered
|
|
}
|
|
onDeleteBoard={onDeleteBoard}
|
|
board={board}
|
|
startEditing={startEditing}
|
|
/>
|
|
)}
|
|
</>
|
|
)}
|
|
modalTitle={"Редактирование доски"}
|
|
/>
|
|
</Group>
|
|
);
|
|
};
|
|
|
|
export default Board;
|