fix #3535 again (#3646)

primefaces · Nov 15, 2022 · da8934e · da8934e
1 parent 959f77d
commit da8934e
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 8 deletions.
diff --git a/components/lib/splitter/Splitter.js b/components/lib/splitter/Splitter.js
@@ -21,8 +21,8 @@ export const Splitter = React.memo(
         const prevPanelIndex = React.useRef(null);
         const [panelSizes, setPanelSizes] = React.useState([]);
         const isStateful = props.stateKey != null;
-        const childrenLength = props.children && props.children.length;
-        const panelSize = (sizes, index) => (index in sizes ? sizes[index] : ((props.children[index] && props.children[index].props.size) || 100) / childrenLength);
+        const childrenLength = (props.children && props.children.length) || 1;
+        const panelSize = (sizes, index) => (index in sizes ? sizes[index] : (props.children && [].concat(props.children)[index].props.size) || 100 / childrenLength);
 
         const [bindDocumentMouseMoveListener, unbindDocumentMouseMoveListener] = useEventListener({ type: 'mousemove', listener: (event) => onResize(event) });
         const [bindDocumentMouseUpListener, unbindDocumentMouseUpListener] = useEventListener({

diff --git a/components/lib/splitter/Splitter.spec.js b/components/lib/splitter/Splitter.spec.js
@@ -48,4 +48,26 @@ describe('Splitter', () => {
         </>,
         'Nested'
     );
+    snapshot(
+        <>
+            <Splitter style={{ height: '300px' }} layout="vertical">
+                <SplitterPanel size={5}>Panel 1</SplitterPanel>
+            </Splitter>
+        </>,
+        'Single Panel with size'
+    );
+    snapshot(
+        <>
+            <Splitter style={{ height: '300px' }} layout="vertical">
+                <SplitterPanel>Panel 1</SplitterPanel>
+            </Splitter>
+        </>,
+        'Single Panel without size'
+    );
+    snapshot(
+        <>
+            <Splitter style={{ height: '300px' }} layout="vertical"></Splitter>
+        </>,
+        'Without panels'
+    );
 });
diff --git a/components/lib/splitter/__snapshots__/Splitter.spec.js.snap b/components/lib/splitter/__snapshots__/Splitter.spec.js.snap
@@ -8,7 +8,7 @@ exports[`Splitter Nested 1`] = `
   >
     <div
       class="p-splitter-panel flex align-items-center justify-content-center"
-      style="flex-basis: calc(10% - 4px);"
+      style="flex-basis: calc(20% - 4px);"
     >
       Panel 1
     </div>
@@ -22,14 +22,14 @@ exports[`Splitter Nested 1`] = `
     </div>
     <div
       class="p-splitter-panel p-splitter-panel-nested"
-      style="flex-basis: calc(40% - 4px);"
+      style="flex-basis: calc(80% - 4px);"
     >
       <div
         class="p-splitter p-component p-splitter-vertical"
       >
         <div
           class="p-splitter-panel flex align-items-center justify-content-center"
-          style="flex-basis: calc(7.5% - 4px);"
+          style="flex-basis: calc(15% - 4px);"
         >
           Panel 2
         </div>
@@ -43,14 +43,14 @@ exports[`Splitter Nested 1`] = `
         </div>
         <div
           class="p-splitter-panel p-splitter-panel-nested"
-          style="flex-basis: calc(42.5% - 4px);"
+          style="flex-basis: calc(85% - 4px);"
         >
           <div
             class="p-splitter p-component p-splitter-horizontal"
           >
             <div
               class="p-splitter-panel flex align-items-center justify-content-center"
-              style="flex-basis: calc(10% - 4px);"
+              style="flex-basis: calc(20% - 4px);"
             >
               Panel 3
             </div>
@@ -64,7 +64,7 @@ exports[`Splitter Nested 1`] = `
             </div>
             <div
               class="p-splitter-panel flex align-items-center justify-content-center"
-              style="flex-basis: calc(40% - 4px);"
+              style="flex-basis: calc(80% - 4px);"
             >
               Panel 4
             </div>
@@ -76,6 +76,54 @@ exports[`Splitter Nested 1`] = `
 </div>
 `;
 
+exports[`Splitter Single Panel with size 1`] = `
+<div>
+  <div
+    class="p-splitter p-component p-splitter-vertical"
+    style="height: 300px;"
+  >
+    <div
+      class="p-splitter-panel"
+      style="flex-basis: calc(5% - 0px);"
+    >
+      Panel 1
+    </div>
+    <div
+      class="p-splitter-gutter"
+      style="height: 4px;"
+    >
+      <div
+        class="p-splitter-gutter-handle"
+      />
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Splitter Single Panel without size 1`] = `
+<div>
+  <div
+    class="p-splitter p-component p-splitter-vertical"
+    style="height: 300px;"
+  >
+    <div
+      class="p-splitter-panel"
+      style="flex-basis: calc(100% - 0px);"
+    >
+      Panel 1
+    </div>
+    <div
+      class="p-splitter-gutter"
+      style="height: 4px;"
+    >
+      <div
+        class="p-splitter-gutter-handle"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Splitter Splitter requires two SplitterPanel components to wrap. 1`] = `
 <div>
   <div
@@ -135,3 +183,12 @@ exports[`Splitter Vertical layout 1`] = `
   </div>
 </div>
 `;
+
+exports[`Splitter Without panels 1`] = `
+<div>
+  <div
+    class="p-splitter p-component p-splitter-vertical"
+    style="height: 300px;"
+  />
+</div>
+`;