From 40e94963fe04f85fbd44968d59e3cf300ac9a7ec Mon Sep 17 00:00:00 2001 From: BFlat Date: Mon, 30 Oct 2023 20:57:49 +0700 Subject: [PATCH] delete modal --- .../src/components/common/Modal/Modal.tsx | 73 +++++++++ .../src/components/common/Modal/index.tsx | 1 + .../fakeyou.com/src/scss/site-refresh.scss | 21 ++- .../voice_designer/VoiceDesignerMainPage.tsx | 138 +++++++++++------- .../VoiceDesignerVoiceEditPage.tsx | 41 +++++- .../components/ListItems/ListItems.tsx | 15 +- .../components/steps/VoiceDetails.tsx | 39 +---- 7 files changed, 222 insertions(+), 106 deletions(-) create mode 100644 packages/fakeyou.com/src/components/common/Modal/Modal.tsx create mode 100644 packages/fakeyou.com/src/components/common/Modal/index.tsx diff --git a/packages/fakeyou.com/src/components/common/Modal/Modal.tsx b/packages/fakeyou.com/src/components/common/Modal/Modal.tsx new file mode 100644 index 0000000000..dca971d30a --- /dev/null +++ b/packages/fakeyou.com/src/components/common/Modal/Modal.tsx @@ -0,0 +1,73 @@ +import React, { useRef, useEffect } from "react"; + +interface ModalProps { + show: boolean; + handleClose: () => void; + title: string; + content: React.ReactNode; +} + +const Modal: React.FC = ({ show, handleClose, title, content }) => { + const modalRef = useRef(null); + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if ( + modalRef.current && + !modalRef.current.contains(event.target as Node) + ) { + handleClose(); + } + }; + + // Attach the event listener to the document + document.addEventListener("mousedown", handleClickOutside); + + return () => { + // Clean up the event listener + document.removeEventListener("mousedown", handleClickOutside); + }; + }, [handleClose]); + + if (!show) { + return null; + } + + return ( +
+
+
+
+
+
{title}
+ +
+
{content}
+
+ +
+
+
+
+
+ ); +}; + +export default Modal; diff --git a/packages/fakeyou.com/src/components/common/Modal/index.tsx b/packages/fakeyou.com/src/components/common/Modal/index.tsx new file mode 100644 index 0000000000..09b91f72b9 --- /dev/null +++ b/packages/fakeyou.com/src/components/common/Modal/index.tsx @@ -0,0 +1 @@ +export { default } from "./Modal"; diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index 9449fd5457..e6fad548b9 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -842,6 +842,22 @@ styles with important tags: border-radius: 50px; } + .modal-backdrop { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: rgba(0, 0, 0, 0.5); /* Translucent black */ + display: flex; + justify-content: center; + align-items: center; + } + + .modal { + z-index: 1050; + } + .modal-content { background-color: $panel; border-color: lighten($panel, 8%) !important; @@ -850,17 +866,12 @@ styles with important tags: box-shadow: 0px 9px 33px 1px rgba(19, 19, 27, 0.8); -webkit-box-shadow: 0px 9px 33px 1px rgba(19, 19, 27, 0.8); -moz-box-shadow: 0px 9px 33px 1px rgba(19, 19, 27, 0.8); - min-height: 550px; } .modal-header { border-bottom: 1px solid lighten($panel, 8%); } - .modal-backdrop { - background-color: #0d0d14; - } - .modal-header .btn-close { filter: brightness(0) invert(1); } diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx index 8798c63e56..9ae88ad6fe 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerMainPage.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { faPlus, faWaveform } from "@fortawesome/pro-solid-svg-icons"; import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; import Panel from "components/common/Panel"; @@ -6,10 +6,21 @@ import PageHeader from "components/layout/PageHeader"; import Container from "components/common/Container"; import { Route, NavLink, Switch, Redirect } from "react-router-dom"; import ListItems from "./components/ListItems/ListItems"; +import Modal from "components/common/Modal"; function VoiceDesignerMainPage() { usePrefixedDocumentTitle("Voice Designer"); + const [isModalOpen, setIsModalOpen] = useState(false); + + const openModal = () => { + setIsModalOpen(true); + }; + + const closeModal = () => { + setIsModalOpen(false); + }; + const voicesList = [ { name: "Donald Trump (45th US President)", @@ -30,67 +41,84 @@ function VoiceDesignerMainPage() { const emptyList = [] as any[]; function MyVoices() { - return ; + return ( + + ); } function MyDatasets() { - return ; + return ( + + ); } return ( - - + + + + + + +
+ + + + + +
+ + + + This is a Bootstrap modal.

} /> - - - - -
- - - - - -
- - + ); } diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx index 8fc37a8026..0f76408868 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/VoiceDesignerVoiceEditPage.tsx @@ -1,21 +1,32 @@ import React from "react"; -import { faWaveform } from "@fortawesome/pro-solid-svg-icons"; +import { + faEye, + faLanguage, + faWaveform, +} from "@fortawesome/pro-solid-svg-icons"; import { usePrefixedDocumentTitle } from "common/UsePrefixedDocumentTitle"; import Panel from "components/common/Panel"; import PageHeader from "components/layout/PageHeader"; import Container from "components/common/Container"; -import { VoiceDetails } from "./components/steps/VoiceDetails"; +import Input from "components/common/Input"; +import Select from "components/common/Select"; +import { Button } from "components/common"; function VoiceDesignerVoiceEditPage() { usePrefixedDocumentTitle("Edit Voice"); + const dummyData = { + name: "Name", + visibility: "public", + language: "English", + }; + return ( - +
+
+ +
+ +
+ +
+ +
); diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/ListItems/ListItems.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/ListItems/ListItems.tsx index c322b9bcee..82a301ac8d 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/ListItems/ListItems.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/ListItems/ListItems.tsx @@ -7,9 +7,16 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; interface ListItemsProps { data: any[]; type: "voice" | "dataset"; + handleDeleteVoice?: () => void; + handleDeleteDataset?: () => void; } -export default function ListItems({ data, type }: ListItemsProps) { +export default function ListItems({ + data, + type, + handleDeleteDataset, + handleDeleteVoice, +}: ListItemsProps) { if (data.length === 0) { return (
@@ -93,10 +100,10 @@ export default function ListItems({ data, type }: ListItemsProps) { label="Delete" small={true} variant="danger" - to={ + onClick={ type === "dataset" - ? `/voice-designer/dataset/${item.modelToken}/delete` - : `/voice-designer/voice/${item.modelToken}/delete` + ? handleDeleteDataset + : handleDeleteVoice } /> {type === "voice" && ( diff --git a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/VoiceDetails.tsx b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/VoiceDetails.tsx index d97be7d509..f4848c8244 100644 --- a/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/VoiceDetails.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/voice_designer/components/steps/VoiceDetails.tsx @@ -26,46 +26,9 @@ export const SearchFieldClass = { state.isFocused ? "select-separator" : "select-separator", }; -interface VoiceDetailsProps { - view?: "voice" | "dataset"; -} - -function VoiceDetails({ view }: VoiceDetailsProps) { +function VoiceDetails() { const { name, visibility, setName, setVisibility } = useVoiceDetailsStore(); - if (view === "voice") { - return ( -
-
- -
- -
- setVisibility(e.target.value)} - icon={faEye} - label="Visibility" - /> -
- -
- ); - } - return (