New context API

packages/victory-core/src/index.js

@@ -38,3 +38,5 @@ export { default as Text } from "./victory-primitives/text";
 export { default as CommonProps } from "./victory-util/common-props";
 export { default as Wrapper } from "./victory-util/wrapper";
 export { default as Axis } from "./victory-util/axis";
+export { default as TimerContext } from "./victory-util/timer-context";
+export { default as PortalContext } from "./victory-portal/portal-context";

packages/victory-core/src/victory-animation/victory-animation.js

@@ -4,6 +4,7 @@ import PropTypes from "prop-types";
 import * as d3Ease from "d3-ease";
 import { victoryInterpolator } from "./util";
 import Timer from "../victory-util/timer";
+import TimerContext from "../victory-util/timer-context";
 import isEqual from "react-fast-compare";
 
 export default class VictoryAnimation extends React.Component {
@@ -66,9 +67,7 @@ export default class VictoryAnimation extends React.Component {
     easing: "quadInOut"
   };
 
-  static contextTypes = {
-    getTimer: PropTypes.func
-  };
+  static contextType = TimerContext;
 
   constructor(props) {
     super(props);
@@ -89,7 +88,7 @@ export default class VictoryAnimation extends React.Component {
       so we bind functionToBeRunEachFrame to current instance of victory animation class
     */
     this.functionToBeRunEachFrame = this.functionToBeRunEachFrame.bind(this);
-    this.getTimer = this.getTimer.bind(this);
+    this.timer = this.getTimer();
   }
 
   componentDidMount() {
@@ -103,7 +102,7 @@ export default class VictoryAnimation extends React.Component {
     const equalProps = isEqual(this.props, nextProps);
     if (!equalProps) {
       /* cancel existing loop if it exists */
-      this.getTimer().unsubscribe(this.loopID);
+      this.timer.unsubscribe(this.loopID);
 
       /* If an object was supplied */
       if (!Array.isArray(nextProps.data)) {
@@ -124,15 +123,15 @@ export default class VictoryAnimation extends React.Component {
 
   componentWillUnmount() {
     if (this.loopID) {
-      this.getTimer().unsubscribe(this.loopID);
+      this.timer.unsubscribe(this.loopID);
     } else {
-      this.getTimer().stop();
+      this.timer.stop();
     }
   }
 
   getTimer() {
-    if (this.context.getTimer) {
-      return this.context.getTimer();
+    if (this.context && this.context.globalTimer) {
+      return this.context.globalTimer;
     }
     if (!this.timer) {
       this.timer = new Timer();
@@ -156,13 +155,10 @@ export default class VictoryAnimation extends React.Component {
       /* reset step to zero */
       if (this.props.delay) {
         setTimeout(() => {
-          this.loopID = this.getTimer().subscribe(
-            this.functionToBeRunEachFrame,
-            this.props.duration
-          );
+          this.loopID = this.timer.subscribe(this.functionToBeRunEachFrame, this.props.duration);
         }, this.props.delay);
       } else {
-        this.loopID = this.getTimer().subscribe(this.functionToBeRunEachFrame, this.props.duration);
+        this.loopID = this.timer.subscribe(this.functionToBeRunEachFrame, this.props.duration);
       }
     } else if (this.props.onEnd) {
       this.props.onEnd();
@@ -186,7 +182,7 @@ export default class VictoryAnimation extends React.Component {
         }
       });
       if (this.loopID) {
-        this.getTimer().unsubscribe(this.loopID);
+        this.timer.unsubscribe(this.loopID);
       }
       this.queue.shift();
       this.traverseQueue();

packages/victory-core/src/victory-container/victory-container.js

@@ -3,7 +3,9 @@ import PropTypes from "prop-types";
 import CustomPropTypes from "../victory-util/prop-types";
 import { assign, defaults, uniqueId, isObject, isFunction } from "lodash";
 import Portal from "../victory-portal/portal";
+import PortalContext from "../victory-portal/portal-context";
 import Timer from "../victory-util/timer";
+import TimerContext from "../victory-util/timer-context";
 import Helpers from "../victory-util/helpers";
 
 export default class VictoryContainer extends React.Component {
@@ -37,20 +39,11 @@ export default class VictoryContainer extends React.Component {
     responsive: true
   };
 
-  static contextTypes = {
-    getTimer: PropTypes.func
-  };
-
-  static childContextTypes = {
-    portalUpdate: PropTypes.func,
-    portalRegister: PropTypes.func,
-    portalDeregister: PropTypes.func,
-    getTimer: PropTypes.func
-  };
+  static contextType = TimerContext;
 
   constructor(props) {
     super(props);
-    this.getTimer = this.getTimer.bind(this);
+    this.timer = this.getTimer();
     this.containerId =
       !isObject(props) || props.containerId === undefined
         ? uniqueId("victory-container-")
@@ -77,33 +70,24 @@ export default class VictoryContainer extends React.Component {
     }
   }
 
-  getChildContext() {
-    return {
-      portalUpdate: this.portalUpdate,
-      portalRegister: this.portalRegister,
-      portalDeregister: this.portalDeregister,
-      getTimer: this.getTimer
-    };
-  }
-
   componentDidMount() {
     if (this.shouldHandleWheel && this.containerRef) {
       this.containerRef.addEventListener("wheel", this.handleWheel);
     }
   }
 
   componentWillUnmount() {
-    if (!this.context.getTimer) {
-      this.getTimer().stop();
+    if (this.timer) {
+      this.timer.stop();
     }
     if (this.shouldHandleWheel && this.containerRef) {
       this.containerRef.removeEventListener("wheel", this.handleWheel);
     }
   }
 
   getTimer() {
-    if (this.context.getTimer) {
-      return this.context.getTimer();
+    if (this.context && this.context.globalTimer) {
+      return this.context.globalTimer;
     }
     if (!this.timer) {
       this.timer = new Timer();
@@ -150,16 +134,28 @@ export default class VictoryContainer extends React.Component {
       style: portalSvgStyle
     };
     return (
-      <div style={defaults({}, style, divStyle)} className={className} ref={this.saveContainerRef}>
-        <svg {...svgProps} style={svgStyle}>
-          {title ? <title id={this.getIdForElement("title")}>{title}</title> : null}
-          {desc ? <desc id={this.getIdForElement("desc")}>{desc}</desc> : null}
-          {children}
-        </svg>
-        <div style={portalDivStyle}>
-          {React.cloneElement(portalComponent, { ...portalProps, ref: this.savePortalRef })}
+      <PortalContext.Provider
+        value={{
+          portalUpdate: this.portalUpdate,
+          portalRegister: this.portalRegister,
+          portalDeregister: this.portalDeregister
+        }}
+      >
+        <div
+          style={defaults({}, style, divStyle)}
+          className={className}
+          ref={this.saveContainerRef}
+        >
+          <svg {...svgProps} style={svgStyle}>
+            {title ? <title id={this.getIdForElement("title")}>{title}</title> : null}
+            {desc ? <desc id={this.getIdForElement("desc")}>{desc}</desc> : null}
+            {children}
+          </svg>
+          <div style={portalDivStyle}>
+            {React.cloneElement(portalComponent, { ...portalProps, ref: this.savePortalRef })}
+          </div>
         </div>
-      </div>
+      </PortalContext.Provider>
     );
   }
 

packages/victory-core/src/victory-portal/portal-context.js

@@ -0,0 +1,10 @@
+import React from "react";
+
+/**
+ * The React context object consumers may use to access the context of the
+ * portal.
+ */
+const PortalContext = React.createContext({});
+PortalContext.displayName = "PortalContext";
+
+export default PortalContext;

packages/victory-core/src/victory-portal/victory-portal.js

@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import { defaults } from "lodash";
 import Log from "../victory-util/log";
 import Helpers from "../victory-util/helpers";
+import PortalContext from "./portal-context";
 
 export default class VictoryPortal extends React.Component {
   static displayName = "VictoryPortal";
@@ -18,11 +19,7 @@ export default class VictoryPortal extends React.Component {
     groupComponent: <g />
   };
 
-  static contextTypes = {
-    portalDeregister: PropTypes.func,
-    portalRegister: PropTypes.func,
-    portalUpdate: PropTypes.func
-  };
+  static contextType = PortalContext;
 
   componentDidMount() {
     if (!this.checkedContext) {

packages/victory-core/src/victory-transition/victory-transition.js

@@ -4,6 +4,7 @@ import VictoryAnimation from "../victory-animation/victory-animation";
 import Collection from "../victory-util/collection";
 import Helpers from "../victory-util/helpers";
 import Timer from "../victory-util/timer";
+import TimerContext from "../victory-util/timer-context";
 import Transitions from "../victory-util/transitions";
 import { defaults, isFunction, pick, isObject } from "lodash";
 import isEqual from "react-fast-compare";
@@ -17,6 +18,8 @@ export default class VictoryTransition extends React.Component {
     children: PropTypes.node
   };
 
+  static contextType = TimerContext;
+
   constructor(props) {
     super(props);
     this.state = {
@@ -27,7 +30,7 @@ export default class VictoryTransition extends React.Component {
     const polar = child.props.polar;
     this.continuous = !polar && child.type && child.type.continuous === true;
     this.getTransitionState = this.getTransitionState.bind(this);
-    this.getTimer = this.getTimer.bind(this);
+    this.timer = this.getTimer();
   }
 
   componentDidMount() {
@@ -36,21 +39,21 @@ export default class VictoryTransition extends React.Component {
 
   shouldComponentUpdate(nextProps) {
     if (!isEqual(this.props, nextProps)) {
-      this.getTimer().bypassAnimation();
+      this.timer.bypassAnimation();
       this.setState(this.getTransitionState(this.props, nextProps), () =>
-        this.getTimer().resumeAnimation()
+        this.timer.resumeAnimation()
       );
     }
     return true;
   }
 
   componentWillUnmount() {
-    this.getTimer().stop();
+    this.timer.stop();
   }
 
   getTimer() {
-    if (this.context.getTimer) {
-      return this.context.getTimer();
+    if (this.context && this.context.globalTimer) {
+      return this.context.globalTimer;
     }
     if (!this.timer) {
       this.timer = new Timer();

packages/victory-core/src/victory-util/timer-context.js

@@ -0,0 +1,11 @@
+import React from "react";
+import Timer from "./timer";
+
+/**
+ * The React context object consumers may use to access or override the global
+ * timer.
+ */
+const TimerContext = React.createContext({ globalTimer: new Timer() });
+TimerContext.displayName = "TimerContext";
+
+export default TimerContext;

packages/victory-shared-events/src/victory-shared-events.js

@@ -1,7 +1,7 @@
 import { assign, isFunction, defaults, isEmpty, fromPairs } from "lodash";
 import React from "react";
 import PropTypes from "prop-types";
-import { PropTypes as CustomPropTypes, Events, Helpers, Timer } from "victory-core";
+import { PropTypes as CustomPropTypes, Events, Helpers, TimerContext } from "victory-core";
 import isEqual from "react-fast-compare";
 
 export default class VictorySharedEvents extends React.Component {
@@ -51,29 +51,16 @@ export default class VictorySharedEvents extends React.Component {
     groupComponent: <g />
   };
 
-  static contextTypes = {
-    getTimer: PropTypes.func
-  };
-
-  static childContextTypes = {
-    getTimer: PropTypes.func
-  };
+  static contextType = TimerContext;
 
   constructor(props) {
     super(props);
     this.state = this.state || {};
     this.getScopedEvents = Events.getScopedEvents.bind(this);
     this.getEventState = Events.getEventState.bind(this);
-    this.getTimer = this.getTimer.bind(this);
     this.baseProps = this.getBaseProps(props);
   }
 
-  getChildContext() {
-    return {
-      getTimer: this.getTimer
-    };
-  }
-
   shouldComponentUpdate(nextProps) {
     if (!isEqual(this.props, nextProps)) {
       this.baseProps = this.getBaseProps(nextProps);
@@ -83,16 +70,6 @@ export default class VictorySharedEvents extends React.Component {
     return true;
   }
 
-  getTimer() {
-    if (this.context.getTimer) {
-      return this.context.getTimer();
-    }
-    if (!this.timer) {
-      this.timer = new Timer();
-    }
-    return this.timer;
-  }
-
   getAllEvents(props) {
     const components = ["container", "groupComponent"];
     const componentEvents = Events.getComponentEvents(props, components);

packages/victory-zoom-container/src/zoom-helpers.js

@@ -143,12 +143,10 @@ const RawZoomHelpers = {
   },
 
   handleAnimation(ctx) {
-    const getTimer = isFunction(ctx.getTimer) && ctx.getTimer.bind(ctx);
-    if (getTimer && isFunction(getTimer().bypassAnimation)) {
-      getTimer().bypassAnimation();
-      return isFunction(getTimer().resumeAnimation)
-        ? () => getTimer().resumeAnimation()
-        : undefined;
+    const timer = ctx.context.globalTimer;
+    if (timer) {
+      timer.bypassAnimation();
+      return () => timer.resumeAnimation()
     }
     return undefined;
   },