mirror/plane
1
0
Fork 0
mirror of https://github.com/makeplane/plane.git synced 2026-02-08 23:19:22 -06:00
Code Issues Packages Projects Releases Wiki Activity

[WEB-4041] chore: modal outside click behaviour #7072

Browse Source
This commit is contained in:
Anmol Singh Bhatia
2025-05-18 15:18:09 +05:30
committed by GitHub
parent 5b776392bd
commit 6c483fad2f
7 changed files with 41 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
web/core/components/cycles/modal.tsx
View File

@@ -13,6 +13,7 @@ import { CycleForm } from "@/components/cycles";
// constants
// hooks
import { useEventTracker, useCycle, useProject } from "@/hooks/store";
import useKeypress from "@/hooks/use-keypress";
import useLocalStorage from "@/hooks/use-local-storage";
import { usePlatformOS } from "@/hooks/use-platform-os";
// services
@@ -180,8 +181,12 @@ export const CycleCreateUpdateModal: React.FC<CycleModalProps> = (props) => {
setActiveProject(projectId ?? workspaceProjectIds?.[0] ?? null);
}, [activeProject, data, projectId, workspaceProjectIds, isOpen]);
useKeypress("Escape", () => {
if (isOpen) handleClose();
});
return (
<ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
<ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
<CycleForm
handleFormSubmit={handleFormSubmit}
handleClose={handleClose}

13
web/core/components/inbox/modals/create-modal/modal.tsx
View File

@@ -5,6 +5,8 @@ import { FC, useState } from "react";
import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
// components
import { InboxIssueCreateRoot } from "@/components/inbox/modals/create-modal";
// hooks
import useKeypress from "@/hooks/use-keypress";
type TInboxIssueCreateModalRoot = {
workspaceSlug: string;
@@ -20,13 +22,16 @@ export const InboxIssueCreateModalRoot: FC<TInboxIssueCreateModalRoot> = (props)
// handlers
const handleDuplicateIssueModal = (value: boolean) => setIsDuplicateModalOpen(value);
useKeypress("Escape", () => {
if (modalState) {
handleModalClose();
setIsDuplicateModalOpen(false);
}
});
return (
<ModalCore
isOpen={modalState}
handleClose={() => {
handleModalClose();
setIsDuplicateModalOpen(false);
}}
position={EModalPosition.TOP}
width={isDuplicateModalOpen ? EModalWidth.VIXL : EModalWidth.XXXXL}
className="!bg-transparent rounded-lg shadow-none transition-[width] ease-linear"

1
web/core/components/issues/issue-modal/base.tsx
View File

@@ -375,7 +375,6 @@ export const CreateUpdateIssueModalBase: React.FC<IssuesModalProps> = observer((
return (
<ModalCore
isOpen={isOpen}
handleClose={() => handleClose(true)}
position={EModalPosition.TOP}
width={isDuplicateModalOpen ? EModalWidth.VIXL : EModalWidth.XXXXL}
className="!bg-transparent rounded-lg shadow-none transition-[width] ease-linear"

7
web/core/components/modules/modal.tsx
View File

@@ -13,6 +13,7 @@ import { ModuleForm } from "@/components/modules";
// constants
// hooks
import { useEventTracker, useModule, useProject } from "@/hooks/store";
import useKeypress from "@/hooks/use-keypress";
import { usePlatformOS } from "@/hooks/use-platform-os";
type Props = {
@@ -142,8 +143,12 @@ export const CreateUpdateModuleModal: React.FC<Props> = observer((props) => {
setActiveProject(projectId ?? workspaceProjectIds?.[0] ?? null);
}, [activeProject, data, projectId, workspaceProjectIds, isOpen]);
useKeypress("Escape", () => {
if (isOpen) handleClose();
});
return (
<ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
<ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
<ModuleForm
handleFormSubmit={handleFormSubmit}
handleClose={handleClose}

8
web/core/components/project/create-project-modal.tsx
View File

@@ -4,6 +4,8 @@ import { EModalPosition, EModalWidth, ModalCore } from "@plane/ui";
// helpers
import { getAssetIdFromUrl } from "@/helpers/file.helper";
import { checkURLValidity } from "@/helpers/string.helper";
// hooks
import useKeypress from "@/hooks/use-keypress";
// plane web components
import { CreateProjectForm } from "@/plane-web/components/projects/create/root";
// plane web types
@@ -54,8 +56,12 @@ export const CreateProjectModal: FC<Props> = (props) => {
}
};
useKeypress("Escape", () => {
if (isOpen) onClose();
});
return (
<ModalCore isOpen={isOpen} handleClose={onClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
<ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
{currentStep === EProjectCreationSteps.CREATE_PROJECT && (
<CreateProjectForm
setToFavorite={setToFavorite}

7
web/core/components/views/modal.tsx
View File

@@ -10,6 +10,7 @@ import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@p
import { ProjectViewForm } from "@/components/views";
// hooks
import { useProjectView } from "@/hooks/store";
import useKeypress from "@/hooks/use-keypress";
type Props = {
data?: IProjectView | null;
@@ -65,8 +66,12 @@ export const CreateUpdateProjectViewModal: FC<Props> = observer((props) => {
else await handleUpdateView(formData);
};
useKeypress("Escape", () => {
if (isOpen) handleClose();
});
return (
<ModalCore isOpen={isOpen} handleClose={handleClose} position={EModalPosition.TOP} width={EModalWidth.XXL}>
<ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL}>
<ProjectViewForm
data={data}
handleClose={handleClose}

16
web/core/components/web-hooks/create-webhook-modal.tsx
View File

@@ -9,6 +9,8 @@ import { IWebhook, IWorkspace, TWebhookEventTypes } from "@plane/types";
import { EModalPosition, EModalWidth, ModalCore, TOAST_TYPE, setToast } from "@plane/ui";
// helpers
import { csvDownload } from "@/helpers/download.helper";
// hooks
import useKeypress from "@/hooks/use-keypress";
// components
import { WebhookForm } from "./form";
import { GeneratedHookDetails } from "./generated-hook-details";
@@ -93,16 +95,12 @@ export const CreateWebhookModal: React.FC<ICreateWebhookModal> = (props) => {
}, 350);
};
useKeypress("Escape", () => {
if (isOpen && !generatedWebhook) handleClose();
});
return (
<ModalCore
isOpen={isOpen}
handleClose={() => {
if (!generatedWebhook) handleClose();
}}
position={EModalPosition.TOP}
width={EModalWidth.XXL}
className="p-4 pb-0"
>
<ModalCore isOpen={isOpen} position={EModalPosition.TOP} width={EModalWidth.XXL} className="p-4 pb-0">
{!generatedWebhook ? (
<WebhookForm onSubmit={handleCreateWebhook} handleClose={handleClose} />
) : (