rc-dock - npm Package Compare versions

Comparing version 2.1.7 to 2.1.8

example/controller-layout.jsx

@@ -24,3 +24,3 @@ import React from 'react';
           {
-            tabs: [{id: 't0'}, {id: 't2'}, {id: 't3'}],
+            tabs: [{id: 't0'}, htmlTab, jsxTab],
           },
@@ -44,5 +44,11 @@ {
     let {id} = data;
-    if (id === 't0') {
-      return {...tab0, id};
+    switch (id) {
+      case 't0':
+        return {...tab0, id};
+      case jsxTab.id:
+        return jsxTab;
+      case htmlTab.id:
+        return htmlTab;
     }
+
     return {
@@ -54,5 +60,5 @@ id, title: id,
 
-  onLayoutChange = (newLayout) => {
+  onLayoutChange = (newLayout, currentTabId) => {
     // control DockLayout from state
-    console.log(newLayout);
+    console.log(currentTabId, newLayout);
     this.setState({layout: newLayout});
@@ -59,0 +65,0 @@ };

lib/Algorithm.js

@@ -93,5 +93,7 @@ "use strict";
     let tabs;
+    let activeId;
     if ('tabs' in source) {
         // source is PanelData
         tabs = source.tabs;
+        activeId = source.activeId;
     }
@@ -109,2 +111,5 @@ else {
         }
+        if (activeId) {
+            newPanel.activeId = activeId;
+        }
         layout = replacePanel(layout, panel, newPanel);
@@ -111,0 +116,0 @@ }

lib/Divider.js

@@ -63,3 +63,3 @@ "use strict";
         this.dragMove = (e) => {
-            if (e.event.shiftKey || e.event.ctrlKey) {
+            if (e.event.shiftKey || e.event.ctrlKey || e.event.altKey) {
                 this.dragMoveAll(e, e.dx, e.dy);
@@ -66,0 +66,0 @@ }

lib/DockData.d.ts

@@ -184,3 +184,3 @@ import React from 'react';
      */
-    onSilentChange(): void;
+    onSilentChange(currentTabId?: string): void;
     /**
@@ -187,0 +187,0 @@ * move a tab or a panel, if source or target is already in the layout, you can use the find method to get it with id first

lib/DockLayout.d.ts

@@ -23,3 +23,3 @@ import React, { CSSProperties } from "react";
      */
-    onLayoutChange?(newLayout: LayoutBase): void;
+    onLayoutChange?(newLayout: LayoutBase, currentTabId: string): void;
     /**
@@ -110,3 +110,3 @@ * - default mode: showing 4 to 9 squares to help picking drop areas
      */
-    changeLayout(layoutData: LayoutData): void;
+    changeLayout(layoutData: LayoutData, currentTabId: string): void;
     /** @ignore
@@ -116,3 +116,3 @@ * some layout change were handled by component silently
      */
-    onSilentChange(): void;
+    onSilentChange(currentTabId?: string): void;
     saveLayout(): LayoutBase;
@@ -119,0 +119,0 @@ /**

lib/DockLayout.js

@@ -52,3 +52,3 @@ "use strict";
                 newLayout = Algorithm.fixLayoutData(newLayout); // panel parent might need a fix
-                this.changeLayout(newLayout);
+                this.changeLayout(newLayout, null);
             }
@@ -137,3 +137,13 @@ }, 200);
             layout = Algorithm.fixLayoutData(layout);
-            this.changeLayout(layout);
+            let currentTabId = null;
+            if (direction !== 'remove') {
+                if (source.hasOwnProperty('tabs')) {
+                    currentTabId = source.activeId;
+                }
+                else {
+                    // when source is tab
+                    currentTabId = source.id;
+                }
+            }
+            this.changeLayout(layout, currentTabId);
         }
@@ -268,3 +278,3 @@ this.onDragStateChange(false);
      */
-    changeLayout(layoutData) {
+    changeLayout(layoutData, currentTabId) {
         let { layout, onLayoutChange } = this.props;
@@ -275,3 +285,3 @@ let savedLayout;
             layoutData.loadedFrom = savedLayout;
-            onLayoutChange(savedLayout);
+            onLayoutChange(savedLayout, currentTabId);
         }
@@ -287,3 +297,3 @@ if (!layout) {
      */
-    onSilentChange() {
+    onSilentChange(currentTabId = null) {
         let { onLayoutChange } = this.props;
@@ -294,3 +304,3 @@ if (onLayoutChange) {
             layout.loadedFrom = savedLayout;
-            onLayoutChange(savedLayout);
+            onLayoutChange(savedLayout, currentTabId);
         }
@@ -297,0 +307,0 @@ }

lib/DockPanel.d.ts

@@ -39,4 +39,5 @@ import React from "react";
     render(): React.ReactNode;
+    _unmounted: boolean;
     componentWillUnmount(): void;
 }
 export {};

lib/DockPanel.js

@@ -82,4 +82,6 @@ "use strict";
         this.onPanelHeaderDragEnd = (e) => {
-            this.setState({ draggingHeader: false });
-            this.context.onSilentChange();
+            if (!this._unmounted) {
+                this.setState({ draggingHeader: false });
+                this.context.onSilentChange(this.props.panelData.activeId);
+            }
         };
@@ -151,2 +153,3 @@ this.onPanelCornerDragTL = (e) => {
         };
+        this._unmounted = false;
     }
@@ -229,2 +232,3 @@ static set droppingPanel(panel) {
         }
+        this._unmounted = true;
     }
@@ -231,0 +235,0 @@ }

lib/DockTabs.js

@@ -152,3 +152,3 @@ "use strict";
             this.props.panelData.activeId = activeId;
-            this.context.onSilentChange();
+            this.context.onSilentChange(activeId);
             this.forceUpdate();
@@ -155,0 +155,0 @@ };

lib/dragdrop/DragDropDiv.js

@@ -84,8 +84,10 @@ "use strict";
             this.cleanup(state);
-            if (onDragEndT && !this.waitingMove) {
-                onDragEndT(state);
+            if (!this.waitingMove) {
+                if (e) {
+                    state.onDrop();
+                }
+                if (onDragEndT) {
+                    onDragEndT(state);
+                }
             }
-            if (e) {
-                state.onDrop();
-            }
             DragManager.destroyDraggingElement(state);
@@ -118,8 +120,10 @@ };
             this.cleanup(state);
-            if (onDragEndT && !this.waitingMove) {
-                onDragEndT(state);
+            if (!this.waitingMove) {
+                if (e) {
+                    state.onDrop();
+                }
+                if (onDragEndT) {
+                    onDragEndT(state);
+                }
             }
-            if (e) {
-                state.onDrop();
-            }
             DragManager.destroyDraggingElement(state);
@@ -126,0 +130,0 @@ };

package.json

 {
   "name": "rc-dock",
-  "version": "2.1.7",
+  "version": "2.1.8",
   "description": "dock layout for react component",
@@ -5,0 +5,0 @@ "repository": {

src/Algorithm.ts

@@ -110,5 +110,7 @@ import {
   let tabs: TabData[];
+  let activeId: string;
   if ('tabs' in source) {
     // source is PanelData
     tabs = source.tabs;
+    activeId = source.activeId;
   } else {
@@ -126,2 +128,5 @@ // source is TabData
     }
+    if (activeId) {
+      newPanel.activeId = activeId;
+    }
     layout = replacePanel(layout, panel, newPanel);
@@ -128,0 +133,0 @@ }

src/DockData.ts

@@ -218,3 +218,3 @@ import React from 'react';
    */
-  onSilentChange(): void;
+  onSilentChange(currentTabId?: string): void;
 
@@ -221,0 +221,0 @@ /**

No alert changes

Improved metrics

Total package byte prevSize

567463

0.32%

Lines of code

8436

0.61%

No dependency changes