From 2bfb0d88de7ad07396593fea7d30868676377cbd Mon Sep 17 00:00:00 2001
From: Adam Binks <ab390@st-andrews.ac.uk>
Date: Wed, 1 Jun 2022 15:35:14 +0100
Subject: [PATCH 1/2] Recreate Split when children change

---
 packages/react-split/src/index.js | 52 +++++++++++++++++++++----------
 1 file changed, 36 insertions(+), 16 deletions(-)

diff --git a/packages/react-split/src/index.js b/packages/react-split/src/index.js
index d65aa398..af51d485 100644
--- a/packages/react-split/src/index.js
+++ b/packages/react-split/src/index.js
@@ -6,30 +6,18 @@ class SplitWrapper extends React.Component {
     componentDidMount() {
         const { children, gutter, ...options } = this.props
 
-        options.gutter = (index, direction) => {
-            let gutterElement
-
-            if (gutter) {
-                gutterElement = gutter(index, direction)
-            } else {
-                gutterElement = document.createElement('div')
-                gutterElement.className = `gutter gutter-${direction}`
-            }
-
-            // eslint-disable-next-line no-underscore-dangle
-            gutterElement.__isSplitGutter = true
-            return gutterElement
-        }
+        options.gutter = this.makeGutterFn(gutter)
 
         this.split = Split(this.parent.children, options)
     }
 
     componentDidUpdate(prevProps) {
-        const { children, minSize, sizes, collapsed, ...options } = this.props
+        const { children, minSize, sizes, collapsed, gutter, ...options } = this.props
         const {
             minSize: prevMinSize,
             sizes: prevSizes,
             collapsed: prevCollapsed,
+            children: prevChildren,
         } = prevProps
 
         const otherProps = [
@@ -41,6 +29,7 @@ class SplitWrapper extends React.Component {
             'dragInterval',
             'direction',
             'cursor',
+            'children',
         ]
 
         let needsRecreate = otherProps
@@ -63,12 +52,26 @@ class SplitWrapper extends React.Component {
             needsRecreate = needsRecreate || minSize !== prevMinSize
         }
 
+        // If children have changed, remove the old gutters
+        if (prevChildren !== children) {
+            for (var i = this.parent.children.length - 1; i >=0; i--) {
+                if (this.parent.children[i].__isSplitGutter) {
+                    this.parent.children[i].remove()
+                }
+            }
+        }
+
         // Destroy and re-create split if options changed
         if (needsRecreate) {
             options.minSize = minSize
             options.sizes = sizes || this.split.getSizes()
+            if (prevChildren !== children && options.sizes.length !== children.count) {
+                options.sizes = undefined
+            }
             this.split.destroy(true, true)
-            options.gutter = (index, direction, pairB) => pairB.previousSibling
+            options.gutter = (index, direction, pairB) => {
+                return pairB.previousSibling.__isSplitGutter ? pairB.previousSibling : this.makeGutterFn(gutter)()
+            }
             this.split = Split(
                 Array.from(this.parent.children).filter(
                     // eslint-disable-next-line no-underscore-dangle
@@ -138,6 +141,23 @@ class SplitWrapper extends React.Component {
             </div>
         )
     }
+
+    makeGutterFn(gutterFn) {
+        return function (index, direction) {
+            let gutterElement
+
+            if (gutterFn) {
+                gutterElement = gutter(index, direction)
+            } else {
+                gutterElement = document.createElement('div')
+                gutterElement.className = `gutter gutter-${direction}`
+            }
+
+            // eslint-disable-next-line no-underscore-dangle
+            gutterElement.__isSplitGutter = true
+            return gutterElement
+        }
+    }
 }
 
 SplitWrapper.propTypes = {

From 0a8d945853ed033d0ea43b9f1d9f1142870e5128 Mon Sep 17 00:00:00 2001
From: Adam Binks <jellyberg@gmail.com>
Date: Wed, 1 Jun 2022 15:53:42 +0100
Subject: [PATCH 2/2] gutter -> gutterFn

---
 packages/react-split/src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react-split/src/index.js b/packages/react-split/src/index.js
index af51d485..2a51cf69 100644
--- a/packages/react-split/src/index.js
+++ b/packages/react-split/src/index.js
@@ -147,7 +147,7 @@ class SplitWrapper extends React.Component {
             let gutterElement
 
             if (gutterFn) {
-                gutterElement = gutter(index, direction)
+                gutterElement = gutterFn(index, direction)
             } else {
                 gutterElement = document.createElement('div')
                 gutterElement.className = `gutter gutter-${direction}`