react-resizable-panels 2.1.6 → 2.1.8

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.
Files changed (92) hide show
  1. package/README.md +4 -0
  2. package/dist/declarations/src/Panel.d.ts +1 -1
  3. package/dist/declarations/src/PanelGroup.d.ts +1 -1
  4. package/dist/declarations/src/PanelResizeHandle.d.ts +6 -3
  5. package/dist/react-resizable-panels.browser.cjs.js +90 -94
  6. package/dist/react-resizable-panels.browser.development.cjs.js +90 -94
  7. package/dist/react-resizable-panels.browser.development.esm.js +38 -41
  8. package/dist/react-resizable-panels.browser.esm.js +38 -41
  9. package/dist/react-resizable-panels.cjs.js +90 -94
  10. package/dist/react-resizable-panels.development.cjs.js +90 -94
  11. package/dist/react-resizable-panels.development.esm.js +38 -41
  12. package/dist/react-resizable-panels.development.node.cjs.js +89 -92
  13. package/dist/react-resizable-panels.development.node.esm.js +37 -39
  14. package/dist/react-resizable-panels.esm.js +38 -41
  15. package/dist/react-resizable-panels.node.cjs.js +89 -92
  16. package/dist/react-resizable-panels.node.esm.js +37 -39
  17. package/package.json +7 -2
  18. package/.eslintrc.cjs +0 -27
  19. package/CHANGELOG.md +0 -574
  20. package/dist/declarations/src/vendor/react.d.ts +0 -7
  21. package/jest.config.js +0 -10
  22. package/src/Panel.test.tsx +0 -1084
  23. package/src/Panel.ts +0 -259
  24. package/src/PanelGroup.test.tsx +0 -443
  25. package/src/PanelGroup.ts +0 -999
  26. package/src/PanelGroupContext.ts +0 -42
  27. package/src/PanelResizeHandle.test.tsx +0 -367
  28. package/src/PanelResizeHandle.ts +0 -246
  29. package/src/PanelResizeHandleRegistry.ts +0 -336
  30. package/src/constants.ts +0 -1
  31. package/src/env-conditions/browser.ts +0 -1
  32. package/src/env-conditions/development.ts +0 -1
  33. package/src/env-conditions/node.ts +0 -1
  34. package/src/env-conditions/production.ts +0 -1
  35. package/src/env-conditions/unknown.ts +0 -1
  36. package/src/hooks/useForceUpdate.ts +0 -7
  37. package/src/hooks/useIsomorphicEffect.ts +0 -8
  38. package/src/hooks/useUniqueId.ts +0 -19
  39. package/src/hooks/useWindowSplitterBehavior.ts +0 -90
  40. package/src/hooks/useWindowSplitterPanelGroupBehavior.ts +0 -201
  41. package/src/index.ts +0 -77
  42. package/src/types.ts +0 -5
  43. package/src/utils/adjustLayoutByDelta.test.ts +0 -2061
  44. package/src/utils/adjustLayoutByDelta.ts +0 -308
  45. package/src/utils/arrays.ts +0 -13
  46. package/src/utils/assert.ts +0 -10
  47. package/src/utils/calculateAriaValues.test.ts +0 -106
  48. package/src/utils/calculateAriaValues.ts +0 -45
  49. package/src/utils/calculateDeltaPercentage.ts +0 -63
  50. package/src/utils/calculateDragOffsetPercentage.ts +0 -40
  51. package/src/utils/calculateUnsafeDefaultLayout.test.ts +0 -87
  52. package/src/utils/calculateUnsafeDefaultLayout.ts +0 -50
  53. package/src/utils/callPanelCallbacks.ts +0 -49
  54. package/src/utils/compareLayouts.test.ts +0 -9
  55. package/src/utils/compareLayouts.ts +0 -12
  56. package/src/utils/computePanelFlexBoxStyle.test.ts +0 -123
  57. package/src/utils/computePanelFlexBoxStyle.ts +0 -50
  58. package/src/utils/csp.ts +0 -9
  59. package/src/utils/cursor.ts +0 -103
  60. package/src/utils/debounce.ts +0 -18
  61. package/src/utils/determinePivotIndices.ts +0 -15
  62. package/src/utils/dom/getPanelElement.ts +0 -10
  63. package/src/utils/dom/getPanelElementsForGroup.ts +0 -8
  64. package/src/utils/dom/getPanelGroupElement.ts +0 -21
  65. package/src/utils/dom/getResizeHandleElement.ts +0 -10
  66. package/src/utils/dom/getResizeHandleElementIndex.ts +0 -13
  67. package/src/utils/dom/getResizeHandleElementsForGroup.ts +0 -10
  68. package/src/utils/dom/getResizeHandlePanelIds.ts +0 -19
  69. package/src/utils/events/getResizeEventCoordinates.ts +0 -23
  70. package/src/utils/events/getResizeEventCursorPosition.ts +0 -14
  71. package/src/utils/events/index.ts +0 -13
  72. package/src/utils/getInputType.ts +0 -5
  73. package/src/utils/initializeDefaultStorage.ts +0 -26
  74. package/src/utils/numbers/fuzzyCompareNumbers.test.ts +0 -16
  75. package/src/utils/numbers/fuzzyCompareNumbers.ts +0 -21
  76. package/src/utils/numbers/fuzzyLayoutsEqual.ts +0 -22
  77. package/src/utils/numbers/fuzzyNumbersEqual.ts +0 -9
  78. package/src/utils/rects/getIntersectingRectangle.test.ts +0 -198
  79. package/src/utils/rects/getIntersectingRectangle.ts +0 -28
  80. package/src/utils/rects/intersects.test.ts +0 -197
  81. package/src/utils/rects/intersects.ts +0 -23
  82. package/src/utils/rects/types.ts +0 -6
  83. package/src/utils/resizePanel.test.ts +0 -59
  84. package/src/utils/resizePanel.ts +0 -47
  85. package/src/utils/serialization.ts +0 -87
  86. package/src/utils/test-utils.ts +0 -205
  87. package/src/utils/validatePanelConstraints.test.ts +0 -143
  88. package/src/utils/validatePanelConstraints.ts +0 -69
  89. package/src/utils/validatePanelGroupLayout.test.ts +0 -148
  90. package/src/utils/validatePanelGroupLayout.ts +0 -95
  91. package/src/vendor/react.ts +0 -73
  92. package/src/vendor/stacking-order.ts +0 -139
