From 35b1efae0cafdd7dae68c471a944e8c5233b665d Mon Sep 17 00:00:00 2001 From: Scimonster Date: Mon, 24 Jul 2017 14:07:52 +0300 Subject: [PATCH 1/3] Codemod to use prop-types package --- package.json | 3 ++- src/PlotlyComponent.js | 17 +++++++++-------- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index 704a4af..229459f 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/PlotlyComponent.js b/src/PlotlyComponent.js index d4ee681..9493c75 100644 --- a/src/PlotlyComponent.js +++ b/src/PlotlyComponent.js @@ -1,17 +1,18 @@ +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 + 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: function() { From 8d2a4cbee7af5c39c13e6d7427b7e0335a486c31 Mon Sep 17 00:00:00 2001 From: Scimonster Date: Mon, 24 Jul 2017 14:16:13 +0300 Subject: [PATCH 2/3] Use ES6 syntax instead of React.createClass --- src/PlotlyComponent.js | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/src/PlotlyComponent.js b/src/PlotlyComponent.js index 9493c75..39370e1 100644 --- a/src/PlotlyComponent.js +++ b/src/PlotlyComponent.js @@ -2,9 +2,9 @@ import PropTypes from 'prop-types'; import React from 'react'; import cloneDeep from 'lodash.clonedeep'; -let createPlotlyComponent = (plotlyInstance) => React.createClass({ - displayName: 'Plotly', - propTypes: { +let createPlotlyComponent = (plotlyInstance) => class Plotly extends React.Component { + + static propTypes = { data: PropTypes.array, layout: PropTypes.object, config: PropTypes.object, @@ -13,9 +13,9 @@ let createPlotlyComponent = (plotlyInstance) => React.createClass({ onHover: PropTypes.func, onUnHover: PropTypes.func, onSelected: PropTypes.func - }, + }; - attachListeners: function() { + attachListeners() { if (this.props.onClick) this.container.on('plotly_click', this.props.onClick); if (this.props.onBeforeHover) @@ -26,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 @@ -46,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; @@ -67,6 +67,6 @@ let createPlotlyComponent = (plotlyInstance) => React.createClass({ return
this.container=node} /> } -}); +}; export default createPlotlyComponent; From 0392a2231ac6e5b85f0d12a136d7f833294a61bc Mon Sep 17 00:00:00 2001 From: Scimonster Date: Mon, 24 Jul 2017 14:25:43 +0300 Subject: [PATCH 3/3] Add React 16 as peer-dep; bump version --- .gitignore | 1 + bower.json | 2 +- package.json | 4 ++-- 3 files changed, 4 insertions(+), 3 deletions(-) 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 229459f..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", @@ -24,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"