Merge pull request #1462 from FormidableLabs/experiment/animation-wit…

…h-new-context New context API
FormidableLabs · Dec 20, 2019 · c8090c6 · c8090c6
2 parents a242c84 + ff907f4
commit c8090c6
Show file tree

Hide file tree

Showing 9 changed files with 86 additions and 125 deletions.
diff --git a/packages/victory-core/src/index.js b/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";
diff --git a/packages/victory-core/src/victory-animation/victory-animation.js b/packages/victory-core/src/victory-animation/victory-animation.js
@@ -3,7 +3,7 @@ import React from "react";
 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,12 +66,10 @@ export default class VictoryAnimation extends React.Component {
     easing: "quadInOut"
   };
 
-  static contextTypes = {
-    getTimer: PropTypes.func
-  };
+  static contextType = TimerContext;
 
-  constructor(props) {
-    super(props);
+  constructor(props, context) {
+    super(props, context);
     /* defaults */
     this.state = {
       data: Array.isArray(this.props.data) ? this.props.data[0] : this.props.data,
@@ -89,7 +87,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.context.animationTimer;
   }
 
   componentDidMount() {
@@ -103,7 +101,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,20 +122,10 @@ 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();
-    }
-  }
-
-  getTimer() {
-    if (this.context.getTimer) {
-      return this.context.getTimer();
-    }
-    if (!this.timer) {
-      this.timer = new Timer();
+      this.timer.stop();
     }
-    return this.timer;
   }
 
   toNewName(ease) {
@@ -156,13 +144,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 +171,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();

diff --git a/packages/victory-core/src/victory-container/victory-container.js b/packages/victory-core/src/victory-container/victory-container.js
@@ -3,7 +3,8 @@ 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 Timer from "../victory-util/timer";
+import PortalContext from "../victory-portal/portal-context";
+import TimerContext from "../victory-util/timer-context";
 import Helpers from "../victory-util/helpers";
 
 export default class VictoryContainer extends React.Component {
@@ -37,20 +38,10 @@ 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.containerId =
       !isObject(props) || props.containerId === undefined
         ? uniqueId("victory-container-")
@@ -77,40 +68,18 @@ 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.shouldHandleWheel && this.containerRef) {
       this.containerRef.removeEventListener("wheel", this.handleWheel);
     }
   }
 
-  getTimer() {
-    if (this.context.getTimer) {
-      return this.context.getTimer();
-    }
-    if (!this.timer) {
-      this.timer = new Timer();
-    }
-    return this.timer;
-  }
-
   getIdForElement(elementName) {
     return `${this.containerId}-${elementName}`;
   }
@@ -150,16 +119,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>
     );
   }
 

diff --git a/packages/victory-core/src/victory-portal/portal-context.js b/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;
diff --git a/packages/victory-core/src/victory-portal/victory-portal.js b/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) {

diff --git a/packages/victory-core/src/victory-transition/victory-transition.js b/packages/victory-core/src/victory-transition/victory-transition.js
@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 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,8 +17,10 @@ export default class VictoryTransition extends React.Component {
     children: PropTypes.node
   };
 
-  constructor(props) {
-    super(props);
+  static contextType = TimerContext;
+
+  constructor(props, context) {
+    super(props, context);
     this.state = {
       nodesShouldLoad: false,
       nodesDoneLoad: false
@@ -27,7 +29,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.context.transitionTimer;
   }
 
   componentDidMount() {
@@ -36,26 +38,16 @@ 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();
-  }
-
-  getTimer() {
-    if (this.context.getTimer) {
-      return this.context.getTimer();
-    }
-    if (!this.timer) {
-      this.timer = new Timer();
-    }
-    return this.timer;
+    this.timer.stop();
   }
 
   getTransitionState(props, nextProps) {

diff --git a/packages/victory-core/src/victory-util/timer-context.js b/packages/victory-core/src/victory-util/timer-context.js
@@ -0,0 +1,14 @@
+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({
+  transitionTimer: new Timer(),
+  animationTimer: new Timer()
+});
+TimerContext.displayName = "TimerContext";
+
+export default TimerContext;
diff --git a/packages/victory-shared-events/src/victory-shared-events.js b/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);