rc-dock - npm Package Compare versions

Comparing version 3.2.8 to 3.2.9

es/DockData.d.ts

@@ -6,6 +6,7 @@ import React from 'react';
      * whether tab can be dragged into float layer
+     * If value is "singleTab", float panel can't have multiple tabs
      *
      * default: false
      */
-    floatable?: boolean;
+    floatable?: boolean | 'singleTab';
     /**
@@ -12,0 +13,0 @@ * whether tab can be converted to native window, only works when floatable is true

es/DockDropEdge.d.ts

@@ -14,3 +14,3 @@ import React from "react";
     getRef: (r: HTMLDivElement) => void;
-    getDirection(e: DragState, group: TabGroup, samePanel: boolean): {
+    getDirection(e: DragState, group: TabGroup, samePanel: boolean, tabLength: number): {
         direction: DropDirection;
@@ -17,0 +17,0 @@ mode?: DockMode;

es/DockDropEdge.js

@@ -12,3 +12,3 @@ import React from "react";
         this.onDragOver = (e) => {
-            var _a;
+            var _a, _b, _c;
             let { panelData, panelElement, dropFromPanel } = this.props;
@@ -22,3 +22,3 @@ let dockId = this.context.getDockId();
             }
-            let { direction, mode, depth } = this.getDirection(e, fromGroup, draggingPanel === panelData);
+            let { direction, mode, depth } = this.getDirection(e, fromGroup, draggingPanel === panelData, (_c = (_b = draggingPanel === null || draggingPanel === void 0 ? void 0 : draggingPanel.tabs) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 1);
             depth = this.getActualDepth(depth, mode, direction);
@@ -41,2 +41,3 @@ if (!direction || (direction === 'float' && dropFromPanel.panelLock)) {
         this.onDrop = (e) => {
+            var _a, _b;
             let { panelData, dropFromPanel } = this.props;
@@ -51,3 +52,3 @@ let dockId = this.context.getDockId();
             if (source) {
-                let { direction, mode, depth } = this.getDirection(e, fromGroup, draggingPanel === panelData);
+                let { direction, mode, depth } = this.getDirection(e, fromGroup, draggingPanel === panelData, (_b = (_a = draggingPanel === null || draggingPanel === void 0 ? void 0 : draggingPanel.tabs) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 1);
                 depth = this.getActualDepth(depth, mode, direction);
@@ -65,3 +66,3 @@ if (!direction) {
     }
-    getDirection(e, group, samePanel) {
+    getDirection(e, group, samePanel, tabLength) {
         let rect = this._ref.getBoundingClientRect();
@@ -93,3 +94,11 @@ let widthRate = Math.min(rect.width, 500);
         else if (group.floatable) {
-            return { direction: 'float', mode: 'float', depth: 0 };
+            if (group.floatable === 'singleTab') {
+                if (tabLength === 1) {
+                    // singleTab can float only with one tab
+                    return { direction: 'float', mode: 'float', depth: 0 };
+                }
+            }
+            else {
+                return { direction: 'float', mode: 'float', depth: 0 };
+            }
         }
@@ -150,3 +159,3 @@ switch (min) {
     render() {
-        return (React.createElement(DragDropDiv, { getRef: this.getRef, className: 'dock-drop-edge', onDragOverT: this.onDragOver, onDragLeaveT: this.onDragLeave, onDropT: this.onDrop }));
+        return (React.createElement(DragDropDiv, { getRef: this.getRef, className: "dock-drop-edge", onDragOverT: this.onDragOver, onDragLeaveT: this.onDragLeave, onDropT: this.onDrop }));
     }
@@ -153,0 +162,0 @@ componentWillUnmount() {

es/DockDropLayer.js

@@ -59,3 +59,3 @@ import React from "react";
         return (React.createElement(DragDropDiv, { className: classes.join(' '), onDragOverT: this.onDragOver, onDragLeaveT: this.onDragLeave, onDropT: this.onDrop },
-            React.createElement("div", { className: 'dock-drop-square-box' })));
+            React.createElement("div", { className: "dock-drop-square-box" })));
     }
@@ -70,8 +70,8 @@ componentWillUnmount() {
         if (mode === 'horizontal') {
-            children.push(React.createElement(DockDropSquare, { key: `top${depth}`, direction: 'top', depth: depth, panelData: panelData, panelElement: panelElement }));
-            children.push(React.createElement(DockDropSquare, { key: `bottom${depth}`, direction: 'bottom', depth: depth, panelData: panelData, panelElement: panelElement }));
+            children.push(React.createElement(DockDropSquare, { key: `top${depth}`, direction: "top", depth: depth, panelData: panelData, panelElement: panelElement }));
+            children.push(React.createElement(DockDropSquare, { key: `bottom${depth}`, direction: "bottom", depth: depth, panelData: panelData, panelElement: panelElement }));
         }
         else {
-            children.push(React.createElement(DockDropSquare, { key: `left${depth}`, direction: 'left', depth: depth, panelData: panelData, panelElement: panelElement }));
-            children.push(React.createElement(DockDropSquare, { key: `right${depth}`, direction: 'right', depth: depth, panelData: panelData, panelElement: panelElement }));
+            children.push(React.createElement(DockDropSquare, { key: `left${depth}`, direction: "left", depth: depth, panelData: panelData, panelElement: panelElement }));
+            children.push(React.createElement(DockDropSquare, { key: `right${depth}`, direction: "right", depth: depth, panelData: panelData, panelElement: panelElement }));
         }
@@ -89,4 +89,7 @@ }
             (!draggingPanel ||
-                (!draggingPanel.panelLock && ((_a = draggingPanel.parent) === null || _a === void 0 ? void 0 : _a.mode) !== 'float'))) {
-            children.push(React.createElement(DockDropSquare, { key: 'float', direction: 'float', panelData: panelData, panelElement: panelElement }));
+                (!draggingPanel.panelLock && // panel with panelLock can't float
+                    ((_a = draggingPanel.parent) === null || _a === void 0 ? void 0 : _a.mode) !== 'float' && // don't show float drop when over a float panel
+                    !(fromGroup.floatable === 'singleTab' && draggingPanel.tabs.length > 1) // singleTab can float only with one tab
+                ))) {
+            children.push(React.createElement(DockDropSquare, { key: "float", direction: "float", panelData: panelData, panelElement: panelElement }));
         }
@@ -99,3 +102,3 @@ if (draggingPanel !== panelData && !fromGroup.disableDock) { // don't drop panel to itself
                 // dock to tabs
-                children.push(React.createElement(DockDropSquare, { key: 'middle', direction: 'middle', panelData: panelData, panelElement: panelElement }));
+                children.push(React.createElement(DockDropSquare, { key: "middle", direction: "middle", panelData: panelData, panelElement: panelElement }));
             }
@@ -111,5 +114,5 @@ let box = panelData.parent;
         }
-        return (React.createElement("div", { className: 'dock-drop-layer' }, children));
+        return (React.createElement("div", { className: "dock-drop-layer" }, children));
     }
 }
 DockDropLayer.contextType = DockContextType;

es/DockTabs.js

@@ -59,2 +59,3 @@ import React from "react";
         this.onDragOver = (e) => {
+            var _a, _b;
             let dockId = this.context.getDockId();
@@ -79,5 +80,9 @@ let tab = DragManager.DragState.getData('tab', dockId);
             }
+            let tabGroup = this.context.getGroup(group);
             if (group !== this.data.group) {
                 e.reject();
             }
+            else if ((tabGroup === null || tabGroup === void 0 ? void 0 : tabGroup.floatable) === 'singleTab' && ((_b = (_a = this.data.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.mode) === 'float') {
+                e.reject();
+            }
             else if (tab && tab !== this.data) {
@@ -84,0 +89,0 @@ let direction = this.getDropDirection(e);

HISTORY.md

 # History
 ----
 
-## 3.2.1 / 2022-01-10
+## 3.2.9 / 2022-01-17
+- new TabGroup.floatable option: "singleTab"
+
+## 3.2.8 / 2022-01-10
 - add support to resize float panel by dragging panel edges 
@@ -6,0 +9,0 @@

lib/DockData.d.ts

@@ -6,6 +6,7 @@ import React from 'react';
      * whether tab can be dragged into float layer
+     * If value is "singleTab", float panel can't have multiple tabs
      *
      * default: false
      */
