Multiselect for folders

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

@@ -368,11 +368,23 @@ export const FileExplorer = (props: FileExplorerProps) => {
   }
 
   const handleClickFolder = async (path) => {
-    const files = await resolveDirectory(path, state.files)
+    if (state.ctrlKey) {
+      if (state.focusElement.findIndex(item => item === path) !== -1) {
+        setState(prevState => {
+          return { ...prevState, focusElement: [...prevState.focusElement.filter(item => item !== path)] }
+        })
+      } else {
+        setState(prevState => {
+          return { ...prevState, focusElement: [...prevState.focusElement, path] }
+        })
+      }
+    } else {
+      const files = await resolveDirectory(path, state.files)
 
-    setState(prevState => {
-      return { ...prevState, focusElement: [path], files }
-    })
+      setState(prevState => {
+        return { ...prevState, focusElement: [path], files }
+      })
+    }
   }
 
   const renderMenuItems = () => {
@@ -436,6 +448,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
               handleClickFolder(file.path)
             }}
             labelClass={ state.focusElement.findIndex(item => item === file.path) !== -1 ? 'bg-secondary' : '' }
+            controlBehaviour={ state.ctrlKey }
           >
             {
               file.child ? <TreeView id={`treeView${file.path}`} key={index}>{
@@ -472,7 +485,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
       ref={containerRef}
       tabIndex={-1}
       onKeyDown={(e) => {
-        if (e.ctrlKey) {
+        if (e.shiftKey) {
           console.log('TRUE')
           setState(prevState => {
             return { ...prevState, ctrlKey: true }

libs/remix-ui/tree-view/src/lib/tree-view-item/tree-view-item.tsx

@@ -4,7 +4,7 @@ import { TreeViewItemProps } from '../../types'
 import './tree-view-item.css'
 
 export const TreeViewItem = (props: TreeViewItemProps) => {
-  const { id, children, label, labelClass, expand, iconX = 'fas fa-caret-right', iconY = 'fas fa-caret-down', icon, ...otherProps } = props
+  const { id, children, label, labelClass, expand, iconX = 'fas fa-caret-right', iconY = 'fas fa-caret-down', icon, controlBehaviour = false, ...otherProps } = props
   const [isExpanded, setIsExpanded] = useState(false)
 
   useEffect(() => {
@@ -13,7 +13,7 @@ export const TreeViewItem = (props: TreeViewItemProps) => {
 
   return (
     <li key={`treeViewLi${id}`} data-id={`treeViewLi${id}`} className='li_tv' {...otherProps}>
-      <div key={`treeViewDiv${id}`} data-id={`treeViewDiv${id}`} className={`d-flex flex-row align-items-center ${labelClass}`} onClick={() => setIsExpanded(!isExpanded)}>
+      <div key={`treeViewDiv${id}`} data-id={`treeViewDiv${id}`} className={`d-flex flex-row align-items-center ${labelClass}`} onClick={() => !controlBehaviour && setIsExpanded(!isExpanded)}>
         { children ? <div className={isExpanded ? `px-1 ${iconY} caret caret_tv` : `px-1 ${iconX} caret caret_tv`} style={{ visibility: children ? 'visible' : 'hidden' }}></div> : icon ? <div className={`pr-3 pl-1 ${icon} caret caret_tv`}></div> : null }
         <span className='w-100 pl-1'>
           { label }

libs/remix-ui/tree-view/src/types/index.ts

@@ -13,5 +13,6 @@ export interface TreeViewItemProps {
     iconX?: string,
     iconY?: string,
     icon?: string,
-    labelClass?: string
+    labelClass?: string,
+    controlBehaviour?: boolean
 }