shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: enable droppable in strict mode

Browse Source
This commit is contained in:
Henry
2025-01-03 17:26:20 +00:00
parent 3ee0c0039c
commit 34cabb5f16
2 changed files with 31 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
apps/web/src/components/StrictModeDroppable.tsx Normal file
View File

@@ -0,0 +1,18 @@
import type { DroppableProps } from "react-beautiful-dnd";
import { useEffect, useState } from "react";
import { Droppable } from "react-beautiful-dnd";
export const StrictModeDroppable = ({ children, ...props }: DroppableProps) => {
const [enabled, setEnabled] = useState(false);
useEffect(() => {
const animation = requestAnimationFrame(() => setEnabled(true));
return () => {
cancelAnimationFrame(animation);
setEnabled(false);
};
}, []);
if (!enabled) {
return null;
}
return <Droppable {...props}>{children}</Droppable>;
};

25
apps/web/src/views/board/index.tsx
View File

@@ -3,16 +3,17 @@ import Link from "next/link";
import { useParams } from "next/navigation"; import { useParams } from "next/navigation";
import { useRouter } from "next/router"; import { useRouter } from "next/router";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { DragDropContext, Draggable, Droppable } from "react-beautiful-dnd"; import { DragDropContext, Draggable } from "react-beautiful-dnd";
import { useForm } from "react-hook-form"; import { useForm } from "react-hook-form";
import { HiOutlinePlusSmall } from "react-icons/hi2"; import { HiOutlinePlusSmall } from "react-icons/hi2";
import { type UpdateBoardInput } from "@kan/api/types"; import type { UpdateBoardInput } from "@kan/api/types";
import Modal from "~/components/modal"; import Modal from "~/components/modal";
import { NewWorkspaceForm } from "~/components/NewWorkspaceForm"; import { NewWorkspaceForm } from "~/components/NewWorkspaceForm";
import { PageHead } from "~/components/PageHead"; import { PageHead } from "~/components/PageHead";
import PatternedBackground from "~/components/PatternedBackground"; import PatternedBackground from "~/components/PatternedBackground";
import { StrictModeDroppable as Droppable } from "~/components/StrictModeDroppable";
import { useBoard } from "~/providers/board"; import { useBoard } from "~/providers/board";
import { useModal } from "~/providers/modal"; import { useModal } from "~/providers/modal";
import { useWorkspace } from "~/providers/workspace"; import { useWorkspace } from "~/providers/workspace";
@@ -29,7 +30,7 @@ import { NewListForm } from "./components/NewListForm";
type PublicListId = string; type PublicListId = string;
export default function BoardPage() { export default function BoardPage() {
const params = useParams(); const params = useParams() as { boardId: string[] } | null;
const router = useRouter(); const router = useRouter();
const { boardData, setBoardData, updateCard, updateList } = useBoard(); const { boardData, setBoardData, updateCard, updateList } = useBoard();
const { workspace } = useWorkspace(); const { workspace } = useWorkspace();
@@ -37,7 +38,7 @@ export default function BoardPage() {
const [selectedPublicListId, setSelectedPublicListId] = const [selectedPublicListId, setSelectedPublicListId] =
useState<PublicListId>(""); useState<PublicListId>("");
const boardId = params?.boardId?.length ? params.boardId[0] : null; const boardId = params?.boardId.length ? params.boardId[0] : null;
const updateBoard = api.board.update.useMutation(); const updateBoard = api.board.update.useMutation();
@@ -134,7 +135,7 @@ export default function BoardPage() {
return ( return (
<> <>
<PageHead <PageHead
title={`${boardData?.name ?? "Board"} | ${workspace?.name ?? "Workspace"}`} title={`${boardData.name ?? "Board"} | ${workspace.name ?? "Workspace"}`}
/> />
<div className="relative flex h-full flex-col"> <div className="relative flex h-full flex-col">
<PatternedBackground /> <PatternedBackground />
@@ -196,7 +197,7 @@ export default function BoardPage() {
{...provided.droppableProps} {...provided.droppableProps}
> >
<div className="min-w-[2rem]" /> <div className="min-w-[2rem]" />
{boardData?.lists?.map((list, index) => ( {boardData.lists.map((list, index) => (
<List <List
index={index} index={index}
key={index} key={index}
@@ -212,7 +213,7 @@ export default function BoardPage() {
{...provided.droppableProps} {...provided.droppableProps}
className="scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-w-[8px] z-10 h-full max-h-[calc(100vh-265px)] min-h-[2rem] overflow-y-auto pr-1 scrollbar scrollbar-track-dark-100 scrollbar-thumb-dark-600" className="scrollbar-track-rounded-[4px] scrollbar-thumb-rounded-[4px] scrollbar-w-[8px] z-10 h-full max-h-[calc(100vh-265px)] min-h-[2rem] overflow-y-auto pr-1 scrollbar scrollbar-track-dark-100 scrollbar-thumb-dark-600"
> >
{list.cards?.map((card, index) => ( {list.cards.map((card, index) => (
<Draggable <Draggable
key={card.publicId} key={card.publicId}
draggableId={card.publicId} draggableId={card.publicId}
@@ -240,10 +241,10 @@ export default function BoardPage() {
{...provided.dragHandleProps} {...provided.dragHandleProps}
> >
<div>{card.title}</div> <div>{card.title}</div>
{(card.labels?.length ?? 0) || {(card.labels.length ?? 0) ||
(card.members?.length ?? 0) ? ( (card.members.length ?? 0) ? (
<div className="mt-2 flex justify-end space-x-1"> <div className="mt-2 flex justify-end space-x-1">
{card.labels?.map((label) => ( {card.labels.map((label) => (
<span <span
key={label.publicId} key={label.publicId}
className="inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[10px] font-medium text-neutral-600 ring-1 ring-inset ring-light-600 dark:text-dark-1000 dark:ring-dark-800" className="inline-flex w-fit items-center gap-x-1.5 rounded-full px-2 py-1 text-[10px] font-medium text-neutral-600 ring-1 ring-inset ring-light-600 dark:text-dark-1000 dark:ring-dark-800"
@@ -262,13 +263,13 @@ export default function BoardPage() {
</span> </span>
))} ))}
<div className="isolate flex -space-x-1 overflow-hidden"> <div className="isolate flex -space-x-1 overflow-hidden">
{card.members?.map((member) => ( {card.members.map((member) => (
<span <span
key={member.publicId} key={member.publicId}
className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-light-900 ring-2 ring-light-50 dark:bg-gray-500 dark:ring-dark-500" className="inline-flex h-6 w-6 items-center justify-center rounded-full bg-light-900 ring-2 ring-light-50 dark:bg-gray-500 dark:ring-dark-500"
> >
<span className="text-[10px] font-medium leading-none text-white"> <span className="text-[10px] font-medium leading-none text-white">
{member?.user?.name {member.user?.name
?.split(" ") ?.split(" ")
.map((namePart) => .map((namePart) =>
namePart namePart