react-split-pane - npm Package Compare versions

Comparing version 0.1.29 to 0.1.30

demo/Example.js

@@ -10,3 +10,3 @@ import React from 'react';
         return (
-            <SplitPane split="vertical" minSize="50" defaultSize="100" className="primary">
+            <SplitPane split="vertical" minSize={50} maxSize={300} defaultSize={100} className="primary">
                 <div></div>
@@ -24,2 +24,2 @@ <SplitPane split="horizontal">
 
-ReactDOM.render(<Example />, document.getElementById("container"));
+ReactDOM.render(<Example />, document.getElementById("container"));

lib/Pane.js

@@ -7,2 +7,4 @@ 'use strict';
 
+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; }; }();
+
 var _react = require('react');
@@ -18,34 +20,67 @@
 
-exports.default = _react2.default.createClass({
-    displayName: 'Pane',
-    getInitialState: function getInitialState() {
-        return {};
-    },
-    render: function render() {
-        var split = this.props.split;
-        var classes = ['Pane', split, this.props.className];
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-        var style = {
-            flex: 1,
-            position: 'relative',
-            outline: 'none'
-        };
-        if (this.state.size !== undefined) {
-            if (split === 'vertical') {
-                style.width = this.state.size;
-            } else {
-                style.height = this.state.size;
-                style.display = 'flex';
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Pane = function (_Component) {
+    _inherits(Pane, _Component);
+
+    function Pane() {
+        var _Object$getPrototypeO;
+
+        _classCallCheck(this, Pane);
+
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+        }
+
+        var _this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Pane)).call.apply(_Object$getPrototypeO, [this].concat(args)));
+
+        _this.state = {};
+        return _this;
+    }
+
+    _createClass(Pane, [{
+        key: 'render',
+        value: function render() {
+            var split = this.props.split;
+            var classes = ['Pane', split, this.props.className];
+
+            var style = {
+                flex: 1,
+                position: 'relative',
+                outline: 'none'
+            };
+
+            if (this.state.size !== undefined) {
+                if (split === 'vertical') {
+                    style.width = this.state.size;
+                } else {
+                    style.height = this.state.size;
+                    style.display = 'flex';
+                }
+                style.flex = 'none';
             }
-            style.flex = 'none';
+            var prefixed = _reactVendorPrefix2.default.prefix({ styles: style });
+
+            return _react2.default.createElement(
+                'div',
+                { className: classes.join(' '), style: prefixed.styles },
+                this.props.children
+            );
         }
-        var prefixed = _reactVendorPrefix2.default.prefix({ styles: style });
+    }]);
 
-        return _react2.default.createElement(
-            'div',
-            { className: classes.join(' '), style: prefixed.styles },
-            this.props.children
-        );
-    }
-});
+    return Pane;
+}(_react.Component);
+
+Pane.propTypes = {
+    split: _react.PropTypes.oneOf(['vertical', 'horizontal']),
+    className: _react.PropTypes.string.isRequired,
+    children: _react.PropTypes.object.isRequired
+};
+
+exports.default = Pane;
 module.exports = exports['default'];

lib/Resizer.js

@@ -7,2 +7,4 @@ 'use strict';
 
+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; }; }();
+
 var _react = require('react');
@@ -14,16 +16,53 @@
 
