From 702c8cb088ae835a7f797d1216db6782460dc4d2 Mon Sep 17 00:00:00 2001 From: filip mertens Date: Sat, 30 Dec 2023 10:26:52 +0100 Subject: [PATCH] rm trees --- .../src/lib/components/file-label.tsx | 96 --------- .../components/file-recursive-tree-item.tsx | 66 ------ .../lib/components/file-recursive-tree.tsx | 194 ------------------ .../src/lib/components/file-render.tsx | 175 ---------------- 4 files changed, 531 deletions(-) delete mode 100644 libs/remix-ui/workspace/src/lib/components/file-label.tsx delete mode 100644 libs/remix-ui/workspace/src/lib/components/file-recursive-tree-item.tsx delete mode 100644 libs/remix-ui/workspace/src/lib/components/file-recursive-tree.tsx delete mode 100644 libs/remix-ui/workspace/src/lib/components/file-render.tsx diff --git a/libs/remix-ui/workspace/src/lib/components/file-label.tsx b/libs/remix-ui/workspace/src/lib/components/file-label.tsx deleted file mode 100644 index c379d980d4..0000000000 --- a/libs/remix-ui/workspace/src/lib/components/file-label.tsx +++ /dev/null @@ -1,96 +0,0 @@ -// eslint-disable-next-line no-use-before-define -import {fileDecoration} from '@remix-ui/file-decorators' -import {CustomTooltip} from '@remix-ui/helper' -import {FormattedMessage} from 'react-intl' -import React, {useEffect, useRef, useState} from 'react' -import {FileType} from '../types' -export interface FileLabelProps { - file: FileType - focusEdit: { - element: string - type: string - isNew: boolean - lastEdit: string - } - fileDecorations: fileDecoration[] - editModeOff: (content: string) => void - dragStatus: boolean -} - -export const FileLabel = (props: FileLabelProps) => { - const {file, focusEdit, editModeOff, fileDecorations} = props - const [isEditable, setIsEditable] = useState(false) - const [fileStateClasses, setFileStateClasses] = useState('') - const labelRef = useRef(null) - - useEffect(() => { - if (focusEdit.element && file.path) { - setIsEditable(focusEdit.element === file.path) - } - }, [file.path, focusEdit]) - - useEffect(() => { - const state = props.fileDecorations.find((state: fileDecoration) => { - if (state.path === props.file.path) return true - if (state.bubble && props.file.isDirectory && state.path.startsWith(props.file.path)) return true - }) - if (state && state.fileStateLabelClass) { - setFileStateClasses(state.fileStateLabelClass) - } else { - setFileStateClasses('') - } - }, [fileDecorations]) - - useEffect(() => { - if (labelRef.current) { - setTimeout(() => { - labelRef.current.focus() - }, 0) - } - }, [isEditable]) - - const handleEditInput = (event: React.KeyboardEvent) => { - if (event.which === 13) { - event.preventDefault() - editModeOff(labelRef.current.innerText) - labelRef.current.innerText = file.name - } - if (event.which === 27) { - event.preventDefault() - // don't change it - editModeOff(file.name) - } - } - - const handleEditBlur = (event: React.SyntheticEvent) => { - event.stopPropagation() - editModeOff(labelRef.current.innerText) - labelRef.current.innerText = file.name - } - - // The tooltip is setted up on the label and not the whole line to avoid unnecessary tooltips on the short filenames. - // It has the delay for the same reason. - return ( -
- - - {file.name} - - -
- ) -} diff --git a/libs/remix-ui/workspace/src/lib/components/file-recursive-tree-item.tsx b/libs/remix-ui/workspace/src/lib/components/file-recursive-tree-item.tsx deleted file mode 100644 index aeebde8bb6..0000000000 --- a/libs/remix-ui/workspace/src/lib/components/file-recursive-tree-item.tsx +++ /dev/null @@ -1,66 +0,0 @@ -import { getPathIcon } from "@remix-ui/helper"; -import React, { useEffect, useState } from "react"; -import { FileType, WorkspaceElement } from "../types"; -import { FlatTreeItemInput } from "./flat-tree-item-input"; - -interface RecursiveTreeItemProps { - file: FileType - expandPath?: string[] - focusEdit: {element: string; type: string; isNew: boolean; lastEdit: string} - editModeOff: (content: string) => void - focusElement: {key: string; type: WorkspaceElement}[] - focusContext: {element: string; x: number; y: number; type: string} -} - -export const RecursiveTreeItem = (props: RecursiveTreeItemProps) => { - - const [hover, setHover] = useState(false) - const { file, expandPath, focusEdit, editModeOff } = props - - useEffect(() => { - console.log('item render') - },[]) - - const labelClass = - props.focusEdit.element === file.path - ? 'bg-light' - : props.focusElement.findIndex((item) => item.key === file.path) !== -1 - ? 'bg-secondary' - : hover - ? 'bg-light border-no-shift' - : props.focusContext.element === file.path && props.focusEdit.element !== file.path - ? 'bg-light border-no-shift' - : '' - - return ( - <> -
  • -
    setHover(true)} - onMouseOut={() => setHover(false)} - > -
    - {focusEdit && file.path && focusEdit.element === file.path ? - : - {file.name}} -
    -
      - { - expandPath && expandPath.includes(file.path) && - file.child && Object.keys(file.child).map((key, index) => { - //console.log('recursive tree', file.child[key]) - return () - }) - } -
    -
    • - ) -} \ No newline at end of file diff --git a/libs/remix-ui/workspace/src/lib/components/file-recursive-tree.tsx b/libs/remix-ui/workspace/src/lib/components/file-recursive-tree.tsx deleted file mode 100644 index 635b0749b8..0000000000 --- a/libs/remix-ui/workspace/src/lib/components/file-recursive-tree.tsx +++ /dev/null @@ -1,194 +0,0 @@ -import React, { SyntheticEvent, startTransition, useEffect, useRef, useState } from 'react' -import { Popover } from 'react-bootstrap' -import { FileType, WorkspaceElement } from '../types' -import { ROOT_PATH } from '../utils/constants' -import { RecursiveTreeItem } from './file-recursive-tree-item' - -interface RecursiveTreeProps { - files: { [x: string]: Record }, - expandPath: string[], - handleContextMenu: (pageX: number, pageY: number, path: string, content: string, type: string) => void - focusEdit: {element: string; type: string; isNew: boolean; lastEdit: string} - focusElement: {key: string; type: WorkspaceElement}[] - focusContext: {element: string; x: number; y: number; type: string} - editModeOff: (content: string) => void -} - -let mouseTimer: any = { - path: null, - timer: null -} - - -export const RecursiveTree = (props: RecursiveTreeProps) => { - const { files, expandPath, editModeOff } = props - const [internalFiles, setInternalFiles] = useState<{ [x: string]: Record }>({}) - const ref = useRef(null) - const [mouseOverTarget, setMouseOverTarget] = useState<{ - path: string, - type: string, - content: string, - position: { - top: number, - left: number - } - }>(null) - const [showMouseOverTarget, setShowMouseOverTarget] = useState(false) - - useEffect(() => { - console.log('focus edit', props.focusEdit) - },[props.focusEdit]) - - useEffect(() => { - console.log('flat files changed', files, ROOT_PATH) - - setInternalFiles(files) - - },[files]) - - useEffect(() => { - console.log('STATE', props.focusContext, props.focusElement, props.focusEdit, expandPath) - //files[ROOT_PATH] && Object.keys(files[ROOT_PATH]).map((key, index) => { - // console.log('recursive tree', files[ROOT_PATH][key]) - //}) - }, [props.focusContext, props.focusElement, props.focusEdit, expandPath]) - - const getEventTarget = async (e: any, useLabel: boolean = false) => { - let target = e.target as HTMLElement - while (target && target.getAttribute && !target.getAttribute(useLabel? 'data-label-path' : 'data-path')) { - target = target.parentElement - } - if (target && target.getAttribute) { - const path = target.getAttribute(useLabel? 'data-label-path' : 'data-path') - const type = target.getAttribute(useLabel? 'data-label-type' : 'data-type') - const position = target.getBoundingClientRect() - // get size of element - - const endPosition = { - top: position.top - position.height * 2 + 4, - left: position.left , - } - - const content = target.textContent - return { - path, - type, - content, - position: endPosition - } - } - } - - const handleContextMenu = async (e: any) => { - e.preventDefault() - e.stopPropagation() - const target = await getEventTarget(e) - if (target) { - props.handleContextMenu(e.pageX, e.pageY, target.path, target.content, target.type) - } - } - - const onDragEnd = (event: SyntheticEvent) => { - console.log('drag end', event) - } - - const onDrop = async (event: SyntheticEvent) => { - event.preventDefault() - console.log('drop', event) - const target = await getEventTarget(event) - console.log('drop', target) - } - - const onDragOver = async (e: SyntheticEvent) => { - e.preventDefault() - //console.log('drag over', e) - const target = await getEventTarget(e) - //console.log('drag over', target) - } - - const onMouseMove = async (e: any) => { - ///console.log('mouse move', e) - const target = await getEventTarget(e, true) - if (target && target.path) { - if (mouseTimer.path !== target.path) { - //console.log('set timer', target) - setShowMouseOverTarget(false) - mouseTimer = { - path: target.path, - timer: setTimeout(() => { - if (mouseTimer.path === target.path) { - setShowMouseOverTarget(true) - setMouseOverTarget(target) - } - }, 1000) - } - } - } else { - mouseTimer = { - path: null, - timer: null - } - setShowMouseOverTarget(false) - } - } - - const onMouseLeave = async (e: any) => { - mouseTimer = { - path: null, - timer: null - } - setShowMouseOverTarget(false) - } - - useEffect(() => { - console.log('show mouse over target', showMouseOverTarget) - }, [showMouseOverTarget]) - - - return ( - -
    - - {showMouseOverTarget && mouseOverTarget && - - - {mouseOverTarget && mouseOverTarget.path} - - - } - -
      {files[ROOT_PATH] && - internalFiles && internalFiles[ROOT_PATH] && Object.keys(internalFiles[ROOT_PATH]).map((key, index) => { - //console.log('recursive tree', files[ROOT_PATH][key]) - return () - })} -
    -
    - - ) -} - - - - - diff --git a/libs/remix-ui/workspace/src/lib/components/file-render.tsx b/libs/remix-ui/workspace/src/lib/components/file-render.tsx deleted file mode 100644 index fcec4b5860..0000000000 --- a/libs/remix-ui/workspace/src/lib/components/file-render.tsx +++ /dev/null @@ -1,175 +0,0 @@ -// eslint-disable-next-line no-use-before-define -import React, {SyntheticEvent, useEffect, useState} from 'react' -import {FileType, WorkspaceElement} from '../types' -// eslint-disable-next-line @typescript-eslint/no-unused-vars -import {TreeView, TreeViewItem} from '@remix-ui/tree-view' -import {getPathIcon} from '@remix-ui/helper' -// eslint-disable-next-line @typescript-eslint/no-unused-vars -import {FileLabel} from './file-label' -import {fileDecoration, FileDecorationIcons} from '@remix-ui/file-decorators' -import {Draggable} from '@remix-ui/drag-n-drop' -import { fileKeySort } from '../utils' - -export interface RenderFileProps { - file: FileType - index: number - focusEdit: {element: string; type: string; isNew: boolean; lastEdit: string} - focusElement: {key: string; type: WorkspaceElement}[] - focusContext: {element: string; x: number; y: number; type: string} - ctrlKey: boolean - expandPath: string[] - hideIconsMenu?: React.Dispatch> - showIconsMenu?: boolean - editModeOff: (content: string) => void - handleClickFolder: (path: string, type: string) => void - handleClickFile: (path: string, type: string) => void - handleContextMenu: (pageX: number, pageY: number, path: string, content: string, type: string) => void - fileDecorations: fileDecoration[] - dragStatus: boolean -} - -export const FileRender = (props: RenderFileProps) => { - const [file, setFile] = useState({} as FileType) - const [hover, setHover] = useState(false) - const [icon, setIcon] = useState('') - const [childrenKeys, setChildrenKeys] = useState([]) - - useEffect(() => { - if (props.file && props.file.path && props.file.type) { - setFile(props.file) - setIcon(getPathIcon(props.file.path)) - } - }, [props.file]) - - useEffect(() => { - if (file.child) { - try { - const children: FileType[] = file.child as any - setChildrenKeys(fileKeySort(children)) - } catch (e) { - setChildrenKeys(Object.keys(file.child)) - } - } else { - setChildrenKeys([]) - } - }, [file.child, props.expandPath, props.file]) - - const labelClass = - props.focusEdit.element === file.path - ? 'bg-light' - : props.focusElement.findIndex((item) => item.key === file.path) !== -1 - ? 'bg-secondary' - : hover - ? 'bg-light border-no-shift' - : props.focusContext.element === file.path && props.focusEdit.element !== file.path - ? 'bg-light border-no-shift' - : '' - - const spreadProps = { - onClick: (e) => e.stopPropagation() - } - - const handleFolderClick = (event: SyntheticEvent) => { - event.stopPropagation() - if (props.focusEdit.element !== file.path) props.handleClickFolder(file.path, file.type) - if (props.showIconsMenu === true) props.hideIconsMenu(!props.showIconsMenu) - } - - const handleFileClick = (event: SyntheticEvent) => { - event.stopPropagation() - if (props.focusEdit.element !== file.path) props.handleClickFile(file.path, file.type) - if (props.showIconsMenu === true) props.hideIconsMenu(!props.showIconsMenu) - } - - const handleContextMenu = (event: PointerEvent) => { - event.preventDefault() - event.stopPropagation() - props.handleContextMenu(event.pageX, event.pageY, file.path, (event.target as HTMLElement).textContent, file.type) - } - - const handleMouseOut = (event: SyntheticEvent) => { - event.stopPropagation() - setHover(false) - } - - const handleMouseOver = (event: SyntheticEvent) => { - event.stopPropagation() - setHover(true) - } - - if (file.isDirectory) { - return ( - - -
    - - -
    -     - - } - onClick={handleFolderClick} - onContextMenu={handleContextMenu} - labelClass={labelClass} - controlBehaviour={props.ctrlKey} - expand={props.expandPath.includes(file.path)} - onMouseOver={handleMouseOver} - onMouseOut={handleMouseOut} - > - {file.child ? ( - - {childrenKeys.map((key, index) => ( - - ))} - - ) : ( - - )} -     - ) - } else { - return ( - - -
    - - -
    -     - - } - onClick={handleFileClick} - onContextMenu={handleContextMenu} - icon={icon} - labelClass={labelClass} - onMouseOver={handleMouseOver} - onMouseOut={handleMouseOut} - /> - ) - } -}