From 26188f208b19c91af6b51074059a244c4a83cbd2 Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com> Date: Thu, 16 May 2024 23:42:54 +0530 Subject: [PATCH] [WEB-1204] fix: Kanban and calendar drag and drop in mobile (#4408) * chore: don't show context menu on mobile devices * fix: drag and drop in mobile * chore: default show more options in mobile * fix: dnd in calendar layout --- packages/ui/src/control-link/control-link.tsx | 2 ++ .../ui/src/dropdowns/context-menu/root.tsx | 6 +++++- packages/ui/src/hooks/use-platform-os.ts | 15 ++++++++++++++ .../issue-layouts/calendar/issue-block.tsx | 9 +++++---- .../issues/issue-layouts/kanban/block.tsx | 7 +++++-- yarn.lock | 20 ++----------------- 6 files changed, 34 insertions(+), 25 deletions(-) create mode 100644 packages/ui/src/hooks/use-platform-os.ts diff --git a/packages/ui/src/control-link/control-link.tsx b/packages/ui/src/control-link/control-link.tsx index 8e0f73b70..61426e44b 100644 --- a/packages/ui/src/control-link/control-link.tsx +++ b/packages/ui/src/control-link/control-link.tsx @@ -38,3 +38,5 @@ export const ControlLink = React.forwardRef((pr ); }); + +ControlLink.displayName = "ControlLink"; diff --git a/packages/ui/src/dropdowns/context-menu/root.tsx b/packages/ui/src/dropdowns/context-menu/root.tsx index 47a52b8c2..bea6189de 100644 --- a/packages/ui/src/dropdowns/context-menu/root.tsx +++ b/packages/ui/src/dropdowns/context-menu/root.tsx @@ -6,6 +6,7 @@ import { ContextMenuItem } from "./item"; import { cn } from "../../../helpers"; // hooks import useOutsideClickDetector from "../../hooks/use-outside-click-detector"; +import { usePlatformOS } from "../../hooks/use-platform-os"; export type TContextMenuItem = { key: string; @@ -38,6 +39,7 @@ const ContextMenuWithoutPortal: React.FC = (props) => { const contextMenuRef = useRef(null); // derived values const renderedItems = items.filter((item) => item.shouldRender !== false); + const { isMobile } = usePlatformOS(); const handleClose = () => { setIsOpen(false); @@ -51,6 +53,8 @@ const ContextMenuWithoutPortal: React.FC = (props) => { if (!parentElement || !contextMenu) return; const handleContextMenu = (e: MouseEvent) => { + if (isMobile) return; + e.preventDefault(); e.stopPropagation(); @@ -83,7 +87,7 @@ const ContextMenuWithoutPortal: React.FC = (props) => { parentElement.removeEventListener("contextmenu", handleContextMenu); window.removeEventListener("keydown", hideContextMenu); }; - }, [contextMenuRef, isOpen, parentRef, setIsOpen, setPosition]); + }, [contextMenuRef, isMobile, isOpen, parentRef, setIsOpen, setPosition]); // handle keyboard navigation useEffect(() => { diff --git a/packages/ui/src/hooks/use-platform-os.ts b/packages/ui/src/hooks/use-platform-os.ts new file mode 100644 index 000000000..69297b33d --- /dev/null +++ b/packages/ui/src/hooks/use-platform-os.ts @@ -0,0 +1,15 @@ +import { useEffect, useState } from "react"; + +export const usePlatformOS = () => { + // states + const [isMobile, setIsMobile] = useState(false); + + useEffect(() => { + const userAgent = window.navigator.userAgent; + const isMobile = /iPhone|iPad|iPod|Android/i.test(userAgent); + + if (isMobile) setIsMobile(isMobile); + }, []); + + return { isMobile }; +}; diff --git a/web/components/issues/issue-layouts/calendar/issue-block.tsx b/web/components/issues/issue-layouts/calendar/issue-block.tsx index b9cf59d0a..4e6c322ef 100644 --- a/web/components/issues/issue-layouts/calendar/issue-block.tsx +++ b/web/components/issues/issue-layouts/calendar/issue-block.tsx @@ -71,7 +71,7 @@ export const CalendarIssueBlock = observer( target="_blank" onClick={() => handleIssuePeekOverview(issue)} className="block w-full text-sm text-custom-text-100 rounded border-b md:border-[1px] border-custom-border-200 hover:border-custom-border-400" - disabled={!!issue?.tempId} + disabled={!!issue?.tempId || isMobile} ref={ref} > <> @@ -105,9 +105,10 @@ export const CalendarIssueBlock = observer(
{ e.preventDefault(); e.stopPropagation(); diff --git a/web/components/issues/issue-layouts/kanban/block.tsx b/web/components/issues/issue-layouts/kanban/block.tsx index 0bdbab112..e40112a75 100644 --- a/web/components/issues/issue-layouts/kanban/block.tsx +++ b/web/components/issues/issue-layouts/kanban/block.tsx @@ -63,7 +63,9 @@ const KanbanIssueDetailsBlock: React.FC = observer((prop {getProjectIdentifierById(issue.project_id)}-{issue.sequence_id}
{quickActions({ @@ -116,6 +118,7 @@ export const KanbanIssueBlock: React.FC = observer((props) => { // hooks const { workspaceSlug } = useAppRouter(); const { getIsIssuePeeked, setPeekIssue } = useIssueDetail(); + const { isMobile } = usePlatformOS(); const handleIssuePeekOverview = (issue: TIssue) => workspaceSlug && @@ -210,7 +213,7 @@ export const KanbanIssueBlock: React.FC = observer((props) => { )} target="_blank" onClick={() => handleIssuePeekOverview(issue)} - disabled={!!issue?.tempId} + disabled={!!issue?.tempId || isMobile} >