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

fix: upload layer incorrect

libs/components/editor-blocks/src/components/upload/upload.tsx

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