diff --git a/.npmignore b/.npmignore
new file mode 100644
index 0000000..21fee20
--- /dev/null
+++ b/.npmignore
@@ -0,0 +1,2 @@
+test/
+webpack.config.js
diff --git a/README.md b/README.md
index dd491c9..49c55c9 100644
--- a/README.md
+++ b/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.
diff --git a/index.js b/index.js
deleted file mode 100644
index 49439be..0000000
--- a/index.js
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('./lib/flex.js');
diff --git a/lib/flex.js b/lib/flex.js
index 5d8b1e4..94f26b3 100644
--- a/lib/flex.js
+++ b/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,14 +153,6 @@ 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;
@@ -154,9 +160,40 @@ var FlexContext = (function (_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);
@@ -164,7 +201,7 @@ var FlexBox = function FlexBox(Composed) {
_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;
diff --git a/package.json b/package.json
index debc5ff..6a5ef0f 100644
--- a/package.json
+++ b/package.json
@@ -1,8 +1,9 @@
{
"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"
@@ -10,19 +11,20 @@
"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"
}
diff --git a/src/flex.jsx b/src/flex.jsx
index c1e5025..b91b241 100644
--- a/src/flex.jsx
+++ b/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,
diff --git a/test/main.js b/test/main.js
index 0ef3b43..9a34274 100644
--- a/test/main.js
+++ b/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(, document.getElementById('app'));
\ No newline at end of file
+ReactDOM.render(, document.getElementById('app'));