victory-core 36.4.1 → 36.5.2

package/src/victory-transition/{victory-transition.js → victory-transition.tsx}

@@ -1,34 +1,74 @@
 import React from "react";
 import PropTypes from "prop-types";
-import VictoryAnimation from "../victory-animation/victory-animation";
+import { VictoryAnimation } from "../victory-animation/victory-animation";
 import * as Collection from "../victory-util/collection";
 import * as Helpers from "../victory-util/helpers";
 import TimerContext from "../victory-util/timer-context";
 import * as Transitions from "../victory-util/transitions";
-import { defaults, isFunction, pick, isObject } from "lodash";
+import { defaults, isFunction, pick } from "lodash";
 import isEqual from "react-fast-compare";
+import Timer from "../victory-util/timer";
 
-export default class VictoryTransition extends React.Component {
+type VictoryTransitionChild = React.ReactElement<
+  // Props:
+  {
+    polar?: boolean;
+    domain?: number[] | { x: number[]; y: number[] };
+    groupComponent?: React.ReactElement;
+  },
+  // Type:
+  {
+    new (props: any): React.Component<any, any>;
+    continuous?: boolean;
+  }
+>;
+interface VictoryTransitionProps {
+  animate?: boolean | any;
+  animationWhitelist?: string[];
+  children: VictoryTransitionChild;
+}
+
+interface VictoryTransitionState {
+  oldProps?: VictoryTransitionProps | null;
+  nextProps?: VictoryTransitionProps;
+  nodesShouldLoad?: boolean;
+  nodesDoneLoad?: boolean;
+  nodesWillExit?: boolean;
+  nodesWillEnter?: boolean;
+  nodesShouldEnter?: boolean;
+  childrenTransitions?: unknown;
+}
+
+export interface VictoryTransition {
+  context: React.ContextType<typeof TimerContext>;
+}
+
+export class VictoryTransition extends React.Component<
+  VictoryTransitionProps,
+  VictoryTransitionState
+> {
   static displayName = "VictoryTransition";
 
   static propTypes = {
     animate: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
     animationWhitelist: PropTypes.array,
-    children: PropTypes.node
+    children: PropTypes.node,
   };
 
   static contextType = TimerContext;
+  private continuous: boolean;
+  private timer: Timer;
+  private transitionProps: any;
 
   constructor(props, context) {
     super(props, context);
     this.state = {
       nodesShouldLoad: false,
-      nodesDoneLoad: false
+      nodesDoneLoad: false,
     };
     const child = this.props.children;
     const polar = child.props.polar;
     this.continuous = !polar && child.type && child.type.continuous === true;
-    this.getTransitionState = this.getTransitionState.bind(this);
     this.timer = this.context.transitionTimer;
   }
 
@@ -36,11 +76,11 @@ export default class VictoryTransition extends React.Component {
     this.setState({ nodesShouldLoad: true }); //eslint-disable-line react/no-did-mount-set-state
   }
 
-  shouldComponentUpdate(nextProps) {
+  shouldComponentUpdate(nextProps: VictoryTransitionProps) {
     if (!isEqual(this.props, nextProps)) {
       this.timer.bypassAnimation();
       this.setState(this.getTransitionState(this.props, nextProps), () =>
-        this.timer.resumeAnimation()
+        this.timer.resumeAnimation(),
       );
     }
     return true;
@@ -50,7 +90,10 @@ export default class VictoryTransition extends React.Component {
     this.timer.stop();
   }
 
-  getTransitionState(props, nextProps) {
+  private getTransitionState(
+    props: VictoryTransitionProps,
+    nextProps: VictoryTransitionProps,
+  ): VictoryTransitionState {
     const { animate } = props;
     if (!animate) {
       return {};
@@ -65,7 +108,7 @@ export default class VictoryTransition extends React.Component {
         nodesWillExit,
         nodesWillEnter,
         childrenTransitions,
-        nodesShouldEnter
+        nodesShouldEnter,
       } = Transitions.getInitialTransitionState(oldChildren, nextChildren);
       return {
         nodesWillExit,
@@ -73,12 +116,15 @@ export default class VictoryTransition extends React.Component {
         childrenTransitions,
         nodesShouldEnter,
         oldProps: nodesWillExit ? props : null,
-        nextProps
+        nextProps,
       };
     }
   }
 
-  getDomainFromChildren(props, axis) {
+  private getDomainFromChildren(
+    props: VictoryTransitionProps,
+    axis: "x" | "y",
+  ) {
     const getChildDomains = (children) => {
       return children.reduce((memo, child) => {
         if (child.type && isFunction(child.type.getDomain)) {
@@ -87,15 +133,17 @@ export default class VictoryTransition extends React.Component {
           return childDomain ? memo.concat(childDomain) : memo;
         } else if (child.props && child.props.children) {
           return memo.concat(
-            getChildDomains(React.Children.toArray(child.props.children))
+            getChildDomains(React.Children.toArray(child.props.children)),
           );
         }
         return memo;
       }, []);
     };
 
-    const child = React.Children.toArray(props.children)[0];
-    const childProps = child.props || {};
+    const child = React.Children.toArray(
+      props.children,
+    )[0] as VictoryTransitionChild;
+    const childProps: any = child.props || {};
     const domain = Array.isArray(childProps.domain)
       ? childProps.domain
       : childProps.domain && childProps.domain[axis];
@@ -107,7 +155,7 @@ export default class VictoryTransition extends React.Component {
         ? [0, 1]
         : [
             Collection.getMinValue(childDomains),
-            Collection.getMaxValue(childDomains)
+            Collection.getMaxValue(childDomains),
           ];
     }
   }
@@ -121,10 +169,10 @@ export default class VictoryTransition extends React.Component {
       : this.props;
   }
 
-  pickDomainProps(props) {
-    const parentState = isObject(props.animate) && props.animate.parentState;
+  private pickDomainProps(props: VictoryTransitionProps) {
+    const parentState = props.animate?.parentState;
     if (parentState && parentState.nodesWillExit) {
-      return this.continous || parentState.continuous
+      return this.continuous || parentState.continuous
         ? parentState.nextProps || this.state.nextProps || props
         : props;
     }
@@ -146,24 +194,25 @@ export default class VictoryTransition extends React.Component {
 
   render() {
     const props = this.pickProps();
-    const getTransitionProps =
-      isObject(this.props.animate) && this.props.animate.getTransitions
-        ? this.props.animate.getTransitions
-        : Transitions.getTransitionPropsFactory(props, this.state, (newState) =>
-            this.setState(newState)
-          );
-    const child = React.Children.toArray(props.children)[0];
+    const getTransitionProps = this.props.animate?.getTransitions
+      ? this.props.animate.getTransitions
+      : Transitions.getTransitionPropsFactory(props, this.state, (newState) =>
+          this.setState(newState),
+        );
+    const child = React.Children.toArray(
+      props.children,
+    )[0] as VictoryTransitionChild;
     const transitionProps = getTransitionProps(child);
     this.transitionProps = transitionProps;
     const domain = {
       x: this.getDomainFromChildren(this.pickDomainProps(props), "x"),
-      y: this.getDomainFromChildren(props, "y")
+      y: this.getDomainFromChildren(props, "y"),
     };
     const clipWidth = this.getClipWidth(props, child);
     const combinedProps = defaults(
       { domain, clipWidth },
       transitionProps,
-      child.props
+      child.props,
     );
     const animationWhitelist = props.animationWhitelist || [];
     const whitelist = animationWhitelist.concat(["clipWidth"]);
@@ -176,7 +225,7 @@ export default class VictoryTransition extends React.Component {
           if (child.props.groupComponent) {
             const groupComponent = this.continuous
               ? React.cloneElement(child.props.groupComponent, {
-                  clipWidth: newProps.clipWidth || 0
+                  clipWidth: newProps.clipWidth || 0,
                 })
               : child.props.groupComponent;
             return React.cloneElement(
@@ -184,8 +233,8 @@ export default class VictoryTransition extends React.Component {
               defaults(
                 { animate: null, animating: true, groupComponent },
                 newProps,
-                combinedProps
-              )
+                combinedProps,
+              ),
             );
           }
           return React.cloneElement(
@@ -193,8 +242,8 @@ export default class VictoryTransition extends React.Component {
             defaults(
               { animate: null, animating: true },
               newProps,
-              combinedProps
-            )
+              combinedProps,
+            ),
           );
         }}
       </VictoryAnimation>

package/src/victory-util/{add-events.js → add-events.tsx}

@@ -1,53 +1,131 @@
 /*global window:false */
 import React from "react";
 import {
-  defaults,
   assign,
-  keys,
+  defaults,
+  difference,
+  isEmpty,
   isFunction,
+  isNil,
+  keys,
   pick,
   without,
-  isEmpty,
-  isNil,
-  difference
 } from "lodash";
+import type { ComponentEvent } from "./events";
 import * as Events from "./events";
 import isEqual from "react-fast-compare";
-import VictoryTransition from "../victory-transition/victory-transition";
+import { VictoryTransition } from "../victory-transition/victory-transition";
+import { VictoryCommonProps, VictoryDatableProps } from "./common-props";
+import { VictoryLabelableProps } from "../types/prop-types";
+
+// DISCLAIMER:
+// This file is not currently tested, and it is first on the list of files
+// to refactor in our current refactoring effort. Please do not make changes
+// to this file without manual testing and/or refactoring and adding tests.
 
 const datumHasXandY = (datum) => {
   return !isNil(datum._x) && !isNil(datum._y);
 };
 
 //  used for checking state changes. Expected components can be passed in via options
-const defaultComponents = [
+const defaultComponents: NonNullable<MixinOptions["components"]> = [
   { name: "parent", index: "parent" },
   { name: "data" },
-  { name: "labels" }
+  { name: "labels" },
 ];
 
-export default (WrappedComponent, options) => {
-  return class addEvents extends WrappedComponent {
-    constructor(props) {
+export type MixinOptions = {
+  components?: Array<{
+    name: string;
+    index?: string;
+  }>;
+};
+
+export interface EventMixinCommonProps
+  extends VictoryCommonProps,
+    VictoryDatableProps,
+    VictoryLabelableProps {}
+
+/**
+ * These methods will be implemented by the Mixin,
+ * and are accessible to the Wrapped Component.
+ *
+ * To make your Wrapped Component type-safe, use "interface merging" like so:
+ * @example
+ *    interface MyComponent extends EventsMixinClass<MyProps> {}
+ *    class MyComponent extends React.Component<MyProps> { ... }
+ */
+export interface EventsMixinClass<TProps> {
+  renderContainer(
+    component: React.ReactElement,
+    children: React.ReactElement[],
+  ): React.ReactElement;
+  cacheValues<TThis>(this: TThis, obj: Partial<TThis>): void;
+  getEventState: typeof Events.getEventState;
+  renderContinuousData(props: TProps);
+  animateComponent(props: TProps, defaultAnimationWhitelist);
+}
+
+/**
+ * These fields are calculated by the Mixin
+ */
+export interface EventMixinCalculatedValues {
+  componentEvents: Array<ComponentEvent>;
+  getSharedEventState: (key: string, value: string) => unknown;
+  baseProps: Record<string, object>;
+  dataKeys: string[];
+  hasEvents: unknown;
+  events: unknown;
+}
+
+/**
+ * This represents the class itself, including static fields
+ */
+export interface WrappedComponentClass<TProps> {
+  new (props: TProps): React.Component<TProps>;
+  getBaseProps?(props: TProps): EventMixinCalculatedValues["baseProps"];
+  role?: string;
+  expectedComponents?: string[];
+}
+
+export function addEvents<
+  TBase extends WrappedComponentClass<TProps>,
+  TProps extends EventMixinCommonProps,
+>(WrappedComponent: TBase, options: MixinOptions = {}) {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface AddEventsMixin extends EventMixinCalculatedValues {}
+
+  // @ts-expect-error "TS2545: A mixin class must have a constructor with a single rest parameter of type 'any[]'."
+  class AddEventsMixin
+    extends WrappedComponent
+    implements EventsMixinClass<TProps>
+  {
+    constructor(props: TProps) {
       super(props);
-      const getScopedEvents = Events.getScopedEvents.bind(this);
-      const boundGetEvents = Events.getEvents.bind(this);
-      this.state = {};
-      this.getEvents = (p, target, eventKey) => {
-        return boundGetEvents(p, target, eventKey, getScopedEvents);
-      };
-      this.getEventState = Events.getEventState.bind(this);
-      const calculatedValues = this.getCalculatedValues(props);
-      this.cacheValues(calculatedValues);
-      this.externalMutations = this.getExternalMutations(props);
-      this.calculatedState = this.getStateChanges(props);
-      this.globalEvents = {};
-      this.prevGlobalEventKeys = [];
-      this.boundGlobalEvents = {};
-    }
 
-    shouldComponentUpdate(nextProps) {
+      this.cacheValues(this.getCalculatedValues(props));
+    }
+    state = {};
+    getEventState = Events.getEventState.bind(this);
+    getScopedEvents = Events.getScopedEvents.bind(this);
+    getEvents = (p, target, eventKey) => {
+      return Events.getEvents.call(
+        this,
+        p,
+        target,
+        eventKey,
+        this.getScopedEvents,
+      );
+    };
+    externalMutations = this.getExternalMutations(this.props);
+    calculatedState = this.getStateChanges(this.props);
+    globalEvents = {};
+    prevGlobalEventKeys: string[] = [];
+    boundGlobalEvents = {};
+
+    shouldComponentUpdate(nextProps: TProps) {
       const externalMutations = this.getExternalMutations(nextProps);
+      // @ts-expect-error "Property 'animating' does not exist on type EventMixinCommonProps"
       const animating = this.props.animating || this.props.animate;
       const newMutation = !isEqual(externalMutations, this.externalMutations);
       if (animating || newMutation) {
@@ -80,12 +158,12 @@ export default (WrappedComponent, options) => {
       const globalEventKeys = keys(this.globalEvents);
       const removedGlobalEventKeys = difference(
         this.prevGlobalEventKeys,
-        globalEventKeys
+        globalEventKeys,
       );
       removedGlobalEventKeys.forEach((key) => this.removeGlobalListener(key));
       const addedGlobalEventKeys = difference(
         globalEventKeys,
-        this.prevGlobalEventKeys
+        this.prevGlobalEventKeys,
       );
       addedGlobalEventKeys.forEach((key) => this.addGlobalListener(key));
       this.prevGlobalEventKeys = globalEventKeys;
@@ -103,14 +181,14 @@ export default (WrappedComponent, options) => {
       this.boundGlobalEvents[key] = boundListener;
       window.addEventListener(
         Events.getGlobalEventNameFromKey(key),
-        boundListener
+        boundListener,
       );
     }
 
     removeGlobalListener(key) {
       window.removeEventListener(
         Events.getGlobalEventNameFromKey(key),
-        this.boundGlobalEvents[key]
+        this.boundGlobalEvents[key],
       );
     }
 
@@ -125,12 +203,11 @@ export default (WrappedComponent, options) => {
         const result = defaults(
           {},
           this.getEventState(key, type),
-          this.getSharedEventState(key, type)
+          this.getSharedEventState(key, type),
         );
         return isEmpty(result) ? undefined : result;
       };
 
-      options = options || {};
       const components = options.components || defaultComponents;
       const stateChanges = components
         .map((component) => {
@@ -158,7 +235,7 @@ export default (WrappedComponent, options) => {
               : memo;
             return memo;
           },
-          []
+          [] as Array<() => void>,
         );
         const compiledCallbacks = callbacks.length
           ? () => {
@@ -169,7 +246,7 @@ export default (WrappedComponent, options) => {
       }
     }
 
-    getCalculatedValues(props) {
+    getCalculatedValues(props): EventMixinCalculatedValues {
       const { sharedEvents } = props;
       const components = WrappedComponent.expectedComponents;
       const componentEvents = Events.getComponentEvents(props, components);
@@ -187,18 +264,18 @@ export default (WrappedComponent, options) => {
         baseProps,
         dataKeys,
         hasEvents,
-        events
+        events,
       };
     }
 
-    getExternalMutations(props) {
+    getExternalMutations(props: TProps) {
       const { sharedEvents, externalEventMutations } = props;
       return isEmpty(externalEventMutations) || sharedEvents
         ? undefined
         : Events.getExternalMutations(
             externalEventMutations,
             this.baseProps,
-            this.state
+            this.state,
           );
     }
 
@@ -208,8 +285,9 @@ export default (WrappedComponent, options) => {
       });
     }
 
-    getBaseProps(props, getSharedEventState) {
-      getSharedEventState = getSharedEventState || this.getSharedEventState;
+    getBaseProps(props, getSharedEventState): this["baseProps"] {
+      getSharedEventState =
+        getSharedEventState || this.getSharedEventState.bind(this);
       const sharedParentState = getSharedEventState("parent", "parent");
       const parentState = this.getEventState("parent", "parent");
       const baseParentProps = defaults({}, parentState, sharedParentState);
@@ -219,7 +297,7 @@ export default (WrappedComponent, options) => {
         : {};
       const modifiedProps = defaults({}, parentProps, props);
 
-      return isFunction(WrappedComponent.getBaseProps)
+      return typeof WrappedComponent.getBaseProps === "function"
         ? WrappedComponent.getBaseProps(modifiedProps)
         : {};
     }
@@ -254,13 +332,13 @@ export default (WrappedComponent, options) => {
           this.getSharedEventState(key, type),
           component.props,
           baseProps,
-          { id }
+          { id },
         );
 
         const events = defaults(
           {},
           Events.getPartialEvents(baseEvents, key, componentProps),
-          componentProps.events
+          componentProps.events,
         );
 
         return assign({}, componentProps, { events });
@@ -283,46 +361,48 @@ export default (WrappedComponent, options) => {
       return React.cloneElement(component, parentProps, children);
     }
 
-    animateComponent(props, defaultAnimationWhitelist) {
+    animateComponent(props: TProps, defaultAnimationWhitelist: string[]) {
       const animationWhitelist =
-        props.animate && props.animate.animationWhitelist
-          ? props.animate.animationWhitelist
-          : defaultAnimationWhitelist;
+        (typeof props.animate === "object" &&
+          props.animate?.animationWhitelist) ||
+        defaultAnimationWhitelist;
+
+      const Comp = this.constructor;
 
       return (
         <VictoryTransition
           animate={props.animate}
           animationWhitelist={animationWhitelist}
         >
-          {React.createElement(this.constructor, props)}
+          <Comp {...props} />
         </VictoryTransition>
       );
     }
 
     // Used by `VictoryLine` and `VictoryArea`
-    renderContinuousData(props) {
+    renderContinuousData(props: TProps) {
       const { dataComponent, labelComponent, groupComponent } = props;
       const dataKeys = without(this.dataKeys, "all");
       const labelComponents = dataKeys.reduce((memo, key) => {
         const labelProps = this.getComponentProps(
           labelComponent,
           "labels",
-          key
+          key,
         );
         if (
           labelProps &&
           labelProps.text !== undefined &&
           labelProps.text !== null
         ) {
-          memo = memo.concat(React.cloneElement(labelComponent, labelProps));
+          memo = memo.concat(React.cloneElement(labelComponent!, labelProps));
         }
         return memo;
-      }, []);
+      }, [] as React.ReactElement[]);
 
       const dataProps = this.getComponentProps(dataComponent, "data", "all");
       const children = [
-        React.cloneElement(dataComponent, dataProps),
-        ...labelComponents
+        React.cloneElement(dataComponent!, dataProps),
+        ...labelComponents,
       ];
       return this.renderContainer(groupComponent, children);
     }
@@ -334,16 +414,16 @@ export default (WrappedComponent, options) => {
           const dataProps = this.getComponentProps(
             dataComponent,
             "data",
-            index
+            index,
           );
           if (shouldRenderDatum(dataProps.datum)) {
             validDataComponents.push(
-              React.cloneElement(dataComponent, dataProps)
+              React.cloneElement(dataComponent, dataProps),
             );
           }
           return validDataComponents;
         },
-        []
+        [] as React.ReactElement[],
       );
 
       const labelComponents = this.dataKeys
@@ -351,7 +431,7 @@ export default (WrappedComponent, options) => {
           const labelProps = this.getComponentProps(
             labelComponent,
             "labels",
-            index
+            index,
           );
           if (labelProps.text !== undefined && labelProps.text !== null) {
             return React.cloneElement(labelComponent, labelProps);
@@ -363,5 +443,7 @@ export default (WrappedComponent, options) => {
       const children = [...dataComponents, ...labelComponents];
       return this.renderContainer(groupComponent, children);
     }
-  };
-};
+  }
+
+  return AddEventsMixin;
+}