Splitter: support collapsed panes on init (DevExpress#26945)

jdvictoria · Mar 19, 2024 · 6e2c72b · 6e2c72b
1 parent a78b63e
commit 6e2c72b
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 7 deletions.
diff --git a/packages/devextreme/js/__internal/ui/splitter/splitter.ts b/packages/devextreme/js/__internal/ui/splitter/splitter.ts
@@ -481,6 +481,7 @@ class Splitter extends (CollectionWidget as any) {
     items.forEach((item) => {
       this._itemRestrictions.push({
         visible: item.visible,
+        collapsed: item.collapsed === true,
         size: convertSizeToRatio(item.size, elementSize),
         maxSize: convertSizeToRatio(item.maxSize, elementSize),
         minSize: convertSizeToRatio(item.minSize, elementSize),

diff --git a/packages/devextreme/js/__internal/ui/splitter/utils/layout.ts b/packages/devextreme/js/__internal/ui/splitter/utils/layout.ts
@@ -292,27 +292,38 @@ export function getDefaultLayout(layoutRestrictions: PaneRestrictions[]): number
   let remainingSize = 100;
 
   layoutRestrictions.forEach((panelConstraints, index) => {
-    const { size, visible } = panelConstraints;
+    const { size, visible, collapsed } = panelConstraints;
 
-    if (isDefined(size)) {
+    if (visible === false) {
       numPanelsWithSizes += 1;
 
-      layout[index] = size;
-      remainingSize -= size;
+      layout[index] = 0;
+      remainingSize -= 0;
+
+      return;
     }
 
-    if (visible === false) {
+    if (collapsed === true) {
       numPanelsWithSizes += 1;
 
       layout[index] = 0;
       remainingSize -= 0;
+
+      return;
+    }
+
+    if (isDefined(size)) {
+      numPanelsWithSizes += 1;
+
+      layout[index] = size;
+      remainingSize -= size;
     }
   });
 
   layoutRestrictions.forEach((panelConstraints, index) => {
-    const { size, visible } = panelConstraints;
+    const { size, visible, collapsed } = panelConstraints;
 
-    if (size == null && visible !== false) {
+    if (size == null && visible !== false && collapsed !== true) {
       const numRemainingPanels = layoutRestrictions.length - numPanelsWithSizes;
       const newSize = remainingSize / numRemainingPanels;
 

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets/splitter.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets/splitter.tests.js
@@ -535,6 +535,21 @@ QUnit.module('Pane sizing', moduleConfig, () => {
                 expectedLayout: ['99', '1'],
                 expectedItemSizes: [undefined, '1%']
             },
+            {
+                dataSource: [{ visible: false }, { }, { }],
+                expectedLayout: ['50', '50'],
+                expectedItemSizes: [undefined, undefined, undefined]
+            },
+            {
+                dataSource: [{ }, { visible: false }, { }],
+                expectedLayout: ['50', '50'],
+                expectedItemSizes: [undefined, undefined, undefined]
+            },
+            {
+                dataSource: [{ }, { }, { visible: false }],
+                expectedLayout: ['50', '50'],
+                expectedItemSizes: [undefined, undefined, undefined]
+            },
         ].forEach(({ dataSource, expectedLayout, expectedItemSizes }) => {
             QUnit.test(`pane should respect size option in percentages, dataSource: ${JSON.stringify(dataSource)}, ${orientation} orientation`, function(assert) {
                 this.reinit({
@@ -548,6 +563,41 @@ QUnit.module('Pane sizing', moduleConfig, () => {
             });
         });
     });
+
+    [{
+        items: [{ collapsed: true }, {}],
+        expectedLayout: ['0', '100'],
+    },
+    {
+        items: [{}, { collapsed: true }],
+        expectedLayout: ['100', '0'],
+    },
+    {
+        items: [{ collapsed: true }, { collapsed: true }, { collapsed: true }],
+        expectedLayout: ['0', '0', '0'],
+    },
+    {
+        items: [{ size: 200 }, { collapsed: true }, { size: 200 }],
+        expectedLayout: ['50', '0', '50'],
+    },
+    {
+        items: [{ visible: false }, { collapsed: true }],
+        expectedLayout: ['0', '0'],
+    },
+    {
+        items: [{}, { visible: false }, { collapsed: true }],
+        expectedLayout: ['100', '0', '0'],
+    },
+    {
+        items: [{}, { collapsed: true }, {}],
+        expectedLayout: ['50', '0', '50'],
+    },].forEach(({ items, expectedLayout }) => {
+        QUnit.test(`Panes with collapsed, items: ${JSON.stringify(items)}`, function(assert) {
+            this.reinit({ items });
+
+            this.assertLayout(expectedLayout);
+        });
+    });
 });
 
 QUnit.module('Resizing', moduleConfig, () => {