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

Merge pull request #467 from toeverything/fix/upload-layer

Browse Source 
fix: upload layer incorrect
This commit is contained in:
DarkSky
2022-09-29 00:13:05 +08:00
committed by GitHub
parent a47913a9d8 b5898c2e67
commit d8f2a748fb
1 changed files with 124 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
libs/components/editor-blocks/src/components/upload/upload.tsx
View File

@@ -3,6 +3,7 @@ import {
MuiBox as Box, MuiBox as Box,
MuiButton as Button, MuiButton as Button,
MuiClickAwayListener as ClickAwayListener, MuiClickAwayListener as ClickAwayListener,
MuiPopper,
MuiTab as Tab, MuiTab as Tab,
MuiTabs as Tabs, MuiTabs as Tabs,
MuiTextField as TextField, MuiTextField as TextField,
@@ -15,6 +16,7 @@ import {
SyntheticEvent, SyntheticEvent,
useRef, useRef,
useState, useState,
type MouseEvent,
} from 'react'; } from 'react';
const MESSAGES = { const MESSAGES = {
@@ -36,11 +38,11 @@ interface Props {
} }
const styles: SxProps = { const styles: SxProps = {
position: 'absolute', position: 'absolute',
width: '70%', width: '600px',
// maxWidth:'100%', // maxWidth:'100%',
zIndex: 999, // The z-index of refPage is 200,
marginLeft: '50px', // so the z-index of upload need to be greater than it
p: 1, zIndex: 201,
bgcolor: 'background.paper', bgcolor: 'background.paper',
borderRadius: '4px', borderRadius: '4px',
textAlign: 'center', textAlign: 'center',
@@ -85,21 +87,22 @@ export const Upload = (props: Props) => {
} = props; } = props;
const input_ref = useRef<HTMLInputElement>(null); const input_ref = useRef<HTMLInputElement>(null);
const [upload_link, set_upload_link] = useState(''); const [upload_link, set_upload_link] = useState('');
const [open, setOpen] = useState<boolean>(firstCreate);
const type = ['file', 'image'].includes(uploadType) ? 'file' : 'link'; const type = ['file', 'image'].includes(uploadType) ? 'file' : 'link';
const [value, setValue] = useState(type); const [value, setValue] = useState(type);
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const open = Boolean(anchorEl);
const handleChange = (event: SyntheticEvent, newValue: string) => { const handleChange = (event: SyntheticEvent, newValue: string) => {
setValue(newValue); setValue(newValue);
}; };
const handleClick = () => { const handleClick = (event: MouseEvent<HTMLElement>) => {
setOpen(prev => !prev); setAnchorEl(anchorEl ? null : event.currentTarget);
}; };
const handleClickAway = () => { const handleClickAway = () => {
setOpen(false); setAnchorEl(null);
}; };
const choose_file = () => { const choose_file = () => {
if (input_ref.current) { if (input_ref.current) {
@@ -127,12 +130,9 @@ export const Upload = (props: Props) => {
savaLink(upload_link); savaLink(upload_link);
}; };
return ( return (
<div>
<Box sx={{ position: 'relative' }}> <Box sx={{ position: 'relative' }}>
<UploadBox onClick={handleClick} isSelected={isSelected}> <UploadBox onClick={handleClick} isSelected={isSelected}>
{defaultAddBtnText {defaultAddBtnText ? defaultAddBtnText : MESSAGES.ADD_AN_FILE}
? defaultAddBtnText
: MESSAGES.ADD_AN_FILE}
<span <span
className="delete" className="delete"
onClick={e => { onClick={e => {
@@ -153,7 +153,9 @@ export const Upload = (props: Props) => {
</UploadBox> </UploadBox>
{open && ( {open && (
<ClickAwayListener onClickAway={handleClickAway}> <ClickAwayListener onClickAway={handleClickAway}>
<Box <MuiPopper
open={open}
anchorEl={anchorEl}
onClick={e => { onClick={e => {
e.stopPropagation(); e.stopPropagation();
}} }}
@@ -245,10 +247,9 @@ export const Upload = (props: Props) => {
</Button> </Button>
</Box> </Box>
)} )}
</Box> </MuiPopper>
</ClickAwayListener> </ClickAwayListener>
)} )}
</Box> </Box>
</div>
); );
}; };