add react@15.5.0 supported

.gitignore

@@ -1,2 +1,3 @@
 node_modules/
 npm-debug.*
+.idea

demo/ChartShowLoadingComponent.jsx

@@ -4,6 +4,7 @@ import ReactEcharts from '../lib/echarts-for-react';
 const ChartShowLoadingComponent = React.createClass({
     propTypes: {
     },
+    _t: null,
     getOtion: function() {
         const option = {
             title: {
@@ -43,7 +44,7 @@ const ChartShowLoadingComponent = React.createClass({
         return option;
     },
     onChartReady: function(chart) {
-        setTimeout(function() {
+        this._t = setTimeout(function() {
             chart.hideLoading();
         }, 3000);
     },
@@ -57,6 +58,9 @@ const ChartShowLoadingComponent = React.createClass({
         };
         return option;
     },
+    componentWillUnmount: function() {
+        clearTimeout(this._t);
+    },
     render: function() {
         let code = "onChartReady: function(chart) {\n" +
                    "  'chart.hideLoading();\n" +

lib/echarts-for-react.js

@@ -1,9 +1,19 @@
 'use strict';
 
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 var _echarts = require('echarts');
 
 var _echarts2 = _interopRequireDefault(_echarts);
 
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
@@ -14,89 +24,130 @@ var _elementResizeEvent2 = _interopRequireDefault(_elementResizeEvent);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-var ReactEcharts = _react2['default'].createClass({
-    displayName: 'ReactEcharts',
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-    propTypes: {
-        option: _react2['default'].PropTypes.object.isRequired,
-        notMerge: _react2['default'].PropTypes.bool,
-        lazyUpdate: _react2['default'].PropTypes.bool,
-        style: _react2['default'].PropTypes.object,
-        className: _react2['default'].PropTypes.string,
-        theme: _react2['default'].PropTypes.string,
-        onChartReady: _react2['default'].PropTypes.func,
-        showLoading: _react2['default'].PropTypes.bool,
-        loadingOption: _react2['default'].PropTypes.object,
-        onEvents: _react2['default'].PropTypes.object
-    },
-    // first add
-    componentDidMount: function componentDidMount() {
-        var echartObj = this.renderEchartDom();
-        var onEvents = this.props.onEvents || {};
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
 
-        this.bindEvents(echartObj, onEvents);
-        // on chart ready
-        if (typeof this.props.onChartReady === 'function') this.props.onChartReady(echartObj);
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-        // on resize
-        (0, _elementResizeEvent2['default'])(this.refs.echartsDom, function () {
-            echartObj.resize();
-        });
-    },
+var ReactEcharts = function (_React$Component) {
+  _inherits(ReactEcharts, _React$Component);
 
+  function ReactEcharts(props) {
+    _classCallCheck(this, ReactEcharts);
+
+    var _this = _possibleConstructorReturn(this, (ReactEcharts.__proto__ || Object.getPrototypeOf(ReactEcharts)).call(this, props));
+
+    _this.timeagoInstance = null;
+    return _this;
+  }
+  // first add
+
+
+  _createClass(ReactEcharts, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      var echartObj = this.renderEchartDom();
+      var onEvents = this.props.onEvents || {};
+
+      this.bindEvents(echartObj, onEvents);
+      // on chart ready
+      if (typeof this.props.onChartReady === 'function') this.props.onChartReady(echartObj);
+
+      // on resize
+      (0, _elementResizeEvent2['default'])(this.refs.echartsDom, function () {
+        echartObj.resize();
+      });
+    }
     // update
-    componentDidUpdate: function componentDidUpdate() {
-        this.renderEchartDom();
-        this.bindEvents(this.getEchartsInstance(), this.props.onEvents || []);
-    },
 
+  }, {
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      this.renderEchartDom();
+      this.bindEvents(this.getEchartsInstance(), this.props.onEvents || []);
+    }
     // remove
-    componentWillUnmount: function componentWillUnmount() {
-        _echarts2['default'].dispose(this.refs.echartsDom);
-    },
 
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      _echarts2['default'].dispose(this.refs.echartsDom);
+    }
 
     //bind the events
-    bindEvents: function bindEvents(instance, events) {
-        var _loop = function _loop(eventName) {
-            // ignore the event config which not satisfy
-            if (typeof eventName === 'string' && typeof events[eventName] === 'function') {
-                // binding event
-                instance.off(eventName);
-                instance.on(eventName, function (param) {
-                    events[eventName](param, instance);
-                });
-            }
-        };
 
-        for (var eventName in events) {
-            _loop(eventName);
+  }, {
+    key: 'bindEvents',
+    value: function bindEvents(instance, events) {
+      var _loop = function _loop(eventName) {
+        // ignore the event config which not satisfy
+        if (typeof eventName === 'string' && typeof events[eventName] === 'function') {
+          // binding event
+          instance.off(eventName);
+          instance.on(eventName, function (param) {
+            events[eventName](param, instance);
+          });
         }
-    },
+      };
 
-    // render the dom
-    renderEchartDom: function renderEchartDom() {
-        // init the echart object
-        var echartObj = this.getEchartsInstance();
-        // set the echart option
-        echartObj.setOption(this.props.option, this.props.notMerge || false, this.props.lazyUpdate || false);
-        // set loading mask
-        if (this.props.showLoading) echartObj.showLoading(this.props.loadingOption || null);else echartObj.hideLoading();
-
-        return echartObj;
-    },
-    getEchartsInstance: function getEchartsInstance() {
-        // return the echart object
-        return _echarts2['default'].getInstanceByDom(this.refs.echartsDom) || _echarts2['default'].init(this.refs.echartsDom, this.props.theme);
-    },
-    render: function render() {
-        var style = this.props.style || {
-            height: '300px'
-        };
-        // for render
-        return _react2['default'].createElement('div', { ref: 'echartsDom',
-            className: this.props.className,
-            style: style });
+      for (var eventName in events) {
+        _loop(eventName);
+      }
     }
-});
-module.exports = ReactEcharts;
+    // render the dom
+
+  }, {
+    key: 'renderEchartDom',
+    value: function renderEchartDom() {
+      // init the echart object
+      var echartObj = this.getEchartsInstance();
+      // set the echart option
+      echartObj.setOption(this.props.option, this.props.notMerge || false, this.props.lazyUpdate || false);
+      // set loading mask
+      if (this.props.showLoading) echartObj.showLoading(this.props.loadingOption || null);else echartObj.hideLoading();
+
+      return echartObj;
+    }
+  }, {
+    key: 'getEchartsInstance',
+    value: function getEchartsInstance() {
+      // return the echart object
+      return _echarts2['default'].getInstanceByDom(this.refs.echartsDom) || _echarts2['default'].init(this.refs.echartsDom, this.props.theme);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var style = this.props.style || {
+        height: '300px'
+      };
+      // for render
+      return _react2['default'].createElement('div', { ref: 'echartsDom',
+        className: this.props.className,
+        style: style });
+    }
+  }]);
+
+  return ReactEcharts;
+}(_react2['default'].Component);
+
+exports['default'] = ReactEcharts;
+;
+
+ReactEcharts.propTypes = {
+  option: _react2['default'].PropTypes.object.isRequired,
+  notMerge: _react2['default'].PropTypes.bool,
+  lazyUpdate: _react2['default'].PropTypes.bool,
+  style: _react2['default'].PropTypes.object,
+  className: _react2['default'].PropTypes.string,
+  theme: _react2['default'].PropTypes.string,
+  onChartReady: _react2['default'].PropTypes.func,
+  showLoading: _react2['default'].PropTypes.bool,
+  loadingOption: _react2['default'].PropTypes.object,
+  onEvents: _react2['default'].PropTypes.object
+};
+
+ReactEcharts.defaultProps = {
+  live: true,
+  locale: 'en'
+};

package.json

@@ -1,6 +1,6 @@
 {
   "name": "echarts-for-react",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "baidu Echarts(v3.0) components for react",
   "main": "lib/echarts-for-react",
   "scripts": {
@@ -68,6 +68,7 @@
     "element-resize-event": "^2.0.5"
   },
   "peerDependencies": {
-    "react": ">=0.13.2 || ^0.14 || ^15.0.0"
+    "react": ">=0.13.2 || ^0.14 || ^15.0.0",
+    "prop-types": "^15.0.0"
   }
 }

src/echarts-for-react.js

@@ -1,89 +1,98 @@
 import echarts from 'echarts';
+import PropTypes from 'prop-types';
 import React from 'react';
-
 import elementResizeEvent from 'element-resize-event';
 
-const ReactEcharts = React.createClass({
-    propTypes: {
-        option: React.PropTypes.object.isRequired,
-        notMerge: React.PropTypes.bool,
-        lazyUpdate: React.PropTypes.bool,
-        style: React.PropTypes.object,
-        className: React.PropTypes.string,
-        theme: React.PropTypes.string,
-        onChartReady: React.PropTypes.func,
-        showLoading: React.PropTypes.bool,
-        loadingOption: React.PropTypes.object,
-        onEvents: React.PropTypes.object
-    },
-    // first add
-    componentDidMount() {
-        let echartObj = this.renderEchartDom();
-        let onEvents = this.props.onEvents || {};
+export default class ReactEcharts extends React.Component {
+    constructor(props) {
+    super(props)
+    this.timeagoInstance = null;
+  }
+  // first add
+  componentDidMount() {
+    let echartObj = this.renderEchartDom();
+    let onEvents = this.props.onEvents || {};
 
-        this.bindEvents(echartObj, onEvents);
-        // on chart ready
-        if (typeof this.props.onChartReady === 'function') this.props.onChartReady(echartObj);
+    this.bindEvents(echartObj, onEvents);
+    // on chart ready
+    if (typeof this.props.onChartReady === 'function') this.props.onChartReady(echartObj);
 
-        // on resize
-        elementResizeEvent(this.refs.echartsDom, function() {
-            echartObj.resize();
+    // on resize
+    elementResizeEvent(this.refs.echartsDom, function() {
+      echartObj.resize();
+    });
+  }
+  // update
+  componentDidUpdate() {
+    this.renderEchartDom();
+    this.bindEvents(this.getEchartsInstance(), this.props.onEvents || []);
+  }
+  // remove
+  componentWillUnmount() {
+    echarts.dispose(this.refs.echartsDom)
+  }
+
+  //bind the events
+  bindEvents(instance, events) {
+    var _loop = function _loop(eventName) {
+      // ignore the event config which not satisfy
+      if (typeof eventName === 'string' && typeof events[eventName] === 'function') {
+        // binding event
+        instance.off(eventName);
+        instance.on(eventName, function(param) {
+          events[eventName](param, instance);
         });
-    },
-    // update
-    componentDidUpdate() {
-        this.renderEchartDom();
-        this.bindEvents(this.getEchartsInstance(), this.props.onEvents || []);
-    },
-    // remove
-    componentWillUnmount() {
-        echarts.dispose(this.refs.echartsDom)
-    },
+      }
+    };
 
-    //bind the events
-    bindEvents(instance, events) {
-        var _loop = function _loop(eventName) {
-            // ignore the event config which not satisfy
-            if (typeof eventName === 'string' && typeof events[eventName] === 'function') {
-                // binding event
-                instance.off(eventName);
-                instance.on(eventName, function(param) {
-                    events[eventName](param, instance);
-                });
-            }
-        };
-
-        for (var eventName in events) {
-            _loop(eventName);
-        }
-
-    },
-    // render the dom
-    renderEchartDom() {
-        // init the echart object
-        let echartObj = this.getEchartsInstance();
-        // set the echart option
-        echartObj.setOption(this.props.option, this.props.notMerge || false, this.props.lazyUpdate || false);
-        // set loading mask
-        if (this.props.showLoading) echartObj.showLoading(this.props.loadingOption || null);
-        else echartObj.hideLoading();
-
-        return echartObj;
-    },
-    getEchartsInstance() {
-        // return the echart object
-        return echarts.getInstanceByDom(this.refs.echartsDom) || echarts.init(this.refs.echartsDom, this.props.theme);
-    },
-    render() {
-        let style = this.props.style || {
-            height: '300px'
-        };
-        // for render
-        return (
-            <div ref='echartsDom'
-                className={this.props.className}
-                style={style} />
-        );
+    for (var eventName in events) {
+      _loop(eventName);
     }
-});
-module.exports = ReactEcharts;
+
+  }
+  // render the dom
+  renderEchartDom() {
+    // init the echart object
+    let echartObj = this.getEchartsInstance();
+    // set the echart option
+    echartObj.setOption(this.props.option, this.props.notMerge || false, this.props.lazyUpdate || false);
+    // set loading mask
+    if (this.props.showLoading) echartObj.showLoading(this.props.loadingOption || null);
+    else echartObj.hideLoading();
+
+    return echartObj;
+  }
+  getEchartsInstance() {
+    // return the echart object
+    return echarts.getInstanceByDom(this.refs.echartsDom) || echarts.init(this.refs.echartsDom, this.props.theme);
+  }
+  render() {
+    let style = this.props.style || {
+      height: '300px'
+    };
+    // for render
+    return (
+      <div ref='echartsDom'
+          className={this.props.className}
+          style={style} />
+    );
+  }
+};
+
+ReactEcharts.propTypes = {
+  option: React.PropTypes.object.isRequired,
+  notMerge: React.PropTypes.bool,
+  lazyUpdate: React.PropTypes.bool,
+  style: React.PropTypes.object,
+  className: React.PropTypes.string,
+  theme: React.PropTypes.string,
+  onChartReady: React.PropTypes.func,
+  showLoading: React.PropTypes.bool,
+  loadingOption: React.PropTypes.object,
+  onEvents: React.PropTypes.object
+};
+
+ReactEcharts.defaultProps = {
+  live: true,
+  locale: 'en'
+};