archive-gh-me/echarts-for-react
1
0
Fork 0
mirror of https://github.com/hustcc/echarts-for-react.git synced 2025-12-08 20:16:09 +00:00
Code Issues Projects Releases Wiki Activity

replace element-resize-event with size-sensor

Browse Source
This commit is contained in:
hustcc 2018-06-06 16:40:53 +08:00
parent e6976da8ed
commit 7d67e5ce5e
8 changed files with 95 additions and 100 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
__tests__/index.spec.jsx
View File

@ -116,6 +116,23 @@ describe('index.js', () => {
expect(preId).not.toBe(component.instance().getEchartsInstance().id);
});
// update theme, should dispose echarts instance.
test('update className', () => {
const component = mount(<EchartsReact
option={option}
/>);
const preId = component.instance().getEchartsInstance().id;
// udpate props
component.setProps({
className: 'cls',
option: {},
});
component.update(); // force update
expect(preId).toBe(component.instance().getEchartsInstance().id);
});
// update opts, should dispose echarts instance.
test('update opts', () => {
const component = mount(<EchartsReact

84
__tests__/utils.spec.js
View File

@ -1,6 +1,6 @@
/* eslint-disable no-undef */
import { pick, debounce } from '../src/utils';
import { pick } from '../src/utils';
jest.useFakeTimers();
@ -15,46 +15,46 @@ describe('utils.js', () => {
expect(pick({ a: 1 }, ['a', 'b'])).toEqual({ a: 1 });
});
test('debounce', () => {
jest.clearAllTimers();
// test('debounce', () => {
// jest.clearAllTimers();
//
// const callback = jest.fn();
//
// let f = debounce(callback, 10);
//
// f(1);
// f(2);
// f(3);
//
// expect(clearTimeout).toHaveBeenCalledTimes(3);
// expect(setTimeout).toHaveBeenCalledTimes(3);
// expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 10);
//
// expect(callback).not.toBeCalled();
//
// jest.runAllTimers();
//
// expect(callback).toHaveBeenCalledTimes(1);
// expect(callback).toHaveBeenLastCalledWith(3);
//
// // default delay
// f = debounce(callback);
// f();
//
// expect(setTimeout).toHaveBeenCalledTimes(4);
// expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 50);
// });
const callback = jest.fn();
let f = debounce(callback, 10);
f(1);
f(2);
f(3);
expect(clearTimeout).toHaveBeenCalledTimes(3);
expect(setTimeout).toHaveBeenCalledTimes(3);
expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 10);
expect(callback).not.toBeCalled();
jest.runAllTimers();
expect(callback).toHaveBeenCalledTimes(1);
expect(callback).toHaveBeenLastCalledWith(3);
// default delay
f = debounce(callback);
f();
expect(setTimeout).toHaveBeenCalledTimes(4);
expect(setTimeout).toHaveBeenLastCalledWith(expect.any(Function), 50);
});
test('debounce function', () => {
const callback = jest.fn();
const f = debounce(callback, 100);
f(); // ran
jest.advanceTimersByTime(200);
f(); // cancel
jest.advanceTimersByTime(10);
f(); // ran
jest.runAllTimers();
expect(callback).toHaveBeenCalledTimes(2);
});
// test('debounce function', () => {
// const callback = jest.fn();
//
// const f = debounce(callback, 100);
// f(); // ran
// jest.advanceTimersByTime(200);
// f(); // cancel
// jest.advanceTimersByTime(10);
// f(); // ran
// jest.runAllTimers();
// expect(callback).toHaveBeenCalledTimes(2);
// });
});

6
demo/dist/bundle.js vendored
View File

File diff suppressed because one or more lines are too long

23
lib/core.js
View File

