TS migration. #2288. (#2328)

* Added TS. Updated build and linting config. Added types. * [ts-migrate][.] Rename files from JS/JSX to TS/TSX Co-authored-by: ts-migrate <> * [ts-migrate][.] Run TS Migrate Co-authored-by: ts-migrate <> * Corrected files mangled by ts-migrate. * Updated lint config, minor linting. * Re-enabled Husky. * Updated tests and config. * Reverted webpack devtool config. * Removed obsolete snapshots. * Added annotations snap. * Updated tsconfig includes wrt linting. * Removed ts-migrate. Co-authored-by: Timmy Huang <tihuan@users.noreply.github.com>
2026-10-02 10:28:11 +08:00 · 2021-07-26 20:18:17 +00:00
parent 7328cbdbd5
commit 934cc5c69b
206 changed files with 4719 additions and 2085 deletions
@@ -1,72 +0,0 @@
-import React from "react";
-
-export default class MiniStackedBar extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    this.canvasRef = React.createRef();
-  }
-
-  drawStacks = () => {
-    const {
-      domainValues,
-      scale,
-      domain,
-      colorTable,
-      occupancy,
-      width,
-      height,
-    } = this.props;
-
-    if (!colorTable || !domainValues) return;
-
-    const { scale: colorScale } = colorTable;
-
-    const ctx = this.canvasRef?.current.getContext("2d");
-
-    ctx.clearRect(0, 0, width, height);
-    let currentOffset = 0;
-
-    let occupancyValue;
-    let scaledValue;
-    let value;
-
-    for (let i = 0, { length } = domainValues; i < length; i += 1) {
-      value = domainValues[i];
-      occupancyValue = occupancy.get(value);
-      scaledValue = scale(occupancyValue);
-      ctx.fillStyle = occupancyValue
-        ? colorScale(domain.indexOf(value))
-        : "rgb(255,255,255)";
-      ctx.fillRect(currentOffset, 0, occupancyValue ? scaledValue : 0, height);
-      currentOffset += occupancyValue ? scaledValue : 0;
-    }
-  };
-
-  componentDidUpdate = (prevProps) => {
-    const { occupancy } = this.props;
-    if (occupancy !== prevProps.occupancy) this.drawStacks();
-  };
-
-  componentDidMount = () => {
-    this.drawStacks();
-  };
-
-  render() {
-    const { width, height } = this.props;
-    const { canvas } = this;
-    if (canvas) canvas.getContext("2d").clearRect(0, 0, width, height);
-
-    return (
-      <canvas
-        style={{
-          marginRight: 5,
-          width,
-          height,
-        }}
-        width={width}
-        height={height}
-        ref={this.canvasRef}
-      />
-    );
-  }
-}
@@ -0,0 +1,84 @@
+import React from "react";
+
+export default class MiniStackedBar extends React.PureComponent {
+  canvasRef: any;
+
+  constructor(props: any) {
+    super(props);
+    this.canvasRef = React.createRef();
+  }
+
+  drawStacks = () => {
+    const {
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'domainValues' does not exist on type 'Re... Remove this comment to see the full error message
+      domainValues,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'scale' does not exist on type 'Readonly<... Remove this comment to see the full error message
+      scale,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'domain' does not exist on type 'Readonly... Remove this comment to see the full error message
+      domain,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'colorTable' does not exist on type 'Read... Remove this comment to see the full error message
+      colorTable,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'occupancy' does not exist on type 'Reado... Remove this comment to see the full error message
+      occupancy,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'width' does not exist on type 'Readonly<... Remove this comment to see the full error message
+      width,
+      // @ts-expect-error ts-migrate(2339) FIXME: Property 'height' does not exist on type 'Readonly... Remove this comment to see the full error message
+      height,
+    } = this.props;
+
+    if (!colorTable || !domainValues) return;
+
+    const { scale: colorScale } = colorTable;
+
+    const ctx = this.canvasRef?.current.getContext("2d");
+
+    ctx.clearRect(0, 0, width, height);
+    let currentOffset = 0;
+
+    let occupancyValue;
+    let scaledValue;
+    let value;
+
+    for (let i = 0, { length } = domainValues; i < length; i += 1) {
+      value = domainValues[i];
+      occupancyValue = occupancy.get(value);
+      scaledValue = scale(occupancyValue);
+      ctx.fillStyle = occupancyValue
+        ? colorScale(domain.indexOf(value))
+        : "rgb(255,255,255)";
+      ctx.fillRect(currentOffset, 0, occupancyValue ? scaledValue : 0, height);
+      currentOffset += occupancyValue ? scaledValue : 0;
+    }
+  };
+
+  componentDidUpdate = (prevProps: any) => {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'occupancy' does not exist on type 'Reado... Remove this comment to see the full error message
+    const { occupancy } = this.props;
+    if (occupancy !== prevProps.occupancy) this.drawStacks();
+  };
+
+  componentDidMount = () => {
+    this.drawStacks();
+  };
+
+  render() {
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'width' does not exist on type 'Readonly<... Remove this comment to see the full error message
+    const { width, height } = this.props;
+    // @ts-expect-error ts-migrate(2339) FIXME: Property 'canvas' does not exist on type 'MiniStac... Remove this comment to see the full error message
+    const { canvas } = this;
+    if (canvas) canvas.getContext("2d").clearRect(0, 0, width, height);
+
+    return (
+      <canvas
+        style={{
+          marginRight: 5,
+          width,
+          height,
+        }}
+        width={width}
+        height={height}
+        ref={this.canvasRef}
+      />
+    );
+  }
+}