react-split-pane - npm Package Compare versions

Comparing version 0.1.43 to 0.1.44

demo/Examples.js

@@ -1,4 +0,4 @@
-import React from "react";
-import {render} from "react-dom";
-import SplitPane from "../lib/SplitPane";
+import React from 'react';
+import {render} from 'react-dom';
+import SplitPane from '../lib/SplitPane';
 
@@ -96,10 +96,32 @@
 
-if (document.getElementById("simple-nested-example")) render(<SimpleNestedExample />, document.getElementById("simple-nested-example"));
-if (document.getElementById("basic-vertical-example")) render(<BasicVerticalExample />, document.getElementById("basic-vertical-example"));
-if (document.getElementById("basic-horizontal-example")) render(<BasicHorizontalExample />, document.getElementById("basic-horizontal-example"));
-if (document.getElementById("percentage-vertical-example")) render(<PercentageVerticalExample />, document.getElementById("percentage-vertical-example"));
-if (document.getElementById("percentage-horizontal-example")) render(<PercentageHorizontalExample />, document.getElementById("percentage-horizontal-example"));
-if (document.getElementById("vertically-nested-in-container-example")) render(<VerticallyNestedInContainerExample />, document.getElementById("vertically-nested-in-container-example"));
-if (document.getElementById("horizontally-nested-in-container-example")) render(<HorizontallyNestedInContainerExample />, document.getElementById("horizontally-nested-in-container-example"));
-if (document.getElementById("multiple-vertical-example")) render(<MultipleVerticalExample />, document.getElementById("multiple-vertical-example"));
-if (document.getElementById("multiple-horizontal-example")) render(<MultipleHorizontalExample />, document.getElementById("multiple-horizontal-example"));
+const InlineStyleExample = () => {
+    const styleA = { background: '#eee' };
+    const styleB = { background: '#aaa4ba' };
+    const styleC = { background: '#000' };
+    const styleD = { padding: '2em', fontStyle: 'italic' };
+    return (
+        <SplitPane
+            split="vertical"
+            minSize={50} maxSize={300} defaultSize={100}
+            className="primary"
+            pane1Style={styleA}
+            resizerStyle={styleC}>
+            <div></div>
+            <SplitPane split="horizontal" paneStyle={styleD} pane2Style={styleB}>
+                <div>Hello...</div>
+                <div> ...world.</div>
+            </SplitPane>
+        </SplitPane>
+    );
+};
+
+if (document.getElementById('simple-nested-example')) render(<SimpleNestedExample />, document.getElementById('simple-nested-example'));
+if (document.getElementById('basic-vertical-example')) render(<BasicVerticalExample />, document.getElementById('basic-vertical-example'));
+if (document.getElementById('basic-horizontal-example')) render(<BasicHorizontalExample />, document.getElementById('basic-horizontal-example'));
+if (document.getElementById('percentage-vertical-example')) render(<PercentageVerticalExample />, document.getElementById('percentage-vertical-example'));
+if (document.getElementById('percentage-horizontal-example')) render(<PercentageHorizontalExample />, document.getElementById('percentage-horizontal-example'));
+if (document.getElementById('vertically-nested-in-container-example')) render(<VerticallyNestedInContainerExample />, document.getElementById('vertically-nested-in-container-example'));
+if (document.getElementById('horizontally-nested-in-container-example')) render(<HorizontallyNestedInContainerExample />, document.getElementById('horizontally-nested-in-container-example'));
+if (document.getElementById('multiple-vertical-example')) render(<MultipleVerticalExample />, document.getElementById('multiple-vertical-example'));
+if (document.getElementById('multiple-horizontal-example')) render(<MultipleHorizontalExample />, document.getElementById('multiple-horizontal-example'));
+if (document.getElementById('inline-style-example')) render(<InlineStyleExample />, document.getElementById('inline-style-example'));

lib/Pane.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
@@ -46,7 +48,7 @@
 
-            var style = {
+            var style = _extends({}, this.props.style || {}, {
                 flex: 1,
                 position: 'relative',
                 outline: 'none'
-            };
+            });
 
@@ -53,0 +55,0 @@ if (this.state.size !== undefined) {

lib/Resizer.js

@@ -52,3 +52,3 @@ 'use strict';
             var classes = ['Resizer', split, className];
-            return _react2.default.createElement('span', { className: classes.join(' '), onMouseDown: this.onMouseDown });
+            return _react2.default.createElement('span', { className: classes.join(' '), style: this.props.style || {}, onMouseDown: this.onMouseDown });
         }
@@ -55,0 +55,0 @@ }]);

lib/SplitPane.js

@@ -193,3 +193,3 @@ 'use strict';
 
-            var style = {
+            var style = _extends({}, this.props.style || {}, {
                 display: 'flex',
@@ -204,3 +204,3 @@ flex: 1,
                 userSelect: 'text'
-            };
+            });
 
@@ -230,2 +230,5 @@ if (split === 'vertical') {
 
+            var pane1Style = _extends({}, this.props.paneStyle || {}, this.props.pane1Style || {});
+            var pane2Style = _extends({}, this.props.paneStyle || {}, this.props.pane2Style || {});
+
             return _react2.default.createElement(
@@ -236,3 +239,3 @@ 'div',
                     _Pane2.default,
-                    { ref: 'pane1', key: 'pane1', className: 'Pane1', split: split },
+                    { ref: 'pane1', key: 'pane1', className: 'Pane1', style: pane1Style, split: split },
                     children[0]
@@ -245,2 +248,3 @@ ),
                     onMouseDown: this.onMouseDown,
+                    style: this.props.resizerStyle || {},
                     split: split
@@ -250,3 +254,3 @@ }),
                     _Pane2.default,
