fix bug where menu doesn't close when file explorer items are clicked

pull/3023/head
Joseph Izang 2 years ago committed by Aniket
parent 440526a0a5
commit a2e3077dc7
  1. 2
      libs/remix-ui/workspace/src/lib/components/file-explorer.tsx
  2. 4
      libs/remix-ui/workspace/src/lib/components/file-render.tsx
  3. 11
      libs/remix-ui/workspace/src/lib/css/remix-ui-workspace.css
  4. 9
      libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx
  5. 2
      libs/remix-ui/workspace/src/lib/types/index.ts

@ -460,6 +460,8 @@ export const FileExplorer = (props: FileExplorerProps) => {
handleClickFolder={handleClickFolder}
handleContextMenu={handleContextMenu}
key={index}
showIconsMenu={props.showIconsMenu}
hideIconsMenu={props.hideIconsMenu}
/>)
}

@ -20,6 +20,8 @@ export interface RenderFileProps {
focusContext: { element: string, x: number, y: number, type: string },
ctrlKey: boolean,
expandPath: string[],
hideIconsMenu?: React.Dispatch<React.SetStateAction<boolean>>,
showIconsMenu?: boolean,
editModeOff: (content: string) => void,
handleClickFolder: (path: string, type: string) => void,
handleClickFile: (path: string, type: string) => void,
@ -52,11 +54,13 @@ export const FileRender = (props: RenderFileProps) => {
const handleFolderClick = (event: SyntheticEvent) => {
event.stopPropagation()
if (props.focusEdit.element !== file.path) props.handleClickFolder(file.path, file.type)
props.hideIconsMenu(!props.showIconsMenu)
}
const handleFileClick = (event: SyntheticEvent) => {
event.stopPropagation()
if (props.focusEdit.element !== file.path) props.handleClickFile(file.path, file.type)
props.hideIconsMenu(!props.showIconsMenu)
}
const handleContextMenu = (event: PointerEvent) => {

@ -110,17 +110,6 @@
width: 8rem;
}
.remixui_menuhr {
}
.remixui_menuhr:focus,
.remixui_menuhr:hover {
color: var(--custom-select) !important;
text-decoration: none;
background-color: var(--custom-select) !important;
}
#workspacesMenuDropdown > div.custom-dropdown-items {
min-width: 8rem;
}

@ -391,6 +391,7 @@ export function Workspace () {
<span className="pl-3">{'Rename'}</span>
</div>
</OverlayTrigger>,
<Dropdown.Divider className="border dro pdown-hr" />,
<OverlayTrigger
placement="right-start"
overlay={
@ -424,7 +425,7 @@ export function Workspace () {
<span className="pl-3">{'Clone'}</span>
</div>
</OverlayTrigger>,
<hr className="border mt-0 mb-0 remixui_menuhr" style={{ pointerEvents: 'none' }}/>,
<Dropdown.Divider className="border mt-0 mb-0 remixui_menuhr" style={{ pointerEvents: 'none' }}/>,
<OverlayTrigger
placement="right-start"
overlay={
@ -536,7 +537,7 @@ export function Workspace () {
}}
icon={'fas fa-bars'}
></Dropdown.Toggle>
<Dropdown.Menu as={CustomMenu} data-id="wsdropdownMenu" className='custom-dropdown-items remixui_menuwidth' align={'right'}>
<Dropdown.Menu as={CustomMenu} data-id="wsdropdownMenu" className='custom-dropdown-items remixui_menuwidth' rootCloseEvent="click">
{
workspaceMenuIcons.map(m => {
return (
@ -608,6 +609,8 @@ export function Workspace () {
expandPath={global.fs.browser.expandPath}
focusEdit={global.fs.focusEdit}
focusElement={global.fs.focusElement}
hideIconsMenu={hideIconsMenu}
showIconsMenu={showIconsMenu}
dispatchCreateNewFile={global.dispatchCreateNewFile}
modal={global.modal}
dispatchCreateNewFolder={global.dispatchCreateNewFolder}
@ -645,6 +648,8 @@ export function Workspace () {
expandPath={global.fs.localhost.expandPath}
focusEdit={global.fs.focusEdit}
focusElement={global.fs.focusElement}
hideIconsMenu={hideIconsMenu}
showIconsMenu={showIconsMenu}
dispatchCreateNewFile={global.dispatchCreateNewFile}
modal={global.modal}
dispatchCreateNewFolder={global.dispatchCreateNewFolder}

@ -77,6 +77,8 @@ export interface FileExplorerProps {
fileState: fileDecoration[],
expandPath: string[],
focusEdit: string,
hideIconsMenu: React.Dispatch<React.SetStateAction<boolean>>,
showIconsMenu: boolean,
focusElement: { key: string, type: 'file' | 'folder' | 'gist' }[],
dispatchCreateNewFile: (path: string, rootDir: string) => Promise<void>,
// eslint-disable-next-line no-undef

Loading…
Cancel
Save