diff --git a/.gitignore b/.gitignore index a65b417..3063f07 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ lib +node_modules diff --git a/bower.json b/bower.json index 23c45f8..53e7f2e 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "name": "react-plotlyjs", "main": "lib/PlotlyComponent.js", - "version": "0.4.1", + "version": "0.4.2", "homepage": "https://github.com/benjeffery/react-plotlyjs", "authors": [ "Ben Jeffery" diff --git a/package.json b/package.json index 704a4af..f1bb33e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-plotlyjs", - "version": "0.4.1", + "version": "0.4.2", "description": "ReactJS / PlotlyJS integration. Draw plotly graphs in your react app.", "main": "lib/PlotlyComponent.js", "author": "Ben Jeffery", @@ -10,7 +10,8 @@ "url": "https://github.com/benjeffery/react-plotlyjs.git" }, "dependencies": { - "lodash.clonedeep": "^4.5.0" + "lodash.clonedeep": "^4.5.0", + "prop-types": "^15.5.10" }, "devDependencies": { "babel-cli": "^6.22.2", @@ -23,7 +24,7 @@ "gulp-util": "^3.0.8" }, "peerDependencies": { - "react": "^15.0.0" + "react": "^15.0.0||^16.0.0" }, "browserify-shim": { "react": "global:React" diff --git a/src/PlotlyComponent.js b/src/PlotlyComponent.js index d4ee681..39370e1 100644 --- a/src/PlotlyComponent.js +++ b/src/PlotlyComponent.js @@ -1,20 +1,21 @@ +import PropTypes from 'prop-types'; import React from 'react'; import cloneDeep from 'lodash.clonedeep'; -let createPlotlyComponent = (plotlyInstance) => React.createClass({ - displayName: 'Plotly', - propTypes: { - data: React.PropTypes.array, - layout: React.PropTypes.object, - config: React.PropTypes.object, - onClick: React.PropTypes.func, - onBeforeHover: React.PropTypes.func, - onHover: React.PropTypes.func, - onUnHover: React.PropTypes.func, - onSelected: React.PropTypes.func - }, +let createPlotlyComponent = (plotlyInstance) => class Plotly extends React.Component { - attachListeners: function() { + static propTypes = { + data: PropTypes.array, + layout: PropTypes.object, + config: PropTypes.object, + onClick: PropTypes.func, + onBeforeHover: PropTypes.func, + onHover: PropTypes.func, + onUnHover: PropTypes.func, + onSelected: PropTypes.func + }; + + attachListeners() { if (this.props.onClick) this.container.on('plotly_click', this.props.onClick); if (this.props.onBeforeHover) @@ -25,18 +26,18 @@ let createPlotlyComponent = (plotlyInstance) => React.createClass({ this.container.on('plotly_unhover', this.props.onUnHover); if (this.props.onSelected) this.container.on('plotly_selected', this.props.onSelected); - }, + } shouldComponentUpdate(nextProps) { //TODO logic for detecting change in props return true; - }, + } componentDidMount() { let {data, layout, config} = this.props; plotlyInstance.newPlot(this.container, data, cloneDeep(layout), config); //We clone the layout as plotly mutates it. this.attachListeners(); - }, + } componentDidUpdate(prevProps) { //TODO use minimal update for given changes @@ -45,17 +46,17 @@ let createPlotlyComponent = (plotlyInstance) => React.createClass({ plotlyInstance.newPlot(this.container, data, cloneDeep(layout), config); //We clone the layout as plotly mutates it. this.attachListeners(); } - }, + } - componentWillUnmount: function() { + componentWillUnmount() { plotlyInstance.purge(this.container); - }, + } - resize: function() { + resize() { plotlyInstance.Plots.resize(this.container); - }, + } - render: function () { + render() { let {data, layout, config, ...other } = this.props; //Remove props that would cause React to warn for unknown props. delete other.onClick; @@ -66,6 +67,6 @@ let createPlotlyComponent = (plotlyInstance) => React.createClass({ return