From 887fd6e2a54051442c53e8cb7234880e1ab1d4ae Mon Sep 17 00:00:00 2001 From: David Disu Date: Sun, 28 Aug 2022 21:41:18 +0100 Subject: [PATCH] re-order files and allow pasting on files --- libs/remix-ui/drag-n-drop/README.md | 4 +- libs/remix-ui/drag-n-drop/jest.config.js | 2 +- libs/remix-ui/drag-n-drop/src/index.ts | 2 +- .../src/lib/context/moveContext.ts | 8 ++ .../drag-n-drop/src/lib/drag-n-drop.tsx | 85 +++++++++++++ .../src/lib/remix-ui-drag-n-drop.tsx | 112 ------------------ .../drag-n-drop/src/lib/types/index.ts | 29 +++++ .../workspace/src/lib/contexts/index.ts | 12 -- 8 files changed, 126 insertions(+), 128 deletions(-) create mode 100644 libs/remix-ui/drag-n-drop/src/lib/context/moveContext.ts create mode 100644 libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx delete mode 100644 libs/remix-ui/drag-n-drop/src/lib/remix-ui-drag-n-drop.tsx create mode 100644 libs/remix-ui/drag-n-drop/src/lib/types/index.ts diff --git a/libs/remix-ui/drag-n-drop/README.md b/libs/remix-ui/drag-n-drop/README.md index cbe7a6ff0e..8a56dbaa5e 100644 --- a/libs/remix-ui/drag-n-drop/README.md +++ b/libs/remix-ui/drag-n-drop/README.md @@ -1,7 +1,7 @@ -# remix-ui-drag-n-drop +# drag-n-drop This library was generated with [Nx](https://nx.dev). ## Running unit tests -Run `nx test remix-ui-drag-n-drop` to execute the unit tests via [Jest](https://jestjs.io). +Run `nx test drag-n-drop` to execute the unit tests via [Jest](https://jestjs.io). diff --git a/libs/remix-ui/drag-n-drop/jest.config.js b/libs/remix-ui/drag-n-drop/jest.config.js index 1a5729e026..13bb8ceede 100644 --- a/libs/remix-ui/drag-n-drop/jest.config.js +++ b/libs/remix-ui/drag-n-drop/jest.config.js @@ -1,5 +1,5 @@ module.exports = { - displayName: 'remix-ui-drag-n-drop', + displayName: 'drag-n-drop', preset: '../../../jest.preset.js', transform: { '^.+\\.[tj]sx?$': 'babel-jest' diff --git a/libs/remix-ui/drag-n-drop/src/index.ts b/libs/remix-ui/drag-n-drop/src/index.ts index 40aad7289f..d76ead226d 100644 --- a/libs/remix-ui/drag-n-drop/src/index.ts +++ b/libs/remix-ui/drag-n-drop/src/index.ts @@ -1,2 +1,2 @@ -export * from './lib/remix-ui-drag-n-drop'; +export * from './lib/drag-n-drop'; diff --git a/libs/remix-ui/drag-n-drop/src/lib/context/moveContext.ts b/libs/remix-ui/drag-n-drop/src/lib/context/moveContext.ts new file mode 100644 index 0000000000..e41292a657 --- /dev/null +++ b/libs/remix-ui/drag-n-drop/src/lib/context/moveContext.ts @@ -0,0 +1,8 @@ +import { createContext } from "react"; +import { MoveContextType } from "../types"; + +export const MoveContext = createContext({ + dragged: "", + moveFile: () => {}, + currentlyMoved: () => {} +}) diff --git a/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx b/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx new file mode 100644 index 0000000000..eb220e5a75 --- /dev/null +++ b/libs/remix-ui/drag-n-drop/src/lib/drag-n-drop.tsx @@ -0,0 +1,85 @@ +import { extractParentFromKey } from "@remix-ui/helper" +import React, { useContext, useRef, useState } from "react" +import { MoveContext } from "./context/moveContext" +import { DraggableType, DragType } from "./types" + +export const Drag = (props: DragType) => { + const [dragged, setDragged] = useState("") + + return ( + { + setDragged(() => path) + }, + }} + > + {props.children} + + ) +} + +export const Draggable = (props: DraggableType) => { + const dragRef = useRef(null), + file = props.file, + context = useContext(MoveContext) + + const handleDrop = (event: React.DragEvent) => { + event.preventDefault() + + if (file.isDirectory) { + context.moveFile(file.path, context.dragged) + } else { + const path = extractParentFromKey(file.path) || '/' + + context.moveFile(path, context.dragged) + } + } + + const handleDragover = (event: React.DragEvent) => { + //Checks if the folder is opened + event.preventDefault() + if (file.isDirectory && !props.expandedPath.includes(file.path)) { + props.handleClickFolder(file.path, file.type) + } + } + + const handleDrag = () => { + if (context.dragged !== file.path) { + context.currentlyMoved(file.path) + } + } + + if (props.isDraggable) { + return <>{props.children} + } + + return ( + <> + { + props.isDraggable ? props.children : + { + handleDrop(event) + }} + onDragStart={() => { + if (file) { + handleDrag() + } + }} + onDragOver={(event) => { + if (file) { + handleDragover(event) + } + }} + > + {props.children} + + } + + ) +} diff --git a/libs/remix-ui/drag-n-drop/src/lib/remix-ui-drag-n-drop.tsx b/libs/remix-ui/drag-n-drop/src/lib/remix-ui-drag-n-drop.tsx deleted file mode 100644 index 39433bbe51..0000000000 --- a/libs/remix-ui/drag-n-drop/src/lib/remix-ui-drag-n-drop.tsx +++ /dev/null @@ -1,112 +0,0 @@ -import React, { - createContext, - ReactNode, - useContext, - useRef, - useState, -} from "react"; - - -export interface FileType { - path: string, - name: string, - isDirectory: boolean, - type: 'folder' | 'file' | 'gist', - child?: File[] -} - -interface MoveContextType { - dragged: string; - isDraggable?: boolean; - moveFile: (dest: string, dragged: string) => void; - currentlyMoved: (path: string) => void; -} -interface DraggableType { - children: ReactNode; - file: FileType; - isDraggable?: boolean; - expandedPath: string[]; - handleClickFolder: (path: string, type: string) => void; -} - -interface DragType { - children: ReactNode; - onFileMoved: (dest: string, dragged: string) => void; -} - -export const MoveContext = createContext({ - dragged: "", - moveFile: () => {}, - currentlyMoved: () => {}, -}); - -export const Drag = (props: DragType) => { - const [dragged, setDragged] = useState(""); - - return ( - { - setDragged(() => path); - }, - }} - > - {props.children} - - ); -}; - -export const Draggable = (props: DraggableType) => { - const dragRef = useRef(null), - file = props.file, - context = useContext(MoveContext); - - const handleDrop = (event: React.DragEvent) => { - event.preventDefault(); - - if (file.isDirectory) { - context.moveFile(file.path, context.dragged); - } - }; - - const handleDragover = (event: React.DragEvent) => { - //Checks if the folder is opened - event.preventDefault(); - if (file.isDirectory && !props.expandedPath.includes(file.path)) { - props.handleClickFolder(file.path, file.type); - } - }; - const handleDrag = () => { - if (context.dragged !== file.path) { - context.currentlyMoved(file.path); - } - }; - - if (props.isDraggable) { - return <>{props.children}; - } - - return ( - { - handleDrop(event); - }} - onDragStart={() => { - if (file) { - handleDrag(); - } - }} - onDragOver={(event) => { - if (file && file.isDirectory) { - handleDragover(event); - } - }} - > - {props.children} - - ); -}; diff --git a/libs/remix-ui/drag-n-drop/src/lib/types/index.ts b/libs/remix-ui/drag-n-drop/src/lib/types/index.ts new file mode 100644 index 0000000000..c278555c60 --- /dev/null +++ b/libs/remix-ui/drag-n-drop/src/lib/types/index.ts @@ -0,0 +1,29 @@ +import { ReactNode } from "react" + +export interface FileType { + path: string, + name: string, + isDirectory: boolean, + type: 'folder' | 'file' | 'gist', + child?: File[] +} + +export interface MoveContextType { + dragged: string + isDraggable?: boolean + moveFile: (dest: string, dragged: string) => void + currentlyMoved: (path: string) => void +} + +export interface DraggableType { + children: ReactNode + file: FileType + isDraggable?: boolean + expandedPath: string[] + handleClickFolder: (path: string, type: string) => void +} + +export interface DragType { + children: ReactNode + onFileMoved: (dest: string, dragged: string) => void +} diff --git a/libs/remix-ui/workspace/src/lib/contexts/index.ts b/libs/remix-ui/workspace/src/lib/contexts/index.ts index 2ba8b7394b..bca0673be5 100644 --- a/libs/remix-ui/workspace/src/lib/contexts/index.ts +++ b/libs/remix-ui/workspace/src/lib/contexts/index.ts @@ -34,16 +34,4 @@ export const FileSystemContext = createContext<{ dispatchMoveFile: (src: string, dest: string) => Promise, }>(null) - -interface MoveContextType{ - dragged: string, - moveFile: (dest: string) => void - currentlyMoved: (path: string) => void -} - -export const MoveContext = createContext({ - dragged:"", - moveFile:( )=> {}, - currentlyMoved: () => {} -}) \ No newline at end of file