fix tab switching issue

Author: heswell

vuu-ui/packages/grid-layout/src/GridLayoutItem.tsx

@@ -30,10 +30,7 @@ import { IconButton } from "./IconButton";
 const classBaseItem = "vuuGridLayoutItem";
 
 export interface GridLayoutItemProps
-  extends Omit<
-      GridModelChildItemProps,
-      "contentDetached" | "contentVisible" | "type"
-    >,
+  extends Omit<GridModelChildItemProps, "contentDetached" | "type">,
     Omit<
       HTMLAttributes<HTMLDivElement>,
       "id" | "onDragStart" | "onDrop" | "style"
@@ -75,6 +72,7 @@ const getDragSource: DragSourceProvider = (evt) => {
 export const GridLayoutItem = ({
   children,
   className: classNameProp,
+  contentVisible: contentVisibleProp,
   "data-drop-target": dataDropTarget,
   header: headerProp,
   height,
@@ -109,6 +107,7 @@ export const GridLayoutItem = ({
     title,
     ...layoutProps
   } = useGridChildProps({
+    contentVisible: contentVisibleProp,
     dropTarget: dataDropTarget,
     header: headerProp,
     height,
@@ -120,15 +119,6 @@ export const GridLayoutItem = ({
     width,
   });
 
-  // console.log(
-  //   `[GridLayoutItem] #${id}
-  //     contentDetached=${contentDetached}
-  //     contentVisible=${contentVisible}
-  //     stackId=${stackId}
-  //     dropTarget = ${dropTarget}
-  //     `,
-  // );
-
   useEffect(
     () => () => {
       console.log(`unmount layout item ${id}`);
@@ -155,6 +145,8 @@ export const GridLayoutItem = ({
     onDragStart,
   });
 
+  console.log(`[GridLayoutItem] #${id} contentVisible ${contentVisible}`);
+
   const className = cx(classBaseItem, {
     "vuu-detached": contentDetached,
     "vuu-stacked": stacked && !contentDetached,

vuu-ui/packages/grid-layout/src/GridLayoutProvider.tsx

@@ -128,24 +128,6 @@ export const GridLayoutProvider = (
     return undefined;
   }, []);
 
-  /*
-        // return Object.entries(childElementMap).map(
-      //   ([gridLayoutItemId, element]) => {
-      //     // TODO type IS in here although the types shouldn't allow it
-      //     const { gridArea, type, ...gridLayoutItemProps } =
-      //       layout.gridLayoutItems[gridLayoutItemId];
-      //     return (
-      //       <GridLayoutItem
-      //         {...gridLayoutItemProps}
-      //         id={gridLayoutItemId}
-      //         style={{ gridArea }}
-      //         key={gridLayoutItemId}
-      //       >
-      //         {element}
-      //       </GridLayoutItem>
-      //     );
-
-  */
   const getSavedGrid = useCallback(
     (id: string): DeserializedGridLayout | undefined => {
       const layoutJSON = gridChildItemsMap.get(id);

vuu-ui/packages/grid-layout/src/GridModel.ts

@@ -30,21 +30,17 @@ export const isPixelUnit = (trackSize: TrackSize): trackSize is CSSTrackSize =>
 
 const NO_SPLITTERS: ISplitter[] = [];
 
+//TODO shouldn't id be here ?
 export interface GridLayoutChildItemDescriptor {
-  /**
-   * componentId is only required when a GridLayout is declared using JSX
-   * and child components are directly nested within GridLayout without GridItem
-   * wrappers.
-   * Each child component must have a unique id. The componentId here is used
-   * to match the  with the associated component. If GridItem wrappers are included
-   * explicitly in the JSX, componentId is not required in the
-   * GridLayoutChildItemDescriptor.
-   */
-  componentId?: string;
+  contentVisible?: boolean;
   dropTarget?: boolean | string;
   gridArea: string;
   header?: boolean;
   resizeable?: GridModelItemResizeable;
+  /**
+   * For GridLayoutItems that are 'stacked' (e.g. displayed in tabbed container)
+   * this is the id of the associated StackedLayoutItem.
+   */
   stackId?: string;
   title?: string;
 }
@@ -81,21 +77,13 @@ export interface GridLayoutModelCoordinates {
   row: GridLayoutModelPosition;
 }
 
-export interface GridModelChildItemProps {
+export interface GridModelChildItemProps
+  extends Omit<GridLayoutChildItemDescriptor, "gridArea"> {
   contentVisible?: boolean;
-  dropTarget?: boolean | string;
   fixed?: boolean;
-  header?: boolean;
   height?: number;
   id: string;
-  /**
-   * For GridLayoutItems that are 'stacked' (e.g. displayed in tabbed container)
-   * this is the id of the associated StackedLayoutItem.
-   */
-  stackId?: string;
-  resizeable?: GridModelItemResizeable;
   style: GridChildItemStyle;
-  title?: string;
   type?: GridModelItemType;
   width?: number;
 }
@@ -952,7 +940,11 @@ export class GridModel extends EventEmitter<GridModelEvents> {
     }
   };
 
-  setTabState(stackId: string, childItems: GridModelChildItem[]) {
+  setTabState(
+    stackId: string,
+    childItems: GridModelChildItem[],
+    activeItem = 0,
+  ) {
     console.log(`[GridModel] setTabState  ${stackId}`);
     let tabState = this.#tabState.get(stackId);
     if (tabState) {
@@ -962,15 +954,15 @@ export class GridModel extends EventEmitter<GridModelEvents> {
       id,
       label: title ?? `Label-${index + 1}`,
     }));
-    tabState = new TabState(stackId, 0, tabs);
+    tabState = new TabState(stackId, activeItem, tabs);
 
     tabState.on("active-change", this.handleTabSelectionChange);
     tabState.on("tab-added", this.handleTabAdded);
     tabState.on("tab-detached", this.handleTabDetached);
     tabState.on("tabs-change", this.handleTabsChange);
     tabState.on("tabs-removed", this.handleTabsRemoved);
 
-    this.activateStackedChildItem(stackId, tabs[0]);
+    this.activateStackedChildItem(stackId, tabs[activeItem]);
 
     this.#tabState.set(stackId, tabState);
     return tabState;
@@ -1034,16 +1026,37 @@ export class GridModel extends EventEmitter<GridModelEvents> {
       gridLayoutItems: this.#childItems.reduce<GridLayoutChildItemDescriptors>(
         (
           result,
-          { id, column, dropTarget, header, resizeable, row, stackId, title },
-        ) => {
-          result[id.replace(/^grid-/, "")] = {
+          {
+            id,
+            column,
+            contentVisible,
             dropTarget,
-            gridArea: `${row.start}/${column.start}/${row.end}/${column.end}`,
             header,
             resizeable,
+            row,
             stackId,
             title,
-          };
+            type,
+          },
+        ) => {
+          console.log(`[GridModel] toGridLayoutDescriptor ${id} = ${type}`);
+          if (stackId) {
+            console.log(
+              `[GridModel] is a stacked item, active item ? ${contentVisible === true} `,
+            );
+          }
+          // The stacked-content gridItems are a runtime construct, no need to serialize
+          if (type !== "stacked-content") {
+            result[id] = {
+              contentVisible,
+              dropTarget,
+              gridArea: `${row.start}/${column.start}/${row.end}/${column.end}`,
+              header,
+              resizeable,
+              stackId,
+              title,
+            };
+          }
           return result;
         },
         {},
@@ -1148,12 +1161,20 @@ export class GridModel extends EventEmitter<GridModelEvents> {
   private addChildItems(childItems: GridLayoutChildItemDescriptors) {
     for (const [
       id,
-      { dropTarget, header, resizeable, stackId, title, ...item },
+      {
+        contentVisible,
+        dropTarget,
+        header,
+        resizeable,
+        stackId,
+        title,
+        ...item
+      },
     ] of Object.entries(childItems)) {
       const { column, row } = getGridPosition(item.gridArea);
       this.addChildItem(
         new GridModelChildItem({
-          // id: `grid-${id}`,
+          contentVisible,
           id,
           column,
           dropTarget,

vuu-ui/packages/grid-layout/src/grid-layout-utils.ts

@@ -410,6 +410,17 @@ export const isFixedWidthChildItem = (item: GridModelChildItem) =>
 export const getGridArea = ({ column, row }: GridLayoutModelCoordinates) =>
   `${row.start}/${column.start}/${row.end}/${column.end}`;
 
+export const getActiveIndex = (childItems: GridModelChildItem[]) => {
+  const index = childItems.findIndex((item) => item.contentVisible);
+  if (childItems.length === 0) {
+    return -1;
+  } else if (index === -1) {
+    return 0;
+  } else {
+    return index;
+  }
+};
+
 export const getSharedGridPosition = (
   childItems: GridModelChildItem[],
 ): GridLayoutModelCoordinates => {

vuu-ui/packages/grid-layout/src/useGridChildProps.ts

@@ -23,7 +23,7 @@ export const useGridChildProps = ({
 
   let childItem = gridModel?.getChildItem(id);
   if (childItem) {
-    // console.log(`already registered child item ${id}`);
+    console.log(`already registered child item ${id}`);
   } else {
     const { column, row } = getGridPosition(style.gridArea);
     childItem = new GridModelChildItem({

vuu-ui/packages/grid-layout/src/useGridLayout.tsx

@@ -27,7 +27,11 @@ import {
   setGridColumn,
   setGridRow,
 } from "./grid-dom-utils";
-import { getGridArea, getSharedGridPosition } from "./grid-layout-utils";
+import {
+  getActiveIndex,
+  getGridArea,
+  getSharedGridPosition,
+} from "./grid-layout-utils";
 import {
   GridLayoutDispatch,
   GridLayoutDropHandler,
@@ -697,7 +701,8 @@ export const useGridLayout = ({
       const tabs = gridModel.getChildItem(stackId);
       if (tabs === undefined) {
         const { column, row } = getSharedGridPosition(items);
-        gridModel.setTabState(stackId, items);
+        const activeIndex = getActiveIndex(items);
+        gridModel.setTabState(stackId, items, activeIndex);
         const stackedItem = new GridModelChildItem({
           column,
           id: stackId,

vuu-ui/showcase/src/examples/html/GridLayoutPersistence.examples.tsx

@@ -91,6 +91,7 @@ export const SingleStackDeserialized = () => {
             title: "Blue",
           },
           red: {
+            contentVisible: true,
             gridArea: "1/1/2/2",
             header: true,
             resizeable: "hv",