victory-core 36.5.0 → 36.5.3

package/src/victory-transition/victory-transition.tsx

@@ -52,7 +52,7 @@ export class VictoryTransition extends React.Component<
   static propTypes = {
     animate: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
     animationWhitelist: PropTypes.array,
-    children: PropTypes.node
+    children: PropTypes.node,
   };
 
   static contextType = TimerContext;
@@ -64,7 +64,7 @@ export class VictoryTransition extends React.Component<
     super(props, context);
     this.state = {
       nodesShouldLoad: false,
-      nodesDoneLoad: false
+      nodesDoneLoad: false,
     };
     const child = this.props.children;
     const polar = child.props.polar;
@@ -80,7 +80,7 @@ export class VictoryTransition extends React.Component<
     if (!isEqual(this.props, nextProps)) {
       this.timer.bypassAnimation();
       this.setState(this.getTransitionState(this.props, nextProps), () =>
-        this.timer.resumeAnimation()
+        this.timer.resumeAnimation(),
       );
     }
     return true;
@@ -92,7 +92,7 @@ export class VictoryTransition extends React.Component<
 
   private getTransitionState(
     props: VictoryTransitionProps,
-    nextProps: VictoryTransitionProps
+    nextProps: VictoryTransitionProps,
   ): VictoryTransitionState {
     const { animate } = props;
     if (!animate) {
@@ -108,7 +108,7 @@ export class VictoryTransition extends React.Component<
         nodesWillExit,
         nodesWillEnter,
         childrenTransitions,
-        nodesShouldEnter
+        nodesShouldEnter,
       } = Transitions.getInitialTransitionState(oldChildren, nextChildren);
       return {
         nodesWillExit,
@@ -116,14 +116,14 @@ export class VictoryTransition extends React.Component<
         childrenTransitions,
         nodesShouldEnter,
         oldProps: nodesWillExit ? props : null,
-        nextProps
+        nextProps,
       };
     }
   }
 
   private getDomainFromChildren(
     props: VictoryTransitionProps,
-    axis: "x" | "y"
+    axis: "x" | "y",
   ) {
     const getChildDomains = (children) => {
       return children.reduce((memo, child) => {
@@ -133,7 +133,7 @@ export 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;
@@ -141,7 +141,7 @@ export class VictoryTransition extends React.Component<
     };
 
     const child = React.Children.toArray(
-      props.children
+      props.children,
     )[0] as VictoryTransitionChild;
     const childProps: any = child.props || {};
     const domain = Array.isArray(childProps.domain)
@@ -155,7 +155,7 @@ export class VictoryTransition extends React.Component<
         ? [0, 1]
         : [
             Collection.getMinValue(childDomains),
-            Collection.getMaxValue(childDomains)
+            Collection.getMaxValue(childDomains),
           ];
     }
   }
@@ -197,22 +197,22 @@ export class VictoryTransition extends React.Component<
     const getTransitionProps = this.props.animate?.getTransitions
       ? this.props.animate.getTransitions
       : Transitions.getTransitionPropsFactory(props, this.state, (newState) =>
-          this.setState(newState)
+          this.setState(newState),
         );
     const child = React.Children.toArray(
-      props.children
+      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"]);
@@ -225,7 +225,7 @@ export 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(
@@ -233,8 +233,8 @@ export class VictoryTransition extends React.Component<
               defaults(
                 { animate: null, animating: true, groupComponent },
                 newProps,
-                combinedProps
-              )
+                combinedProps,
+              ),
             );
           }
           return React.cloneElement(
@@ -242,8 +242,8 @@ export 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,19 +1,22 @@
 /*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 { 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
@@ -25,34 +28,104 @@ const datumHasXandY = (datum) => {
 };
 
 //  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) {
@@ -85,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;
@@ -108,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],
       );
     }
 
@@ -130,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) => {
@@ -163,7 +235,7 @@ export default (WrappedComponent, options) => {
               : memo;
             return memo;
           },
-          []
+          [] as Array<() => void>,
         );
         const compiledCallbacks = callbacks.length
           ? () => {
@@ -174,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);
@@ -192,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,
           );
     }
 
@@ -213,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);
@@ -224,7 +297,7 @@ export default (WrappedComponent, options) => {
         : {};
       const modifiedProps = defaults({}, parentProps, props);
 
-      return isFunction(WrappedComponent.getBaseProps)
+      return typeof WrappedComponent.getBaseProps === "function"
         ? WrappedComponent.getBaseProps(modifiedProps)
         : {};
     }
@@ -259,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 });
@@ -288,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);
     }
@@ -339,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
@@ -356,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);
@@ -368,5 +443,7 @@ export default (WrappedComponent, options) => {
       const children = [...dataComponents, ...labelComponents];
       return this.renderContainer(groupComponent, children);
     }
-  };
-};
+  }
+
+  return AddEventsMixin;
+}

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

@@ -11,11 +11,12 @@ import {
   orderBy,
   values,
   includes,
-  without
+  without,
 } from "lodash";
 import * as Collection from "./collection";
 import * as Domain from "./domain";
 import * as Helpers from "./helpers";
+import { D3Scale } from "../types/prop-types";
 
 /**
  * Returns the axis (x or y) of a particular axis component
@@ -34,7 +35,7 @@ export function getAxis(props) {
  * @param {Function} predicate: a predicate function that will be called with each
  * @returns {Array} all axis components that pass the given predicate or []
  */
-export function findAxisComponents(childComponents, predicate) {
+export function findAxisComponents(childComponents, predicate?) {
   predicate = predicate || identity;
   const findAxes = (children) => {
     return children.reduce((memo, child) => {
@@ -42,7 +43,7 @@ export function findAxisComponents(childComponents, predicate) {
         return memo.concat(child);
       } else if (child.props && child.props.children) {
         return memo.concat(
-          findAxes(React.Children.toArray(child.props.children))
+          findAxes(React.Children.toArray(child.props.children)),
         );
       }
       return memo;
@@ -86,7 +87,7 @@ export function getAxisComponentsWithParent(childComponents, type) {
         return memo.concat(child);
       } else if (child.props && child.props.children) {
         const childAxis = findComponents(
-          React.Children.toArray(child.props.children)
+          React.Children.toArray(child.props.children),
         );
         return childAxis.length > 0 ? memo.concat(child) : memo;
       }
@@ -110,7 +111,7 @@ export function getOrigin(domain) {
       : getSingleOrigin(domain.x),
     y: Collection.containsDates(domain.y)
       ? new Date(Math.min(...domain.y))
-      : getSingleOrigin(domain.y)
+      : getSingleOrigin(domain.y),
   };
 }
 
@@ -201,9 +202,9 @@ function getTickArray(props) {
       ? tickValues.map((tick) => stringMap[tick])
       : range(1, tickValues.length + 1);
   }
-  const tickArray = ticks ? uniq(ticks) : getTicksFromFormat(props);
-  const buildTickArray = (arr) => {
-    const newTickArray = [];
+  const tickArray = ticks ? uniq(ticks) : getTicksFromFormat();
+  const buildTickArray = (arr: number[]) => {
+    const newTickArray = [] as Array<{ value: number; index: number }>;
     const domain = (props.domain && props.domain[axis]) || props.domain;
     if (arr) {
       arr.forEach(function (t, index) {
@@ -214,13 +215,13 @@ function getTickArray(props) {
           ) {
             newTickArray.push({
               value: t,
-              index
+              index,
             });
           }
         } else {
           newTickArray.push({
             value: t,
-            index
+            index,
           });
         }
       });
@@ -248,11 +249,9 @@ export function getTickFormat(props, scale) {
     return defaultTickFormat || scaleTickFormat;
   } else if (tickFormat && Array.isArray(tickFormat)) {
     const tickArray = getTickArray(props);
-    const tickArrayIndices = tickArray
-      ? tickArray.map((v) => v.index)
-      : undefined;
+    const tickArrayIndices = tickArray?.map((v) => v.index);
     const filteredTickFormat = tickFormat.filter((t, index) =>
-      tickArrayIndices.includes(index)
+      tickArrayIndices?.includes(index),
     );
     return (x, index) => filteredTickFormat[index];
   } else if (tickFormat && isFunction(tickFormat)) {
@@ -267,7 +266,7 @@ export function getTickFormat(props, scale) {
   }
 }
 
-function downsampleTicks(ticks, tickCount) {
+function downsampleTicks(ticks: number[], tickCount: number) {
   if (!tickCount || !Array.isArray(ticks) || ticks.length <= tickCount) {
     return ticks;
   }
@@ -275,7 +274,7 @@ function downsampleTicks(ticks, tickCount) {
   return ticks.filter((d, i) => i % k === 0);
 }
 
-export function getTicks(props, scale, filterZero) {
+export function getTicks(props, scale: D3Scale, filterZero = false) {
   const { tickCount } = props;
   const tickArray = getTickArray(props);
   const tickValues = tickArray ? tickArray.map((v) => v.value) : undefined;
@@ -335,7 +334,7 @@ function getDomainFromData(props, axis) {
 }
 
 // exposed for use by VictoryChart
-export function getDomain(props, axis) {
+export function getDomain(props, axis?) {
   const inherentAxis = getAxis(props);
   if (axis && axis !== inherentAxis) {
     return undefined;
@@ -382,6 +381,6 @@ export function modifyProps(props, fallbackProps) {
   return Helpers.modifyProps(
     assign({}, props, { theme }),
     fallbackProps,
-    "axis"
+    "axis",
   );
 }

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

@@ -1,17 +1,15 @@
-/* eslint-disable no-use-before-define */
-
 function isNonEmptyArray(collection) {
   return Array.isArray(collection) && collection.length > 0;
 }
 
-export function containsStrings(collection) {
+export function containsStrings<T>(collection: Array<T>) {
   return (
     Array.isArray(collection) &&
     collection.some((value) => typeof value === "string")
   );
 }
 
-export function containsDates(collection) {
+export function containsDates(collection: Array<number | Date>): boolean {
   return (
     Array.isArray(collection) &&
     collection.some((value) => value instanceof Date)
@@ -40,16 +38,22 @@ export function removeUndefined(arr) {
   return arr.filter((el) => el !== undefined);
 }
 
-export function getMaxValue(arr, ...values) {
-  const array = arr.concat(values);
+export function getMaxValue(
+  arr: Array<number | Date>,
+  ...values: Array<number | Date>
+): number | Date {
+  const array = arr.concat(values) as number[];
   return containsDates(array)
-    ? new Date(Math.max(...array))
+    ? new Date(Math.max(...array)) // Dates will be coerced to numbers
     : Math.max(...array);
 }
 
-export function getMinValue(arr, ...values) {
-  const array = arr.concat(values);
+export function getMinValue(
+  arr: Array<number | Date>,
+  ...values: Array<number | Date>
+): number | Date {
+  const array = arr.concat(values) as number[];
   return containsDates(array)
-    ? new Date(Math.min(...array))
+    ? new Date(Math.min(...array)) // Dates will be coerced to numbers
     : Math.min(...array);
 }