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'));