fix: upload layer incorrect
redesign https://github.com/toeverything/AFFiNE/pull/464
This commit is contained in:
lawvs
@@ -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,128 +130,126 @@ 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 : MESSAGES.ADD_AN_FILE}
|
||||||
{defaultAddBtnText
|
<span
|
||||||
? defaultAddBtnText
|
className="delete"
|
||||||
: MESSAGES.ADD_AN_FILE}
|
onClick={e => {
|
||||||
<span
|
e.stopPropagation();
|
||||||
className="delete"
|
deleteFile();
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<DeleteSweepOutlinedIcon
|
||||||
|
className="delete-icon"
|
||||||
|
fontSize="small"
|
||||||
|
sx={{
|
||||||
|
color: 'rgba(0,0,0,.5)',
|
||||||
|
cursor: 'pointer',
|
||||||
|
'&:hover': { color: 'rgba(0,0,0,.9)' },
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</UploadBox>
|
||||||
|
{open && (
|
||||||
|
<ClickAwayListener onClickAway={handleClickAway}>
|
||||||
|
<MuiPopper
|
||||||
|
open={open}
|
||||||
|
anchorEl={anchorEl}
|
||||||
onClick={e => {
|
onClick={e => {
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
deleteFile();
|
|
||||||
}}
|
}}
|
||||||
|
sx={styles}
|
||||||
>
|
>
|
||||||
<DeleteSweepOutlinedIcon
|
<Tabs
|
||||||
className="delete-icon"
|
|
||||||
fontSize="small"
|
|
||||||
sx={{
|
sx={{
|
||||||
color: 'rgba(0,0,0,.5)',
|
borderBottom: '1px solid #ccc',
|
||||||
cursor: 'pointer',
|
minHeight: '36px',
|
||||||
'&:hover': { color: 'rgba(0,0,0,.9)' },
|
|
||||||
}}
|
}}
|
||||||
/>
|
value={value}
|
||||||
</span>
|
onChange={handleChange}
|
||||||
</UploadBox>
|
|
||||||
{open && (
|
|
||||||
<ClickAwayListener onClickAway={handleClickAway}>
|
|
||||||
<Box
|
|
||||||
onClick={e => {
|
|
||||||
e.stopPropagation();
|
|
||||||
}}
|
|
||||||
sx={styles}
|
|
||||||
>
|
>
|
||||||
<Tabs
|
{['file', 'image'].includes(uploadType) ? (
|
||||||
sx={{
|
<Tab
|
||||||
borderBottom: '1px solid #ccc',
|
sx={{
|
||||||
minHeight: '36px',
|
fontSize: '12px',
|
||||||
}}
|
minHeight: '36px',
|
||||||
value={value}
|
}}
|
||||||
onChange={handleChange}
|
value="file"
|
||||||
>
|
label="Upload"
|
||||||
{['file', 'image'].includes(uploadType) ? (
|
/>
|
||||||
<Tab
|
|
||||||
sx={{
|
|
||||||
fontSize: '12px',
|
|
||||||
minHeight: '36px',
|
|
||||||
}}
|
|
||||||
value="file"
|
|
||||||
label="Upload"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
''
|
|
||||||
)}
|
|
||||||
{!['file', 'image'].includes(uploadType) ? (
|
|
||||||
<Tab
|
|
||||||
sx={{
|
|
||||||
fontSize: '12px',
|
|
||||||
minHeight: '36px',
|
|
||||||
}}
|
|
||||||
value="link"
|
|
||||||
label="Embed Link"
|
|
||||||
/>
|
|
||||||
) : (
|
|
||||||
''
|
|
||||||
)}
|
|
||||||
</Tabs>
|
|
||||||
|
|
||||||
{value === 'file' ? (
|
|
||||||
<Box sx={{ padding: '10px' }}>
|
|
||||||
<Button
|
|
||||||
variant="outlined"
|
|
||||||
sx={button_styles}
|
|
||||||
onClick={choose_file}
|
|
||||||
size="small"
|
|
||||||
>
|
|
||||||
{defaultAddBtnText
|
|
||||||
? defaultAddBtnText
|
|
||||||
: MESSAGES.ADD_AN_FILE}
|
|
||||||
</Button>
|
|
||||||
<input
|
|
||||||
ref={input_ref}
|
|
||||||
type="file"
|
|
||||||
style={{ display: 'none' }}
|
|
||||||
onChange={handle_input_change}
|
|
||||||
accept={accept}
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
) : (
|
) : (
|
||||||
<Box>
|
''
|
||||||
<Box
|
|
||||||
sx={{
|
|
||||||
'.MuiTextField-root': {
|
|
||||||
width: '100%',
|
|
||||||
},
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<TextField
|
|
||||||
value={upload_link}
|
|
||||||
hiddenLabel
|
|
||||||
margin={'dense'}
|
|
||||||
sx={{
|
|
||||||
fontSize: '12px',
|
|
||||||
padding: 0,
|
|
||||||
}}
|
|
||||||
onChange={on_link_input_change}
|
|
||||||
variant="outlined"
|
|
||||||
size="small"
|
|
||||||
/>
|
|
||||||
</Box>
|
|
||||||
<Button
|
|
||||||
variant="outlined"
|
|
||||||
sx={button_styles}
|
|
||||||
onClick={handle_sava_link}
|
|
||||||
size="small"
|
|
||||||
>
|
|
||||||
embed link
|
|
||||||
</Button>
|
|
||||||
</Box>
|
|
||||||
)}
|
)}
|
||||||
</Box>
|
{!['file', 'image'].includes(uploadType) ? (
|
||||||
</ClickAwayListener>
|
<Tab
|
||||||
)}
|
sx={{
|
||||||
</Box>
|
fontSize: '12px',
|
||||||
</div>
|
minHeight: '36px',
|
||||||
|
}}
|
||||||
|
value="link"
|
||||||
|
label="Embed Link"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
''
|
||||||
|
)}
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
|
{value === 'file' ? (
|
||||||
|
<Box sx={{ padding: '10px' }}>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
sx={button_styles}
|
||||||
|
onClick={choose_file}
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
{defaultAddBtnText
|
||||||
|
? defaultAddBtnText
|
||||||
|
: MESSAGES.ADD_AN_FILE}
|
||||||
|
</Button>
|
||||||
|
<input
|
||||||
|
ref={input_ref}
|
||||||
|
type="file"
|
||||||
|
style={{ display: 'none' }}
|
||||||
|
onChange={handle_input_change}
|
||||||
|
accept={accept}
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
) : (
|
||||||
|
<Box>
|
||||||
|
<Box
|
||||||
|
sx={{
|
||||||
|
'.MuiTextField-root': {
|
||||||
|
width: '100%',
|
||||||
|
},
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<TextField
|
||||||
|
value={upload_link}
|
||||||
|
hiddenLabel
|
||||||
|
margin={'dense'}
|
||||||
|
sx={{
|
||||||
|
fontSize: '12px',
|
||||||
|
padding: 0,
|
||||||
|
}}
|
||||||
|
onChange={on_link_input_change}
|
||||||
|
variant="outlined"
|
||||||
|
size="small"
|
||||||
|
/>
|
||||||
|
</Box>
|
||||||
|
<Button
|
||||||
|
variant="outlined"
|
||||||
|
sx={button_styles}
|
||||||
|
onClick={handle_sava_link}
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
embed link
|
||||||
|
</Button>
|
||||||
|
</Box>
|
||||||
|
)}
|
||||||
|
</MuiPopper>
|
||||||
|
</ClickAwayListener>
|
||||||
|
)}
|
||||||
|
</Box>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user