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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sample-ui-component-library",
-  "version": "0.0.56-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";
@@ -32,11 +33,15 @@ export const Editor = forwardRef(({ onSelectAbstraction, onSelectTab, onUpdateCo
     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) => {

package/src/stories/Editor.stories.js

@@ -163,7 +163,11 @@ const Template = (args) => {
 
 
     const onUpdateContent = useCallback((tab, content) => {
-        action("Content Updated")(tab, content);
+        action("Content Updated")(tab.name + " was modified.");
+    }, []);
+
+    const onSelectTab = useCallback((tab) => {
+        action("Tab Selected")(tab&&tab.name);
     }, []);
 
     return (
@@ -174,7 +178,7 @@ const Template = (args) => {
                     <ToolBarEditor onSelectTool={onSelectTool} />
                 </div>
                 <div className="flow">
-                    <Editor ref={editorRef} onUpdateContent={onUpdateContent} onSelectAbstraction={onSelectAbstraction} {...args} />
+                    <Editor ref={editorRef} onSelectTab={onSelectTab} onUpdateContent={onUpdateContent} onSelectAbstraction={onSelectAbstraction} {...args} />
                     {dragging && (
                         <div
                             style={{