-exports.default = _react2.default.createClass({
-    displayName: 'Resizer',
-    onMouseDown: function onMouseDown(event) {
-        this.props.onMouseDown(event);
-    },
-    render: function render() {
-        var _props = this.props;
-        var split = _props.split;
-        var className = _props.className;
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-        var classes = ['Resizer', split, className];
-        return _react2.default.createElement('span', { className: classes.join(' '), onMouseDown: this.onMouseDown });
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var Resizer = function (_Component) {
+    _inherits(Resizer, _Component);
+
+    function Resizer() {
+        var _Object$getPrototypeO;
+
+        _classCallCheck(this, Resizer);
+
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+        }
+
+        var _this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(Resizer)).call.apply(_Object$getPrototypeO, [this].concat(args)));
+
+        _this.onMouseDown = _this.onMouseDown.bind(_this);
+        return _this;
     }
-});
+
+    _createClass(Resizer, [{
+        key: 'onMouseDown',
+        value: function onMouseDown(event) {
+            this.props.onMouseDown(event);
+        }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _props = this.props;
+            var split = _props.split;
+            var className = _props.className;
+
+            var classes = ['Resizer', split, className];
+            return _react2.default.createElement('span', { className: classes.join(' '), onMouseDown: this.onMouseDown });
+        }
+    }]);
+
+    return Resizer;
+}(_react.Component);
+
+Resizer.propTypes = {
+    onMouseDown: _react.PropTypes.func.isRequired,
+    split: _react.PropTypes.oneOf(['vertical', 'horizontal']),
+    className: _react.PropTypes.string.isRequired
+};
+
+exports.default = Resizer;
 module.exports = exports['default'];

lib/SplitPane.js

@@ -7,2 +7,6 @@ '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; }; }();
+
 var _react = require('react');
@@ -30,102 +34,108 @@
 
