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

fix: upload layer incorrect

Browse Source 
redesign https://github.com/toeverything/AFFiNE/pull/464
This commit is contained in:
lawvs
2022-09-28 21:34:10 +08:00
parent a47913a9d8
commit b5898c2e67
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>
); );
}; };