Merge pull request #56 from fusioncharts/feature/update-react

Feature/update react

Author: rohanoid5

example/ChartViewer.js

@@ -7,46 +7,59 @@ import ReactFC from '../lib/ReactFC';
 
 ReactFC.fcRoot(FusionCharts, Charts, TimeSeries, FusionTheme);
 
-const dataSource = {
-  chart: {
-    caption: 'Countries With Most Oil Reserves [2017-18]',
-    subCaption: 'In MMbbl = One Million barrels',
-    xAxisName: 'Country',
-    yAxisName: 'Reserves (MMbbl)',
-    numberSuffix: 'K',
-    theme: 'fusion'
-  },
-  data: [
-    { label: 'Venezuela', value: '290' },
-    { label: 'Saudi', value: '260' },
-    { label: 'Canada', value: '180' },
-    { label: 'Iran', value: '140' },
-    { label: 'Russia', value: '115' },
-    { label: 'UAE', value: '100' },
-    { label: 'US', value: '30' },
-    { label: 'China', value: '30' }
-  ]
-};
-
-const chartConfigs = {
-  type: 'column2d',
-  width: 600,
-  height: 400,
-  dataFormat: 'json',
-  dataSource
-};
+const BAR = 'bar2d';
 
 class ChartViewer extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = {};
+    this.state = {
+      inverted: false,
+      type: BAR,
+      dataSource: {
+        chart: {
+          caption: 'Countries With Most Oil Reserves [2017-18]',
+          subCaption: 'In MMbbl = One Million barrels',
+          xAxisName: 'Country',
+          yAxisName: 'Reserves (MMbbl)',
+          numberSuffix: 'K',
+          theme: 'fusion'
+        },
+        data: [
+          { label: 'Venezuela', value: '290' },
+          { label: 'Saudi', value: '260' },
+          { label: 'Canada', value: '180' },
+          { label: 'Iran', value: '140' },
+          { label: 'Russia', value: '115' },
+          { label: 'UAE', value: '100' },
+          { label: 'US', value: '30' },
+          { label: 'China', value: '300' }
+        ]
+      }
+    };
+    this.onChange = this.onChange.bind(this);
+  }
+
+  onChange() {
+    this.setState(({ dataSource }) => ({
+      dataSource: {
+        ...dataSource,
+        chart: { ...dataSource.chart, caption: 'CHANGED IT!!!!!!!' }
+      }
+    }));
   }
 
   render() {
     return (
       <div>
-        <ReactFC {...chartConfigs} />
+        <ReactFC
+          type={this.state.type}
+          width={this.state.inverted ? '400' : '600'}
+          height={this.state.inverted ? '600' : '400'}
+          dataFormat="json"
+          dataSource={this.state.dataSource}
+        />
+        <button onClick={this.onChange}>CHANGE</button>
       </div>
     );
   }

lib/ReactFC.js

@@ -66,7 +66,7 @@ function (_React$Component) {
     _this = _possibleConstructorReturn(this, _getPrototypeOf(ReactFC).call(this, props));
     _this.containerId = (0, _v["default"])();
     _this.oldOptions = null;
-    _this.FusionCharts = props.fcLibrary || ReactFC.fusionChartsCore;
+    _this.FusionCharts = props.fcLibrary || ReactFC.fusionChartsCore || window.FusionCharts;
     return _this;
   }
 
@@ -76,13 +76,11 @@ function (_React$Component) {
       this.renderChart();
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
-      if (!this.oldOptions) {
-        return;
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      if (prevProps !== this.props) {
+        this.detectChanges(this.props);
       }
-
-      this.detectChanges(nextProps);
     }
   }, {
     key: "componentWillUnmount",

package.json

@@ -58,12 +58,12 @@
     "fusioncharts": "^3.13.5-sr.1",
     "jest": "^22.4.2",
     "lodash": "^4.17.11",
+    "nodemon": "^2.0.2",
     "prop-types": "^15.6.2",
-    "react": "^16.2.0",
+    "react": "^16.12.0",
     "react-addons-test-utils": "15.3.0",
     "react-component-gulp-tasks": "^0.7.6",
-    "react-dom": "^16.2.0",
-    "react-native": "^0.54.2",
+    "react-dom": "^16.12.0",
     "react-test-renderer": "^16.2.0",
     "serve": "^10.0.1",
     "webpack": "^4.20.2",
@@ -79,7 +79,8 @@
     "build:example": "npm run build:lib && webpack --config webpack.config.example.js",
     "start": "npm run build:example && serve example/",
     "test": "jest --coverage --verbose",
-    "test:report": "npm test && serve coverage/lcov-report -o"
+    "test:report": "npm test && serve coverage/lcov-report -o",
+    "watch": "nodemon --ignore example/dist --watch example --watch src --exec \"npm run start\""
   },
   "keywords": [
     "react",

src/ReactFC.js

@@ -1,5 +1,4 @@
 import React from 'react';
-// import FusionCharts from 'fusioncharts/core';
 import uuid from 'uuid/v4';
 import * as utils from './utils/utils';
 import fusionChartsOptions from './utils/options';
@@ -21,18 +20,18 @@ class ReactFC extends React.Component {
 
     this.containerId = uuid();
     this.oldOptions = null;
-    this.FusionCharts = props.fcLibrary || ReactFC.fusionChartsCore;
+    this.FusionCharts =
+      props.fcLibrary || ReactFC.fusionChartsCore || window.FusionCharts;
   }
 
   componentDidMount() {
     this.renderChart();
   }
 
-  componentWillReceiveProps(nextProps) {
-    if (!this.oldOptions) {
-      return;
+  componentDidUpdate(prevProps) {
+    if (prevProps !== this.props) {
+      this.detectChanges(this.props);
     }
-    this.detectChanges(nextProps);
   }
 
   componentWillUnmount() {