ts-migration: migrated core components to TS

.eslintrc.js

@@ -59,6 +59,8 @@ module.exports = {
             typedefs: false
           }
         ],
+        "no-invalid-this": "off",
+        "@typescript-eslint/no-invalid-this": ["error"],
 
         "@typescript-eslint/no-unsafe-argument": "warn",
         "@typescript-eslint/no-unsafe-assignment": "warn",

package.json

@@ -69,7 +69,7 @@
     "@testing-library/react": "^12.1.2",
     "@types/jest": "^27.5.1",
     "@types/lodash": "^4.14.149",
-    "@types/react": "^16.9.19",
+    "@types/react": "^16.14.26",
     "@types/react-dom": "^16.9.5",
     "@typescript-eslint/eslint-plugin": "^5.26.0",
     "@typescript-eslint/parser": "^5.26.0",
@@ -125,7 +125,7 @@
     "nps-utils": "^1.5.0",
     "prettier": "^2.6.2",
     "prop-types": "^15.8.1",
-    "react": "^16.13.1",
+    "react": "^16.14.0",
     "react-dom": "^16.13.1",
     "react-hot-loader": "v2.0.0-alpha-4",
     "rimraf": "^3.0.2",
@@ -141,5 +141,8 @@
     "webpack-dev-server": "^4.9.0",
     "webpack-stats-plugin": "^1.0.3"
   },
+  "resolutions": {
+    "@types/react": "^16.14.26"
+  },
   "sideEffects": false
 }

packages/victory-core/src/victory-animation/util.js → packages/victory-core/src/victory-animation/util.ts