-                    { ref: 'pane2', key: 'pane2', className: 'Pane2', split: split },
+                    { ref: 'pane2', key: 'pane2', className: 'Pane2', style: pane2Style, split: split },
                     children[1]
@@ -253,0 +257,0 @@ )

package.json

@@ -5,3 +5,3 @@ {
   "main": "index.js",
-  "version": "0.1.43",
+  "version": "0.1.44",
   "repository": {
@@ -25,4 +25,4 @@ "type": "git",
   "devDependencies": {
-    "babel-cli": "^6.10.1",
-    "babel-eslint": "^6.1.0",
+    "babel-cli": "^6.11.4",
+    "babel-eslint": "^6.1.2",
     "babel-plugin-add-module-exports": "^0.2.1",
@@ -33,15 +33,18 @@ "babel-plugin-transform-object-assign": "^6.8.0",
     "babelify": "^7.3.0",
-    "browserify": "^13.0.1",
+    "browserify": "^13.1.0",
     "chai": "^3.5.0",
     "chai-spies": "^0.7.1",
-    "coveralls": "^2.11.9",
-    "eslint": "^3.0.0",
+    "coveralls": "^2.11.12",
+    "eslint": "^3.2.0",
     "eslint-config-airbnb": "^9.0.1",
+    "eslint-plugin-import": "^1.12.0",
+    "eslint-plugin-jsx-a11y": "^2.0.1",
     "eslint-plugin-react": "^5.2.2",
     "express": "^4.14.0",
-    "mochify": "^2.18.0",
+    "mochify": "^2.18.1",
     "mochify-istanbul": "^2.4.1",
-    "react": "^15.2.0",
-    "react-addons-test-utils": "^15.2.0",
-    "react-dom": "^15.2.0",
+    "phantomjs-prebuilt": "^2.1.9",
+    "react": "^15.3.0",
+    "react-addons-test-utils": "^15.3.0",
+    "react-dom": "^15.3.0",
     "surge": "^0.18.0",
@@ -56,3 +59,3 @@ "watchify": "^3.7.0"
     "test:watch": "npm run compile:watch & mochify -R spec --watch",
-    "test:coverage": "node cover.js && cat lcov.info | coveralls && rm lcov.info",
+    "test:coverage": "mochify --plugin [ mochify-istanbul --exclude '**/test/**' --report lcovonly ] && cat lcov.info | coveralls && rm lcov.info",
     "lint": "eslint src/",
@@ -59,0 +62,0 @@ "demo": "npm run compile && browserify demo/Examples.js -d -t -o demo/bundle.js",

README.md

@@ -53,7 +53,7 @@ # React Split Pane
 You can limit the maximal size of the 'fixed' pane using the maxSize parameter with a positive value (measured in pixels but state just a number).
-If you wrap the SplitPane into a container component (yes you can, just remember the container has to have the relative or absolute positioning), 
-then you'll need to limit the movement of the splitter (resizer) at the end of the SplitPane (otherwise it can be dragged outside the SplitPane 
-and you don't catch it never more). For this purpose use the maxSize parameter with value 0. When dragged the splitter/resizer will stop at the border 
+If you wrap the SplitPane into a container component (yes you can, just remember the container has to have the relative or absolute positioning),
+then you'll need to limit the movement of the splitter (resizer) at the end of the SplitPane (otherwise it can be dragged outside the SplitPane
+and you don't catch it never more). For this purpose use the maxSize parameter with value 0. When dragged the splitter/resizer will stop at the border
 of the SplitPane component and think this you'll be able to pick it again and drag it back then.
-And more: if you set the maxSize to negative value (e.g. -200), then the splitter stops 200px before the border (in other words it sets the minimal 
+And more: if you set the maxSize to negative value (e.g. -200), then the splitter stops 200px before the border (in other words it sets the minimal
 size of the 'resizable' pane in this case). This can be useful also in the full-screen case of use.
@@ -72,3 +72,3 @@
     <SplitPane split="vertical" minSize={50}
-               defaultSize={ localStorage.getItem('splitPos') }
+               defaultSize={ parseInt(localStorage.getItem('splitPos'), 10) }
                onChange={ size => localStorage.setItem('splitPos', size) }>
@@ -160,1 +160,9 @@ <div></div>
  ```
+### Inline Styles
+
+You can also pass inline styles to the components via props. These are:
+
+ * `paneStyle` - Styling to be applied to both panes
+ * `pane1Style` - Styling to be applied to the first pane, with precedence over `paneStyle`
+ * `pane2Style` - Styling to be applied to the second pane, with precedence over `paneStyle`
+ * `resizerStyle` - Styling to be applied to the resizer bar

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2068230

increased by3.1%

Number of package files

40

increased by5.26%

Lines of code

24494

increased by2.37%

Number of lines in readme file

166

increased by5.06%

Worsened metrics

Dev dependency count

25

increased by13.64%

No dependency changes