TS: migrate victory-brush-container and victory-brush-line

.changeset/late-crabs-sniff.md

@@ -0,0 +1,6 @@
+---
+"victory-brush-container": patch
+"victory-brush-line": patch
+---
+
+Migrate victory-brush-container and victory-brush-line to TypeScript

packages/victory-brush-container/package.json

@@ -28,6 +28,9 @@
   "peerDependencies": {
     "react": ">=16.6.0"
   },
+  "devDependencies": {
+    "victory-brush-container": "*"
+  },
   "scripts": {
     "###            THESE SCRIPTS ARE GENERATED           ###": "true",
     "###            DO NOT MODIFY THESE MANUALLY          ###": "true",

packages/victory-brush-container/src/brush-helpers.test.js → packages/victory-brush-container/src/brush-helpers.test.tsx

@@ -1,7 +1,8 @@
-import Helpers from "victory-brush-container/lib/brush-helpers";
+import { BrushHelpers } from "victory-brush-container";
 
 describe("containers/brush-helpers", () => {
-  const { withinBounds, constrainBox } = Helpers;
+  // eslint-disable-next-line @typescript-eslint/unbound-method
+  const { withinBounds, constrainBox } = BrushHelpers;
   describe("withinBounds", () => {
     it("returns true when within bounds", () => {
       const point = { x: 1, y: 1 };

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

@@ -11,7 +11,7 @@ const Helpers = {
     return brushDimension === "x" ? "y" : "x";
   },
 
-  withinBounds(point, bounds, padding) {
+  withinBounds(point, bounds, padding?) {
     const { x1, x2, y1, y2 } = mapValues(bounds, Number);
     const { x, y } = mapValues(point, Number);
     padding = padding ? padding / 2 : 0;
@@ -23,7 +23,7 @@ const Helpers = {
     );
   },
 
-  getDomainBox(props, fullDomain, selectedDomain) {
+  getDomainBox(props, fullDomain, selectedDomain?) {
     const brushDimension = this.getDimension(props);
     fullDomain = defaults({}, fullDomain, props.domain);
     selectedDomain = defaults({}, selectedDomain, fullDomain);
@@ -99,7 +99,7 @@ const Helpers = {
             : memo;
         return memo;
       },
-      [],
+      [] as string[],
     );
     return activeHandles.length && activeHandles;
   },
@@ -125,7 +125,7 @@ const Helpers = {
   },
 
   getDefaultBrushArea(targetProps, cachedDomain, evt) {
-    const { domain, fullDomain, scale, horizontal, allowResize } = targetProps;
+    const { domain, fullDomain, scale, allowResize } = targetProps;
     const defaultBrushArea =
       !allowResize && !targetProps.defaultBrushArea
         ? "move"
@@ -150,7 +150,7 @@ const Helpers = {
       const fullDomainBox =
         targetProps.fullDomainBox || this.getDomainBox(targetProps, fullDomain);
       const constrainedBox = this.constrainBox(pannedBox, fullDomainBox);
-      return Selection.getBounds({ ...constrainedBox, scale, horizontal });
+      return Selection.getBounds({ ...constrainedBox, scale });
     } else {
       return domain;
     }
@@ -343,7 +343,6 @@ const Helpers = {
       onBrushDomainChange,
       allowResize,
       allowDrag,
-      horizontal,
       mouseMoveThreshold,
       parentSVG,
     } = targetProps;
@@ -363,7 +362,6 @@ const Helpers = {
       const currentDomain = Selection.getBounds({
         ...constrainedBox,
         scale,
-        horizontal,
       });
       const mutatedProps = {
         currentDomain,
@@ -405,7 +403,6 @@ const Helpers = {
         x1: targetProps.x1,
         y1: targetProps.y1,
         scale,
-        horizontal,
       });
 
       const mutatedProps = { x2, y2, currentDomain, parentSVG };
@@ -452,7 +449,11 @@ const Helpers = {
         : targetProps.defaultBrushArea;
     const defaultBrushHasArea =
       defaultBrushArea !== undefined && defaultBrushArea !== "none";
-    const mutatedProps = { isPanning: false, isSelecting: false };
+    const mutatedProps: {
+      isPanning: boolean;
+      isSelecting: boolean;
+      currentDomain?: any;
+    } = { isPanning: false, isSelecting: false };
 
     // if the mouse hasn't moved since a mouseDown event, select the default brush area
     if ((allowResize || defaultBrushHasArea) && (x1 === x2 || y1 === y2)) {
@@ -496,7 +497,7 @@ const Helpers = {
   },
 };
 
-export default {
+export const BrushHelpers = {
   ...Helpers,
   onMouseDown: Helpers.onMouseDown.bind(Helpers),
   onGlobalMouseUp: Helpers.onGlobalMouseUp.bind(Helpers),

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

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

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

@@ -1,11 +1,45 @@
 import PropTypes from "prop-types";
 import React from "react";
-import { VictoryContainer, Selection, Rect } from "victory-core";
-import BrushHelpers from "./brush-helpers";
+import {
+  VictoryContainer,
+  Selection,
+  Rect,
+  DomainTuple,
+  VictoryContainerProps,
+} from "victory-core";
+import { BrushHelpers } from "./brush-helpers";
 import { assign, defaults } from "lodash";
 import isEqual from "react-fast-compare";
+export interface VictoryBrushContainerProps extends VictoryContainerProps {
+  allowDrag?: boolean;
+  allowDraw?: boolean;
+  allowResize?: boolean;
+  brushComponent?: React.ReactElement;
+  brushDimension?: "x" | "y";
+  brushDomain?: { x?: DomainTuple; y?: DomainTuple };
+  brushStyle?: React.CSSProperties;
+  defaultBrushArea?: "all" | "none" | "disable" | "move";
+  disable?: boolean;
+  handleComponent?: React.ReactElement;
+  handleStyle?: React.CSSProperties;
+  handleWidth?: number;
+  onBrushCleared?: (
+    domain: { x: DomainTuple; y: DomainTuple },
+    props: VictoryBrushContainerProps,
+  ) => void;
+  onBrushDomainChange?: (
+    domain: { x: DomainTuple; y: DomainTuple },
+    props: VictoryBrushContainerProps,
+  ) => void;
+  onBrushDomainChangeEnd?: (
+    domain: { x: DomainTuple; y: DomainTuple },
+    props: VictoryBrushContainerProps,
+  ) => void;
+}
 
-export const brushContainerMixin = (base) =>
+type Constructor = new (...ars: any[]) => React.Component;
+
+export const brushContainerMixin = <TBase extends Constructor>(base: TBase) =>
   class VictoryBrushContainer extends base {
     static displayName = "VictoryBrushContainer";
     static propTypes = {
@@ -176,7 +210,7 @@ export const brushContainerMixin = (base) =>
             : memo;
           return memo;
         },
-        [],
+        [] as React.ReactElement[],
       );
       return handles.length ? handles : null;
     }
@@ -201,4 +235,4 @@ export const brushContainerMixin = (base) =>
     }
   };
 
-export default brushContainerMixin(VictoryContainer);
+export const VictoryBrushContainer = brushContainerMixin(VictoryContainer);

packages/victory-brush-line/src/index.ts

@@ -0,0 +1 @@
+export * from "./victory-brush-line";

packages/victory-brush-line/src/victory-brush-line.js → packages/victory-brush-line/src/victory-brush-line.tsx

@@ -8,10 +8,44 @@ import {
   Scale,
   Domain,
   Box,
+  DomainTuple,
+  VictoryStyleObject,
 } from "victory-core";
 import { assign, defaults, isFunction, pick } from "lodash";
 import isEqual from "react-fast-compare";
 
+export type VictoryBrushLineTargetType = "data" | "labels" | "parent";
+export interface VictoryBrushLineProps {
+  allowDrag?: boolean;
+  allowDraw?: boolean;
+  allowResize?: boolean;
+  brushAreaComponent?: React.ReactElement;
+  brushAreaStyle?: VictoryStyleObject;
+  brushAreaWidth?: number;
+  brushComponent?: React.ReactElement;
+  brushDomain?: DomainTuple;
+  brushStyle?: VictoryStyleObject;
+  brushWidth?: number;
+  className?: string;
+  dimension?: "x" | "y";
+  events?: React.DOMAttributes<any>;
+  disable?: boolean;
+  groupComponent?: React.ReactElement;
+  handleComponent?: React.ReactElement;
+  handleStyle?: VictoryStyleObject;
+  handleWidth?: number;
+  id?: string | number;
+  lineComponent?: React.ReactElement;
+  name?: string;
+  onBrushDomainChange?: (
+    domain: DomainTuple,
+    props?: VictoryBrushLineProps,
+  ) => void;
+  style?: VictoryStyleObject;
+  type?: string;
+  width?: number;
+}
+
 const SMALL_NUMBER = 1 / Number.MAX_SAFE_INTEGER;
 const getScale = (props) => {
   const { scale = {}, dimension = "x" } = props;
@@ -68,16 +102,21 @@ const getBrushDomain = (brushDomain, fullDomain) => {
     const domainMin = Collection.getMinValue(fullDomain);
     const domainMax = Collection.getMaxValue(fullDomain);
     const defaultMin =
-      brushMin < domainMin ? domainMin : domainMax - SMALL_NUMBER;
+      brushMin < domainMin ? domainMin : +domainMax - SMALL_NUMBER;
     const defaultMax =
-      brushMax > domainMax ? domainMax : domainMin + SMALL_NUMBER;
+      brushMax > domainMax ? domainMax : +domainMin + SMALL_NUMBER;
     const min = withinBound(brushMin, fullDomain) ? brushMin : defaultMin;
     const max = withinBound(brushMax, fullDomain) ? brushMax : defaultMax;
     return [min, max];
   }
   return fullDomain;
 };
 
+type ReduceReturnType = {
+  min?: string;
+  max?: string;
+};
+
 const getActiveHandle = (props, position, range) => {
   const width = props.handleWidth / 2;
   const dimension = getDimension(props);
@@ -91,7 +130,7 @@ const getActiveHandle = (props, position, range) => {
   const active = ["min", "max"].reduce((memo, type) => {
     memo[type] = withinBound(position, getHandle(type)) ? type : undefined;
     return memo;
-  }, {});
+  }, {} as ReduceReturnType);
   return active.min && active.max ? "both" : active.min || active.max;
 };
 
@@ -135,7 +174,7 @@ const fallbackProps = {
   },
 };
 
-export default class VictoryBrushLine extends React.Component {
+export class VictoryBrushLine extends React.Component<VictoryBrushLineProps> {
   static propTypes = {
     allowDrag: PropTypes.bool,
     allowDraw: PropTypes.bool,
@@ -476,7 +515,7 @@ export default class VictoryBrushLine extends React.Component {
         ];
   };
 
-  getRectDimensions(props, brushWidth, domain) {
+  getRectDimensions(props, brushWidth, domain?) {
     const { brushDomain } = props;
     const dimension = getDimension(props);
     domain = domain || getBrushDomain(brushDomain, getFullDomain(props));

packages/victory-core/src/victory-util/selection.ts

@@ -83,7 +83,7 @@ export function getSVGEventCoordinates(
 export function getDomainCoordinates(
   props: Pick<VictoryCommonProps, "scale" | "horizontal">,
   domain?: DomainPropType,
-): DomainPropType {
+) {
   const { horizontal } = props;
   const scale = props.scale as ScaleXYPropType;
   // FIXME: add support for DomainTuple: [number, number]