Upgrade to React 15 and a bit of cleanup

.npmignore

@@ -0,0 +1,2 @@
+test/
+webpack.config.js

README.md

@@ -1,15 +1,10 @@
-# This makes use of parent context, currently only found on react >= 0.14 in [react master](https://github.com/facebook/react).
-
-To install from react master branch:
-```
-git clone https://github.com/facebook/react.git
-cd react
-npm run build
-cd npm-react
-npm link
-```
-
-Then in your project folder:
-```
-npm link react
-```
+react-flexbox-svg
+=================
+
+Flexbox for SVG in React, using css-flexbox.
+
+
+License
+-------
+
+This projects is licensed under the ISC license.

lib/flex.js

@@ -1,13 +1,15 @@
 'use strict';
 
-var _inherits = require('babel-runtime/helpers/inherits')['default'];
-
 var _get = require('babel-runtime/helpers/get')['default'];
 
+var _inherits = require('babel-runtime/helpers/inherits')['default'];
+
 var _createClass = require('babel-runtime/helpers/create-class')['default'];
 
 var _classCallCheck = require('babel-runtime/helpers/class-call-check')['default'];
 
+var _objectWithoutProperties = require('babel-runtime/helpers/object-without-properties')['default'];
+
 var _extends = require('babel-runtime/helpers/extends')['default'];
 
 var _Object$assign = require('babel-runtime/core-js/object/assign')['default'];
@@ -38,9 +40,13 @@ var _flexboxProps2 = _interopRequireDefault(_flexboxProps);
 
 var Component = _react2['default'].Component;
 
