Migrate victory-voronoi-container to TypeScript (#2727)

.changeset/olive-bananas-stare.md

@@ -0,0 +1,5 @@
+---
+"victory-voronoi-container": patch
+---
+
+Migrate victory-voronoi-container to TypeScript

packages/victory-voronoi-container/src/index.ts

@@ -0,0 +1,2 @@
+export * from "./victory-voronoi-container";
+export * from "./voronoi-helpers";

packages/victory-voronoi-container/src/victory-voronoi-container.js → packages/victory-voronoi-container/src/victory-voronoi-container.tsx

@@ -1,52 +1,49 @@
 /* eslint-disable react/no-multi-comp */
-import PropTypes from "prop-types";
 import React from "react";
 import { defaults, isFunction, pick } from "lodash";
 import { VictoryTooltip } from "victory-tooltip";
 import {
   VictoryContainer,
   Helpers,
-  PropTypes as CustomPropTypes,
+  VictoryContainerProps,
+  PaddingProps,
 } from "victory-core";
-import VoronoiHelpers from "./voronoi-helpers";
+import { VoronoiHelpers } from "./voronoi-helpers";
 
-export const voronoiContainerMixin = (base) =>
-  class VictoryVoronoiContainer extends base {
+type ComponentClass<TProps> = { new (props: TProps): React.Component<TProps> };
+
+export interface VictoryVoronoiContainerProps extends VictoryContainerProps {
+  activateData?: boolean;
+  activateLabels?: boolean;
+  disable?: boolean;
+  labels?: (point: any, index: number, points: any[]) => string;
+  labelComponent?: React.ReactElement;
+  mouseFollowTooltips?: boolean;
+  onActivated?: (points: any[], props: VictoryVoronoiContainerProps) => void;
+  onDeactivated?: (points: any[], props: VictoryVoronoiContainerProps) => void;
+  radius?: number;
+  voronoiBlacklist?: (string | RegExp)[];
+  voronoiDimension?: "x" | "y";
+  voronoiPadding?: PaddingProps;
+}
+
+export function voronoiContainerMixin<
+  TBase extends ComponentClass<TProps>,
+  TProps extends VictoryVoronoiContainerProps,
+>(Base: TBase) {
+  // @ts-expect-error "TS2545: A mixin class must have a constructor with a single rest parameter of type 'any[]'."
+  return class VictoryVoronoiContainer extends Base {
     static displayName = "VictoryVoronoiContainer";
-    static propTypes = {
-      ...VictoryContainer.propTypes,
-      activateData: PropTypes.bool,
-      activateLabels: PropTypes.bool,
-      disable: PropTypes.bool,
-      labelComponent: PropTypes.element,
-      labels: PropTypes.func,
-      mouseFollowTooltips: PropTypes.bool,
-      onActivated: PropTypes.func,
-      onDeactivated: PropTypes.func,
-      radius: PropTypes.number,
-      voronoiBlacklist: PropTypes.arrayOf(
-        PropTypes.oneOfType([PropTypes.string, CustomPropTypes.regExp]),
-      ),
-      voronoiDimension: PropTypes.oneOf(["x", "y"]),
-      voronoiPadding: PropTypes.oneOfType([
-        PropTypes.number,
-        PropTypes.shape({
-          top: PropTypes.number,
-          bottom: PropTypes.number,
-          left: PropTypes.number,
-          right: PropTypes.number,
-        }),
-      ]),
-    };
-    static defaultProps = {
+
+    static defaultProps: VictoryVoronoiContainerProps = {
       ...VictoryContainer.defaultProps,
       activateData: true,
       activateLabels: true,
       labelComponent: <VictoryTooltip />,
       voronoiPadding: 5,
     };
 
-    static defaultEvents = (props) => {
+    static defaultEvents = (props: VictoryVoronoiContainerProps) => {
       return [
         {
           target: "parent",
@@ -233,15 +230,14 @@ export const voronoiContainerMixin = (base) =>
     }
 
     // Overrides method in VictoryContainer
-    getChildren(props) {
+    getChildren(props: VictoryVoronoiContainerProps) {
       return [
         ...React.Children.toArray(props.children),
         this.getTooltip(props),
       ];
     }
   };
+}
 
-export default voronoiContainerMixin(VictoryContainer);
-// @ts-expect-error IMPORTANT: when converting this file to TypeScript, you must export the type as well:
-// export const VictoryVoronoiContainer = voronoiContainerMixin(VictoryContainer);
-// export type VictoryVoronoiContainer = typeof VictoryVoronoiContainer;
+export const VictoryVoronoiContainer = voronoiContainerMixin(VictoryContainer);
+export type VictoryVoronoiContainer = typeof VictoryVoronoiContainer;

packages/victory-voronoi-container/src/voronoi-helpers.js → packages/victory-voronoi-container/src/voronoi-helpers.ts

@@ -1,18 +1,20 @@
 import { Collection, Selection, Data, Helpers } from "victory-core";
 import {
   assign,
-  throttle,
   isFunction,
   isEmpty,
   includes,
   isString,
   isRegExp,
+  throttle,
 } from "lodash";
 import isEqual from "react-fast-compare";
 import Delaunay from "delaunay-find/lib/index.js";
 import React from "react";
 
-const VoronoiHelpers = {
+const ON_MOUSE_MOVE_THROTTLE_MS = 32;
+
+class VoronoiHelpersClass {
   withinBounds(props, point) {
     const { width, height, polar, origin, scale } = props;
     const padding = Helpers.getPadding(props, "voronoiPadding");
@@ -29,15 +31,15 @@ const VoronoiHelpers = {
       y >= padding.top &&
       y <= height - padding.bottom
     );
-  },
+  }
 
   getDatasets(props) {
     const minDomain = {
       x: Collection.getMinValue(props.domain.x),
       y: Collection.getMinValue(props.domain.y),
     };
     const children = React.Children.toArray(props.children);
-    const addMeta = (data, name, child) => {
+    const addMeta = (data, name?, child?) => {
       const continuous = child && child.type && child.type.continuous;
       const style = child ? child.props && child.props.style : props.style;
       return data.map((datum, index) => {
@@ -91,13 +93,13 @@ const VoronoiHelpers = {
     };
 
     return Helpers.reduceChildren(children, iteratee, props);
-  },
+  }
 
   findPoints(datasets, point) {
     return datasets.filter((d) => {
       return point._voronoiX === d._voronoiX && point._voronoiY === d._voronoiY;
     });
-  },
+  }
 
   withinRadius(point, mousePosition, radius) {
     if (!point) {
@@ -110,7 +112,7 @@ const VoronoiHelpers = {
     const distanceSquared =
       Math.pow(x - point[0], 2) + Math.pow(y - point[1], 2);
     return distanceSquared < Math.pow(radius, 2);
-  },
+  }
 
   getVoronoiPoints(props, mousePosition) {
     const datasets = this.getDatasets(props);
@@ -129,7 +131,7 @@ const VoronoiHelpers = {
       ? this.findPoints(datasets, datasets[index])
       : [];
     return { points, index };
-  },
+  }
 
   getActiveMutations(props, point) {
     const { childName, continuous } = point;
@@ -155,7 +157,7 @@ const VoronoiHelpers = {
         mutation: () => ({ active: true }),
       };
     });
-  },
+  }
 
   getInactiveMutations(props, point) {
     const { childName, continuous } = point;
@@ -180,32 +182,32 @@ const VoronoiHelpers = {
         mutation: () => null,
       };
     });
-  },
+  }
 
   // eslint-disable-next-line max-params
-  getParentMutation(activePoints, mousePosition, parentSVG, vIndex) {
+  getParentMutation(activePoints, mousePosition?, parentSVG?, vIndex?) {
     return [
       {
         target: "parent",
         eventKey: "parent",
         mutation: () => ({ activePoints, mousePosition, parentSVG, vIndex }),
       },
     ];
-  },
+  }
 
   onActivated(props, points) {
     if (isFunction(props.onActivated)) {
       props.onActivated(points, props);
     }
-  },
+  }
 
   onDeactivated(props, points) {
     if (isFunction(props.onDeactivated)) {
       props.onDeactivated(points, props);
     }
-  },
+  }
 
-  onMouseLeave(evt, targetProps) {
+  onMouseLeave = (evt, targetProps) => {
     const activePoints = targetProps.activePoints || [];
     this.onDeactivated(targetProps, activePoints);
     const inactiveMutations = activePoints.length
@@ -214,9 +216,9 @@ const VoronoiHelpers = {
         )
       : [];
     return this.getParentMutation([]).concat(...inactiveMutations);
-  },
+  };
 
-  onMouseMove(evt, targetProps) {
+  private handleMouseMove = (evt, targetProps) => {
     // eslint-disable-line max-statements
     const activePoints = targetProps.activePoints || [];
     const parentSVG = targetProps.parentSVG || Selection.getParentSVG(evt);
@@ -256,14 +258,12 @@ const VoronoiHelpers = {
         )
       : [];
     return parentMutations.concat(...inactiveMutations, ...activeMutations);
-  },
-};
+  };
+
+  onMouseMove = throttle(this.handleMouseMove, ON_MOUSE_MOVE_THROTTLE_MS, {
+    leading: true,
+    trailing: false,
+  });
+}
 
-export default {
-  onMouseLeave: VoronoiHelpers.onMouseLeave.bind(VoronoiHelpers),
-  onMouseMove: throttle(
-    VoronoiHelpers.onMouseMove.bind(VoronoiHelpers),
-    32, // eslint-disable-line no-magic-numbers
-    { leading: true, trailing: false },
-  ),
-};
+export const VoronoiHelpers = new VoronoiHelpersClass();