@@ -1,2061 +0,0 @@
1
- import { adjustLayoutByDelta } from "./adjustLayoutByDelta";
2
-
3
- describe("adjustLayoutByDelta", () => {
4
- it("[1++,2]", () => {
5
- expect(
6
- adjustLayoutByDelta({
7
- delta: 1,
8
- initialLayout: [50, 50],
9
- panelConstraints: [{}, {}],
10
- pivotIndices: [0, 1],
11
- prevLayout: [50, 50],
12
- trigger: "imperative-api",
13
- })
14
- ).toEqual([51, 49]);
15
- });
16
-
17
- it("[1++,2]", () => {
18
- expect(
19
- adjustLayoutByDelta({
20
- delta: 25,
21
- initialLayout: [50, 50],
22
- panelConstraints: [{}, {}],
23
- pivotIndices: [0, 1],
24
- prevLayout: [50, 50],
25
- trigger: "imperative-api",
26
- })
27
- ).toEqual([75, 25]);
28
- expect(
29
- adjustLayoutByDelta({
30
- delta: 50,
31
- initialLayout: [50, 50],
32
- panelConstraints: [{}, {}],
33
- pivotIndices: [0, 1],
34
- prevLayout: [50, 50],
35
- trigger: "imperative-api",
36
- })
37
- ).toEqual([100, 0]);
38
- });
39
-
40
- it("[1++,2]", () => {
41
- expect(
42
- adjustLayoutByDelta({
43
- delta: 50,
44
- initialLayout: [50, 50],
45
- panelConstraints: [
46
- {
47
- minSize: 20,
48
- maxSize: 60,
49
- },
50
- {
51
- minSize: 10,
52
- maxSize: 90,
53
- },
54
- ],
55
- pivotIndices: [0, 1],
56
- prevLayout: [50, 50],
57
- trigger: "imperative-api",
58
- })
59
- ).toEqual([60, 40]);
60
- });
61
-
62
- it("[1++,2]", () => {
63
- expect(
64
- adjustLayoutByDelta({
65
- delta: 25,
66
- initialLayout: [50, 50],
67
- panelConstraints: [
68
- {},
69
- {
70
- collapsedSize: 5,
71
- collapsible: true,
72
- minSize: 25,
73
- },
74
- ],
75
- pivotIndices: [0, 1],
76
- prevLayout: [50, 50],
77
- trigger: "imperative-api",
78
- })
79
- ).toEqual([75, 25]);
80
- });
81
-
82
- it("[1++,2]", () => {
83
- expect(
84
- adjustLayoutByDelta({
85
- delta: 40,
86
- initialLayout: [50, 50],
87
- panelConstraints: [
88
- {},
89
- {
90
- collapsedSize: 5,
91
- collapsible: true,
92
- minSize: 25,
93
- },
94
- ],
95
- pivotIndices: [0, 1],
96
- prevLayout: [50, 50],
97
- trigger: "imperative-api",
98
- })
99
- ).toEqual([95, 5]);
100
- });
101
-
102
- // Edge case
103
- // Expanding from a collapsed state to less than the min size via imperative API should do nothing
104
- it("[1++,2]", () => {
105
- expect(
106
- adjustLayoutByDelta({
107
- delta: 5,
108
- initialLayout: [10, 90],
109
- panelConstraints: [
110
- {
111
- collapsedSize: 10,
112
- collapsible: true,
113
- minSize: 25,
114
- },
115
- {},
116
- ],
117
- pivotIndices: [0, 1],
118
- prevLayout: [10, 90],
119
- trigger: "imperative-api",
120
- })
121
- ).toEqual([10, 90]);
122
- });
123
-
124
- // Edge case
125
- // Keyboard interactions should always expand a collapsed panel
126
- it("[1++,2]", () => {
127
- expect(
128
- adjustLayoutByDelta({
129
- delta: 5,
130
- initialLayout: [10, 90],
131
- panelConstraints: [
132
- {
133
- collapsedSize: 10,
134
- collapsible: true,
135
- minSize: 25,
136
- },
137
- {},
138
- ],
139
- pivotIndices: [0, 1],
140
- prevLayout: [10, 90],
141
- trigger: "keyboard",
142
- })
143
- ).toEqual([25, 75]);
144
- });
145
-
146
- // Edge case
147
- // Keyboard interactions should always collapse a collapsible panel once it's at the minimum size
148
- it("[1++,2]", () => {
149
- expect(
150
- adjustLayoutByDelta({
151
- delta: 5,
152
- initialLayout: [75, 25],
153
- panelConstraints: [
154
- {},
155
- {
156
- collapsible: true,
157
- minSize: 25,
158
- },
159
- ],
160
- pivotIndices: [0, 1],
161
- prevLayout: [75, 25],
162
- trigger: "keyboard",
163
- })
164
- ).toEqual([100, 0]);
165
- });
166
-
167
- // Edge case
168
- // Expanding from a collapsed state to less than the min size via imperative API should do nothing
169
- it("[1++,2]", () => {
170
- expect(
171
- adjustLayoutByDelta({
172
- delta: 1,
173
- initialLayout: [4, 96],
174
- panelConstraints: [
175
- {
176
- collapsedSize: 4,
177
- collapsible: true,
178
- defaultSize: 15,
179
- maxSize: 15,
180
- minSize: 6,
181
- },
182
- {
183
- minSize: 5,
184
- },
185
- ],
186
- pivotIndices: [0, 1],
187
- prevLayout: [4, 96],
188
- trigger: "imperative-api",
189
- })
190
- ).toEqual([4, 96]);
191
- });
192
-
193
- // Edge case
194
- // Expanding from a collapsed state to less than the min size via keyboard should snap to min size
195
- it("[1++,2]", () => {
196
- expect(
197
- adjustLayoutByDelta({
198
- delta: 1,
199
- initialLayout: [4, 96],
200
- panelConstraints: [
201
- {
202
- collapsedSize: 4,
203
- collapsible: true,
204
- defaultSize: 15,
205
- maxSize: 15,
206
- minSize: 6,
207
- },
208
- {
209
- minSize: 5,
210
- },
211
- ],
212
- pivotIndices: [0, 1],
213
- prevLayout: [4, 96],
214
- trigger: "keyboard",
215
- })
216
- ).toEqual([6, 94]);
217
- });
218
-
219
- // Edge case
220
- // Expanding from a collapsed state to greater than the max size
221
- it("[1++,2]", () => {
222
- expect(
223
- adjustLayoutByDelta({
224
- delta: 25,
225
- initialLayout: [4, 96],
226
- panelConstraints: [
227
- {
228
- collapsedSize: 4,
229
- collapsible: true,
230
- defaultSize: 15,
231
- maxSize: 15,
232
- minSize: 6,
233
- },
234
- {
235
- minSize: 5,
236
- },
237
- ],
238
- pivotIndices: [0, 1],
239
- prevLayout: [4, 96],
240
- trigger: "imperative-api",
241
- })
242
- ).toEqual([15, 85]);
243
- });
244
-
245
- // Edge case
246
- // Expanding from a collapsed state mimicking an imperative API call
247
- it("[1++,2]", () => {
248
- expect(
249
- adjustLayoutByDelta({
250
- delta: 30,
251
- initialLayout: [5, 95],
252
- panelConstraints: [
253
- {
254
- collapsedSize: 5,
255
- collapsible: true,
256
- maxSize: 50,
257
- minSize: 25,
258
- },
259
- {
260
- minSize: 50,
261
- },
262
- ],
263
- pivotIndices: [0, 1],
264
- prevLayout: [5, 95],
265
- trigger: "imperative-api",
266
- })
267
- ).toEqual([35, 65]);
268
- });
269
-
270
- // Edge case
271
- // Expanding from a collapsed state mimicking an keyboard event
272
- it("[1++,2]", () => {
273
- expect(
274
- adjustLayoutByDelta({
275
- delta: 30,
276
- initialLayout: [5, 95],
277
- panelConstraints: [
278
- {
279
- collapsedSize: 5,
280
- collapsible: true,
281
- maxSize: 50,
282
- minSize: 25,
283
- },
284
- {
285
- minSize: 50,
286
- },
287
- ],
288
- pivotIndices: [0, 1],
289
- prevLayout: [5, 95],
290
- trigger: "keyboard",
291
- })
292
- ).toEqual([35, 65]);
293
- });
294
-
295
- // Edge case
296
- // Expanding from a collapsed state mimicking an keyboard event when there is no min size
297
- it("[1++,2]", () => {
298
- expect(
299
- adjustLayoutByDelta({
300
- delta: 30,
301
- initialLayout: [0, 100],
302
- panelConstraints: [
303
- {
304
- collapsedSize: 0,
305
- collapsible: true,
306
- maxSize: 50,
307
- minSize: 0,
308
- },
309
- {},
310
- ],
311
- pivotIndices: [0, 1],
312
- prevLayout: [0, 100],
313
- trigger: "keyboard",
314
- })
315
- ).toEqual([30, 70]);
316
- });
317
-
318
- it("[1--,2]", () => {
319
- expect(
320
- adjustLayoutByDelta({
321
- delta: -1,
322
- initialLayout: [50, 50],
323
- panelConstraints: [{}, {}],
324
- pivotIndices: [0, 1],
325
- prevLayout: [50, 50],
326
- trigger: "imperative-api",
327
- })
328
- ).toEqual([49, 51]);
329
- });
330
-
331
- it("[1--,2]", () => {
332
- expect(
333
- adjustLayoutByDelta({
334
- delta: -25,
335
- initialLayout: [50, 50],
336
- panelConstraints: [{}, {}],
337
- pivotIndices: [0, 1],
338
- prevLayout: [50, 50],
339
- trigger: "imperative-api",
340
- })
341
- ).toEqual([25, 75]);
342
- });
343
-
344
- it("[1--,2]", () => {
345
- expect(
346
- adjustLayoutByDelta({
347
- delta: -50,
348
- initialLayout: [50, 50],
349
- panelConstraints: [{}, {}],
350
- pivotIndices: [0, 1],
351
- prevLayout: [50, 50],
352
- trigger: "imperative-api",
353
- })
354
- ).toEqual([0, 100]);
355
- });
356
-
357
- it("[1--,2]", () => {
358
- expect(
359
- adjustLayoutByDelta({
360
- delta: -50,
361
- initialLayout: [50, 50],
362
- panelConstraints: [
363
- {
364
- minSize: 20,
365
- maxSize: 60,
366
- },
367
- {
368
- minSize: 10,
369
- maxSize: 90,
370
- },
371
- ],
372
- pivotIndices: [0, 1],
373
- prevLayout: [50, 50],
374
- trigger: "imperative-api",
375
- })
376
- ).toEqual([20, 80]);
377
- });
378
-
379
- it("[1--,2]", () => {
380
- expect(
381
- adjustLayoutByDelta({
382
- delta: -25,
383
- initialLayout: [50, 50],
384
- panelConstraints: [
385
- {
386
- collapsedSize: 5,
387
- collapsible: true,
388
- minSize: 25,
389
- },
390
- {},
391
- ],
392
- pivotIndices: [0, 1],
393
- prevLayout: [50, 50],
394
- trigger: "imperative-api",
395
- })
396
- ).toEqual([25, 75]);
397
- });
398
-
399
- it("[1--,2]", () => {
400
- expect(
401
- adjustLayoutByDelta({
402
- delta: -30,
403
- initialLayout: [50, 50],
404
- panelConstraints: [
405
- {
406
- collapsedSize: 5,
407
- collapsible: true,
408
- minSize: 25,
409
- },
410
- {},
411
- ],
412
- pivotIndices: [0, 1],
413
- prevLayout: [50, 50],
414
- trigger: "imperative-api",
415
- })
416
- ).toEqual([25, 75]);
417
-
418
- expect(
419
- adjustLayoutByDelta({
420
- delta: -36,
421
- initialLayout: [50, 50],
422
- panelConstraints: [
423
- {
424
- collapsedSize: 5,
425
- collapsible: true,
426
- minSize: 25,
427
- },
428
- {},
429
- ],
430
- pivotIndices: [0, 1],
431
- prevLayout: [50, 50],
432
- trigger: "imperative-api",
433
- })
434
- ).toEqual([5, 95]);
435
- });
436
-
437
- it("[1--,2]", () => {
438
- // Edge case
439
- // The second panel should prevent the first panel from collapsing
440
- expect(
441
- adjustLayoutByDelta({
442
- delta: -30,
443
- initialLayout: [50, 50],
444
- panelConstraints: [
445
- {
446
- collapsedSize: 5,
447
- collapsible: true,
448
- minSize: 25,
449
- },
450
- { maxSize: 80 },
451
- ],
452
- pivotIndices: [0, 1],
453
- prevLayout: [50, 50],
454
- trigger: "imperative-api",
455
- })
456
- ).toEqual([25, 75]);
457
- });
458
-
459
- // Edge case
460
- // Keyboard interactions should always expand a collapsed panel
461
- it("[1--,2]", () => {
462
- expect(
463
- adjustLayoutByDelta({
464
- delta: -5,
465
- initialLayout: [90, 10],
466
- panelConstraints: [
467
- {},
468
- {
469
- collapsedSize: 10,
470
- collapsible: true,
471
- minSize: 25,
472
- },
473
- ],
474
- pivotIndices: [0, 1],
475
- prevLayout: [90, 10],
476
- trigger: "keyboard",
477
- })
478
- ).toEqual([75, 25]);
479
- });
480
-
481
- // Edge case
482
- // Keyboard interactions should always collapse a collapsible panel once it's at the minimum size
483
- it("[1++,2]", () => {
484
- expect(
485
- adjustLayoutByDelta({
486
- delta: -5,
487
- initialLayout: [25, 75],
488
- panelConstraints: [
489
- {
490
- collapsedSize: 10,
491
- collapsible: true,
492
- minSize: 25,
493
- },
494
- {},
495
- ],
496
- pivotIndices: [0, 1],
497
- prevLayout: [25, 75],
498
- trigger: "keyboard",
499
- })
500
- ).toEqual([10, 90]);
501
- });
502
-
503
- it("[1++,2,3]", () => {
504
- expect(
505
- adjustLayoutByDelta({
506
- delta: 1,
507
- initialLayout: [25, 50, 25],
508
- panelConstraints: [{}, {}, {}],
509
- pivotIndices: [0, 1],
510
- prevLayout: [25, 50, 25],
511
- trigger: "imperative-api",
512
- })
513
- ).toEqual([26, 49, 25]);
514
- });
515
-
516
- it("[1++,2,3]", () => {
517
- expect(
518
- adjustLayoutByDelta({
519
- delta: 25,
520
- initialLayout: [25, 50, 25],
521
- panelConstraints: [{}, {}, {}],
522
- pivotIndices: [0, 1],
523
- prevLayout: [25, 50, 25],
524
- trigger: "imperative-api",
525
- })
526
- ).toEqual([50, 25, 25]);
527
- });
528
-
529
- it("[1++,2,3]", () => {
530
- expect(
531
- adjustLayoutByDelta({
532
- delta: 50,
533
- initialLayout: [25, 50, 25],
534
- panelConstraints: [{}, {}, {}],
535
- pivotIndices: [0, 1],
536
- prevLayout: [25, 50, 25],
537
- trigger: "imperative-api",
538
- })
539
- ).toEqual([75, 0, 25]);
540
- });
541
-
542
- it("[1++,2,3]", () => {
543
- expect(
544
- adjustLayoutByDelta({
545
- delta: 75,
546
- initialLayout: [25, 50, 25],
547
- panelConstraints: [{}, {}, {}],
548
- pivotIndices: [0, 1],
549
- prevLayout: [25, 50, 25],
550
- trigger: "imperative-api",
551
- })
552
- ).toEqual([100, 0, 0]);
553
- });
554
-
555
- it("[1++,2,3]", () => {
556
- expect(
557
- adjustLayoutByDelta({
558
- delta: 25,
559
- initialLayout: [25, 50, 25],
560
- panelConstraints: [{ maxSize: 35 }, { minSize: 25 }, {}],
561
- pivotIndices: [0, 1],
562
- prevLayout: [25, 50, 25],
563
- trigger: "imperative-api",
564
- })
565
- ).toEqual([35, 40, 25]);
566
- });
567
-
568
- it("[1++,2,3]", () => {
569
- // Any further than the max size should stop the drag/keyboard resize
570
- expect(
571
- adjustLayoutByDelta({
572
- delta: 25,
573
- initialLayout: [25, 50, 25],
574
- panelConstraints: [{ maxSize: 35 }, { minSize: 25 }, {}],
575
- pivotIndices: [0, 1],
576
- prevLayout: [25, 50, 25],
577
- trigger: "imperative-api",
578
- })
579
- ).toEqual([35, 40, 25]);
580
- });
581
-
582
- it("[1++,2,3]", () => {
583
- expect(
584
- adjustLayoutByDelta({
585
- delta: 5,
586
- initialLayout: [25, 40, 35],
587
- panelConstraints: [
588
- {},
589
- {
590
- collapsedSize: 5,
591
- collapsible: true,
592
- minSize: 25,
593
- },
594
- { minSize: 25 },
595
- ],
596
- pivotIndices: [0, 1],
597
- prevLayout: [25, 40, 35],
598
- trigger: "imperative-api",
599
- })
600
- ).toEqual([30, 35, 35]);
601
- });
602
-
603
- it("[1++,2,3]", () => {
604
- expect(
605
- adjustLayoutByDelta({
606
- delta: 26,
607
- initialLayout: [25, 40, 35],
608
- panelConstraints: [
609
- {},
610
- {
611
- collapsedSize: 5,
612
- collapsible: true,
613
- minSize: 25,
614
- },
615
- { minSize: 25 },
616
- ],
617
- pivotIndices: [0, 1],
618
- prevLayout: [25, 40, 35],
619
- trigger: "imperative-api",
620
- })
621
- ).toEqual([60, 5, 35]);
622
- });
623
-
624
- it("[1++,2,3]", () => {
625
- expect(
626
- adjustLayoutByDelta({
627
- delta: 80,
628
- initialLayout: [25, 40, 35],
629
- panelConstraints: [
630
- {},
631
- {
632
- collapsedSize: 5,
633
- collapsible: true,
634
- minSize: 25,
635
- },
636
- { minSize: 25 },
637
- ],
638
- pivotIndices: [0, 1],
639
- prevLayout: [25, 40, 35],
640
- trigger: "imperative-api",
641
- })
642
- ).toEqual([70, 5, 25]);
643
- });
644
-
645
- it("[1--,2,3]", () => {
646
- expect(
647
- adjustLayoutByDelta({
648
- delta: -1,
649
- initialLayout: [25, 50, 25],
650
- panelConstraints: [{}, {}, {}],
651
- pivotIndices: [0, 1],
652
- prevLayout: [25, 50, 25],
653
- trigger: "imperative-api",
654
- })
655
- ).toEqual([24, 51, 25]);
656
- });
657
-
658
- it("[1--,2,3]", () => {
659
- expect(
660
- adjustLayoutByDelta({
661
- delta: -25,
662
- initialLayout: [25, 50, 25],
663
- panelConstraints: [{}, {}, {}],
664
- pivotIndices: [0, 1],
665
- prevLayout: [25, 50, 25],
666
- trigger: "imperative-api",
667
- })
668
- ).toEqual([0, 75, 25]);
669
- });
670
-
671
- it("[1--,2,3]", () => {
672
- expect(
673
- adjustLayoutByDelta({
674
- delta: -1,
675
- initialLayout: [25, 50, 25],
676
- panelConstraints: [{ minSize: 20 }, {}, {}],
677
- pivotIndices: [0, 1],
678
- prevLayout: [25, 50, 25],
679
- trigger: "imperative-api",
680
- })
681
- ).toEqual([24, 51, 25]);
682
- });
683
-
684
- it("[1--,2,3]", () => {
685
- expect(
686
- adjustLayoutByDelta({
687
- delta: -10,
688
- initialLayout: [25, 50, 25],
689
- panelConstraints: [{ minSize: 20 }, {}, {}],
690
- pivotIndices: [0, 1],
691
- prevLayout: [25, 50, 25],
692
- trigger: "imperative-api",
693
- })
694
- ).toEqual([20, 55, 25]);
695
- });
696
-
697
- it("[1--,2,3]", () => {
698
- expect(
699
- adjustLayoutByDelta({
700
- delta: -5,
701
- initialLayout: [25, 50, 25],
702
- panelConstraints: [
703
- {
704
- // Implied min size 10
705
- },
706
- { maxSize: 70 },
707
- { maxSize: 20 },
708
- ],
709
- pivotIndices: [0, 1],
710
- prevLayout: [25, 50, 25],
711
- trigger: "imperative-api",
712
- })
713
- ).toEqual([20, 55, 25]);
714
- });
715
-
716
- it("[1--,2,3]", () => {
717
- expect(
718
- adjustLayoutByDelta({
719
- delta: -20,
720
- initialLayout: [25, 50, 25],
721
- panelConstraints: [
722
- {
723
- // Implied min size 10
724
- },
725
- { maxSize: 70 },
726
- { maxSize: 20 },
727
- ],
728
- pivotIndices: [0, 1],
729
- prevLayout: [25, 50, 25],
730
- trigger: "imperative-api",
731
- })
732
- ).toEqual([10, 65, 25]);
733
- });
734
-
735
- it("[1--,2,3]", () => {
736
- expect(
737
- adjustLayoutByDelta({
738
- delta: -10,
739
- initialLayout: [25, 50, 25],
740
- panelConstraints: [
741
- {
742
- collapsedSize: 5,
743
- collapsible: true,
744
- minSize: 15,
745
- },
746
- {},
747
- {},
748
- ],
749
- pivotIndices: [0, 1],
750
- prevLayout: [25, 50, 25],
751
- trigger: "imperative-api",
752
- })
753
- ).toEqual([15, 60, 25]);
754
- });
755
-
756
- it("[1--,2,3]", () => {
757
- expect(
758
- adjustLayoutByDelta({
759
- delta: -20,
760
- initialLayout: [25, 50, 25],
761
- panelConstraints: [
762
- {
763
- collapsedSize: 5,
764
- collapsible: true,
765
- minSize: 15,
766
- },
767
- {},
768
- {},
769
- ],
770
- pivotIndices: [0, 1],
771
- prevLayout: [25, 50, 25],
772
- trigger: "imperative-api",
773
- })
774
- ).toEqual([5, 70, 25]);
775
- });
776
-
777
- it("[1--,2,3]", () => {
778
- expect(
779
- adjustLayoutByDelta({
780
- delta: -20,
781
- initialLayout: [45, 50, 5],
782
- panelConstraints: [
783
- {},
784
- {
785
- maxSize: 50,
786
- },
787
- {
788
- collapsedSize: 5,
789
- collapsible: true,
790
- minSize: 15,
791
- },
792
- ],
793
- pivotIndices: [0, 1],
794
- prevLayout: [45, 50, 5],
795
- trigger: "imperative-api",
796
- })
797
- ).toEqual([25, 50, 25]);
798
- });
799
-
800
- it("[1,2++,3]", () => {
801
- expect(
802
- adjustLayoutByDelta({
803
- delta: -1,
804
- initialLayout: [25, 50, 25],
805
- panelConstraints: [{}, {}, {}],
806
- pivotIndices: [1, 2],
807
- prevLayout: [25, 50, 25],
808
- trigger: "imperative-api",
809
- })
810
- ).toEqual([25, 49, 26]);
811
- });
812
-
813
- it("[1,2++,3]", () => {
814
- expect(
815
- adjustLayoutByDelta({
816
- delta: -25,
817
- initialLayout: [25, 50, 25],
818
- panelConstraints: [{}, {}, {}],
819
- pivotIndices: [1, 2],
820
- prevLayout: [25, 50, 25],
821
- trigger: "imperative-api",
822
- })
823
- ).toEqual([25, 25, 50]);
824
- });
825
-
826
- it("[1,2++,3]", () => {
827
- expect(
828
- adjustLayoutByDelta({
829
- delta: -50,
830
- initialLayout: [25, 50, 25],
831
- panelConstraints: [{}, {}, {}],
832
- pivotIndices: [1, 2],
833
- prevLayout: [25, 50, 25],
834
- trigger: "imperative-api",
835
- })
836
- ).toEqual([25, 0, 75]);
837
- });
838
-
839
- it("[1,2++,3]", () => {
840
- expect(
841
- adjustLayoutByDelta({
842
- delta: -75,
843
- initialLayout: [25, 50, 25],
844
- panelConstraints: [{}, {}, {}],
845
- pivotIndices: [1, 2],
846
- prevLayout: [25, 50, 25],
847
- trigger: "imperative-api",
848
- })
849
- ).toEqual([0, 0, 100]);
850
- });
851
-
852
- it("[1,2++,3]", () => {
853
- expect(
854
- adjustLayoutByDelta({
855
- delta: 5,
856
- initialLayout: [25, 50, 25],
857
- panelConstraints: [{}, {}, { minSize: 15 }],
858
- pivotIndices: [1, 2],
859
- prevLayout: [25, 50, 25],
860
- trigger: "imperative-api",
861
- })
862
- ).toEqual([25, 55, 20]);
863
- });
864
-
865
- it("[1,2++,3]", () => {
866
- expect(
867
- adjustLayoutByDelta({
868
- delta: 20,
869
- initialLayout: [25, 50, 25],
870
- panelConstraints: [{}, {}, { minSize: 15 }],
871
- pivotIndices: [1, 2],
872
- prevLayout: [25, 50, 25],
873
- trigger: "imperative-api",
874
- })
875
- ).toEqual([25, 60, 15]);
876
- });
877
-
878
- it("[1,2++,3]", () => {
879
- expect(
880
- adjustLayoutByDelta({
881
- delta: 5,
882
- initialLayout: [25, 50, 25],
883
- panelConstraints: [{}, {}, { collapsible: true, minSize: 20 }],
884
- pivotIndices: [1, 2],
885
- prevLayout: [25, 50, 25],
886
- trigger: "imperative-api",
887
- })
888
- ).toEqual([25, 55, 20]);
889
- });
890
-
891
- it("[1,2++,3]", () => {
892
- expect(
893
- adjustLayoutByDelta({
894
- delta: 10,
895
- initialLayout: [25, 50, 25],
896
- panelConstraints: [{}, {}, { collapsible: true, minSize: 20 }],
897
- pivotIndices: [1, 2],
898
- prevLayout: [25, 50, 25],
899
- trigger: "imperative-api",
900
- })
901
- ).toEqual([25, 55, 20]);
902
-
903
- expect(
904
- adjustLayoutByDelta({
905
- delta: 16,
906
- initialLayout: [25, 50, 25],
907
- panelConstraints: [{}, {}, { collapsible: true, minSize: 20 }],
908
- pivotIndices: [1, 2],
909
- prevLayout: [25, 50, 25],
910
- trigger: "imperative-api",
911
- })
912
- ).toEqual([25, 75, 0]);
913
- });
914
-
915
- it("[1,2--,3]", () => {
916
- expect(
917
- adjustLayoutByDelta({
918
- delta: 1,
919
- initialLayout: [25, 50, 25],
920
- panelConstraints: [{}, {}, {}],
921
- pivotIndices: [1, 2],
922
- prevLayout: [25, 50, 25],
923
- trigger: "imperative-api",
924
- })
925
- ).toEqual([25, 51, 24]);
926
- });
927
-
928
- it("[1,2--,3]", () => {
929
- expect(
930
- adjustLayoutByDelta({
931
- delta: 25,
932
- initialLayout: [25, 50, 25],
933
- panelConstraints: [{}, {}, {}],
934
- pivotIndices: [1, 2],
935
- prevLayout: [25, 50, 25],
936
- trigger: "imperative-api",
937
- })
938
- ).toEqual([25, 75, 0]);
939
- });
940
-
941
- it("[1,2--,3]", () => {
942
- expect(
943
- adjustLayoutByDelta({
944
- delta: -20,
945
- initialLayout: [25, 50, 25],
946
- panelConstraints: [{}, { minSize: 40 }, {}],
947
- pivotIndices: [1, 2],
948
- prevLayout: [25, 50, 25],
949
- trigger: "imperative-api",
950
- })
951
- ).toEqual([15, 40, 45]);
952
- });
953
-
954
- it("[1,2--,3]", () => {
955
- expect(
956
- adjustLayoutByDelta({
957
- delta: -10,
958
- initialLayout: [25, 50, 25],
959
- panelConstraints: [{}, {}, { maxSize: 30 }],
960
- pivotIndices: [1, 2],
961
- prevLayout: [25, 50, 25],
962
- trigger: "imperative-api",
963
- })
964
- ).toEqual([25, 45, 30]);
965
- });
966
-
967
- it("[1,2--,3]", () => {
968
- expect(
969
- adjustLayoutByDelta({
970
- delta: -35,
971
- initialLayout: [25, 50, 25],
972
- panelConstraints: [
973
- {},
974
- {
975
- collapsedSize: 5,
976
- collapsible: true,
977
- minSize: 20,
978
- },
979
- {},
980
- ],
981
- pivotIndices: [1, 2],
982
- prevLayout: [25, 50, 25],
983
- trigger: "imperative-api",
984
- })
985
- ).toEqual([20, 20, 60]);
986
-
987
- expect(
988
- adjustLayoutByDelta({
989
- delta: -40,
990
- initialLayout: [25, 50, 25],
991
- panelConstraints: [
992
- {},
993
- {
994
- collapsedSize: 5,
995
- collapsible: true,
996
- minSize: 20,
997
- },
998
- {},
999
- ],
1000
- pivotIndices: [1, 2],
1001
- prevLayout: [25, 50, 25],
1002
- trigger: "imperative-api",
1003
- })
1004
- ).toEqual([25, 5, 70]);
1005
- });
1006
-
1007
- it("[1,2--,3]", () => {
1008
- expect(
1009
- adjustLayoutByDelta({
1010
- delta: -10,
1011
- initialLayout: [25, 0, 75],
1012
- panelConstraints: [
1013
- {
1014
- collapsedSize: 5,
1015
- collapsible: true,
1016
- minSize: 20,
1017
- },
1018
- {},
1019
- {},
1020
- ],
1021
- pivotIndices: [1, 2],
1022
- prevLayout: [25, 0, 75],
1023
- trigger: "imperative-api",
1024
- })
1025
- ).toEqual([20, 0, 80]);
1026
-
1027
- expect(
1028
- adjustLayoutByDelta({
1029
- delta: -20,
1030
- initialLayout: [25, 0, 75],
1031
- panelConstraints: [
1032
- {
1033
- collapsedSize: 5,
1034
- collapsible: true,
1035
- minSize: 20,
1036
- },
1037
- {},
1038
- {},
1039
- ],
1040
- pivotIndices: [1, 2],
1041
- prevLayout: [25, 0, 75],
1042
- trigger: "imperative-api",
1043
- })
1044
- ).toEqual([5, 0, 95]);
1045
- });
1046
-
1047
- // Edge case
1048
- it("[1,2--,3]", () => {
1049
- expect(
1050
- adjustLayoutByDelta({
1051
- delta: -100,
1052
- initialLayout: [100 / 3, 100 / 3, 100 / 3],
1053
- panelConstraints: [{}, {}, {}],
1054
- pivotIndices: [1, 2],
1055
- prevLayout: [100 / 3, 100 / 3, 100 / 3],
1056
- trigger: "mouse-or-touch",
1057
- })
1058
- ).toEqual([0, 0, 100]);
1059
- });
1060
-
1061
- it("[1++,2,3,4]", () => {
1062
- expect(
1063
- adjustLayoutByDelta({
1064
- delta: 1,
1065
- initialLayout: [25, 25, 25, 25],
1066
- panelConstraints: [{}, {}, {}, {}],
1067
- pivotIndices: [0, 1],
1068
- prevLayout: [25, 25, 25, 25],
1069
- trigger: "imperative-api",
1070
- })
1071
- ).toEqual([26, 24, 25, 25]);
1072
- });
1073
-
1074
- it("[1++,2,3,4]", () => {
1075
- expect(
1076
- adjustLayoutByDelta({
1077
- delta: 25,
1078
- initialLayout: [25, 25, 25, 25],
1079
- panelConstraints: [{}, {}, {}, {}],
1080
- pivotIndices: [0, 1],
1081
- prevLayout: [25, 25, 25, 25],
1082
- trigger: "imperative-api",
1083
- })
1084
- ).toEqual([50, 0, 25, 25]);
1085
- });
1086
-
1087
- it("[1++,2,3,4]", () => {
1088
- expect(
1089
- adjustLayoutByDelta({
1090
- delta: 50,
1091
- initialLayout: [25, 25, 25, 25],
1092
- panelConstraints: [{}, {}, {}, {}],
1093
- pivotIndices: [0, 1],
1094
- prevLayout: [25, 25, 25, 25],
1095
- trigger: "imperative-api",
1096
- })
1097
- ).toEqual([75, 0, 0, 25]);
1098
- });
1099
-
1100
- it("[1++,2,3,4]", () => {
1101
- expect(
1102
- adjustLayoutByDelta({
1103
- delta: 75,
1104
- initialLayout: [25, 25, 25, 25],
1105
- panelConstraints: [{}, {}, {}, {}],
1106
- pivotIndices: [0, 1],
1107
- prevLayout: [25, 25, 25, 25],
1108
- trigger: "imperative-api",
1109
- })
1110
- ).toEqual([100, 0, 0, 0]);
1111
- });
1112
-
1113
- it("[1++,2,3,4]", () => {
1114
- expect(
1115
- adjustLayoutByDelta({
1116
- delta: 25,
1117
- initialLayout: [25, 25, 25, 25],
1118
- panelConstraints: [{ maxSize: 35 }, {}, {}, {}],
1119
- pivotIndices: [0, 1],
1120
- prevLayout: [25, 25, 25, 25],
1121
- trigger: "imperative-api",
1122
- })
1123
- ).toEqual([35, 15, 25, 25]);
1124
- });
1125
-
1126
- it("[1++,2,3,4]", () => {
1127
- expect(
1128
- adjustLayoutByDelta({
1129
- delta: 100,
1130
- initialLayout: [25, 25, 25, 25],
1131
- panelConstraints: [
1132
- {},
1133
- { minSize: 10 },
1134
- { minSize: 10 },
1135
- { minSize: 10 },
1136
- ],
1137
- pivotIndices: [0, 1],
1138
- prevLayout: [25, 25, 25, 25],
1139
- trigger: "imperative-api",
1140
- })
1141
- ).toEqual([70, 10, 10, 10]);
1142
- });
1143
-
1144
- it("[1++,2,3,4]", () => {
1145
- expect(
1146
- adjustLayoutByDelta({
1147
- delta: 10,
1148
- initialLayout: [25, 25, 25, 25],
1149
- panelConstraints: [
1150
- {},
1151
- {
1152
- collapsedSize: 5,
1153
- collapsible: true,
1154
- minSize: 20,
1155
- },
1156
- {
1157
- collapsedSize: 5,
1158
- collapsible: true,
1159
- minSize: 20,
1160
- },
1161
- {
1162
- collapsedSize: 5,
1163
- collapsible: true,
1164
- minSize: 20,
1165
- },
1166
- ],
1167
- pivotIndices: [0, 1],
1168
- prevLayout: [25, 25, 25, 25],
1169
- trigger: "imperative-api",
1170
- })
1171
- ).toEqual([35, 20, 20, 25]);
1172
-
1173
- expect(
1174
- adjustLayoutByDelta({
1175
- delta: 15,
1176
- initialLayout: [25, 25, 25, 25],
1177
- panelConstraints: [
1178
- {},
1179
- {
1180
- collapsedSize: 5,
1181
- collapsible: true,
1182
- minSize: 20,
1183
- },
1184
- {
1185
- collapsedSize: 5,
1186
- collapsible: true,
1187
- minSize: 20,
1188
- },
1189
- {
1190
- collapsedSize: 5,
1191
- collapsible: true,
1192
- minSize: 20,
1193
- },
1194
- ],
1195
- pivotIndices: [0, 1],
1196
- prevLayout: [25, 25, 25, 25],
1197
- trigger: "imperative-api",
1198
- })
1199
- ).toEqual([45, 5, 25, 25]);
1200
- });
1201
-
1202
- it("[1++,2,3,4]", () => {
1203
- expect(
1204
- adjustLayoutByDelta({
1205
- delta: 40,
1206
- initialLayout: [25, 25, 25, 25],
1207
- panelConstraints: [
1208
- {},
1209
- {
1210
- collapsedSize: 5,
1211
- collapsible: true,
1212
- minSize: 20,
1213
- },
1214
- {
1215
- collapsedSize: 5,
1216
- collapsible: true,
1217
- minSize: 20,
1218
- },
1219
- {
1220
- collapsedSize: 5,
1221
- collapsible: true,
1222
- minSize: 20,
1223
- },
1224
- ],
1225
- pivotIndices: [0, 1],
1226
- prevLayout: [25, 25, 25, 25],
1227
- trigger: "imperative-api",
1228
- })
1229
- ).toEqual([65, 5, 5, 25]);
1230
- });
1231
-
1232
- it("[1++,2,3,4]", () => {
1233
- expect(
1234
- adjustLayoutByDelta({
1235
- delta: 100,
1236
- initialLayout: [25, 25, 25, 25],
1237
- panelConstraints: [
1238
- {},
1239
- {
1240
- collapsedSize: 5,
1241
- collapsible: true,
1242
- minSize: 20,
1243
- },
1244
- {
1245
- collapsedSize: 5,
1246
- collapsible: true,
1247
- minSize: 20,
1248
- },
1249
- {
1250
- collapsedSize: 5,
1251
- collapsible: true,
1252
- minSize: 20,
1253
- },
1254
- ],
1255
- pivotIndices: [0, 1],
1256
- prevLayout: [25, 25, 25, 25],
1257
- trigger: "imperative-api",
1258
- })
1259
- ).toEqual([85, 5, 5, 5]);
1260
- });
1261
-
1262
- it("[1--,2,3,4]", () => {
1263
- expect(
1264
- adjustLayoutByDelta({
1265
- delta: -1,
1266
- initialLayout: [25, 25, 25, 25],
1267
- panelConstraints: [{}, {}, {}, {}],
1268
- pivotIndices: [0, 1],
1269
- prevLayout: [25, 25, 25, 25],
1270
- trigger: "imperative-api",
1271
- })
1272
- ).toEqual([24, 26, 25, 25]);
1273
- });
1274
-
1275
- it("[1--,2,3,4]", () => {
1276
- expect(
1277
- adjustLayoutByDelta({
1278
- delta: -25,
1279
- initialLayout: [25, 25, 25, 25],
1280
- panelConstraints: [{}, {}, {}, {}],
1281
- pivotIndices: [0, 1],
1282
- prevLayout: [25, 25, 25, 25],
1283
- trigger: "imperative-api",
1284
- })
1285
- ).toEqual([0, 50, 25, 25]);
1286
- });
1287
-
1288
- it("[1--,2,3,4]", () => {
1289
- expect(
1290
- adjustLayoutByDelta({
1291
- delta: -10,
1292
- initialLayout: [25, 25, 25, 25],
1293
- panelConstraints: [{ minSize: 20 }, {}, {}, {}],
1294
- pivotIndices: [0, 1],
1295
- prevLayout: [25, 25, 25, 25],
1296
- trigger: "imperative-api",
1297
- })
1298
- ).toEqual([20, 30, 25, 25]);
1299
- });
1300
-
1301
- it("[1--,2,3,4]", () => {
1302
- expect(
1303
- adjustLayoutByDelta({
1304
- delta: -25,
1305
- initialLayout: [25, 25, 25, 25],
1306
- panelConstraints: [{}, { maxSize: 35 }, {}, {}],
1307
- pivotIndices: [0, 1],
1308
- prevLayout: [25, 25, 25, 25],
1309
- trigger: "imperative-api",
1310
- })
1311
- ).toEqual([0, 35, 40, 25]);
1312
- });
1313
-
1314
- it("[1--,2,3,4]", () => {
1315
- expect(
1316
- adjustLayoutByDelta({
1317
- delta: -10,
1318
- initialLayout: [25, 25, 25, 25],
1319
- panelConstraints: [
1320
- {
1321
- collapsedSize: 5,
1322
- collapsible: true,
1323
- minSize: 20,
1324
- },
1325
- {},
1326
- {},
1327
- {},
1328
- ],
1329
- pivotIndices: [0, 1],
1330
- prevLayout: [25, 25, 25, 25],
1331
- trigger: "imperative-api",
1332
- })
1333
- ).toEqual([20, 30, 25, 25]);
1334
-
1335
- expect(
1336
- adjustLayoutByDelta({
1337
- delta: -15,
1338
- initialLayout: [25, 25, 25, 25],
1339
- panelConstraints: [
1340
- {
1341
- collapsedSize: 5,
1342
- collapsible: true,
1343
- minSize: 20,
1344
- },
1345
- {},
1346
- {},
1347
- {},
1348
- ],
1349
- pivotIndices: [0, 1],
1350
- prevLayout: [25, 25, 25, 25],
1351
- trigger: "imperative-api",
1352
- })
1353
- ).toEqual([5, 45, 25, 25]);
1354
- });
1355
-
1356
- it("[1--,2,3,4]", () => {
1357
- expect(
1358
- adjustLayoutByDelta({
1359
- delta: -10,
1360
- initialLayout: [25, 25, 25, 25],
1361
- panelConstraints: [
1362
- {
1363
- collapsedSize: 5,
1364
- collapsible: true,
1365
- minSize: 20,
1366
- },
1367
- { maxSize: 35 },
1368
- {},
1369
- {},
1370
- ],
1371
- pivotIndices: [0, 1],
1372
- prevLayout: [25, 25, 25, 25],
1373
- trigger: "imperative-api",
1374
- })
1375
- ).toEqual([20, 30, 25, 25]);
1376
-
1377
- expect(
1378
- adjustLayoutByDelta({
1379
- delta: -15,
1380
- initialLayout: [25, 25, 25, 25],
1381
- panelConstraints: [
1382
- {
1383
- collapsedSize: 5,
1384
- collapsible: true,
1385
- minSize: 20,
1386
- },
1387
- { maxSize: 35 },
1388
- {},
1389
- {},
1390
- ],
1391
- pivotIndices: [0, 1],
1392
- prevLayout: [25, 25, 25, 25],
1393
- trigger: "imperative-api",
1394
- })
1395
- ).toEqual([5, 35, 35, 25]);
1396
- });
1397
-
1398
- it("[1--,2,3,4]", () => {
1399
- // This might be controversial behavior;
1400
- // Perhaps the 1st panel should collapse
1401
- // rather than being blocked by the max size constraints of the 2nd panel
1402
- // since the 3rd panel has room to grow still
1403
- //
1404
- // An alternate layout result might be: [5, 30, 40, 25]
1405
- expect(
1406
- adjustLayoutByDelta({
1407
- delta: -10,
1408
- initialLayout: [25, 25, 25, 25],
1409
- panelConstraints: [
1410
- {
1411
- collapsedSize: 5,
1412
- collapsible: true,
1413
- minSize: 20,
1414
- },
1415
- { maxSize: 30 },
1416
- {},
1417
- {},
1418
- ],
1419
- pivotIndices: [0, 1],
1420
- prevLayout: [25, 25, 25, 25],
1421
- trigger: "imperative-api",
1422
- })
1423
- ).toEqual([20, 30, 25, 25]);
1424
- });
1425
-
1426
- it("[1--,2,3,4]", () => {
1427
- // This might be controversial behavior;
1428
- // Perhaps the 1st panel should collapse
1429
- // rather than being blocked by the max size constraints of the 2nd panel
1430
- // since the 3rd panel has room to grow still
1431
- //
1432
- // An alternate layout result might be: [5, 30, 35, 30]
1433
- expect(
1434
- adjustLayoutByDelta({
1435
- delta: -10,
1436
- initialLayout: [25, 25, 25, 25],
1437
- panelConstraints: [
1438
- {
1439
- collapsedSize: 5,
1440
- collapsible: true,
1441
- minSize: 20,
1442
- },
1443
- { maxSize: 30 },
1444
- { maxSize: 35 },
1445
- {},
1446
- ],
1447
- pivotIndices: [0, 1],
1448
- prevLayout: [25, 25, 25, 25],
1449
- trigger: "imperative-api",
1450
- })
1451
- ).toEqual([20, 30, 25, 25]);
1452
- });
1453
-
1454
- // Edge case (issues/210)
1455
- it("[1--,2,3,4]", () => {
1456
- // If the size doesn't drop below the halfway point, the panel should not collapse
1457
- expect(
1458
- adjustLayoutByDelta({
1459
- delta: -10,
1460
- initialLayout: [25, 25, 25, 25],
1461
- panelConstraints: [
1462
- {
1463
- collapsedSize: 5,
1464
- collapsible: true,
1465
- minSize: 20,
1466
- },
1467
- { maxSize: 35 },
1468
- { maxSize: 35 },
1469
- { maxSize: 35 },
1470
- ],
1471
- pivotIndices: [0, 1],
1472
- prevLayout: [25, 25, 25, 25],
1473
- trigger: "imperative-api",
1474
- })
1475
- ).toEqual([20, 30, 25, 25]);
1476
-
1477
- // If the size drops below the halfway point, the panel should collapse
1478
- // In this case it needs to add sizes to multiple other panels in order to collapse
1479
- // because the nearest neighbor panel's max size constraints won't allow it to expand to cover all of the difference
1480
- expect(
1481
- adjustLayoutByDelta({
1482
- delta: -20,
1483
- initialLayout: [25, 25, 25, 25],
1484
- panelConstraints: [
1485
- {
1486
- collapsedSize: 5,
1487
- collapsible: true,
1488
- minSize: 20,
1489
- },
1490
- { maxSize: 35 },
1491
- { maxSize: 35 },
1492
- { maxSize: 35 },
1493
- ],
1494
- pivotIndices: [0, 1],
1495
- prevLayout: [25, 25, 25, 25],
1496
- trigger: "imperative-api",
1497
- })
1498
- ).toEqual([5, 35, 35, 25]);
1499
- });
1500
-
1501
- it("[1,2++,3,4]", () => {
1502
- expect(
1503
- adjustLayoutByDelta({
1504
- delta: 10,
1505
- initialLayout: [25, 25, 25, 25],
1506
- panelConstraints: [{}, {}, {}, {}],
1507
- pivotIndices: [1, 2],
1508
- prevLayout: [25, 25, 25, 25],
1509
- trigger: "imperative-api",
1510
- })
1511
- ).toEqual([25, 35, 15, 25]);
1512
- });
1513
-
1514
- it("[1,2++,3,4]", () => {
1515
- expect(
1516
- adjustLayoutByDelta({
1517
- delta: 30,
1518
- initialLayout: [25, 25, 25, 25],
1519
- panelConstraints: [{}, {}, {}, {}],
1520
- pivotIndices: [1, 2],
1521
- prevLayout: [25, 25, 25, 25],
1522
- trigger: "imperative-api",
1523
- })
1524
- ).toEqual([25, 55, 0, 20]);
1525
- });
1526
-
1527
- it("[1,2++,3,4]", () => {
1528
- expect(
1529
- adjustLayoutByDelta({
1530
- delta: 50,
1531
- initialLayout: [25, 25, 25, 25],
1532
- panelConstraints: [{}, {}, {}, {}],
1533
- pivotIndices: [1, 2],
1534
- prevLayout: [25, 25, 25, 25],
1535
- trigger: "imperative-api",
1536
- })
1537
- ).toEqual([25, 75, 0, 0]);
1538
- });
1539
-
1540
- it("[1,2++,3,4]", () => {
1541
- expect(
1542
- adjustLayoutByDelta({
1543
- delta: 50,
1544
- initialLayout: [25, 25, 25, 25],
1545
- panelConstraints: [{}, { maxSize: 35 }, {}, {}],
1546
- pivotIndices: [1, 2],
1547
- prevLayout: [25, 25, 25, 25],
1548
- trigger: "imperative-api",
1549
- })
1550
- ).toEqual([65, 35, 0, 0]);
1551
- });
1552
-
1553
- it("[1,2++,3,4]", () => {
1554
- expect(
1555
- adjustLayoutByDelta({
1556
- delta: 50,
1557
- initialLayout: [25, 25, 25, 25],
1558
- panelConstraints: [{}, {}, { minSize: 20 }, {}],
1559
- pivotIndices: [1, 2],
1560
- prevLayout: [25, 25, 25, 25],
1561
- trigger: "imperative-api",
1562
- })
1563
- ).toEqual([25, 55, 20, 0]);
1564
- });
1565
-
1566
- it("[1,2++,3,4]", () => {
1567
- expect(
1568
- adjustLayoutByDelta({
1569
- delta: 10,
1570
- initialLayout: [25, 25, 25, 25],
1571
- panelConstraints: [
1572
- {},
1573
- {},
1574
- {},
1575
- {
1576
- collapsedSize: 5,
1577
- collapsible: true,
1578
- minSize: 10,
1579
- },
1580
- ],
1581
- pivotIndices: [1, 2],
1582
- prevLayout: [25, 25, 25, 25],
1583
- trigger: "imperative-api",
1584
- })
1585
- ).toEqual([25, 35, 15, 25]);
1586
- });
1587
-
1588
- it("[1,2++,3,4]", () => {
1589
- expect(
1590
- adjustLayoutByDelta({
1591
- delta: 30,
1592
- initialLayout: [25, 25, 25, 25],
1593
- panelConstraints: [
1594
- {},
1595
- {},
1596
- {
1597
- collapsedSize: 5,
1598
- collapsible: true,
1599
- minSize: 10,
1600
- },
1601
- {},
1602
- ],
1603
- pivotIndices: [1, 2],
1604
- prevLayout: [25, 25, 25, 25],
1605
- trigger: "imperative-api",
1606
- })
1607
- ).toEqual([25, 55, 5, 15]);
1608
- });
1609
-
1610
- it("[1,2++,3,4]", () => {
1611
- expect(
1612
- adjustLayoutByDelta({
1613
- delta: 50,
1614
- initialLayout: [25, 25, 25, 25],
1615
- panelConstraints: [
1616
- {},
1617
- {},
1618
- {
1619
- collapsedSize: 5,
1620
- collapsible: true,
1621
- minSize: 10,
1622
- },
1623
- { minSize: 10 },
1624
- ],
1625
- pivotIndices: [1, 2],
1626
- prevLayout: [25, 25, 25, 25],
1627
- trigger: "imperative-api",
1628
- })
1629
- ).toEqual([25, 60, 5, 10]);
1630
- });
1631
-
1632
- it("[1,2--,3,4]", () => {
1633
- expect(
1634
- adjustLayoutByDelta({
1635
- delta: -25,
1636
- initialLayout: [25, 25, 25, 25],
1637
- panelConstraints: [{}, {}, {}, {}],
1638
- pivotIndices: [1, 2],
1639
- prevLayout: [25, 25, 25, 25],
1640
- trigger: "imperative-api",
1641
- })
1642
- ).toEqual([25, 0, 50, 25]);
1643
- });
1644
-
1645
- it("[1,2--,3,4]", () => {
1646
- expect(
1647
- adjustLayoutByDelta({
1648
- delta: -50,
1649
- initialLayout: [25, 25, 25, 25],
1650
- panelConstraints: [{}, {}, {}, {}],
1651
- pivotIndices: [1, 2],
1652
- prevLayout: [25, 25, 25, 25],
1653
- trigger: "imperative-api",
1654
- })
1655
- ).toEqual([0, 0, 75, 25]);
1656
- });
1657
-
1658
- it("[1,2--,3,4]", () => {
1659
- expect(
1660
- adjustLayoutByDelta({
1661
- delta: -50,
1662
- initialLayout: [25, 25, 25, 25],
1663
- panelConstraints: [{}, { minSize: 20 }, {}, {}],
1664
- pivotIndices: [1, 2],
1665
- prevLayout: [25, 25, 25, 25],
1666
- trigger: "imperative-api",
1667
- })
1668
- ).toEqual([0, 20, 55, 25]);
1669
- });
1670
-
1671
- it("[1,2--,3,4]", () => {
1672
- expect(
1673
- adjustLayoutByDelta({
1674
- delta: -50,
1675
- initialLayout: [25, 25, 25, 25],
1676
- panelConstraints: [{ minSize: 20 }, {}, {}, {}],
1677
- pivotIndices: [1, 2],
1678
- prevLayout: [25, 25, 25, 25],
1679
- trigger: "imperative-api",
1680
- })
1681
- ).toEqual([20, 0, 55, 25]);
1682
- });
1683
-
1684
- it("[1,2--,3,4]", () => {
1685
- expect(
1686
- adjustLayoutByDelta({
1687
- delta: -50,
1688
- initialLayout: [25, 25, 25, 25],
1689
- panelConstraints: [{ minSize: 20 }, { minSize: 20 }, {}, {}],
1690
- pivotIndices: [1, 2],
1691
- prevLayout: [25, 25, 25, 25],
1692
- trigger: "imperative-api",
1693
- })
1694
- ).toEqual([20, 20, 35, 25]);
1695
- });
1696
-
1697
- it("[1,2--,3,4]", () => {
1698
- expect(
1699
- adjustLayoutByDelta({
1700
- delta: -5,
1701
- initialLayout: [25, 25, 25, 25],
1702
- panelConstraints: [
1703
- {
1704
- collapsedSize: 5,
1705
- collapsible: true,
1706
- minSize: 20,
1707
- },
1708
- {},
1709
- {},
1710
- {},
1711
- ],
1712
- pivotIndices: [1, 2],
1713
- prevLayout: [25, 25, 25, 25],
1714
- trigger: "imperative-api",
1715
- })
1716
- ).toEqual([25, 20, 30, 25]);
1717
- });
1718
-
1719
- it("[1,2--,3,4]", () => {
1720
- expect(
1721
- adjustLayoutByDelta({
1722
- delta: -50,
1723
- initialLayout: [25, 25, 25, 25],
1724
- panelConstraints: [
1725
- {
1726
- collapsedSize: 5,
1727
- collapsible: true,
1728
- minSize: 20,
1729
- },
1730
- {},
1731
- {},
1732
- {},
1733
- ],
1734
- pivotIndices: [1, 2],
1735
- prevLayout: [25, 25, 25, 25],
1736
- trigger: "imperative-api",
1737
- })
1738
- ).toEqual([5, 0, 70, 25]);
1739
- });
1740
-
1741
- it("[1,2--,3,4]", () => {
1742
- expect(
1743
- adjustLayoutByDelta({
1744
- delta: -50,
1745
- initialLayout: [25, 25, 25, 25],
1746
- panelConstraints: [
1747
- {},
1748
- {
1749
- collapsedSize: 5,
1750
- collapsible: true,
1751
- minSize: 20,
1752
- },
1753
- {},
1754
- {},
1755
- ],
1756
- pivotIndices: [1, 2],
1757
- prevLayout: [25, 25, 25, 25],
1758
- trigger: "imperative-api",
1759
- })
1760
- ).toEqual([0, 5, 70, 25]);
1761
- });
1762
-
1763
- it("[1,2,3++,4]", () => {
1764
- expect(
1765
- adjustLayoutByDelta({
1766
- delta: 10,
1767
- initialLayout: [25, 25, 25, 25],
1768
- panelConstraints: [{}, {}, {}, {}],
1769
- pivotIndices: [2, 3],
1770
- prevLayout: [25, 25, 25, 25],
1771
- trigger: "imperative-api",
1772
- })
1773
- ).toEqual([25, 25, 35, 15]);
1774
- });
1775
-
1776
- it("[1,2,3++,4]", () => {
1777
- expect(
1778
- adjustLayoutByDelta({
1779
- delta: 30,
1780
- initialLayout: [25, 25, 25, 25],
1781
- panelConstraints: [{}, {}, {}, {}],
1782
- pivotIndices: [2, 3],
1783
- prevLayout: [25, 25, 25, 25],
1784
- trigger: "imperative-api",
1785
- })
1786
- ).toEqual([25, 25, 50, 0]);
1787
- });
1788
-
1789
- it("[1,2,3++,4]", () => {
1790
- expect(
1791
- adjustLayoutByDelta({
1792
- delta: 30,
1793
- initialLayout: [25, 25, 25, 25],
1794
- panelConstraints: [{}, {}, { maxSize: 40 }, {}],
1795
- pivotIndices: [2, 3],
1796
- prevLayout: [25, 25, 25, 25],
1797
- trigger: "imperative-api",
1798
- })
1799
- ).toEqual([25, 35, 40, 0]);
1800
- });
1801
-
1802
- it("[1,2,3++,4]", () => {
1803
- expect(
1804
- adjustLayoutByDelta({
1805
- delta: 30,
1806
- initialLayout: [25, 25, 25, 25],
1807
- panelConstraints: [{}, {}, {}, { minSize: 10 }],
1808
- pivotIndices: [2, 3],
1809
- prevLayout: [25, 25, 25, 25],
1810
- trigger: "imperative-api",
1811
- })
1812
- ).toEqual([25, 25, 40, 10]);
1813
- });
1814
-
1815
- it("[1,2,3++,4]", () => {
1816
- expect(
1817
- adjustLayoutByDelta({
1818
- delta: 5,
1819
- initialLayout: [25, 25, 25, 25],
1820
- panelConstraints: [
1821
- {},
1822
- {},
1823
- {},
1824
- {
1825
- collapsedSize: 5,
1826
- collapsible: true,
1827
- minSize: 20,
1828
- },
1829
- ],
1830
- pivotIndices: [2, 3],
1831
- prevLayout: [25, 25, 25, 25],
1832
- trigger: "imperative-api",
1833
- })
1834
- ).toEqual([25, 25, 30, 20]);
1835
- });
1836
-
1837
- it("[1,2,3++,4]", () => {
1838
- expect(
1839
- adjustLayoutByDelta({
1840
- delta: 50,
1841
- initialLayout: [25, 25, 25, 25],
1842
- panelConstraints: [
1843
- {},
1844
- {},
1845
- {},
1846
- {
1847
- collapsedSize: 5,
1848
- collapsible: true,
1849
- minSize: 20,
1850
- },
1851
- ],
1852
- pivotIndices: [2, 3],
1853
- prevLayout: [25, 25, 25, 25],
1854
- trigger: "imperative-api",
1855
- })
1856
- ).toEqual([25, 25, 45, 5]);
1857
- });
1858
-
1859
- it("[1,2,3--,4]", () => {
1860
- expect(
1861
- adjustLayoutByDelta({
1862
- delta: -10,
1863
- initialLayout: [25, 25, 25, 25],
1864
- panelConstraints: [{}, {}, {}, {}],
1865
- pivotIndices: [2, 3],
1866
- prevLayout: [25, 25, 25, 25],
1867
- trigger: "imperative-api",
1868
- })
1869
- ).toEqual([25, 25, 15, 35]);
1870
- });
1871
-
1872
- it("[1,2,3--,4]", () => {
1873
- expect(
1874
- adjustLayoutByDelta({
1875
- delta: -40,
1876
- initialLayout: [25, 25, 25, 25],
1877
- panelConstraints: [{}, {}, {}, {}],
1878
- pivotIndices: [2, 3],
1879
- prevLayout: [25, 25, 25, 25],
1880
- trigger: "imperative-api",
1881
- })
1882
- ).toEqual([25, 10, 0, 65]);
1883
- });
1884
-
1885
- it("[1,2,3--,4]", () => {
1886
- expect(
1887
- adjustLayoutByDelta({
1888
- delta: -100,
1889
- initialLayout: [25, 25, 25, 25],
1890
- panelConstraints: [{}, {}, {}, {}],
1891
- pivotIndices: [2, 3],
1892
- prevLayout: [25, 25, 25, 25],
1893
- trigger: "imperative-api",
1894
- })
1895
- ).toEqual([0, 0, 0, 100]);
1896
- });
1897
-
1898
- it("[1,2,3--,4]", () => {
1899
- expect(
1900
- adjustLayoutByDelta({
1901
- delta: -50,
1902
- initialLayout: [25, 25, 25, 25],
1903
- panelConstraints: [
1904
- { minSize: 10 },
1905
- { minSize: 10 },
1906
- { minSize: 10 },
1907
- {},
1908
- ],
1909
- pivotIndices: [2, 3],
1910
- prevLayout: [25, 25, 25, 25],
1911
- trigger: "imperative-api",
1912
- })
1913
- ).toEqual([10, 10, 10, 70]);
1914
- });
1915
-
1916
- it("[1,2,3--,4]", () => {
1917
- expect(
1918
- adjustLayoutByDelta({
1919
- delta: -50,
1920
- initialLayout: [25, 25, 25, 25],
1921
- panelConstraints: [{}, {}, {}, { maxSize: 40 }],
1922
- pivotIndices: [2, 3],
1923
- prevLayout: [25, 25, 25, 25],
1924
- trigger: "imperative-api",
1925
- })
1926
- ).toEqual([25, 25, 10, 40]);
1927
- });
1928
-
1929
- it("[1,2,3--,4]", () => {
1930
- expect(
1931
- adjustLayoutByDelta({
1932
- delta: -50,
1933
- initialLayout: [25, 25, 25, 25],
1934
- panelConstraints: [{}, { minSize: 5 }, {}, {}],
1935
- pivotIndices: [2, 3],
1936
- prevLayout: [25, 25, 25, 25],
1937
- trigger: "imperative-api",
1938
- })
1939
- ).toEqual([20, 5, 0, 75]);
1940
- });
1941
-
1942
- it("[1,2,3--,4]", () => {
1943
- expect(
1944
- adjustLayoutByDelta({
1945
- delta: -100,
1946
- initialLayout: [25, 25, 25, 25],
1947
- panelConstraints: [
1948
- {
1949
- collapsedSize: 5,
1950
- collapsible: true,
1951
- minSize: 20,
1952
- },
1953
- {
1954
- collapsedSize: 5,
1955
- collapsible: true,
1956
- minSize: 20,
1957
- },
1958
- {
1959
- collapsedSize: 5,
1960
- collapsible: true,
1961
- minSize: 20,
1962
- },
1963
- {},
1964
- ],
1965
- pivotIndices: [2, 3],
1966
- prevLayout: [25, 25, 25, 25],
1967
- trigger: "imperative-api",
1968
- })
1969
- ).toEqual([5, 5, 5, 85]);
1970
- });
1971
-
1972
- it("[1,2,3--,4]", () => {
1973
- expect(
1974
- adjustLayoutByDelta({
1975
- delta: -100,
1976
- initialLayout: [25, 25, 25, 25],
1977
- panelConstraints: [
1978
- {
1979
- minSize: 20,
1980
- },
1981
- {
1982
- collapsedSize: 5,
1983
- collapsible: true,
1984
- minSize: 20,
1985
- },
1986
- {
1987
- minSize: 20,
1988
- },
1989
- {},
1990
- ],
1991
- pivotIndices: [2, 3],
1992
- prevLayout: [25, 25, 25, 25],
1993
- trigger: "imperative-api",
1994
- })
1995
- ).toEqual([20, 5, 20, 55]);
1996
- });
1997
-
1998
- describe("invalid layouts", () => {
1999
- it("should ignore changes that violate max or min size constraints", () => {
2000
- expect(
2001
- adjustLayoutByDelta({
2002
- delta: 1,
2003
- initialLayout: [50, 50],
2004
- panelConstraints: [{ maxSize: 50 }, {}],
2005
- pivotIndices: [0, 1],
2006
- prevLayout: [50, 50],
2007
- trigger: "imperative-api",
2008
- })
2009
- ).toEqual([50, 50]);
2010
-
2011
- expect(
2012
- adjustLayoutByDelta({
2013
- delta: 1,
2014
- initialLayout: [50, 50],
2015
- panelConstraints: [{}, { minSize: 50 }],
2016
- pivotIndices: [0, 1],
2017
- prevLayout: [50, 50],
2018
- trigger: "imperative-api",
2019
- })
2020
- ).toEqual([50, 50]);
2021
- });
2022
- });
2023
-
2024
- // Edge case (issues/311)
2025
- it("should fallback to the previous layout if an intermediate layout is invalid", () => {
2026
- expect(
2027
- adjustLayoutByDelta({
2028
- delta: 1,
2029
- initialLayout: [5, 15, 40, 40],
2030
- panelConstraints: [
2031
- { collapsedSize: 5, collapsible: true, minSize: 15, maxSize: 20 },
2032
- { minSize: 15, maxSize: 30 },
2033
- { minSize: 30 },
2034
- { minSize: 20, maxSize: 40 },
2035
- ],
2036
- pivotIndices: [0, 1],
2037
- prevLayout: [5, 30, 30, 36],
2038
- trigger: "imperative-api",
2039
- })
2040
- ).toEqual([5, 30, 30, 36]);
2041
- });
2042
-
2043
- // Edge case (issues/311)
2044
- it("should (re)collapse an already-collapsed panel that's been expanded and (re)collapsed as part of a single drag", () => {
2045
- expect(
2046
- adjustLayoutByDelta({
2047
- delta: -3,
2048
- initialLayout: [5, 15, 40, 40],
2049
- panelConstraints: [
2050
- { collapsedSize: 5, collapsible: true, minSize: 15, maxSize: 20 },
2051
- { minSize: 15, maxSize: 30 },
2052
- { minSize: 30 },
2053
- { minSize: 20, maxSize: 40 },
2054
- ],
2055
- pivotIndices: [0, 1],
2056
- prevLayout: [15, 15, 30, 36],
2057
- trigger: "imperative-api",
2058
- })
2059
- ).toEqual([5, 15, 40, 40]);
2060
- });
2061
- });