@ -17,14 +17,12 @@ var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _elementResizeEvent = require('element-resize-event');
var _elementResizeEvent2 = _interopRequireDefault(_elementResizeEvent);
var _fastDeepEqual = require('fast-deep-equal');
var _fastDeepEqual2 = _interopRequireDefault(_fastDeepEqual);
var _sizeSensor = require('size-sensor');
var _utils = require('./utils');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
@ -49,10 +47,11 @@ var EchartsReactCore = function (_Component) {
_this.dispose = function () {
if (_this.echartsElement) {
// if elementResizeEvent.unbind exist, just do it.
try {
_elementResizeEvent2['default'].unbind(_this.echartsElement);
} catch (_) {}
(0, _sizeSensor.clear)(_this.echartsElement);
} catch (e) {
console.warn(e);
}
// dispose echarts instance
_this.echartsLib.dispose(_this.echartsElement);
}
@ -71,7 +70,9 @@ var EchartsReactCore = function (_Component) {
if (typeof onChartReady === 'function') _this.props.onChartReady(echartObj);
// on resize
if (_this.echartsElement) {
(0, _elementResizeEvent2['default'])(_this.echartsElement, (0, _utils.debounce)(echartObj.resize));
(0, _sizeSensor.bind)(_this.echartsElement, function () {
echartObj.resize();
});
}
};
@ -152,7 +153,9 @@ var EchartsReactCore = function (_Component) {
if (!(0, _fastDeepEqual2['default'])(prevProps.style, this.props.style) || !(0, _fastDeepEqual2['default'])(prevProps.className, this.props.className)) {
try {
echartObj.resize();
} catch (_) {}
} catch (e) {
console.warn(e);
}
}
}
@ -167,7 +170,7 @@ var EchartsReactCore = function (_Component) {
// return the echart object
// dispose echarts and element-resize-event
// dispose echarts and clear size-sensor
// bind the events

22
lib/utils.js
View File

@ -3,30 +3,12 @@
Object.defineProperty(exports, "__esModule", {
value: true
});
/* eslint-disable import/prefer-default-export */
var pick = exports.pick = function pick(obj, keys) {
var r = {};
keys.forEach(function (key) {
r[key] = obj[key];
});
return r;
};
var debounce = exports.debounce = function debounce(fn) {
var delay = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 50;
var timer = null;
return function () {
var _this = this;
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(_this, args);
}, delay);
};
};

4
package.json
View File

@ -86,8 +86,8 @@
"webpack-dev-server": "^2.9.7"
},
"dependencies": {
"element-resize-event": "2.0.9",
"fast-deep-equal": "^2.0.1"
"fast-deep-equal": "^2.0.1",
"size-sensor": "^0.0.2"
},
"peerDependencies": {
"react": ">=0.13.2 || ^0.14 || ^15.0.0 || >=16.0.0",

24
src/core.jsx
View File

@ -1,8 +1,8 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import elementResizeEvent from 'element-resize-event';
import isEqual from 'fast-deep-equal';
import { pick, debounce } from './utils';
import { bind, clear } from 'size-sensor';
import { pick } from './utils';
export default class EchartsReactCore extends Component {
constructor(props) {
@ -47,7 +47,9 @@ export default class EchartsReactCore extends Component {
if (!isEqual(prevProps.style, this.props.style) || !isEqual(prevProps.className, this.props.className)) {
try {
echartObj.resize();
} catch (_) {}
} catch (e) {
console.warn(e);
}
}
}
@ -60,13 +62,14 @@ export default class EchartsReactCore extends Component {
getEchartsInstance = () => this.echartsLib.getInstanceByDom(this.echartsElement) ||
this.echartsLib.init(this.echartsElement, this.props.theme, this.props.opts);
// dispose echarts and element-resize-event
// dispose echarts and clear size-sensor
dispose = () => {
if (this.echartsElement) {
// if elementResizeEvent.unbind exist, just do it.
try {
elementResizeEvent.unbind(this.echartsElement);
} catch (_) {}
clear(this.echartsElement);
} catch (e) {
console.warn(e);
}
// dispose echarts instance
this.echartsLib.dispose(this.echartsElement);
}
@ -82,10 +85,9 @@ export default class EchartsReactCore extends Component {
if (typeof onChartReady === 'function') this.props.onChartReady(echartObj);
// on resize
if (this.echartsElement) {
elementResizeEvent(
this.echartsElement,
debounce(echartObj.resize)
);
bind(this.echartsElement, () => {
echartObj.resize();
});
}
};

15
src/utils.js
View File

@ -1,3 +1,6 @@
/* eslint-disable import/prefer-default-export */
export const pick = (obj, keys) => {
const r = {};
keys.forEach((key) => {
@ -5,15 +8,3 @@ export const pick = (obj, keys) => {
});
return r;
};
export const debounce = (fn, delay = 50) => {
let timer = null;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
};