@@ -82,8 +82,8 @@ export const interpolateFunction = function (a, b) {
     if (t >= 1) {
       return b;
     }
-    return function () {
-      /* eslint-disable no-invalid-this */
+    return function (this: unknown) {
+      /* eslint-disable no-invalid-this, prefer-rest-params */
       const aval = typeof a === "function" ? a.apply(this, arguments) : a;
       const bval = typeof b === "function" ? b.apply(this, arguments) : b;
       return interpolate(aval, bval)(t);

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

@@ -5,8 +5,81 @@ import * as d3Ease from "victory-vendor/d3-ease";
 import { victoryInterpolator } from "./util";
 import TimerContext from "../victory-util/timer-context";
 import isEqual from "react-fast-compare";
+import type Timer from "../victory-util/timer";
 
-export default class VictoryAnimation extends React.Component {
+/**
+ * Single animation object to interpolate
+ */
+export type AnimationStyle = { [key: string]: string | number };
+/**
+ * Animation styles to interpolate
+ */
+
+export type AnimationData = AnimationStyle | AnimationStyle[];
+export type AnimationEasing =
+  | "back"
+  | "backIn"
+  | "backOut"
+  | "backInOut"
+  | "bounce"
+  | "bounceIn"
+  | "bounceOut"
+  | "bounceInOut"
+  | "circle"
+  | "circleIn"
+  | "circleOut"
+  | "circleInOut"
+  | "linear"
+  | "linearIn"
+  | "linearOut"
+  | "linearInOut"
+  | "cubic"
+  | "cubicIn"
+  | "cubicOut"
+  | "cubicInOut"
+  | "elastic"
+  | "elasticIn"
+  | "elasticOut"
+  | "elasticInOut"
+  | "exp"
+  | "expIn"
+  | "expOut"
+  | "expInOut"
+  | "poly"
+  | "polyIn"
+  | "polyOut"
+  | "polyInOut"
+  | "quad"
+  | "quadIn"
+  | "quadOut"
+  | "quadInOut"
+  | "sin"
+  | "sinIn"
+  | "sinOut"
+  | "sinInOut";
+
+export interface VictoryAnimationProps {
+  children: (style: AnimationStyle, info: AnimationInfo) => React.ReactNode;
+  duration?: number;
+  easing?: AnimationEasing;
+  delay?: number;
+  onEnd?: () => void;
+  data: AnimationData;
+}
+export interface VictoryAnimationState {
+  data: AnimationStyle;
+  animationInfo: AnimationInfo;
+}
+export interface AnimationInfo {
+  progress: number;
+  animating: boolean;
+  terminating?: boolean;
+}
+
+export default class VictoryAnimation extends React.Component<
+  VictoryAnimationProps,
+  VictoryAnimationState
+> {
   static displayName = "VictoryAnimation";
 
   static propTypes = {
@@ -67,6 +140,11 @@ export default class VictoryAnimation extends React.Component {
   };
 
   static contextType = TimerContext;
+  private interpolator: null | ((value: number) => AnimationStyle);
+  private queue: AnimationStyle[];
+  private ease: any;
+  private timer: Timer;
+  private loopID?: number;
 
   constructor(props, context) {
     super(props, context);
@@ -84,11 +162,6 @@ export default class VictoryAnimation extends React.Component {
     this.queue = Array.isArray(this.props.data) ? this.props.data.slice(1) : [];
     /* build easing function */
     this.ease = d3Ease[this.toNewName(this.props.easing)];
-    /*
-      There is no autobinding of this in ES6 classes
-      so we bind functionToBeRunEachFrame to current instance of victory animation class
-    */
-    this.functionToBeRunEachFrame = this.functionToBeRunEachFrame.bind(this);
     this.timer = this.context.animationTimer;
   }
 
@@ -163,21 +236,21 @@ export default class VictoryAnimation extends React.Component {
         setTimeout(() => {
           this.loopID = this.timer.subscribe(
             this.functionToBeRunEachFrame,
-            this.props.duration
+            this.props.duration!
           );
         }, this.props.delay);
       } else {
         this.loopID = this.timer.subscribe(
           this.functionToBeRunEachFrame,
-          this.props.duration
+          this.props.duration!
         );
       }
     } else if (this.props.onEnd) {
       this.props.onEnd();
     }
   }
   /* every frame we... */
-  functionToBeRunEachFrame(elapsed, duration) {
+  functionToBeRunEachFrame = (elapsed, duration) => {
     /*
       step can generate imprecise values, sometimes greater than 1
       if this happens set the state to 1 and return, cancelling the timer
@@ -186,7 +259,7 @@ export default class VictoryAnimation extends React.Component {
     const step = duration ? elapsed / duration : 1;
     if (step >= 1) {
       this.setState({
-        data: this.interpolator(1),
+        data: this.interpolator!(1),
         animationInfo: {
           progress: 1,
           animating: false,
@@ -206,13 +279,13 @@ export default class VictoryAnimation extends React.Component {
       interpolator, which is cached for performance whenever props are received
     */
     this.setState({
-      data: this.interpolator(this.ease(step)),
+      data: this.interpolator!(this.ease(step)),
       animationInfo: {
         progress: step,
         animating: step < 1
       }
     });
-  }
+  };
 
   render() {
     return this.props.children(this.state.data, this.state.animationInfo);

packages/victory-core/src/victory-theme/grayscale.js → packages/victory-core/src/victory-theme/grayscale.tsx

@@ -1,4 +1,5 @@
 import { assign } from "lodash";
+import { VictoryThemeDefinition } from "./victory-theme-definition";
 
 // *
 // * Colors
@@ -49,7 +50,7 @@ const centeredLabelStyles = assign({ textAnchor: "middle" }, baseLabelStyles);
 const strokeLinecap = "round";
 const strokeLinejoin = "round";
 
-export default {
+export const grayscale: VictoryThemeDefinition = {
   area: assign(
     {
       style: {

packages/victory-core/src/victory-theme/material.js → packages/victory-core/src/victory-theme/material.tsx

@@ -1,4 +1,5 @@
 import { assign } from "lodash";
+import { VictoryThemeDefinition } from "./victory-theme-definition";
 
 // *
 // * Colors
@@ -57,7 +58,7 @@ const strokeDasharray = "10, 5";
 const strokeLinecap = "round";
 const strokeLinejoin = "round";
 
-export default {
+export const material: VictoryThemeDefinition = {
   area: assign(
     {
       style: {

packages/victory-core/src/victory-theme/victory-theme.d.ts → packages/victory-core/src/victory-theme/victory-theme-definition.ts

@@ -1,10 +1,9 @@
 import * as React from "react";
 import {
-  CallbackArgs,
-  StringOrNumberOrCallback,
   VictoryCommonThemeProps,
   VictoryDatableProps
 } from "../index";
+import { CallbackArgs, StringOrNumberOrCallback } from "../types";
 
 export type BlockProps = {
   top?: number;
@@ -263,11 +262,3 @@ export interface VictoryThemeDefinition {
   } & VictoryCommonThemeProps &
     VictoryDatableProps;
 }
-
-export interface VictoryThemeInterface {
-  grayscale: VictoryThemeDefinition;
-  material: VictoryThemeDefinition;
-}
-
-const VictoryTheme: VictoryThemeInterface;
-export default VictoryTheme;

packages/victory-core/src/victory-theme/victory-theme.tsx

@@ -0,0 +1,3 @@
+export * from "./material";
+export * from "./grayscale";
+export * from './victory-theme-definition';