refactor for react compliance

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useRef, SyntheticEvent } from 'react' // eslint-disable-line
+import React, { useEffect, useState, useRef, SyntheticEvent, useContext } from 'react' // eslint-disable-line
 import { useIntl } from 'react-intl'
 import { TreeView } from '@remix-ui/tree-view' // eslint-disable-line
 import { FileExplorerMenu } from './file-explorer-menu' // eslint-disable-line
@@ -11,6 +11,7 @@ import { checkSpecialChars, extractNameFromKey, extractParentFromKey, getPathIco
 import { ROOT_PATH } from '../utils/constants'
 import { moveFileIsAllowed, moveFilesIsAllowed, moveFolderIsAllowed, moveFoldersIsAllowed } from '../actions'
 import { FlatTree } from './flat-tree'
+import { FileSystemContext } from '../contexts'
 
 export const FileExplorer = (props: FileExplorerProps) => {
   const intl = useIntl()
@@ -35,6 +36,7 @@ export const FileExplorer = (props: FileExplorerProps) => {
   const [state, setState] = useState<WorkSpaceState>(workspaceState)
   // const [isPending, startTransition] = useTransition();
   const treeRef = useRef<HTMLDivElement>(null)
+  const { plugin } = useContext(FileSystemContext)
   const [filesSelected, setFilesSelected] = useState<string[]>([])
 
   useEffect(() => {
@@ -97,6 +99,10 @@ export const FileExplorer = (props: FileExplorerProps) => {
     }
   }, [treeRef.current])
 
+  useEffect(() => {
+    plugin
+  }, [])
+
   const hasReservedKeyword = (content: string): boolean => {
     if (state.reservedKeywords.findIndex((value) => content.startsWith(value)) !== -1) return true
     else return false

libs/remix-ui/workspace/src/lib/components/flat-tree-drop.tsx

@@ -1,6 +1,6 @@
 import React, { SyntheticEvent, useContext, useEffect, useRef, useState } from 'react'
 import { DragStructure, FileType, FlatTreeDropProps } from '../types'
-import { buildMultiSelectedItemProfiles, getEventTarget } from '../utils/getEventTarget'
+import { getEventTarget } from '../utils/getEventTarget'
 import { extractParentFromKey } from '@remix-ui/helper'
 import { FileSystemContext } from '../contexts'
 

libs/remix-ui/workspace/src/lib/components/flat-tree.tsx

@@ -5,7 +5,7 @@ import { getPathIcon } from '@remix-ui/helper';
 import { Virtuoso, VirtuosoHandle } from 'react-virtuoso'
 import { FlatTreeItemInput } from './flat-tree-item-input';
 import { FlatTreeDrop } from './flat-tree-drop';
-import { buildMultiSelectedItemProfiles, getEventTarget } from '../utils/getEventTarget';
+import { getEventTarget } from '../utils/getEventTarget';
 import { fileDecoration, FileDecorationIcons } from '@remix-ui/file-decorators';
 import { FileHoverIcons } from './file-explorer-hovericons';
 import { deletePath } from '../actions';
@@ -74,30 +74,15 @@ export const FlatTree = (props: FlatTreeProps) => {
   const virtuoso = useRef<VirtuosoHandle>(null)
   const [selectedItems, setSelectedItems] = useState<DragStructure[]>([])
 
+  /**
+   *  When multiple files are selected in FileExplorer,
+   *  and these files are dragged to a target folder,
+   *  this function will build the profile of each selected item
+   *  so they can be moved when dropped on target folder
+   * @param target - Initial target item in FileExplorer
+   * @returns - {DragStructure} Array of selected items
+   */
   const buildMultiSelectedItemProfiles = (target: {
-    path: string
-    type: string
-    content: string
-    position: {
-        top: number
-        left: number
-    }
-    }) => {
-    const selectItems = []
-    selectItems.push(target)
-    document.querySelectorAll('li.remixui_selected').forEach(item => {
-      const dragTarget = {
-        position: { top: target?.position.top || 0, left: target?.position.left || 0 },
-        path: item.getAttribute('data-path') || item.getAttribute('data-label-path') || '',
-        type: item.getAttribute('data-type') || item.getAttribute('data-label-type') || '',
-        content: item.textContent || ''
-      }
-      if (dragTarget.path !== target.path) selectItems.push(dragTarget)
-    })
-    return selectItems
-  }
-
-  const buildMultiSelectedItemRefactored = (target: {
     path: string
     type: string
     content: string
@@ -109,7 +94,6 @@ export const FlatTree = (props: FlatTreeProps) => {
     const selectItems = []
     selectItems.push(target)
     containerRef.current?.querySelectorAll('li.remixui_selected').forEach(item => {
-
       const dragTarget = {
         position: { top: target?.position.top || 0, left: target?.position.left || 0 },
         path: item.getAttribute('data-path') || item.getAttribute('data-label-path') || '',
@@ -118,38 +102,9 @@ export const FlatTree = (props: FlatTreeProps) => {
       }
       if (dragTarget.path !== target.path) selectItems.push(dragTarget)
     })
-    console.log('selectedItems', selectItems)
+    setSelectedItems(selectItems)
   }
 
-  // useEffect(() => {
-  //   if (rowRef.current) {
-  //     const buildMultiSelectedItemProfiles = (target: {
-  //       path: string
-  //       type: string
-  //       content: string
-  //       position: {
-  //           top: number
-  //           left: number
-  //       }
-  //       }) => {
-  //       const selectItems = []
-  //       selectItems.push(target)
-  //       rowRef.current.forEach(item => {
-  //         if (item && item.classList.contains('li.remixui_selected')) {
-  //           const dragTarget = {
-  //             position: { top: target?.position.top || 0, left: target?.position.left || 0 },
-  //             path: item.getAttribute('data-path') || item.getAttribute('data-label-path') || '',
-  //             type: item.getAttribute('data-type') || item.getAttribute('data-label-type') || '',
-  //             content: item.textContent || ''
-  //           }
-  //           if (dragTarget.path !== target.path) selectItems.push(dragTarget)
-  //         }
-  //       })
-  //       console.log('selectedItems', selectItems)
-  //     }
-  //   }
-  // }, [])
-
   const labelClass = (file: FileType) =>
     props.focusEdit.element === file.path
       ? 'bg-light'
@@ -185,10 +140,10 @@ export const FlatTree = (props: FlatTreeProps) => {
     const target = await getEventTarget(event)
     setDragSource(flatTree.find((item) => item.path === target.path))
     setIsDragging(true)
-    const items = buildMultiSelectedItemProfiles(target)
-    buildMultiSelectedItemRefactored(target)
-    setSelectedItems(items)
-    setFilesSelected(items.map((item) => item.path))
+    // const items =
+    buildMultiSelectedItemProfiles(target)
+    // setSelectedItems(items)
+    setFilesSelected(selectedItems.map((item) => item.path))
   }
 
   useEffect(() => {
@@ -315,7 +270,6 @@ export const FlatTree = (props: FlatTreeProps) => {
               file={file} /> :
             <><div
               data-id={`treeViewDivDraggableItem${file.path}`}
-              ref={rowRef}
               draggable={true}
               onDragStart={onDragStart}
               onDragEnd={onDragEnd}

libs/remix-ui/workspace/src/lib/utils/getEventTarget.ts

@@ -23,34 +23,3 @@ export const getEventTarget = async (e: any, useLabel: boolean = false) => {
     }
   }
 }
-
-/**
-   *  When multiple files are selected in FileExplorer,
-   *  and these files are dragged to a target folder,
-   *  this function will build the profile of each selected item
-   *  in FileExplorer so they can be moved when dropped
-   * @param target - Initial target item in FileExplorer
-   * @returns - {DragStructure} Array of selected items
-   */
-export const buildMultiSelectedItemProfiles = (target: {
-  path: string
-  type: string
-  content: string
-  position: {
-      top: number
-      left: number
-  }
-  }) => {
-  const selectItems = []
-  selectItems.push(target)
-  document.querySelectorAll('li.remixui_selected').forEach(item => {
-    const dragTarget = {
-      position: { top: target?.position.top || 0, left: target?.position.left || 0 },
-      path: item.getAttribute('data-path') || item.getAttribute('data-label-path') || '',
-      type: item.getAttribute('data-type') || item.getAttribute('data-label-type') || '',
-      content: item.textContent || ''
-    }
-    if (dragTarget.path !== target.path) selectItems.push(dragTarget)
-  })
-  return selectItems
-}