-    floatable?: boolean;
+    floatable?: boolean | 'singleTab';
     /**
@@ -12,0 +13,0 @@ * whether tab can be converted to native window, only works when floatable is true

lib/DockDropEdge.d.ts

@@ -14,3 +14,3 @@ import React from "react";
     getRef: (r: HTMLDivElement) => void;
-    getDirection(e: DragState, group: TabGroup, samePanel: boolean): {
+    getDirection(e: DragState, group: TabGroup, samePanel: boolean, tabLength: number): {
         direction: DropDirection;
@@ -17,0 +17,0 @@ mode?: DockMode;

lib/DockDropEdge.js

@@ -18,3 +18,3 @@ "use strict";
         this.onDragOver = (e) => {
-            var _a;
+            var _a, _b, _c;
             let { panelData, panelElement, dropFromPanel } = this.props;
@@ -28,3 +28,3 @@ let dockId = this.context.getDockId();
             }
-            let { direction, mode, depth } = this.getDirection(e, fromGroup, draggingPanel === panelData);
+            let { direction, mode, depth } = this.getDirection(e, fromGroup, draggingPanel === panelData, (_c = (_b = draggingPanel === null || draggingPanel === void 0 ? void 0 : draggingPanel.tabs) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 1);
             depth = this.getActualDepth(depth, mode, direction);
@@ -47,2 +47,3 @@ if (!direction || (direction === 'float' && dropFromPanel.panelLock)) {
         this.onDrop = (e) => {
+            var _a, _b;
             let { panelData, dropFromPanel } = this.props;
@@ -57,3 +58,3 @@ let dockId = this.context.getDockId();
             if (source) {
-                let { direction, mode, depth } = this.getDirection(e, fromGroup, draggingPanel === panelData);
+                let { direction, mode, depth } = this.getDirection(e, fromGroup, draggingPanel === panelData, (_b = (_a = draggingPanel === null || draggingPanel === void 0 ? void 0 : draggingPanel.tabs) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 1);
                 depth = this.getActualDepth(depth, mode, direction);
@@ -71,3 +72,3 @@ if (!direction) {
     }
-    getDirection(e, group, samePanel) {
+    getDirection(e, group, samePanel, tabLength) {
         let rect = this._ref.getBoundingClientRect();
@@ -99,3 +100,11 @@ let widthRate = Math.min(rect.width, 500);
         else if (group.floatable) {
-            return { direction: 'float', mode: 'float', depth: 0 };
+            if (group.floatable === 'singleTab') {
+                if (tabLength === 1) {
+                    // singleTab can float only with one tab
+                    return { direction: 'float', mode: 'float', depth: 0 };
+                }
+            }
+            else {
+                return { direction: 'float', mode: 'float', depth: 0 };
+            }
         }
@@ -156,3 +165,3 @@ switch (min) {
     render() {
-        return (react_1.default.createElement(DragDropDiv_1.DragDropDiv, { getRef: this.getRef, className: 'dock-drop-edge', onDragOverT: this.onDragOver, onDragLeaveT: this.onDragLeave, onDropT: this.onDrop }));
+        return (react_1.default.createElement(DragDropDiv_1.DragDropDiv, { getRef: this.getRef, className: "dock-drop-edge", onDragOverT: this.onDragOver, onDragLeaveT: this.onDragLeave, onDropT: this.onDrop }));
     }
@@ -159,0 +168,0 @@ componentWillUnmount() {

lib/DockDropLayer.js

@@ -65,3 +65,3 @@ "use strict";
         return (react_1.default.createElement(DragDropDiv_1.DragDropDiv, { className: classes.join(' '), onDragOverT: this.onDragOver, onDragLeaveT: this.onDragLeave, onDropT: this.onDrop },
-            react_1.default.createElement("div", { className: 'dock-drop-square-box' })));
+            react_1.default.createElement("div", { className: "dock-drop-square-box" })));
     }
@@ -77,8 +77,8 @@ componentWillUnmount() {
         if (mode === 'horizontal') {
-            children.push(react_1.default.createElement(DockDropSquare, { key: `top${depth}`, direction: 'top', depth: depth, panelData: panelData, panelElement: panelElement }));
-            children.push(react_1.default.createElement(DockDropSquare, { key: `bottom${depth}`, direction: 'bottom', depth: depth, panelData: panelData, panelElement: panelElement }));
+            children.push(react_1.default.createElement(DockDropSquare, { key: `top${depth}`, direction: "top", depth: depth, panelData: panelData, panelElement: panelElement }));
+            children.push(react_1.default.createElement(DockDropSquare, { key: `bottom${depth}`, direction: "bottom", depth: depth, panelData: panelData, panelElement: panelElement }));
         }
         else {
-            children.push(react_1.default.createElement(DockDropSquare, { key: `left${depth}`, direction: 'left', depth: depth, panelData: panelData, panelElement: panelElement }));
-            children.push(react_1.default.createElement(DockDropSquare, { key: `right${depth}`, direction: 'right', depth: depth, panelData: panelData, panelElement: panelElement }));
+            children.push(react_1.default.createElement(DockDropSquare, { key: `left${depth}`, direction: "left", depth: depth, panelData: panelData, panelElement: panelElement }));
+            children.push(react_1.default.createElement(DockDropSquare, { key: `right${depth}`, direction: "right", depth: depth, panelData: panelData, panelElement: panelElement }));
         }
@@ -96,4 +96,7 @@ }
             (!draggingPanel ||
-                (!draggingPanel.panelLock && ((_a = draggingPanel.parent) === null || _a === void 0 ? void 0 : _a.mode) !== 'float'))) {
-            children.push(react_1.default.createElement(DockDropSquare, { key: 'float', direction: 'float', panelData: panelData, panelElement: panelElement }));
+                (!draggingPanel.panelLock && // panel with panelLock can't float
+                    ((_a = draggingPanel.parent) === null || _a === void 0 ? void 0 : _a.mode) !== 'float' && // don't show float drop when over a float panel
+                    !(fromGroup.floatable === 'singleTab' && draggingPanel.tabs.length > 1) // singleTab can float only with one tab
+                ))) {
+            children.push(react_1.default.createElement(DockDropSquare, { key: "float", direction: "float", panelData: panelData, panelElement: panelElement }));
         }
@@ -106,3 +109,3 @@ if (draggingPanel !== panelData && !fromGroup.disableDock) { // don't drop panel to itself
                 // dock to tabs
-                children.push(react_1.default.createElement(DockDropSquare, { key: 'middle', direction: 'middle', panelData: panelData, panelElement: panelElement }));
+                children.push(react_1.default.createElement(DockDropSquare, { key: "middle", direction: "middle", panelData: panelData, panelElement: panelElement }));
             }
@@ -118,3 +121,3 @@ let box = panelData.parent;
         }
-        return (react_1.default.createElement("div", { className: 'dock-drop-layer' }, children));
+        return (react_1.default.createElement("div", { className: "dock-drop-layer" }, children));
     }
@@ -121,0 +124,0 @@ }

lib/DockTabs.js

@@ -84,2 +84,3 @@ "use strict";
         this.onDragOver = (e) => {
+            var _a, _b;
             let dockId = this.context.getDockId();
@@ -104,5 +105,9 @@ let tab = DragManager.DragState.getData('tab', dockId);
             }
+            let tabGroup = this.context.getGroup(group);
             if (group !== this.data.group) {
                 e.reject();
             }
+            else if ((tabGroup === null || tabGroup === void 0 ? void 0 : tabGroup.floatable) === 'singleTab' && ((_b = (_a = this.data.parent) === null || _a === void 0 ? void 0 : _a.parent) === null || _b === void 0 ? void 0 : _b.mode) === 'float') {
+                e.reject();
+            }
             else if (tab && tab !== this.data) {
@@ -109,0 +114,0 @@ let direction = this.getDropDirection(e);

package.json

 {
   "name": "rc-dock",
-  "version": "3.2.8",
+  "version": "3.2.9",
   "description": "dock layout for react component",
@@ -32,32 +32,32 @@ "repository": {
   "dependencies": {
-    "classnames": "^2.2.6",
+    "classnames": "^2.3.1",
     "lodash": "^4.17.21",
-    "rc-dropdown": "^3.2.0",
-    "rc-menu": "^8.10.8",
+    "rc-dropdown": "^3.2.2",
+    "rc-menu": "^9.3.0",
     "rc-new-window": "^0.1.13",
-    "rc-tabs": "^11.7.3"
+    "rc-tabs": "^11.10.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.13",
-    "@babel/plugin-proposal-export-default-from": "^7.12.13",
-    "@babel/preset-env": "^7.12.13",
-    "@types/classnames": "^2.2.11",
+    "@babel/core": "^7.16.7",
+    "@babel/plugin-proposal-export-default-from": "^7.16.7",
+    "@babel/preset-env": "^7.16.8",
+    "@types/classnames": "^2.3.1",
     "@types/hoist-non-react-statics": "^3.3.1",
-    "@types/lodash": "^4.14.168",
-    "@types/node": "^14.14.25",
-    "@types/prismjs": "^1.16.2",
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.0",
-    "@types/shelljs": "^0.8.8",
-    "less": "^4.1.1",
-    "parcel": "^1.12.4",
-    "prismjs": "^1.23.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "@types/lodash": "^4.14.178",
+    "@types/node": "^17.0.9",
+    "@types/prismjs": "^1.16.6",
+    "@types/react": "^17.0.38",
+    "@types/react-dom": "^17.0.11",
+    "@types/shelljs": "^0.8.11",
+    "less": "^4.1.2",
+    "parcel": "1.12.4",
+    "prismjs": "^1.26.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
     "shelljs": "^0.8.4",
-    "ts-node": "^9.1.1",
+    "ts-node": "^10.4.0",
     "tslint": "^6.1.3",
     "tslint-react": "^5.0.0",
-    "typedoc": "^0.20.23",
-    "typescript": "^4.1.3"
+    "typedoc": "^0.22.11",
+    "typescript": "^4.5.4"
   },
@@ -68,12 +68,3 @@ "peerDependencies": {
   },
-  "resolutions": {
-    "**/marked": "^2.0.0",
-    "**/minimist": "^1.2.5",
-    "**/node-forge": "^1.2.0",
-    "**/is-svg": "^4.2.2",
-    "**/postcss": "^8.2.15",
-    "**/ws": "^7.4.6",
-    "**/normalize-url": "^4.5.1",
-    "**/glob-parent": "^5.1.2"
-  },
+  "resolutions": {},
   "scripts": {
@@ -80,0 +71,0 @@ "example": "parcel example/*.html --open --out-dir temp --no-source-maps --no-hmr",

src/DockData.ts

@@ -8,6 +8,7 @@ import React from 'react';
    * whether tab can be dragged into float layer
+   * If value is "singleTab", float panel can't have multiple tabs
    *
    * default: false
    */
-  floatable?: boolean;
+  floatable?: boolean | 'singleTab';
 
@@ -14,0 +15,0 @@ /**

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

564860

increased by0.63%

Lines of code

15276

increased by0.39%

Dependency changes

• + Added@rc-component/portal@1.1.2(transitive)

• + Added@rc-component/trigger@2.2.6(transitive)

• + Addedrc-menu@9.16.0(transitive)

• - Removedhoist-non-react-statics@3.3.2(transitive)

• - Removedmini-store@3.0.6(transitive)

• - Removedrc-menu@8.10.8(transitive)

• - Removedreact-is@16.13.1(transitive)

• Updatedclassnames@^2.3.1

• Updatedrc-dropdown@^3.2.2

• Updatedrc-menu@^9.3.0

• Updatedrc-tabs@^11.10.5