Splitter children

.gitignore

@@ -8,7 +8,6 @@
 # Build Output
 build/
 coverage/
-lib/
 .nyc_output/
 
 # NPM

lib/index.css

@@ -0,0 +1,52 @@
+.splitter-layout {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.splitter-layout .layout-pane {
+  position: relative;
+  flex: 0 0 auto;
+  overflow: auto;
+}
+
+.splitter-layout .layout-pane.layout-pane-primary {
+  flex: 1 1 auto;
+}
+
+.splitter-layout > .layout-splitter {
+  flex: 0 0 auto;
+  width: 4px;
+  height: 100%;
+  cursor: col-resize;
+  background-color: #ccc;
+}
+
+.splitter-layout .layout-splitter:hover {
+  background-color: #bbb;
+}
+
+.splitter-layout.layout-changing {
+  cursor: col-resize;
+}
+
+.splitter-layout.layout-changing > .layout-splitter {
+  background-color: #aaa;
+}
+
+.splitter-layout.splitter-layout-vertical {
+  flex-direction: column;
+}
+
+.splitter-layout.splitter-layout-vertical.layout-changing {
+  cursor: row-resize;
+}
+
+.splitter-layout.splitter-layout-vertical > .layout-splitter {
+  width: 100%;
+  height: 4px;
+  cursor: row-resize;
+}

package.json

@@ -49,7 +49,7 @@
   },
   "peerDependencies": {
     "prop-types": "^15.5.0",
-    "react": "^15.5.0 || ^16.0.0"
+    "react": "^15.5.0 || ^16.0.0 || ^17.0.1"
   },
   "scripts": {
     "prepublish": "webpack --progress",

src/components/SplitterLayout.jsx

@@ -63,6 +63,11 @@ class SplitterLayout extends React.Component {
     this.setState({ secondaryPaneSize });
   }
 
+  // Used externally to set the position of the splitter
+  setSplitterPosition(secondaryPaneSize) {
+    this.setState({ secondaryPaneSize });
+  }
+
   componentDidUpdate(prevProps, prevState) {
     if (prevState.secondaryPaneSize !== this.state.secondaryPaneSize && this.props.onSecondaryPaneSizeChange) {
       this.props.onSecondaryPaneSizeChange(this.state.secondaryPaneSize);
@@ -212,7 +217,9 @@ class SplitterLayout extends React.Component {
               ref={(c) => { this.splitter = c; }}
               onMouseDown={this.handleSplitterMouseDown}
               onTouchStart={this.handleSplitterMouseDown}
-            />
+            >
+              {this.props.splitterChildren}
+            </div>
           )
         }
         {wrappedChildren.length > 1 && wrappedChildren[1]}
@@ -232,7 +239,8 @@ SplitterLayout.propTypes = {
   onDragStart: PropTypes.func,
   onDragEnd: PropTypes.func,
   onSecondaryPaneSizeChange: PropTypes.func,
-  children: PropTypes.arrayOf(PropTypes.node)
+  children: PropTypes.arrayOf(PropTypes.node),
+  splitterChildren: PropTypes.arrayOf(PropTypes.node)
 };
 
 SplitterLayout.defaultProps = {
@@ -246,7 +254,8 @@ SplitterLayout.defaultProps = {
   onDragStart: null,
   onDragEnd: null,
   onSecondaryPaneSizeChange: null,
-  children: []
+  children: [],
+  splitterChildren: []
 };
 
 export default SplitterLayout;