react-split-pane 0.1.81 → 0.1.82

package/dist/index.cjs.js

@@ -6,7 +6,6 @@ var React = _interopDefault(require('react'));
 var PropTypes = _interopDefault(require('prop-types'));
 var Prefixer = _interopDefault(require('inline-style-prefixer'));
 var stylePropType = _interopDefault(require('react-style-proptype'));
-var ReactDOM = _interopDefault(require('react-dom'));
 
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
@@ -248,7 +247,8 @@ var Pane = function (_React$PureComponent) {
           prefixer = _props.prefixer,
           split = _props.split,
           styleProps = _props.style,
-          size = _props.size;
+          size = _props.size,
+          eleRef = _props.eleRef;
 
 
       var classes = ['Pane', split, className];
@@ -271,7 +271,11 @@ var Pane = function (_React$PureComponent) {
 
       return React.createElement(
         'div',
-        { className: classes.join(' '), style: prefixer.prefix(style) },
+        {
+          ref: eleRef,
+          className: classes.join(' '),
+          style: prefixer.prefix(style)
+        },
         children
       );
     }
@@ -285,7 +289,8 @@ Pane.propTypes = {
   prefixer: PropTypes.instanceOf(Prefixer).isRequired,
   size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   split: PropTypes.oneOf(['vertical', 'horizontal']),
-  style: stylePropType
+  style: stylePropType,
+  eleRef: PropTypes.func
 };
 
 Pane.defaultProps = {
@@ -413,16 +418,16 @@ var SplitPane = function (_React$Component) {
 
     // order of setting panel sizes.
     // 1. size
-    // 2. defaultSize
-    // 3. minSize
+    // 2. getDefaultSize(defaultSize, minsize, maxSize)
 
     var size = props.size,
         defaultSize = props.defaultSize,
         minSize = props.minSize,
+        maxSize = props.maxSize,
         primary = props.primary;
 
 
-    var initialSize = size !== undefined ? size : defaultSize !== undefined ? defaultSize : minSize;
+    var initialSize = size !== undefined ? size : getDefaultSize(defaultSize, minSize, maxSize, null);
 
     _this.state = {
       active: false,
@@ -432,7 +437,11 @@ var SplitPane = function (_React$Component) {
 
       // previous props that we need in static methods
       instanceProps: {
-        primary: primary
+        primary: primary,
+        size: size,
+        defaultSize: defaultSize,
+        minSize: minSize,
+        maxSize: maxSize
       }
     };
     return _this;
@@ -441,10 +450,10 @@ var SplitPane = function (_React$Component) {
   createClass(SplitPane, [{
     key: 'componentDidMount',
     value: function componentDidMount() {
-      this.setState(SplitPane.setSize(this.props, this.state));
       document.addEventListener('mouseup', this.onMouseUp);
       document.addEventListener('mousemove', this.onMouseMove);
       document.addEventListener('touchmove', this.onTouchMove);
+      this.setState(SplitPane.setSize(this.props, this.state));
     }
   }, {
     key: 'componentWillUnmount',
@@ -511,8 +520,8 @@ var SplitPane = function (_React$Component) {
         var ref = isPrimaryFirst ? this.pane1 : this.pane2;
         var ref2 = isPrimaryFirst ? this.pane2 : this.pane1;
         if (ref) {
-          var node = ReactDOM.findDOMNode(ref);
-          var node2 = ReactDOM.findDOMNode(ref2);
+          var node = ref;
+          var node2 = ref2;
 
           if (node.getBoundingClientRect) {
             var width = node.getBoundingClientRect().width;
@@ -538,11 +547,11 @@ var SplitPane = function (_React$Component) {
 
             var newMaxSize = maxSize;
             if (maxSize !== undefined && maxSize <= 0) {
-              var splPane = this.splitPane;
+              var splitPane = this.splitPane;
               if (split === 'vertical') {
-                newMaxSize = splPane.getBoundingClientRect().width + maxSize;
+                newMaxSize = splitPane.getBoundingClientRect().width + maxSize;
               } else {
-                newMaxSize = splPane.getBoundingClientRect().height + maxSize;
+                newMaxSize = splitPane.getBoundingClientRect().height + maxSize;
               }
             }
 
@@ -586,6 +595,10 @@ var SplitPane = function (_React$Component) {
         this.setState({ active: false });
       }
     }
+
+    // TODO: find a more elegant way to fix this. memoize calls to setSize?
+    // we have to check values since gDSFP is called on every render
+
   }, {
     key: 'render',
     value: function render() {
@@ -666,7 +679,7 @@ var SplitPane = function (_React$Component) {
           {
             className: pane1Classes,
             key: 'pane1',
-            ref: function ref(node) {
+            eleRef: function eleRef(node) {
               _this2.pane1 = node;
             },
             size: pane1Size,
@@ -683,9 +696,6 @@ var SplitPane = function (_React$Component) {
           onTouchStart: this.onTouchStart,
           onTouchEnd: this.onMouseUp,
           key: 'resizer',
-          ref: function ref(node) {
-            _this2.resizer = node;
-          },
           resizerClassName: resizerClassNamesIncludingDefault,
           split: split,
           style: resizerStyle || {}
@@ -695,7 +705,7 @@ var SplitPane = function (_React$Component) {
           {
             className: pane2Classes,
             key: 'pane2',
-            ref: function ref(node) {
+            eleRef: function eleRef(node) {
               _this2.pane2 = node;
             },
             size: pane2Size,
@@ -714,22 +724,40 @@ var SplitPane = function (_React$Component) {
   }, {
     key: 'setSize',
     value: function setSize(props, state) {
+      var instanceProps = state.instanceProps;
+
       var newState = {};
-      var isPanel1Primary = props.primary === 'first';
 
       var newSize = props.size !== undefined ? props.size : getDefaultSize(props.defaultSize, props.minSize, props.maxSize, state.draggedSize);
 
-      newState[isPanel1Primary ? 'pane1Size' : 'pane2Size'] = newSize;
+      var defaultSizeChanged = props.defaultSize !== instanceProps.defaultSize || props.minSize !== instanceProps.minSize || props.maxSize !== instanceProps.maxSize;
 
-      if (props.size !== undefined && props.size !== state.draggedSize) {
+      var shouldUpdateSize = props.size !== undefined ? props.size !== instanceProps.size : defaultSizeChanged;
+
+      if (props.size !== undefined && props.size !== state.draggedSize && shouldUpdateSize) {
         newState.draggedSize = newSize;
       }
 
+      var isPanel1Primary = props.primary === 'first';
+
+      if (shouldUpdateSize || props.primary !== state.instanceProps.primary) {
+        newState[isPanel1Primary ? 'pane1Size' : 'pane2Size'] = newSize;
+      }
+
+      // unset the size on the non primary panel
       if (props.primary !== state.instanceProps.primary) {
         newState[isPanel1Primary ? 'pane2Size' : 'pane1Size'] = undefined;
-        newState.instanceProps = { primary: props.primary };
       }
 
+      // update the values in instanceProps
+      instanceProps.primary = props.primary;
+      instanceProps.size = props.size;
+      instanceProps.defaultSize = props.defaultSize;
+      instanceProps.minSize = props.minSize;
+      instanceProps.maxSize = props.maxSize;
+
+      newState.instanceProps = instanceProps;
+
       return newState;
     }
   }]);

package/dist/index.esm.js

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Prefixer from 'inline-style-prefixer';
 import stylePropType from 'react-style-proptype';
-import ReactDOM from 'react-dom';
 
 /**
  * Copyright (c) 2013-present, Facebook, Inc.
@@ -244,7 +243,8 @@ var Pane = function (_React$PureComponent) {
           prefixer = _props.prefixer,
           split = _props.split,
           styleProps = _props.style,
-          size = _props.size;
+          size = _props.size,
+          eleRef = _props.eleRef;
 
 
       var classes = ['Pane', split, className];
@@ -267,7 +267,11 @@ var Pane = function (_React$PureComponent) {
 
       return React.createElement(
         'div',
-        { className: classes.join(' '), style: prefixer.prefix(style) },
+        {
+          ref: eleRef,
+          className: classes.join(' '),
+          style: prefixer.prefix(style)
+        },
         children
       );
     }
@@ -281,7 +285,8 @@ Pane.propTypes = {
   prefixer: PropTypes.instanceOf(Prefixer).isRequired,
   size: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   split: PropTypes.oneOf(['vertical', 'horizontal']),
-  style: stylePropType
+  style: stylePropType,
+  eleRef: PropTypes.func
 };
 
 Pane.defaultProps = {
@@ -409,16 +414,16 @@ var SplitPane = function (_React$Component) {
 
     // order of setting panel sizes.
     // 1. size
-    // 2. defaultSize
-    // 3. minSize
+    // 2. getDefaultSize(defaultSize, minsize, maxSize)
 
     var size = props.size,
         defaultSize = props.defaultSize,
         minSize = props.minSize,
+        maxSize = props.maxSize,
         primary = props.primary;
 
 
-    var initialSize = size !== undefined ? size : defaultSize !== undefined ? defaultSize : minSize;
+    var initialSize = size !== undefined ? size : getDefaultSize(defaultSize, minSize, maxSize, null);
 
     _this.state = {
       active: false,
@@ -428,7 +433,11 @@ var SplitPane = function (_React$Component) {
 
       // previous props that we need in static methods
       instanceProps: {
-        primary: primary
+        primary: primary,
+        size: size,
+        defaultSize: defaultSize,
+        minSize: minSize,
+        maxSize: maxSize
       }
     };
     return _this;
@@ -437,10 +446,10 @@ var SplitPane = function (_React$Component) {
   createClass(SplitPane, [{
     key: 'componentDidMount',
     value: function componentDidMount() {
-      this.setState(SplitPane.setSize(this.props, this.state));
       document.addEventListener('mouseup', this.onMouseUp);
       document.addEventListener('mousemove', this.onMouseMove);
       document.addEventListener('touchmove', this.onTouchMove);
+      this.setState(SplitPane.setSize(this.props, this.state));
     }
   }, {
     key: 'componentWillUnmount',
@@ -507,8 +516,8 @@ var SplitPane = function (_React$Component) {
         var ref = isPrimaryFirst ? this.pane1 : this.pane2;
         var ref2 = isPrimaryFirst ? this.pane2 : this.pane1;
         if (ref) {
-          var node = ReactDOM.findDOMNode(ref);
-          var node2 = ReactDOM.findDOMNode(ref2);
+          var node = ref;
+          var node2 = ref2;
 
           if (node.getBoundingClientRect) {
             var width = node.getBoundingClientRect().width;
@@ -534,11 +543,11 @@ var SplitPane = function (_React$Component) {
 
             var newMaxSize = maxSize;
             if (maxSize !== undefined && maxSize <= 0) {
-              var splPane = this.splitPane;
+              var splitPane = this.splitPane;
               if (split === 'vertical') {
-                newMaxSize = splPane.getBoundingClientRect().width + maxSize;
+                newMaxSize = splitPane.getBoundingClientRect().width + maxSize;
               } else {
-                newMaxSize = splPane.getBoundingClientRect().height + maxSize;
+                newMaxSize = splitPane.getBoundingClientRect().height + maxSize;
               }
             }
 
@@ -582,6 +591,10 @@ var SplitPane = function (_React$Component) {
         this.setState({ active: false });
       }
     }
+
+    // TODO: find a more elegant way to fix this. memoize calls to setSize?
+    // we have to check values since gDSFP is called on every render
+
   }, {
     key: 'render',
     value: function render() {
@@ -662,7 +675,7 @@ var SplitPane = function (_React$Component) {
           {
             className: pane1Classes,
             key: 'pane1',
-            ref: function ref(node) {
+            eleRef: function eleRef(node) {
               _this2.pane1 = node;
             },
             size: pane1Size,
@@ -679,9 +692,6 @@ var SplitPane = function (_React$Component) {
           onTouchStart: this.onTouchStart,
           onTouchEnd: this.onMouseUp,
           key: 'resizer',
-          ref: function ref(node) {
-            _this2.resizer = node;
-          },
           resizerClassName: resizerClassNamesIncludingDefault,
           split: split,
           style: resizerStyle || {}
@@ -691,7 +701,7 @@ var SplitPane = function (_React$Component) {
           {
             className: pane2Classes,
             key: 'pane2',
-            ref: function ref(node) {
+            eleRef: function eleRef(node) {
               _this2.pane2 = node;
             },
             size: pane2Size,
@@ -710,22 +720,40 @@ var SplitPane = function (_React$Component) {
   }, {
     key: 'setSize',
     value: function setSize(props, state) {
+      var instanceProps = state.instanceProps;
+
       var newState = {};
-      var isPanel1Primary = props.primary === 'first';
 
       var newSize = props.size !== undefined ? props.size : getDefaultSize(props.defaultSize, props.minSize, props.maxSize, state.draggedSize);
 
-      newState[isPanel1Primary ? 'pane1Size' : 'pane2Size'] = newSize;
+      var defaultSizeChanged = props.defaultSize !== instanceProps.defaultSize || props.minSize !== instanceProps.minSize || props.maxSize !== instanceProps.maxSize;
 
-      if (props.size !== undefined && props.size !== state.draggedSize) {
+      var shouldUpdateSize = props.size !== undefined ? props.size !== instanceProps.size : defaultSizeChanged;
+
+      if (props.size !== undefined && props.size !== state.draggedSize && shouldUpdateSize) {
         newState.draggedSize = newSize;
       }
 
+      var isPanel1Primary = props.primary === 'first';
+
+      if (shouldUpdateSize || props.primary !== state.instanceProps.primary) {
+        newState[isPanel1Primary ? 'pane1Size' : 'pane2Size'] = newSize;
+      }
+
+      // unset the size on the non primary panel
       if (props.primary !== state.instanceProps.primary) {
         newState[isPanel1Primary ? 'pane2Size' : 'pane1Size'] = undefined;
-        newState.instanceProps = { primary: props.primary };
       }
 
+      // update the values in instanceProps
+      instanceProps.primary = props.primary;
+      instanceProps.size = props.size;
+      instanceProps.defaultSize = props.defaultSize;
+      instanceProps.minSize = props.minSize;
+      instanceProps.maxSize = props.maxSize;
+
+      newState.instanceProps = instanceProps;
+
       return newState;
     }
   }]);

package/package.json

@@ -3,12 +3,13 @@
   "description": "React split-pane component",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",
+  "source": "src/index.js",
   "types": "index.d.ts",
   "files": [
     "dist",
     "index.d.ts"
   ],
-  "version": "0.1.81",
+  "version": "0.1.82",
   "repository": {
     "type": "git",
     "url": "https://github.com/tomkp/react-split-pane"
@@ -42,7 +43,6 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "babelify": "^7.3.0",
-    "browserify": "^14.4.0",
     "chai": "^4.0.2",
     "chai-spies": "^0.7.1",
     "coveralls": "^2.13.1",
@@ -57,7 +57,6 @@
     "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-react": "^7.9.1",
     "eslint-plugin-relay": "^0.0.21",
-    "express": "^4.15.3",
     "husky": "^0.14.3",
     "lint-staged": "^7.2.0",
     "mochify": "^5.8.0",
@@ -70,17 +69,15 @@
     "rollup-plugin-babel": "^3.0.4",
     "rollup-plugin-commonjs": "^9.1.3",
     "rollup-plugin-node-resolve": "^3.3.0",
-    "surge": "^0.19.0",
-    "typescript": "^2.5.3",
-    "watchify": "^3.9.0"
+    "surge": "^0.19.0"
   },
   "scripts": {
     "build": "npm run clean && rollup -c",
     "build:watch": "rollup -c --watch",
     "clean": "rimraf dist",
-    "test": "cross-env NODE_ENV=test mochify -R spec",
-    "test:watch": "cross-env NODE_ENV=test mochify -R spec --watch",
-    "test:coverage": "cross-env NODE_ENV=test mochify --plugin [ mochify-istanbul --exclude '**/test/**' --report lcovonly ] && cat lcov.info | coveralls && rm lcov.info",
+    "test": "cross-env NODE_ENV=test mochify -R spec --transform babelify",
+    "test:watch": "cross-env NODE_ENV=test mochify -R spec --watch --transform babelify",
+    "test:coverage": "cross-env NODE_ENV=test mochify --plugin [ mochify-istanbul --exclude '**/test/**' --report lcovonly ] --transform babelify && cat lcov.info | coveralls && rm lcov.info",
     "website:start": "npm run start --prefix website",
     "website:deploy": "npm run deploy --prefix website",
     "prettier": "prettier --write '{src,test}/**/*.js'",
@@ -94,13 +91,6 @@
       "git add"
     ]
   },
-  "browserify": {
-    "transform": [
-      [
-        "babelify"
-      ]
-    ]
-  },
   "babel": {
     "presets": [
       "./.babelrc.js"