sample-ui-component-library 0.0.8-dev → 0.0.10-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.8-dev",
+  "version": "0.0.10-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,11 +8,29 @@ export const editorReducer = (state, action) => {
     switch (action.type) {
 
         case "ADD_TAB": {
-            // TODO: Add some validation for the payload here.
+            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: 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/Gutter/Gutter.jsx

@@ -13,7 +13,7 @@ export const Gutter = ({ id, index, parentId }) => {
     const { setNodeRef, isOver } = useDroppable({
         id,
         data: {
-            type: "tab-gutter",
+            type: "EditorTabGutter",
             parentId: parentId,
             index: index,
         },

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

@@ -28,7 +28,7 @@ export const Tab = ({ id, parentId, node }) => {
     const { attributes, listeners, setNodeRef, transform } = useDraggable({
         id,
         data: {
-            type: "tab-draggable",
+            type: "EditorTab",
             parentId: parentId,
             node: node
         },

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

@@ -22,6 +22,7 @@ export const TreeNode = ({ id, node }) => {
         { 
             id,
             data: {
+                type: "FileTreeNode",
                 node: node
             }
          }

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,6 +51,16 @@ const Template = (args) => {
                 editorRef.current.addTab(node);
             }
         });
+
+
+        const node = {
+            "name": "SAMPLE",
+            "type": "file",
+            "uid": "dissr-f6459410-1634-4dbc-8d76-35896822158d",
+            "content": "1234"
+        }
+
+        editorRef.current.addTab(node,2);
     }, []);
 
     const onDragStart = (event) => {
@@ -71,7 +81,7 @@ const Template = (args) => {
             return;
         }
 
-        if (active.data.current.type === "tab-draggable" && over.data.current.type === "tab-gutter") {
+        if (active.data.current.type === "EditorTab" && over.data.current.type === "EditorTabGutter") {
             editorRef.current.moveTab(active.data.current.node.uid, over.data.current.index);
         }
     }

package/src/stories/FileBrowser.stories.js

@@ -39,18 +39,16 @@ 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);