-exports.default = _react2.default.createClass({
-    displayName: 'SplitPane',
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-    propTypes: {
-        primary: _react2.default.PropTypes.oneOf(['first', 'second']),
-        minSize: _react2.default.PropTypes.number,
-        defaultSize: _react2.default.PropTypes.number,
-        size: _react2.default.PropTypes.number,
-        allowResize: _react2.default.PropTypes.bool,
-        split: _react2.default.PropTypes.oneOf(['vertical', 'horizontal']),
-        onDragStarted: _react2.default.PropTypes.func,
-        onDragFinished: _react2.default.PropTypes.func
-    },
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-    getInitialState: function getInitialState() {
-        return {
+var SplitPane = function (_Component) {
+    _inherits(SplitPane, _Component);
+
+    function SplitPane() {
+        var _Object$getPrototypeO;
+
+        _classCallCheck(this, SplitPane);
+
+        for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+            args[_key] = arguments[_key];
+        }
+
+        var _this = _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(SplitPane)).call.apply(_Object$getPrototypeO, [this].concat(args)));
+
+        _this.onMouseDown = _this.onMouseDown.bind(_this);
+        _this.onMouseMove = _this.onMouseMove.bind(_this);
+        _this.onMouseUp = _this.onMouseUp.bind(_this);
+
+        _this.state = {
             active: false,
             resized: false
         };
-    },
-    getDefaultProps: function getDefaultProps() {
-        return {
-            split: 'vertical',
-            minSize: 50,
-            allowResize: true,
-            primary: 'first'
-        };
-    },
-    componentDidMount: function componentDidMount() {
-        this.setSize(this.props, this.state);
-        document.addEventListener('mouseup', this.onMouseUp);
-        document.addEventListener('mousemove', this.onMouseMove);
-    },
-    componentWillReceiveProps: function componentWillReceiveProps(props) {
-        this.setSize(props, this.state);
-    },
-    setSize: function setSize(props, state) {
-        var ref = this.props.primary === 'first' ? this.refs.pane1 : this.refs.pane2;
-        var newSize = void 0;
-        if (ref) {
-            newSize = props.size || state && state.draggedSize || props.defaultSize || props.minSize;
-            ref.setState({
-                size: newSize
-            });
+        return _this;
+    }
+
+    _createClass(SplitPane, [{
+        key: 'componentDidMount',
+        value: function componentDidMount() {
+            this.setSize(this.props, this.state);
+            document.addEventListener('mouseup', this.onMouseUp);
+            document.addEventListener('mousemove', this.onMouseMove);
         }
-    },
-    componentWillUnmount: function componentWillUnmount() {
-        document.removeEventListener('mouseup', this.onMouseUp);
-        document.removeEventListener('mousemove', this.onMouseMove);
-    },
-    onMouseDown: function onMouseDown(event) {
-        if (this.props.allowResize && !this.props.size) {
-            this.unFocus();
-            var position = this.props.split === 'vertical' ? event.clientX : event.clientY;
-            if (typeof this.props.onDragStarted === 'function') {
-                this.props.onDragStarted();
+    }, {
+        key: 'componentWillReceiveProps',
+        value: function componentWillReceiveProps(props) {
+            this.setSize(props, this.state);
+        }
+    }, {
+        key: 'componentWillUnmount',
+        value: function componentWillUnmount() {
+            document.removeEventListener('mouseup', this.onMouseUp);
+            document.removeEventListener('mousemove', this.onMouseMove);
+        }
+    }, {
+        key: 'onMouseDown',
+        value: function onMouseDown(event) {
+            if (this.props.allowResize && !this.props.size) {
+                this.unFocus();
+                var position = this.props.split === 'vertical' ? event.clientX : event.clientY;
+                if (typeof this.props.onDragStarted === 'function') {
+                    this.props.onDragStarted();
+                }
+                this.setState({
+                    active: true,
+                    position: position
+                });
             }
-            this.setState({
-                active: true,
-                position: position
-            });
         }
-    },
-    onMouseMove: function onMouseMove(event) {
-        if (this.props.allowResize && !this.props.size) {
-            if (this.state.active) {
-                this.unFocus();
-                var ref = this.props.primary === 'first' ? this.refs.pane1 : this.refs.pane2;
-                if (ref) {
-                    var node = _reactDom2.default.findDOMNode(ref);
+    }, {
+        key: 'onMouseMove',
+        value: function onMouseMove(event) {
+            if (this.props.allowResize && !this.props.size) {
+                if (this.state.active) {
+                    this.unFocus();
+                    var isPrimaryFirst = this.props.primary === 'first';
+                    var ref = isPrimaryFirst ? this.refs.pane1 : this.refs.pane2;
+                    if (ref) {
+                        var node = _reactDom2.default.findDOMNode(ref);
 
-                    if (node.getBoundingClientRect) {
-                        var width = node.getBoundingClientRect().width;
-                        var height = node.getBoundingClientRect().height;
-                        var current = this.props.split === 'vertical' ? event.clientX : event.clientY;
-                        var size = this.props.split === 'vertical' ? width : height;
-                        var position = this.state.position;
-                        var newPosition = this.props.primary === 'first' ? position - current : current - position;
+                        if (node.getBoundingClientRect) {
+                            var width = node.getBoundingClientRect().width;
+                            var height = node.getBoundingClientRect().height;
+                            var current = this.props.split === 'vertical' ? event.clientX : event.clientY;
+                            var size = this.props.split === 'vertical' ? width : height;
+                            var position = this.state.position;
+                            var newPosition = isPrimaryFirst ? position - current : current - position;
 
-                        var newSize = size - newPosition;
+                            var newSize = size - newPosition;
 
-                        if (newSize < this.props.minSize) {
-                            newSize = this.props.minSize;
-                        } else {
+                            if (newSize < this.props.minSize) {
+                                newSize = this.props.minSize;
+                            } else if (newSize > this.props.maxSize) {
+                                newSize = this.props.maxSize;
+                            } else {
+                                this.setState({
+                                    position: current,
+                                    resized: true
+                                });
+                            }
+
+                            if (this.props.onChange) {
+                                this.props.onChange(newSize);
+                            }
                             this.setState({
-                                position: current,
-                                resized: true
+                                draggedSize: newSize
                             });
+                            ref.setState({
+                                size: newSize
+                            });
                         }
-
-                        if (this.props.onChange) {
-                            this.props.onChange(newSize);
-                        }
-                        this.setState({
-                            draggedSize: newSize
-                        });
-                        ref.setState({
-                            size: newSize
-                        });
                     }
@@ -135,90 +145,132 @@ }
         }
-    },
-    onMouseUp: function onMouseUp() {
-        if (this.props.allowResize && !this.props.size) {
-            if (this.state.active) {
-                if (typeof this.props.onDragFinished === 'function') {
-                    this.props.onDragFinished();
+    }, {
+        key: 'onMouseUp',
+        value: function onMouseUp() {
+            if (this.props.allowResize && !this.props.size) {
+                if (this.state.active) {
+                    if (typeof this.props.onDragFinished === 'function') {
+                        this.props.onDragFinished();
+                    }
+                    this.setState({
+                        active: false
+                    });
                 }
-                this.setState({
-                    active: false
+            }
+        }
+    }, {
+        key: 'setSize',
+        value: function setSize(props, state) {
+            var ref = this.props.primary === 'first' ? this.refs.pane1 : this.refs.pane2;
+            var newSize = void 0;
+            if (ref) {
+                newSize = props.size || state && state.draggedSize || props.defaultSize || props.minSize;
+                ref.setState({
+                    size: newSize
                 });
             }
         }
-    },
-    unFocus: function unFocus() {
-        if (document.selection) {
-            document.selection.empty();
-        } else {
-            window.getSelection().removeAllRanges();
+    }, {
+        key: 'unFocus',
+        value: function unFocus() {
+            if (document.selection) {
+                document.selection.empty();
+            } else {
+                window.getSelection().removeAllRanges();
+            }
         }
-    },
+    }, {
+        key: 'render',
+        value: function render() {
+            var _props = this.props;
+            var split = _props.split;
+            var allowResize = _props.allowResize;
 
+            var disabledClass = allowResize ? '' : 'disabled';
 
-    merge: function merge(into, obj) {
-        for (var attr in obj) {
-            into[attr] = obj[attr];
-        }
-    },
+            var style = {
+                display: 'flex',
+                flex: 1,
+                position: 'relative',
+                outline: 'none',
+                overflow: 'hidden',
+                MozUserSelect: 'text',
+                WebkitUserSelect: 'text',
+                msUserSelect: 'text',
+                userSelect: 'text'
+            };
 
-    render: function render() {
-        var _props = this.props;
-        var split = _props.split;
-        var allowResize = _props.allowResize;
+            if (split === 'vertical') {
+                _extends(style, {
+                    flexDirection: 'row',
+                    height: '100%',
+                    position: 'absolute',
+                    left: 0,
+                    right: 0
+                });
+            } else {
+                _extends(style, {
+                    flexDirection: 'column',
+                    height: '100%',
+                    minHeight: '100%',
+                    position: 'absolute',
+                    top: 0,
+                    bottom: 0,
+                    width: '100%'
+                });
+            }
 
-        var disabledClass = allowResize ? '' : 'disabled';
+            var children = this.props.children;
+            var classes = ['SplitPane', this.props.className, split, disabledClass];
+            var prefixed = _reactVendorPrefix2.default.prefix({ styles: style });
 
-        var style = {
-            display: 'flex',
-            flex: 1,
-            position: 'relative',
-            outline: 'none',
-            overflow: 'hidden',
-            MozUserSelect: 'text',
-            WebkitUserSelect: 'text',
-            msUserSelect: 'text',
-            userSelect: 'text'
-        };
-
-        if (split === 'vertical') {
-            this.merge(style, {
-                flexDirection: 'row',
-                height: '100%',
-                position: 'absolute',
-                left: 0,
-                right: 0
-            });
-        } else {
-            this.merge(style, {
-                flexDirection: 'column',
-                height: '100%',
-                minHeight: '100%',
-                position: 'absolute',
-                top: 0,
-                bottom: 0,
-                width: '100%'
-            });
+            return _react2.default.createElement(
+                'div',
+                { className: classes.join(' '), style: prefixed.styles, ref: 'splitPane' },
+                _react2.default.createElement(
+                    _Pane2.default,
+                    { ref: 'pane1', key: 'pane1', className: 'Pane1', split: split },
+                    children[0]
+                ),
+                _react2.default.createElement(_Resizer2.default, {
+                    ref: 'resizer',
+                    key: 'resizer',
+                    className: disabledClass,
+                    onMouseDown: this.onMouseDown,
+                    split: split
+                }),
+                _react2.default.createElement(
+                    _Pane2.default,
+                    { ref: 'pane2', key: 'pane2', className: 'Pane2', split: split },
+                    children[1]
+                )
+            );
         }
+    }]);
 
-        var children = this.props.children;
-        var classes = ['SplitPane', this.props.className, split, disabledClass];
-        var prefixed = _reactVendorPrefix2.default.prefix({ styles: style });
+    return SplitPane;
+}(_react.Component);
 
-        return _react2.default.createElement(
-            'div',
-            { className: classes.join(' '), style: prefixed.styles, ref: 'splitPane' },
-            _react2.default.createElement(
-                _Pane2.default,
-                { ref: 'pane1', key: 'pane1', className: 'Pane1', split: split },
-                children[0]
-            ),
-            _react2.default.createElement(_Resizer2.default, { ref: 'resizer', key: 'resizer', className: disabledClass, onMouseDown: this.onMouseDown, split: split }),
-            _react2.default.createElement(
-                _Pane2.default,
-                { ref: 'pane2', key: 'pane2', className: 'Pane2', split: split },
-                children[1]
-            )
-        );
-    }
-});
+SplitPane.propTypes = {
+    primary: _react.PropTypes.oneOf(['first', 'second']),
+    minSize: _react.PropTypes.number,
+    maxSize: _react.PropTypes.number,
+    defaultSize: _react.PropTypes.number,
+    size: _react.PropTypes.number,
+    allowResize: _react.PropTypes.bool,
+    split: _react.PropTypes.oneOf(['vertical', 'horizontal']),
+    onDragStarted: _react.PropTypes.func,
+    onDragFinished: _react.PropTypes.func,
+    onChange: _react.PropTypes.func,
+    className: _react.PropTypes.string,
+    children: _react.PropTypes.arrayOf(_react.PropTypes.node).isRequired
+};
+
+SplitPane.defaultProps = {
+    split: 'vertical',
+    minSize: 50,
+    allowResize: true,
+    primary: 'first'
+};
+
+exports.default = SplitPane;
 module.exports = exports['default'];

package.json

@@ -5,3 +5,3 @@ {
   "main": "index.js",
-  "version": "0.1.29",
+  "version": "0.1.30",
   "repository": {
@@ -35,2 +35,3 @@ "type": "git",
     "babel-plugin-add-module-exports": "^0.1.2",
+    "babel-plugin-transform-object-assign": "^6.5.0",
     "babel-preset-es2015": "^6.6.0",
@@ -43,2 +44,5 @@ "babel-preset-react": "^6.5.0",
     "coveralls": "^2.11.9",
+    "eslint": "^2.5.3",
+    "eslint-config-airbnb": "^6.2.0",
+    "eslint-plugin-react": "^4.2.3",
     "express": "^4.13.4",
@@ -60,2 +64,3 @@ "mochify": "^2.17.0",
     "test:coverage": "node cover.js && cat lcov.info | coveralls && rm lcov.info",
+    "lint": "eslint src/",
     "demo": "npm run compile && browserify demo/Example.js -d -t -o demo/bundle.js",
@@ -79,5 +84,6 @@ "demo:watch": "npm run compile:watch & watchify demo/Example.js -d -t -o demo/bundle.js",
     "plugins": [
-      "add-module-exports"
+      "add-module-exports",
+      "transform-object-assign"
     ]
   }
 }

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

1834753

increased by2.11%

Number of package files

21

increased by5%

Lines of code

22297

increased by1.54%

Worsened metrics

Dev dependency count

22

increased by22.22%

No dependency changes