diff --git a/examples/example_resize.html b/examples/example_resize.html new file mode 100644 index 0000000..465755a --- /dev/null +++ b/examples/example_resize.html @@ -0,0 +1,19 @@ + + + Resize + + + + +
+
+ + + diff --git a/examples/example_resize.jsx b/examples/example_resize.jsx new file mode 100644 index 0000000..4f4abe0 --- /dev/null +++ b/examples/example_resize.jsx @@ -0,0 +1,24 @@ +import React from "react" +import ReactDOM from "react-dom" +import {Resize} from "../src/index.jsx" + + +class ExampleApp extends React.Component { + + render(){ + return( +
+ + + + + +
+ ) + } +} + +ReactDOM.render( + , + document.getElementById("react-app") +) diff --git a/examples/webpack.config.js b/examples/webpack.config.js index d9f894f..01cea02 100755 --- a/examples/webpack.config.js +++ b/examples/webpack.config.js @@ -6,7 +6,8 @@ module.exports = function () { example3: "./example3.jsx", example_loading: "./example_loading.jsx", example_legend: "./example_legend.jsx", - example_axis: "./example_axis.jsx" + example_axis: "./example_axis.jsx", + example_resize: "./example_resize.jsx" }, output: { path: __dirname + "/static", diff --git a/index.js b/index.js index af77041..8b9db01 100644 --- a/index.js +++ b/index.js @@ -1202,7 +1202,7 @@ var YStep = function (_React$Component3) { x2: this.props.x - this.props.length, y2: this.props.y, stroke: this.props.color })); step.push(_react2.default.createElement(YTickLabel, { key: "label" + this.props.y, x: this.props.x - 10, y: this.props.y, - value: this.props.value, color: this.props.color })); + value: this.props.value, yScale: this.props.yScale, color: this.props.color })); return _react2.default.createElement( "g", @@ -1268,7 +1268,7 @@ var YAxis = function (_React$Component4) { if (this.props.showYLabels) { yAxis.push(_react2.default.createElement(YStep, { key: "yStep" + i, x: this.props.x, y: tickPos, value: yVal, length: 10, color: this.props.style.labelColor, - showYLabels: this.props.showYLabels })); + showYLabels: this.props.showYLabels, yScale: this.props.yScale })); } if (this.props.showGrid) { @@ -1373,7 +1373,7 @@ var XStep = function (_React$Component6) { x2: this.props.x, y2: this.props.y + this.props.length, stroke: this.props.color })); step.push(_react2.default.createElement(XTickLabel, { key: "label" + this.props.x, x: this.props.x, y: this.props.y, - value: this.props.value, color: this.props.color })); + value: this.props.value, xScale: this.props.xScale, color: this.props.color })); return _react2.default.createElement( "g", @@ -1439,7 +1439,7 @@ var XAxisContinuous = function (_React$Component7) { } xAxis.push(_react2.default.createElement(XStep, { key: "xStep" + i, x: tickPos, y: this.props.y, value: xVal, length: 10, color: this.props.style.labelColor, - showXLabels: this.props.showXLabels })); + showXLabels: this.props.showXLabels, xScale: this.props.xScale })); } } @@ -1810,6 +1810,10 @@ var _react = __webpack_require__(1); var _react2 = _interopRequireDefault(_react); +var _propTypes = __webpack_require__(2); + +var _propTypes2 = _interopRequireDefault(_propTypes); + var _LoadingIcon = __webpack_require__(15); var _LoadingIcon2 = _interopRequireDefault(_LoadingIcon); @@ -1834,6 +1838,7 @@ var Resize = function (_React$Component) { width: parseInt(_this.props.width), resizing: false }; + _this.timeouts = []; return _this; } @@ -1857,9 +1862,10 @@ var Resize = function (_React$Component) { resizing: true, width: this.elem.parentNode.clientWidth * parseInt(this.props.width) / 100 }); - var updateFunction; - clearTimeout(updateFunction); - updateFunction = setTimeout(this.updateDimensions.bind(this), 1200); + for (var i = 0; i < this.timeouts.length; i++) { + clearTimeout(this.timeouts[i]); + } + this.timeouts.push(setTimeout(this.updateDimensions.bind(this), 1200)); } } }, { @@ -1929,6 +1935,10 @@ var Resize = function (_React$Component) { return Resize; }(_react2.default.Component); +Resize.propTypes = { + width: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]).isRequired +}; + exports.default = Resize; /***/ }), diff --git a/src/Axis.jsx b/src/Axis.jsx index fb9c6d2..94a4cc1 100644 --- a/src/Axis.jsx +++ b/src/Axis.jsx @@ -74,7 +74,7 @@ class YStep extends React.Component { ) step.push( + value={this.props.value} yScale={this.props.yScale} color={this.props.color} /> ) return( @@ -131,7 +131,7 @@ class YAxis extends React.Component { yAxis.push( + showYLabels={this.props.showYLabels} yScale={this.props.yScale}/> ) } @@ -217,7 +217,7 @@ class XStep extends React.Component { ) step.push( + value={this.props.value} xScale={this.props.xScale} color={this.props.color} /> ) return( @@ -274,7 +274,7 @@ class XAxisContinuous extends React.Component { xAxis.push( + showXLabels={this.props.showXLabels} xScale={this.props.xScale}/> ) } } diff --git a/src/Resize.jsx b/src/Resize.jsx index 3276ce5..f6d2338 100644 --- a/src/Resize.jsx +++ b/src/Resize.jsx @@ -1,4 +1,5 @@ import React from "react" +import PropTypes from "prop-types" import LoadingIcon from "./LoadingIcon.jsx" @@ -10,6 +11,7 @@ class Resize extends React.Component { width: parseInt(this.props.width), resizing: false } + this.timeouts = [] } parseWidth(width) { @@ -29,9 +31,10 @@ class Resize extends React.Component { resizing: true, width: this.elem.parentNode.clientWidth * parseInt(this.props.width) / 100 }) - var updateFunction - clearTimeout(updateFunction) - updateFunction = setTimeout(this.updateDimensions.bind(this), 1200) + for (let i = 0; i < this.timeouts.length; i++) { + clearTimeout(this.timeouts[i]) + } + this.timeouts.push(setTimeout(this.updateDimensions.bind(this), 1200)) } } @@ -90,4 +93,8 @@ class Resize extends React.Component { } +Resize.propTypes = { + width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired +} + export default Resize