dockview 1.10.2 → 1.11.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/dockview/defaultTab.d.ts +1 -1
- package/dist/cjs/dockview/defaultTab.js +11 -31
- package/dist/cjs/dockview/dockview.d.ts +1 -1
- package/dist/cjs/dockview/dockview.js +27 -47
- package/dist/cjs/dockview/headerActionsRenderer.d.ts +1 -1
- package/dist/cjs/dockview/headerActionsRenderer.js +2 -0
- package/dist/cjs/dockview/reactContentPart.d.ts +1 -1
- package/dist/cjs/dockview/reactContentPart.js +2 -0
- package/dist/cjs/dockview/reactHeaderPart.d.ts +1 -1
- package/dist/cjs/dockview/reactHeaderPart.js +2 -0
- package/dist/cjs/dockview/reactWatermarkPart.d.ts +1 -1
- package/dist/cjs/dockview/reactWatermarkPart.js +2 -0
- package/dist/cjs/gridview/gridview.d.ts +1 -1
- package/dist/cjs/gridview/gridview.js +13 -33
- package/dist/cjs/paneview/paneview.d.ts +1 -1
- package/dist/cjs/paneview/paneview.js +16 -36
- package/dist/cjs/paneview/view.d.ts +1 -1
- package/dist/cjs/react.d.ts +1 -1
- package/dist/cjs/react.js +16 -36
- package/dist/cjs/splitview/splitview.d.ts +1 -1
- package/dist/cjs/splitview/splitview.js +13 -33
- package/dist/cjs/svg.d.ts +1 -1
- package/dist/cjs/svg.js +7 -27
- package/dist/dockview.amd.js +80 -101
- package/dist/dockview.amd.js.map +1 -1
- package/dist/dockview.amd.min.js +2 -2
- package/dist/dockview.amd.min.js.map +1 -1
- package/dist/dockview.amd.min.noStyle.js +2 -2
- package/dist/dockview.amd.min.noStyle.js.map +1 -1
- package/dist/dockview.amd.noStyle.js +79 -100
- package/dist/dockview.amd.noStyle.js.map +1 -1
- package/dist/dockview.cjs.js +80 -101
- package/dist/dockview.cjs.js.map +1 -1
- package/dist/dockview.esm.js +20 -21
- package/dist/dockview.esm.js.map +1 -1
- package/dist/dockview.esm.min.js +2 -2
- package/dist/dockview.esm.min.js.map +1 -1
- package/dist/dockview.js +80 -101
- package/dist/dockview.js.map +1 -1
- package/dist/dockview.min.js +2 -2
- package/dist/dockview.min.js.map +1 -1
- package/dist/dockview.min.noStyle.js +2 -2
- package/dist/dockview.min.noStyle.js.map +1 -1
- package/dist/dockview.noStyle.js +79 -100
- package/dist/dockview.noStyle.js.map +1 -1
- package/dist/esm/dockview/defaultTab.d.ts +1 -1
- package/dist/esm/dockview/defaultTab.js +4 -4
- package/dist/esm/dockview/dockview.d.ts +1 -1
- package/dist/esm/dockview/dockview.js +1 -1
- package/dist/esm/dockview/headerActionsRenderer.d.ts +1 -1
- package/dist/esm/dockview/headerActionsRenderer.js +2 -0
- package/dist/esm/dockview/reactContentPart.d.ts +1 -1
- package/dist/esm/dockview/reactContentPart.js +2 -0
- package/dist/esm/dockview/reactHeaderPart.d.ts +1 -1
- package/dist/esm/dockview/reactHeaderPart.js +2 -0
- package/dist/esm/dockview/reactWatermarkPart.d.ts +1 -1
- package/dist/esm/dockview/reactWatermarkPart.js +2 -0
- package/dist/esm/gridview/gridview.d.ts +1 -1
- package/dist/esm/gridview/gridview.js +1 -1
- package/dist/esm/paneview/paneview.d.ts +1 -1
- package/dist/esm/paneview/paneview.js +1 -1
- package/dist/esm/paneview/view.d.ts +1 -1
- package/dist/esm/react.d.ts +1 -1
- package/dist/esm/react.js +2 -2
- package/dist/esm/splitview/splitview.d.ts +1 -1
- package/dist/esm/splitview/splitview.js +1 -1
- package/dist/esm/svg.d.ts +1 -1
- package/dist/esm/svg.js +1 -1
- package/dist/styles/dockview.css +849 -8
- package/package.json +3 -3
package/dist/dockview.noStyle.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* dockview
|
|
3
|
-
* @version 1.
|
|
3
|
+
* @version 1.11.0
|
|
4
4
|
* @link https://github.com/mathuo/dockview
|
|
5
5
|
* @license MIT
|
|
6
6
|
*/
|
|
@@ -10,26 +10,6 @@
|
|
|
10
10
|
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.dockview = {}, global.React, global.ReactDOM));
|
|
11
11
|
})(this, (function (exports, React, ReactDOM) { 'use strict';
|
|
12
12
|
|
|
13
|
-
function _interopNamespaceDefault(e) {
|
|
14
|
-
var n = Object.create(null);
|
|
15
|
-
if (e) {
|
|
16
|
-
Object.keys(e).forEach(function (k) {
|
|
17
|
-
if (k !== 'default') {
|
|
18
|
-
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
19
|
-
Object.defineProperty(n, k, d.get ? d : {
|
|
20
|
-
enumerable: true,
|
|
21
|
-
get: function () { return e[k]; }
|
|
22
|
-
});
|
|
23
|
-
}
|
|
24
|
-
});
|
|
25
|
-
}
|
|
26
|
-
n.default = e;
|
|
27
|
-
return Object.freeze(n);
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
31
|
-
var ReactDOM__namespace = /*#__PURE__*/_interopNamespaceDefault(ReactDOM);
|
|
32
|
-
|
|
33
13
|
class TransferObject {
|
|
34
14
|
}
|
|
35
15
|
class PanelTransfer extends TransferObject {
|
|
@@ -6124,27 +6104,18 @@
|
|
|
6124
6104
|
//
|
|
6125
6105
|
this.params = {};
|
|
6126
6106
|
this._element = document.createElement('div');
|
|
6127
|
-
this._element.className = 'default-tab';
|
|
6107
|
+
this._element.className = 'dv-default-tab';
|
|
6128
6108
|
//
|
|
6129
6109
|
this._content = document.createElement('div');
|
|
6130
|
-
this._content.className = 'tab-content';
|
|
6131
|
-
//
|
|
6132
|
-
this._actionContainer = document.createElement('div');
|
|
6133
|
-
this._actionContainer.className = 'action-container';
|
|
6134
|
-
//
|
|
6135
|
-
this._list = document.createElement('ul');
|
|
6136
|
-
this._list.className = 'tab-list';
|
|
6137
|
-
//
|
|
6110
|
+
this._content.className = 'dv-default-tab-content';
|
|
6138
6111
|
this.action = document.createElement('div');
|
|
6139
|
-
this.action.className = 'tab-action';
|
|
6112
|
+
this.action.className = 'dv-default-tab-action';
|
|
6140
6113
|
this.action.appendChild(createCloseButton());
|
|
6141
6114
|
//
|
|
6142
6115
|
this._element.appendChild(this._content);
|
|
6143
|
-
this._element.appendChild(this.
|
|
6144
|
-
this._actionContainer.appendChild(this._list);
|
|
6145
|
-
this._list.appendChild(this.action);
|
|
6116
|
+
this._element.appendChild(this.action);
|
|
6146
6117
|
//
|
|
6147
|
-
this.addDisposables(addDisposableListener(this.
|
|
6118
|
+
this.addDisposables(addDisposableListener(this.action, 'mousedown', (ev) => {
|
|
6148
6119
|
ev.preventDefault();
|
|
6149
6120
|
}));
|
|
6150
6121
|
this.render();
|
|
@@ -9247,9 +9218,9 @@
|
|
|
9247
9218
|
* component
|
|
9248
9219
|
*/
|
|
9249
9220
|
const ReactComponentBridge = (props, ref) => {
|
|
9250
|
-
const [_, triggerRender] =
|
|
9251
|
-
const _props =
|
|
9252
|
-
|
|
9221
|
+
const [_, triggerRender] = React.useState();
|
|
9222
|
+
const _props = React.useRef(props.componentProps);
|
|
9223
|
+
React.useImperativeHandle(ref, () => ({
|
|
9253
9224
|
update: (componentProps) => {
|
|
9254
9225
|
_props.current = Object.assign(Object.assign({}, _props.current), componentProps);
|
|
9255
9226
|
/**
|
|
@@ -9261,7 +9232,7 @@
|
|
|
9261
9232
|
triggerRender(Date.now());
|
|
9262
9233
|
},
|
|
9263
9234
|
}), []);
|
|
9264
|
-
return
|
|
9235
|
+
return React.createElement(props.component, _props.current);
|
|
9265
9236
|
};
|
|
9266
9237
|
ReactComponentBridge.displayName = 'DockviewReactJsBridge';
|
|
9267
9238
|
/**
|
|
@@ -9273,7 +9244,7 @@
|
|
|
9273
9244
|
let value = 1;
|
|
9274
9245
|
return { next: () => `dockview_react_portal_key_${(value++).toString()}` };
|
|
9275
9246
|
})();
|
|
9276
|
-
const ReactPartContext =
|
|
9247
|
+
const ReactPartContext = React.createContext({});
|
|
9277
9248
|
class ReactPart {
|
|
9278
9249
|
constructor(parent, portalStore, component, parameters, context) {
|
|
9279
9250
|
this.parent = parent;
|
|
@@ -9309,7 +9280,7 @@
|
|
|
9309
9280
|
*/
|
|
9310
9281
|
throw new Error('Dockview: Only React.memo(...), React.ForwardRef(...) and functional components are accepted as components');
|
|
9311
9282
|
}
|
|
9312
|
-
const bridgeComponent =
|
|
9283
|
+
const bridgeComponent = React.createElement(React.forwardRef(ReactComponentBridge), {
|
|
9313
9284
|
component: this
|
|
9314
9285
|
.component,
|
|
9315
9286
|
componentProps: this.parameters,
|
|
@@ -9322,9 +9293,9 @@
|
|
|
9322
9293
|
},
|
|
9323
9294
|
});
|
|
9324
9295
|
const node = this.context
|
|
9325
|
-
?
|
|
9296
|
+
? React.createElement(ReactPartContext.Provider, { value: this.context }, bridgeComponent)
|
|
9326
9297
|
: bridgeComponent;
|
|
9327
|
-
const portal =
|
|
9298
|
+
const portal = ReactDOM.createPortal(node, this.parent, uniquePortalKeyGenerator.next());
|
|
9328
9299
|
this.ref = {
|
|
9329
9300
|
portal,
|
|
9330
9301
|
disposable: this.portalStore.addPortal(portal),
|
|
@@ -9342,9 +9313,9 @@
|
|
|
9342
9313
|
* portal array
|
|
9343
9314
|
*/
|
|
9344
9315
|
const usePortalsLifecycle = () => {
|
|
9345
|
-
const [portals, setPortals] =
|
|
9346
|
-
|
|
9347
|
-
const addPortal =
|
|
9316
|
+
const [portals, setPortals] = React.useState([]);
|
|
9317
|
+
React.useDebugValue(`Portal count: ${portals.length}`);
|
|
9318
|
+
const addPortal = React.useCallback((portal) => {
|
|
9348
9319
|
setPortals((existingPortals) => [...existingPortals, portal]);
|
|
9349
9320
|
let disposed = false;
|
|
9350
9321
|
return {
|
|
@@ -9382,6 +9353,8 @@
|
|
|
9382
9353
|
this.onDidBlur = this._onDidBlur.event;
|
|
9383
9354
|
this._element = document.createElement('div');
|
|
9384
9355
|
this._element.className = 'dockview-react-part';
|
|
9356
|
+
this._element.style.height = '100%';
|
|
9357
|
+
this._element.style.width = '100%';
|
|
9385
9358
|
}
|
|
9386
9359
|
focus() {
|
|
9387
9360
|
// TODO
|
|
@@ -9418,6 +9391,8 @@
|
|
|
9418
9391
|
this.reactPortalStore = reactPortalStore;
|
|
9419
9392
|
this._element = document.createElement('div');
|
|
9420
9393
|
this._element.className = 'dockview-react-part';
|
|
9394
|
+
this._element.style.height = '100%';
|
|
9395
|
+
this._element.style.width = '100%';
|
|
9421
9396
|
}
|
|
9422
9397
|
focus() {
|
|
9423
9398
|
//noop
|
|
@@ -9452,6 +9427,8 @@
|
|
|
9452
9427
|
this.reactPortalStore = reactPortalStore;
|
|
9453
9428
|
this._element = document.createElement('div');
|
|
9454
9429
|
this._element.className = 'dockview-react-part';
|
|
9430
|
+
this._element.style.height = '100%';
|
|
9431
|
+
this._element.style.width = '100%';
|
|
9455
9432
|
}
|
|
9456
9433
|
init(parameters) {
|
|
9457
9434
|
this.part = new ReactPart(this.element, this.reactPortalStore, this.component, {
|
|
@@ -9503,6 +9480,8 @@
|
|
|
9503
9480
|
this.mutableDisposable = new MutableDisposable();
|
|
9504
9481
|
this._element = document.createElement('div');
|
|
9505
9482
|
this._element.className = 'dockview-react-part';
|
|
9483
|
+
this._element.style.height = '100%';
|
|
9484
|
+
this._element.style.width = '100%';
|
|
9506
9485
|
}
|
|
9507
9486
|
focus() {
|
|
9508
9487
|
// TODO
|
|
@@ -9562,12 +9541,12 @@
|
|
|
9562
9541
|
: undefined;
|
|
9563
9542
|
}
|
|
9564
9543
|
const DEFAULT_REACT_TAB = 'props.defaultTabComponent';
|
|
9565
|
-
const DockviewReact =
|
|
9566
|
-
const domRef =
|
|
9567
|
-
const dockviewRef =
|
|
9544
|
+
const DockviewReact = React.forwardRef((props, ref) => {
|
|
9545
|
+
const domRef = React.useRef(null);
|
|
9546
|
+
const dockviewRef = React.useRef();
|
|
9568
9547
|
const [portals, addPortal] = usePortalsLifecycle();
|
|
9569
|
-
|
|
9570
|
-
|
|
9548
|
+
React.useImperativeHandle(ref, () => domRef.current, []);
|
|
9549
|
+
React.useEffect(() => {
|
|
9571
9550
|
var _a;
|
|
9572
9551
|
if (!domRef.current) {
|
|
9573
9552
|
return () => {
|
|
@@ -9638,13 +9617,13 @@
|
|
|
9638
9617
|
dockview.dispose();
|
|
9639
9618
|
};
|
|
9640
9619
|
}, []);
|
|
9641
|
-
|
|
9620
|
+
React.useEffect(() => {
|
|
9642
9621
|
if (!dockviewRef.current) {
|
|
9643
9622
|
return;
|
|
9644
9623
|
}
|
|
9645
9624
|
dockviewRef.current.locked = !!props.locked;
|
|
9646
9625
|
}, [props.locked]);
|
|
9647
|
-
|
|
9626
|
+
React.useEffect(() => {
|
|
9648
9627
|
if (!dockviewRef.current) {
|
|
9649
9628
|
return;
|
|
9650
9629
|
}
|
|
@@ -9652,7 +9631,7 @@
|
|
|
9652
9631
|
disableDnd: props.disableDnd,
|
|
9653
9632
|
});
|
|
9654
9633
|
}, [props.disableDnd]);
|
|
9655
|
-
|
|
9634
|
+
React.useEffect(() => {
|
|
9656
9635
|
if (!dockviewRef.current) {
|
|
9657
9636
|
return () => {
|
|
9658
9637
|
// noop
|
|
@@ -9667,7 +9646,7 @@
|
|
|
9667
9646
|
disposable.dispose();
|
|
9668
9647
|
};
|
|
9669
9648
|
}, [props.onDidDrop]);
|
|
9670
|
-
|
|
9649
|
+
React.useEffect(() => {
|
|
9671
9650
|
if (!dockviewRef.current) {
|
|
9672
9651
|
return () => {
|
|
9673
9652
|
// noop
|
|
@@ -9682,7 +9661,7 @@
|
|
|
9682
9661
|
disposable.dispose();
|
|
9683
9662
|
};
|
|
9684
9663
|
}, [props.onWillDrop]);
|
|
9685
|
-
|
|
9664
|
+
React.useEffect(() => {
|
|
9686
9665
|
if (!dockviewRef.current) {
|
|
9687
9666
|
return;
|
|
9688
9667
|
}
|
|
@@ -9690,7 +9669,7 @@
|
|
|
9690
9669
|
frameworkComponents: props.components,
|
|
9691
9670
|
});
|
|
9692
9671
|
}, [props.components]);
|
|
9693
|
-
|
|
9672
|
+
React.useEffect(() => {
|
|
9694
9673
|
if (!dockviewRef.current) {
|
|
9695
9674
|
return;
|
|
9696
9675
|
}
|
|
@@ -9698,7 +9677,7 @@
|
|
|
9698
9677
|
floatingGroupBounds: props.floatingGroupBounds,
|
|
9699
9678
|
});
|
|
9700
9679
|
}, [props.floatingGroupBounds]);
|
|
9701
|
-
|
|
9680
|
+
React.useEffect(() => {
|
|
9702
9681
|
if (!dockviewRef.current) {
|
|
9703
9682
|
return;
|
|
9704
9683
|
}
|
|
@@ -9706,7 +9685,7 @@
|
|
|
9706
9685
|
watermarkFrameworkComponent: props.watermarkComponent,
|
|
9707
9686
|
});
|
|
9708
9687
|
}, [props.watermarkComponent]);
|
|
9709
|
-
|
|
9688
|
+
React.useEffect(() => {
|
|
9710
9689
|
if (!dockviewRef.current) {
|
|
9711
9690
|
return;
|
|
9712
9691
|
}
|
|
@@ -9714,7 +9693,7 @@
|
|
|
9714
9693
|
showDndOverlay: props.showDndOverlay,
|
|
9715
9694
|
});
|
|
9716
9695
|
}, [props.showDndOverlay]);
|
|
9717
|
-
|
|
9696
|
+
React.useEffect(() => {
|
|
9718
9697
|
if (!dockviewRef.current) {
|
|
9719
9698
|
return;
|
|
9720
9699
|
}
|
|
@@ -9722,7 +9701,7 @@
|
|
|
9722
9701
|
frameworkTabComponents: props.tabComponents,
|
|
9723
9702
|
});
|
|
9724
9703
|
}, [props.tabComponents]);
|
|
9725
|
-
|
|
9704
|
+
React.useEffect(() => {
|
|
9726
9705
|
if (!dockviewRef.current) {
|
|
9727
9706
|
return;
|
|
9728
9707
|
}
|
|
@@ -9730,7 +9709,7 @@
|
|
|
9730
9709
|
disableFloatingGroups: props.disableFloatingGroups,
|
|
9731
9710
|
});
|
|
9732
9711
|
}, [props.disableFloatingGroups]);
|
|
9733
|
-
|
|
9712
|
+
React.useEffect(() => {
|
|
9734
9713
|
var _a;
|
|
9735
9714
|
if (!dockviewRef.current) {
|
|
9736
9715
|
return;
|
|
@@ -9747,7 +9726,7 @@
|
|
|
9747
9726
|
frameworkTabComponents,
|
|
9748
9727
|
});
|
|
9749
9728
|
}, [props.defaultTabComponent]);
|
|
9750
|
-
|
|
9729
|
+
React.useEffect(() => {
|
|
9751
9730
|
if (!dockviewRef.current) {
|
|
9752
9731
|
return;
|
|
9753
9732
|
}
|
|
@@ -9755,7 +9734,7 @@
|
|
|
9755
9734
|
createRightHeaderActionsElement: createGroupControlElement(props.rightHeaderActionsComponent, { addPortal }),
|
|
9756
9735
|
});
|
|
9757
9736
|
}, [props.rightHeaderActionsComponent]);
|
|
9758
|
-
|
|
9737
|
+
React.useEffect(() => {
|
|
9759
9738
|
if (!dockviewRef.current) {
|
|
9760
9739
|
return;
|
|
9761
9740
|
}
|
|
@@ -9763,7 +9742,7 @@
|
|
|
9763
9742
|
createLeftHeaderActionsElement: createGroupControlElement(props.leftHeaderActionsComponent, { addPortal }),
|
|
9764
9743
|
});
|
|
9765
9744
|
}, [props.leftHeaderActionsComponent]);
|
|
9766
|
-
|
|
9745
|
+
React.useEffect(() => {
|
|
9767
9746
|
if (!dockviewRef.current) {
|
|
9768
9747
|
return;
|
|
9769
9748
|
}
|
|
@@ -9771,7 +9750,7 @@
|
|
|
9771
9750
|
rootOverlayModel: props.rootOverlayModel,
|
|
9772
9751
|
});
|
|
9773
9752
|
}, [props.rootOverlayModel]);
|
|
9774
|
-
|
|
9753
|
+
React.useEffect(() => {
|
|
9775
9754
|
if (!dockviewRef.current) {
|
|
9776
9755
|
return;
|
|
9777
9756
|
}
|
|
@@ -9779,7 +9758,7 @@
|
|
|
9779
9758
|
createPrefixHeaderActionsElement: createGroupControlElement(props.prefixHeaderActionsComponent, { addPortal }),
|
|
9780
9759
|
});
|
|
9781
9760
|
}, [props.prefixHeaderActionsComponent]);
|
|
9782
|
-
return (
|
|
9761
|
+
return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
|
|
9783
9762
|
});
|
|
9784
9763
|
DockviewReact.displayName = 'DockviewComponent';
|
|
9785
9764
|
|
|
@@ -9817,12 +9796,12 @@
|
|
|
9817
9796
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
9818
9797
|
};
|
|
9819
9798
|
|
|
9820
|
-
const CloseButton = () => (
|
|
9821
|
-
|
|
9799
|
+
const CloseButton = () => (React.createElement("svg", { height: "11", width: "11", viewBox: "0 0 28 28", "aria-hidden": 'false', focusable: false, className: "dockview-svg" },
|
|
9800
|
+
React.createElement("path", { d: "M2.1 27.3L0 25.2L11.55 13.65L0 2.1L2.1 0L13.65 11.55L25.2 0L27.3 2.1L15.75 13.65L27.3 25.2L25.2 27.3L13.65 15.75L2.1 27.3Z" })));
|
|
9822
9801
|
|
|
9823
9802
|
const DockviewDefaultTab = (_a) => {
|
|
9824
9803
|
var { api, containerApi: _containerApi, params: _params, hideClose, closeActionOverride } = _a, rest = __rest(_a, ["api", "containerApi", "params", "hideClose", "closeActionOverride"]);
|
|
9825
|
-
const onClose =
|
|
9804
|
+
const onClose = React.useCallback((event) => {
|
|
9826
9805
|
event.preventDefault();
|
|
9827
9806
|
if (closeActionOverride) {
|
|
9828
9807
|
closeActionOverride();
|
|
@@ -9831,10 +9810,10 @@
|
|
|
9831
9810
|
api.close();
|
|
9832
9811
|
}
|
|
9833
9812
|
}, [api, closeActionOverride]);
|
|
9834
|
-
const onMouseDown =
|
|
9813
|
+
const onMouseDown = React.useCallback((e) => {
|
|
9835
9814
|
e.preventDefault();
|
|
9836
9815
|
}, []);
|
|
9837
|
-
const onClick =
|
|
9816
|
+
const onClick = React.useCallback((event) => {
|
|
9838
9817
|
if (event.defaultPrevented) {
|
|
9839
9818
|
return;
|
|
9840
9819
|
}
|
|
@@ -9843,10 +9822,10 @@
|
|
|
9843
9822
|
rest.onClick(event);
|
|
9844
9823
|
}
|
|
9845
9824
|
}, [api, rest.onClick]);
|
|
9846
|
-
return (
|
|
9847
|
-
|
|
9848
|
-
!hideClose && (
|
|
9849
|
-
|
|
9825
|
+
return (React.createElement("div", Object.assign({ "data-testid": "dockview-dv-default-tab" }, rest, { onClick: onClick, className: "dv-default-tab" }),
|
|
9826
|
+
React.createElement("span", { className: "dv-default-tab-content" }, api.title),
|
|
9827
|
+
!hideClose && (React.createElement("div", { className: "dv-default-tab-action", onMouseDown: onMouseDown, onClick: onClose },
|
|
9828
|
+
React.createElement(CloseButton, null)))));
|
|
9850
9829
|
};
|
|
9851
9830
|
|
|
9852
9831
|
class ReactPanelView extends SplitviewPanel {
|
|
@@ -9865,12 +9844,12 @@
|
|
|
9865
9844
|
}
|
|
9866
9845
|
}
|
|
9867
9846
|
|
|
9868
|
-
const SplitviewReact =
|
|
9869
|
-
const domRef =
|
|
9870
|
-
const splitviewRef =
|
|
9847
|
+
const SplitviewReact = React.forwardRef((props, ref) => {
|
|
9848
|
+
const domRef = React.useRef(null);
|
|
9849
|
+
const splitviewRef = React.useRef();
|
|
9871
9850
|
const [portals, addPortal] = usePortalsLifecycle();
|
|
9872
|
-
|
|
9873
|
-
|
|
9851
|
+
React.useImperativeHandle(ref, () => domRef.current, []);
|
|
9852
|
+
React.useEffect(() => {
|
|
9874
9853
|
var _a;
|
|
9875
9854
|
const splitview = new SplitviewComponent({
|
|
9876
9855
|
parentElement: domRef.current,
|
|
@@ -9901,7 +9880,7 @@
|
|
|
9901
9880
|
splitview.dispose();
|
|
9902
9881
|
};
|
|
9903
9882
|
}, []);
|
|
9904
|
-
|
|
9883
|
+
React.useEffect(() => {
|
|
9905
9884
|
if (!splitviewRef.current) {
|
|
9906
9885
|
return;
|
|
9907
9886
|
}
|
|
@@ -9909,7 +9888,7 @@
|
|
|
9909
9888
|
frameworkComponents: props.components,
|
|
9910
9889
|
});
|
|
9911
9890
|
}, [props.components]);
|
|
9912
|
-
return (
|
|
9891
|
+
return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
|
|
9913
9892
|
});
|
|
9914
9893
|
SplitviewReact.displayName = 'SplitviewComponent';
|
|
9915
9894
|
|
|
@@ -9931,12 +9910,12 @@
|
|
|
9931
9910
|
}
|
|
9932
9911
|
}
|
|
9933
9912
|
|
|
9934
|
-
const GridviewReact =
|
|
9935
|
-
const domRef =
|
|
9936
|
-
const gridviewRef =
|
|
9913
|
+
const GridviewReact = React.forwardRef((props, ref) => {
|
|
9914
|
+
const domRef = React.useRef(null);
|
|
9915
|
+
const gridviewRef = React.useRef();
|
|
9937
9916
|
const [portals, addPortal] = usePortalsLifecycle();
|
|
9938
|
-
|
|
9939
|
-
|
|
9917
|
+
React.useImperativeHandle(ref, () => domRef.current, []);
|
|
9918
|
+
React.useEffect(() => {
|
|
9940
9919
|
var _a;
|
|
9941
9920
|
if (!domRef.current) {
|
|
9942
9921
|
return () => {
|
|
@@ -9972,7 +9951,7 @@
|
|
|
9972
9951
|
gridview.dispose();
|
|
9973
9952
|
};
|
|
9974
9953
|
}, []);
|
|
9975
|
-
|
|
9954
|
+
React.useEffect(() => {
|
|
9976
9955
|
if (!gridviewRef.current) {
|
|
9977
9956
|
return;
|
|
9978
9957
|
}
|
|
@@ -9980,7 +9959,7 @@
|
|
|
9980
9959
|
frameworkComponents: props.components,
|
|
9981
9960
|
});
|
|
9982
9961
|
}, [props.components]);
|
|
9983
|
-
return (
|
|
9962
|
+
return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
|
|
9984
9963
|
});
|
|
9985
9964
|
GridviewReact.displayName = 'GridviewComponent';
|
|
9986
9965
|
|
|
@@ -10019,12 +9998,12 @@
|
|
|
10019
9998
|
}
|
|
10020
9999
|
}
|
|
10021
10000
|
|
|
10022
|
-
const PaneviewReact =
|
|
10023
|
-
const domRef =
|
|
10024
|
-
const paneviewRef =
|
|
10001
|
+
const PaneviewReact = React.forwardRef((props, ref) => {
|
|
10002
|
+
const domRef = React.useRef(null);
|
|
10003
|
+
const paneviewRef = React.useRef();
|
|
10025
10004
|
const [portals, addPortal] = usePortalsLifecycle();
|
|
10026
|
-
|
|
10027
|
-
|
|
10005
|
+
React.useImperativeHandle(ref, () => domRef.current, []);
|
|
10006
|
+
React.useEffect(() => {
|
|
10028
10007
|
const createComponent = (id, _componentId, component) => new PanePanelSection(id, component, {
|
|
10029
10008
|
addPortal,
|
|
10030
10009
|
});
|
|
@@ -10057,7 +10036,7 @@
|
|
|
10057
10036
|
paneview.dispose();
|
|
10058
10037
|
};
|
|
10059
10038
|
}, []);
|
|
10060
|
-
|
|
10039
|
+
React.useEffect(() => {
|
|
10061
10040
|
if (!paneviewRef.current) {
|
|
10062
10041
|
return;
|
|
10063
10042
|
}
|
|
@@ -10065,7 +10044,7 @@
|
|
|
10065
10044
|
frameworkComponents: props.components,
|
|
10066
10045
|
});
|
|
10067
10046
|
}, [props.components]);
|
|
10068
|
-
|
|
10047
|
+
React.useEffect(() => {
|
|
10069
10048
|
if (!paneviewRef.current) {
|
|
10070
10049
|
return;
|
|
10071
10050
|
}
|
|
@@ -10073,7 +10052,7 @@
|
|
|
10073
10052
|
headerframeworkComponents: props.headerComponents,
|
|
10074
10053
|
});
|
|
10075
10054
|
}, [props.headerComponents]);
|
|
10076
|
-
|
|
10055
|
+
React.useEffect(() => {
|
|
10077
10056
|
if (!paneviewRef.current) {
|
|
10078
10057
|
return () => {
|
|
10079
10058
|
//
|
|
@@ -10089,7 +10068,7 @@
|
|
|
10089
10068
|
disposable.dispose();
|
|
10090
10069
|
};
|
|
10091
10070
|
}, [props.onDidDrop]);
|
|
10092
|
-
|
|
10071
|
+
React.useEffect(() => {
|
|
10093
10072
|
if (!paneviewRef.current) {
|
|
10094
10073
|
return;
|
|
10095
10074
|
}
|
|
@@ -10097,7 +10076,7 @@
|
|
|
10097
10076
|
showDndOverlay: props.showDndOverlay,
|
|
10098
10077
|
});
|
|
10099
10078
|
}, [props.showDndOverlay]);
|
|
10100
|
-
return (
|
|
10079
|
+
return (React.createElement("div", { className: props.className, style: { height: '100%', width: '100%' }, ref: domRef }, portals));
|
|
10101
10080
|
});
|
|
10102
10081
|
PaneviewReact.displayName = 'PaneviewComponent';
|
|
10103
10082
|
|