From 7e0037b06bcfb6a661086d177ba92c27712db2af Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Mon, 25 Mar 2024 14:17:34 +0530 Subject: [PATCH] [WEB-823] fix: quick add flicker and dropdown placement in calendar layout (#4054) * chore: placement prop added in quick action menu * fix: calenar layout quick action menu placement * fix: calendar quick add flicker --- .../issue-layouts/calendar/base-calendar-root.tsx | 3 ++- .../issues/issue-layouts/calendar/calendar.tsx | 3 ++- .../issues/issue-layouts/calendar/day-tile.tsx | 3 ++- .../issues/issue-layouts/calendar/issue-block-root.tsx | 3 ++- .../issues/issue-layouts/calendar/issue-block.tsx | 10 ++++++++-- .../issues/issue-layouts/calendar/issue-blocks.tsx | 3 ++- .../issue-layouts/calendar/quick-add-issue-form.tsx | 2 +- .../issues/issue-layouts/calendar/week-days.tsx | 3 ++- .../issues/issue-layouts/list/list-view-types.d.ts | 2 ++ .../quick-action-dropdowns/cycle-issue.tsx | 3 ++- .../quick-action-dropdowns/module-issue.tsx | 3 ++- .../quick-action-dropdowns/project-issue.tsx | 3 ++- 12 files changed, 29 insertions(+), 12 deletions(-) diff --git a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx index a5f478746..9e54d2cf7 100644 --- a/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx +++ b/web/components/issues/issue-layouts/calendar/base-calendar-root.tsx @@ -89,7 +89,7 @@ export const BaseCalendarRoot = observer((props: IBaseCalendarRoot) => { groupedIssueIds={groupedIssueIds} layout={displayFilters?.calendar?.layout} showWeekends={displayFilters?.calendar?.show_weekends ?? false} - quickActions={(issue, customActionButton) => ( + quickActions={(issue, customActionButton, placement) => ( { handleArchive={async () => archiveIssue && archiveIssue(issue.project_id, issue.id)} handleRestore={async () => restoreIssue && restoreIssue(issue.project_id, issue.id)} readOnly={!isEditingAllowed || isCompletedCycle} + placements={placement} /> )} addIssuesToView={addIssuesToView} diff --git a/web/components/issues/issue-layouts/calendar/calendar.tsx b/web/components/issues/issue-layouts/calendar/calendar.tsx index 70efb6c46..8c6a7ebe9 100644 --- a/web/components/issues/issue-layouts/calendar/calendar.tsx +++ b/web/components/issues/issue-layouts/calendar/calendar.tsx @@ -1,4 +1,5 @@ import { useState } from "react"; +import { Placement } from "@popperjs/core"; import { observer } from "mobx-react-lite"; import type { IIssueDisplayFilterOptions, @@ -37,7 +38,7 @@ type Props = { groupedIssueIds: TGroupedIssues; layout: "month" | "week" | undefined; showWeekends: boolean; - quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode; + quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode; quickAddCallback?: ( workspaceSlug: string, projectId: string, diff --git a/web/components/issues/issue-layouts/calendar/day-tile.tsx b/web/components/issues/issue-layouts/calendar/day-tile.tsx index 8239458e0..ba4049888 100644 --- a/web/components/issues/issue-layouts/calendar/day-tile.tsx +++ b/web/components/issues/issue-layouts/calendar/day-tile.tsx @@ -1,4 +1,5 @@ import { Droppable } from "@hello-pangea/dnd"; +import { Placement } from "@popperjs/core"; import { observer } from "mobx-react-lite"; import { TGroupedIssues, TIssue, TIssueMap } from "@plane/types"; // components @@ -19,7 +20,7 @@ type Props = { date: ICalendarDate; issues: TIssueMap | undefined; groupedIssueIds: TGroupedIssues; - quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode; + quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode; enableQuickIssueCreate?: boolean; disableIssueCreation?: boolean; quickAddCallback?: ( diff --git a/web/components/issues/issue-layouts/calendar/issue-block-root.tsx b/web/components/issues/issue-layouts/calendar/issue-block-root.tsx index dacc3439b..f7fd7ab52 100644 --- a/web/components/issues/issue-layouts/calendar/issue-block-root.tsx +++ b/web/components/issues/issue-layouts/calendar/issue-block-root.tsx @@ -1,4 +1,5 @@ import React from "react"; +import { Placement } from "@popperjs/core"; // components import { TIssue, TIssueMap } from "@plane/types"; import { CalendarIssueBlock } from "@/components/issues"; @@ -7,7 +8,7 @@ import { CalendarIssueBlock } from "@/components/issues"; type Props = { issues: TIssueMap | undefined; issueId: string; - quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode; + quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode; isDragging?: boolean; }; diff --git a/web/components/issues/issue-layouts/calendar/issue-block.tsx b/web/components/issues/issue-layouts/calendar/issue-block.tsx index 7c72cca2e..713049ac3 100644 --- a/web/components/issues/issue-layouts/calendar/issue-block.tsx +++ b/web/components/issues/issue-layouts/calendar/issue-block.tsx @@ -1,4 +1,5 @@ import { useState, useRef } from "react"; +import { Placement } from "@popperjs/core"; import { observer } from "mobx-react"; import { MoreHorizontal } from "lucide-react"; import { TIssue } from "@plane/types"; @@ -14,7 +15,7 @@ import { usePlatformOS } from "@/hooks/use-platform-os"; type Props = { issue: TIssue; - quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode; + quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode; isDragging?: boolean; }; @@ -56,6 +57,11 @@ export const CalendarIssueBlock: React.FC = observer((props) => { ); + const isMenuActionRefAboveScreenBottom = + menuActionRef?.current && menuActionRef?.current?.getBoundingClientRect().bottom < window.innerHeight - 220; + + const placement = isMenuActionRefAboveScreenBottom ? "bottom-end" : "top-end"; + return ( = observer((props) => { e.stopPropagation(); }} > - {quickActions(issue, customActionButton)} + {quickActions(issue, customActionButton, placement)} diff --git a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx index 711639470..79cc84ecb 100644 --- a/web/components/issues/issue-layouts/calendar/issue-blocks.tsx +++ b/web/components/issues/issue-layouts/calendar/issue-blocks.tsx @@ -1,5 +1,6 @@ import { useState } from "react"; import { Draggable } from "@hello-pangea/dnd"; +import { Placement } from "@popperjs/core"; import { observer } from "mobx-react-lite"; import { TIssue, TIssueMap } from "@plane/types"; // components @@ -12,7 +13,7 @@ type Props = { date: Date; issues: TIssueMap | undefined; issueIdList: string[] | null; - quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode; + quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode; isDragDisabled?: boolean; enableQuickIssueCreate?: boolean; disableIssueCreation?: boolean; diff --git a/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx b/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx index 4bac9ff4f..7e17496d4 100644 --- a/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx +++ b/web/components/issues/issue-layouts/calendar/quick-add-issue-form.tsx @@ -230,7 +230,7 @@ export const CalendarQuickAddIssueForm: React.FC = observer((props) => { {!isOpen && (
diff --git a/web/components/issues/issue-layouts/calendar/week-days.tsx b/web/components/issues/issue-layouts/calendar/week-days.tsx index 765680827..429c237e2 100644 --- a/web/components/issues/issue-layouts/calendar/week-days.tsx +++ b/web/components/issues/issue-layouts/calendar/week-days.tsx @@ -1,3 +1,4 @@ +import { Placement } from "@popperjs/core"; import { observer } from "mobx-react-lite"; import { TGroupedIssues, TIssue, TIssueMap } from "@plane/types"; // components @@ -16,7 +17,7 @@ type Props = { issues: TIssueMap | undefined; groupedIssueIds: TGroupedIssues; week: ICalendarWeek | undefined; - quickActions: (issue: TIssue, customActionButton?: React.ReactElement) => React.ReactNode; + quickActions: (issue: TIssue, customActionButton?: React.ReactElement, placement?: Placement) => React.ReactNode; enableQuickIssueCreate?: boolean; disableIssueCreation?: boolean; quickAddCallback?: ( diff --git a/web/components/issues/issue-layouts/list/list-view-types.d.ts b/web/components/issues/issue-layouts/list/list-view-types.d.ts index f435d0639..f38f52b9c 100644 --- a/web/components/issues/issue-layouts/list/list-view-types.d.ts +++ b/web/components/issues/issue-layouts/list/list-view-types.d.ts @@ -1,3 +1,4 @@ +import { Placement } from "@popperjs/core"; import { TIssue } from "@plane/types"; export interface IQuickActionProps { @@ -10,4 +11,5 @@ export interface IQuickActionProps { customActionButton?: React.ReactElement; portalElement?: HTMLDivElement | null; readOnly?: boolean; + placements?: Placement; } diff --git a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx index d7ff21b84..eed0e0dc6 100644 --- a/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx +++ b/web/components/issues/issue-layouts/quick-action-dropdowns/cycle-issue.tsx @@ -31,6 +31,7 @@ export const CycleIssueQuickActions: React.FC = observer((pro customActionButton, portalElement, readOnly = false, + placements = "bottom-start", } = props; // states const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false); @@ -107,7 +108,7 @@ export const CycleIssueQuickActions: React.FC = observer((pro /> = observer((pr customActionButton, portalElement, readOnly = false, + placements = "bottom-start", } = props; // states const [createUpdateIssueModal, setCreateUpdateIssueModal] = useState(false); @@ -106,7 +107,7 @@ export const ModuleIssueQuickActions: React.FC = observer((pr /> = observer((p customActionButton, portalElement, readOnly = false, + placements = "bottom-start", } = props; // router const router = useRouter(); @@ -107,7 +108,7 @@ export const ProjectIssueQuickActions: React.FC = observer((p />