From b1c7b5634ed582b4b3ffad6349b342e78fad7827 Mon Sep 17 00:00:00 2001 From: lisofffa Date: Thu, 19 Dec 2024 02:55:36 +0300 Subject: [PATCH] fix: update modals delete to overlay --- .../src/mini-overlay/overlay-wrapper.tsx | 41 +++++++++++-------- .../src/mini-overlay/pages/main.tsx | 7 +++- .../assets/styles-dropdown.tsx | 2 - .../multitable-panel/components/dropdown.tsx | 35 ++++------------ .../src/multitable-panel/index.tsx | 17 ++++++-- 5 files changed, 53 insertions(+), 49 deletions(-) diff --git a/libs/shared-components/src/mini-overlay/overlay-wrapper.tsx b/libs/shared-components/src/mini-overlay/overlay-wrapper.tsx index 81dd7f76..5c649501 100644 --- a/libs/shared-components/src/mini-overlay/overlay-wrapper.tsx +++ b/libs/shared-components/src/mini-overlay/overlay-wrapper.tsx @@ -6,14 +6,10 @@ import Header from './header' import Main from './pages/main' import Profile from './pages/profile' import { IWalletConnect } from './types' -import { - MemoryRouter, - Navigate, - NavigateFunction, - useLocation, - useNavigate, - Location, -} from 'react-router' +import { NavigateFunction, Location } from 'react-router' +import { ModalConfirmBackground } from '../multitable-panel/components/dropdown' +import { ModalDelete } from '../multitable-panel/components/modal-delete' +import { useDeleteLocalMutation, useMutableWeb } from '@mweb/engine' const { Title } = Typography const OverlayWrapperBlock = styled.div<{ $isApps: boolean }>` @@ -218,14 +214,11 @@ const OverlayWrapper: FC< const [isProfileOpen, openCloseProfile] = useState(false) const isMutationIconButton = !!connectWallet && !!disconnectWallet && !!nearNetwork const openCloseWalletPopupRef = useRef(null) - - const handleSignIn = async () => { - setWaiting(true) - try { - await connectWallet() - } finally { - setWaiting(false) - } + const { deleteLocalMutation } = useDeleteLocalMutation() + const { favoriteMutationId, setFavoriteMutation } = useMutableWeb() + const [mutationIdToDelete, setMutationIdToDelete] = useState(null) + const handleFavoriteButtonClick = (mutationId: string) => { + setFavoriteMutation(mutationId === favoriteMutationId ? null : mutationId) } return ( @@ -279,11 +272,27 @@ const OverlayWrapper: FC< handleMutateButtonClick={handleMutateButtonClick} onClose={onClose} connectWallet={connectWallet} + handleFavoriteButtonClick={handleFavoriteButtonClick} + setMutationIdToDelete={setMutationIdToDelete} /> ) : null} {location.pathname === '/system/profile' ? ( ) : null} + + {mutationIdToDelete && ( + + { + await deleteLocalMutation(mutationIdToDelete) + if (mutationIdToDelete === favoriteMutationId) + handleFavoriteButtonClick(mutationIdToDelete) + setMutationIdToDelete(null) + }} + onCloseCurrent={() => setMutationIdToDelete(null)} + /> + + )} diff --git a/libs/shared-components/src/mini-overlay/pages/main.tsx b/libs/shared-components/src/mini-overlay/pages/main.tsx index 33156b1f..71b501a8 100644 --- a/libs/shared-components/src/mini-overlay/pages/main.tsx +++ b/libs/shared-components/src/mini-overlay/pages/main.tsx @@ -18,6 +18,8 @@ export interface IMainProps { handleMutateButtonClick: () => void onClose: () => void connectWallet: () => Promise + handleFavoriteButtonClick: (mutationId: string) => void + setMutationIdToDelete: React.Dispatch> } const Main: FC = ({ loggedInAccountId, @@ -25,12 +27,15 @@ const Main: FC = ({ handleMutateButtonClick, onClose, connectWallet, + setMutationIdToDelete, + handleFavoriteButtonClick, }) => { return ( {loggedInAccountId ? ( diff --git a/libs/shared-components/src/multitable-panel/assets/styles-dropdown.tsx b/libs/shared-components/src/multitable-panel/assets/styles-dropdown.tsx index 548014e2..a5a08e71 100644 --- a/libs/shared-components/src/multitable-panel/assets/styles-dropdown.tsx +++ b/libs/shared-components/src/multitable-panel/assets/styles-dropdown.tsx @@ -108,7 +108,6 @@ export const ListMutations = styled.div` display: flex; flex-direction: column; gap: 3px; - z-index: 1; ` export const InputBlock = styled.div<{ isActive?: boolean }>` @@ -215,7 +214,6 @@ export const AvalibleMutations = styled.div` flex-direction: column; box-sizing: border-box; padding: 10px; - z-index: 1; .avalibleMutationsInput { background: rgba(248, 249, 255, 1); diff --git a/libs/shared-components/src/multitable-panel/components/dropdown.tsx b/libs/shared-components/src/multitable-panel/components/dropdown.tsx index 7f38169f..c64cb260 100644 --- a/libs/shared-components/src/multitable-panel/components/dropdown.tsx +++ b/libs/shared-components/src/multitable-panel/components/dropdown.tsx @@ -1,6 +1,6 @@ import { ArrowDownOutlined, DeleteOutlined } from '@ant-design/icons' import { EntitySourceType, MutationWithSettings } from '@mweb/backend' -import { useDeleteLocalMutation, useMutableWeb } from '@mweb/engine' +import { useMutableWeb } from '@mweb/engine' import React, { DetailedHTMLProps, FC, HTMLAttributes, useMemo, useState } from 'react' import styled from 'styled-components' import { @@ -32,9 +32,8 @@ import { } from '../assets/vectors' import { Badge } from './badge' import { Image } from './image' -import { ModalDelete } from './modal-delete' -const ModalConfirmBackground = styled.div` +export const ModalConfirmBackground = styled.div` position: absolute; display: flex; justify-content: center; @@ -51,21 +50,24 @@ const ModalConfirmBackground = styled.div` export type DropdownProps = DetailedHTMLProps, HTMLDivElement> & { onMutateButtonClick: () => void + handleFavoriteButtonClick: (mutationId: string) => void + setMutationIdToDelete: React.Dispatch> } -export const Dropdown: FC = ({ onMutateButtonClick }: DropdownProps) => { +export const Dropdown: FC = ({ + onMutateButtonClick, + handleFavoriteButtonClick, + setMutationIdToDelete, +}: DropdownProps) => { const { mutations, selectedMutation, favoriteMutationId, - setFavoriteMutation, switchMutation, getPreferredSource, removeMutationFromRecents, } = useMutableWeb() - const { deleteLocalMutation } = useDeleteLocalMutation() - const recentlyUsedMutations = useMemo( () => Object.groupBy( @@ -88,7 +90,6 @@ export const Dropdown: FC = ({ onMutateButtonClick }: DropdownPro const [isAccordeonExpanded, setIsAccordeonExpanded] = useState( Object.keys(recentlyUsedMutations).length === 0 ) - const [mutationIdToDelete, setMutationIdToDelete] = useState(null) const unusedMutations = useMemo( () => @@ -112,10 +113,6 @@ export const Dropdown: FC = ({ onMutateButtonClick }: DropdownPro onMutateButtonClick() } - const handleFavoriteButtonClick = (mutationId: string) => { - setFavoriteMutation(mutationId === favoriteMutationId ? null : mutationId) - } - const handleOriginalButtonClick = async () => { switchMutation(null) } @@ -282,20 +279,6 @@ export const Dropdown: FC = ({ onMutateButtonClick }: DropdownPro ) : null} - - {mutationIdToDelete && ( - - { - await deleteLocalMutation(mutationIdToDelete) - if (mutationIdToDelete === favoriteMutationId) - handleFavoriteButtonClick(mutationIdToDelete) - setMutationIdToDelete(null) - }} - onCloseCurrent={() => setMutationIdToDelete(null)} - /> - - )} ) diff --git a/libs/shared-components/src/multitable-panel/index.tsx b/libs/shared-components/src/multitable-panel/index.tsx index 01dc3908..2b09eef1 100644 --- a/libs/shared-components/src/multitable-panel/index.tsx +++ b/libs/shared-components/src/multitable-panel/index.tsx @@ -30,12 +30,17 @@ const Loader = () => ( ) const MultitablePanel: FC<{ - loggedInAccountId: string connectWallet: (() => Promise) | undefined handleMutateButtonClick: () => void -}> = ({ loggedInAccountId, connectWallet, handleMutateButtonClick }) => { + setMutationIdToDelete: React.Dispatch> + handleFavoriteButtonClick: (mutationId: string) => void +}> = ({ + connectWallet, + handleMutateButtonClick, + setMutationIdToDelete, + handleFavoriteButtonClick, +}) => { const [isWaiting, setWaiting] = useState(false) - const [isModalOpen, setIsModalOpen] = useState(false) const overlayRef = useRef(null) @@ -68,7 +73,11 @@ const MultitablePanel: FC<{ )} */} - + ) }