From 36527910f31b94c80e39b3521538ae7e46a8079e Mon Sep 17 00:00:00 2001
From: mathuo <6710312+mathuo@users.noreply.github.com>
Date: Thu, 25 Apr 2024 22:14:39 +0100
Subject: [PATCH] chore: docs

---
 .../react/dockview/demo-dockview/src/app.tsx  |  24 ++-
 .../demo-dockview/src/defaultLayout.ts        |   4 +-
 .../demo-dockview/src/gridActions.tsx         |  11 +-
 .../demo-dockview/src/groupActions.tsx        | 199 +++++++++++-------
 .../demo-dockview/src/panelActions.tsx        | 125 +++++------
 5 files changed, 214 insertions(+), 149 deletions(-)

diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
index 4db4c8aeb..c657af112 100644
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/app.tsx
@@ -188,16 +188,20 @@ const DockviewDemo = (props: { theme?: string }) => {
         >
             <div>
                 <GridActions api={api} />
-                <PanelActions
-                    api={api}
-                    panels={panels}
-                    activePanel={activePanel}
-                />
-                <GroupActions
-                    api={api}
-                    groups={groups}
-                    activeGroup={activeGroup}
-                />
+                {api && (
+                    <PanelActions
+                        api={api}
+                        panels={panels}
+                        activePanel={activePanel}
+                    />
+                )}
+                {api && (
+                    <GroupActions
+                        api={api}
+                        groups={groups}
+                        activeGroup={activeGroup}
+                    />
+                )}
             </div>
             <div
                 style={{
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/defaultLayout.ts b/packages/docs/sandboxes/react/dockview/demo-dockview/src/defaultLayout.ts
index f944fdcb1..9a44a5a49 100644
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/defaultLayout.ts
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/defaultLayout.ts
@@ -3,9 +3,7 @@ import { DockviewApi } from 'dockview';
 export const nextId = (() => {
     let counter = 0;
 
-    return () => {
-        counter++;
-    };
+    return () => counter++;
 })();
 
 export function defaultConfig(api: DockviewApi) {
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
index 667e789ee..11466bc12 100644
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/gridActions.tsx
@@ -34,11 +34,12 @@ export const GridActions = (props: { api?: DockviewApi }) => {
         }
     };
 
-    const onAddPanel = () => {
+    const onAddPanel = (options?: { inactive: boolean }) => {
         props.api?.addPanel({
             id: `id_${Date.now().toString()}`,
             component: 'default',
             title: `Tab ${nextId()}`,
+            inactive: options?.inactive,
         });
     };
 
@@ -48,9 +49,15 @@ export const GridActions = (props: { api?: DockviewApi }) => {
 
     return (
         <div className="action-container">
-            <button className="text-button" onClick={onAddPanel}>
+            <button className="text-button" onClick={() => onAddPanel()}>
                 Add Panel
             </button>
+            <button
+                className="text-button"
+                onClick={() => onAddPanel({ inactive: true })}
+            >
+                Add Inactive Panel
+            </button>
             <button className="text-button" onClick={onAddGroup}>
                 Add Group
             </button>
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx
index ded3f3637..2741a8e11 100644
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/groupActions.tsx
@@ -1,85 +1,136 @@
-import { DockviewApi } from 'dockview';
+import { DockviewApi, DockviewGroupLocation } from 'dockview';
+import * as React from 'react';
+
+const GroupAction = (props: {
+    groupId: string;
+    groups: string[];
+    api: DockviewApi;
+    activeGroup?: string;
+}) => {
+    const onClick = () => {
+        props.api?.getGroup(props.groupId)?.focus();
+    };
+
+    const isActive = props.activeGroup === props.groupId;
+    const group = React.useMemo(
+        () => props.api.getGroup(props.groupId),
+        [props.api, props.groupId]
+    );
+
+    const [location, setLocation] =
+        React.useState<DockviewGroupLocation | null>(null);
+    const [isMaximized, setIsMaximized] = React.useState<boolean>(false);
+
+    React.useEffect(() => {
+        if (!group) {
+            setLocation(null);
+            return;
+        }
+
+        const disposable = group.api.onDidLocationChange((event) => {
+            setLocation(event.location);
+        });
+
+        const disposable2 = props.api.onDidMaximizedGroupChange(() => {
+            setIsMaximized(group.api.isMaximized());
+        });
+
+        setLocation(group.api.location);
+        setIsMaximized(group.api.isMaximized());
+
+        return () => {
+            disposable.dispose();
+            disposable2.dispose();
+        };
+    }, [group]);
+
+    return (
+        <div className="button-action">
+            <div style={{ display: 'flex' }}>
+                <button
+                    onClick={onClick}
+                    className={
+                        isActive ? 'demo-button selected' : 'demo-button'
+                    }
+                >
+                    {props.groupId}
+                </button>
+            </div>
+            <div style={{ display: 'flex' }}>
+                <button
+                    className={
+                        location?.type === 'floating'
+                            ? 'demo-icon-button selected'
+                            : 'demo-icon-button'
+                    }
+                    onClick={() => {
+                        if (group) {
+                            props.api.addFloatingGroup(group);
+                        }
+                    }}
+                >
+                    <span className="material-symbols-outlined">ad_group</span>
+                </button>
+                <button
+                    className={
+                        location?.type === 'popout'
+                            ? 'demo-icon-button selected'
+                            : 'demo-icon-button'
+                    }
+                    onClick={() => {
+                        if (group) {
+                            props.api.addPopoutGroup(group);
+                        }
+                    }}
+                >
+                    <span className="material-symbols-outlined">
+                        open_in_new
+                    </span>
+                </button>
+                <button
+                    className={
+                        isMaximized
+                            ? 'demo-icon-button selected'
+                            : 'demo-icon-button'
+                    }
+                    onClick={() => {
+                        if (group) {
+                            if (group.api.isMaximized()) {
+                                group.api.exitMaximized();
+                            } else {
+                                group.api.maximize();
+                            }
+                        }
+                    }}
+                >
+                    <span className="material-symbols-outlined">
+                        fullscreen
+                    </span>
+                </button>
+                <button
+                    className="demo-icon-button"
+                    onClick={() => {
+                        const panel = props.api?.getGroup(props.groupId);
+                        panel?.api.close();
+                    }}
+                >
+                    <span className="material-symbols-outlined">close</span>
+                </button>
+            </div>
+        </div>
+    );
+};
 
 export const GroupActions = (props: {
     groups: string[];
-    api?: DockviewApi;
+    api: DockviewApi;
     activeGroup?: string;
 }) => {
     return (
         <div className="action-container">
-            {props.groups.map((x) => {
-                const onClick = () => {
-                    props.api?.getGroup(x)?.focus();
-                };
+            {props.groups.map((groupId) => {
                 return (
-                    <div className="button-action">
-                        <div style={{ display: 'flex' }}>
-                            <button
-                                onClick={onClick}
-                                className={
-                                    props.activeGroup === x
-                                        ? 'demo-button selected'
-                                        : 'demo-button'
-                                }
-                            >
-                                {x}
-                            </button>
-                        </div>
-                        <div style={{ display: 'flex' }}>
-                            <button
-                                className="demo-icon-button"
-                                onClick={() => {
-                                    const panel = props.api?.getGroup(x);
-                                    if (panel) {
-                                        props.api?.addFloatingGroup(panel);
-                                    }
-                                }}
-                            >
-                                <span className="material-symbols-outlined">
-                                    ad_group
-                                </span>
-                            </button>
-                            <button
-                                className="demo-icon-button"
-                                onClick={() => {
-                                    const panel = props.api?.getGroup(x);
-                                    if (panel) {
-                                        props.api?.addPopoutGroup(panel);
-                                    }
-                                }}
-                            >
-                                <span className="material-symbols-outlined">
-                                    open_in_new
-                                </span>
-                            </button>
-                            <button
-                                className="demo-icon-button"
-                                onClick={() => {
-                                    const panel = props.api?.getGroup(x);
-                                    if (panel?.api.isMaximized()) {
-                                        panel.api.exitMaximized();
-                                    } else {
-                                        panel?.api.maximize();
-                                    }
-                                }}
-                            >
-                                <span className="material-symbols-outlined">
-                                    fullscreen
-                                </span>
-                            </button>
-                            <button
-                                className="demo-icon-button"
-                                onClick={() => {
-                                    const panel = props.api?.getGroup(x);
-                                    panel?.api.close();
-                                }}
-                            >
-                                <span className="material-symbols-outlined">
-                                    close
-                                </span>
-                            </button>
-                        </div>
-                    </div>
+                    <GroupAction key={groupId} {...props} groupId={groupId} />
                 );
             })}
         </div>
diff --git a/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx b/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx
index 5c378b637..d48bbadde 100644
--- a/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx
+++ b/packages/docs/sandboxes/react/dockview/demo-dockview/src/panelActions.tsx
@@ -1,71 +1,76 @@
 import { DockviewApi } from 'dockview';
 
+const PanelAction = (props: {
+    panels: string[];
+    api: DockviewApi;
+    activePanel?: string;
+    panelId: string;
+}) => {
+    const onClick = () => {
+        props.api?.getPanel(props.panelId)?.focus();
+    };
+    return (
+        <div className="button-action">
+            <div style={{ display: 'flex' }}>
+                <button
+                    className={
+                        props.activePanel === props.panelId
+                            ? 'demo-button selected'
+                            : 'demo-button'
+                    }
+                    onClick={onClick}
+                >
+                    {props.panelId}
+                </button>
+            </div>
+            <div style={{ display: 'flex' }}>
+                <button
+                    className="demo-icon-button"
+                    onClick={() => {
+                        const panel = props.api?.getPanel(props.panelId);
+                        if (panel) {
+                            props.api?.addFloatingGroup(panel);
+                        }
+                    }}
+                >
+                    <span className="material-symbols-outlined">ad_group</span>
+                </button>
+                <button
+                    className="demo-icon-button"
+                    onClick={() => {
+                        const panel = props.api?.getPanel(props.panelId);
+                        if (panel) {
+                            props.api?.addPopoutGroup(panel);
+                        }
+                    }}
+                >
+                    <span className="material-symbols-outlined">
+                        open_in_new
+                    </span>
+                </button>
+                <button
+                    className="demo-icon-button"
+                    onClick={() => {
+                        const panel = props.api?.getPanel(props.panelId);
+                        panel?.api.close();
+                    }}
+                >
+                    <span className="material-symbols-outlined">close</span>
+                </button>
+            </div>
+        </div>
+    );
+};
+
 export const PanelActions = (props: {
     panels: string[];
-    api?: DockviewApi;
+    api: DockviewApi;
     activePanel?: string;
 }) => {
     return (
         <div className="action-container">
-            {props.panels.map((x) => {
-                const onClick = () => {
-                    props.api?.getPanel(x)?.focus();
-                };
-                return (
-                    <div className="button-action">
-                        <div style={{ display: 'flex' }}>
-                            <button
-                                className={
-                                    props.activePanel === x
-                                        ? 'demo-button selected'
-                                        : 'demo-button'
-                                }
-                                onClick={onClick}
-                            >
-                                {x}
-                            </button>
-                        </div>
-                        <div style={{ display: 'flex' }}>
-                            <button
-                                className="demo-icon-button"
-                                onClick={() => {
-                                    const panel = props.api?.getPanel(x);
-                                    if (panel) {
-                                        props.api?.addFloatingGroup(panel);
-                                    }
-                                }}
-                            >
-                                <span className="material-symbols-outlined">
-                                    ad_group
-                                </span>
-                            </button>
-                            <button
-                                className="demo-icon-button"
-                                onClick={() => {
-                                    const panel = props.api?.getPanel(x);
-                                    if (panel) {
-                                        props.api?.addPopoutGroup(panel);
-                                    }
-                                }}
-                            >
-                                <span className="material-symbols-outlined">
-                                    open_in_new
-                                </span>
-                            </button>
-                            <button
-                                className="demo-icon-button"
-                                onClick={() => {
-                                    const panel = props.api?.getPanel(x);
-                                    panel?.api.close();
-                                }}
-                            >
-                                <span className="material-symbols-outlined">
-                                    close
-                                </span>
-                            </button>
-                        </div>
-                    </div>
-                );
+            {props.panels.map((id) => {
+                return <PanelAction key={id} {...props} panelId={id} />;
             })}
         </div>
     );