Merge pull request #311 from konstantin24121/issue310

add animation events #310

Author: xile611

demo/component/BarChart.js

@@ -213,6 +213,14 @@ export default React.createClass({
     console.log(`Pv Bar (${index}) Click: `, data);
   },
 
+  handleBarAnimationStart() {
+    console.log('Animation start');
+  },
+
+  handleBarAnimationEnd() {
+    console.log('Animation end');
+  },
+
   render() {
     const { data, data01, data02 } = this.state;
 
@@ -236,7 +244,7 @@ export default React.createClass({
             <Legend />
             <Tooltip />
             <CartesianGrid vertical={false}/>
-            <Bar yAxisId="a" dataKey="uv" label={<RenderLabel />}>
+            <Bar yAxisId="a" dataKey="uv" label={<RenderLabel />} onAnimationStart={this.handleBarAnimationStart} onAnimationEnd={this.handleBarAnimationEnd} >
               {
                 data.map((entry, index) => (
                   <Cell key={`cell-${index}`} fill={colors[index % 20]}/>

src/cartesian/Area.js

@@ -60,6 +60,8 @@ class Area extends Component {
     onMouseEnter: PropTypes.func,
     onMouseLeave: PropTypes.func,
     onClick: PropTypes.func,
+    onAnimationStart: PropTypes.func,
+    onAnimationEnd: PropTypes.func,
 
     animationId: PropTypes.number,
     isAnimationActive: PropTypes.bool,
@@ -84,10 +86,14 @@ class Area extends Component {
     curve: true,
     activeDot: true,
 
+
     isAnimationActive: true,
     animationBegin: 0,
     animationDuration: 1500,
     animationEasing: 'ease',
+
+    onAnimationStart: () => {},
+    onAnimationEnd: () => {},
   };
 
   constructor(props, ctx) {
@@ -101,10 +107,12 @@ class Area extends Component {
 
   handleAnimationEnd = () => {
     this.setState({ isAnimationFinished: true });
+    this.props.onAnimationEnd();
   };
 
   handleAnimationStart = () => {
     this.setState({ isAnimationFinished: false });
+    this.props.onAnimationStart();
   };
 
   renderCurve() {

src/cartesian/Bar.js

@@ -50,6 +50,8 @@ class Bar extends Component {
     onMouseEnter: PropTypes.func,
     onMouseLeave: PropTypes.func,
     onClick: PropTypes.func,
+    onAnimationStart: PropTypes.func,
+    onAnimationEnd: PropTypes.func,
 
     animationId: PropTypes.number,
     isAnimationActive: PropTypes.bool,
@@ -71,6 +73,9 @@ class Bar extends Component {
     animationBegin: 0,
     animationDuration: 1500,
     animationEasing: 'ease',
+
+    onAnimationStart: () => {},
+    onAnimationEnd: () => {},
   };
 
   state = {
@@ -79,10 +84,12 @@ class Bar extends Component {
 
   handleAnimationEnd = () => {
     this.setState({ isAnimationFinished: true });
+    this.props.onAnimationEnd();
   };
 
   handleAnimationStart = () => {
     this.setState({ isAnimationFinished: false });
+    this.props.onAnimationStart();
   };
 
   renderRectangle(option, props) {

src/cartesian/Line.js

@@ -58,6 +58,9 @@ class Line extends Component {
     onMouseEnter: PropTypes.func,
     onMouseLeave: PropTypes.func,
     onClick: PropTypes.func,
+    onAnimationStart: PropTypes.func,
+    onAnimationEnd: PropTypes.func,
+
     isAnimationActive: PropTypes.bool,
     animationBegin: PropTypes.number,
     animationDuration: PropTypes.number,
@@ -86,6 +89,9 @@ class Line extends Component {
     animationBegin: 0,
     animationDuration: 1500,
     animationEasing: 'ease',
+
+    onAnimationStart: () => {},
+    onAnimationEnd: () => {},
   };
 
   constructor(props, ctx) {
@@ -166,10 +172,12 @@ class Line extends Component {
 
   handleAnimationEnd = () => {
     this.setState({ isAnimationFinished: true });
+    this.props.onAnimationEnd();
   };
 
   handleAnimationStart = () => {
     this.setState({ isAnimationFinished: false });
+    this.props.onAnimationStart();
   };
 
   renderLabelItem(option, props, value) {