fix missing tooltip on upload icon

pull/3008/head
Joseph Izang 2 years ago
parent 4fa6248a18
commit 8c409e0c73
  1. 49
      libs/remix-ui/workspace/src/lib/components/file-explorer-menu.tsx

@ -29,7 +29,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
action: 'uploadFile', action: 'uploadFile',
title: 'Load a local file into current workspace', title: 'Load a local file into current workspace',
icon: 'fa fa-upload', icon: 'fa fa-upload',
placement: 'bottom-start' placement: 'right'
}, },
{ {
action: 'updateGist', action: 'updateGist',
@ -53,24 +53,42 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
return ( return (
<> <>
<span className='remixui_label' title={props.title} data-path={props.title} style={{ fontWeight: 'bold' }}>{ props.title }</span> <OverlayTrigger
placement="top-start"
overlay={
<Tooltip id="remixuilabelTooltip" className="text-nowrap">
<span>{props.title}</span>
</Tooltip>
}
>
<span className='remixui_label' data-path={props.title} style={{ fontWeight: 'bold' }}>{ props.title }</span>
</OverlayTrigger>
<span className="pl-2">{ <span className="pl-2">{
state.menuItems.map(({ action, title, icon, placement }, index) => { state.menuItems.map(({ action, title, icon, placement }, index) => {
if (action === 'uploadFile') { if (action === 'uploadFile') {
return ( return (
<label <OverlayTrigger
id={action} placement="right"
data-id={'fileExplorerUploadFile' + action } overlay={
className={icon + ' mb-0 remixui_newFile'} <Tooltip id="uploadFileTooltip" className="text-nowrap">
key={index} <span>{title}</span>
</Tooltip>
}
> >
<input id="fileUpload" data-id="fileExplorerFileUpload" type="file" onChange={(e) => { <label
e.stopPropagation() id={action}
props.uploadFile(e.target) data-id={'fileExplorerUploadFile' + action }
e.target.value = null className={icon + ' mb-0 remixui_newFile'}
}} key={index}
multiple /> >
</label> <input id="fileUpload" data-id="fileExplorerFileUpload" type="file" onChange={(e) => {
e.stopPropagation()
props.uploadFile(e.target)
e.target.value = null
}}
multiple />
</label>
</OverlayTrigger>
) )
} else { } else {
return ( return (
@ -81,7 +99,6 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
<span>{title}</span> <span>{title}</span>
</Tooltip> </Tooltip>
} }
key={`${action}-${title}-${index}`}
> >
<span <span
id={action} id={action}
@ -100,7 +117,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
} }
}} }}
className={'newFile ' + icon + ' remixui_newFile'} className={'newFile ' + icon + ' remixui_newFile'}
key={index} key={`${action}-${title}-${index}`}
> >
</span> </span>
</OverlayTrigger> </OverlayTrigger>

Loading…
Cancel
Save