+function getDisplayName(Component) {
+  return Component.displayName || Component.name || 'Component';
+}
+
 function _setStyle(style, styles) {
   if (style === undefined) style = {};
-  var path = arguments[2] === undefined ? [] : arguments[2];
+  var path = arguments.length <= 2 || arguments[2] === undefined ? [] : arguments[2];
 
   if (styles.style === undefined) {
     styles.style = style;
@@ -61,6 +67,18 @@ function _setStyle(style, styles) {
 }
 
 var FlexContext = (function (_Component) {
+  _inherits(FlexContext, _Component);
+
+  _createClass(FlexContext, null, [{
+    key: 'childContextTypes',
+    value: {
+      styleTools: _react2['default'].PropTypes.object.isRequired,
+      waitForLayoutCalculation: _react2['default'].PropTypes.func.isRequired,
+      deregister: _react2['default'].PropTypes.func.isRequired
+    },
+    enumerable: true
+  }]);
+
   function FlexContext(props, context) {
     var _this = this;
 
@@ -82,8 +100,6 @@ var FlexContext = (function (_Component) {
     this.styleTools = {};
   }
 
-  _inherits(FlexContext, _Component);
-
   _createClass(FlexContext, [{
     key: 'getChildContext',
     value: function getChildContext() {
@@ -109,15 +125,13 @@ var FlexContext = (function (_Component) {
 
       var _setStyle2 = _setStyle(undefined, this.stylesRoot);
 
-      var layoutFunc = _setStyle2.setStyle;
-
-      this.styleTools.setStyle = layoutFunc;
+      this.styleTools.setStyle = _setStyle2.setStyle;
     }
   }, {
     key: 'computeLayoutAndBroadcastResults',
     value: function computeLayoutAndBroadcastResults() {
-      var flexLayout = (0, _cssLayout2['default'])(this.stylesRoot);
-      this.layoutNotifier.emit('layout-update', flexLayout);
+      (0, _cssLayout2['default'])(this.stylesRoot);
+      this.layoutNotifier.emit('layout-update', this.stylesRoot);
     }
   }, {
     key: 'componentWillMount',
@@ -139,32 +153,55 @@ var FlexContext = (function (_Component) {
     value: function componentDidUpdate() {
       this.computeLayoutAndBroadcastResults();
     }
-  }], [{
-    key: 'childContextTypes',
-    value: {
-      styleTools: _react2['default'].PropTypes.object.isRequired,
-      waitForLayoutCalculation: _react2['default'].PropTypes.func.isRequired,
-      deregister: _react2['default'].PropTypes.func.isRequired
-    },
-    enumerable: true
   }]);
 
   return FlexContext;
 })(Component);
 
 exports.FlexContext = FlexContext;
 var FlexBox = function FlexBox(Composed) {
-  var componentStyles = arguments[1] === undefined ? {} : arguments[1];
+  var componentStyles = arguments.length <= 1 || arguments[1] === undefined ? {} : arguments[1];
   return (function (_Component2) {
-    var _class = function _class(props, context) {
+    _inherits(_class, _Component2);
+
+    _createClass(_class, [{
+      key: 'getMyLayout',
+      value: function getMyLayout(layout) {
+        this.pathToNode.forEach(function (childIndex) {
+          layout = layout.children[childIndex];
+        });
+
+        return layout;
+      }
+    }], [{
+      key: 'displayName',
+      value: 'FlexBox(' + getDisplayName(Composed) + ')',
+      enumerable: true
+    }, {
+      key: 'contextTypes',
+      value: {
+        styleTools: _react2['default'].PropTypes.object.isRequired,
+        waitForLayoutCalculation: _react2['default'].PropTypes.func.isRequired,
+        deregister: _react2['default'].PropTypes.func.isRequired
+      },
+      enumerable: true
+    }, {
+      key: 'childContextTypes',
+      value: {
+        styleTools: _react2['default'].PropTypes.object.isRequired
+      },
+      enumerable: true
+    }]);
+
+    function _class(props, context) {
       var _this2 = this;
 
       _classCallCheck(this, _class);
 
       _get(Object.getPrototypeOf(_class.prototype), 'constructor', this).call(this, props);
 
       this.handleLayoutCalculation = function (layout) {
-        _this2.setState({ layout: _this2.getMyLayout(layout) });
+        _this2.setState({ layout: _this2.getMyLayout(layout).layout });
       };
 
       var style = _Object$assign(componentStyles, props.style);
@@ -181,47 +218,29 @@ var FlexBox = function FlexBox(Composed) {
         layout: { top: 0, left: 0, width: 0, height: 0 },
         styles: svgStyles
       };
-    };
-
-    _inherits(_class, _Component2);
+    }
 
     _createClass(_class, [{
-      key: 'getMyLayout',
-      value: function getMyLayout(layout) {
-        this.pathToNode.forEach(function (childIndex) {
-          layout = layout.children[childIndex];
-        });
-
-        return layout;
-      }
-    }, {
       key: 'componentWillMount',
       value: function componentWillMount() {
         var _context$styleTools$setStyle = this.context.styleTools.setStyle(this.flexStyles);
 
-        var setStyleFunc = _context$styleTools$setStyle.setStyle;
-        var path = _context$styleTools$setStyle.path;
-
-        this.styleTools.setStyle = setStyleFunc;
-        this.pathToNode = path;
+        this.styleTools.setStyle = _context$styleTools$setStyle.setStyle;
+        this.pathToNode = _context$styleTools$setStyle.path;
 
         this.context.waitForLayoutCalculation(this.handleLayoutCalculation);
       }
-    }, {
-      key: 'componentWillUnmount',
-      value: function componentWillUnmount() {
-        this.context.deregister(this.handleLayoutCalculation);
-      }
     }, {
       key: 'componentWillReceiveProps',
-      value: function componentWillReceiveProps() {
-        var _context$styleTools$setStyle2 = this.context.styleTools.setStyle(this.flexStyles);
+      value: function componentWillReceiveProps(nextProps) {
+        var _partitionStyles2 = partitionStyles(nextProps.style);
 
-        var setStyleFunc = _context$styleTools$setStyle2.setStyle;
-        var path = _context$styleTools$setStyle2.path;
+        var flexStyles = _partitionStyles2.flexStyles;
 
-        this.styleTools.setStyle = setStyleFunc;
-        this.pathToNode = path;
+        var _context$styleTools$setStyle2 = this.context.styleTools.setStyle(flexStyles);
+
+        this.styleTools.setStyle = _context$styleTools$setStyle2.setStyle;
+        this.pathToNode = _context$styleTools$setStyle2.path;
 
         this.context.waitForLayoutCalculation(this.handleLayoutCalculation);
       }
@@ -236,30 +255,17 @@ var FlexBox = function FlexBox(Composed) {
       key: 'render',
       value: function render() {
         var transformation = 'translate(' + this.state.layout.left + ',' + this.state.layout.top + ')';
+        var _props = this.props;
+        var style = _props.style;
+
+        var other = _objectWithoutProperties(_props, ['style']);
+
         return _react2['default'].createElement(
           'g',
           { transform: transformation },
-          _react2['default'].createElement(Composed, _extends({ layout: this.state.layout, style: this.state.styles }, this.props))
+          _react2['default'].createElement(Composed, _extends({ layout: this.state.layout, style: this.state.styles }, other))
         );
       }
-    }], [{
-      key: 'displayName',
-      value: 'FlexBox',
-      enumerable: true
-    }, {
-      key: 'contextTypes',
-      value: {
-        styleTools: _react2['default'].PropTypes.object.isRequired,
-        waitForLayoutCalculation: _react2['default'].PropTypes.func.isRequired,
-        deregister: _react2['default'].PropTypes.func.isRequired
-      },
-      enumerable: true
-    }, {
-      key: 'childContextTypes',
-      value: {
-        styleTools: _react2['default'].PropTypes.object.isRequired
-      },
-      enumerable: true
     }]);
 
     return _class;

package.json

@@ -1,28 +1,30 @@
 {
   "name": "react-flexbox-svg",
   "version": "0.9.3",
-  "description": "",
-  "main": "index.js",
+  "description": "Flexbox for SVG in React, using css-flexbox",
+  "repository": "dlmanning/react-flexbox-svg",
+  "main": "lib/flex.js",
   "scripts": {
     "test-serve": "webpack-dev-server --content-base test/ --hot --inline -d",
     "prepublish": "babel src --out-dir lib"
   },
   "author": "",
   "license": "ISC",
   "peerDependencies": {
-    "react": "0.14.0-alpha3"
+    "babel-runtime": ">=5.1.11",
+    "react": ">=15.0.0"
   },
   "dependencies": {
-    "babel-runtime": "^5.1.11",
     "css-layout": "^1.0.0",
-    "webpack": "^1.12.1",
-    "webpack-dev-server": "^1.10.1",
     "wolfy87-eventemitter": "^4.2.11"
   },
   "devDependencies": {
     "babel": "^5.1.11",
     "babel-core": "^5.1.10",
     "babel-loader": "^5.0.0",
+    "babel-runtime": "^5.1.11",
+    "react": "^15.0.0",
+    "react-dom": "^15.0.0",
     "webpack": "^1.8.5",
     "webpack-dev-server": "^1.8.0"
   }

src/flex.jsx

@@ -4,6 +4,10 @@ import computeLayout from 'css-layout';
 import isFlexBoxProperty from './flexbox-props';
 const { Component } = React;
 
+function getDisplayName (Component) {
+  return Component.displayName || Component.name || 'Component';
+}
+
 function setStyle (style = {}, styles, path = []) {
   if (styles.style === undefined) {
     styles.style = style;
@@ -88,7 +92,7 @@ export class FlexContext extends Component {
 }
 
 export const FlexBox = (Composed, componentStyles = {}) => class extends Component {
-  static displayName = 'FlexBox';
+  static displayName = `FlexBox(${getDisplayName(Composed)})`;
 
   static contextTypes = {
     styleTools: React.PropTypes.object.isRequired,

test/main.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import { default as React, Component } from 'react';
-// import Chessboard from './chessboard.jsx';
+import ReactDOM from 'react-dom';
 import Thing from './test.js';
 
 window.React = React;
@@ -12,4 +12,4 @@ class App extends Component {
   }
 }
 
-React.render(<App />, document.getElementById('app'));
+ReactDOM.render(<App />, document.getElementById('app'));