Merge pull request #68 from mathuo/51-expose-params-item-on-panel-int…

…erfaces chore: fix demo
mathuo · Apr 23, 2022 · a2c269d · a2c269d
2 parents 7071cf7 + 3c7781d
commit a2c269d
Show file tree

Hide file tree

Showing 9 changed files with 14 additions and 44 deletions.
diff --git a/packages/dockview-demo/src/layout-grid/application.tsx b/packages/dockview-demo/src/layout-grid/application.tsx
@@ -88,7 +88,7 @@ export const Application = () => {
             });
         }
 
-        event.api.onGridEvent(() => {
+        event.api.onDidLayoutChange(() => {
             localStorage.setItem(
                 'dockview-layout',
                 JSON.stringify(event.api.toJSON())

diff --git a/packages/dockview-demo/src/layout-grid/layoutGrid.tsx b/packages/dockview-demo/src/layout-grid/layoutGrid.tsx
@@ -2,7 +2,6 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import {
     IDockviewPanelProps,
-    GroupChangeKind,
     IGridviewPanelProps,
     TabContextMenuEvent,
     DockviewReadyEvent,
@@ -161,11 +160,8 @@ export const TestGrid = (props: IGridviewPanelProps) => {
                 const state = api.toJSON();
                 localStorage.setItem('dockview', JSON.stringify(state));
             }),
-            api.onGridEvent((e) => {
-                console.log(e);
-                if (e.kind === GroupChangeKind.PANEL_ACTIVE) {
-                    setSelectedPanel(e.panel?.id || '');
-                }
+            api.onDidActivePanelChange((e) => {
+                setSelectedPanel(e?.id || '');
             })
         );
 

diff --git a/packages/dockview-demo/src/stories/dockview/dockview.iframe.stories.tsx b/packages/dockview-demo/src/stories/dockview/dockview.iframe.stories.tsx
@@ -51,7 +51,6 @@ const components: PanelCollection<IDockviewPanelProps> = {
 };
 
 export const Iframe = (props: {
-    onEvent: (name: string) => void;
     theme: string;
     hideBorders: boolean;
     disableAutoResizing: boolean;
@@ -61,8 +60,6 @@ export const Iframe = (props: {
     const onReady = (event: DockviewReadyEvent) => {
         api.current = event.api;
 
-        event.api.onGridEvent((e) => props.onEvent(e.kind));
-
         event.api.addPanel({
             id: 'panel1',
             title: 'Standard Panel',
@@ -107,6 +104,5 @@ export default {
                 options: ['dockview-theme-dark', 'dockview-theme-light'],
             },
         },
-        onEvent: { action: 'onEvent' },
     },
 } as Meta;
diff --git a/packages/dockview-demo/src/stories/dockview/dockview.params.stories.tsx b/packages/dockview-demo/src/stories/dockview/dockview.params.stories.tsx
@@ -61,7 +61,6 @@ const components: PanelCollection<IDockviewPanelProps<any>> = {
 };
 
 export const Params = (props: {
-    onEvent: (name: string) => void;
     theme: string;
     hideBorders: boolean;
     disableAutoResizing: boolean;
@@ -93,8 +92,6 @@ export const Params = (props: {
     const onReady = (event: DockviewReadyEvent) => {
         api.current = event.api;
 
-        event.api.onGridEvent((e) => props.onEvent(e.kind));
-
         event.api.addPanel({
             id: 'panel1',
             component: 'ticker',
@@ -152,6 +149,5 @@ export default {
                 options: ['dockview-theme-dark', 'dockview-theme-light'],
             },
         },
-        onEvent: { action: 'onEvent' },
     },
 } as Meta;
diff --git a/packages/dockview-demo/src/stories/dockview/dockview.simple.stories.tsx b/packages/dockview-demo/src/stories/dockview/dockview.simple.stories.tsx
@@ -26,7 +26,6 @@ const components: PanelCollection<IDockviewPanelProps> = {
 };
 
 export const Simple = (props: {
-    onEvent: (name: string) => void;
     theme: string;
     hideBorders: boolean;
     disableAutoResizing: boolean;
@@ -36,8 +35,6 @@ export const Simple = (props: {
     const onReady = (event: DockviewReadyEvent) => {
         api.current = event.api;
 
-        event.api.onGridEvent((e) => props.onEvent(e.kind));
-
         event.api.addPanel({
             id: 'panel1',
             component: 'default',
@@ -92,6 +89,5 @@ export default {
                 options: ['dockview-theme-dark', 'dockview-theme-light'],
             },
         },
-        onEvent: { action: 'onEvent' },
     },
 } as Meta;
diff --git a/packages/dockview-demo/src/stories/dockview/dockview.tab.stories.tsx b/packages/dockview-demo/src/stories/dockview/dockview.tab.stories.tsx
@@ -47,7 +47,6 @@ const components: PanelCollection<IDockviewPanelProps> = {
 };
 
 export const Tab = (props: {
-    onEvent: (name: string) => void;
     theme: string;
     hideBorders: boolean;
     disableAutoResizing: boolean;
@@ -57,8 +56,6 @@ export const Tab = (props: {
     const onReady = (event: DockviewReadyEvent) => {
         api.current = event.api;
 
-        event.api.onGridEvent((e) => props.onEvent(e.kind));
-
         event.api.addPanel({
             id: 'panel1',
             component: 'default',
@@ -113,6 +110,5 @@ export default {
                 options: ['dockview-theme-dark', 'dockview-theme-light'],
             },
         },
-        onEvent: { action: 'onEvent' },
     },
 } as Meta;
diff --git a/packages/dockview-demo/src/stories/dockview/dockview.watermark.stories.tsx b/packages/dockview-demo/src/stories/dockview/dockview.watermark.stories.tsx
@@ -2,7 +2,6 @@ import {
     DockviewApi,
     DockviewReact,
     DockviewReadyEvent,
-    GroupChangeKind,
     IDockviewPanelProps,
     IWatermarkPanelProps,
     PanelCollection,
@@ -36,16 +35,17 @@ const WatermarkPanel = (props: IWatermarkPanelProps) => {
 
     React.useEffect(() => {
         const disposables = new CompositeDisposable(
-            props.containerApi.onGridEvent((event) => {
-                switch (event.kind) {
-                    case GroupChangeKind.ADD_GROUP:
-                    case GroupChangeKind.REMOVE_GROUP:
-                    case GroupChangeKind.ADD_PANEL:
-                    case GroupChangeKind.REMOVE_PANEL:
-                        setSize(props.containerApi.size);
-                        setPanels(props.containerApi.totalPanels);
-                        break;
-                }
+            props.containerApi.onDidAddGroup((event) => {
+                setSize(props.containerApi.size);
+            }),
+            props.containerApi.onDidRemoveGroup((event) => {
+                setSize(props.containerApi.size);
+            }),
+            props.containerApi.onDidAddPanel((event) => {
+                setPanels(props.containerApi.totalPanels);
+            }),
+            props.containerApi.onDidRemovePanel((event) => {
+                setPanels(props.containerApi.totalPanels);
             })
         );
 
@@ -96,7 +96,6 @@ const WatermarkPanel = (props: IWatermarkPanelProps) => {
 };
 
 export const Watermark = (props: {
-    onEvent: (name: string) => void;
     theme: string;
     hideBorders: boolean;
     disableAutoResizing: boolean;
@@ -106,8 +105,6 @@ export const Watermark = (props: {
     const onReady = (event: DockviewReadyEvent) => {
         api.current = event.api;
 
-        event.api.onGridEvent((e) => props.onEvent(e.kind));
-
         event.api.addEmptyGroup();
     };
 
@@ -144,6 +141,5 @@ export default {
                 options: ['dockview-theme-dark', 'dockview-theme-light'],
             },
         },
-        onEvent: { action: 'onEvent' },
     },
 } as Meta;
diff --git a/packages/dockview-demo/src/stories/gridview/gridview.params.stories.tsx b/packages/dockview-demo/src/stories/gridview/gridview.params.stories.tsx
@@ -25,7 +25,6 @@ const components: PanelCollection<IGridviewPanelProps<any>> = {
 };
 
 export const Params = (props: {
-    onEvent: (name: string) => void;
     theme: string;
     hideBorders: boolean;
     disableAutoResizing: boolean;
@@ -54,8 +53,6 @@ export const Params = (props: {
     const onReady = (event: GridviewReadyEvent) => {
         api.current = event.api;
 
-        event.api.onGridEvent((e) => props.onEvent(e.kind));
-
         event.api.addPanel({
             id: 'panel1',
             component: 'ticker',
@@ -106,6 +103,5 @@ export default {
                 options: ['dockview-theme-dark', 'dockview-theme-light'],
             },
         },
-        onEvent: { action: 'onEvent' },
     },
 } as Meta;
diff --git a/packages/dockview-demo/src/stories/splitview/splitview.params.stories.tsx b/packages/dockview-demo/src/stories/splitview/splitview.params.stories.tsx
@@ -25,7 +25,6 @@ const components: PanelCollection<ISplitviewPanelProps<any>> = {
 };
 
 export const Params = (props: {
-    onEvent: (name: string) => void;
     theme: string;
     hideBorders: boolean;
     disableAutoResizing: boolean;
@@ -104,6 +103,5 @@ export default {
                 options: ['dockview-theme-dark', 'dockview-theme-light'],
             },
         },
-        onEvent: { action: 'onEvent' },
     },
 } as Meta;