sample-ui-component-library 0.0.9-dev → 0.0.11-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.9-dev",
+  "version": "0.0.11-dev",
   "description": "A library which contains sample UI elements that can be used for populating layouts.",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

package/src/components/Editor/Editor.jsx

@@ -37,8 +37,8 @@ export const Editor = forwardRef(({ }, ref) => {
         dispatch({ type: "MOVE_TAB", payload: { tabId, newIndex } });
     }, []);
 
-    const addTab = useCallback((tab) => {
-        dispatch({ type: "ADD_TAB", payload: tab });
+    const addTab = useCallback((tab, index) => {
+        dispatch({ type: "ADD_TAB", payload: { tab, index } });
     }, []);
 
     const setTabGroupId = useCallback((id) => {

package/src/components/Editor/EditorReducer.js

@@ -8,20 +8,29 @@ export const editorReducer = (state, action) => {
     switch (action.type) {
 
         case "ADD_TAB": {
-            // TODO: Add some validation for the payload here.
-            const tab = state.tabs.find(obj => obj.uid === action.payload.uid);
-            if (tab) {
-                console.warn(`Tab with id ${action.payload.uid} already exists`);
+            const { tab, index } = action.payload;
+
+            const tabInfo = state.tabs.find(obj => obj.uid === tab.uid);
+            if (tabInfo) {
+                console.warn(`Tab with id ${tabInfo.uid} already exists`);
                 return {
                     ...state,
-                    activeTab: tab
+                    activeTab: tabInfo
                 };
             }
             
+            // Insert tab at specific location if it was provided.
+            let tabs =  [...state.tabs];
+            if (index !== undefined && index < state.tabs.length) {
+                tabs.splice(index, 0, tab);
+            } else {
+                tabs.push(tab);
+            }
+
             return {
                 ...state,
-                tabs: [...state.tabs, action.payload],
-                activeTab: action.payload
+                tabs: tabs,
+                activeTab: tab
             };
         }
 

package/src/components/Editor/Tabs/Tab/Tab.jsx

@@ -30,7 +30,8 @@ export const Tab = ({ id, parentId, node }) => {
         data: {
             type: "EditorTab",
             parentId: parentId,
-            node: node
+            node: node,
+            preview: <TabPreview node={node} />
         },
     });
 
@@ -80,10 +81,12 @@ Tab.propTypes = {
 }
 
 
-export const TabPreview = ({info}) => {
+export const TabPreview = ({node}) => {
     return (
         <div className="tab" style={{ backgroundColor: ACTIVE_TAB_BG_COLOR, color: ACTIVE_TAB_FG_COLOR, opacity:0.5 }}>
-            <FileEarmark className="icon" />{info.label}<XLg className="close-icon"/>
+            <FileEarmark className="icon" />
+            <span className="tab-name">{node.name}</span>
+            <XLg className="close-icon"/>
         </div>
     );
 }

package/src/components/FileBrowser/FileBrowser.jsx

@@ -5,6 +5,7 @@ import {
     useCallback,
     useContext,
     useImperativeHandle,
+    useEffect,
 } from "react";
 import "./FileBrowser.scss";
 
@@ -20,13 +21,18 @@ import { fileBrowserReducer, initialState } from "./FileBrowserReducer";
  *
  * @return {JSX}
  */
-export const FileBrowser = forwardRef(({ }, ref) => {
+export const FileBrowser = forwardRef(({onSelectFile}, ref) => {
     const [state, dispatch] = useReducer(fileBrowserReducer, initialState);
 
     const addFileTree = useCallback((tree) => {
         dispatch({ type: "ADD_FILE_TREE", payload: tree });
     }, []);
 
+    useEffect(() => {
+        if (state.selectedNode && state.selectedNode.type === "file") {
+            onSelectFile(state.selectedNode);
+        }
+    }, [state.selectedNode]);
 
     const selectNode = useCallback((node) => {
         dispatch({ type: "SELECT_NODE", payload: node });

package/src/components/FileBrowser/FileBrowserReducer.js

@@ -1,13 +1,13 @@
 import {
     setDefaultCollapsed,
     collapseTree,
-    selectNode,
     flattenTree,
 } from "./helper";
 
 export const initialState = {
     tree: {},
     flattenedTree: {},
+    selectedNode: null,
     collapsedTree: [],
 };
 
@@ -28,8 +28,10 @@ export const fileBrowserReducer = (state, action) => {
 
         case "SELECT_NODE": {
             const tree = [...state.flattenedTree];
+            let selectedNode;
             tree.forEach((n) => {
                 if (n.uid === action.payload) {
+                    selectedNode = n;
                     n.selected = true;
                     n.collapsed = !n.collapsed;
                 } else {
@@ -40,7 +42,8 @@ export const fileBrowserReducer = (state, action) => {
             return {
                 ...state,
                 flattenedTree: tree,
-                collapsedTree: collapsedTree
+                collapsedTree: collapsedTree,
+                selectedNode: selectedNode
             }
         }
     }

package/src/components/FileBrowser/TreeNode/TreeNode.jsx

@@ -23,7 +23,8 @@ export const TreeNode = ({ id, node }) => {
             id,
             data: {
                 type: "FileTreeNode",
-                node: node
+                node: node,
+                preview: <TreeNodePreview node={node}/ >
             }
          }
     );
@@ -95,7 +96,7 @@ export const TreeNode = ({ id, node }) => {
 
 export const TreeNodePreview = ({node}) => {
     return (
-         <div className="file-node-row">
+         <div className="file-node-row" >
             <span className="file-name">{node.name}</span>
          </div>
     );

package/src/components/FileBrowser/helper.js

@@ -8,7 +8,6 @@ export const setDefaultCollapsed = (tree) => {
     return tree;
 }
 
-
 /**
  * Given a file tree, it flattens the tree into a list of nodes with the level of each node in the tree.
  * 
@@ -58,14 +57,3 @@ export const collapseTree = (tree) => {
     }
     return rows;
 }
-
-/**
- * Selects the given node and deselects all other nodes in the tree.
- */
-export const selectNode = (tree, node) => {
-    tree.forEach((n) => {
-        n.selected = false;
-    });
-    node.selected = true;
-    node.collapsed = !node.collapsed;
-}

package/src/stories/Editor.stories.js

@@ -51,31 +51,65 @@ const Template = (args) => {
                 editorRef.current.addTab(node);
             }
         });
-    }, []);
 
-    const onDragStart = (event) => {
-        console.log("");
-        console.log("Drag Started");
-        const dragPreview = editorRef.current.getPreviewElement(event.active.data.current.node.uid);
-        setDragPreviewLabel(dragPreview);
-    }
 
+        const node = {
+            "name": "SAMPLE",
+            "type": "file",
+            "uid": "dissr-f6459410-1634-4dbc-8d76-35896822158d",
+            "content": "1234"
+        }
+
+        editorRef.current.addTab(node,2);
+    }, []);
+
+const [dragging, setDragging] = useState(false);
+  
+    /**
+     * Callback for when drag ends.
+     */
     const handleDragEnd = (event) =>{
         const { active, over } = event;
+        console.log("Drag Ended");
+        const rect = event.activatorEvent;
+
+        console.log(active, over);
 
         if (over) {
-            console.log("Dragged item:", active);
-            console.log("Dropped on:", over);
+            console.log("Dragged item:", active.id);
+            console.log("Dropped on:", over.id);
         } else {
             console.log("Dropped outside any droppable");
-            return;
         }
+        setDragging(false);
+    }
 
-        if (active.data.current.type === "EditorTab" && over.data.current.type === "EditorTabGutter") {
-            editorRef.current.moveTab(active.data.current.node.uid, over.data.current.index);
-        }
+    /**
+     * Callback for when drag is started.
+     */
+    const onDragStart = (event) => {
+        console.log("Drag Started");
+        console.log(event.active.data);
+        setDragPreviewLabel(event.active.data.current.preview);
+        setDragging(true);
     }
 
+    // Manually track the drag position.
+    const [pos, setPos] = useState({ x: 0, y: 0 });
+    useEffect(() => {
+        if (!dragging) return;
+
+        const handleMove = (e) => {
+            setPos({ x: e.clientX, y: e.clientY });
+        };
+
+        window.addEventListener("pointermove", handleMove);
+
+        return () => {
+            window.removeEventListener("pointermove", handleMove);
+        };
+    }, [dragging]);
+
     const sensors = useSensors(
         useSensor(PointerSensor, {
             activationConstraint: {
@@ -89,9 +123,18 @@ const Template = (args) => {
             <div className="editorStoryWrapper">
                 <Editor ref={editorRef}{...args} />
             </div>
-            <DragOverlay modifiers={[offsetOverlay]} dropAnimation={null}>
-                {dragPreviewLabel}
-            </DragOverlay>
+            {dragging && (
+                <div
+                    style={{
+                        position: "fixed",
+                        left: pos.x,
+                        top: pos.y,
+                        pointerEvents: "none",
+                        zIndex: 9999,
+                    }}>
+                    {dragPreviewLabel}
+                </div>
+            )}  
         </DndContext>
     )
 }

package/src/stories/FileBrowser.stories.js

@@ -39,23 +39,24 @@ const Template = (args) => {
     
     const [dragPreviewLabel, setDragPreviewLabel] = useState(<></>);
 
-    const onNodeSelect = (selectedFile) => {
+    const onSelectFile = (selectedFile) => {
         action('Selected Node:')(selectedFile);
     }
 
     useEffect(() => {
-        updateArgs({onNodeSelect : onNodeSelect});
+        updateArgs({onSelectFile : onSelectFile});
     }, []);
 
-
     useLayoutEffect(() => {
         fileBrowserRef.current.addFileTree(args.tree);
-
         setTimeout(() => {
             fileBrowserRef.current.selectNode("dir-f6459410-1634-4dbc-8d76-35896822158d");
         }, 3000);
     }, []);
 
+
+    const [dragging, setDragging] = useState(false);
+  
     /**
      * Callback for when drag ends.
      */
@@ -64,7 +65,7 @@ const Template = (args) => {
         console.log("Drag Ended");
         const rect = event.activatorEvent;
 
-        console.log(over );
+        console.log(active, over);
 
         if (over) {
             console.log("Dragged item:", active.id);
@@ -72,6 +73,7 @@ const Template = (args) => {
         } else {
             console.log("Dropped outside any droppable");
         }
+        setDragging(false);
     }
 
     /**
@@ -79,10 +81,28 @@ const Template = (args) => {
      */
     const onDragStart = (event) => {
         console.log("Drag Started");
+        console.log(event.active.data);
         const dragPreview = fileBrowserRef.current.getPreviewElement(event.active.data.current.node.uid);
-        setDragPreviewLabel(dragPreview);
+        setDragPreviewLabel(event.active.data.current.preview);
+        setDragging(true);
     }
 
+    // Manually track the drag position.
+    const [pos, setPos] = useState({ x: 0, y: 0 });
+    useEffect(() => {
+        if (!dragging) return;
+
+        const handleMove = (e) => {
+            setPos({ x: e.clientX, y: e.clientY });
+        };
+
+        window.addEventListener("pointermove", handleMove);
+
+        return () => {
+            window.removeEventListener("pointermove", handleMove);
+        };
+    }, [dragging]);
+
     const sensors = useSensors(
         useSensor(PointerSensor, {
             activationConstraint: {
@@ -98,9 +118,18 @@ const Template = (args) => {
                     <FileBrowser ref={fileBrowserRef} {...args} />
                 </div>
             </div>
-            <DragOverlay modifiers={[offsetOverlay]} dropAnimation={null}>
-                {dragPreviewLabel}
-            </DragOverlay>
+            {dragging && (
+                <div
+                    style={{
+                        position: "fixed",
+                        left: pos.x,
+                        top: pos.y,
+                        pointerEvents: "none",
+                        zIndex: 9999,
+                    }}>
+                    {dragPreviewLabel}
+                </div>
+            )}  
         </DndContext>
     )
 }