unbind can not be called

Author: hustcc

README.md

@@ -2,7 +2,7 @@
 
 A very simple echarts(v3.0) wrapper for react.
 
-[![Build Status](https://travis-ci.org/hustcc/echarts-for-react.svg?branch=master)](https://travis-ci.org/hustcc/echarts-for-react) [![npm](https://img.shields.io/npm/v/echarts-for-react.svg)](https://www.npmjs.com/package/echarts-for-react) [![npm](https://img.shields.io/npm/dt/echarts-for-react.svg)](https://www.npmjs.com/package/echarts-for-react) [![npm](https://img.shields.io/npm/l/echarts-for-react.svg)](https://www.npmjs.com/package/echarts-for-react) ![echarts supported](https://img.shields.io/badge/echarts-%5E3.0.0-blue.svg) ![react supported](https://img.shields.io/badge/React-%3E%3D0.13.2%20%7C%7C%20%5E0.14.0%20%7C%7C%20%5E15.0.0-blue.svg)
+[![Build Status](https://travis-ci.org/hustcc/echarts-for-react.svg?branch=master)](https://travis-ci.org/hustcc/echarts-for-react) [![Coverage Status](https://coveralls.io/repos/github/hustcc/echarts-for-react/badge.svg?branch=master)](https://coveralls.io/github/hustcc/echarts-for-react?branch=master) [![npm](https://img.shields.io/npm/v/echarts-for-react.svg)](https://www.npmjs.com/package/echarts-for-react) [![npm](https://img.shields.io/npm/dt/echarts-for-react.svg)](https://www.npmjs.com/package/echarts-for-react) [![npm](https://img.shields.io/npm/l/echarts-for-react.svg)](https://www.npmjs.com/package/echarts-for-react) ![echarts supported](https://img.shields.io/badge/echarts-%5E3.0.0-blue.svg) ![react supported](https://img.shields.io/badge/React-%3E%3D0.13.2%20%7C%7C%20%5E0.14%20%7C%7C%20%5E15.0.0%20%7C%7C%20%3E%3D16.0.0-blue.svg)
 
 # 1. install
 

demo/dist/bundle.js

@@ -45,6 +45,16 @@ var EchartsReactCore = function (_Component) {
       return _this.echartsInstance.getInstanceByDom(_this.echartsElement) || _this.echartsInstance.init(_this.echartsElement, _this.props.theme);
     };
 
+    _this.dispose = function () {
+      if (_this.echartsElement) {
+        // if elementResizeEvent.unbind exist, just do it.
+        try {
+          _elementResizeEvent2['default'].unbind(_this.echartsElement);
+        } catch (_) {}
+        _this.echartsInstance.dispose(_this.echartsElement);
+      }
+    };
+
     _this.rerender = function () {
       var _this$props = _this.props,
           onEvents = _this$props.onEvents,
@@ -117,7 +127,7 @@ var EchartsReactCore = function (_Component) {
 
       // 切换 theme 的时候，需要 dispost 之后才新建
       if (this.props.theme !== prevProps.theme) {
-        this.echartsInstance.dispose(this.echartsElement);
+        this.dispose();
 
         this.rerender(); // 重建
         return;
@@ -135,18 +145,15 @@ var EchartsReactCore = function (_Component) {
   }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
-      if (this.echartsElement) {
-        // if elementResizeEvent.unbind exist, just do it.
-        if (typeof _elementResizeEvent2['default'].unbind === 'function') {
-          _elementResizeEvent2['default'].unbind(this.echartsElement);
-        }
-        this.echartsInstance.dispose(this.echartsElement);
-      }
+      this.dispose();
     }
 
     // return the echart object
 
 
+    // dispose echarts and element-resize-event
+
+
     // bind the events
 
 

lib/core.js

@@ -1,20 +1,30 @@
-import React, { Component } from 'react';
+/// <reference types="react" />
+
+import * as React from 'react';
+
+type Func = (...args: any[]) => any;
+
+interface EventMap {
+  [key: string]: Func,
+}
+
+interface ObjectMap {
+  [key: string]: any,
+}
 
 // Index
 export interface ReactEchartsPropsTypes {
-  option: object;
+  option: ObjectMap;
   notMerge?: boolean;
   lazyUpdate?: boolean;
-  style?: object;
+  style?: ObjectMap;
   className?: string;
-  theme?: string;
-  onChartReady?: () => void;
+  theme?: string | null;
+  onChartReady?: Func;
   showLoading?: boolean;
-  loadingOption?: object;
-  onEvents?: object;
+  loadingOption?: ObjectMap;
+  onEvents?: EventMap;
   echarts?: object;
 }
 
-export class ReactEcharts extends Component<ReactEchartsPropsTypes, any> {
-  getEchartsInstance: () => any;
-}
+export default class ReactEcharts extends React.Component<ReactEchartsPropsTypes, any>{}

lib/index.d.ts

@@ -1,6 +1,6 @@
 {
   "name": "echarts-for-react",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "baidu Echarts(v3.x) components for react",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -81,24 +81,20 @@
     "react-test-renderer": "^15.6.2",
     "rimraf": "^2.6.2",
     "style-loader": "^0.19.1",
-    "ts-jest": "^21.2.3",
-    "typescript": "^2.6.2",
     "webpack": "^3.10.0",
     "webpack-dev-server": "^2.9.7"
   },
   "dependencies": {
-    "element-resize-event": "2.0.7"
+    "element-resize-event": "2.0.8"
   },
   "peerDependencies": {
-    "react": ">=0.13.2 || ^0.14 || ^15.0.0 || >=16.0.0-alpha.1 <17.0.0",
+    "react": ">=0.13.2 || ^0.14 || ^15.0.0 || >=16.0.0",
     "prop-types": "^15.5.7",
     "echarts": "^3.0.0"
   },
   "jest": {
-    "testRegex": "(/__tests__/.*\\.spec)\\.(ts|tsx|js|jsx)$",
+    "testRegex": "(/__tests__/.*\\.spec)\\.(js|jsx)$",
     "moduleFileExtensions": [
-      "ts",
-      "tsx",
       "js",
       "jsx",
       "json"
@@ -108,13 +104,12 @@
       "jest-canvas-mock"
     ],
     "transform": {
-      "^.+\\.js[x]?$": "babel-jest",
-      "^.+\\.ts[x]?$": "ts-jest"
+      "^.+\\.js[x]?$": "babel-jest"
     },
     "moduleNameMapper": {},
     "collectCoverage": true,
     "collectCoverageFrom": [
-      "src/*.{js,jsx,ts,tsx}",
+      "src/*.{js,jsx}",
       "!**/node_modules/**",
       "!**/vendor/**"
     ]

package.json

@@ -23,7 +23,7 @@ export default class EchartsReactCore extends Component {
 
     // 切换 theme 的时候，需要 dispost 之后才新建
     if (this.props.theme !== prevProps.theme) {
-      this.echartsInstance.dispose(this.echartsElement);
+      this.dispose();
 
       this.rerender(); // 重建
       return;
@@ -38,19 +38,24 @@ export default class EchartsReactCore extends Component {
 
   // remove
   componentWillUnmount() {
-    if (this.echartsElement) {
-      // if elementResizeEvent.unbind exist, just do it.
-      if (typeof elementResizeEvent.unbind === 'function') {
-        elementResizeEvent.unbind(this.echartsElement);
-      }
-      this.echartsInstance.dispose(this.echartsElement);
-    }
+    this.dispose();
   }
 
   // return the echart object
   getEchartsInstance = () => this.echartsInstance.getInstanceByDom(this.echartsElement) ||
     this.echartsInstance.init(this.echartsElement, this.props.theme);
 
+  // dispose echarts and element-resize-event
+  dispose = () => {
+    if (this.echartsElement) {
+      // if elementResizeEvent.unbind exist, just do it.
+      try {
+        elementResizeEvent.unbind(this.echartsElement);
+      } catch (_) {}
+      this.echartsInstance.dispose(this.echartsElement);
+    }
+  };
+
   rerender = () => {
     const { onEvents, onChartReady } = this.props;