add bottom padding to fe menu span

libs/remix-ui/workspace/src/lib/components/file-explorer-menu.tsx

@@ -1,9 +1,9 @@
-import { CustomTooltip } from '@remix-ui/helper'
+import {CustomTooltip} from '@remix-ui/helper'
-import React, { useState, useEffect, } from 'react' //eslint-disable-line
+import React, {useState, useEffect} from 'react' //eslint-disable-line
-import { FormattedMessage } from 'react-intl'
+import {FormattedMessage} from 'react-intl'
-import { Placement } from 'react-bootstrap/esm/Overlay'
+import {Placement} from 'react-bootstrap/esm/Overlay'
-import { FileExplorerMenuProps } from '../types'
+import {FileExplorerMenuProps} from '../types'
-const _paq = window._paq = window._paq || []
+const _paq = (window._paq = window._paq || [])
 
 export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
   const [state, setState] = useState({
@@ -44,18 +44,24 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
         icon: 'fab fa-github',
         placement: 'bottom-start'
       }
-    ].filter(item => props.menuItems && props.menuItems.find((name) => { return name === item.action })),
+    ].filter(
+      (item) =>
+        props.menuItems &&
+        props.menuItems.find((name) => {
+          return name === item.action
+        })
+    ),
     actions: {}
   })
