luulam/AFFiNE
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

chore: update modal

Browse Source
This commit is contained in:
lawvs
2022-08-04 16:24:52 +08:00
parent 0709b5557c
commit 93f7ebf5c9
1 changed files with 12 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
libs/components/editor-core/src/ref-page/ModalPage.tsx
View File

@@ -1,6 +1,7 @@
import { MuiBackdrop, styled, useTheme } from '@toeverything/components/ui'; import { MuiBackdrop, styled, useTheme } from '@toeverything/components/ui';
import { createContext, ReactNode, useContext, useState } from 'react'; import { createContext, ReactNode, useContext, useState } from 'react';
import { createPortal } from 'react-dom'; import { createPortal } from 'react-dom';
import { useEditor } from '../Contexts';
import { RenderBlock } from '../render-block'; import { RenderBlock } from '../render-block';
const Dialog = styled('div')({ const Dialog = styled('div')({
@@ -10,7 +11,7 @@ const Dialog = styled('div')({
background: '#fff', background: '#fff',
boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)', boxShadow: '0px 1px 10px rgba(152, 172, 189, 0.6)',
borderRadius: '10px', borderRadius: '10px',
padding: '40px 50px', padding: '72px 120px',
}); });
const Modal = ({ open, children }: { open: boolean; children?: ReactNode }) => { const Modal = ({ open, children }: { open: boolean; children?: ReactNode }) => {
@@ -40,18 +41,17 @@ const Modal = ({ open, children }: { open: boolean; children?: ReactNode }) => {
); );
}; };
const ModalPage = ({ blockId }: { blockId: string }) => { const ModalPage = ({ blockId }: { blockId: string | null }) => {
if (!blockId) { const { editor } = useEditor();
return null;
}
return ( return (
<Modal open={true}> <Modal open={!!blockId}>
<RenderBlock blockId={blockId} /> {blockId && <RenderBlock blockId={blockId} />}
</Modal> </Modal>
); );
}; };
const SubPageContext = createContext< const RefPageContext = createContext<
ReturnType<typeof useState<string | null>> | undefined ReturnType<typeof useState<string | null>> | undefined
>(undefined); >(undefined);
@@ -60,15 +60,15 @@ export const RefPageProvider = ({ children }: { children: ReactNode }) => {
const [blockId, setBlockId] = state; const [blockId, setBlockId] = state;
return ( return (
<SubPageContext.Provider value={state}> <RefPageContext.Provider value={state}>
{children} {children}
{blockId && <ModalPage blockId={blockId} />} <ModalPage blockId={blockId ?? null} />
</SubPageContext.Provider> </RefPageContext.Provider>
); );
}; };
export const useRefPage = () => { export const useRefPage = () => {
const context = useContext(SubPageContext); const context = useContext(RefPageContext);
if (!context) { if (!context) {
throw new Error( throw new Error(
'Wrap your app inside of a `SubPageProvider` to have access to the hook context!' 'Wrap your app inside of a `SubPageProvider` to have access to the hook context!'