react-resizable-panels 0.0.34 → 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 +2 -0
- package/dist/react-resizable-panels.js +199 -194
- package/dist/react-resizable-panels.js.map +1 -1
- package/dist/react-resizable-panels.module.js +197 -192
- package/dist/react-resizable-panels.module.js.map +1 -1
- package/package.json +5 -2
- package/src/utils/group.ts +3 -3
- package/src/utils/serialization.ts +1 -1
|
@@ -1,48 +1,48 @@
|
|
|
1
|
-
var $
|
|
1
|
+
var $2IMI0$react = require("react");
|
|
2
2
|
|
|
3
3
|
function $parcel$export(e, n, v, s) {
|
|
4
4
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
5
5
|
}
|
|
6
6
|
|
|
7
|
-
$parcel$export(module.exports, "Panel", () => $
|
|
8
|
-
$parcel$export(module.exports, "PanelGroup", () => $
|
|
9
|
-
$parcel$export(module.exports, "PanelResizeHandle", () => $
|
|
7
|
+
$parcel$export(module.exports, "Panel", () => $45da0e827c614f1d$export$2ddb90ad54e5f587);
|
|
8
|
+
$parcel$export(module.exports, "PanelGroup", () => $cec4cafe75f3db78$export$1d05749f6f573bb);
|
|
9
|
+
$parcel$export(module.exports, "PanelResizeHandle", () => $3a26a712c9163348$export$8829ecf6b6b15484);
|
|
10
10
|
|
|
11
11
|
|
|
12
|
-
const $
|
|
13
|
-
const $
|
|
14
|
-
var $
|
|
12
|
+
const $129b5b9a317dcc10$var$canUseEffectHooks = !!(typeof window !== "undefined" && typeof window.document !== "undefined" && typeof window.document.createElement !== "undefined");
|
|
13
|
+
const $129b5b9a317dcc10$var$useIsomorphicLayoutEffect = $129b5b9a317dcc10$var$canUseEffectHooks ? (0, $2IMI0$react.useLayoutEffect) : ()=>{};
|
|
14
|
+
var $129b5b9a317dcc10$export$2e2bcd8739ae039 = $129b5b9a317dcc10$var$useIsomorphicLayoutEffect;
|
|
15
15
|
|
|
16
16
|
|
|
17
17
|
|
|
18
|
-
let $
|
|
19
|
-
function $
|
|
20
|
-
const idFromUseId = typeof (0, $
|
|
21
|
-
const idRef = (0, $
|
|
22
|
-
if (idRef.current === null) idRef.current = "" + $
|
|
18
|
+
let $b1693d8d8f570e9c$var$counter = 0;
|
|
19
|
+
function $b1693d8d8f570e9c$export$2e2bcd8739ae039(idFromParams = null) {
|
|
20
|
+
const idFromUseId = typeof (0, $2IMI0$react.useId) === "function" ? (0, $2IMI0$react.useId)() : null;
|
|
21
|
+
const idRef = (0, $2IMI0$react.useRef)(idFromParams || idFromUseId || null);
|
|
22
|
+
if (idRef.current === null) idRef.current = "" + $b1693d8d8f570e9c$var$counter++;
|
|
23
23
|
return idRef.current;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
26
|
|
|
27
27
|
|
|
28
|
-
const $
|
|
28
|
+
const $b9cf028330e7f243$export$7d8c6d083caec74a = (0, $2IMI0$react.createContext)(null);
|
|
29
29
|
// Workaround for Parcel scope hoisting (which renames objects/functions).
|
|
30
30
|
// Casting to :any is required to avoid corrupting the generated TypeScript types.
|
|
31
31
|
// See github.com/parcel-bundler/parcel/issues/8724
|
|
32
|
-
$
|
|
32
|
+
$b9cf028330e7f243$export$7d8c6d083caec74a.displayName = "PanelGroupContext";
|
|
33
33
|
|
|
34
34
|
|
|
35
|
-
function $
|
|
36
|
-
const context = (0, $
|
|
35
|
+
function $45da0e827c614f1d$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" }) {
|
|
36
|
+
const context = (0, $2IMI0$react.useContext)((0, $b9cf028330e7f243$export$7d8c6d083caec74a));
|
|
37
37
|
if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
|
|
38
|
-
const panelId = (0, $
|
|
38
|
+
const panelId = (0, $b1693d8d8f570e9c$export$2e2bcd8739ae039)(idFromProps);
|
|
39
39
|
const { collapsePanel: collapsePanel , expandPanel: expandPanel , getPanelStyle: getPanelStyle , registerPanel: registerPanel , resizePanel: resizePanel , unregisterPanel: unregisterPanel } = context;
|
|
40
40
|
// Use a ref to guard against users passing inline props
|
|
41
|
-
const callbacksRef = (0, $
|
|
41
|
+
const callbacksRef = (0, $2IMI0$react.useRef)({
|
|
42
42
|
onCollapse: onCollapse,
|
|
43
43
|
onResize: onResize
|
|
44
44
|
});
|
|
45
|
-
(0, $
|
|
45
|
+
(0, $2IMI0$react.useEffect)(()=>{
|
|
46
46
|
callbacksRef.current.onCollapse = onCollapse;
|
|
47
47
|
callbacksRef.current.onResize = onResize;
|
|
48
48
|
});
|
|
@@ -56,7 +56,7 @@ function $4b51bd7b90b9da8b$var$PanelWithForwardedRef({ children: children = null
|
|
|
56
56
|
defaultSize = minSize;
|
|
57
57
|
}
|
|
58
58
|
}
|
|
59
|
-
(0, $
|
|
59
|
+
(0, $129b5b9a317dcc10$export$2e2bcd8739ae039)(()=>{
|
|
60
60
|
const panel = {
|
|
61
61
|
callbacksRef: callbacksRef,
|
|
62
62
|
collapsible: collapsible,
|
|
@@ -81,13 +81,13 @@ function $4b51bd7b90b9da8b$var$PanelWithForwardedRef({ children: children = null
|
|
|
81
81
|
unregisterPanel
|
|
82
82
|
]);
|
|
83
83
|
const style = getPanelStyle(panelId);
|
|
84
|
-
const committedValuesRef = (0, $
|
|
85
|
-
size: $
|
|
84
|
+
const committedValuesRef = (0, $2IMI0$react.useRef)({
|
|
85
|
+
size: $45da0e827c614f1d$var$parseSizeFromStyle(style)
|
|
86
86
|
});
|
|
87
|
-
(0, $
|
|
88
|
-
committedValuesRef.current.size = $
|
|
87
|
+
(0, $129b5b9a317dcc10$export$2e2bcd8739ae039)(()=>{
|
|
88
|
+
committedValuesRef.current.size = $45da0e827c614f1d$var$parseSizeFromStyle(style);
|
|
89
89
|
});
|
|
90
|
-
(0, $
|
|
90
|
+
(0, $2IMI0$react.useImperativeHandle)(forwardedRef, ()=>({
|
|
91
91
|
collapse: ()=>collapsePanel(panelId),
|
|
92
92
|
expand: ()=>expandPanel(panelId),
|
|
93
93
|
getCollapsed () {
|
|
@@ -103,7 +103,7 @@ function $4b51bd7b90b9da8b$var$PanelWithForwardedRef({ children: children = null
|
|
|
103
103
|
panelId,
|
|
104
104
|
resizePanel
|
|
105
105
|
]);
|
|
106
|
-
return (0, $
|
|
106
|
+
return (0, $2IMI0$react.createElement)(Type, {
|
|
107
107
|
children: children,
|
|
108
108
|
className: classNameFromProps,
|
|
109
109
|
"data-panel": "",
|
|
@@ -117,17 +117,17 @@ function $4b51bd7b90b9da8b$var$PanelWithForwardedRef({ children: children = null
|
|
|
117
117
|
}
|
|
118
118
|
});
|
|
119
119
|
}
|
|
120
|
-
const $
|
|
120
|
+
const $45da0e827c614f1d$export$2ddb90ad54e5f587 = (0, $2IMI0$react.forwardRef)((props, ref)=>(0, $2IMI0$react.createElement)($45da0e827c614f1d$var$PanelWithForwardedRef, {
|
|
121
121
|
...props,
|
|
122
122
|
forwardedRef: ref
|
|
123
123
|
}));
|
|
124
124
|
// Workaround for Parcel scope hoisting (which renames objects/functions).
|
|
125
125
|
// Casting to :any is required to avoid corrupting the generated TypeScript types.
|
|
126
126
|
// See github.com/parcel-bundler/parcel/issues/8724
|
|
127
|
-
$
|
|
128
|
-
$
|
|
127
|
+
$45da0e827c614f1d$var$PanelWithForwardedRef.displayName = "Panel";
|
|
128
|
+
$45da0e827c614f1d$export$2ddb90ad54e5f587.displayName = "forwardRef(Panel)";
|
|
129
129
|
// HACK
|
|
130
|
-
function $
|
|
130
|
+
function $45da0e827c614f1d$var$parseSizeFromStyle(style) {
|
|
131
131
|
const { flexGrow: flexGrow } = style;
|
|
132
132
|
if (typeof flexGrow === "string") return parseFloat(flexGrow);
|
|
133
133
|
else return flexGrow;
|
|
@@ -140,13 +140,13 @@ function $4b51bd7b90b9da8b$var$parseSizeFromStyle(style) {
|
|
|
140
140
|
// so they should not be used as part of the serialization key.
|
|
141
141
|
// Using an attribute like minSize instead should work well enough.
|
|
142
142
|
// Pre-sorting by minSize allows remembering layouts even if panels are re-ordered/dragged.
|
|
143
|
-
function $
|
|
143
|
+
function $f9cb001fbb908626$var$getSerializationKey(panels) {
|
|
144
144
|
return panels.map((panel)=>{
|
|
145
145
|
const { minSize: minSize , order: order } = panel;
|
|
146
146
|
return order ? `${order}:${minSize}` : `${minSize}`;
|
|
147
147
|
}).sort((a, b)=>a.localeCompare(b)).join(",");
|
|
148
148
|
}
|
|
149
|
-
function $
|
|
149
|
+
function $f9cb001fbb908626$var$loadSerializedPanelGroupState(autoSaveId, storage) {
|
|
150
150
|
try {
|
|
151
151
|
const serialized = storage.getItem(`PanelGroup:sizes:${autoSaveId}`);
|
|
152
152
|
if (serialized) {
|
|
@@ -156,17 +156,18 @@ function $e045b0dd313f33c7$var$loadSerializedPanelGroupState(autoSaveId, storage
|
|
|
156
156
|
} catch (error) {}
|
|
157
157
|
return null;
|
|
158
158
|
}
|
|
159
|
-
function $
|
|
160
|
-
const state = $
|
|
159
|
+
function $f9cb001fbb908626$export$9c80c6617f0386da(autoSaveId, panels, storage) {
|
|
160
|
+
const state = $f9cb001fbb908626$var$loadSerializedPanelGroupState(autoSaveId, storage);
|
|
161
161
|
if (state) {
|
|
162
|
-
const key = $
|
|
163
|
-
|
|
162
|
+
const key = $f9cb001fbb908626$var$getSerializationKey(panels);
|
|
163
|
+
var _state_key;
|
|
164
|
+
return (_state_key = state[key]) !== null && _state_key !== void 0 ? _state_key : null;
|
|
164
165
|
}
|
|
165
166
|
return null;
|
|
166
167
|
}
|
|
167
|
-
function $
|
|
168
|
-
const key = $
|
|
169
|
-
const state = $
|
|
168
|
+
function $f9cb001fbb908626$export$af183b313c61be4f(autoSaveId, panels, sizes, storage) {
|
|
169
|
+
const key = $f9cb001fbb908626$var$getSerializationKey(panels);
|
|
170
|
+
const state = $f9cb001fbb908626$var$loadSerializedPanelGroupState(autoSaveId, storage) || {};
|
|
170
171
|
state[key] = sizes;
|
|
171
172
|
try {
|
|
172
173
|
storage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(state));
|
|
@@ -176,17 +177,17 @@ function $e045b0dd313f33c7$export$af183b313c61be4f(autoSaveId, panels, sizes, st
|
|
|
176
177
|
}
|
|
177
178
|
|
|
178
179
|
|
|
179
|
-
const $
|
|
180
|
+
const $9abd79656a89cd3a$export$d6d3992f3becc879 = 10;
|
|
180
181
|
|
|
181
182
|
|
|
182
183
|
|
|
183
|
-
function $
|
|
184
|
+
function $cda3cc4b1114cf23$export$f50bae335f53943c(event, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse, initialDragState) {
|
|
184
185
|
const { sizes: initialSizes } = initialDragState || {};
|
|
185
186
|
// If we're resizing by mouse or touch, use the initial sizes as a base.
|
|
186
187
|
// This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
|
|
187
188
|
const baseSizes = initialSizes || prevSizes;
|
|
188
189
|
if (delta === 0) return baseSizes;
|
|
189
|
-
const panelsArray = $
|
|
190
|
+
const panelsArray = $cda3cc4b1114cf23$export$a861c0ad45885494(panels);
|
|
190
191
|
const nextSizes = baseSizes.concat();
|
|
191
192
|
let deltaApplied = 0;
|
|
192
193
|
// A resizing panel affects the panels before or after it.
|
|
@@ -202,7 +203,7 @@ function $d520236daad9c5d5$export$f50bae335f53943c(event, panels, idBefore, idAf
|
|
|
202
203
|
const index = panelsArray.findIndex((panel)=>panel.id === pivotId);
|
|
203
204
|
const panel = panelsArray[index];
|
|
204
205
|
const baseSize = baseSizes[index];
|
|
205
|
-
const nextSize = $
|
|
206
|
+
const nextSize = $cda3cc4b1114cf23$var$safeResizePanel(panel, Math.abs(delta), baseSize, event);
|
|
206
207
|
if (baseSize === nextSize) // If there's no room for the pivot panel to grow, we can ignore this drag update.
|
|
207
208
|
return baseSizes;
|
|
208
209
|
else {
|
|
@@ -216,12 +217,12 @@ function $d520236daad9c5d5$export$f50bae335f53943c(event, panels, idBefore, idAf
|
|
|
216
217
|
const panel1 = panelsArray[index1];
|
|
217
218
|
const baseSize1 = baseSizes[index1];
|
|
218
219
|
const deltaRemaining = Math.abs(delta) - Math.abs(deltaApplied);
|
|
219
|
-
const nextSize1 = $
|
|
220
|
+
const nextSize1 = $cda3cc4b1114cf23$var$safeResizePanel(panel1, 0 - deltaRemaining, baseSize1, event);
|
|
220
221
|
if (baseSize1 !== nextSize1) {
|
|
221
222
|
if (nextSize1 === 0 && baseSize1 > 0) panelSizeBeforeCollapse.set(panel1.id, baseSize1);
|
|
222
223
|
deltaApplied += baseSize1 - nextSize1;
|
|
223
224
|
nextSizes[index1] = nextSize1;
|
|
224
|
-
if (deltaApplied.toPrecision((0, $
|
|
225
|
+
if (deltaApplied.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879)).localeCompare(Math.abs(delta).toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879)), undefined, {
|
|
225
226
|
numeric: true
|
|
226
227
|
}) >= 0) break;
|
|
227
228
|
}
|
|
@@ -240,7 +241,7 @@ function $d520236daad9c5d5$export$f50bae335f53943c(event, panels, idBefore, idAf
|
|
|
240
241
|
nextSizes[index1] = baseSizes[index1] + deltaApplied;
|
|
241
242
|
return nextSizes;
|
|
242
243
|
}
|
|
243
|
-
function $
|
|
244
|
+
function $cda3cc4b1114cf23$export$b8e48269e4faa934(panelsArray, prevSizes, nextSizes) {
|
|
244
245
|
nextSizes.forEach((nextSize, index)=>{
|
|
245
246
|
const prevSize = prevSizes[index];
|
|
246
247
|
if (prevSize !== nextSize) {
|
|
@@ -256,7 +257,7 @@ function $d520236daad9c5d5$export$b8e48269e4faa934(panelsArray, prevSizes, nextS
|
|
|
256
257
|
}
|
|
257
258
|
});
|
|
258
259
|
}
|
|
259
|
-
function $
|
|
260
|
+
function $cda3cc4b1114cf23$export$5a5b0c1d38c23c3b(id, panelsArray) {
|
|
260
261
|
if (panelsArray.length < 2) return [
|
|
261
262
|
null,
|
|
262
263
|
null
|
|
@@ -274,61 +275,65 @@ function $d520236daad9c5d5$export$5a5b0c1d38c23c3b(id, panelsArray) {
|
|
|
274
275
|
idAfter
|
|
275
276
|
];
|
|
276
277
|
}
|
|
277
|
-
function $
|
|
278
|
+
function $cda3cc4b1114cf23$export$6f43503e166de6fb(panels, id, sizes) {
|
|
278
279
|
if (panels.size === 1) return "100";
|
|
279
|
-
const panelsArray = $
|
|
280
|
+
const panelsArray = $cda3cc4b1114cf23$export$a861c0ad45885494(panels);
|
|
280
281
|
const index = panelsArray.findIndex((panel)=>panel.id === id);
|
|
281
282
|
const size = sizes[index];
|
|
282
283
|
if (size == null) return "0";
|
|
283
|
-
return size.toPrecision((0, $
|
|
284
|
+
return size.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879));
|
|
284
285
|
}
|
|
285
|
-
function $
|
|
286
|
+
function $cda3cc4b1114cf23$export$7361ed18ff57179e(id) {
|
|
286
287
|
const element = document.querySelector(`[data-panel-id="${id}"]`);
|
|
287
288
|
if (element) return element;
|
|
288
289
|
return null;
|
|
289
290
|
}
|
|
290
|
-
function $
|
|
291
|
+
function $cda3cc4b1114cf23$export$5e67632cf3550a9c(id) {
|
|
291
292
|
const element = document.querySelector(`[data-panel-group-id="${id}"]`);
|
|
292
293
|
if (element) return element;
|
|
293
294
|
return null;
|
|
294
295
|
}
|
|
295
|
-
function $
|
|
296
|
+
function $cda3cc4b1114cf23$export$2e27d3a347680388(id) {
|
|
296
297
|
const element = document.querySelector(`[data-panel-resize-handle-id="${id}"]`);
|
|
297
298
|
if (element) return element;
|
|
298
299
|
return null;
|
|
299
300
|
}
|
|
300
|
-
function $
|
|
301
|
-
const handles = $
|
|
301
|
+
function $cda3cc4b1114cf23$export$96a40be80fb6c3c8(id) {
|
|
302
|
+
const handles = $cda3cc4b1114cf23$export$8d0cd3c32ddc045e();
|
|
302
303
|
const index = handles.findIndex((handle)=>handle.getAttribute("data-panel-resize-handle-id") === id);
|
|
303
|
-
return index
|
|
304
|
+
return index !== null && index !== void 0 ? index : null;
|
|
304
305
|
}
|
|
305
|
-
function $
|
|
306
|
+
function $cda3cc4b1114cf23$export$8d0cd3c32ddc045e() {
|
|
306
307
|
return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id]`));
|
|
307
308
|
}
|
|
308
|
-
function $
|
|
309
|
+
function $cda3cc4b1114cf23$export$ae14931f0a0256a3(groupId) {
|
|
309
310
|
return Array.from(document.querySelectorAll(`[data-panel-resize-handle-id][data-panel-group-id="${groupId}"]`));
|
|
310
311
|
}
|
|
311
|
-
function $
|
|
312
|
-
|
|
313
|
-
const
|
|
312
|
+
function $cda3cc4b1114cf23$export$68d3a33c21dfbe27(groupId, handleId, panelsArray) {
|
|
313
|
+
var _panelsArray_index, _panelsArray_;
|
|
314
|
+
const handle = $cda3cc4b1114cf23$export$2e27d3a347680388(handleId);
|
|
315
|
+
const handles = $cda3cc4b1114cf23$export$ae14931f0a0256a3(groupId);
|
|
314
316
|
const index = handles.indexOf(handle);
|
|
315
|
-
|
|
316
|
-
const
|
|
317
|
+
var _panelsArray_index_id;
|
|
318
|
+
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;
|
|
319
|
+
var _panelsArray__id;
|
|
320
|
+
const idAfter = (_panelsArray__id = (_panelsArray_ = panelsArray[index + 1]) === null || _panelsArray_ === void 0 ? void 0 : _panelsArray_.id) !== null && _panelsArray__id !== void 0 ? _panelsArray__id : null;
|
|
317
321
|
return [
|
|
318
322
|
idBefore,
|
|
319
323
|
idAfter
|
|
320
324
|
];
|
|
321
325
|
}
|
|
322
|
-
function $
|
|
326
|
+
function $cda3cc4b1114cf23$export$a861c0ad45885494(panels) {
|
|
323
327
|
return Array.from(panels.values()).sort((a, b)=>a.order - b.order);
|
|
324
328
|
}
|
|
325
|
-
function $
|
|
329
|
+
function $cda3cc4b1114cf23$var$safeResizePanel(panel, delta, prevSize, event) {
|
|
326
330
|
const nextSizeUnsafe = prevSize + delta;
|
|
327
331
|
if (panel.collapsible) {
|
|
328
332
|
if (prevSize > 0) {
|
|
329
333
|
if (nextSizeUnsafe <= 0) return 0;
|
|
330
334
|
} else {
|
|
331
|
-
|
|
335
|
+
var _event_type;
|
|
336
|
+
const isKeyboardEvent = event === null || event === void 0 ? void 0 : (_event_type = event.type) === null || _event_type === void 0 ? void 0 : _event_type.startsWith("key");
|
|
332
337
|
if (!isKeyboardEvent) {
|
|
333
338
|
// Keyboard events should expand a collapsed panel to the min size,
|
|
334
339
|
// but mouse events should wait until the panel has reached its min size
|
|
@@ -342,27 +347,27 @@ function $d520236daad9c5d5$var$safeResizePanel(panel, delta, prevSize, event) {
|
|
|
342
347
|
}
|
|
343
348
|
|
|
344
349
|
|
|
345
|
-
function $
|
|
350
|
+
function $47eee9224cfec8e8$export$ec391ce65b083ed4(event, handleId, direction, initialOffset = 0, initialHandleElementRect = null) {
|
|
346
351
|
const isHorizontal = direction === "horizontal";
|
|
347
352
|
let pointerOffset = 0;
|
|
348
|
-
if ($
|
|
349
|
-
else if ($
|
|
353
|
+
if ($47eee9224cfec8e8$export$764db16956f554f8(event)) pointerOffset = isHorizontal ? event.clientX : event.clientY;
|
|
354
|
+
else if ($47eee9224cfec8e8$export$c4dfce035d43d1e0(event)) {
|
|
350
355
|
const firstTouch = event.touches[0];
|
|
351
356
|
pointerOffset = isHorizontal ? firstTouch.screenX : firstTouch.screenY;
|
|
352
357
|
} else return 0;
|
|
353
|
-
const handleElement = (0, $
|
|
358
|
+
const handleElement = (0, $cda3cc4b1114cf23$export$2e27d3a347680388)(handleId);
|
|
354
359
|
const rect = initialHandleElementRect || handleElement.getBoundingClientRect();
|
|
355
360
|
const elementOffset = isHorizontal ? rect.left : rect.top;
|
|
356
361
|
return pointerOffset - elementOffset - initialOffset;
|
|
357
362
|
}
|
|
358
|
-
function $
|
|
363
|
+
function $47eee9224cfec8e8$export$354b17c0684607ed(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragState) {
|
|
359
364
|
const { dragOffset: dragOffset = 0 , dragHandleRect: dragHandleRect , sizes: initialSizes } = initialDragState || {};
|
|
360
365
|
// If we're resizing by mouse or touch, use the initial sizes as a base.
|
|
361
366
|
// This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
|
|
362
367
|
const baseSizes = initialSizes || prevSizes;
|
|
363
|
-
if ($
|
|
368
|
+
if ($47eee9224cfec8e8$export$e7bf60a870f429b0(event)) {
|
|
364
369
|
const isHorizontal = direction === "horizontal";
|
|
365
|
-
const groupElement = (0, $
|
|
370
|
+
const groupElement = (0, $cda3cc4b1114cf23$export$5e67632cf3550a9c)(groupId);
|
|
366
371
|
const rect = groupElement.getBoundingClientRect();
|
|
367
372
|
const groupSizeInPixels = isHorizontal ? rect.width : rect.height;
|
|
368
373
|
const denominator = event.shiftKey ? 10 : 100;
|
|
@@ -392,24 +397,24 @@ function $f5af57c8e042a4ad$export$354b17c0684607ed(event, groupId, handleId, pan
|
|
|
392
397
|
// we need to special case resizing around the minSize boundary.
|
|
393
398
|
// If contracting, Panels should shrink to their minSize and then snap to fully collapsed.
|
|
394
399
|
// If expanding from collapsed, they should snap back to their minSize.
|
|
395
|
-
const [idBefore, idAfter] = (0, $
|
|
400
|
+
const [idBefore, idAfter] = (0, $cda3cc4b1114cf23$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
|
|
396
401
|
const targetPanelId = movement < 0 ? idBefore : idAfter;
|
|
397
402
|
const targetPanelIndex = panelsArray.findIndex((panel)=>panel.id === targetPanelId);
|
|
398
403
|
const targetPanel = panelsArray[targetPanelIndex];
|
|
399
404
|
if (targetPanel.collapsible) {
|
|
400
405
|
const baseSize = baseSizes[targetPanelIndex];
|
|
401
|
-
if (baseSize === 0 || baseSize.toPrecision((0, $
|
|
406
|
+
if (baseSize === 0 || baseSize.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879)) === targetPanel.minSize.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879))) movement = movement < 0 ? -targetPanel.minSize * groupSizeInPixels : targetPanel.minSize * groupSizeInPixels;
|
|
402
407
|
}
|
|
403
408
|
return movement;
|
|
404
|
-
} else return $
|
|
409
|
+
} else return $47eee9224cfec8e8$export$ec391ce65b083ed4(event, handleId, direction, dragOffset, dragHandleRect);
|
|
405
410
|
}
|
|
406
|
-
function $
|
|
411
|
+
function $47eee9224cfec8e8$export$e7bf60a870f429b0(event) {
|
|
407
412
|
return event.type === "keydown";
|
|
408
413
|
}
|
|
409
|
-
function $
|
|
414
|
+
function $47eee9224cfec8e8$export$764db16956f554f8(event) {
|
|
410
415
|
return event.type.startsWith("mouse");
|
|
411
416
|
}
|
|
412
|
-
function $
|
|
417
|
+
function $47eee9224cfec8e8$export$c4dfce035d43d1e0(event) {
|
|
413
418
|
return event.type.startsWith("touch");
|
|
414
419
|
}
|
|
415
420
|
|
|
@@ -420,16 +425,16 @@ function $f5af57c8e042a4ad$export$c4dfce035d43d1e0(event) {
|
|
|
420
425
|
|
|
421
426
|
|
|
422
427
|
|
|
423
|
-
function $
|
|
424
|
-
(0, $
|
|
428
|
+
function $a695670cc57a5969$export$d9fcbe062527d159({ committedValuesRef: committedValuesRef , groupId: groupId , panels: panels , setSizes: setSizes , sizes: sizes , panelSizeBeforeCollapse: panelSizeBeforeCollapse }) {
|
|
429
|
+
(0, $2IMI0$react.useEffect)(()=>{
|
|
425
430
|
const { direction: direction , panels: panels } = committedValuesRef.current;
|
|
426
|
-
const groupElement = (0, $
|
|
431
|
+
const groupElement = (0, $cda3cc4b1114cf23$export$5e67632cf3550a9c)(groupId);
|
|
427
432
|
const { height: height , width: width } = groupElement.getBoundingClientRect();
|
|
428
|
-
const handles = (0, $
|
|
433
|
+
const handles = (0, $cda3cc4b1114cf23$export$ae14931f0a0256a3)(groupId);
|
|
429
434
|
const cleanupFunctions = handles.map((handle)=>{
|
|
430
435
|
const handleId = handle.getAttribute("data-panel-resize-handle-id");
|
|
431
|
-
const panelsArray = (0, $
|
|
432
|
-
const [idBefore, idAfter] = (0, $
|
|
436
|
+
const panelsArray = (0, $cda3cc4b1114cf23$export$a861c0ad45885494)(panels);
|
|
437
|
+
const [idBefore, idAfter] = (0, $cda3cc4b1114cf23$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
|
|
433
438
|
if (idBefore == null || idAfter == null) return ()=>{};
|
|
434
439
|
let minSize = 0;
|
|
435
440
|
let maxSize = 100;
|
|
@@ -447,7 +452,7 @@ function $63be9a96d8675f03$export$d9fcbe062527d159({ committedValuesRef: committ
|
|
|
447
452
|
});
|
|
448
453
|
const ariaValueMax = Math.min(maxSize, 100 - totalMinSize);
|
|
449
454
|
const ariaValueMin = Math.max(minSize, (panelsArray.length - 1) * 100 - totalMaxSize);
|
|
450
|
-
const flexGrow = (0, $
|
|
455
|
+
const flexGrow = (0, $cda3cc4b1114cf23$export$6f43503e166de6fb)(panels, idBefore, sizes);
|
|
451
456
|
handle.setAttribute("aria-valuemax", "" + Math.round(ariaValueMax));
|
|
452
457
|
handle.setAttribute("aria-valuemin", "" + Math.round(ariaValueMin));
|
|
453
458
|
handle.setAttribute("aria-valuenow", "" + Math.round(parseInt(flexGrow)));
|
|
@@ -461,9 +466,9 @@ function $63be9a96d8675f03$export$d9fcbe062527d159({ committedValuesRef: committ
|
|
|
461
466
|
const size = sizes[index];
|
|
462
467
|
if (size != null) {
|
|
463
468
|
let delta = 0;
|
|
464
|
-
if (size.toPrecision((0, $
|
|
469
|
+
if (size.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879)) <= panelData.minSize.toPrecision((0, $9abd79656a89cd3a$export$d6d3992f3becc879))) delta = direction === "horizontal" ? width : height;
|
|
465
470
|
else delta = -(direction === "horizontal" ? width : height);
|
|
466
|
-
const nextSizes = (0, $
|
|
471
|
+
const nextSizes = (0, $cda3cc4b1114cf23$export$f50bae335f53943c)(event, panels, idBefore, idAfter, delta, sizes, panelSizeBeforeCollapse.current, null);
|
|
467
472
|
if (sizes !== nextSizes) setSizes(nextSizes);
|
|
468
473
|
}
|
|
469
474
|
}
|
|
@@ -472,7 +477,7 @@ function $63be9a96d8675f03$export$d9fcbe062527d159({ committedValuesRef: committ
|
|
|
472
477
|
}
|
|
473
478
|
};
|
|
474
479
|
handle.addEventListener("keydown", onKeyDown);
|
|
475
|
-
const panelBefore = (0, $
|
|
480
|
+
const panelBefore = (0, $cda3cc4b1114cf23$export$7361ed18ff57179e)(idBefore);
|
|
476
481
|
if (panelBefore != null) handle.setAttribute("aria-controls", panelBefore.id);
|
|
477
482
|
return ()=>{
|
|
478
483
|
handle.removeAttribute("aria-valuemax");
|
|
@@ -491,10 +496,10 @@ function $63be9a96d8675f03$export$d9fcbe062527d159({ committedValuesRef: committ
|
|
|
491
496
|
sizes
|
|
492
497
|
]);
|
|
493
498
|
}
|
|
494
|
-
function $
|
|
495
|
-
(0, $
|
|
499
|
+
function $a695670cc57a5969$export$33b0bea6ac3ffb03({ disabled: disabled , handleId: handleId , resizeHandler: resizeHandler }) {
|
|
500
|
+
(0, $2IMI0$react.useEffect)(()=>{
|
|
496
501
|
if (disabled || resizeHandler == null) return;
|
|
497
|
-
const handleElement = (0, $
|
|
502
|
+
const handleElement = (0, $cda3cc4b1114cf23$export$2e27d3a347680388)(handleId);
|
|
498
503
|
if (handleElement == null) return;
|
|
499
504
|
const onKeyDown = (event)=>{
|
|
500
505
|
switch(event.key){
|
|
@@ -508,8 +513,8 @@ function $63be9a96d8675f03$export$33b0bea6ac3ffb03({ disabled: disabled , handle
|
|
|
508
513
|
break;
|
|
509
514
|
case "F6":
|
|
510
515
|
{
|
|
511
|
-
const handles = (0, $
|
|
512
|
-
const index = (0, $
|
|
516
|
+
const handles = (0, $cda3cc4b1114cf23$export$8d0cd3c32ddc045e)();
|
|
517
|
+
const index = (0, $cda3cc4b1114cf23$export$96a40be80fb6c3c8)(handleId);
|
|
513
518
|
const nextIndex = event.shiftKey ? index > 0 ? index - 1 : handles.length - 1 : index + 1 < handles.length ? index + 1 : 0;
|
|
514
519
|
const nextHandle = handles[nextIndex];
|
|
515
520
|
nextHandle.focus();
|
|
@@ -529,9 +534,9 @@ function $63be9a96d8675f03$export$33b0bea6ac3ffb03({ disabled: disabled , handle
|
|
|
529
534
|
}
|
|
530
535
|
|
|
531
536
|
|
|
532
|
-
let $
|
|
533
|
-
let $
|
|
534
|
-
function $
|
|
537
|
+
let $08745f7373322b05$var$currentState = null;
|
|
538
|
+
let $08745f7373322b05$var$element = null;
|
|
539
|
+
function $08745f7373322b05$export$fa35f3322c52262f(state) {
|
|
535
540
|
switch(state){
|
|
536
541
|
case "horizontal":
|
|
537
542
|
return "col-resize";
|
|
@@ -547,26 +552,26 @@ function $102aa6bc0f99b2b3$export$fa35f3322c52262f(state) {
|
|
|
547
552
|
return "s-resize";
|
|
548
553
|
}
|
|
549
554
|
}
|
|
550
|
-
function $
|
|
551
|
-
if ($
|
|
552
|
-
document.head.removeChild($
|
|
553
|
-
$
|
|
554
|
-
$
|
|
555
|
+
function $08745f7373322b05$export$b61932ee18f96e08() {
|
|
556
|
+
if ($08745f7373322b05$var$element !== null) {
|
|
557
|
+
document.head.removeChild($08745f7373322b05$var$element);
|
|
558
|
+
$08745f7373322b05$var$currentState = null;
|
|
559
|
+
$08745f7373322b05$var$element = null;
|
|
555
560
|
}
|
|
556
561
|
}
|
|
557
|
-
function $
|
|
558
|
-
if ($
|
|
559
|
-
$
|
|
560
|
-
const style = $
|
|
561
|
-
if ($
|
|
562
|
-
$
|
|
563
|
-
document.head.appendChild($
|
|
562
|
+
function $08745f7373322b05$export$d395b5dfd066a659(state) {
|
|
563
|
+
if ($08745f7373322b05$var$currentState === state) return;
|
|
564
|
+
$08745f7373322b05$var$currentState = state;
|
|
565
|
+
const style = $08745f7373322b05$export$fa35f3322c52262f(state);
|
|
566
|
+
if ($08745f7373322b05$var$element === null) {
|
|
567
|
+
$08745f7373322b05$var$element = document.createElement("style");
|
|
568
|
+
document.head.appendChild($08745f7373322b05$var$element);
|
|
564
569
|
}
|
|
565
|
-
$
|
|
570
|
+
$08745f7373322b05$var$element.innerHTML = `*{cursor: ${style}!important;}`;
|
|
566
571
|
}
|
|
567
572
|
|
|
568
573
|
|
|
569
|
-
function $
|
|
574
|
+
function $2e8572579e31d898$export$2e2bcd8739ae039(callback, durationMs = 10) {
|
|
570
575
|
let timeoutId = null;
|
|
571
576
|
let callable = (...args)=>{
|
|
572
577
|
clearTimeout(timeoutId);
|
|
@@ -578,7 +583,7 @@ function $0f7a23424493ebd6$export$2e2bcd8739ae039(callback, durationMs = 10) {
|
|
|
578
583
|
}
|
|
579
584
|
|
|
580
585
|
|
|
581
|
-
function $
|
|
586
|
+
function $d31ef7445a11a6c5$export$b141efd0b0fb9174(arrayA, arrayB) {
|
|
582
587
|
if (arrayA.length !== arrayB.length) return false;
|
|
583
588
|
for(let index = 0; index < arrayA.length; index++){
|
|
584
589
|
if (arrayA[index] !== arrayB[index]) return false;
|
|
@@ -588,46 +593,46 @@ function $d6375e31485eb011$export$b141efd0b0fb9174(arrayA, arrayB) {
|
|
|
588
593
|
|
|
589
594
|
|
|
590
595
|
// Limit the frequency of localStorage updates.
|
|
591
|
-
const $
|
|
592
|
-
function $
|
|
596
|
+
const $cec4cafe75f3db78$var$savePanelGroupLayoutDebounced = (0, $2e8572579e31d898$export$2e2bcd8739ae039)((0, $f9cb001fbb908626$export$af183b313c61be4f), 100);
|
|
597
|
+
function $cec4cafe75f3db78$var$throwServerError() {
|
|
593
598
|
throw new Error('PanelGroup "storage" prop required for server rendering.');
|
|
594
599
|
}
|
|
595
|
-
const $
|
|
596
|
-
getItem: typeof localStorage !== "undefined" ? (name)=>localStorage.getItem(name) : $
|
|
597
|
-
setItem: typeof localStorage !== "undefined" ? (name, value)=>localStorage.setItem(name, value) : $
|
|
600
|
+
const $cec4cafe75f3db78$var$defaultStorage = {
|
|
601
|
+
getItem: typeof localStorage !== "undefined" ? (name)=>localStorage.getItem(name) : $cec4cafe75f3db78$var$throwServerError,
|
|
602
|
+
setItem: typeof localStorage !== "undefined" ? (name, value)=>localStorage.setItem(name, value) : $cec4cafe75f3db78$var$throwServerError
|
|
598
603
|
};
|
|
599
|
-
function $
|
|
600
|
-
const groupId = (0, $
|
|
601
|
-
const [activeHandleId, setActiveHandleId] = (0, $
|
|
602
|
-
const [panels, setPanels] = (0, $
|
|
604
|
+
function $cec4cafe75f3db78$export$1d05749f6f573bb({ autoSaveId: autoSaveId , children: children = null , className: classNameFromProps = "" , direction: direction , id: idFromProps = null , onLayout: onLayout = null , storage: storage = $cec4cafe75f3db78$var$defaultStorage , style: styleFromProps = {} , tagName: Type = "div" }) {
|
|
605
|
+
const groupId = (0, $b1693d8d8f570e9c$export$2e2bcd8739ae039)(idFromProps);
|
|
606
|
+
const [activeHandleId, setActiveHandleId] = (0, $2IMI0$react.useState)(null);
|
|
607
|
+
const [panels, setPanels] = (0, $2IMI0$react.useState)(new Map());
|
|
603
608
|
// When resizing is done via mouse/touch event–
|
|
604
609
|
// We store the initial Panel sizes in this ref, and apply move deltas to them instead of to the current sizes.
|
|
605
610
|
// This has the benefit of causing force-collapsed panels to spring back open if drag is reversed.
|
|
606
|
-
const initialDragStateRef = (0, $
|
|
611
|
+
const initialDragStateRef = (0, $2IMI0$react.useRef)(null);
|
|
607
612
|
// Use a ref to guard against users passing inline props
|
|
608
|
-
const callbacksRef = (0, $
|
|
613
|
+
const callbacksRef = (0, $2IMI0$react.useRef)({
|
|
609
614
|
onLayout: onLayout
|
|
610
615
|
});
|
|
611
|
-
(0, $
|
|
616
|
+
(0, $2IMI0$react.useEffect)(()=>{
|
|
612
617
|
callbacksRef.current.onLayout = onLayout;
|
|
613
618
|
});
|
|
614
619
|
// 0-1 values representing the relative size of each panel.
|
|
615
|
-
const [sizes, setSizes] = (0, $
|
|
620
|
+
const [sizes, setSizes] = (0, $2IMI0$react.useState)([]);
|
|
616
621
|
// Used to support imperative collapse/expand API.
|
|
617
|
-
const panelSizeBeforeCollapse = (0, $
|
|
618
|
-
const prevDeltaRef = (0, $
|
|
622
|
+
const panelSizeBeforeCollapse = (0, $2IMI0$react.useRef)(new Map());
|
|
623
|
+
const prevDeltaRef = (0, $2IMI0$react.useRef)(0);
|
|
619
624
|
// Store committed values to avoid unnecessarily re-running memoization/effects functions.
|
|
620
|
-
const committedValuesRef = (0, $
|
|
625
|
+
const committedValuesRef = (0, $2IMI0$react.useRef)({
|
|
621
626
|
direction: direction,
|
|
622
627
|
panels: panels,
|
|
623
628
|
sizes: sizes
|
|
624
629
|
});
|
|
625
|
-
(0, $
|
|
630
|
+
(0, $129b5b9a317dcc10$export$2e2bcd8739ae039)(()=>{
|
|
626
631
|
committedValuesRef.current.direction = direction;
|
|
627
632
|
committedValuesRef.current.panels = panels;
|
|
628
633
|
committedValuesRef.current.sizes = sizes;
|
|
629
634
|
});
|
|
630
|
-
(0, $
|
|
635
|
+
(0, $a695670cc57a5969$export$d9fcbe062527d159)({
|
|
631
636
|
committedValuesRef: committedValuesRef,
|
|
632
637
|
groupId: groupId,
|
|
633
638
|
panels: panels,
|
|
@@ -636,7 +641,7 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
636
641
|
panelSizeBeforeCollapse: panelSizeBeforeCollapse
|
|
637
642
|
});
|
|
638
643
|
// Notify external code when sizes have changed.
|
|
639
|
-
(0, $
|
|
644
|
+
(0, $2IMI0$react.useEffect)(()=>{
|
|
640
645
|
const { onLayout: onLayout } = callbacksRef.current;
|
|
641
646
|
if (onLayout) {
|
|
642
647
|
const { sizes: sizes } = committedValuesRef.current;
|
|
@@ -648,14 +653,14 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
648
653
|
]);
|
|
649
654
|
// Notify Panel listeners about their initial sizes and collapsed state after mount.
|
|
650
655
|
// Subsequent changes will be called by the resizeHandler.
|
|
651
|
-
const didNotifyCallbacksAfterMountRef = (0, $
|
|
652
|
-
(0, $
|
|
656
|
+
const didNotifyCallbacksAfterMountRef = (0, $2IMI0$react.useRef)(false);
|
|
657
|
+
(0, $129b5b9a317dcc10$export$2e2bcd8739ae039)(()=>{
|
|
653
658
|
if (didNotifyCallbacksAfterMountRef.current) return;
|
|
654
659
|
const { panels: panels , sizes: sizes } = committedValuesRef.current;
|
|
655
660
|
if (sizes.length > 0) {
|
|
656
661
|
didNotifyCallbacksAfterMountRef.current = true;
|
|
657
|
-
const panelsArray = (0, $
|
|
658
|
-
(0, $
|
|
662
|
+
const panelsArray = (0, $cda3cc4b1114cf23$export$a861c0ad45885494)(panels);
|
|
663
|
+
(0, $cda3cc4b1114cf23$export$b8e48269e4faa934)(panelsArray, [], sizes);
|
|
659
664
|
}
|
|
660
665
|
}, [
|
|
661
666
|
sizes
|
|
@@ -663,7 +668,7 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
663
668
|
// Once all panels have registered themselves,
|
|
664
669
|
// Compute the initial sizes based on default weights.
|
|
665
670
|
// This assumes that panels register during initial mount (no conditional rendering)!
|
|
666
|
-
(0, $
|
|
671
|
+
(0, $129b5b9a317dcc10$export$2e2bcd8739ae039)(()=>{
|
|
667
672
|
const sizes = committedValuesRef.current.sizes;
|
|
668
673
|
if (sizes.length === panels.size) // Only compute (or restore) default sizes once per panel configuration.
|
|
669
674
|
return;
|
|
@@ -671,12 +676,12 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
671
676
|
// default size should be restored from local storage if possible.
|
|
672
677
|
let defaultSizes = undefined;
|
|
673
678
|
if (autoSaveId) {
|
|
674
|
-
const panelsArray = (0, $
|
|
675
|
-
defaultSizes = (0, $
|
|
679
|
+
const panelsArray = (0, $cda3cc4b1114cf23$export$a861c0ad45885494)(panels);
|
|
680
|
+
defaultSizes = (0, $f9cb001fbb908626$export$9c80c6617f0386da)(autoSaveId, panelsArray, storage);
|
|
676
681
|
}
|
|
677
682
|
if (defaultSizes != null) setSizes(defaultSizes);
|
|
678
683
|
else {
|
|
679
|
-
const panelsArray1 = (0, $
|
|
684
|
+
const panelsArray1 = (0, $cda3cc4b1114cf23$export$a861c0ad45885494)(panels);
|
|
680
685
|
let panelsWithNullDefaultSize = 0;
|
|
681
686
|
let totalDefaultSize = 0;
|
|
682
687
|
let totalMinSize = 0;
|
|
@@ -700,19 +705,19 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
700
705
|
autoSaveId,
|
|
701
706
|
panels
|
|
702
707
|
]);
|
|
703
|
-
(0, $
|
|
708
|
+
(0, $2IMI0$react.useEffect)(()=>{
|
|
704
709
|
// If this panel has been configured to persist sizing information, save sizes to local storage.
|
|
705
710
|
if (autoSaveId) {
|
|
706
711
|
if (sizes.length === 0 || sizes.length !== panels.size) return;
|
|
707
|
-
const panelsArray = (0, $
|
|
708
|
-
$
|
|
712
|
+
const panelsArray = (0, $cda3cc4b1114cf23$export$a861c0ad45885494)(panels);
|
|
713
|
+
$cec4cafe75f3db78$var$savePanelGroupLayoutDebounced(autoSaveId, panelsArray, sizes, storage);
|
|
709
714
|
}
|
|
710
715
|
}, [
|
|
711
716
|
autoSaveId,
|
|
712
717
|
panels,
|
|
713
718
|
sizes
|
|
714
719
|
]);
|
|
715
|
-
const getPanelStyle = (0, $
|
|
720
|
+
const getPanelStyle = (0, $2IMI0$react.useCallback)((id)=>{
|
|
716
721
|
const { panels: panels } = committedValuesRef.current;
|
|
717
722
|
// Before mounting, Panels will not yet have registered themselves.
|
|
718
723
|
// This includes server rendering.
|
|
@@ -724,7 +729,7 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
724
729
|
// Without this, Panel sizes may be unintentionally overridden by their content.
|
|
725
730
|
overflow: "hidden"
|
|
726
731
|
};
|
|
727
|
-
const flexGrow = (0, $
|
|
732
|
+
const flexGrow = (0, $cda3cc4b1114cf23$export$6f43503e166de6fb)(panels, id, sizes);
|
|
728
733
|
return {
|
|
729
734
|
flexBasis: 0,
|
|
730
735
|
flexGrow: flexGrow,
|
|
@@ -740,7 +745,7 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
740
745
|
direction,
|
|
741
746
|
sizes
|
|
742
747
|
]);
|
|
743
|
-
const registerPanel = (0, $
|
|
748
|
+
const registerPanel = (0, $2IMI0$react.useCallback)((id, panel)=>{
|
|
744
749
|
setPanels((prevPanels)=>{
|
|
745
750
|
if (prevPanels.has(id)) return prevPanels;
|
|
746
751
|
const nextPanels = new Map(prevPanels);
|
|
@@ -748,24 +753,24 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
748
753
|
return nextPanels;
|
|
749
754
|
});
|
|
750
755
|
}, []);
|
|
751
|
-
const registerResizeHandle = (0, $
|
|
756
|
+
const registerResizeHandle = (0, $2IMI0$react.useCallback)((handleId)=>{
|
|
752
757
|
const resizeHandler = (event)=>{
|
|
753
758
|
event.preventDefault();
|
|
754
759
|
const { direction: direction , panels: panels , sizes: prevSizes } = committedValuesRef.current;
|
|
755
|
-
const panelsArray = (0, $
|
|
756
|
-
const [idBefore, idAfter] = (0, $
|
|
760
|
+
const panelsArray = (0, $cda3cc4b1114cf23$export$a861c0ad45885494)(panels);
|
|
761
|
+
const [idBefore, idAfter] = (0, $cda3cc4b1114cf23$export$68d3a33c21dfbe27)(groupId, handleId, panelsArray);
|
|
757
762
|
if (idBefore == null || idAfter == null) return;
|
|
758
|
-
const movement = (0, $
|
|
763
|
+
const movement = (0, $47eee9224cfec8e8$export$354b17c0684607ed)(event, groupId, handleId, panelsArray, direction, prevSizes, initialDragStateRef.current);
|
|
759
764
|
if (movement === 0) return;
|
|
760
|
-
const groupElement = (0, $
|
|
765
|
+
const groupElement = (0, $cda3cc4b1114cf23$export$5e67632cf3550a9c)(groupId);
|
|
761
766
|
const rect = groupElement.getBoundingClientRect();
|
|
762
767
|
const isHorizontal = direction === "horizontal";
|
|
763
768
|
const size = isHorizontal ? rect.width : rect.height;
|
|
764
769
|
const delta = movement / size * 100;
|
|
765
|
-
const nextSizes = (0, $
|
|
766
|
-
const sizesChanged = !(0, $
|
|
770
|
+
const nextSizes = (0, $cda3cc4b1114cf23$export$f50bae335f53943c)(event, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, initialDragStateRef.current);
|
|
771
|
+
const sizesChanged = !(0, $d31ef7445a11a6c5$export$b141efd0b0fb9174)(prevSizes, nextSizes);
|
|
767
772
|
// Don't update cursor for resizes triggered by keyboard interactions.
|
|
768
|
-
if ((0, $
|
|
773
|
+
if ((0, $47eee9224cfec8e8$export$764db16956f554f8)(event) || (0, $47eee9224cfec8e8$export$c4dfce035d43d1e0)(event)) // Watch for multiple subsequent deltas; this might occur for tiny cursor movements.
|
|
769
774
|
// In this case, Panel sizes might not change–
|
|
770
775
|
// but updating cursor in this scenario would cause a flicker.
|
|
771
776
|
{
|
|
@@ -774,15 +779,15 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
774
779
|
// If the pointer has moved too far to resize the panel any further,
|
|
775
780
|
// update the cursor style for a visual clue.
|
|
776
781
|
// This mimics VS Code behavior.
|
|
777
|
-
if (isHorizontal) (0, $
|
|
778
|
-
else (0, $
|
|
782
|
+
if (isHorizontal) (0, $08745f7373322b05$export$d395b5dfd066a659)(movement < 0 ? "horizontal-min" : "horizontal-max");
|
|
783
|
+
else (0, $08745f7373322b05$export$d395b5dfd066a659)(movement < 0 ? "vertical-min" : "vertical-max");
|
|
779
784
|
} else // Reset the cursor style to the the normal resize cursor.
|
|
780
|
-
(0, $
|
|
785
|
+
(0, $08745f7373322b05$export$d395b5dfd066a659)(isHorizontal ? "horizontal" : "vertical");
|
|
781
786
|
}
|
|
782
787
|
}
|
|
783
788
|
if (sizesChanged) {
|
|
784
789
|
// If resize change handlers have been declared, this is the time to call them.
|
|
785
|
-
(0, $
|
|
790
|
+
(0, $cda3cc4b1114cf23$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
|
|
786
791
|
setSizes(nextSizes);
|
|
787
792
|
}
|
|
788
793
|
prevDeltaRef.current = delta;
|
|
@@ -791,7 +796,7 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
791
796
|
}, [
|
|
792
797
|
groupId
|
|
793
798
|
]);
|
|
794
|
-
const unregisterPanel = (0, $
|
|
799
|
+
const unregisterPanel = (0, $2IMI0$react.useCallback)((id)=>{
|
|
795
800
|
setPanels((prevPanels)=>{
|
|
796
801
|
if (!prevPanels.has(id)) return prevPanels;
|
|
797
802
|
const nextPanels = new Map(prevPanels);
|
|
@@ -799,74 +804,74 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
799
804
|
return nextPanels;
|
|
800
805
|
});
|
|
801
806
|
}, []);
|
|
802
|
-
const collapsePanel = (0, $
|
|
807
|
+
const collapsePanel = (0, $2IMI0$react.useCallback)((id)=>{
|
|
803
808
|
const { panels: panels , sizes: prevSizes } = committedValuesRef.current;
|
|
804
809
|
const panel = panels.get(id);
|
|
805
810
|
if (panel == null || !panel.collapsible) return;
|
|
806
|
-
const panelsArray = (0, $
|
|
811
|
+
const panelsArray = (0, $cda3cc4b1114cf23$export$a861c0ad45885494)(panels);
|
|
807
812
|
const index = panelsArray.indexOf(panel);
|
|
808
813
|
if (index < 0) return;
|
|
809
814
|
const currentSize = prevSizes[index];
|
|
810
815
|
if (currentSize === 0) // Panel is already collapsed.
|
|
811
816
|
return;
|
|
812
817
|
panelSizeBeforeCollapse.current.set(id, currentSize);
|
|
813
|
-
const [idBefore, idAfter] = (0, $
|
|
818
|
+
const [idBefore, idAfter] = (0, $cda3cc4b1114cf23$export$5a5b0c1d38c23c3b)(id, panelsArray);
|
|
814
819
|
if (idBefore == null || idAfter == null) return;
|
|
815
820
|
const isLastPanel = index === panelsArray.length - 1;
|
|
816
821
|
const delta = isLastPanel ? currentSize : 0 - currentSize;
|
|
817
|
-
const nextSizes = (0, $
|
|
822
|
+
const nextSizes = (0, $cda3cc4b1114cf23$export$f50bae335f53943c)(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
|
|
818
823
|
if (prevSizes !== nextSizes) {
|
|
819
824
|
// If resize change handlers have been declared, this is the time to call them.
|
|
820
|
-
(0, $
|
|
825
|
+
(0, $cda3cc4b1114cf23$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
|
|
821
826
|
setSizes(nextSizes);
|
|
822
827
|
}
|
|
823
828
|
}, []);
|
|
824
|
-
const expandPanel = (0, $
|
|
829
|
+
const expandPanel = (0, $2IMI0$react.useCallback)((id)=>{
|
|
825
830
|
const { panels: panels , sizes: prevSizes } = committedValuesRef.current;
|
|
826
831
|
const panel = panels.get(id);
|
|
827
832
|
if (panel == null) return;
|
|
828
833
|
const sizeBeforeCollapse = panelSizeBeforeCollapse.current.get(id) || panel.minSize;
|
|
829
834
|
if (!sizeBeforeCollapse) return;
|
|
830
|
-
const panelsArray = (0, $
|
|
835
|
+
const panelsArray = (0, $cda3cc4b1114cf23$export$a861c0ad45885494)(panels);
|
|
831
836
|
const index = panelsArray.indexOf(panel);
|
|
832
837
|
if (index < 0) return;
|
|
833
838
|
const currentSize = prevSizes[index];
|
|
834
839
|
if (currentSize !== 0) // Panel is already expanded.
|
|
835
840
|
return;
|
|
836
|
-
const [idBefore, idAfter] = (0, $
|
|
841
|
+
const [idBefore, idAfter] = (0, $cda3cc4b1114cf23$export$5a5b0c1d38c23c3b)(id, panelsArray);
|
|
837
842
|
if (idBefore == null || idAfter == null) return;
|
|
838
843
|
const isLastPanel = index === panelsArray.length - 1;
|
|
839
844
|
const delta = isLastPanel ? 0 - sizeBeforeCollapse : sizeBeforeCollapse;
|
|
840
|
-
const nextSizes = (0, $
|
|
845
|
+
const nextSizes = (0, $cda3cc4b1114cf23$export$f50bae335f53943c)(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
|
|
841
846
|
if (prevSizes !== nextSizes) {
|
|
842
847
|
// If resize change handlers have been declared, this is the time to call them.
|
|
843
|
-
(0, $
|
|
848
|
+
(0, $cda3cc4b1114cf23$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
|
|
844
849
|
setSizes(nextSizes);
|
|
845
850
|
}
|
|
846
851
|
}, []);
|
|
847
|
-
const resizePanel = (0, $
|
|
852
|
+
const resizePanel = (0, $2IMI0$react.useCallback)((id, nextSize)=>{
|
|
848
853
|
const { panels: panels , sizes: prevSizes } = committedValuesRef.current;
|
|
849
854
|
const panel = panels.get(id);
|
|
850
855
|
if (panel == null) return;
|
|
851
|
-
const panelsArray = (0, $
|
|
856
|
+
const panelsArray = (0, $cda3cc4b1114cf23$export$a861c0ad45885494)(panels);
|
|
852
857
|
const index = panelsArray.indexOf(panel);
|
|
853
858
|
if (index < 0) return;
|
|
854
859
|
const currentSize = prevSizes[index];
|
|
855
860
|
if (currentSize === nextSize) return;
|
|
856
861
|
if (panel.collapsible && nextSize === 0) ;
|
|
857
862
|
else nextSize = Math.min(panel.maxSize, Math.max(panel.minSize, nextSize));
|
|
858
|
-
const [idBefore, idAfter] = (0, $
|
|
863
|
+
const [idBefore, idAfter] = (0, $cda3cc4b1114cf23$export$5a5b0c1d38c23c3b)(id, panelsArray);
|
|
859
864
|
if (idBefore == null || idAfter == null) return;
|
|
860
865
|
const isLastPanel = index === panelsArray.length - 1;
|
|
861
866
|
const delta = isLastPanel ? currentSize - nextSize : nextSize - currentSize;
|
|
862
|
-
const nextSizes = (0, $
|
|
867
|
+
const nextSizes = (0, $cda3cc4b1114cf23$export$f50bae335f53943c)(null, panels, idBefore, idAfter, delta, prevSizes, panelSizeBeforeCollapse.current, null);
|
|
863
868
|
if (prevSizes !== nextSizes) {
|
|
864
869
|
// If resize change handlers have been declared, this is the time to call them.
|
|
865
|
-
(0, $
|
|
870
|
+
(0, $cda3cc4b1114cf23$export$b8e48269e4faa934)(panelsArray, prevSizes, nextSizes);
|
|
866
871
|
setSizes(nextSizes);
|
|
867
872
|
}
|
|
868
873
|
}, []);
|
|
869
|
-
const context = (0, $
|
|
874
|
+
const context = (0, $2IMI0$react.useMemo)(()=>({
|
|
870
875
|
activeHandleId: activeHandleId,
|
|
871
876
|
collapsePanel: collapsePanel,
|
|
872
877
|
direction: direction,
|
|
@@ -878,17 +883,17 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
878
883
|
resizePanel: resizePanel,
|
|
879
884
|
startDragging: (id, event)=>{
|
|
880
885
|
setActiveHandleId(id);
|
|
881
|
-
if ((0, $
|
|
882
|
-
const handleElement = (0, $
|
|
886
|
+
if ((0, $47eee9224cfec8e8$export$764db16956f554f8)(event) || (0, $47eee9224cfec8e8$export$c4dfce035d43d1e0)(event)) {
|
|
887
|
+
const handleElement = (0, $cda3cc4b1114cf23$export$2e27d3a347680388)(id);
|
|
883
888
|
initialDragStateRef.current = {
|
|
884
889
|
dragHandleRect: handleElement.getBoundingClientRect(),
|
|
885
|
-
dragOffset: (0, $
|
|
890
|
+
dragOffset: (0, $47eee9224cfec8e8$export$ec391ce65b083ed4)(event, id, direction),
|
|
886
891
|
sizes: committedValuesRef.current.sizes
|
|
887
892
|
};
|
|
888
893
|
}
|
|
889
894
|
},
|
|
890
895
|
stopDragging: ()=>{
|
|
891
|
-
(0, $
|
|
896
|
+
(0, $08745f7373322b05$export$b61932ee18f96e08)();
|
|
892
897
|
setActiveHandleId(null);
|
|
893
898
|
initialDragStateRef.current = null;
|
|
894
899
|
},
|
|
@@ -912,8 +917,8 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
912
917
|
overflow: "hidden",
|
|
913
918
|
width: "100%"
|
|
914
919
|
};
|
|
915
|
-
return (0, $
|
|
916
|
-
children: (0, $
|
|
920
|
+
return (0, $2IMI0$react.createElement)((0, $b9cf028330e7f243$export$7d8c6d083caec74a).Provider, {
|
|
921
|
+
children: (0, $2IMI0$react.createElement)(Type, {
|
|
917
922
|
children: children,
|
|
918
923
|
className: classNameFromProps,
|
|
919
924
|
"data-panel-group": "",
|
|
@@ -930,7 +935,7 @@ function $19bf0050f73d236b$export$1d05749f6f573bb({ autoSaveId: autoSaveId , chi
|
|
|
930
935
|
// Workaround for Parcel scope hoisting (which renames objects/functions).
|
|
931
936
|
// Casting to :any is required to avoid corrupting the generated TypeScript types.
|
|
932
937
|
// See github.com/parcel-bundler/parcel/issues/8724
|
|
933
|
-
$
|
|
938
|
+
$cec4cafe75f3db78$export$1d05749f6f573bb.displayName = "PanelGroup";
|
|
934
939
|
|
|
935
940
|
|
|
936
941
|
|
|
@@ -938,16 +943,16 @@ $19bf0050f73d236b$export$1d05749f6f573bb.displayName = "PanelGroup";
|
|
|
938
943
|
|
|
939
944
|
|
|
940
945
|
|
|
941
|
-
function $
|
|
942
|
-
const divElementRef = (0, $
|
|
943
|
-
const panelGroupContext = (0, $
|
|
946
|
+
function $3a26a712c9163348$export$8829ecf6b6b15484({ children: children = null , className: classNameFromProps = "" , disabled: disabled = false , id: idFromProps = null , style: styleFromProps = {} , tagName: Type = "div" }) {
|
|
947
|
+
const divElementRef = (0, $2IMI0$react.useRef)(null);
|
|
948
|
+
const panelGroupContext = (0, $2IMI0$react.useContext)((0, $b9cf028330e7f243$export$7d8c6d083caec74a));
|
|
944
949
|
if (panelGroupContext === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
|
|
945
950
|
const { activeHandleId: activeHandleId , direction: direction , groupId: groupId , registerResizeHandle: registerResizeHandle , startDragging: startDragging , stopDragging: stopDragging } = panelGroupContext;
|
|
946
|
-
const resizeHandleId = (0, $
|
|
951
|
+
const resizeHandleId = (0, $b1693d8d8f570e9c$export$2e2bcd8739ae039)(idFromProps);
|
|
947
952
|
const isDragging = activeHandleId === resizeHandleId;
|
|
948
|
-
const [isFocused, setIsFocused] = (0, $
|
|
949
|
-
const [resizeHandler, setResizeHandler] = (0, $
|
|
950
|
-
const stopDraggingAndBlur = (0, $
|
|
953
|
+
const [isFocused, setIsFocused] = (0, $2IMI0$react.useState)(false);
|
|
954
|
+
const [resizeHandler, setResizeHandler] = (0, $2IMI0$react.useState)(null);
|
|
955
|
+
const stopDraggingAndBlur = (0, $2IMI0$react.useCallback)(()=>{
|
|
951
956
|
// Clicking on the drag handle shouldn't leave it focused;
|
|
952
957
|
// That would cause the PanelGroup to think it was still active.
|
|
953
958
|
const div = divElementRef.current;
|
|
@@ -956,7 +961,7 @@ function $01377e07790cf46f$export$8829ecf6b6b15484({ children: children = null ,
|
|
|
956
961
|
}, [
|
|
957
962
|
stopDragging
|
|
958
963
|
]);
|
|
959
|
-
(0, $
|
|
964
|
+
(0, $2IMI0$react.useEffect)(()=>{
|
|
960
965
|
if (disabled) setResizeHandler(null);
|
|
961
966
|
else {
|
|
962
967
|
const resizeHandler = registerResizeHandle(resizeHandleId);
|
|
@@ -967,7 +972,7 @@ function $01377e07790cf46f$export$8829ecf6b6b15484({ children: children = null ,
|
|
|
967
972
|
resizeHandleId,
|
|
968
973
|
registerResizeHandle
|
|
969
974
|
]);
|
|
970
|
-
(0, $
|
|
975
|
+
(0, $2IMI0$react.useEffect)(()=>{
|
|
971
976
|
if (disabled || resizeHandler == null || !isDragging) return;
|
|
972
977
|
const onMove = (event)=>{
|
|
973
978
|
resizeHandler(event);
|
|
@@ -991,17 +996,17 @@ function $01377e07790cf46f$export$8829ecf6b6b15484({ children: children = null ,
|
|
|
991
996
|
resizeHandler,
|
|
992
997
|
stopDraggingAndBlur
|
|
993
998
|
]);
|
|
994
|
-
(0, $
|
|
999
|
+
(0, $a695670cc57a5969$export$33b0bea6ac3ffb03)({
|
|
995
1000
|
disabled: disabled,
|
|
996
1001
|
handleId: resizeHandleId,
|
|
997
1002
|
resizeHandler: resizeHandler
|
|
998
1003
|
});
|
|
999
1004
|
const style = {
|
|
1000
|
-
cursor: (0, $
|
|
1005
|
+
cursor: (0, $08745f7373322b05$export$fa35f3322c52262f)(direction),
|
|
1001
1006
|
touchAction: "none",
|
|
1002
1007
|
userSelect: "none"
|
|
1003
1008
|
};
|
|
1004
|
-
return (0, $
|
|
1009
|
+
return (0, $2IMI0$react.createElement)(Type, {
|
|
1005
1010
|
children: children,
|
|
1006
1011
|
className: classNameFromProps,
|
|
1007
1012
|
"data-resize-handle-active": isDragging ? "pointer" : isFocused ? "keyboard" : undefined,
|
|
@@ -1028,7 +1033,7 @@ function $01377e07790cf46f$export$8829ecf6b6b15484({ children: children = null ,
|
|
|
1028
1033
|
// Workaround for Parcel scope hoisting (which renames objects/functions).
|
|
1029
1034
|
// Casting to :any is required to avoid corrupting the generated TypeScript types.
|
|
1030
1035
|
// See github.com/parcel-bundler/parcel/issues/8724
|
|
1031
|
-
$
|
|
1036
|
+
$3a26a712c9163348$export$8829ecf6b6b15484.displayName = "PanelResizeHandle";
|
|
1032
1037
|
|
|
1033
1038
|
|
|
1034
1039
|
|