react-resizable-panels 0.0.34 → 0.0.36
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 +5 -0
- package/README.md +14 -11
- package/dist/react-resizable-panels.d.ts +2 -1
- package/dist/react-resizable-panels.d.ts.map +1 -1
- package/dist/react-resizable-panels.js +200 -195
- package/dist/react-resizable-panels.js.map +1 -1
- package/dist/react-resizable-panels.module.js +198 -193
- package/dist/react-resizable-panels.module.js.map +1 -1
- package/package.json +5 -2
- package/src/PanelGroup.ts +6 -1
- package/src/utils/group.ts +3 -3
- package/src/utils/serialization.ts +1 -1
|
@@ -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,13 +133,13 @@ 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
144
|
const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
|
|
145
145
|
if (serialized) {
|
|
@@ -149,17 +149,18 @@ function $6ff1a22b27cc039d$var$loadSerializedPanelGroupState(autoSaveId, storage
|
|
|
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));
|
|
@@ -169,17 +170,17 @@ function $6ff1a22b27cc039d$export$af183b313c61be4f(autoSaveId, panels, sizes, st
|
|
|
169
170
|
}
|
|
170
171
|
|
|
171
172
|
|
|
172
|
-
const $
|
|
173
|
+
const $a8e83be196252871$export$d6d3992f3becc879 = 10;
|
|
173
174
|
|
|
174
175
|
|
|
175
176
|
|
|
176
|
-
function $
|
|
177
|
+
function $d6f7e4c3aa9e02d7$export$f50bae335f53943c(event, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse, initialDragState) {
|
|
177
178
|
const { sizes: initialSizes } = initialDragState || {};
|
|
178
179
|
// If we're resizing by mouse or touch, use the initial sizes as a base.
|
|
179
180
|
// This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
|
|
180
181
|
const baseSizes = initialSizes || prevSizes;
|
|
181
182
|
if (delta === 0) return baseSizes;
|
|
182
|
-
const panelsArray = $
|
|
183
|
+
const panelsArray = $d6f7e4c3aa9e02d7$export$a861c0ad45885494(panels);
|
|
183
184
|
const nextSizes = baseSizes.concat();
|
|
184
185
|
let deltaApplied = 0;
|
|
185
186
|
// A resizing panel affects the panels before or after it.
|
|
@@ -195,7 +196,7 @@ function $f30c804b5fe6cc1a$export$f50bae335f53943c(event, panels, idBefore, idAf
|
|
|
195
196
|
const index = panelsArray.findIndex((panel)=>panel.id === pivotId);
|
|
196
197
|
const panel = panelsArray[index];
|
|
197
198
|
const baseSize = baseSizes[index];
|
|
198
|
-
const nextSize = $
|
|
199
|
+
const nextSize = $d6f7e4c3aa9e02d7$var$safeResizePanel(panel, Math.abs(delta), baseSize, event);
|
|
199
200
|
if (baseSize === nextSize) // If there's no room for the pivot panel to grow, we can ignore this drag update.
|
|
200
201
|
return baseSizes;
|
|
201
202
|
else {
|
|
@@ -209,12 +210,12 @@ function $f30c804b5fe6cc1a$export$f50bae335f53943c(event, panels, idBefore, idAf
|
|
|
209
210
|
const panel1 = panelsArray[index1];
|
|
210
211
|
const baseSize1 = baseSizes[index1];
|
|
211
212
|
const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
|
|
212
|
-
const nextSize1 = $
|
|
213
|
+
const nextSize1 = $d6f7e4c3aa9e02d7$var$safeResizePanel(panel1, 0 - deltaRemaining, baseSize1, event);
|
|
213
214
|
if (baseSize1 !== nextSize1) {
|
|
214
215
|
if (nextSize1 === 0 && baseSize1 > 0) panelSizeBeforeCollapse.set(panel1.id, baseSize1);
|
|
215
216
|
deltaApplied += baseSize1 - nextSize1;
|
|
216
217
|
nextSizes[index1] = nextSize1;
|
|
217
|
-
if (deltaApplied.toPrecision((0, $
|
|
218
|
+
if (deltaApplied.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879)).localeCompare(Math.abs(delta).toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879)), undefined, {
|
|
218
219
|
numeric: true
|
|
219
220
|
}) >= 0) break;
|
|
220
221
|
}
|
|
@@ -233,7 +234,7 @@ function $f30c804b5fe6cc1a$export$f50bae335f53943c(event, panels, idBefore, idAf
|
|
|
233
234
|
nextSizes[index1] = baseSizes[index1] + deltaApplied;
|
|
234
235
|
return nextSizes;
|
|
235
236
|
}
|
|
236
|
-
function $
|
|
237
|
+
function $d6f7e4c3aa9e02d7$export$b8e48269e4faa934(panelsArray, prevSizes, nextSizes) {
|
|
237
238
|
nextSizes.forEach((nextSize, index)=>{
|
|
238
239
|
const prevSize = prevSizes[index];
|
|
239
240
|
if (prevSize !== nextSize) {
|
|
@@ -249,7 +250,7 @@ function $f30c804b5fe6cc1a$export$b8e48269e4faa934(panelsArray, prevSizes, nextS
|
|
|
249
250
|
}
|
|
250
251
|
});
|
|
251
252
|
}
|
|
252
|
-
function $
|
|
253
|
+
function $d6f7e4c3aa9e02d7$export$5a5b0c1d38c23c3b(id, panelsArray) {
|
|
253
254
|
if (panelsArray.length < 2) return [
|
|
254
255
|
null,
|
|
255
256
|
null
|
|
@@ -267,61 +268,65 @@ function $f30c804b5fe6cc1a$export$5a5b0c1d38c23c3b(id, panelsArray) {
|
|
|
267
268
|
idAfter
|
|
268
269
|
];
|
|
269
270
|
}
|
|
270
|
-
function $
|
|
271
|
+
function $d6f7e4c3aa9e02d7$export$6f43503e166de6fb(panels, id, sizes) {
|
|
271
272
|
if (panels.size === 1) return "100";
|
|
272
|
-
const panelsArray = $
|
|
273
|
+
const panelsArray = $d6f7e4c3aa9e02d7$export$a861c0ad45885494(panels);
|
|
273
274
|
const index = panelsArray.findIndex((panel)=>panel.id === id);
|
|
274
275
|
const size = sizes[index];
|
|
275
276
|
if (size == null) return "0";
|
|
276
|
-
return size.toPrecision((0, $
|
|
277
|
+
return size.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879));
|
|
277
278
|
}
|
|
278
|
-
function $
|
|
279
|
+
function $d6f7e4c3aa9e02d7$export$7361ed18ff57179e(id) {
|
|
279
280
|
const element = document.querySelector(`[data-panel-id="${id}"]`);
|
|
280
281
|
if (element) return element;
|
|
281
282
|
return null;
|
|
282
283
|
}
|
|
283
|
-
function $
|
|
284
|
+
function $d6f7e4c3aa9e02d7$export$5e67632cf3550a9c(id) {
|
|
284
285
|
const element = document.querySelector(`[data-panel-group-id="${id}"]`);
|
|
285
286
|
if (element) return element;
|
|
286
287
|
return null;
|
|
287
288
|
}
|
|
288
|
-
function $
|
|
289
|
+
function $d6f7e4c3aa9e02d7$export$2e27d3a347680388(id) {
|
|
289
290
|
const element = document.querySelector(`[data-panel-resize-handle-id="${id}"]`);
|
|
290
291
|
if (element) return element;
|
|
291
292
|
return null;
|
|
292
293
|
}
|
|
293
|
-
function $
|
|
294
|
-
const handles = $
|
|
294
|
+
function $d6f7e4c3aa9e02d7$export$96a40be80fb6c3c8(id) {
|
|
295
|
+
const handles = $d6f7e4c3aa9e02d7$export$8d0cd3c32ddc045e();
|
|
295
296
|
const index = handles.findIndex((handle)=>handle.getAttribute("data-panel-resize-handle-id") === id);
|
|
296
|
-
return index
|
|
297
|
+
return index !== null && index !== void 0 ? index : null;
|
|
297
298
|
}
|
|
298
|
-
function $
|
|
299
|
+
function $d6f7e4c3aa9e02d7$export$8d0cd3c32ddc045e() {
|
|
299
300
|
return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id]`));
|
|
300
301
|
}
|
|
301
|
-
function $
|
|
302
|
+
function $d6f7e4c3aa9e02d7$export$ae14931f0a0256a3(groupId) {
|
|
302
303
|
return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
|
|
303
304
|
}
|
|
304
|
-
function $
|
|
305
|
-
|
|
306
|
-
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);
|
|
307
309
|
const index = handles.indexOf(handle);
|
|
308
|
-
|
|
309
|
-
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;
|
|
310
314
|
return [
|
|
311
315
|
idBefore,
|
|
312
316
|
idAfter
|
|
313
317
|
];
|
|
314
318
|
}
|
|
315
|
-
function $
|
|
319
|
+
function $d6f7e4c3aa9e02d7$export$a861c0ad45885494(panels) {
|
|
316
320
|
return Array.from(panels.values()).sort((a, b)=>a.order - b.order);
|
|
317
321
|
}
|
|
318
|
-
function $
|
|
322
|
+
function $d6f7e4c3aa9e02d7$var$safeResizePanel(panel, delta, prevSize, event) {
|
|
319
323
|
const nextSizeUnsafe = prevSize + delta;
|
|
320
324
|
if (panel.collapsible) {
|
|
321
325
|
if (prevSize > 0) {
|
|
322
326
|
if (nextSizeUnsafe <= 0) return 0;
|
|
323
327
|
} else {
|
|
324
|
-
|
|
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");
|
|
325
330
|
if (!isKeyboardEvent) {
|
|
326
331
|
// Keyboard events should expand a collapsed panel to the min size,
|
|
327
332
|
// but mouse events should wait until the panel has reached its min size
|
|
@@ -335,27 +340,27 @@ function $f30c804b5fe6cc1a$var$safeResizePanel(panel, delta, prevSize, event) {
|
|
|
335
340
|
}
|
|
336
341
|
|
|
337
342
|
|
|
338
|
-
function $
|
|
343
|
+
function $8f51c2d77bf1da88$export$ec391ce65b083ed4(event, handleId, direction, initialOffset = 0, initialHandleElementRect = null) {
|
|
339
344
|
const isHorizontal = direction === "horizontal";
|
|
340
345
|
let pointerOffset = 0;
|
|
341
|
-
if ($
|
|
342
|
-
else if ($
|
|
346
|
+
if ($8f51c2d77bf1da88$export$764db16956f554f8(event)) pointerOffset = isHorizontal ? event.clientX : event.clientY;
|
|
347
|
+
else if ($8f51c2d77bf1da88$export$c4dfce035d43d1e0(event)) {
|
|
343
348
|
const firstTouch = event.touches[0];
|
|
344
349
|
pointerOffset = isHorizontal ? firstTouch.screenX : firstTouch.screenY;
|
|
345
350
|
} else return 0;
|
|
346
|
-
const handleElement = (0, $
|
|
351
|
+
const handleElement = (0, $d6f7e4c3aa9e02d7$export$2e27d3a347680388)(handleId);
|
|
347
352
|
const rect = initialHandleElementRect || handleElement.getBoundingClientRect();
|
|
348
353
|
const elementOffset = isHorizontal ? rect.left : rect.top;
|
|
349
354
|
return pointerOffset - elementOffset - initialOffset;
|
|
350
355
|
}
|
|
351
|
-
function $
|
|
356
|
+
function $8f51c2d77bf1da88$export$354b17c0684607ed(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragState) {
|
|
352
357
|
const { dragOffset: dragOffset = 0 , dragHandleRect: dragHandleRect , sizes: initialSizes } = initialDragState || {};
|
|
353
358
|
// If we're resizing by mouse or touch, use the initial sizes as a base.
|
|
354
359
|
// This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
|
|
355
360
|
const baseSizes = initialSizes || prevSizes;
|
|
356
|
-
if ($
|
|
361
|
+
if ($8f51c2d77bf1da88$export$e7bf60a870f429b0(event)) {
|
|
357
362
|
const isHorizontal = direction === "horizontal";
|
|
358
|
-
const groupElement = (0, $
|
|
363
|
+
const groupElement = (0, $d6f7e4c3aa9e02d7$export$5e67632cf3550a9c)(groupId);
|
|
359
364
|
const rect = groupElement.getBoundingClientRect();
|
|
360
365
|
const groupSizeInPixels = isHorizontal ? rect.width : rect.height;
|
|
361
366
|
const denominator = event.shiftKey ? 10 : 100;
|
|
@@ -385,24 +390,24 @@ function $96f6397ae645d178$export$354b17c0684607ed(event, groupId, handleId, pan
|
|
|
385
390
|
// we need to special case resizing around the minSize boundary.
|
|
386
391
|
// If contracting, Panels should shrink to their minSize and then snap to fully collapsed.
|
|
387
392
|
// If expanding from collapsed, they should snap back to their minSize.
|
|
388
|
-
const [idBefore, idAfter] = (0, $
|
|
393
|
+
const [idBefore, idAfter] = (0, $d6f7e4c3aa9e02d7$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
|
|
389
394
|
const targetPanelId = movement < 0 ? idBefore : idAfter;
|
|
390
395
|
const targetPanelIndex = panelsArray.findIndex((panel)=>panel.id === targetPanelId);
|
|
391
396
|
const targetPanel = panelsArray[targetPanelIndex];
|
|
392
397
|
if (targetPanel.collapsible) {
|
|
393
398
|
const baseSize = baseSizes[targetPanelIndex];
|
|
394
|
-
if (baseSize === 0 || baseSize.toPrecision((0, $
|
|
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;
|
|
395
400
|
}
|
|
396
401
|
return movement;
|
|
397
|
-
} else return $
|
|
402
|
+
} else return $8f51c2d77bf1da88$export$ec391ce65b083ed4(event, handleId, direction, dragOffset, dragHandleRect);
|
|
398
403
|
}
|
|
399
|
-
function $
|
|
404
|
+
function $8f51c2d77bf1da88$export$e7bf60a870f429b0(event) {
|
|
400
405
|
return event.type === "keydown";
|
|
401
406
|
}
|
|
402
|
-
function $
|
|
407
|
+
function $8f51c2d77bf1da88$export$764db16956f554f8(event) {
|
|
403
408
|
return event.type.startsWith("mouse");
|
|
404
409
|
}
|
|
405
|
-
function $
|
|
410
|
+
function $8f51c2d77bf1da88$export$c4dfce035d43d1e0(event) {
|
|
406
411
|
return event.type.startsWith("touch");
|
|
407
412
|
}
|
|
408
413
|
|
|
@@ -413,16 +418,16 @@ function $96f6397ae645d178$export$c4dfce035d43d1e0(event) {
|
|
|
413
418
|
|
|
414
419
|
|
|
415
420
|
|
|
416
|
-
function $
|
|
417
|
-
(0, $
|
|
421
|
+
function $4a90471e7083b52f$export$d9fcbe062527d159({ committedValuesRef: committedValuesRef , groupId: groupId , panels: panels , setSizes: setSizes , sizes: sizes , panelSizeBeforeCollapse: panelSizeBeforeCollapse }) {
|
|
422
|
+
(0, $jhddX$useEffect)(()=>{
|
|
418
423
|
const { direction: direction , panels: panels } = committedValuesRef.current;
|
|
419
|
-
const groupElement = (0, $
|
|
424
|
+
const groupElement = (0, $d6f7e4c3aa9e02d7$export$5e67632cf3550a9c)(groupId);
|
|
420
425
|
const { height: height , width: width } = groupElement.getBoundingClientRect();
|
|
421
|
-
const handles = (0, $
|
|
426
|
+
const handles = (0, $d6f7e4c3aa9e02d7$export$ae14931f0a0256a3)(groupId);
|
|
422
427
|
const cleanupFunctions = handles.map((handle)=>{
|
|
423
428
|
const handleId = handle.getAttribute("data-panel-resize-handle-id");
|
|
424
|
-
const panelsArray = (0, $
|
|
425
|
-
const [idBefore, idAfter] = (0, $
|
|
429
|
+
const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
|
|
430
|
+
const [idBefore, idAfter] = (0, $d6f7e4c3aa9e02d7$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
|
|
426
431
|
if (idBefore == null || idAfter == null) return ()=>{};
|
|
427
432
|
let minSize = 0;
|
|
428
433
|
let maxSize = 100;
|
|
@@ -440,7 +445,7 @@ function $99ad02c951ec80d0$export$d9fcbe062527d159({ committedValuesRef: committ
|
|
|
440
445
|
});
|
|
441
446
|
const ariaValueMax = Math.min(maxSize, 100 - totalMinSize);
|
|
442
447
|
const ariaValueMin = Math.max(minSize, (panelsArray.length - 1) * 100 - totalMaxSize);
|
|
443
|
-
const flexGrow = (0, $
|
|
448
|
+
const flexGrow = (0, $d6f7e4c3aa9e02d7$export$6f43503e166de6fb)(panels, idBefore, sizes);
|
|
444
449
|
handle.setAttribute("aria-valuemax", "" + Math.round(ariaValueMax));
|
|
445
450
|
handle.setAttribute("aria-valuemin", "" + Math.round(ariaValueMin));
|
|
446
451
|
handle.setAttribute("aria-valuenow", "" + Math.round(parseInt(flexGrow)));
|
|
@@ -454,9 +459,9 @@ function $99ad02c951ec80d0$export$d9fcbe062527d159({ committedValuesRef: committ
|
|
|
454
459
|
const size = sizes[index];
|
|
455
460
|
if (size != null) {
|
|
456
461
|
let delta = 0;
|
|
457
|
-
if (size.toPrecision((0, $
|
|
462
|
+
if (size.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879)) <= panelData.minSize.toPrecision((0, $a8e83be196252871$export$d6d3992f3becc879))) delta = direction === "horizontal" ? width : height;
|
|
458
463
|
else delta = -(direction === "horizontal" ? width : height);
|
|
459
|
-
const nextSizes = (0, $
|
|
464
|
+
const nextSizes = (0, $d6f7e4c3aa9e02d7$export$f50bae335f53943c)(event, panels, idBefore, idAfter, delta, sizes, panelSizeBeforeCollapse.current, null);
|
|
460
465
|
if (sizes !== nextSizes) setSizes(nextSizes);
|
|
461
466
|
}
|
|
462
467
|
}
|
|
@@ -465,7 +470,7 @@ function $99ad02c951ec80d0$export$d9fcbe062527d159({ committedValuesRef: committ
|
|
|
465
470
|
}
|
|
466
471
|
};
|
|
467
472
|
handle.addEventListener("keydown", onKeyDown);
|
|
468
|
-
const panelBefore = (0, $
|
|
473
|
+
const panelBefore = (0, $d6f7e4c3aa9e02d7$export$7361ed18ff57179e)(idBefore);
|
|
469
474
|
if (panelBefore != null) handle.setAttribute("aria-controls", panelBefore.id);
|
|
470
475
|
return ()=>{
|
|
471
476
|
handle.removeAttribute("aria-valuemax");
|
|
@@ -484,10 +489,10 @@ function $99ad02c951ec80d0$export$d9fcbe062527d159({ committedValuesRef: committ
|
|
|
484
489
|
sizes
|
|
485
490
|
]);
|
|
486
491
|
}
|
|
487
|
-
function $
|
|
488
|
-
(0, $
|
|
492
|
+
function $4a90471e7083b52f$export$33b0bea6ac3ffb03({ disabled: disabled , handleId: handleId , resizeHandler: resizeHandler }) {
|
|
493
|
+
(0, $jhddX$useEffect)(()=>{
|
|
489
494
|
if (disabled || resizeHandler == null) return;
|
|
490
|
-
const handleElement = (0, $
|
|
495
|
+
const handleElement = (0, $d6f7e4c3aa9e02d7$export$2e27d3a347680388)(handleId);
|
|
491
496
|
if (handleElement == null) return;
|
|
492
497
|
const onKeyDown = (event)=>{
|
|
493
498
|
switch(event.key){
|
|
@@ -501,8 +506,8 @@ function $99ad02c951ec80d0$export$33b0bea6ac3ffb03({ disabled: disabled , handle
|
|
|
501
506
|
break;
|
|
502
507
|
case "F6":
|
|
503
508
|
{
|
|
504
|
-
const handles = (0, $
|
|
505
|
-
const index = (0, $
|
|
509
|
+
const handles = (0, $d6f7e4c3aa9e02d7$export$8d0cd3c32ddc045e)();
|
|
510
|
+
const index = (0, $d6f7e4c3aa9e02d7$export$96a40be80fb6c3c8)(handleId);
|
|
506
511
|
const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
|
|
507
512
|
const nextHandle = handles[nextIndex];
|
|
508
513
|
nextHandle.focus();
|
|
@@ -522,9 +527,9 @@ function $99ad02c951ec80d0$export$33b0bea6ac3ffb03({ disabled: disabled , handle
|
|
|
522
527
|
}
|
|
523
528
|
|
|
524
529
|
|
|
525
|
-
let $
|
|
526
|
-
let $
|
|
527
|
-
function $
|
|
530
|
+
let $8d9d88bebf1a8ace$var$currentState = null;
|
|
531
|
+
let $8d9d88bebf1a8ace$var$element = null;
|
|
532
|
+
function $8d9d88bebf1a8ace$export$fa35f3322c52262f(state) {
|
|
528
533
|
switch(state){
|
|
529
534
|
case "horizontal":
|
|
530
535
|
return "col-resize";
|
|
@@ -540,26 +545,26 @@ function $60180881129f5dc3$export$fa35f3322c52262f(state) {
|
|
|
540
545
|
return "s-resize";
|
|
541
546
|
}
|
|
542
547
|
}
|
|
543
|
-
function $
|
|
544
|
-
if ($
|
|
545
|
-
document.head.removeChild($
|
|
546
|
-
$
|
|
547
|
-
$
|
|
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;
|
|
548
553
|
}
|
|
549
554
|
}
|
|
550
|
-
function $
|
|
551
|
-
if ($
|
|
552
|
-
$
|
|
553
|
-
const style = $
|
|
554
|
-
if ($
|
|
555
|
-
$
|
|
556
|
-
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);
|
|
557
562
|
}
|
|
558
|
-
$
|
|
563
|
+
$8d9d88bebf1a8ace$var$element.innerHTML = `*{cursor: ${style}!important;}`;
|
|
559
564
|
}
|
|
560
565
|
|
|
561
566
|
|
|
562
|
-
function $
|
|
567
|
+
function $f7d932e9304c1581$export$2e2bcd8739ae039(callback, durationMs = 10) {
|
|
563
568
|
let timeoutId = null;
|
|
564
569
|
let callable = (...args)=>{
|
|
565
570
|
clearTimeout(timeoutId);
|
|
@@ -571,7 +576,7 @@ function $480430d8582e6616$export$2e2bcd8739ae039(callback, durationMs = 10) {
|
|
|
571
576
|
}
|
|
572
577
|
|
|
573
578
|
|
|
574
|
-
function $
|
|
579
|
+
function $c892f0f705e6ded5$export$b141efd0b0fb9174(arrayA, arrayB) {
|
|
575
580
|
if (arrayA.length !== arrayB.length) return false;
|
|
576
581
|
for(let index = 0; index < arrayA.length; index++){
|
|
577
582
|
if (arrayA[index] !== arrayB[index]) return false;
|
|
@@ -581,46 +586,46 @@ function $f5f5dfb280167863$export$b141efd0b0fb9174(arrayA, arrayB) {
|
|
|
581
586
|
|
|
582
587
|
|
|
583
588
|
// Limit the frequency of localStorage updates.
|
|
584
|
-
const $
|
|
585
|
-
function $
|
|
589
|
+
const $3daa5d4c086ea816$var$savePanelGroupLayoutDebounced = (0, $f7d932e9304c1581$export$2e2bcd8739ae039)((0, $6889c3a3ed41cfd1$export$af183b313c61be4f), 100);
|
|
590
|
+
function $3daa5d4c086ea816$var$throwServerError() {
|
|
586
591
|
throw new Error('PanelGroup "storage" prop required for server rendering.');
|
|
587
592
|
}
|
|
588
|
-
const $
|
|
589
|
-
getItem: typeof localStorage !== "undefined" ? (name)=>localStorage.getItem(name) : $
|
|
590
|
-
setItem: typeof localStorage !== "undefined" ? (name, value)=>localStorage.setItem(name, value) : $
|
|
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
|
|
591
596
|
};
|
|
592
|
-
function $
|
|
593
|
-
const groupId = (0, $
|
|
594
|
-
const [activeHandleId, setActiveHandleId] = (0, $
|
|
595
|
-
const [panels, setPanels] = (0, $
|
|
597
|
+
function $3daa5d4c086ea816$export$1d05749f6f573bb({ autoSaveId: autoSaveId , children: children = null , className: classNameFromProps = "" , direction: direction , disablePointerEventsDuringResize: disablePointerEventsDuringResize = false , 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());
|
|
596
601
|
// When resizing is done via mouse/touch event–
|
|
597
602
|
// We store the initial Panel sizes in this ref, and apply move deltas to them instead of to the current sizes.
|
|
598
603
|
// This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
|
|
599
|
-
const initialDragStateRef = (0, $
|
|
604
|
+
const initialDragStateRef = (0, $jhddX$useRef)(null);
|
|
600
605
|
// Use a ref to guard against users passing inline props
|
|
601
|
-
const callbacksRef = (0, $
|
|
606
|
+
const callbacksRef = (0, $jhddX$useRef)({
|
|
602
607
|
onLayout: onLayout
|
|
603
608
|
});
|
|
604
|
-
(0, $
|
|
609
|
+
(0, $jhddX$useEffect)(()=>{
|
|
605
610
|
callbacksRef.current.onLayout = onLayout;
|
|
606
611
|
});
|
|
607
612
|
// 0-1 values representing the relative size of each panel.
|
|
608
|
-
const [sizes, setSizes] = (0, $
|
|
613
|
+
const [sizes, setSizes] = (0, $jhddX$useState)([]);
|
|
609
614
|
// Used to support imperative collapse/expand API.
|
|
610
|
-
const panelSizeBeforeCollapse = (0, $
|
|
611
|
-
const prevDeltaRef = (0, $
|
|
615
|
+
const panelSizeBeforeCollapse = (0, $jhddX$useRef)(new Map());
|
|
616
|
+
const prevDeltaRef = (0, $jhddX$useRef)(0);
|
|
612
617
|
// Store committed values to avoid unnecessarily re-running memoization/effects functions.
|
|
613
|
-
const committedValuesRef = (0, $
|
|
618
|
+
const committedValuesRef = (0, $jhddX$useRef)({
|
|
614
619
|
direction: direction,
|
|
615
620
|
panels: panels,
|
|
616
621
|
sizes: sizes
|
|
617
622
|
});
|
|
618
|
-
(0, $
|
|
623
|
+
(0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
|
|
619
624
|
committedValuesRef.current.direction = direction;
|
|
620
625
|
committedValuesRef.current.panels = panels;
|
|
621
626
|
committedValuesRef.current.sizes = sizes;
|
|
622
627
|
});
|
|
623
|
-
(0, $
|
|
628
|
+
(0, $4a90471e7083b52f$export$d9fcbe062527d159)({
|
|
624
629
|
committedValuesRef: committedValuesRef,
|
|
625
630
|
groupId: groupId,
|
|
626
631
|
panels: panels,
|
|
@@ -629,7 +634,7 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
629
634
|
panelSizeBeforeCollapse: panelSizeBeforeCollapse
|
|
630
635
|
});
|
|
631
636
|
// Notify external code when sizes have changed.
|
|
632
|
-
(0, $
|
|
637
|
+
(0, $jhddX$useEffect)(()=>{
|
|
633
638
|
const { onLayout: onLayout } = callbacksRef.current;
|
|
634
639
|
if (onLayout) {
|
|
635
640
|
const { sizes: sizes } = committedValuesRef.current;
|
|
@@ -641,14 +646,14 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
641
646
|
]);
|
|
642
647
|
// Notify Panel listeners about their initial sizes and collapsed state after mount.
|
|
643
648
|
// Subsequent changes will be called by the resizeHandler.
|
|
644
|
-
const didNotifyCallbacksAfterMountRef = (0, $
|
|
645
|
-
(0, $
|
|
649
|
+
const didNotifyCallbacksAfterMountRef = (0, $jhddX$useRef)(false);
|
|
650
|
+
(0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
|
|
646
651
|
if (didNotifyCallbacksAfterMountRef.current) return;
|
|
647
652
|
const { panels: panels , sizes: sizes } = committedValuesRef.current;
|
|
648
653
|
if (sizes.length > 0) {
|
|
649
654
|
didNotifyCallbacksAfterMountRef.current = true;
|
|
650
|
-
const panelsArray = (0, $
|
|
651
|
-
(0, $
|
|
655
|
+
const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
|
|
656
|
+
(0, $d6f7e4c3aa9e02d7$export$b8e48269e4faa934)(panelsArray, [], sizes);
|
|
652
657
|
}
|
|
653
658
|
}, [
|
|
654
659
|
sizes
|
|
@@ -656,7 +661,7 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
656
661
|
// Once all panels have registered themselves,
|
|
657
662
|
// Compute the initial sizes based on default weights.
|
|
658
663
|
// This assumes that panels register during initial mount (no conditional rendering)!
|
|
659
|
-
(0, $
|
|
664
|
+
(0, $3f95d3e171760903$export$2e2bcd8739ae039)(()=>{
|
|
660
665
|
const sizes = committedValuesRef.current.sizes;
|
|
661
666
|
if (sizes.length === panels.size) // Only compute (or restore) default sizes once per panel configuration.
|
|
662
667
|
return;
|
|
@@ -664,12 +669,12 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
664
669
|
// default size should be restored from local storage if possible.
|
|
665
670
|
let defaultSizes = undefined;
|
|
666
671
|
if (autoSaveId) {
|
|
667
|
-
const panelsArray = (0, $
|
|
668
|
-
defaultSizes = (0, $
|
|
672
|
+
const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
|
|
673
|
+
defaultSizes = (0, $6889c3a3ed41cfd1$export$9c80c6617f0386da)(autoSaveId, panelsArray, storage);
|
|
669
674
|
}
|
|
670
675
|
if (defaultSizes != null) setSizes(defaultSizes);
|
|
671
676
|
else {
|
|
672
|
-
const panelsArray1 = (0, $
|
|
677
|
+
const panelsArray1 = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
|
|
673
678
|
let panelsWithNullDefaultSize = 0;
|
|
674
679
|
let totalDefaultSize = 0;
|
|
675
680
|
let totalMinSize = 0;
|
|
@@ -693,19 +698,19 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
693
698
|
autoSaveId,
|
|
694
699
|
panels
|
|
695
700
|
]);
|
|
696
|
-
(0, $
|
|
701
|
+
(0, $jhddX$useEffect)(()=>{
|
|
697
702
|
// If this panel has been configured to persist sizing information, save sizes to local storage.
|
|
698
703
|
if (autoSaveId) {
|
|
699
704
|
if (sizes.length === 0 || sizes.length !== panels.size) return;
|
|
700
|
-
const panelsArray = (0, $
|
|
701
|
-
$
|
|
705
|
+
const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
|
|
706
|
+
$3daa5d4c086ea816$var$savePanelGroupLayoutDebounced(autoSaveId, panelsArray, sizes, storage);
|
|
702
707
|
}
|
|
703
708
|
}, [
|
|
704
709
|
autoSaveId,
|
|
705
710
|
panels,
|
|
706
711
|
sizes
|
|
707
712
|
]);
|
|
708
|
-
const getPanelStyle = (0, $
|
|
713
|
+
const getPanelStyle = (0, $jhddX$useCallback)((id)=>{
|
|
709
714
|
const { panels: panels } = committedValuesRef.current;
|
|
710
715
|
// Before mounting, Panels will not yet have registered themselves.
|
|
711
716
|
// This includes server rendering.
|
|
@@ -717,7 +722,7 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
717
722
|
// Without this, Panel sizes may be unintentionally overridden by their content.
|
|
718
723
|
overflow: "hidden"
|
|
719
724
|
};
|
|
720
|
-
const flexGrow = (0, $
|
|
725
|
+
const flexGrow = (0, $d6f7e4c3aa9e02d7$export$6f43503e166de6fb)(panels, id, sizes);
|
|
721
726
|
return {
|
|
722
727
|
flexBasis: 0,
|
|
723
728
|
flexGrow: flexGrow,
|
|
@@ -726,14 +731,14 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
726
731
|
overflow: "hidden",
|
|
727
732
|
// Disable pointer events inside of a panel during resize.
|
|
728
733
|
// This avoid edge cases like nested iframes.
|
|
729
|
-
pointerEvents: activeHandleId !== null ? "none" : undefined
|
|
734
|
+
pointerEvents: disablePointerEventsDuringResize && activeHandleId !== null ? "none" : undefined
|
|
730
735
|
};
|
|
731
736
|
}, [
|
|
732
737
|
activeHandleId,
|
|
733
738
|
direction,
|
|
734
739
|
sizes
|
|
735
740
|
]);
|
|
736
|
-
const registerPanel = (0, $
|
|
741
|
+
const registerPanel = (0, $jhddX$useCallback)((id, panel)=>{
|
|
737
742
|
setPanels((prevPanels)=>{
|
|
738
743
|
if (prevPanels.has(id)) return prevPanels;
|
|
739
744
|
const nextPanels = new Map(prevPanels);
|
|
@@ -741,24 +746,24 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
741
746
|
return nextPanels;
|
|
742
747
|
});
|
|
743
748
|
}, []);
|
|
744
|
-
const registerResizeHandle = (0, $
|
|
749
|
+
const registerResizeHandle = (0, $jhddX$useCallback)((handleId)=>{
|
|
745
750
|
const resizeHandler = (event)=>{
|
|
746
751
|
event.preventDefault();
|
|
747
752
|
const { direction: direction , panels: panels , sizes: prevSizes } = committedValuesRef.current;
|
|
748
|
-
const panelsArray = (0, $
|
|
749
|
-
const [idBefore, idAfter] = (0, $
|
|
753
|
+
const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
|
|
754
|
+
const [idBefore, idAfter] = (0, $d6f7e4c3aa9e02d7$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
|
|
750
755
|
if (idBefore == null || idAfter == null) return;
|
|
751
|
-
const movement = (0, $
|
|
756
|
+
const movement = (0, $8f51c2d77bf1da88$export$354b17c0684607ed)(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current);
|
|
752
757
|
if (movement === 0) return;
|
|
753
|
-
const groupElement = (0, $
|
|
758
|
+
const groupElement = (0, $d6f7e4c3aa9e02d7$export$5e67632cf3550a9c)(groupId);
|
|
754
759
|
const rect = groupElement.getBoundingClientRect();
|
|
755
760
|
const isHorizontal = direction === "horizontal";
|
|
756
761
|
const size = isHorizontal ? rect.width : rect.height;
|
|
757
762
|
const delta = movement / size * 100;
|
|
758
|
-
const nextSizes = (0, $
|
|
759
|
-
const sizesChanged = !(0, $
|
|
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);
|
|
760
765
|
// Don't update cursor for resizes triggered by keyboard interactions.
|
|
761
|
-
if ((0, $
|
|
766
|
+
if ((0, $8f51c2d77bf1da88$export$764db16956f554f8)(event) || (0, $8f51c2d77bf1da88$export$c4dfce035d43d1e0)(event)) // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
|
|
762
767
|
// In this case, Panel sizes might not change–
|
|
763
768
|
// but updating cursor in this scenario would cause a flicker.
|
|
764
769
|
{
|
|
@@ -767,15 +772,15 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
767
772
|
// If the pointer has moved too far to resize the panel any further,
|
|
768
773
|
// update the cursor style for a visual clue.
|
|
769
774
|
// This mimics VS Code behavior.
|
|
770
|
-
if (isHorizontal) (0, $
|
|
771
|
-
else (0, $
|
|
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");
|
|
772
777
|
} else // Reset the cursor style to the the normal resize cursor.
|
|
773
|
-
(0, $
|
|
778
|
+
(0, $8d9d88bebf1a8ace$export$d395b5dfd066a659)(isHorizontal ? "horizontal" : "vertical");
|
|
774
779
|
}
|
|
775
780
|
}
|
|
776
781
|
if (sizesChanged) {
|
|
777
782
|
// If resize change handlers have been declared, this is the time to call them.
|
|
778
|
-
(0, $
|
|
783
|
+
(0, $d6f7e4c3aa9e02d7$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
|
|
779
784
|
setSizes(nextSizes);
|
|
780
785
|
}
|
|
781
786
|
prevDeltaRef.current = delta;
|
|
@@ -784,7 +789,7 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
784
789
|
}, [
|
|
785
790
|
groupId
|
|
786
791
|
]);
|
|
787
|
-
const unregisterPanel = (0, $
|
|
792
|
+
const unregisterPanel = (0, $jhddX$useCallback)((id)=>{
|
|
788
793
|
setPanels((prevPanels)=>{
|
|
789
794
|
if (!prevPanels.has(id)) return prevPanels;
|
|
790
795
|
const nextPanels = new Map(prevPanels);
|
|
@@ -792,74 +797,74 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
792
797
|
return nextPanels;
|
|
793
798
|
});
|
|
794
799
|
}, []);
|
|
795
|
-
const collapsePanel = (0, $
|
|
800
|
+
const collapsePanel = (0, $jhddX$useCallback)((id)=>{
|
|
796
801
|
const { panels: panels , sizes: prevSizes } = committedValuesRef.current;
|
|
797
802
|
const panel = panels.get(id);
|
|
798
803
|
if (panel == null || !panel.collapsible) return;
|
|
799
|
-
const panelsArray = (0, $
|
|
804
|
+
const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
|
|
800
805
|
const index = panelsArray.indexOf(panel);
|
|
801
806
|
if (index < 0) return;
|
|
802
807
|
const currentSize = prevSizes[index];
|
|
803
808
|
if (currentSize === 0) // Panel is already collapsed.
|
|
804
809
|
return;
|
|
805
810
|
panelSizeBeforeCollapse.current.set(id, currentSize);
|
|
806
|
-
const [idBefore, idAfter] = (0, $
|
|
811
|
+
const [idBefore, idAfter] = (0, $d6f7e4c3aa9e02d7$export$5a5b0c1d38c23c3b)(id, panelsArray);
|
|
807
812
|
if (idBefore == null || idAfter == null) return;
|
|
808
813
|
const isLastPanel = index === panelsArray.length - 1;
|
|
809
814
|
const delta = isLastPanel ? currentSize : 0 - currentSize;
|
|
810
|
-
const nextSizes = (0, $
|
|
815
|
+
const nextSizes = (0, $d6f7e4c3aa9e02d7$export$f50bae335f53943c)(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
|
|
811
816
|
if (prevSizes !== nextSizes) {
|
|
812
817
|
// If resize change handlers have been declared, this is the time to call them.
|
|
813
|
-
(0, $
|
|
818
|
+
(0, $d6f7e4c3aa9e02d7$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
|
|
814
819
|
setSizes(nextSizes);
|
|
815
820
|
}
|
|
816
821
|
}, []);
|
|
817
|
-
const expandPanel = (0, $
|
|
822
|
+
const expandPanel = (0, $jhddX$useCallback)((id)=>{
|
|
818
823
|
const { panels: panels , sizes: prevSizes } = committedValuesRef.current;
|
|
819
824
|
const panel = panels.get(id);
|
|
820
825
|
if (panel == null) return;
|
|
821
826
|
const sizeBeforeCollapse = panelSizeBeforeCollapse.current.get(id) || panel.minSize;
|
|
822
827
|
if (!sizeBeforeCollapse) return;
|
|
823
|
-
const panelsArray = (0, $
|
|
828
|
+
const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
|
|
824
829
|
const index = panelsArray.indexOf(panel);
|
|
825
830
|
if (index < 0) return;
|
|
826
831
|
const currentSize = prevSizes[index];
|
|
827
832
|
if (currentSize !== 0) // Panel is already expanded.
|
|
828
833
|
return;
|
|
829
|
-
const [idBefore, idAfter] = (0, $
|
|
834
|
+
const [idBefore, idAfter] = (0, $d6f7e4c3aa9e02d7$export$5a5b0c1d38c23c3b)(id, panelsArray);
|
|
830
835
|
if (idBefore == null || idAfter == null) return;
|
|
831
836
|
const isLastPanel = index === panelsArray.length - 1;
|
|
832
837
|
const delta = isLastPanel ? 0 - sizeBeforeCollapse : sizeBeforeCollapse;
|
|
833
|
-
const nextSizes = (0, $
|
|
838
|
+
const nextSizes = (0, $d6f7e4c3aa9e02d7$export$f50bae335f53943c)(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
|
|
834
839
|
if (prevSizes !== nextSizes) {
|
|
835
840
|
// If resize change handlers have been declared, this is the time to call them.
|
|
836
|
-
(0, $
|
|
841
|
+
(0, $d6f7e4c3aa9e02d7$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
|
|
837
842
|
setSizes(nextSizes);
|
|
838
843
|
}
|
|
839
844
|
}, []);
|
|
840
|
-
const resizePanel = (0, $
|
|
845
|
+
const resizePanel = (0, $jhddX$useCallback)((id, nextSize)=>{
|
|
841
846
|
const { panels: panels , sizes: prevSizes } = committedValuesRef.current;
|
|
842
847
|
const panel = panels.get(id);
|
|
843
848
|
if (panel == null) return;
|
|
844
|
-
const panelsArray = (0, $
|
|
849
|
+
const panelsArray = (0, $d6f7e4c3aa9e02d7$export$a861c0ad45885494)(panels);
|
|
845
850
|
const index = panelsArray.indexOf(panel);
|
|
846
851
|
if (index < 0) return;
|
|
847
852
|
const currentSize = prevSizes[index];
|
|
848
853
|
if (currentSize === nextSize) return;
|
|
849
854
|
if (panel.collapsible && nextSize === 0) ;
|
|
850
855
|
else nextSize = Math.min(panel.maxSize, Math.max(panel.minSize, nextSize));
|
|
851
|
-
const [idBefore, idAfter] = (0, $
|
|
856
|
+
const [idBefore, idAfter] = (0, $d6f7e4c3aa9e02d7$export$5a5b0c1d38c23c3b)(id, panelsArray);
|
|
852
857
|
if (idBefore == null || idAfter == null) return;
|
|
853
858
|
const isLastPanel = index === panelsArray.length - 1;
|
|
854
859
|
const delta = isLastPanel ? currentSize - nextSize : nextSize - currentSize;
|
|
855
|
-
const nextSizes = (0, $
|
|
860
|
+
const nextSizes = (0, $d6f7e4c3aa9e02d7$export$f50bae335f53943c)(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
|
|
856
861
|
if (prevSizes !== nextSizes) {
|
|
857
862
|
// If resize change handlers have been declared, this is the time to call them.
|
|
858
|
-
(0, $
|
|
863
|
+
(0, $d6f7e4c3aa9e02d7$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
|
|
859
864
|
setSizes(nextSizes);
|
|
860
865
|
}
|
|
861
866
|
}, []);
|
|
862
|
-
const context = (0, $
|
|
867
|
+
const context = (0, $jhddX$useMemo)(()=>({
|
|
863
868
|
activeHandleId: activeHandleId,
|
|
864
869
|
collapsePanel: collapsePanel,
|
|
865
870
|
direction: direction,
|
|
@@ -871,17 +876,17 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
871
876
|
resizePanel: resizePanel,
|
|
872
877
|
startDragging: (id, event)=>{
|
|
873
878
|
setActiveHandleId(id);
|
|
874
|
-
if ((0, $
|
|
875
|
-
const handleElement = (0, $
|
|
879
|
+
if ((0, $8f51c2d77bf1da88$export$764db16956f554f8)(event) || (0, $8f51c2d77bf1da88$export$c4dfce035d43d1e0)(event)) {
|
|
880
|
+
const handleElement = (0, $d6f7e4c3aa9e02d7$export$2e27d3a347680388)(id);
|
|
876
881
|
initialDragStateRef.current = {
|
|
877
882
|
dragHandleRect: handleElement.getBoundingClientRect(),
|
|
878
|
-
dragOffset: (0, $
|
|
883
|
+
dragOffset: (0, $8f51c2d77bf1da88$export$ec391ce65b083ed4)(event, id, direction),
|
|
879
884
|
sizes: committedValuesRef.current.sizes
|
|
880
885
|
};
|
|
881
886
|
}
|
|
882
887
|
},
|
|
883
888
|
stopDragging: ()=>{
|
|
884
|
-
(0, $
|
|
889
|
+
(0, $8d9d88bebf1a8ace$export$b61932ee18f96e08)();
|
|
885
890
|
setActiveHandleId(null);
|
|
886
891
|
initialDragStateRef.current = null;
|
|
887
892
|
},
|
|
@@ -905,8 +910,8 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
905
910
|
overflow: "hidden",
|
|
906
911
|
width: "100%"
|
|
907
912
|
};
|
|
908
|
-
return (0, $
|
|
909
|
-
children: (0, $
|
|
913
|
+
return (0, $jhddX$createElement)((0, $af466b485b9d515d$export$7d8c6d083caec74a).Provider, {
|
|
914
|
+
children: (0, $jhddX$createElement)(Type, {
|
|
910
915
|
children: children,
|
|
911
916
|
className: classNameFromProps,
|
|
912
917
|
"data-panel-group": "",
|
|
@@ -923,7 +928,7 @@ function $eb1c4d3cf38334c2$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
923
928
|
// Workaround for Parcel scope hoisting (which renames objects/functions).
|
|
924
929
|
// Casting to :any is required to avoid corrupting the generated TypeScript types.
|
|
925
930
|
// See github.com/parcel-bundler/parcel/issues/8724
|
|
926
|
-
$
|
|
931
|
+
$3daa5d4c086ea816$export$1d05749f6f573bb.displayName = "PanelGroup";
|
|
927
932
|
|
|
928
933
|
|
|
929
934
|
|
|
@@ -931,16 +936,16 @@ $eb1c4d3cf38334c2$export$1d05749f6f573bb.displayName = "PanelGroup";
|
|
|
931
936
|
|
|
932
937
|
|
|
933
938
|
|
|
934
|
-
function $
|
|
935
|
-
const divElementRef = (0, $
|
|
936
|
-
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));
|
|
937
942
|
if (panelGroupContext === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
|
|
938
943
|
const { activeHandleId: activeHandleId , direction: direction , groupId: groupId , registerResizeHandle: registerResizeHandle , startDragging: startDragging , stopDragging: stopDragging } = panelGroupContext;
|
|
939
|
-
const resizeHandleId = (0, $
|
|
944
|
+
const resizeHandleId = (0, $e504a2438473eda9$export$2e2bcd8739ae039)(idFromProps);
|
|
940
945
|
const isDragging = activeHandleId === resizeHandleId;
|
|
941
|
-
const [isFocused, setIsFocused] = (0, $
|
|
942
|
-
const [resizeHandler, setResizeHandler] = (0, $
|
|
943
|
-
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)(()=>{
|
|
944
949
|
// Clicking on the drag handle shouldn't leave it focused;
|
|
945
950
|
// That would cause the PanelGroup to think it was still active.
|
|
946
951
|
const div = divElementRef.current;
|
|
@@ -949,7 +954,7 @@ function $91e657179112cfb0$export$8829ecf6b6b15484({ children: children = null ,
|
|
|
949
954
|
}, [
|
|
950
955
|
stopDragging
|
|
951
956
|
]);
|
|
952
|
-
(0, $
|
|
957
|
+
(0, $jhddX$useEffect)(()=>{
|
|
953
958
|
if (disabled) setResizeHandler(null);
|
|
954
959
|
else {
|
|
955
960
|
const resizeHandler = registerResizeHandle(resizeHandleId);
|
|
@@ -960,7 +965,7 @@ function $91e657179112cfb0$export$8829ecf6b6b15484({ children: children = null ,
|
|
|
960
965
|
resizeHandleId,
|
|
961
966
|
registerResizeHandle
|
|
962
967
|
]);
|
|
963
|
-
(0, $
|
|
968
|
+
(0, $jhddX$useEffect)(()=>{
|
|
964
969
|
if (disabled || resizeHandler == null || !isDragging) return;
|
|
965
970
|
const onMove = (event)=>{
|
|
966
971
|
resizeHandler(event);
|
|
@@ -984,17 +989,17 @@ function $91e657179112cfb0$export$8829ecf6b6b15484({ children: children = null ,
|
|
|
984
989
|
resizeHandler,
|
|
985
990
|
stopDraggingAndBlur
|
|
986
991
|
]);
|
|
987
|
-
(0, $
|
|
992
|
+
(0, $4a90471e7083b52f$export$33b0bea6ac3ffb03)({
|
|
988
993
|
disabled: disabled,
|
|
989
994
|
handleId: resizeHandleId,
|
|
990
995
|
resizeHandler: resizeHandler
|
|
991
996
|
});
|
|
992
997
|
const style = {
|
|
993
|
-
cursor: (0, $
|
|
998
|
+
cursor: (0, $8d9d88bebf1a8ace$export$fa35f3322c52262f)(direction),
|
|
994
999
|
touchAction: "none",
|
|
995
1000
|
userSelect: "none"
|
|
996
1001
|
};
|
|
997
|
-
return (0, $
|
|
1002
|
+
return (0, $jhddX$createElement)(Type, {
|
|
998
1003
|
children: children,
|
|
999
1004
|
className: classNameFromProps,
|
|
1000
1005
|
"data-resize-handle-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,
|
|
@@ -1021,10 +1026,10 @@ function $91e657179112cfb0$export$8829ecf6b6b15484({ children: children = null ,
|
|
|
1021
1026
|
// Workaround for Parcel scope hoisting (which renames objects/functions).
|
|
1022
1027
|
// Casting to :any is required to avoid corrupting the generated TypeScript types.
|
|
1023
1028
|
// See github.com/parcel-bundler/parcel/issues/8724
|
|
1024
|
-
$
|
|
1029
|
+
$971f2c37f9d2b98e$export$8829ecf6b6b15484.displayName = "PanelResizeHandle";
|
|
1025
1030
|
|
|
1026
1031
|
|
|
1027
1032
|
|
|
1028
1033
|
|
|
1029
|
-
export {$
|
|
1034
|
+
export {$c33df6d7c39fd3ee$export$2ddb90ad54e5f587 as Panel, $3daa5d4c086ea816$export$1d05749f6f573bb as PanelGroup, $971f2c37f9d2b98e$export$8829ecf6b6b15484 as PanelResizeHandle};
|
|
1030
1035
|
//# sourceMappingURL=react-resizable-panels.module.js.map
|