react-resizable-panels 0.0.33 → 0.0.35
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/CHANGELOG.md +8 -0
- package/README.md +8 -1
- package/dist/react-resizable-panels.d.ts +6 -1
- package/dist/react-resizable-panels.d.ts.map +1 -1
- package/dist/react-resizable-panels.js +264 -208
- package/dist/react-resizable-panels.js.map +1 -1
- package/dist/react-resizable-panels.module.js +262 -206
- package/dist/react-resizable-panels.module.js.map +1 -1
- package/package.json +5 -2
- package/src/PanelGroup.ts +112 -29
- package/src/hooks/useWindowSplitterBehavior.ts +2 -1
- package/src/index.ts +2 -0
- package/src/types.ts +5 -0
- package/src/utils/arrays.ts +13 -0
- package/src/utils/coordinates.ts +27 -8
- package/src/utils/group.ts +40 -23
- package/src/utils/serialization.ts +12 -12
|
@@ -1,41 +1,41 @@
|
|
|
1
|
-
import {useContext as $
|
|
1
|
+
import {useContext as $jhddX$useContext, useRef as $jhddX$useRef, useEffect as $jhddX$useEffect, useImperativeHandle as $jhddX$useImperativeHandle, createElement as $jhddX$createElement, forwardRef as $jhddX$forwardRef, useLayoutEffect as $jhddX$useLayoutEffect, useId as $jhddX$useId, createContext as $jhddX$createContext, useState as $jhddX$useState, useCallback as $jhddX$useCallback, useMemo as $jhddX$useMemo} from "react";
|
|
2
2
|
|
|
3
3
|
|
|
4
4
|
|
|
5
|
-
const $
|
|
6
|
-
const $
|
|
7
|
-
var $
|
|
5
|
+
const $3f95d3e171760903$var$canUseEffectHooks = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
|
|
6
|
+
const $3f95d3e171760903$var$useIsomorphicLayoutEffect = $3f95d3e171760903$var$canUseEffectHooks ? (0, $jhddX$useLayoutEffect) : ()=>{};
|
|
7
|
+
var $3f95d3e171760903$export$2e2bcd8739ae039 = $3f95d3e171760903$var$useIsomorphicLayoutEffect;
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
let $
|
|
12
|
-
function $
|
|
13
|
-
const idFromUseId = typeof (0, $
|
|
14
|
-
const idRef = (0, $
|
|
15
|
-
if (idRef.current === null) idRef.current = "" + $
|
|
11
|
+
let $e504a2438473eda9$var$counter = 0;
|
|
12
|
+
function $e504a2438473eda9$export$2e2bcd8739ae039(idFromParams = null) {
|
|
13
|
+
const idFromUseId = typeof (0, $jhddX$useId) === "function" ? (0, $jhddX$useId)() : null;
|
|
14
|
+
const idRef = (0, $jhddX$useRef)(idFromParams || idFromUseId || null);
|
|
15
|
+
if (idRef.current === null) idRef.current = "" + $e504a2438473eda9$var$counter++;
|
|
16
16
|
return idRef.current;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
19
|
|
|
20
20
|
|
|
21
|
-
const $
|
|
21
|
+
const $af466b485b9d515d$export$7d8c6d083caec74a = (0, $jhddX$createContext)(null);
|
|
22
22
|
// Workaround for Parcel scope hoisting (which renames objects/functions).
|
|
23
23
|
// Casting to :any is required to avoid corrupting the generated TypeScript types.
|
|
24
24
|
// See github.com/parcel-bundler/parcel/issues/8724
|
|
25
|
-
$
|
|
25
|
+
$af466b485b9d515d$export$7d8c6d083caec74a.displayName = "PanelGroupContext";
|
|
26
26
|
|
|
27
27
|
|
|
28
|
-
function $
|
|
29
|
-
const context = (0, $
|
|
28
|
+
function $c33df6d7c39fd3ee$var$PanelWithForwardedRef({ children: children = null , className: classNameFromProps = "" , collapsible: collapsible = false , defaultSize: defaultSize = null , forwardedRef: forwardedRef , id: idFromProps = null , maxSize: maxSize = 100 , minSize: minSize = 10 , onCollapse: onCollapse = null , onResize: onResize = null , order: order = null , style: styleFromProps = {} , tagName: Type = "div" }) {
|
|
29
|
+
const context = (0, $jhddX$useContext)((0, $af466b485b9d515d$export$7d8c6d083caec74a));
|
|
30
30
|
if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
|
|
31
|
-
const panelId = (0, $
|
|
31
|
+
const panelId = (0, $e504a2438473eda9$export$2e2bcd8739ae039)(idFromProps);
|
|
32
32
|
const { collapsePanel: collapsePanel , expandPanel: expandPanel , getPanelStyle: getPanelStyle , registerPanel: registerPanel , resizePanel: resizePanel , unregisterPanel: unregisterPanel } = context;
|
|
33
33
|
// Use a ref to guard against users passing inline props
|
|
34
|
-
const callbacksRef = (0, $
|
|
34
|
+
const callbacksRef = (0, $jhddX$useRef)({
|
|
35
35
|
onCollapse: onCollapse,
|
|
36
36
|
onResize: onResize
|
|
37
37
|
});
|
|
38
|
-
(0, $
|
|
38
|
+
(0, $jhddX$useEffect)(()=>{
|
|
39
39
|
callbacksRef.current.onCollapse = onCollapse;
|
|
40
40
|
callbacksRef.current.onResize = onResize;
|
|
41
41
|
});
|
|
@@ -49,7 +49,7 @@ function $b6b4d0cd2eaa6b70$var$PanelWithForwardedRef({ children: children = null
|
|
|
49
49
|
defaultSize = minSize;
|
|
50
50
|
}
|
|
51
51
|
}
|
|
52
|
-
(0, $
|
|
52
|
+
(0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
|
|
53
53
|
const panel = {
|
|
54
54
|
callbacksRef: callbacksRef,
|
|
55
55
|
collapsible: collapsible,
|
|
@@ -74,13 +74,13 @@ function $b6b4d0cd2eaa6b70$var$PanelWithForwardedRef({ children: children = null
|
|
|
74
74
|
unregisterPanel
|
|
75
75
|
]);
|
|
76
76
|
const style = getPanelStyle(panelId);
|
|
77
|
-
const committedValuesRef = (0, $
|
|
78
|
-
size: $
|
|
77
|
+
const committedValuesRef = (0, $jhddX$useRef)({
|
|
78
|
+
size: $c33df6d7c39fd3ee$var$parseSizeFromStyle(style)
|
|
79
79
|
});
|
|
80
|
-
(0, $
|
|
81
|
-
committedValuesRef.current.size = $
|
|
80
|
+
(0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
|
|
81
|
+
committedValuesRef.current.size = $c33df6d7c39fd3ee$var$parseSizeFromStyle(style);
|
|
82
82
|
});
|
|
83
|
-
(0, $
|
|
83
|
+
(0, $jhddX$useImperativeHandle)(forwardedRef, ()=>({
|
|
84
84
|
collapse: ()=>collapsePanel(panelId),
|
|
85
85
|
expand: ()=>expandPanel(panelId),
|
|
86
86
|
getCollapsed () {
|
|
@@ -96,7 +96,7 @@ function $b6b4d0cd2eaa6b70$var$PanelWithForwardedRef({ children: children = null
|
|
|
96
96
|
panelId,
|
|
97
97
|
resizePanel
|
|
98
98
|
]);
|
|
99
|
-
return (0, $
|
|
99
|
+
return (0, $jhddX$createElement)(Type, {
|
|
100
100
|
children: children,
|
|
101
101
|
className: classNameFromProps,
|
|
102
102
|
"data-panel": "",
|
|
@@ -110,17 +110,17 @@ function $b6b4d0cd2eaa6b70$var$PanelWithForwardedRef({ children: children = null
|
|
|
110
110
|
}
|
|
111
111
|
});
|
|
112
112
|
}
|
|
113
|
-
const $
|
|
113
|
+
const $c33df6d7c39fd3ee$export$2ddb90ad54e5f587 = (0, $jhddX$forwardRef)((props, ref)=>(0, $jhddX$createElement)($c33df6d7c39fd3ee$var$PanelWithForwardedRef, {
|
|
114
114
|
...props,
|
|
115
115
|
forwardedRef: ref
|
|
116
116
|
}));
|
|
117
117
|
// Workaround for Parcel scope hoisting (which renames objects/functions).
|
|
118
118
|
// Casting to :any is required to avoid corrupting the generated TypeScript types.
|
|
119
119
|
// See github.com/parcel-bundler/parcel/issues/8724
|
|
120
|
-
$
|
|
121
|
-
$
|
|
120
|
+
$c33df6d7c39fd3ee$var$PanelWithForwardedRef.displayName = "Panel";
|
|
121
|
+
$c33df6d7c39fd3ee$export$2ddb90ad54e5f587.displayName = "forwardRef(Panel)";
|
|
122
122
|
// HACK
|
|
123
|
-
function $
|
|
123
|
+
function $c33df6d7c39fd3ee$var$parseSizeFromStyle(style) {
|
|
124
124
|
const { flexGrow: flexGrow } = style;
|
|
125
125
|
if (typeof flexGrow === "string") return parseFloat(flexGrow);
|
|
126
126
|
else return flexGrow;
|
|
@@ -133,15 +133,15 @@ function $b6b4d0cd2eaa6b70$var$parseSizeFromStyle(style) {
|
|
|
133
133
|
// so they should not be used as part of the serialization key.
|
|
134
134
|
// Using an attribute like minSize instead should work well enough.
|
|
135
135
|
// Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
|
|
136
|
-
function $
|
|
136
|
+
function $6889c3a3ed41cfd1$var$getSerializationKey(panels) {
|
|
137
137
|
return panels.map((panel)=>{
|
|
138
138
|
const { minSize: minSize , order: order } = panel;
|
|
139
139
|
return order ? `${order}:${minSize}` : `${minSize}`;
|
|
140
140
|
}).sort((a, b)=>a.localeCompare(b)).join(",");
|
|
141
141
|
}
|
|
142
|
-
function $
|
|
142
|
+
function $6889c3a3ed41cfd1$var$loadSerializedPanelGroupState(autoSaveId, storage) {
|
|
143
143
|
try {
|
|
144
|
-
const serialized =
|
|
144
|
+
const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
|
|
145
145
|
if (serialized) {
|
|
146
146
|
const parsed = JSON.parse(serialized);
|
|
147
147
|
if (typeof parsed === "object" && parsed != null) return parsed;
|
|
@@ -149,34 +149,39 @@ function $6ff1a22b27cc039d$var$loadSerializedPanelGroupState(autoSaveId) {
|
|
|
149
149
|
} catch (error) {}
|
|
150
150
|
return null;
|
|
151
151
|
}
|
|
152
|
-
function $
|
|
153
|
-
const state = $
|
|
152
|
+
function $6889c3a3ed41cfd1$export$9c80c6617f0386da(autoSaveId, panels, storage) {
|
|
153
|
+
const state = $6889c3a3ed41cfd1$var$loadSerializedPanelGroupState(autoSaveId, storage);
|
|
154
154
|
if (state) {
|
|
155
|
-
const key = $
|
|
156
|
-
|
|
155
|
+
const key = $6889c3a3ed41cfd1$var$getSerializationKey(panels);
|
|
156
|
+
var _state_key;
|
|
157
|
+
return (_state_key = state[key]) !== null && _state_key !== void 0 ? _state_key : null;
|
|
157
158
|
}
|
|
158
159
|
return null;
|
|
159
160
|
}
|
|
160
|
-
function $
|
|
161
|
-
const key = $
|
|
162
|
-
const state = $
|
|
161
|
+
function $6889c3a3ed41cfd1$export$af183b313c61be4f(autoSaveId, panels, sizes, storage) {
|
|
162
|
+
const key = $6889c3a3ed41cfd1$var$getSerializationKey(panels);
|
|
163
|
+
const state = $6889c3a3ed41cfd1$var$loadSerializedPanelGroupState(autoSaveId, storage) || {};
|
|
163
164
|
state[key] = sizes;
|
|
164
165
|
try {
|
|
165
|
-
|
|
166
|
+
storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
|
|
166
167
|
} catch (error) {
|
|
167
168
|
console.error(error);
|
|
168
169
|
}
|
|
169
170
|
}
|
|
170
171
|
|
|
171
172
|
|
|
172
|
-
const $
|
|
173
|
+
const $a8e83be196252871$export$d6d3992f3becc879 = 10;
|
|
173
174
|
|
|
174
175
|
|
|
175
176
|
|
|
176
|
-
function $
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
177
|
+
function $d6f7e4c3aa9e02d7$export$f50bae335f53943c(event, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse, initialDragState) {
|
|
178
|
+
const { sizes: initialSizes } = initialDragState || {};
|
|
179
|
+
// If we're resizing by mouse or touch, use the initial sizes as a base.
|
|
180
|
+
// This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
|
|
181
|
+
const baseSizes = initialSizes || prevSizes;
|
|
182
|
+
if (delta === 0) return baseSizes;
|
|
183
|
+
const panelsArray = $d6f7e4c3aa9e02d7$export$a861c0ad45885494(panels);
|
|
184
|
+
const nextSizes = baseSizes.concat();
|
|
180
185
|
let deltaApplied = 0;
|
|
181
186
|
// A resizing panel affects the panels before or after it.
|
|
182
187
|
//
|
|
@@ -190,25 +195,29 @@ function $f30c804b5fe6cc1a$export$f50bae335f53943c(event, panels, idBefore, idAf
|
|
|
190
195
|
const pivotId = delta < 0 ? idAfter : idBefore;
|
|
191
196
|
const index = panelsArray.findIndex((panel)=>panel.id === pivotId);
|
|
192
197
|
const panel = panelsArray[index];
|
|
193
|
-
const
|
|
194
|
-
const nextSize = $
|
|
195
|
-
if (
|
|
198
|
+
const baseSize = baseSizes[index];
|
|
199
|
+
const nextSize = $d6f7e4c3aa9e02d7$var$safeResizePanel(panel, Math.abs(delta), baseSize, event);
|
|
200
|
+
if (baseSize === nextSize) // If there's no room for the pivot panel to grow, we can ignore this drag update.
|
|
201
|
+
return baseSizes;
|
|
196
202
|
else {
|
|
197
|
-
if (nextSize === 0 &&
|
|
198
|
-
delta = delta < 0 ?
|
|
203
|
+
if (nextSize === 0 && baseSize > 0) panelSizeBeforeCollapse.set(pivotId, baseSize);
|
|
204
|
+
delta = delta < 0 ? baseSize - nextSize : nextSize - baseSize;
|
|
199
205
|
}
|
|
200
206
|
}
|
|
201
207
|
let pivotId1 = delta < 0 ? idBefore : idAfter;
|
|
202
208
|
let index1 = panelsArray.findIndex((panel)=>panel.id === pivotId1);
|
|
203
209
|
while(true){
|
|
204
210
|
const panel1 = panelsArray[index1];
|
|
205
|
-
const
|
|
206
|
-
const
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
211
|
+
const baseSize1 = baseSizes[index1];
|
|
212
|
+
const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
|
|
213
|
+
const nextSize1 = $d6f7e4c3aa9e02d7$var$safeResizePanel(panel1, 0 - deltaRemaining, baseSize1, event);
|
|
214
|
+
if (baseSize1 !== nextSize1) {
|
|
215
|
+
if (nextSize1 === 0 && baseSize1 > 0) panelSizeBeforeCollapse.set(panel1.id, baseSize1);
|
|
216
|
+
deltaApplied += baseSize1 - nextSize1;
|
|
210
217
|
nextSizes[index1] = nextSize1;
|
|
211
|
-
if (deltaApplied.toPrecision((0, $
|
|
218
|
+
if (deltaApplied.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879)).localeCompare(Math.abs(delta).toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879)), undefined, {
|
|
219
|
+
numeric: true
|
|
220
|
+
}) >= 0) break;
|
|
212
221
|
}
|
|
213
222
|
if (delta < 0) {
|
|
214
223
|
if (--index1 < 0) break;
|
|
@@ -218,14 +227,14 @@ function $f30c804b5fe6cc1a$export$f50bae335f53943c(event, panels, idBefore, idAf
|
|
|
218
227
|
}
|
|
219
228
|
// If we were unable to resize any of the panels panels, return the previous state.
|
|
220
229
|
// This will essentially bailout and ignore the "mousemove" event.
|
|
221
|
-
if (deltaApplied === 0) return
|
|
230
|
+
if (deltaApplied === 0) return baseSizes;
|
|
222
231
|
// Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
|
|
223
232
|
pivotId1 = delta < 0 ? idAfter : idBefore;
|
|
224
233
|
index1 = panelsArray.findIndex((panel)=>panel.id === pivotId1);
|
|
225
|
-
nextSizes[index1] =
|
|
234
|
+
nextSizes[index1] = baseSizes[index1] + deltaApplied;
|
|
226
235
|
return nextSizes;
|
|
227
236
|
}
|
|
228
|
-
function $
|
|
237
|
+
function $d6f7e4c3aa9e02d7$export$b8e48269e4faa934(panelsArray, prevSizes, nextSizes) {
|
|
229
238
|
nextSizes.forEach((nextSize, index)=>{
|
|
230
239
|
const prevSize = prevSizes[index];
|
|
231
240
|
if (prevSize !== nextSize) {
|
|
@@ -241,7 +250,7 @@ function $f30c804b5fe6cc1a$export$b8e48269e4faa934(panelsArray, prevSizes, nextS
|
|
|
241
250
|
}
|
|
242
251
|
});
|
|
243
252
|
}
|
|
244
|
-
function $
|
|
253
|
+
function $d6f7e4c3aa9e02d7$export$5a5b0c1d38c23c3b(id, panelsArray) {
|
|
245
254
|
if (panelsArray.length < 2) return [
|
|
246
255
|
null,
|
|
247
256
|
null
|
|
@@ -259,61 +268,65 @@ function $f30c804b5fe6cc1a$export$5a5b0c1d38c23c3b(id, panelsArray) {
|
|
|
259
268
|
idAfter
|
|
260
269
|
];
|
|
261
270
|
}
|
|
262
|
-
function $
|
|
271
|
+
function $d6f7e4c3aa9e02d7$export$6f43503e166de6fb(panels, id, sizes) {
|
|
263
272
|
if (panels.size === 1) return "100";
|
|
264
|
-
const panelsArray = $
|
|
273
|
+
const panelsArray = $d6f7e4c3aa9e02d7$export$a861c0ad45885494(panels);
|
|
265
274
|
const index = panelsArray.findIndex((panel)=>panel.id === id);
|
|
266
275
|
const size = sizes[index];
|
|
267
276
|
if (size == null) return "0";
|
|
268
|
-
return size.toPrecision((0, $
|
|
277
|
+
return size.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879));
|
|
269
278
|
}
|
|
270
|
-
function $
|
|
279
|
+
function $d6f7e4c3aa9e02d7$export$7361ed18ff57179e(id) {
|
|
271
280
|
const element = document.querySelector(`[data-panel-id="${id}"]`);
|
|
272
281
|
if (element) return element;
|
|
273
282
|
return null;
|
|
274
283
|
}
|
|
275
|
-
function $
|
|
284
|
+
function $d6f7e4c3aa9e02d7$export$5e67632cf3550a9c(id) {
|
|
276
285
|
const element = document.querySelector(`[data-panel-group-id="${id}"]`);
|
|
277
286
|
if (element) return element;
|
|
278
287
|
return null;
|
|
279
288
|
}
|
|
280
|
-
function $
|
|
289
|
+
function $d6f7e4c3aa9e02d7$export$2e27d3a347680388(id) {
|
|
281
290
|
const element = document.querySelector(`[data-panel-resize-handle-id="${id}"]`);
|
|
282
291
|
if (element) return element;
|
|
283
292
|
return null;
|
|
284
293
|
}
|
|
285
|
-
function $
|
|
286
|
-
const handles = $
|
|
294
|
+
function $d6f7e4c3aa9e02d7$export$96a40be80fb6c3c8(id) {
|
|
295
|
+
const handles = $d6f7e4c3aa9e02d7$export$8d0cd3c32ddc045e();
|
|
287
296
|
const index = handles.findIndex((handle)=>handle.getAttribute("data-panel-resize-handle-id") === id);
|
|
288
|
-
return index
|
|
297
|
+
return index !== null && index !== void 0 ? index : null;
|
|
289
298
|
}
|
|
290
|
-
function $
|
|
299
|
+
function $d6f7e4c3aa9e02d7$export$8d0cd3c32ddc045e() {
|
|
291
300
|
return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id]`));
|
|
292
301
|
}
|
|
293
|
-
function $
|
|
302
|
+
function $d6f7e4c3aa9e02d7$export$ae14931f0a0256a3(groupId) {
|
|
294
303
|
return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
|
|
295
304
|
}
|
|
296
|
-
function $
|
|
297
|
-
|
|
298
|
-
const
|
|
305
|
+
function $d6f7e4c3aa9e02d7$export$68d3a33c21dfbe27(groupId, handleId, panelsArray) {
|
|
306
|
+
var _panelsArray_index, _panelsArray_;
|
|
307
|
+
const handle = $d6f7e4c3aa9e02d7$export$2e27d3a347680388(handleId);
|
|
308
|
+
const handles = $d6f7e4c3aa9e02d7$export$ae14931f0a0256a3(groupId);
|
|
299
309
|
const index = handles.indexOf(handle);
|
|
300
|
-
|
|
301
|
-
const
|
|
310
|
+
var _panelsArray_index_id;
|
|
311
|
+
const idBefore = (_panelsArray_index_id = (_panelsArray_index = panelsArray[index]) === null || _panelsArray_index === void 0 ? void 0 : _panelsArray_index.id) !== null && _panelsArray_index_id !== void 0 ? _panelsArray_index_id : null;
|
|
312
|
+
var _panelsArray__id;
|
|
313
|
+
const idAfter = (_panelsArray__id = (_panelsArray_ = panelsArray[index + 1]) === null || _panelsArray_ === void 0 ? void 0 : _panelsArray_.id) !== null && _panelsArray__id !== void 0 ? _panelsArray__id : null;
|
|
302
314
|
return [
|
|
303
315
|
idBefore,
|
|
304
316
|
idAfter
|
|
305
317
|
];
|
|
306
318
|
}
|
|
307
|
-
function $
|
|
319
|
+
function $d6f7e4c3aa9e02d7$export$a861c0ad45885494(panels) {
|
|
308
320
|
return Array.from(panels.values()).sort((a, b)=>a.order - b.order);
|
|
309
321
|
}
|
|
310
|
-
function $
|
|
322
|
+
function $d6f7e4c3aa9e02d7$var$safeResizePanel(panel, delta, prevSize, event) {
|
|
311
323
|
const nextSizeUnsafe = prevSize + delta;
|
|
312
324
|
if (panel.collapsible) {
|
|
313
325
|
if (prevSize > 0) {
|
|
314
326
|
if (nextSizeUnsafe <= 0) return 0;
|
|
315
327
|
} else {
|
|
316
|
-
|
|
328
|
+
var _event_type;
|
|
329
|
+
const isKeyboardEvent = event === null || event === void 0 ? void 0 : (_event_type = event.type) === null || _event_type === void 0 ? void 0 : _event_type.startsWith("key");
|
|
317
330
|
if (!isKeyboardEvent) {
|
|
318
331
|
// Keyboard events should expand a collapsed panel to the min size,
|
|
319
332
|
// but mouse events should wait until the panel has reached its min size
|
|
@@ -327,23 +340,27 @@ function $f30c804b5fe6cc1a$var$safeResizePanel(panel, delta, prevSize, event) {
|
|
|
327
340
|
}
|
|
328
341
|
|
|
329
342
|
|
|
330
|
-
function $
|
|
343
|
+
function $8f51c2d77bf1da88$export$ec391ce65b083ed4(event, handleId, direction, initialOffset = 0, initialHandleElementRect = null) {
|
|
331
344
|
const isHorizontal = direction === "horizontal";
|
|
332
345
|
let pointerOffset = 0;
|
|
333
|
-
if ($
|
|
334
|
-
else if ($
|
|
346
|
+
if ($8f51c2d77bf1da88$export$764db16956f554f8(event)) pointerOffset = isHorizontal ? event.clientX : event.clientY;
|
|
347
|
+
else if ($8f51c2d77bf1da88$export$c4dfce035d43d1e0(event)) {
|
|
335
348
|
const firstTouch = event.touches[0];
|
|
336
349
|
pointerOffset = isHorizontal ? firstTouch.screenX : firstTouch.screenY;
|
|
337
350
|
} else return 0;
|
|
338
|
-
const handleElement = (0, $
|
|
339
|
-
const rect = handleElement.getBoundingClientRect();
|
|
351
|
+
const handleElement = (0, $d6f7e4c3aa9e02d7$export$2e27d3a347680388)(handleId);
|
|
352
|
+
const rect = initialHandleElementRect || handleElement.getBoundingClientRect();
|
|
340
353
|
const elementOffset = isHorizontal ? rect.left : rect.top;
|
|
341
354
|
return pointerOffset - elementOffset - initialOffset;
|
|
342
355
|
}
|
|
343
|
-
function $
|
|
344
|
-
|
|
356
|
+
function $8f51c2d77bf1da88$export$354b17c0684607ed(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragState) {
|
|
357
|
+
const { dragOffset: dragOffset = 0 , dragHandleRect: dragHandleRect , sizes: initialSizes } = initialDragState || {};
|
|
358
|
+
// If we're resizing by mouse or touch, use the initial sizes as a base.
|
|
359
|
+
// This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
|
|
360
|
+
const baseSizes = initialSizes || prevSizes;
|
|
361
|
+
if ($8f51c2d77bf1da88$export$e7bf60a870f429b0(event)) {
|
|
345
362
|
const isHorizontal = direction === "horizontal";
|
|
346
|
-
const groupElement = (0, $
|
|
363
|
+
const groupElement = (0, $d6f7e4c3aa9e02d7$export$5e67632cf3550a9c)(groupId);
|
|
347
364
|
const rect = groupElement.getBoundingClientRect();
|
|
348
365
|
const groupSizeInPixels = isHorizontal ? rect.width : rect.height;
|
|
349
366
|
const denominator = event.shiftKey ? 10 : 100;
|
|
@@ -373,24 +390,24 @@ function $96f6397ae645d178$export$354b17c0684607ed(event, groupId, handleId, pan
|
|
|
373
390
|
// we need to special case resizing around the minSize boundary.
|
|
374
391
|
// If contracting, Panels should shrink to their minSize and then snap to fully collapsed.
|
|
375
392
|
// If expanding from collapsed, they should snap back to their minSize.
|
|
376
|
-
const [idBefore, idAfter] = (0, $
|
|
393
|
+
const [idBefore, idAfter] = (0, $d6f7e4c3aa9e02d7$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
|
|
377
394
|
const targetPanelId = movement < 0 ? idBefore : idAfter;
|
|
378
395
|
const targetPanelIndex = panelsArray.findIndex((panel)=>panel.id === targetPanelId);
|
|
379
396
|
const targetPanel = panelsArray[targetPanelIndex];
|
|
380
397
|
if (targetPanel.collapsible) {
|
|
381
|
-
const
|
|
382
|
-
if (
|
|
398
|
+
const baseSize = baseSizes[targetPanelIndex];
|
|
399
|
+
if (baseSize === 0 || baseSize.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879)) === targetPanel.minSize.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879))) movement = movement < 0 ? -targetPanel.minSize * groupSizeInPixels : targetPanel.minSize * groupSizeInPixels;
|
|
383
400
|
}
|
|
384
401
|
return movement;
|
|
385
|
-
} else return $
|
|
402
|
+
} else return $8f51c2d77bf1da88$export$ec391ce65b083ed4(event, handleId, direction, dragOffset, dragHandleRect);
|
|
386
403
|
}
|
|
387
|
-
function $
|
|
404
|
+
function $8f51c2d77bf1da88$export$e7bf60a870f429b0(event) {
|
|
388
405
|
return event.type === "keydown";
|
|
389
406
|
}
|
|
390
|
-
function $
|
|
407
|
+
function $8f51c2d77bf1da88$export$764db16956f554f8(event) {
|
|
391
408
|
return event.type.startsWith("mouse");
|
|
392
409
|
}
|
|
393
|
-
function $
|
|
410
|
+
function $8f51c2d77bf1da88$export$c4dfce035d43d1e0(event) {
|
|
394
411
|
return event.type.startsWith("touch");
|
|
395
412
|
}
|
|
396
413
|
|
|
@@ -401,16 +418,16 @@ function $96f6397ae645d178$export$c4dfce035d43d1e0(event) {
|
|
|
401
418
|
|
|
402
419
|
|
|
403
420
|
|
|
404
|
-
function $
|
|
405
|
-
(0, $
|
|
421
|
+
function $4a90471e7083b52f$export$d9fcbe062527d159({ committedValuesRef: committedValuesRef , groupId: groupId , panels: panels , setSizes: setSizes , sizes: sizes , panelSizeBeforeCollapse: panelSizeBeforeCollapse }) {
|
|
422
|
+
(0, $jhddX$useEffect)(()=>{
|
|
406
423
|
const { direction: direction , panels: panels } = committedValuesRef.current;
|
|
407
|
-
const groupElement = (0, $
|
|
424
|
+
const groupElement = (0, $d6f7e4c3aa9e02d7$export$5e67632cf3550a9c)(groupId);
|
|
408
425
|
const { height: height , width: width } = groupElement.getBoundingClientRect();
|
|
409
|
-
const handles = (0, $
|
|
426
|
+
const handles = (0, $d6f7e4c3aa9e02d7$export$ae14931f0a0256a3)(groupId);
|
|
410
427
|
const cleanupFunctions = handles.map((handle)=>{
|
|
411
428
|
const handleId = handle.getAttribute("data-panel-resize-handle-id");
|
|
412
|
-
const panelsArray = (0, $
|
|
413
|
-
const [idBefore, idAfter] = (0, $
|
|
429
|
+
const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
|
|
430
|
+
const [idBefore, idAfter] = (0, $d6f7e4c3aa9e02d7$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
|
|
414
431
|
if (idBefore == null || idAfter == null) return ()=>{};
|
|
415
432
|
let minSize = 0;
|
|
416
433
|
let maxSize = 100;
|
|
@@ -428,7 +445,7 @@ function $99ad02c951ec80d0$export$d9fcbe062527d159({ committedValuesRef: committ
|
|
|
428
445
|
});
|
|
429
446
|
const ariaValueMax = Math.min(maxSize, 100 - totalMinSize);
|
|
430
447
|
const ariaValueMin = Math.max(minSize, (panelsArray.length - 1) * 100 - totalMaxSize);
|
|
431
|
-
const flexGrow = (0, $
|
|
448
|
+
const flexGrow = (0, $d6f7e4c3aa9e02d7$export$6f43503e166de6fb)(panels, idBefore, sizes);
|
|
432
449
|
handle.setAttribute("aria-valuemax", "" + Math.round(ariaValueMax));
|
|
433
450
|
handle.setAttribute("aria-valuemin", "" + Math.round(ariaValueMin));
|
|
434
451
|
handle.setAttribute("aria-valuenow", "" + Math.round(parseInt(flexGrow)));
|
|
@@ -442,9 +459,9 @@ function $99ad02c951ec80d0$export$d9fcbe062527d159({ committedValuesRef: committ
|
|
|
442
459
|
const size = sizes[index];
|
|
443
460
|
if (size != null) {
|
|
444
461
|
let delta = 0;
|
|
445
|
-
if (size.toPrecision((0, $
|
|
462
|
+
if (size.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879)) <= panelData.minSize.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879))) delta = direction === "horizontal" ? width : height;
|
|
446
463
|
else delta = -(direction === "horizontal" ? width : height);
|
|
447
|
-
const nextSizes = (0, $
|
|
464
|
+
const nextSizes = (0, $d6f7e4c3aa9e02d7$export$f50bae335f53943c)(event, panels, idBefore, idAfter, delta, sizes, panelSizeBeforeCollapse.current, null);
|
|
448
465
|
if (sizes !== nextSizes) setSizes(nextSizes);
|
|
449
466
|
}
|
|
450
467
|
}
|
|
@@ -453,7 +470,7 @@ function $99ad02c951ec80d0$export$d9fcbe062527d159({ committedValuesRef: committ
|
|
|
453
470
|
}
|
|
454
471
|
};
|
|
455
472
|
handle.addEventListener("keydown", onKeyDown);
|
|
456
|
-
const panelBefore = (0, $
|
|
473
|
+
const panelBefore = (0, $d6f7e4c3aa9e02d7$export$7361ed18ff57179e)(idBefore);
|
|
457
474
|
if (panelBefore != null) handle.setAttribute("aria-controls", panelBefore.id);
|
|
458
475
|
return ()=>{
|
|
459
476
|
handle.removeAttribute("aria-valuemax");
|
|
@@ -472,10 +489,10 @@ function $99ad02c951ec80d0$export$d9fcbe062527d159({ committedValuesRef: committ
|
|
|
472
489
|
sizes
|
|
473
490
|
]);
|
|
474
491
|
}
|
|
475
|
-
function $
|
|
476
|
-
(0, $
|
|
492
|
+
function $4a90471e7083b52f$export$33b0bea6ac3ffb03({ disabled: disabled , handleId: handleId , resizeHandler: resizeHandler }) {
|
|
493
|
+
(0, $jhddX$useEffect)(()=>{
|
|
477
494
|
if (disabled || resizeHandler == null) return;
|
|
478
|
-
const handleElement = (0, $
|
|
495
|
+
const handleElement = (0, $d6f7e4c3aa9e02d7$export$2e27d3a347680388)(handleId);
|
|
479
496
|
if (handleElement == null) return;
|
|
480
497
|
const onKeyDown = (event)=>{
|
|
481
498
|
switch(event.key){
|
|
@@ -489,8 +506,8 @@ function $99ad02c951ec80d0$export$33b0bea6ac3ffb03({ disabled: disabled , handle
|
|
|
489
506
|
break;
|
|
490
507
|
case "F6":
|
|
491
508
|
{
|
|
492
|
-
const handles = (0, $
|
|
493
|
-
const index = (0, $
|
|
509
|
+
const handles = (0, $d6f7e4c3aa9e02d7$export$8d0cd3c32ddc045e)();
|
|
510
|
+
const index = (0, $d6f7e4c3aa9e02d7$export$96a40be80fb6c3c8)(handleId);
|
|
494
511
|
const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
|
|
495
512
|
const nextHandle = handles[nextIndex];
|
|
496
513
|
nextHandle.focus();
|
|
@@ -510,9 +527,9 @@ function $99ad02c951ec80d0$export$33b0bea6ac3ffb03({ disabled: disabled , handle
|
|
|
510
527
|
}
|
|
511
528
|
|
|
512
529
|
|
|
513
|
-
let $
|
|
514
|
-
let $
|
|
515
|
-
function $
|
|
530
|
+
let $8d9d88bebf1a8ace$var$currentState = null;
|
|
531
|
+
let $8d9d88bebf1a8ace$var$element = null;
|
|
532
|
+
function $8d9d88bebf1a8ace$export$fa35f3322c52262f(state) {
|
|
516
533
|
switch(state){
|
|
517
534
|
case "horizontal":
|
|
518
535
|
return "col-resize";
|
|
@@ -528,26 +545,26 @@ function $60180881129f5dc3$export$fa35f3322c52262f(state) {
|
|
|
528
545
|
return "s-resize";
|
|
529
546
|
}
|
|
530
547
|
}
|
|
531
|
-
function $
|
|
532
|
-
if ($
|
|
533
|
-
document.head.removeChild($
|
|
534
|
-
$
|
|
535
|
-
$
|
|
548
|
+
function $8d9d88bebf1a8ace$export$b61932ee18f96e08() {
|
|
549
|
+
if ($8d9d88bebf1a8ace$var$element !== null) {
|
|
550
|
+
document.head.removeChild($8d9d88bebf1a8ace$var$element);
|
|
551
|
+
$8d9d88bebf1a8ace$var$currentState = null;
|
|
552
|
+
$8d9d88bebf1a8ace$var$element = null;
|
|
536
553
|
}
|
|
537
554
|
}
|
|
538
|
-
function $
|
|
539
|
-
if ($
|
|
540
|
-
$
|
|
541
|
-
const style = $
|
|
542
|
-
if ($
|
|
543
|
-
$
|
|
544
|
-
document.head.appendChild($
|
|
555
|
+
function $8d9d88bebf1a8ace$export$d395b5dfd066a659(state) {
|
|
556
|
+
if ($8d9d88bebf1a8ace$var$currentState === state) return;
|
|
557
|
+
$8d9d88bebf1a8ace$var$currentState = state;
|
|
558
|
+
const style = $8d9d88bebf1a8ace$export$fa35f3322c52262f(state);
|
|
559
|
+
if ($8d9d88bebf1a8ace$var$element === null) {
|
|
560
|
+
$8d9d88bebf1a8ace$var$element = document.createElement("style");
|
|
561
|
+
document.head.appendChild($8d9d88bebf1a8ace$var$element);
|
|
545
562
|
}
|
|
546
|
-
$
|
|
563
|
+
$8d9d88bebf1a8ace$var$element.innerHTML = `*{cursor: ${style}!important;}`;
|
|
547
564
|
}
|
|
548
565
|
|
|
549
566
|
|
|
550
|
-
function $
|
|
567
|
+
function $f7d932e9304c1581$export$2e2bcd8739ae039(callback, durationMs = 10) {
|
|
551
568
|
let timeoutId = null;
|
|
552
569
|
let callable = (...args)=>{
|
|
553
570
|
clearTimeout(timeoutId);
|
|
@@ -559,38 +576,56 @@ function $480430d8582e6616$export$2e2bcd8739ae039(callback, durationMs = 10) {
|
|
|
559
576
|
}
|
|
560
577
|
|
|
561
578
|
|
|
579
|
+
function $c892f0f705e6ded5$export$b141efd0b0fb9174(arrayA, arrayB) {
|
|
580
|
+
if (arrayA.length !== arrayB.length) return false;
|
|
581
|
+
for(let index = 0; index < arrayA.length; index++){
|
|
582
|
+
if (arrayA[index] !== arrayB[index]) return false;
|
|
583
|
+
}
|
|
584
|
+
return true;
|
|
585
|
+
}
|
|
586
|
+
|
|
587
|
+
|
|
562
588
|
// Limit the frequency of localStorage updates.
|
|
563
|
-
const $
|
|
564
|
-
function $
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
589
|
+
const $3daa5d4c086ea816$var$savePanelGroupLayoutDebounced = (0, $f7d932e9304c1581$export$2e2bcd8739ae039)((0, $6889c3a3ed41cfd1$export$af183b313c61be4f), 100);
|
|
590
|
+
function $3daa5d4c086ea816$var$throwServerError() {
|
|
591
|
+
throw new Error('PanelGroup "storage" prop required for server rendering.');
|
|
592
|
+
}
|
|
593
|
+
const $3daa5d4c086ea816$var$defaultStorage = {
|
|
594
|
+
getItem: typeof localStorage !== "undefined" ? (name)=>localStorage.getItem(name) : $3daa5d4c086ea816$var$throwServerError,
|
|
595
|
+
setItem: typeof localStorage !== "undefined" ? (name, value)=>localStorage.setItem(name, value) : $3daa5d4c086ea816$var$throwServerError
|
|
596
|
+
};
|
|
597
|
+
function $3daa5d4c086ea816$export$1d05749f6f573bb({ autoSaveId: autoSaveId , children: children = null , className: classNameFromProps = "" , direction: direction , id: idFromProps = null , onLayout: onLayout = null , storage: storage = $3daa5d4c086ea816$var$defaultStorage , style: styleFromProps = {} , tagName: Type = "div" }) {
|
|
598
|
+
const groupId = (0, $e504a2438473eda9$export$2e2bcd8739ae039)(idFromProps);
|
|
599
|
+
const [activeHandleId, setActiveHandleId] = (0, $jhddX$useState)(null);
|
|
600
|
+
const [panels, setPanels] = (0, $jhddX$useState)(new Map());
|
|
601
|
+
// When resizing is done via mouse/touch event–
|
|
602
|
+
// We store the initial Panel sizes in this ref, and apply move deltas to them instead of to the current sizes.
|
|
603
|
+
// This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
|
|
604
|
+
const initialDragStateRef = (0, $jhddX$useRef)(null);
|
|
568
605
|
// Use a ref to guard against users passing inline props
|
|
569
|
-
const callbacksRef = (0, $
|
|
606
|
+
const callbacksRef = (0, $jhddX$useRef)({
|
|
570
607
|
onLayout: onLayout
|
|
571
608
|
});
|
|
572
|
-
(0, $
|
|
609
|
+
(0, $jhddX$useEffect)(()=>{
|
|
573
610
|
callbacksRef.current.onLayout = onLayout;
|
|
574
611
|
});
|
|
575
612
|
// 0-1 values representing the relative size of each panel.
|
|
576
|
-
const [sizes, setSizes] = (0, $
|
|
577
|
-
// Resize is calculated by the distance between the current pointer event and the resize handle being "dragged"
|
|
578
|
-
// This value accounts for the initial offset when the touch/click starts, so the handle doesn't appear to "jump"
|
|
579
|
-
const dragOffsetRef = (0, $fpI56$useRef)(0);
|
|
613
|
+
const [sizes, setSizes] = (0, $jhddX$useState)([]);
|
|
580
614
|
// Used to support imperative collapse/expand API.
|
|
581
|
-
const panelSizeBeforeCollapse = (0, $
|
|
615
|
+
const panelSizeBeforeCollapse = (0, $jhddX$useRef)(new Map());
|
|
616
|
+
const prevDeltaRef = (0, $jhddX$useRef)(0);
|
|
582
617
|
// Store committed values to avoid unnecessarily re-running memoization/effects functions.
|
|
583
|
-
const committedValuesRef = (0, $
|
|
618
|
+
const committedValuesRef = (0, $jhddX$useRef)({
|
|
584
619
|
direction: direction,
|
|
585
620
|
panels: panels,
|
|
586
621
|
sizes: sizes
|
|
587
622
|
});
|
|
588
|
-
(0, $
|
|
623
|
+
(0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
|
|
589
624
|
committedValuesRef.current.direction = direction;
|
|
590
625
|
committedValuesRef.current.panels = panels;
|
|
591
626
|
committedValuesRef.current.sizes = sizes;
|
|
592
627
|
});
|
|
593
|
-
(0, $
|
|
628
|
+
(0, $4a90471e7083b52f$export$d9fcbe062527d159)({
|
|
594
629
|
committedValuesRef: committedValuesRef,
|
|
595
630
|
groupId: groupId,
|
|
596
631
|
panels: panels,
|
|
@@ -599,7 +634,7 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
599
634
|
panelSizeBeforeCollapse: panelSizeBeforeCollapse
|
|
600
635
|
});
|
|
601
636
|
// Notify external code when sizes have changed.
|
|
602
|
-
(0, $
|
|
637
|
+
(0, $jhddX$useEffect)(()=>{
|
|
603
638
|
const { onLayout: onLayout } = callbacksRef.current;
|
|
604
639
|
if (onLayout) {
|
|
605
640
|
const { sizes: sizes } = committedValuesRef.current;
|
|
@@ -611,14 +646,14 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
611
646
|
]);
|
|
612
647
|
// Notify Panel listeners about their initial sizes and collapsed state after mount.
|
|
613
648
|
// Subsequent changes will be called by the resizeHandler.
|
|
614
|
-
const didNotifyCallbacksAfterMountRef = (0, $
|
|
615
|
-
(0, $
|
|
649
|
+
const didNotifyCallbacksAfterMountRef = (0, $jhddX$useRef)(false);
|
|
650
|
+
(0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
|
|
616
651
|
if (didNotifyCallbacksAfterMountRef.current) return;
|
|
617
652
|
const { panels: panels , sizes: sizes } = committedValuesRef.current;
|
|
618
653
|
if (sizes.length > 0) {
|
|
619
654
|
didNotifyCallbacksAfterMountRef.current = true;
|
|
620
|
-
const panelsArray = (0, $
|
|
621
|
-
(0, $
|
|
655
|
+
const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
|
|
656
|
+
(0, $d6f7e4c3aa9e02d7$export$b8e48269e4faa934)(panelsArray, [], sizes);
|
|
622
657
|
}
|
|
623
658
|
}, [
|
|
624
659
|
sizes
|
|
@@ -626,7 +661,7 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
626
661
|
// Once all panels have registered themselves,
|
|
627
662
|
// Compute the initial sizes based on default weights.
|
|
628
663
|
// This assumes that panels register during initial mount (no conditional rendering)!
|
|
629
|
-
(0, $
|
|
664
|
+
(0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
|
|
630
665
|
const sizes = committedValuesRef.current.sizes;
|
|
631
666
|
if (sizes.length === panels.size) // Only compute (or restore) default sizes once per panel configuration.
|
|
632
667
|
return;
|
|
@@ -634,12 +669,12 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
634
669
|
// default size should be restored from local storage if possible.
|
|
635
670
|
let defaultSizes = undefined;
|
|
636
671
|
if (autoSaveId) {
|
|
637
|
-
const panelsArray = (0, $
|
|
638
|
-
defaultSizes = (0, $
|
|
672
|
+
const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
|
|
673
|
+
defaultSizes = (0, $6889c3a3ed41cfd1$export$9c80c6617f0386da)(autoSaveId, panelsArray, storage);
|
|
639
674
|
}
|
|
640
675
|
if (defaultSizes != null) setSizes(defaultSizes);
|
|
641
676
|
else {
|
|
642
|
-
const panelsArray1 = (0, $
|
|
677
|
+
const panelsArray1 = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
|
|
643
678
|
let panelsWithNullDefaultSize = 0;
|
|
644
679
|
let totalDefaultSize = 0;
|
|
645
680
|
let totalMinSize = 0;
|
|
@@ -663,19 +698,19 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
663
698
|
autoSaveId,
|
|
664
699
|
panels
|
|
665
700
|
]);
|
|
666
|
-
(0, $
|
|
701
|
+
(0, $jhddX$useEffect)(()=>{
|
|
667
702
|
// If this panel has been configured to persist sizing information, save sizes to local storage.
|
|
668
703
|
if (autoSaveId) {
|
|
669
704
|
if (sizes.length === 0 || sizes.length !== panels.size) return;
|
|
670
|
-
const panelsArray = (0, $
|
|
671
|
-
$
|
|
705
|
+
const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
|
|
706
|
+
$3daa5d4c086ea816$var$savePanelGroupLayoutDebounced(autoSaveId, panelsArray, sizes, storage);
|
|
672
707
|
}
|
|
673
708
|
}, [
|
|
674
709
|
autoSaveId,
|
|
675
710
|
panels,
|
|
676
711
|
sizes
|
|
677
712
|
]);
|
|
678
|
-
const getPanelStyle = (0, $
|
|
713
|
+
const getPanelStyle = (0, $jhddX$useCallback)((id)=>{
|
|
679
714
|
const { panels: panels } = committedValuesRef.current;
|
|
680
715
|
// Before mounting, Panels will not yet have registered themselves.
|
|
681
716
|
// This includes server rendering.
|
|
@@ -687,7 +722,7 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
687
722
|
// Without this, Panel sizes may be unintentionally overridden by their content.
|
|
688
723
|
overflow: "hidden"
|
|
689
724
|
};
|
|
690
|
-
const flexGrow = (0, $
|
|
725
|
+
const flexGrow = (0, $d6f7e4c3aa9e02d7$export$6f43503e166de6fb)(panels, id, sizes);
|
|
691
726
|
return {
|
|
692
727
|
flexBasis: 0,
|
|
693
728
|
flexGrow: flexGrow,
|
|
@@ -703,7 +738,7 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
703
738
|
direction,
|
|
704
739
|
sizes
|
|
705
740
|
]);
|
|
706
|
-
const registerPanel = (0, $
|
|
741
|
+
const registerPanel = (0, $jhddX$useCallback)((id, panel)=>{
|
|
707
742
|
setPanels((prevPanels)=>{
|
|
708
743
|
if (prevPanels.has(id)) return prevPanels;
|
|
709
744
|
const nextPanels = new Map(prevPanels);
|
|
@@ -711,40 +746,50 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
711
746
|
return nextPanels;
|
|
712
747
|
});
|
|
713
748
|
}, []);
|
|
714
|
-
const registerResizeHandle = (0, $
|
|
749
|
+
const registerResizeHandle = (0, $jhddX$useCallback)((handleId)=>{
|
|
715
750
|
const resizeHandler = (event)=>{
|
|
716
751
|
event.preventDefault();
|
|
717
752
|
const { direction: direction , panels: panels , sizes: prevSizes } = committedValuesRef.current;
|
|
718
|
-
const panelsArray = (0, $
|
|
719
|
-
const [idBefore, idAfter] = (0, $
|
|
753
|
+
const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
|
|
754
|
+
const [idBefore, idAfter] = (0, $d6f7e4c3aa9e02d7$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
|
|
720
755
|
if (idBefore == null || idAfter == null) return;
|
|
721
|
-
const movement = (0, $
|
|
756
|
+
const movement = (0, $8f51c2d77bf1da88$export$354b17c0684607ed)(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current);
|
|
722
757
|
if (movement === 0) return;
|
|
723
|
-
const groupElement = (0, $
|
|
758
|
+
const groupElement = (0, $d6f7e4c3aa9e02d7$export$5e67632cf3550a9c)(groupId);
|
|
724
759
|
const rect = groupElement.getBoundingClientRect();
|
|
725
760
|
const isHorizontal = direction === "horizontal";
|
|
726
761
|
const size = isHorizontal ? rect.width : rect.height;
|
|
727
762
|
const delta = movement / size * 100;
|
|
728
|
-
const nextSizes = (0, $
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
763
|
+
const nextSizes = (0, $d6f7e4c3aa9e02d7$export$f50bae335f53943c)(event, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, initialDragStateRef.current);
|
|
764
|
+
const sizesChanged = !(0, $c892f0f705e6ded5$export$b141efd0b0fb9174)(prevSizes, nextSizes);
|
|
765
|
+
// Don't update cursor for resizes triggered by keyboard interactions.
|
|
766
|
+
if ((0, $8f51c2d77bf1da88$export$764db16956f554f8)(event) || (0, $8f51c2d77bf1da88$export$c4dfce035d43d1e0)(event)) // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
|
|
767
|
+
// In this case, Panel sizes might not change–
|
|
768
|
+
// but updating cursor in this scenario would cause a flicker.
|
|
769
|
+
{
|
|
770
|
+
if (prevDeltaRef.current != delta) {
|
|
771
|
+
if (!sizesChanged) {
|
|
772
|
+
// If the pointer has moved too far to resize the panel any further,
|
|
773
|
+
// update the cursor style for a visual clue.
|
|
774
|
+
// This mimics VS Code behavior.
|
|
775
|
+
if (isHorizontal) (0, $8d9d88bebf1a8ace$export$d395b5dfd066a659)(movement < 0 ? "horizontal-min" : "horizontal-max");
|
|
776
|
+
else (0, $8d9d88bebf1a8ace$export$d395b5dfd066a659)(movement < 0 ? "vertical-min" : "vertical-max");
|
|
777
|
+
} else // Reset the cursor style to the the normal resize cursor.
|
|
778
|
+
(0, $8d9d88bebf1a8ace$export$d395b5dfd066a659)(isHorizontal ? "horizontal" : "vertical");
|
|
779
|
+
}
|
|
780
|
+
}
|
|
781
|
+
if (sizesChanged) {
|
|
738
782
|
// If resize change handlers have been declared, this is the time to call them.
|
|
739
|
-
(0, $
|
|
783
|
+
(0, $d6f7e4c3aa9e02d7$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
|
|
740
784
|
setSizes(nextSizes);
|
|
741
785
|
}
|
|
786
|
+
prevDeltaRef.current = delta;
|
|
742
787
|
};
|
|
743
788
|
return resizeHandler;
|
|
744
789
|
}, [
|
|
745
790
|
groupId
|
|
746
791
|
]);
|
|
747
|
-
const unregisterPanel = (0, $
|
|
792
|
+
const unregisterPanel = (0, $jhddX$useCallback)((id)=>{
|
|
748
793
|
setPanels((prevPanels)=>{
|
|
749
794
|
if (!prevPanels.has(id)) return prevPanels;
|
|
750
795
|
const nextPanels = new Map(prevPanels);
|
|
@@ -752,72 +797,74 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
752
797
|
return nextPanels;
|
|
753
798
|
});
|
|
754
799
|
}, []);
|
|
755
|
-
const collapsePanel = (0, $
|
|
800
|
+
const collapsePanel = (0, $jhddX$useCallback)((id)=>{
|
|
756
801
|
const { panels: panels , sizes: prevSizes } = committedValuesRef.current;
|
|
757
802
|
const panel = panels.get(id);
|
|
758
803
|
if (panel == null || !panel.collapsible) return;
|
|
759
|
-
const panelsArray = (0, $
|
|
804
|
+
const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
|
|
760
805
|
const index = panelsArray.indexOf(panel);
|
|
761
806
|
if (index < 0) return;
|
|
762
807
|
const currentSize = prevSizes[index];
|
|
763
808
|
if (currentSize === 0) // Panel is already collapsed.
|
|
764
809
|
return;
|
|
765
810
|
panelSizeBeforeCollapse.current.set(id, currentSize);
|
|
766
|
-
const [idBefore, idAfter] = (0, $
|
|
811
|
+
const [idBefore, idAfter] = (0, $d6f7e4c3aa9e02d7$export$5a5b0c1d38c23c3b)(id, panelsArray);
|
|
767
812
|
if (idBefore == null || idAfter == null) return;
|
|
768
813
|
const isLastPanel = index === panelsArray.length - 1;
|
|
769
814
|
const delta = isLastPanel ? currentSize : 0 - currentSize;
|
|
770
|
-
const nextSizes = (0, $
|
|
815
|
+
const nextSizes = (0, $d6f7e4c3aa9e02d7$export$f50bae335f53943c)(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
|
|
771
816
|
if (prevSizes !== nextSizes) {
|
|
772
817
|
// If resize change handlers have been declared, this is the time to call them.
|
|
773
|
-
(0, $
|
|
818
|
+
(0, $d6f7e4c3aa9e02d7$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
|
|
774
819
|
setSizes(nextSizes);
|
|
775
820
|
}
|
|
776
821
|
}, []);
|
|
777
|
-
const expandPanel = (0, $
|
|
822
|
+
const expandPanel = (0, $jhddX$useCallback)((id)=>{
|
|
778
823
|
const { panels: panels , sizes: prevSizes } = committedValuesRef.current;
|
|
779
824
|
const panel = panels.get(id);
|
|
780
825
|
if (panel == null) return;
|
|
781
826
|
const sizeBeforeCollapse = panelSizeBeforeCollapse.current.get(id) || panel.minSize;
|
|
782
827
|
if (!sizeBeforeCollapse) return;
|
|
783
|
-
const panelsArray = (0, $
|
|
828
|
+
const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
|
|
784
829
|
const index = panelsArray.indexOf(panel);
|
|
785
830
|
if (index < 0) return;
|
|
786
831
|
const currentSize = prevSizes[index];
|
|
787
832
|
if (currentSize !== 0) // Panel is already expanded.
|
|
788
833
|
return;
|
|
789
|
-
const [idBefore, idAfter] = (0, $
|
|
834
|
+
const [idBefore, idAfter] = (0, $d6f7e4c3aa9e02d7$export$5a5b0c1d38c23c3b)(id, panelsArray);
|
|
790
835
|
if (idBefore == null || idAfter == null) return;
|
|
791
836
|
const isLastPanel = index === panelsArray.length - 1;
|
|
792
837
|
const delta = isLastPanel ? 0 - sizeBeforeCollapse : sizeBeforeCollapse;
|
|
793
|
-
const nextSizes = (0, $
|
|
838
|
+
const nextSizes = (0, $d6f7e4c3aa9e02d7$export$f50bae335f53943c)(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
|
|
794
839
|
if (prevSizes !== nextSizes) {
|
|
795
840
|
// If resize change handlers have been declared, this is the time to call them.
|
|
796
|
-
(0, $
|
|
841
|
+
(0, $d6f7e4c3aa9e02d7$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
|
|
797
842
|
setSizes(nextSizes);
|
|
798
843
|
}
|
|
799
844
|
}, []);
|
|
800
|
-
const resizePanel = (0, $
|
|
845
|
+
const resizePanel = (0, $jhddX$useCallback)((id, nextSize)=>{
|
|
801
846
|
const { panels: panels , sizes: prevSizes } = committedValuesRef.current;
|
|
802
847
|
const panel = panels.get(id);
|
|
803
848
|
if (panel == null) return;
|
|
804
|
-
const panelsArray = (0, $
|
|
849
|
+
const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
|
|
805
850
|
const index = panelsArray.indexOf(panel);
|
|
806
851
|
if (index < 0) return;
|
|
807
852
|
const currentSize = prevSizes[index];
|
|
808
853
|
if (currentSize === nextSize) return;
|
|
809
|
-
|
|
854
|
+
if (panel.collapsible && nextSize === 0) ;
|
|
855
|
+
else nextSize = Math.min(panel.maxSize, Math.max(panel.minSize, nextSize));
|
|
856
|
+
const [idBefore, idAfter] = (0, $d6f7e4c3aa9e02d7$export$5a5b0c1d38c23c3b)(id, panelsArray);
|
|
810
857
|
if (idBefore == null || idAfter == null) return;
|
|
811
858
|
const isLastPanel = index === panelsArray.length - 1;
|
|
812
859
|
const delta = isLastPanel ? currentSize - nextSize : nextSize - currentSize;
|
|
813
|
-
const nextSizes = (0, $
|
|
860
|
+
const nextSizes = (0, $d6f7e4c3aa9e02d7$export$f50bae335f53943c)(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
|
|
814
861
|
if (prevSizes !== nextSizes) {
|
|
815
862
|
// If resize change handlers have been declared, this is the time to call them.
|
|
816
|
-
(0, $
|
|
863
|
+
(0, $d6f7e4c3aa9e02d7$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
|
|
817
864
|
setSizes(nextSizes);
|
|
818
865
|
}
|
|
819
866
|
}, []);
|
|
820
|
-
const context = (0, $
|
|
867
|
+
const context = (0, $jhddX$useMemo)(()=>({
|
|
821
868
|
activeHandleId: activeHandleId,
|
|
822
869
|
collapsePanel: collapsePanel,
|
|
823
870
|
direction: direction,
|
|
@@ -829,11 +876,19 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
829
876
|
resizePanel: resizePanel,
|
|
830
877
|
startDragging: (id, event)=>{
|
|
831
878
|
setActiveHandleId(id);
|
|
832
|
-
|
|
879
|
+
if ((0, $8f51c2d77bf1da88$export$764db16956f554f8)(event) || (0, $8f51c2d77bf1da88$export$c4dfce035d43d1e0)(event)) {
|
|
880
|
+
const handleElement = (0, $d6f7e4c3aa9e02d7$export$2e27d3a347680388)(id);
|
|
881
|
+
initialDragStateRef.current = {
|
|
882
|
+
dragHandleRect: handleElement.getBoundingClientRect(),
|
|
883
|
+
dragOffset: (0, $8f51c2d77bf1da88$export$ec391ce65b083ed4)(event, id, direction),
|
|
884
|
+
sizes: committedValuesRef.current.sizes
|
|
885
|
+
};
|
|
886
|
+
}
|
|
833
887
|
},
|
|
834
888
|
stopDragging: ()=>{
|
|
835
|
-
(0, $
|
|
889
|
+
(0, $8d9d88bebf1a8ace$export$b61932ee18f96e08)();
|
|
836
890
|
setActiveHandleId(null);
|
|
891
|
+
initialDragStateRef.current = null;
|
|
837
892
|
},
|
|
838
893
|
unregisterPanel: unregisterPanel
|
|
839
894
|
}), [
|
|
@@ -855,10 +910,11 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
855
910
|
overflow: "hidden",
|
|
856
911
|
width: "100%"
|
|
857
912
|
};
|
|
858
|
-
return (0, $
|
|
859
|
-
children: (0, $
|
|
913
|
+
return (0, $jhddX$createElement)((0, $af466b485b9d515d$export$7d8c6d083caec74a).Provider, {
|
|
914
|
+
children: (0, $jhddX$createElement)(Type, {
|
|
860
915
|
children: children,
|
|
861
916
|
className: classNameFromProps,
|
|
917
|
+
"data-panel-group": "",
|
|
862
918
|
"data-panel-group-direction": direction,
|
|
863
919
|
"data-panel-group-id": groupId,
|
|
864
920
|
style: {
|
|
@@ -872,7 +928,7 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
872
928
|
// Workaround for Parcel scope hoisting (which renames objects/functions).
|
|
873
929
|
// Casting to :any is required to avoid corrupting the generated TypeScript types.
|
|
874
930
|
// See github.com/parcel-bundler/parcel/issues/8724
|
|
875
|
-
$
|
|
931
|
+
$3daa5d4c086ea816$export$1d05749f6f573bb.displayName = "PanelGroup";
|
|
876
932
|
|
|
877
933
|
|
|
878
934
|
|
|
@@ -880,16 +936,16 @@ $eb1c4d3cf38334c2$export$1d05749f6f573bb.displayName = "PanelGroup";
|
|
|
880
936
|
|
|
881
937
|
|
|
882
938
|
|
|
883
|
-
function $
|
|
884
|
-
const divElementRef = (0, $
|
|
885
|
-
const panelGroupContext = (0, $
|
|
939
|
+
function $971f2c37f9d2b98e$export$8829ecf6b6b15484({ children: children = null , className: classNameFromProps = "" , disabled: disabled = false , id: idFromProps = null , style: styleFromProps = {} , tagName: Type = "div" }) {
|
|
940
|
+
const divElementRef = (0, $jhddX$useRef)(null);
|
|
941
|
+
const panelGroupContext = (0, $jhddX$useContext)((0, $af466b485b9d515d$export$7d8c6d083caec74a));
|
|
886
942
|
if (panelGroupContext === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
|
|
887
943
|
const { activeHandleId: activeHandleId , direction: direction , groupId: groupId , registerResizeHandle: registerResizeHandle , startDragging: startDragging , stopDragging: stopDragging } = panelGroupContext;
|
|
888
|
-
const resizeHandleId = (0, $
|
|
944
|
+
const resizeHandleId = (0, $e504a2438473eda9$export$2e2bcd8739ae039)(idFromProps);
|
|
889
945
|
const isDragging = activeHandleId === resizeHandleId;
|
|
890
|
-
const [isFocused, setIsFocused] = (0, $
|
|
891
|
-
const [resizeHandler, setResizeHandler] = (0, $
|
|
892
|
-
const stopDraggingAndBlur = (0, $
|
|
946
|
+
const [isFocused, setIsFocused] = (0, $jhddX$useState)(false);
|
|
947
|
+
const [resizeHandler, setResizeHandler] = (0, $jhddX$useState)(null);
|
|
948
|
+
const stopDraggingAndBlur = (0, $jhddX$useCallback)(()=>{
|
|
893
949
|
// Clicking on the drag handle shouldn't leave it focused;
|
|
894
950
|
// That would cause the PanelGroup to think it was still active.
|
|
895
951
|
const div = divElementRef.current;
|
|
@@ -898,7 +954,7 @@ function $91e657179112cfb0$export$8829ecf6b6b15484({ children: children = null ,
|
|
|
898
954
|
}, [
|
|
899
955
|
stopDragging
|
|
900
956
|
]);
|
|
901
|
-
(0, $
|
|
957
|
+
(0, $jhddX$useEffect)(()=>{
|
|
902
958
|
if (disabled) setResizeHandler(null);
|
|
903
959
|
else {
|
|
904
960
|
const resizeHandler = registerResizeHandle(resizeHandleId);
|
|
@@ -909,7 +965,7 @@ function $91e657179112cfb0$export$8829ecf6b6b15484({ children: children = null ,
|
|
|
909
965
|
resizeHandleId,
|
|
910
966
|
registerResizeHandle
|
|
911
967
|
]);
|
|
912
|
-
(0, $
|
|
968
|
+
(0, $jhddX$useEffect)(()=>{
|
|
913
969
|
if (disabled || resizeHandler == null || !isDragging) return;
|
|
914
970
|
const onMove = (event)=>{
|
|
915
971
|
resizeHandler(event);
|
|
@@ -933,17 +989,17 @@ function $91e657179112cfb0$export$8829ecf6b6b15484({ children: children = null ,
|
|
|
933
989
|
resizeHandler,
|
|
934
990
|
stopDraggingAndBlur
|
|
935
991
|
]);
|
|
936
|
-
(0, $
|
|
992
|
+
(0, $4a90471e7083b52f$export$33b0bea6ac3ffb03)({
|
|
937
993
|
disabled: disabled,
|
|
938
994
|
handleId: resizeHandleId,
|
|
939
995
|
resizeHandler: resizeHandler
|
|
940
996
|
});
|
|
941
997
|
const style = {
|
|
942
|
-
cursor: (0, $
|
|
998
|
+
cursor: (0, $8d9d88bebf1a8ace$export$fa35f3322c52262f)(direction),
|
|
943
999
|
touchAction: "none",
|
|
944
1000
|
userSelect: "none"
|
|
945
1001
|
};
|
|
946
|
-
return (0, $
|
|
1002
|
+
return (0, $jhddX$createElement)(Type, {
|
|
947
1003
|
children: children,
|
|
948
1004
|
className: classNameFromProps,
|
|
949
1005
|
"data-resize-handle-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,
|
|
@@ -970,10 +1026,10 @@ function $91e657179112cfb0$export$8829ecf6b6b15484({ children: children = null ,
|
|
|
970
1026
|
// Workaround for Parcel scope hoisting (which renames objects/functions).
|
|
971
1027
|
// Casting to :any is required to avoid corrupting the generated TypeScript types.
|
|
972
1028
|
// See github.com/parcel-bundler/parcel/issues/8724
|
|
973
|
-
$
|
|
1029
|
+
$971f2c37f9d2b98e$export$8829ecf6b6b15484.displayName = "PanelResizeHandle";
|
|
974
1030
|
|
|
975
1031
|
|
|
976
1032
|
|
|
977
1033
|
|
|
978
|
-
export {$
|
|
1034
|
+
export {$c33df6d7c39fd3ee$export$2ddb90ad54e5f587 as Panel, $3daa5d4c086ea816$export$1d05749f6f573bb as PanelGroup, $971f2c37f9d2b98e$export$8829ecf6b6b15484 as PanelResizeHandle};
|
|
979
1035
|
//# sourceMappingURL=react-resizable-panels.module.js.map
|