-  const enableDirUpload = { directory: "", webkitdirectory: "" }
+  const enableDirUpload = {directory: '', webkitdirectory: ''}
 
   useEffect(() => {
     const actions = {
       updateGist: () => {}
     }
 
-    setState(prevState => {
+    setState((prevState) => {
-      return { ...prevState, actions }
+      return {...prevState, actions}
     })
   }, [])
 
@@ -67,32 +73,53 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
         tooltipClasses="text-nowrap"
         tooltipText={props.title}
       >
-        <span className='remixui_label' data-path={props.title} style={{ fontWeight: 'bold' }}>{ props.title }</span>
+        <span
+          className="remixui_label"
+          data-path={props.title}
+          style={{fontWeight: 'bold'}}
+        >
+          {props.title}
+        </span>
       </CustomTooltip>
-      <span className="pl-0">{
+      <span className="pl-0 pb-1">
-        state.menuItems.map(({ action, title, icon, placement }, index) => {
+        {state.menuItems.map(({action, title, icon, placement}, index) => {
           if (action === 'uploadFile') {
             return (
               <CustomTooltip
                 placement={placement as Placement}
                 tooltipId="uploadFileTooltip"
                 tooltipClasses="text-nowrap"
-                tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
+                tooltipText={
+                  <FormattedMessage
+                    id={`filePanel.${action}`}
+                    defaultMessage={title}
+                  />
+                }
                 key={`index-${action}-${placement}-${icon}`}
               >
                 <label
                   id={action}
-                  data-id={'fileExplorerUploadFile' + action }
+                  data-id={'fileExplorerUploadFile' + action}
                   className={icon + ' mb-0 px-1 remixui_newFile'}
                   key={`index-${action}-${placement}-${icon}`}
                 >
-                  <input id="fileUpload" data-id="fileExplorerFileUpload" type="file" onChange={(e) => {
+                  <input
-                    e.stopPropagation()
+                    id="fileUpload"
-                    _paq.push(['trackEvent', 'fileExplorer', 'fileAction', action])
+                    data-id="fileExplorerFileUpload"
-                    props.uploadFile(e.target)
+                    type="file"
-                    e.target.value = null
+                    onChange={(e) => {
-                  }}
+                      e.stopPropagation()
-                  multiple />
+                      _paq.push([
+                        'trackEvent',
+                        'fileExplorer',
+                        'fileAction',
+                        action
+                      ])
+                      props.uploadFile(e.target)
+                      e.target.value = null
+                    }}
+                    multiple
+                  />
                 </label>
               </CustomTooltip>
             )
@@ -102,22 +129,38 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                 placement={placement as Placement}
                 tooltipId="uploadFolderTooltip"
                 tooltipClasses="text-nowrap"
-                tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
+                tooltipText={
+                  <FormattedMessage
+                    id={`filePanel.${action}`}
+                    defaultMessage={title}
+                  />
+                }
                 key={`index-${action}-${placement}-${icon}`}
               >
                 <label
                   id={action}
-                  data-id={'fileExplorerUploadFolder' + action }
+                  data-id={'fileExplorerUploadFolder' + action}
                   className={icon + ' mb-0 px-1 remixui_newFile'}
                   key={`index-${action}-${placement}-${icon}`}
                 >
-                  <input id="folderUpload" data-id="fileExplorerFolderUpload" type="file" onChange={(e) => {
+                  <input
-                    e.stopPropagation()
+                    id="folderUpload"
-                    _paq.push(['trackEvent', 'fileExplorer', 'fileAction', action])
+                    data-id="fileExplorerFolderUpload"
-                    props.uploadFolder(e.target)
+                    type="file"
-                    e.target.value = null
+                    onChange={(e) => {
-                  }}
+                      e.stopPropagation()
-                  {...enableDirUpload} multiple />
+                      _paq.push([
+                        'trackEvent',
+                        'fileExplorer',
+                        'fileAction',
+                        action
+                      ])
+                      props.uploadFolder(e.target)
+                      e.target.value = null
+                    }}
+                    {...enableDirUpload}
+                    multiple
+                  />
                 </label>
               </CustomTooltip>
             )
@@ -127,7 +170,12 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                 placement={placement as Placement}
                 tooltipId={`${action}-${title}-${icon}-${index}`}
                 tooltipClasses="text-nowrap"
-                tooltipText={<FormattedMessage id={`filePanel.${action}`} defaultMessage={title} />}
+                tooltipText={
+                  <FormattedMessage
+                    id={`filePanel.${action}`}
+                    defaultMessage={title}
+                  />
+                }
                 key={`${action}-${title}-${index}`}
               >
                 <span
@@ -135,7 +183,12 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                   data-id={'fileExplorerNewFile' + action}
                   onClick={(e) => {
                     e.stopPropagation()
-                    _paq.push(['trackEvent', 'fileExplorer', 'fileAction', action])
+                    _paq.push([
+                      'trackEvent',
+                      'fileExplorer',
+                      'fileAction',
+                      action
+                    ])
                     if (action === 'createNewFile') {
                       props.createNewFile()
                     } else if (action === 'createNewFolder') {
@@ -148,8 +201,7 @@ export const FileExplorerMenu = (props: FileExplorerMenuProps) => {
                   }}
                   className={'newFile ' + icon + ' px-1 remixui_newFile'}
                   key={`${action}-${title}-${index}`}
-                >
+                ></span>
-                </span>
               </CustomTooltip>
             )
           }

libs/remix-ui/workspace/src/lib/components/file-explorer.tsx

@@ -1,20 +1,39 @@
-import React, { useEffect, useState, useRef, SyntheticEvent } from 'react' // eslint-disable-line
+import React, {useEffect, useState, useRef, SyntheticEvent} from 'react' // eslint-disable-line
-import { TreeView, TreeViewItem } from '@remix-ui/tree-view' // eslint-disable-line
+import {TreeView, TreeViewItem} from '@remix-ui/tree-view' // eslint-disable-line
-import { FileExplorerMenu } from './file-explorer-menu' // eslint-disable-line
+import {FileExplorerMenu} from './file-explorer-menu' // eslint-disable-line
-import { FileExplorerContextMenu } from './file-explorer-context-menu' // eslint-disable-line
+import {FileExplorerContextMenu} from './file-explorer-context-menu' // eslint-disable-line
-import { FileExplorerProps, WorkSpaceState } from '../types'
+import {FileExplorerProps, WorkSpaceState} from '../types'
 
 import '../css/file-explorer.css'
-import { checkSpecialChars, extractNameFromKey, extractParentFromKey, joinPath } from '@remix-ui/helper'
+import {
+  checkSpecialChars,
+  extractNameFromKey,
+  extractParentFromKey,
+  joinPath
+} from '@remix-ui/helper'
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { FileRender } from './file-render'
+import {FileRender} from './file-render'
-import { Drag } from "@remix-ui/drag-n-drop"
+import {Drag} from '@remix-ui/drag-n-drop'
-import { ROOT_PATH } from '../utils/constants'
+import {ROOT_PATH} from '../utils/constants'
 
 export const FileExplorer = (props: FileExplorerProps) => {
-  const { name, contextMenuItems, removedContextMenuItems, files, workspaceState, toGist, addMenuItems, 
+  const {
-    removeMenuItems, handleContextMenu, handleNewFileInput, handleNewFolderInput, uploadFile, uploadFolder, fileState } = props
+    name,
-  const [state, setState] = useState<WorkSpaceState>( workspaceState)
+    contextMenuItems,
+    removedContextMenuItems,
+    files,
+    workspaceState,
+    toGist,
+    addMenuItems,
+    removeMenuItems,
+    handleContextMenu,
+    handleNewFileInput,
+    handleNewFolderInput,
+    uploadFile,
+    uploadFolder,
+    fileState
+  } = props
+  const [state, setState] = useState<WorkSpaceState>(workspaceState)
   const treeRef = useRef<HTMLDivElement>(null)
 
   useEffect(() => {
@@ -31,8 +50,16 @@ export const FileExplorer = (props: FileExplorerProps) => {
 
   useEffect(() => {
     if (props.focusEdit) {
-      setState(prevState => {
+      setState((prevState) => {
-        return { ...prevState, focusEdit: { element: props.focusEdit, type: 'file', isNew: true, lastEdit: null } }
+        return {
+          ...prevState,
+          focusEdit: {
+            element: props.focusEdit,
+            type: 'file',
+            isNew: true,
+            lastEdit: null
+          }
+        }
       })
     }
   }, [props.focusEdit])
@@ -45,16 +72,16 @@ export const FileExplorer = (props: FileExplorerProps) => {
     if (treeRef.current) {
       const keyPressHandler = (e: KeyboardEvent) => {
         if (e.shiftKey) {
-          setState(prevState => {
+          setState((prevState) => {
-            return { ...prevState, ctrlKey: true }
+            return {...prevState, ctrlKey: true}
           })
         }
       }
 
       const keyUpHandler = (e: KeyboardEvent) => {
         if (!e.shiftKey) {
-          setState(prevState => {
+          setState((prevState) => {
-            return { ...prevState, ctrlKey: false }
+            return {...prevState, ctrlKey: false}
           })
         }
       }
@@ -70,7 +97,11 @@ export const FileExplorer = (props: FileExplorerProps) => {
   }, [treeRef.current])
 
   const hasReservedKeyword = (content: string): boolean => {
-    if (state.reservedKeywords.findIndex(value => content.startsWith(value)) !== -1) return true
+    if (
+      state.reservedKeywords.findIndex((value) => content.startsWith(value)) !==
+      -1
+    )
+      return true
     else return false
   }
 
@@ -78,7 +109,12 @@ export const FileExplorer = (props: FileExplorerProps) => {
     try {
       props.dispatchCreateNewFile(newFilePath, ROOT_PATH)
     } catch (error) {
-      return props.modal('File Creation Failed', typeof error === 'string' ? error : error.message, 'Close', async () => {})
+      return props.modal(
+        'File Creation Failed',
+        typeof error === 'string' ? error : error.message,
+        'Close',
+        async () => {}
+      )
     }
   }
 
@@ -86,7 +122,12 @@ export const FileExplorer = (props: FileExplorerProps) => {
     try {
       props.dispatchCreateNewFolder(newFolderPath, ROOT_PATH)
     } catch (e) {
-      return props.modal('Folder Creation Failed', typeof e === 'string' ? e : e.message, 'Close', async () => {})
+      return props.modal(
+        'Folder Creation Failed',
+        typeof e === 'string' ? e : e.message,
+        'Close',
+        async () => {}
+      )
     }
   }
 
@@ -94,42 +135,66 @@ export const FileExplorer = (props: FileExplorerProps) => {
     try {
       props.dispatchRenamePath(oldPath, newPath)
     } catch (error) {
-      props.modal('Rename File Failed', 'Unexpected error while renaming: ' + typeof error === 'string' ? error : error.message, 'Close', async () => {})
+      props.modal(
+        'Rename File Failed',
+        'Unexpected error while renaming: ' + typeof error === 'string'
+          ? error
+          : error.message,
+        'Close',
+        async () => {}
+      )
     }
   }
 
   const publishToGist = (path?: string, type?: string) => {
-    props.modal('Create a public gist', `Are you sure you want to anonymously publish all your files in the ${name} workspace as a public gist on github.com?`, 'OK', () => toGist(path, type), 'Cancel', () => {})
+    props.modal(
+      'Create a public gist',
+      `Are you sure you want to anonymously publish all your files in the ${name} workspace as a public gist on github.com?`,
+      'OK',
+      () => toGist(path, type),
+      'Cancel',
+      () => {}
+    )
   }
 
-
   const handleClickFile = (path: string, type: 'folder' | 'file' | 'gist') => {
     if (!state.ctrlKey) {
       props.dispatchHandleClickFile(path, type)
     } else {
-      if (props.focusElement.findIndex(item => item.key === path) !== -1) {
+      if (props.focusElement.findIndex((item) => item.key === path) !== -1) {
-        const focusElement = props.focusElement.filter(item => item.key !== path)
+        const focusElement = props.focusElement.filter(
+          (item) => item.key !== path
+        )
 
         props.dispatchSetFocusElement(focusElement)
       } else {
-        const nonRootFocus = props.focusElement.filter((el) => { return !(el.key === '' && el.type === 'folder') })
+        const nonRootFocus = props.focusElement.filter((el) => {
+          return !(el.key === '' && el.type === 'folder')
+        })
 
-        nonRootFocus.push({ key: path, type })
+        nonRootFocus.push({key: path, type})
         props.dispatchSetFocusElement(nonRootFocus)
       }
     }
   }
 
-  const handleClickFolder = async (path: string, type: 'folder' | 'file' | 'gist') => {
+  const handleClickFolder = async (
+    path: string,
+    type: 'folder' | 'file' | 'gist'
+  ) => {
     if (state.ctrlKey) {
-      if (props.focusElement.findIndex(item => item.key === path) !== -1) {
+      if (props.focusElement.findIndex((item) => item.key === path) !== -1) {
-        const focusElement = props.focusElement.filter(item => item.key !== path)
+        const focusElement = props.focusElement.filter(
+          (item) => item.key !== path
+        )
 
         props.dispatchSetFocusElement(focusElement)
       } else {
-        const nonRootFocus = props.focusElement.filter((el) => { return !(el.key === '' && el.type === 'folder') })
+        const nonRootFocus = props.focusElement.filter((el) => {
+          return !(el.key === '' && el.type === 'folder')
+        })
 
-        nonRootFocus.push({ key: path, type })
+        nonRootFocus.push({key: path, type})
         props.dispatchSetFocusElement(nonRootFocus)
       }
     } else {
@@ -139,10 +204,16 @@ export const FileExplorer = (props: FileExplorerProps) => {
         expandPath = [...new Set([...props.expandPath, path])]
         props.dispatchFetchDirectory(path)
       } else {
-        expandPath = [...new Set(props.expandPath.filter(key => key && (typeof key === 'string') && !key.startsWith(path)))]
+        expandPath = [
+          ...new Set(
+            props.expandPath.filter(
+              (key) => key && typeof key === 'string' && !key.startsWith(path)
+            )
+          )
+        ]
       }
 
-      props.dispatchSetFocusElement([{ key: path, type }])
+      props.dispatchSetFocusElement([{key: path, type}])
       props.dispatchHandleExpandPath(expandPath)
     }
   }
@@ -151,37 +222,63 @@ export const FileExplorer = (props: FileExplorerProps) => {
     if (typeof content === 'string') content = content.trim()
     const parentFolder = extractParentFromKey(state.focusEdit.element)
 
-    if (!content || (content.trim() === '')) {
+    if (!content || content.trim() === '') {
       if (state.focusEdit.isNew) {
         props.dispatchRemoveInputField(parentFolder)
-        setState(prevState => {
+        setState((prevState) => {
-          return { ...prevState, focusEdit: { element: null, isNew: false, type: '', lastEdit: '' } }
+          return {
+            ...prevState,
+            focusEdit: {element: null, isNew: false, type: '', lastEdit: ''}
+          }
         })
       } else {
-        setState(prevState => {
+        setState((prevState) => {
-          return { ...prevState, focusEdit: { element: null, isNew: false, type: '', lastEdit: '' } }
+          return {
+            ...prevState,
+            focusEdit: {element: null, isNew: false, type: '', lastEdit: ''}
+          }
         })
       }
     } else {
       if (state.focusEdit.lastEdit === content) {
-        return setState(prevState => {
+        return setState((prevState) => {
-          return { ...prevState, focusEdit: { element: null, isNew: false, type: '', lastEdit: '' } }
+          return {
+            ...prevState,
+            focusEdit: {element: null, isNew: false, type: '', lastEdit: ''}
+          }
         })
       }
       if (checkSpecialChars(content)) {
-        props.modal('Validation Error', 'Special characters are not allowed', 'OK', () => {})
+        props.modal(
+          'Validation Error',
+          'Special characters are not allowed',
+          'OK',
+          () => {}
+        )
       } else {
         if (state.focusEdit.isNew) {
           if (hasReservedKeyword(content)) {
             props.dispatchRemoveInputField(parentFolder)
-            props.modal('Reserved Keyword', `File name contains Remix reserved keywords. '${content}'`, 'Close', () => {})
+            props.modal(
+              'Reserved Keyword',
+              `File name contains Remix reserved keywords. '${content}'`,
+              'Close',
+              () => {}
+            )
           } else {
-            state.focusEdit.type === 'file' ? createNewFile(joinPath(parentFolder, content)) : createNewFolder(joinPath(parentFolder, content))
+            state.focusEdit.type === 'file'
+              ? createNewFile(joinPath(parentFolder, content))
+              : createNewFolder(joinPath(parentFolder, content))
             props.dispatchRemoveInputField(parentFolder)
           }
         } else {
           if (hasReservedKeyword(content)) {
-            props.modal('Reserved Keyword', `File name contains Remix reserved keywords. '${content}'`, 'Close', () => {})
+            props.modal(
+              'Reserved Keyword',
+              `File name contains Remix reserved keywords. '${content}'`,
+              'Close',
+              () => {}
+            )
           } else {
             if (state.focusEdit.element) {
               const oldPath: string = state.focusEdit.element
@@ -192,24 +289,39 @@ export const FileExplorer = (props: FileExplorerProps) => {
             }
           }
         }
-        setState(prevState => {
+        setState((prevState) => {
-          return { ...prevState, focusEdit: { element: null, isNew: false, type: '', lastEdit: '' } }
+          return {
+            ...prevState,
+            focusEdit: {element: null, isNew: false, type: '', lastEdit: ''}
+          }
         })
       }
     }
   }
 
-  
   const handleFileExplorerMenuClick = (e: SyntheticEvent) => {
     e.stopPropagation()
-    if (e && (e.target as any).getAttribute('data-id') === 'fileExplorerUploadFileuploadFile') return // we don't want to let propagate the input of type file
+    if (
-    if (e && (e.target as any).getAttribute('data-id') === 'fileExplorerFileUpload') return // we don't want to let propagate the input of type file
+      e &&
+      (e.target as any).getAttribute('data-id') ===
+        'fileExplorerUploadFileuploadFile'
+    )
+      return // we don't want to let propagate the input of type file
+    if (
+      e &&
+      (e.target as any).getAttribute('data-id') === 'fileExplorerFileUpload'
+    )
+      return // we don't want to let propagate the input of type file
     let expandPath = []
 
     if (!props.expandPath.includes(ROOT_PATH)) {
       expandPath = [ROOT_PATH, ...new Set([...props.expandPath])]
     } else {
-      expandPath = [...new Set(props.expandPath.filter(key => key && (typeof key === 'string')))]
+      expandPath = [
+        ...new Set(
+          props.expandPath.filter((key) => key && typeof key === 'string')
+        )
+      ]
     }
     props.dispatchHandleExpandPath(expandPath)
   }
@@ -218,7 +330,12 @@ export const FileExplorer = (props: FileExplorerProps) => {
     try {
       props.dispatchMoveFile(src, dest)
     } catch (error) {
-      props.modal('Moving File Failed', 'Unexpected error while moving file: ' + src, 'Close', async () => {})
+      props.modal(
+        'Moving File Failed',
+        'Unexpected error while moving file: ' + src,
+        'Close',
+        async () => {}
+      )
     }
   }
 
@@ -226,15 +343,21 @@ export const FileExplorer = (props: FileExplorerProps) => {
     try {
       props.dispatchMoveFolder(src, dest)
     } catch (error) {
-      props.modal('Moving Folder Failed', 'Unexpected error while moving folder: ' + src, 'Close', async () => {})
+      props.modal(
+        'Moving Folder Failed',
+        'Unexpected error while moving folder: ' + src,
+        'Close',
+        async () => {}
+      )
     }
   }
 
   return (
     <Drag onFileMoved={handleFileMove} onFolderMoved={handleFolderMove}>
-      <div ref={treeRef} tabIndex={0} style={{ outline: "none" }}>
+      <div ref={treeRef} tabIndex={0} style={{outline: 'none'}}>
-        <TreeView id='treeView'>
+        <TreeView id="treeView">
-          <TreeViewItem id="treeViewItem"
+          <TreeViewItem
+            id="treeViewItem"
             controlBehaviour={true}
             label={
               <div onClick={handleFileExplorerMenuClick}>
@@ -249,28 +372,30 @@ export const FileExplorer = (props: FileExplorerProps) => {
                 />
               </div>
             }
-            expand={true}>
+            expand={true}
-            <div className='pb-4 mb-4'>
+          >
-              <TreeView id='treeViewMenu'>
+            <div className="pb-4 mb-4">
-                {
+              <TreeView id="treeViewMenu">
-                  files[ROOT_PATH] && Object.keys(files[ROOT_PATH]).map((key, index) => <FileRender
+                {files[ROOT_PATH] &&
-                    file={files[ROOT_PATH][key]}
+                  Object.keys(files[ROOT_PATH]).map((key, index) => (
-                    fileDecorations={fileState}
+                    <FileRender
-                    index={index}
+                      file={files[ROOT_PATH][key]}
-                    focusContext={state.focusContext}
+                      fileDecorations={fileState}
-                    focusEdit={state.focusEdit}
+                      index={index}
-                    focusElement={props.focusElement}
+                      focusContext={state.focusContext}
-                    ctrlKey={state.ctrlKey}
+                      focusEdit={state.focusEdit}
-                    expandPath={props.expandPath}
+                      focusElement={props.focusElement}
-                    editModeOff={editModeOff}
+                      ctrlKey={state.ctrlKey}
-                    handleClickFile={handleClickFile}
+                      expandPath={props.expandPath}
-                    handleClickFolder={handleClickFolder}
+                      editModeOff={editModeOff}
-                    handleContextMenu={handleContextMenu}
+                      handleClickFile={handleClickFile}
-                    key={index}
+                      handleClickFolder={handleClickFolder}
-                    showIconsMenu={props.showIconsMenu}
+                      handleContextMenu={handleContextMenu}
-                    hideIconsMenu={props.hideIconsMenu}
+                      key={index}
-                  />)
+                      showIconsMenu={props.showIconsMenu}
-                }
+                      hideIconsMenu={props.hideIconsMenu}
+                    />
+                  ))}
               </TreeView>
             </div>
           </TreeViewItem>