Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix context menu flash in Firefox #2152

Merged
merged 2 commits into from
May 25, 2022
Merged

Fix context menu flash in Firefox #2152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7c76334
some more fixes
Tbaut May 25, 2022
a118ade
cut the needless noise
Tbaut May 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 13 additions & 23 deletions packages/files-ui/src/Components/Modules/FileBrowsers/views/FilesList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ import { useFilesApi } from "../../../../Contexts/FilesApiContext"
import RestrictedModeBanner from "../../../Elements/RestrictedModeBanner"
import { DragTypes } from "../DragConstants"
import FolderBreadcrumb from "./FolderBreadcrumb"
import AnchorMenu from "../../../../UI-components/AnchorMenu"
import AnchorMenu, { AnchoreMenuPosition } from "../../../../UI-components/AnchorMenu"
import { getItemMenuOptions } from "./FileSystemItem/itemOperations"
import { getPathWithFile } from "../../../../Utils/pathUtils"

Expand Down Expand Up @@ -348,11 +348,6 @@ interface Props {
isShared?: boolean
}

type ContextMenuPosition = {
mouseX: number
mouseY: number
}

type SortByType = "name" | "size" | "date_uploaded"
// Sorting
const sortFoldersFirst = (a: FileSystemItemType, b: FileSystemItemType) =>
Expand Down Expand Up @@ -401,6 +396,7 @@ const FilesList = ({ isShared = false }: Props) => {
const { permission } = bucket || {}
const { hasSeenSharingExplainerModal, hideModal } = useSharingExplainerModalFlag()
const [hasClickedShare, setClickedShare] = useState(false)
const [contextMenuPosition, setContextMenuPosition] = useState<AnchoreMenuPosition | null>(null)
const showExplainerBeforeShare = useMemo(() =>
!hasSeenSharingExplainerModal && hasClickedShare
, [hasClickedShare, hasSeenSharingExplainerModal]
Expand Down Expand Up @@ -912,16 +908,14 @@ const FilesList = ({ isShared = false }: Props) => {
selectionContainsAFolder
])

const [contextMenuPosition, setContextMenuPosition] = useState<ContextMenuPosition | null>(null)

const handleContextMenuOnBrowser = useCallback((e: React.MouseEvent) => {
if (!controls) return
e.preventDefault()
// reset selected files if context menu was open
setSelectedItems([])
setContextMenuPosition({
mouseX: e.clientX - 2,
mouseY: e.clientY - 4
left: e.clientX - 2,
top: e.clientY - 4
})
}, [controls])

Expand All @@ -933,8 +927,8 @@ const FilesList = ({ isShared = false }: Props) => {
setSelectedItems([item])
}
setContextMenuPosition({
mouseX: e.clientX - 2,
mouseY: e.clientY - 4
left: e.clientX - 2,
top: e.clientY - 4
})
}, [selectedItems])

Expand Down Expand Up @@ -990,11 +984,6 @@ const FilesList = ({ isShared = false }: Props) => {
bulkActions
])

const anchorPosition = useMemo(() => contextMenuPosition
? { top: contextMenuPosition.mouseY, left: contextMenuPosition.mouseX }
: undefined
, [contextMenuPosition])

