react-resizable-panels 1.0.9 → 1.0.10
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 +4 -0
- package/README.md +1 -1
- package/dist/react-resizable-panels.browser.cjs.js +5 -7
- package/dist/react-resizable-panels.browser.development.cjs.js +5 -7
- package/dist/react-resizable-panels.browser.development.esm.js +5 -7
- package/dist/react-resizable-panels.browser.esm.js +5 -7
- package/dist/react-resizable-panels.cjs.js +5 -7
- package/dist/react-resizable-panels.development.cjs.js +5 -7
- package/dist/react-resizable-panels.development.esm.js +5 -7
- package/dist/react-resizable-panels.development.node.cjs.js +5 -7
- package/dist/react-resizable-panels.development.node.esm.js +5 -7
- package/dist/react-resizable-panels.esm.js +5 -7
- package/dist/react-resizable-panels.node.cjs.js +5 -7
- package/dist/react-resizable-panels.node.esm.js +5 -7
- package/package.json +1 -1
- package/src/Panel.test.tsx +52 -0
- package/src/PanelGroup.ts +5 -6
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -63,7 +63,7 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
|
|
|
63
63
|
| `maxSize` | `?number = 100` | Maximum allowable size of panel (numeric value between 1-100); defaults to `100` |
|
|
64
64
|
| `minSize` | `?number = 10` | Minimum allowable size of panel (numeric value between 1-100); defaults to `10` |
|
|
65
65
|
| `onCollapse` | `?() => void` | Called when panel is collapsed |
|
|
66
|
-
| `
|
|
66
|
+
| `onExpand` | `?() => void` | Called when panel is expanded |
|
|
67
67
|
| `onResize` | `?(size: number) => void` | Called when panel is resized; `size` parameter is a numeric value between 1-100. <sup>1</sup> |
|
|
68
68
|
| `order` | `?number` | Order of panel within group; required for groups with conditionally rendered panels |
|
|
69
69
|
| `style` | `?CSSProperties` | CSS style to attach to root element |
|
|
@@ -1562,15 +1562,11 @@ function PanelGroupWithForwardedRef({
|
|
|
1562
1562
|
} = eagerValuesRef.current;
|
|
1563
1563
|
const {
|
|
1564
1564
|
collapsedSize: prevCollapsedSize = 0,
|
|
1565
|
-
collapsible: prevCollapsible
|
|
1566
|
-
defaultSize: prevDefaultSize,
|
|
1567
|
-
maxSize: prevMaxSize = 100,
|
|
1568
|
-
minSize: prevMinSize = 0
|
|
1565
|
+
collapsible: prevCollapsible
|
|
1569
1566
|
} = prevConstraints;
|
|
1570
1567
|
const {
|
|
1571
1568
|
collapsedSize: nextCollapsedSize = 0,
|
|
1572
1569
|
collapsible: nextCollapsible,
|
|
1573
|
-
defaultSize: nextDefaultSize,
|
|
1574
1570
|
maxSize: nextMaxSize = 100,
|
|
1575
1571
|
minSize: nextMinSize = 0
|
|
1576
1572
|
} = panelData.constraints;
|
|
@@ -1578,8 +1574,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1578
1574
|
panelSize: prevPanelSize
|
|
1579
1575
|
} = panelDataHelper(panelDataArray, panelData, layout);
|
|
1580
1576
|
assert(prevPanelSize != null);
|
|
1581
|
-
if (prevCollapsible && nextCollapsible &&
|
|
1582
|
-
|
|
1577
|
+
if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
|
|
1578
|
+
if (prevCollapsedSize !== nextCollapsedSize) {
|
|
1579
|
+
resizePanel(panelData, nextCollapsedSize);
|
|
1580
|
+
}
|
|
1583
1581
|
} else if (prevPanelSize < nextMinSize) {
|
|
1584
1582
|
resizePanel(panelData, nextMinSize);
|
|
1585
1583
|
} else if (prevPanelSize > nextMaxSize) {
|
|
@@ -1668,15 +1668,11 @@ function PanelGroupWithForwardedRef({
|
|
|
1668
1668
|
} = eagerValuesRef.current;
|
|
1669
1669
|
const {
|
|
1670
1670
|
collapsedSize: prevCollapsedSize = 0,
|
|
1671
|
-
collapsible: prevCollapsible
|
|
1672
|
-
defaultSize: prevDefaultSize,
|
|
1673
|
-
maxSize: prevMaxSize = 100,
|
|
1674
|
-
minSize: prevMinSize = 0
|
|
1671
|
+
collapsible: prevCollapsible
|
|
1675
1672
|
} = prevConstraints;
|
|
1676
1673
|
const {
|
|
1677
1674
|
collapsedSize: nextCollapsedSize = 0,
|
|
1678
1675
|
collapsible: nextCollapsible,
|
|
1679
|
-
defaultSize: nextDefaultSize,
|
|
1680
1676
|
maxSize: nextMaxSize = 100,
|
|
1681
1677
|
minSize: nextMinSize = 0
|
|
1682
1678
|
} = panelData.constraints;
|
|
@@ -1684,8 +1680,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1684
1680
|
panelSize: prevPanelSize
|
|
1685
1681
|
} = panelDataHelper(panelDataArray, panelData, layout);
|
|
1686
1682
|
assert(prevPanelSize != null);
|
|
1687
|
-
if (prevCollapsible && nextCollapsible &&
|
|
1688
|
-
|
|
1683
|
+
if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
|
|
1684
|
+
if (prevCollapsedSize !== nextCollapsedSize) {
|
|
1685
|
+
resizePanel(panelData, nextCollapsedSize);
|
|
1686
|
+
}
|
|
1689
1687
|
} else if (prevPanelSize < nextMinSize) {
|
|
1690
1688
|
resizePanel(panelData, nextMinSize);
|
|
1691
1689
|
} else if (prevPanelSize > nextMaxSize) {
|
|
@@ -1644,15 +1644,11 @@ function PanelGroupWithForwardedRef({
|
|
|
1644
1644
|
} = eagerValuesRef.current;
|
|
1645
1645
|
const {
|
|
1646
1646
|
collapsedSize: prevCollapsedSize = 0,
|
|
1647
|
-
collapsible: prevCollapsible
|
|
1648
|
-
defaultSize: prevDefaultSize,
|
|
1649
|
-
maxSize: prevMaxSize = 100,
|
|
1650
|
-
minSize: prevMinSize = 0
|
|
1647
|
+
collapsible: prevCollapsible
|
|
1651
1648
|
} = prevConstraints;
|
|
1652
1649
|
const {
|
|
1653
1650
|
collapsedSize: nextCollapsedSize = 0,
|
|
1654
1651
|
collapsible: nextCollapsible,
|
|
1655
|
-
defaultSize: nextDefaultSize,
|
|
1656
1652
|
maxSize: nextMaxSize = 100,
|
|
1657
1653
|
minSize: nextMinSize = 0
|
|
1658
1654
|
} = panelData.constraints;
|
|
@@ -1660,8 +1656,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1660
1656
|
panelSize: prevPanelSize
|
|
1661
1657
|
} = panelDataHelper(panelDataArray, panelData, layout);
|
|
1662
1658
|
assert(prevPanelSize != null);
|
|
1663
|
-
if (prevCollapsible && nextCollapsible &&
|
|
1664
|
-
|
|
1659
|
+
if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
|
|
1660
|
+
if (prevCollapsedSize !== nextCollapsedSize) {
|
|
1661
|
+
resizePanel(panelData, nextCollapsedSize);
|
|
1662
|
+
}
|
|
1665
1663
|
} else if (prevPanelSize < nextMinSize) {
|
|
1666
1664
|
resizePanel(panelData, nextMinSize);
|
|
1667
1665
|
} else if (prevPanelSize > nextMaxSize) {
|
|
@@ -1538,15 +1538,11 @@ function PanelGroupWithForwardedRef({
|
|
|
1538
1538
|
} = eagerValuesRef.current;
|
|
1539
1539
|
const {
|
|
1540
1540
|
collapsedSize: prevCollapsedSize = 0,
|
|
1541
|
-
collapsible: prevCollapsible
|
|
1542
|
-
defaultSize: prevDefaultSize,
|
|
1543
|
-
maxSize: prevMaxSize = 100,
|
|
1544
|
-
minSize: prevMinSize = 0
|
|
1541
|
+
collapsible: prevCollapsible
|
|
1545
1542
|
} = prevConstraints;
|
|
1546
1543
|
const {
|
|
1547
1544
|
collapsedSize: nextCollapsedSize = 0,
|
|
1548
1545
|
collapsible: nextCollapsible,
|
|
1549
|
-
defaultSize: nextDefaultSize,
|
|
1550
1546
|
maxSize: nextMaxSize = 100,
|
|
1551
1547
|
minSize: nextMinSize = 0
|
|
1552
1548
|
} = panelData.constraints;
|
|
@@ -1554,8 +1550,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1554
1550
|
panelSize: prevPanelSize
|
|
1555
1551
|
} = panelDataHelper(panelDataArray, panelData, layout);
|
|
1556
1552
|
assert(prevPanelSize != null);
|
|
1557
|
-
if (prevCollapsible && nextCollapsible &&
|
|
1558
|
-
|
|
1553
|
+
if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
|
|
1554
|
+
if (prevCollapsedSize !== nextCollapsedSize) {
|
|
1555
|
+
resizePanel(panelData, nextCollapsedSize);
|
|
1556
|
+
}
|
|
1559
1557
|
} else if (prevPanelSize < nextMinSize) {
|
|
1560
1558
|
resizePanel(panelData, nextMinSize);
|
|
1561
1559
|
} else if (prevPanelSize > nextMaxSize) {
|
|
@@ -1564,15 +1564,11 @@ function PanelGroupWithForwardedRef({
|
|
|
1564
1564
|
} = eagerValuesRef.current;
|
|
1565
1565
|
const {
|
|
1566
1566
|
collapsedSize: prevCollapsedSize = 0,
|
|
1567
|
-
collapsible: prevCollapsible
|
|
1568
|
-
defaultSize: prevDefaultSize,
|
|
1569
|
-
maxSize: prevMaxSize = 100,
|
|
1570
|
-
minSize: prevMinSize = 0
|
|
1567
|
+
collapsible: prevCollapsible
|
|
1571
1568
|
} = prevConstraints;
|
|
1572
1569
|
const {
|
|
1573
1570
|
collapsedSize: nextCollapsedSize = 0,
|
|
1574
1571
|
collapsible: nextCollapsible,
|
|
1575
|
-
defaultSize: nextDefaultSize,
|
|
1576
1572
|
maxSize: nextMaxSize = 100,
|
|
1577
1573
|
minSize: nextMinSize = 0
|
|
1578
1574
|
} = panelData.constraints;
|
|
@@ -1580,8 +1576,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1580
1576
|
panelSize: prevPanelSize
|
|
1581
1577
|
} = panelDataHelper(panelDataArray, panelData, layout);
|
|
1582
1578
|
assert(prevPanelSize != null);
|
|
1583
|
-
if (prevCollapsible && nextCollapsible &&
|
|
1584
|
-
|
|
1579
|
+
if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
|
|
1580
|
+
if (prevCollapsedSize !== nextCollapsedSize) {
|
|
1581
|
+
resizePanel(panelData, nextCollapsedSize);
|
|
1582
|
+
}
|
|
1585
1583
|
} else if (prevPanelSize < nextMinSize) {
|
|
1586
1584
|
resizePanel(panelData, nextMinSize);
|
|
1587
1585
|
} else if (prevPanelSize > nextMaxSize) {
|
|
@@ -1675,15 +1675,11 @@ function PanelGroupWithForwardedRef({
|
|
|
1675
1675
|
} = eagerValuesRef.current;
|
|
1676
1676
|
const {
|
|
1677
1677
|
collapsedSize: prevCollapsedSize = 0,
|
|
1678
|
-
collapsible: prevCollapsible
|
|
1679
|
-
defaultSize: prevDefaultSize,
|
|
1680
|
-
maxSize: prevMaxSize = 100,
|
|
1681
|
-
minSize: prevMinSize = 0
|
|
1678
|
+
collapsible: prevCollapsible
|
|
1682
1679
|
} = prevConstraints;
|
|
1683
1680
|
const {
|
|
1684
1681
|
collapsedSize: nextCollapsedSize = 0,
|
|
1685
1682
|
collapsible: nextCollapsible,
|
|
1686
|
-
defaultSize: nextDefaultSize,
|
|
1687
1683
|
maxSize: nextMaxSize = 100,
|
|
1688
1684
|
minSize: nextMinSize = 0
|
|
1689
1685
|
} = panelData.constraints;
|
|
@@ -1691,8 +1687,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1691
1687
|
panelSize: prevPanelSize
|
|
1692
1688
|
} = panelDataHelper(panelDataArray, panelData, layout);
|
|
1693
1689
|
assert(prevPanelSize != null);
|
|
1694
|
-
if (prevCollapsible && nextCollapsible &&
|
|
1695
|
-
|
|
1690
|
+
if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
|
|
1691
|
+
if (prevCollapsedSize !== nextCollapsedSize) {
|
|
1692
|
+
resizePanel(panelData, nextCollapsedSize);
|
|
1693
|
+
}
|
|
1696
1694
|
} else if (prevPanelSize < nextMinSize) {
|
|
1697
1695
|
resizePanel(panelData, nextMinSize);
|
|
1698
1696
|
} else if (prevPanelSize > nextMaxSize) {
|
|
@@ -1651,15 +1651,11 @@ function PanelGroupWithForwardedRef({
|
|
|
1651
1651
|
} = eagerValuesRef.current;
|
|
1652
1652
|
const {
|
|
1653
1653
|
collapsedSize: prevCollapsedSize = 0,
|
|
1654
|
-
collapsible: prevCollapsible
|
|
1655
|
-
defaultSize: prevDefaultSize,
|
|
1656
|
-
maxSize: prevMaxSize = 100,
|
|
1657
|
-
minSize: prevMinSize = 0
|
|
1654
|
+
collapsible: prevCollapsible
|
|
1658
1655
|
} = prevConstraints;
|
|
1659
1656
|
const {
|
|
1660
1657
|
collapsedSize: nextCollapsedSize = 0,
|
|
1661
1658
|
collapsible: nextCollapsible,
|
|
1662
|
-
defaultSize: nextDefaultSize,
|
|
1663
1659
|
maxSize: nextMaxSize = 100,
|
|
1664
1660
|
minSize: nextMinSize = 0
|
|
1665
1661
|
} = panelData.constraints;
|
|
@@ -1667,8 +1663,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1667
1663
|
panelSize: prevPanelSize
|
|
1668
1664
|
} = panelDataHelper(panelDataArray, panelData, layout);
|
|
1669
1665
|
assert(prevPanelSize != null);
|
|
1670
|
-
if (prevCollapsible && nextCollapsible &&
|
|
1671
|
-
|
|
1666
|
+
if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
|
|
1667
|
+
if (prevCollapsedSize !== nextCollapsedSize) {
|
|
1668
|
+
resizePanel(panelData, nextCollapsedSize);
|
|
1669
|
+
}
|
|
1672
1670
|
} else if (prevPanelSize < nextMinSize) {
|
|
1673
1671
|
resizePanel(panelData, nextMinSize);
|
|
1674
1672
|
} else if (prevPanelSize > nextMaxSize) {
|
|
@@ -1452,15 +1452,11 @@ function PanelGroupWithForwardedRef({
|
|
|
1452
1452
|
} = eagerValuesRef.current;
|
|
1453
1453
|
const {
|
|
1454
1454
|
collapsedSize: prevCollapsedSize = 0,
|
|
1455
|
-
collapsible: prevCollapsible
|
|
1456
|
-
defaultSize: prevDefaultSize,
|
|
1457
|
-
maxSize: prevMaxSize = 100,
|
|
1458
|
-
minSize: prevMinSize = 0
|
|
1455
|
+
collapsible: prevCollapsible
|
|
1459
1456
|
} = prevConstraints;
|
|
1460
1457
|
const {
|
|
1461
1458
|
collapsedSize: nextCollapsedSize = 0,
|
|
1462
1459
|
collapsible: nextCollapsible,
|
|
1463
|
-
defaultSize: nextDefaultSize,
|
|
1464
1460
|
maxSize: nextMaxSize = 100,
|
|
1465
1461
|
minSize: nextMinSize = 0
|
|
1466
1462
|
} = panelData.constraints;
|
|
@@ -1468,8 +1464,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1468
1464
|
panelSize: prevPanelSize
|
|
1469
1465
|
} = panelDataHelper(panelDataArray, panelData, layout);
|
|
1470
1466
|
assert(prevPanelSize != null);
|
|
1471
|
-
if (prevCollapsible && nextCollapsible &&
|
|
1472
|
-
|
|
1467
|
+
if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
|
|
1468
|
+
if (prevCollapsedSize !== nextCollapsedSize) {
|
|
1469
|
+
resizePanel(panelData, nextCollapsedSize);
|
|
1470
|
+
}
|
|
1473
1471
|
} else if (prevPanelSize < nextMinSize) {
|
|
1474
1472
|
resizePanel(panelData, nextMinSize);
|
|
1475
1473
|
} else if (prevPanelSize > nextMaxSize) {
|
|
@@ -1428,15 +1428,11 @@ function PanelGroupWithForwardedRef({
|
|
|
1428
1428
|
} = eagerValuesRef.current;
|
|
1429
1429
|
const {
|
|
1430
1430
|
collapsedSize: prevCollapsedSize = 0,
|
|
1431
|
-
collapsible: prevCollapsible
|
|
1432
|
-
defaultSize: prevDefaultSize,
|
|
1433
|
-
maxSize: prevMaxSize = 100,
|
|
1434
|
-
minSize: prevMinSize = 0
|
|
1431
|
+
collapsible: prevCollapsible
|
|
1435
1432
|
} = prevConstraints;
|
|
1436
1433
|
const {
|
|
1437
1434
|
collapsedSize: nextCollapsedSize = 0,
|
|
1438
1435
|
collapsible: nextCollapsible,
|
|
1439
|
-
defaultSize: nextDefaultSize,
|
|
1440
1436
|
maxSize: nextMaxSize = 100,
|
|
1441
1437
|
minSize: nextMinSize = 0
|
|
1442
1438
|
} = panelData.constraints;
|
|
@@ -1444,8 +1440,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1444
1440
|
panelSize: prevPanelSize
|
|
1445
1441
|
} = panelDataHelper(panelDataArray, panelData, layout);
|
|
1446
1442
|
assert(prevPanelSize != null);
|
|
1447
|
-
if (prevCollapsible && nextCollapsible &&
|
|
1448
|
-
|
|
1443
|
+
if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
|
|
1444
|
+
if (prevCollapsedSize !== nextCollapsedSize) {
|
|
1445
|
+
resizePanel(panelData, nextCollapsedSize);
|
|
1446
|
+
}
|
|
1449
1447
|
} else if (prevPanelSize < nextMinSize) {
|
|
1450
1448
|
resizePanel(panelData, nextMinSize);
|
|
1451
1449
|
} else if (prevPanelSize > nextMaxSize) {
|
|
@@ -1540,15 +1540,11 @@ function PanelGroupWithForwardedRef({
|
|
|
1540
1540
|
} = eagerValuesRef.current;
|
|
1541
1541
|
const {
|
|
1542
1542
|
collapsedSize: prevCollapsedSize = 0,
|
|
1543
|
-
collapsible: prevCollapsible
|
|
1544
|
-
defaultSize: prevDefaultSize,
|
|
1545
|
-
maxSize: prevMaxSize = 100,
|
|
1546
|
-
minSize: prevMinSize = 0
|
|
1543
|
+
collapsible: prevCollapsible
|
|
1547
1544
|
} = prevConstraints;
|
|
1548
1545
|
const {
|
|
1549
1546
|
collapsedSize: nextCollapsedSize = 0,
|
|
1550
1547
|
collapsible: nextCollapsible,
|
|
1551
|
-
defaultSize: nextDefaultSize,
|
|
1552
1548
|
maxSize: nextMaxSize = 100,
|
|
1553
1549
|
minSize: nextMinSize = 0
|
|
1554
1550
|
} = panelData.constraints;
|
|
@@ -1556,8 +1552,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1556
1552
|
panelSize: prevPanelSize
|
|
1557
1553
|
} = panelDataHelper(panelDataArray, panelData, layout);
|
|
1558
1554
|
assert(prevPanelSize != null);
|
|
1559
|
-
if (prevCollapsible && nextCollapsible &&
|
|
1560
|
-
|
|
1555
|
+
if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
|
|
1556
|
+
if (prevCollapsedSize !== nextCollapsedSize) {
|
|
1557
|
+
resizePanel(panelData, nextCollapsedSize);
|
|
1558
|
+
}
|
|
1561
1559
|
} else if (prevPanelSize < nextMinSize) {
|
|
1562
1560
|
resizePanel(panelData, nextMinSize);
|
|
1563
1561
|
} else if (prevPanelSize > nextMaxSize) {
|
|
@@ -1351,15 +1351,11 @@ function PanelGroupWithForwardedRef({
|
|
|
1351
1351
|
} = eagerValuesRef.current;
|
|
1352
1352
|
const {
|
|
1353
1353
|
collapsedSize: prevCollapsedSize = 0,
|
|
1354
|
-
collapsible: prevCollapsible
|
|
1355
|
-
defaultSize: prevDefaultSize,
|
|
1356
|
-
maxSize: prevMaxSize = 100,
|
|
1357
|
-
minSize: prevMinSize = 0
|
|
1354
|
+
collapsible: prevCollapsible
|
|
1358
1355
|
} = prevConstraints;
|
|
1359
1356
|
const {
|
|
1360
1357
|
collapsedSize: nextCollapsedSize = 0,
|
|
1361
1358
|
collapsible: nextCollapsible,
|
|
1362
|
-
defaultSize: nextDefaultSize,
|
|
1363
1359
|
maxSize: nextMaxSize = 100,
|
|
1364
1360
|
minSize: nextMinSize = 0
|
|
1365
1361
|
} = panelData.constraints;
|
|
@@ -1367,8 +1363,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1367
1363
|
panelSize: prevPanelSize
|
|
1368
1364
|
} = panelDataHelper(panelDataArray, panelData, layout);
|
|
1369
1365
|
assert(prevPanelSize != null);
|
|
1370
|
-
if (prevCollapsible && nextCollapsible &&
|
|
1371
|
-
|
|
1366
|
+
if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
|
|
1367
|
+
if (prevCollapsedSize !== nextCollapsedSize) {
|
|
1368
|
+
resizePanel(panelData, nextCollapsedSize);
|
|
1369
|
+
}
|
|
1372
1370
|
} else if (prevPanelSize < nextMinSize) {
|
|
1373
1371
|
resizePanel(panelData, nextMinSize);
|
|
1374
1372
|
} else if (prevPanelSize > nextMaxSize) {
|
|
@@ -1327,15 +1327,11 @@ function PanelGroupWithForwardedRef({
|
|
|
1327
1327
|
} = eagerValuesRef.current;
|
|
1328
1328
|
const {
|
|
1329
1329
|
collapsedSize: prevCollapsedSize = 0,
|
|
1330
|
-
collapsible: prevCollapsible
|
|
1331
|
-
defaultSize: prevDefaultSize,
|
|
1332
|
-
maxSize: prevMaxSize = 100,
|
|
1333
|
-
minSize: prevMinSize = 0
|
|
1330
|
+
collapsible: prevCollapsible
|
|
1334
1331
|
} = prevConstraints;
|
|
1335
1332
|
const {
|
|
1336
1333
|
collapsedSize: nextCollapsedSize = 0,
|
|
1337
1334
|
collapsible: nextCollapsible,
|
|
1338
|
-
defaultSize: nextDefaultSize,
|
|
1339
1335
|
maxSize: nextMaxSize = 100,
|
|
1340
1336
|
minSize: nextMinSize = 0
|
|
1341
1337
|
} = panelData.constraints;
|
|
@@ -1343,8 +1339,10 @@ function PanelGroupWithForwardedRef({
|
|
|
1343
1339
|
panelSize: prevPanelSize
|
|
1344
1340
|
} = panelDataHelper(panelDataArray, panelData, layout);
|
|
1345
1341
|
assert(prevPanelSize != null);
|
|
1346
|
-
if (prevCollapsible && nextCollapsible &&
|
|
1347
|
-
|
|
1342
|
+
if (prevCollapsible && nextCollapsible && prevPanelSize === prevCollapsedSize) {
|
|
1343
|
+
if (prevCollapsedSize !== nextCollapsedSize) {
|
|
1344
|
+
resizePanel(panelData, nextCollapsedSize);
|
|
1345
|
+
}
|
|
1348
1346
|
} else if (prevPanelSize < nextMinSize) {
|
|
1349
1347
|
resizePanel(panelData, nextMinSize);
|
|
1350
1348
|
} else if (prevPanelSize > nextMaxSize) {
|
package/package.json
CHANGED
package/src/Panel.test.tsx
CHANGED
|
@@ -319,6 +319,58 @@ describe("PanelGroup", () => {
|
|
|
319
319
|
expect(rightElement.getAttribute("data-panel-size")).toBe("5.0");
|
|
320
320
|
});
|
|
321
321
|
|
|
322
|
+
it("it should not expand a collapsed panel if other constraints change", () => {
|
|
323
|
+
act(() => {
|
|
324
|
+
root.render(
|
|
325
|
+
<PanelGroup direction="horizontal">
|
|
326
|
+
<Panel
|
|
327
|
+
id="left"
|
|
328
|
+
collapsedSize={10}
|
|
329
|
+
collapsible
|
|
330
|
+
defaultSize={10}
|
|
331
|
+
minSize={25}
|
|
332
|
+
/>
|
|
333
|
+
<PanelResizeHandle />
|
|
334
|
+
<Panel id="middle" />
|
|
335
|
+
<PanelResizeHandle />
|
|
336
|
+
<Panel
|
|
337
|
+
id="right"
|
|
338
|
+
collapsedSize={10}
|
|
339
|
+
collapsible
|
|
340
|
+
defaultSize={10}
|
|
341
|
+
minSize={25}
|
|
342
|
+
/>
|
|
343
|
+
</PanelGroup>
|
|
344
|
+
);
|
|
345
|
+
});
|
|
346
|
+
|
|
347
|
+
let leftElement = getPanelElement("left", container);
|
|
348
|
+
let middleElement = getPanelElement("middle", container);
|
|
349
|
+
let rightElement = getPanelElement("right", container);
|
|
350
|
+
assert(leftElement);
|
|
351
|
+
assert(middleElement);
|
|
352
|
+
assert(rightElement);
|
|
353
|
+
expect(leftElement.getAttribute("data-panel-size")).toBe("10.0");
|
|
354
|
+
expect(middleElement.getAttribute("data-panel-size")).toBe("80.0");
|
|
355
|
+
expect(rightElement.getAttribute("data-panel-size")).toBe("10.0");
|
|
356
|
+
|
|
357
|
+
act(() => {
|
|
358
|
+
root.render(
|
|
359
|
+
<PanelGroup direction="horizontal">
|
|
360
|
+
<Panel id="left" collapsedSize={10} collapsible minSize={20} />
|
|
361
|
+
<PanelResizeHandle />
|
|
362
|
+
<Panel id="middle" />
|
|
363
|
+
<PanelResizeHandle />
|
|
364
|
+
<Panel id="right" collapsedSize={10} collapsible minSize={20} />
|
|
365
|
+
</PanelGroup>
|
|
366
|
+
);
|
|
367
|
+
});
|
|
368
|
+
|
|
369
|
+
expect(leftElement.getAttribute("data-panel-size")).toBe("10.0");
|
|
370
|
+
expect(middleElement.getAttribute("data-panel-size")).toBe("80.0");
|
|
371
|
+
expect(rightElement.getAttribute("data-panel-size")).toBe("10.0");
|
|
372
|
+
});
|
|
373
|
+
|
|
322
374
|
it("should resize a panel if the minSize prop changes", () => {
|
|
323
375
|
act(() => {
|
|
324
376
|
root.render(
|
package/src/PanelGroup.ts
CHANGED
|
@@ -726,15 +726,11 @@ function PanelGroupWithForwardedRef({
|
|
|
726
726
|
const {
|
|
727
727
|
collapsedSize: prevCollapsedSize = 0,
|
|
728
728
|
collapsible: prevCollapsible,
|
|
729
|
-
defaultSize: prevDefaultSize,
|
|
730
|
-
maxSize: prevMaxSize = 100,
|
|
731
|
-
minSize: prevMinSize = 0,
|
|
732
729
|
} = prevConstraints;
|
|
733
730
|
|
|
734
731
|
const {
|
|
735
732
|
collapsedSize: nextCollapsedSize = 0,
|
|
736
733
|
collapsible: nextCollapsible,
|
|
737
|
-
defaultSize: nextDefaultSize,
|
|
738
734
|
maxSize: nextMaxSize = 100,
|
|
739
735
|
minSize: nextMinSize = 0,
|
|
740
736
|
} = panelData.constraints;
|
|
@@ -749,10 +745,13 @@ function PanelGroupWithForwardedRef({
|
|
|
749
745
|
if (
|
|
750
746
|
prevCollapsible &&
|
|
751
747
|
nextCollapsible &&
|
|
752
|
-
prevCollapsedSize !== nextCollapsedSize &&
|
|
753
748
|
prevPanelSize === prevCollapsedSize
|
|
754
749
|
) {
|
|
755
|
-
|
|
750
|
+
if (prevCollapsedSize !== nextCollapsedSize) {
|
|
751
|
+
resizePanel(panelData, nextCollapsedSize);
|
|
752
|
+
} else {
|
|
753
|
+
// Stay collapsed
|
|
754
|
+
}
|
|
756
755
|
} else if (prevPanelSize < nextMinSize) {
|
|
757
756
|
resizePanel(panelData, nextMinSize);
|
|
758
757
|
} else if (prevPanelSize > nextMaxSize) {
|