diff --git a/src/app/deals/components/Boards/Boards.tsx b/src/app/deals/components/Boards/Boards.tsx index 04626d7..09a3bd3 100644 --- a/src/app/deals/components/Boards/Boards.tsx +++ b/src/app/deals/components/Boards/Boards.tsx @@ -7,6 +7,7 @@ import CreateBoardButton from "@/app/deals/components/CreateBoardButton/CreateBo import { useBoardsContext } from "@/app/deals/contexts/BoardsContext"; import SortableDnd from "@/components/dnd/SortableDnd"; import { BoardSchema } from "@/lib/client"; +import { isMobile } from "react-device-detect"; const Boards = () => { const { boards, setSelectedBoard, onUpdateBoard } = useBoardsContext(); @@ -36,6 +37,7 @@ const Boards = () => { onDragEnd={onDragEnd} onItemClick={selectBoard} rowStyle={{ flexWrap: "nowrap" }} + disabled={isMobile} /> diff --git a/src/app/deals/components/DealContainer/DealContainer.tsx b/src/app/deals/components/DealContainer/DealContainer.tsx index f594c06..07a0262 100644 --- a/src/app/deals/components/DealContainer/DealContainer.tsx +++ b/src/app/deals/components/DealContainer/DealContainer.tsx @@ -6,14 +6,16 @@ import { DealSchema } from "@/lib/client"; type Props = { deal: DealSchema; + disabled?: boolean; }; -const DealContainer: FC = ({ deal }) => { +const DealContainer: FC = ({ deal, disabled = false }) => { const dealBody = useMemo(() => , [deal]); return ( {dealBody} diff --git a/src/app/deals/components/Funnel/Funnel.tsx b/src/app/deals/components/Funnel/Funnel.tsx index a52b0ab..6be5dc9 100644 --- a/src/app/deals/components/Funnel/Funnel.tsx +++ b/src/app/deals/components/Funnel/Funnel.tsx @@ -1,6 +1,7 @@ "use client"; import React, { FC, ReactNode } from "react"; +import { isMobile } from "react-device-detect"; import { Group, ScrollArea } from "@mantine/core"; import CreateStatusButton from "@/app/deals/components/CreateStatusButton/CreateStatusButton"; import DealCard from "@/app/deals/components/DealCard/DealCard"; @@ -63,6 +64,7 @@ const Funnel: FC = () => { )} activeContainer={activeStatus} @@ -80,6 +82,7 @@ const Funnel: FC = () => { {children} )} + disabled={isMobile} /> diff --git a/src/components/dnd/FunnelDnd/FunnelColumn.tsx b/src/components/dnd/FunnelDnd/FunnelColumn.tsx index 53e6052..cc12372 100644 --- a/src/components/dnd/FunnelDnd/FunnelColumn.tsx +++ b/src/components/dnd/FunnelDnd/FunnelColumn.tsx @@ -12,6 +12,7 @@ type Props = { items: TItem[]; renderItem: (item: TItem) => ReactNode; children?: ReactNode; + disabled?: boolean; }; const FunnelColumn = ({ @@ -19,6 +20,7 @@ const FunnelColumn = ({ items, renderItem, children, + disabled = false, }: Props) => { const { setNodeRef } = useDroppable({ id }); @@ -26,6 +28,7 @@ const FunnelColumn = ({ <> {children} diff --git a/src/components/dnd/FunnelDnd/FunnelDnd.tsx b/src/components/dnd/FunnelDnd/FunnelDnd.tsx index c82f8c1..014f7f8 100644 --- a/src/components/dnd/FunnelDnd/FunnelDnd.tsx +++ b/src/components/dnd/FunnelDnd/FunnelDnd.tsx @@ -36,6 +36,7 @@ type Props = { getItemsByContainer: (container: TContainer, items: TItem[]) => TItem[]; activeContainer: TContainer | null; activeItem: TItem | null; + disabled?: boolean; }; const FunnelDnd = < @@ -55,6 +56,7 @@ const FunnelDnd = < getItemsByContainer, activeContainer, activeItem, + disabled = false, }: Props) => { const sensors = useDndSensors(); @@ -81,7 +83,8 @@ const FunnelDnd = < return ( + id={containerId} + disabled={disabled}> {renderContainer( container, ); }} diff --git a/src/components/dnd/SortableDnd/SortableDnd.tsx b/src/components/dnd/SortableDnd/SortableDnd.tsx index b5016be..116d5a8 100644 --- a/src/components/dnd/SortableDnd/SortableDnd.tsx +++ b/src/components/dnd/SortableDnd/SortableDnd.tsx @@ -28,6 +28,7 @@ type Props = { onItemClick: (item: T) => void; rowStyle?: CSSProperties; itemStyle?: CSSProperties; + disabled?: boolean; }; const SortableDnd = ({ @@ -37,6 +38,7 @@ const SortableDnd = ({ onItemClick, rowStyle, itemStyle, + disabled = false, }: Props) => { const [active, setActive] = useState(null); const [items, setItems] = useState([]); @@ -95,7 +97,9 @@ const SortableDnd = ({ onDragStart={({ active }) => setActive(active)} onDragEnd={onDragEndLocal} onDragCancel={() => setActive(null)}> - + ({ + id={item.id} + disabled={disabled}> {renderItem(item)} diff --git a/src/components/dnd/SortableItem/SortableItem.tsx b/src/components/dnd/SortableItem/SortableItem.tsx index aa64746..84d6a3e 100644 --- a/src/components/dnd/SortableItem/SortableItem.tsx +++ b/src/components/dnd/SortableItem/SortableItem.tsx @@ -8,6 +8,7 @@ type Props = { id: number | string; itemStyle?: CSSProperties; dragHandleStyle?: CSSProperties; + disabled?: boolean; }; const SortableItem = ({ @@ -15,6 +16,7 @@ const SortableItem = ({ itemStyle, id, dragHandleStyle, + disabled, }: PropsWithChildren) => { const { attributes, @@ -24,7 +26,7 @@ const SortableItem = ({ setActivatorNodeRef, transform, transition, - } = useSortable({ id }); + } = useSortable({ id, disabled }); const context = useMemo( () => ({