return (
<article
className={clsx(classes.root, {
Expand All @@ -1016,12 +1005,13 @@ const FilesList = ({ isShared = false }: Props) => {
<Trans>Drop to upload files</Trans>
</Typography>
</div>
<AnchorMenu
options={contextMenuOptions}
onClose={() => setContextMenuPosition(null)}
isOpen={!!contextMenuPosition}
anchorPosition={anchorPosition}
/>
{contextMenuPosition && (
<AnchorMenu
options={contextMenuOptions}
onClose={() => setContextMenuPosition(null)}
anchorPosition={contextMenuPosition}
/>
)}
<DragPreviewLayer
items={sourceFiles}
previewType={browserView}
Expand Down
37 changes: 16 additions & 21 deletions packages/files-ui/src/UI-components/AnchorMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import React, { ReactNode, useEffect, useMemo, useRef } from "react"
import React, { ReactNode, useCallback, useEffect, useMemo, useRef } from "react"
import { MenuItem, Paper, PopoverPosition } from "@material-ui/core"
import { makeStyles, createStyles, useOnClickOutside } from "@chainsafe/common-theme"
import clsx from "clsx"
import { CSFTheme } from "../Themes/types"

export type AnchoreMenuPosition = PopoverPosition;

interface Option {
contents: ReactNode
inset?: boolean
Expand All @@ -12,9 +14,8 @@ interface Option {
}

interface Props {
isOpen: boolean
options: Option[]
anchorPosition?: PopoverPosition
anchorPosition?: AnchoreMenuPosition
onClose: () => void
}

Expand All @@ -35,13 +36,7 @@ const useStyles = makeStyles(({ constants, zIndex, animation }: CSFTheme) => {
bottom: styleProps?.bottom,
right: styleProps?.right,
zIndex: zIndex?.blocker,
visibility: "hidden",
opacity: 0,
transition: `opacity ${animation.transform * 2}ms`,
"&.open": {
visibility: "visible",
opacity: 1
}
transition: `opacity ${animation.transform * 2}ms`
}),
paper: {
padding: `${constants.generalUnit}px 0`,
Expand All @@ -58,9 +53,9 @@ const useStyles = makeStyles(({ constants, zIndex, animation }: CSFTheme) => {
const MENU_RIGHT_SPACE_TOLERANCE = 180
const MENU_BOTTOM_SPACE_TOLERANCE = 250

export default function MenuDropdown({ isOpen, options, anchorPosition, onClose }: Props) {
export default function MenuDropdown({ options, anchorPosition, onClose }: Props) {
const position = useMemo(() => {
if (!anchorPosition || !isOpen) return
if (!anchorPosition) return

const windowHeight = window.innerHeight
const windowWidth = window.innerWidth
Expand All @@ -78,26 +73,26 @@ export default function MenuDropdown({ isOpen, options, anchorPosition, onClose
position.right = windowWidth - anchorPosition.left
}
return position
}, [anchorPosition, isOpen])
}, [anchorPosition])

const onCloseMenu = useCallback(() => {
document.body.style.overflowY = "scroll"
onClose()
}, [onClose])
const classes = useStyles(position)

const ref = useRef<HTMLDivElement>(null)
useOnClickOutside(ref, onClose)
useOnClickOutside(ref, onCloseMenu)

useEffect(() => {
if (isOpen) {
document.body.style.overflowY = "hidden"
} else {
document.body.style.overflowY = "scroll"
}
}, [isOpen])
document.body.style.overflowY = "hidden"
}, [])

if (!position) return null

return (
<div
className={clsx(classes.anchorRoot, "open")}
className={clsx(classes.anchorRoot)}
ref={ref}
>
<Paper className={classes.paper}>
Expand Down
42 changes: 15 additions & 27 deletions packages/storage-ui/src/Components/Modules/FilesList/FilesList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ import FolderBreadcrumb from "./FolderBreadcrumb"
import { DragTypes } from "./DragConstants"
import { getPathWithFile } from "../../../Utils/pathUtils"
import { getItemMenuOptions } from "../FileSystemItem/itemOperations"
import AnchorMenu from "../../UI-components/AnchorMenu"
import AnchorMenu, { AnchoreMenuPosition } from "../../UI-components/AnchorMenu"

interface IStyleProps {
themeKey: string
Expand Down Expand Up @@ -323,11 +323,6 @@ const useStyles = makeStyles(
}
)

type ContextMenuPosition = {
mouseX: number
mouseY: number
}

// Sorting
const sortFoldersFirst = (a: FileSystemItemType, b: FileSystemItemType) =>
a.isFolder && a.content_type !== b.content_type ? -1 : 1
Expand Down Expand Up @@ -366,6 +361,7 @@ const FilesList = () => {
const { selectedLocale } = useLanguageContext()
const { redirect } = useHistory()
const [isSurveyBannerVisible, setIsSurveyBannerVisible] = useState(true)
const [contextMenuPosition, setContextMenuPosition] = useState<AnchoreMenuPosition | null>(null)

const items: FileSystemItemType[] = useMemo(() => {
let temp = []
Expand Down Expand Up @@ -554,9 +550,7 @@ const FilesList = () => {
const [isMoveFileModalOpen, setIsMoveFileModalOpen] = useState(false)
const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false)
const [isDeletingFiles, setIsDeletingFiles] = useState(false)
const [, setFileInfoPath] = useState<string | undefined>(
undefined
)
const [, setFileInfoPath] = useState<string | undefined>(undefined)
const [moveModalMode, setMoveModalMode] = useState<MoveModalMode | undefined>()

const [browserView, setBrowserView] = useState<BrowserView>("table")
Expand Down Expand Up @@ -778,16 +772,14 @@ const FilesList = () => {
handleOpenMoveFileDialog
])

const [contextMenuPosition, setContextMenuPosition] = useState<ContextMenuPosition | null>(null)

const handleContextMenuOnBrowser = useCallback((e: React.MouseEvent) => {
if (!controls) return
e.preventDefault()
// reset selected files if context menu was open
setSelectedCids([])
setContextMenuPosition({
mouseX: e.clientX - 2,
mouseY: e.clientY - 4
left: e.clientX - 2,
top: e.clientY - 4
})
}, [controls])

Expand All @@ -799,14 +791,14 @@ const FilesList = () => {
setSelectedCids([item])
}
setContextMenuPosition({
mouseX: e.clientX - 2,
mouseY: e.clientY - 4
left: e.clientX - 2,
top: e.clientY - 4
})
}, [selectedItems])

const itemFunctions = useMemo(() => ({
deleteFile: onDeleteFile,
downloadFile: downloadFile,
downloadFile,
moveFile: onMoveFile,
viewFolder: handleViewFolder,
showFileInfo: onShowFileInfo,
Expand Down Expand Up @@ -846,11 +838,6 @@ const FilesList = () => {
bulkActions
])

const anchorPosition = useMemo(() => contextMenuPosition
? { top: contextMenuPosition.mouseY, left: contextMenuPosition.mouseX
} : undefined,
[contextMenuPosition])

return (
<article
className={clsx(classes.root, {
Expand All @@ -870,12 +857,13 @@ const FilesList = () => {
<Trans>Drop to upload files</Trans>
</Typography>
</div>
<AnchorMenu
options={contextMenuOptions}
onClose={() => setContextMenuPosition(null)}
isOpen={!!contextMenuPosition}
anchorPosition={anchorPosition}
/>
{contextMenuPosition && (
<AnchorMenu
options={contextMenuOptions}
onClose={() => setContextMenuPosition(null)}
anchorPosition={contextMenuPosition}
/>
)}
<DragPreviewLayer
items={sourceFiles}
previewType={browserView}
Expand Down
37 changes: 16 additions & 21 deletions packages/storage-ui/src/Components/UI-components/AnchorMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import React, { ReactNode, useEffect, useMemo, useRef } from "react"
import React, { ReactNode, useCallback, useEffect, useMemo, useRef } from "react"
import { MenuItem, Paper, PopoverPosition } from "@material-ui/core"
import { makeStyles, createStyles, useOnClickOutside } from "@chainsafe/common-theme"
import clsx from "clsx"
import { CSSTheme } from "../../Themes/types"

export type AnchoreMenuPosition = PopoverPosition;

interface Option {
contents: ReactNode
inset?: boolean
Expand All @@ -12,9 +14,8 @@ interface Option {
}

interface Props {
isOpen: boolean
options: Option[]
anchorPosition?: PopoverPosition
anchorPosition?: AnchoreMenuPosition
onClose: () => void
}

Expand All @@ -35,13 +36,7 @@ const useStyles = makeStyles(({ constants, zIndex, animation }: CSSTheme) => {
bottom: styleProps?.bottom,
right: styleProps?.right,
zIndex: zIndex?.blocker,
visibility: "hidden",
opacity: 0,
transition: `opacity ${animation.transform * 2}ms`,
"&.open": {
visibility: "visible",
opacity: 1
}
transition: `opacity ${animation.transform * 2}ms`
}),
paper: {
padding: `${constants.generalUnit}px 0`,
Expand All @@ -58,9 +53,9 @@ const useStyles = makeStyles(({ constants, zIndex, animation }: CSSTheme) => {
const MENU_RIGHT_SPACE_TOLERANCE = 180
const MENU_BOTTOM_SPACE_TOLERANCE = 250

export default function MenuDropdown({ isOpen, options, anchorPosition, onClose }: Props) {
export default function MenuDropdown({ options, anchorPosition, onClose }: Props) {
const position = useMemo(() => {
if (!anchorPosition || !isOpen) return
if (!anchorPosition) return

const windowHeight = window.innerHeight
const windowWidth = window.innerWidth
Expand All @@ -78,26 +73,26 @@ export default function MenuDropdown({ isOpen, options, anchorPosition, onClose
position.right = windowWidth - anchorPosition.left
}
return position
}, [anchorPosition, isOpen])
}, [anchorPosition])

const onCloseMenu = useCallback(() => {
document.body.style.overflowY = "scroll"
onClose()
}, [onClose])
const classes = useStyles(position)

const ref = useRef<HTMLDivElement>(null)
useOnClickOutside(ref, onClose)
useOnClickOutside(ref, onCloseMenu)

useEffect(() => {
if (isOpen) {
document.body.style.overflowY = "hidden"
} else {
document.body.style.overflowY = "scroll"
}
}, [isOpen])
document.body.style.overflowY = "hidden"
}, [])

if (!position) return null

return (
<div
className={clsx(classes.anchorRoot, "open")}
className={clsx(classes.anchorRoot)}
ref={ref}
>
<Paper className={classes.paper}>
Expand Down