sample-ui-component-library 0.0.55-dev → 0.0.57-dev

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.55-dev",
+  "version": "0.0.57-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

@@ -12,6 +12,7 @@ import React, {
     useReducer,
     useContext,
     useRef,
+    useEffect
 } from "react";
 
 import { EditorContext } from "./EditorContext";
@@ -28,15 +29,19 @@ const MODES = {
  * 
  * @return {JSX}
  */
-export const Editor = forwardRef(({ onSelectAbstraction, onSelectTab }, ref) => {
+export const Editor = forwardRef(({ onSelectAbstraction, onSelectTab, onUpdateContent }, ref) => {
     const [state, dispatch] = useReducer(editorReducer, initialState);
     const editorRef = useRef();
 
-    const selectTab = useCallback((id) => {
-        dispatch({ type: "SELECT_TAB", payload: id });
+    useEffect(() => {
         if (onSelectTab) {
-            onSelectTab(id);
+            console.log(state.activeTab);
+            onSelectTab(state.activeTab);
         }
+    }, [state.activeTab]);
+
+    const selectTab = useCallback((id) => {
+        dispatch({ type: "SELECT_TAB", payload: id });
     }, [onSelectTab]);
 
     const closeTab = useCallback((id) => {
@@ -83,12 +88,19 @@ export const Editor = forwardRef(({ onSelectAbstraction, onSelectTab }, ref) =>
 
     const setUpdatedContent = useCallback((tab, content) => {
         dispatch({ type: "SET_UPDATED_CONTENT", payload: {tab, content} });
-    }, []);
+        if (onUpdateContent) {
+            onUpdateContent(tab, content);
+        }
+    }, [onUpdateContent]);
 
     const setContent = useCallback((tab, content) => {
         dispatch({ type: "SET_CONTENT", payload: {tab, content} });
     }, []);
 
+    const saveAll = useCallback(() => {
+        dispatch({ type: "SAVE_ALL", payload: {} });
+    }, []);
+
     const api_entries = {
         state,
         addTab,
@@ -103,7 +115,8 @@ export const Editor = forwardRef(({ onSelectAbstraction, onSelectTab }, ref) =>
         getTabs,
         getActiveTab,
         setUpdatedContent,
-        setContent
+        setContent,
+        saveAll
     }
 
     const api = useMemo(() => {

package/src/components/Editor/EditorReducer.js

@@ -163,6 +163,20 @@ export const editorReducer = (state, action) => {
             };
         }
 
+        case "SAVE_ALL": {
+            const newTabs = state.tabs.map(tab => {
+                tab.content = tab.updatedContent;
+                tab.isDirty = false;
+                return tab;
+            });
+
+            return {
+                ...state,
+                modifiedIndicator: !state.modifiedIndicator,
+                tabs: newTabs
+            };
+        }
+
         default: {
             return state;
         }

package/src/stories/Editor.stories.js

@@ -147,7 +147,7 @@ const Template = (args) => {
                 flattenTree(WorkspaceSampleTree.tree).slice(2,2)
             );
         } else if (tool === "implementation-mode") {
-            editorRef.current.setMode(EDITOR_MODES.DESIGN);
+            editorRef.current.saveAll();
         }
     }, [editorRef]);
 
@@ -161,6 +161,15 @@ const Template = (args) => {
         editorRef.current.setMappedIds(newMap);
     }, [mappedIds, setMappedIds, editorRef]);
 
+
+    const onUpdateContent = useCallback((tab, content) => {
+        action("Content Updated")(tab.name + " was modified.");
+    }, []);
+
+    const onSelectTab = useCallback((tab) => {
+        action("Tab Selected")(tab&&tab.name);
+    }, []);
+
     return (
         <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={handleDragEnd}>
 
@@ -169,7 +178,7 @@ const Template = (args) => {
                     <ToolBarEditor onSelectTool={onSelectTool} />
                 </div>
                 <div className="flow">
-                    <Editor ref={editorRef} onSelectAbstraction={onSelectAbstraction} {...args} />
+                    <Editor ref={editorRef} onSelectTab={onSelectTab} onUpdateContent={onUpdateContent} onSelectAbstraction={onSelectAbstraction} {...args} />
                     {dragging && (
                         <div
                             style={{