Merge pull request #2 from mnmtanish/resizer-children

Get resizer children from user
storybookjs · Apr 6, 2016 · 624aba8 · 624aba8
2 parents bf85fff + ad08044
commit 624aba8
Show file tree

Hide file tree

Showing 8 changed files with 594 additions and 296 deletions.
diff --git a/README.md b/README.md
@@ -86,64 +86,6 @@ use of localStorage.
 If you need more control over resizing, SplitPane can notify you about when resizing started
 and when it ended through two callbacks: `onDragStarted` and `onDragFinished`.
 
-### Example styling
-
-This gives a single pixel wide divider, but with a 'grabbable' surface of 11 pixels.
-
-Thanks to ```background-clip: padding-box;``` for making transparent borders possible.
-
-
-```css
-
-    .Resizer {
-        background: #000;
-        opacity: .2;
-        z-index: 1;
-        -moz-box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-        box-sizing: border-box;
-        -moz-background-clip: padding;
-        -webkit-background-clip: padding;
-        background-clip: padding-box;
-    }
-
-     .Resizer:hover {
-        -webkit-transition: all 2s ease;
-        transition: all 2s ease;
-    }
-
-     .Resizer.horizontal {
-        height: 11px;
-        margin: -5px 0;
-        border-top: 5px solid rgba(255, 255, 255, 0);
-        border-bottom: 5px solid rgba(255, 255, 255, 0);
-        cursor: row-resize;
-        width: 100%;
-    }
-
-    .Resizer.horizontal:hover {
-        border-top: 5px solid rgba(0, 0, 0, 0.5);
-        border-bottom: 5px solid rgba(0, 0, 0, 0.5);
-    }
-
-    .Resizer.vertical {
-        width: 11px;
-        margin: 0 -5px;
-        border-left: 5px solid rgba(255, 255, 255, 0);
-        border-right: 5px solid rgba(255, 255, 255, 0);
-        cursor: col-resize;
-        height: 100%;
-    }
-
-    .Resizer.vertical:hover {
-        border-left: 5px solid rgba(0, 0, 0, 0.5);
-        border-right: 5px solid rgba(0, 0, 0, 0.5);
-    }
-    Resizer.disabled {
-      cursor: not-allowed;
-    }
-    Resizer.disabled:hover {
-      border-color: transparent;
-    }
-
- ```
+### Customise Dividers
+
+By default it gives a 5 pixel wide divider, but you can use your own elements for the divider with the `resizerChildren` property. Check the demo for a custom horizontal divider with a header and a button.
diff --git a/demo/Example.js b/demo/Example.js
@@ -1,15 +1,69 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import ReactDOM from 'react-dom';
 import SplitPane from '../lib/SplitPane';
 
+const HSplit = React.createClass({
+  render() {
+    const style = {
+      cursor: 'row-resize',
+      background: '#EEEEEE',
+      borderBottom: 'solid #E0E0E0 1px',
+      borderTop: 'solid #E0E0E0 1px',
+      width: '100%',
+    };
 
-var Example = React.createClass({
+    const headerStyle = {
+      color: '#888',
+      float: 'left',
+      fontFamily: 'sans-serif',
+      fontSize: '11px',
+      letterSpacing: '1px',
+      lineHeight: 1,
+      margin: 0,
+      padding: '8px 10px 8px 10px',
+      textTransform: 'uppercase',
+    };
+
+    const buttonStyle = {
+      background: 'transparent',
+      border: 'none',
+      color: '#888',
+      float: 'right',
+      fontFamily: 'sans-serif',
+      fontSize: '11px',
+      lineHeight: 1,
+      outline: 'none',
+      padding: '8px 15px 8px 10px',
+    };
+
+    const clearFix = {
+      clear: 'both',
+    };
+
+    return (
+      <div style={style}>
+        <h3 style={headerStyle}>{this.props.header}</h3>
+        <button style={buttonStyle} onClick={this.props.onClose}>✕</button>
+        <div style={clearFix}></div>
+      </div>
+    );
+  }
+});
+
+HSplit.propTypes = {
+  onClose: PropTypes.func.isRequired,
+  header: PropTypes.string.isRequired,
+};
 
+var Example = React.createClass({
     render: function() {
+        const close = () => alert('close button clicked');
+        const hsplit = <HSplit header="Split Pane Header" onClose={close} />;
+
         return (
-            <SplitPane split="vertical" minSize={50} maxSize={300} defaultSize={100} className="primary">
+            <SplitPane split="vertical" minSize={50} maxSize={300} defaultSize={250} className="primary">
                 <div></div>
-                <SplitPane split="horizontal">
+                <SplitPane split="horizontal" primary="second" defaultSize={250} resizerChildren={hsplit}>
                     <div></div>
                     <div></div>
                 </SplitPane>