Victory native type fixes (#2785)

Author: KenanYusuf

.changeset/short-ads-hug.md

@@ -0,0 +1,11 @@
+---
+"victory-brush-container": patch
+"victory-cursor-container": patch
+"victory-line": patch
+"victory-native": patch
+"victory-selection-container": patch
+"victory-voronoi-container": patch
+"victory-zoom-container": patch
+---
+
+Fix victory-native component prop types

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

@@ -216,4 +216,3 @@ export const brushContainerMixin = <TBase extends Constructor>(base: TBase) =>
   };
 
 export const VictoryBrushContainer = brushContainerMixin(VictoryContainer);
-export type VictoryBrushContainer = typeof VictoryBrushContainer;

packages/victory-cursor-container/src/victory-cursor-container.tsx

@@ -210,4 +210,3 @@ export function cursorContainerMixin<
 }
 
 export const VictoryCursorContainer = cursorContainerMixin(VictoryContainer);
-export type VictoryCursorContainer = typeof VictoryCursorContainer;

packages/victory-line/src/victory-line.tsx

@@ -63,7 +63,7 @@ class VictoryLineBase extends React.Component<VictoryLineProps> {
     DefaultTransitions.continuousPolarTransitions();
   static continuous = true;
 
-  static defaultProps = {
+  static defaultProps: VictoryLineProps = {
     containerComponent: <VictoryContainer />,
     dataComponent: <Curve />,
     labelComponent: <VictoryLabel renderInPortal />,

packages/victory-native/src/components/victory-area.tsx

@@ -1,14 +1,17 @@
 import React from "react";
 import { Dimensions } from "react-native";
-import { VictoryArea as VictoryAreaBase } from "victory-area/es";
+import {
+  VictoryArea as VictoryAreaBase,
+  VictoryAreaProps,
+} from "victory-area/es";
 
 import { VictoryLabel } from "./victory-label";
 import { VictoryContainer } from "./victory-container";
 import { VictoryClipContainer } from "./victory-clip-container";
 import { Area } from "./victory-primitives/area";
 import { wrapCoreComponent } from "../helpers/wrap-core-component";
 
-export const VictoryArea = wrapCoreComponent({
+export const VictoryArea = wrapCoreComponent<VictoryAreaProps>({
   Component: VictoryAreaBase,
   defaultProps: {
     ...VictoryAreaBase.defaultProps,

packages/victory-native/src/components/victory-axis.tsx

@@ -1,13 +1,16 @@
 import React from "react";
 import { Dimensions } from "react-native";
 import { G } from "react-native-svg";
-import { VictoryAxis as VictoryAxisBase } from "victory-axis/es";
+import {
+  VictoryAxis as VictoryAxisBase,
+  VictoryAxisProps,
+} from "victory-axis/es";
 import { VictoryLabel } from "./victory-label";
 import { VictoryContainer } from "./victory-container";
 import { LineSegment } from "./victory-primitives/line-segment";
 import { wrapCoreComponent } from "../helpers/wrap-core-component";
 
-export const VictoryAxis = wrapCoreComponent({
+export const VictoryAxis = wrapCoreComponent<VictoryAxisProps>({
   Component: VictoryAxisBase,
   defaultProps: {
     ...VictoryAxisBase.defaultProps,

packages/victory-native/src/components/victory-bar.tsx

@@ -4,10 +4,10 @@ import { G } from "react-native-svg";
 import { VictoryLabel } from "./victory-label";
 import { VictoryContainer } from "./victory-container";
 import { Bar } from "./victory-primitives/bar";
-import { VictoryBar as VictoryBarBase } from "victory-bar/es";
+import { VictoryBar as VictoryBarBase, VictoryBarProps } from "victory-bar/es";
 import { wrapCoreComponent } from "../helpers/wrap-core-component";
 
-export const VictoryBar = wrapCoreComponent({
+export const VictoryBar = wrapCoreComponent<VictoryBarProps>({
   Component: VictoryBarBase,
   defaultProps: {
     ...VictoryBarBase.defaultProps,

packages/victory-native/src/components/victory-boxplot.tsx

@@ -1,15 +1,18 @@
 import React from "react";
 import { Dimensions } from "react-native";
 import { G } from "react-native-svg";
-import { VictoryBoxPlot as VictoryBoxPlotBase } from "victory-box-plot/es";
+import {
+  VictoryBoxPlot as VictoryBoxPlotBase,
+  VictoryBoxPlotProps,
+} from "victory-box-plot/es";
 import { VictoryLabel } from "./victory-label";
 import { VictoryContainer } from "./victory-container";
 import { Border } from "./victory-primitives/border";
 import { Whisker } from "./victory-primitives/whisker";
 import { LineSegment } from "./victory-primitives/line-segment";
 import { wrapCoreComponent } from "../helpers/wrap-core-component";
 
-export const VictoryBoxPlot = wrapCoreComponent({
+export const VictoryBoxPlot = wrapCoreComponent<VictoryBoxPlotProps>({
   Component: VictoryBoxPlotBase,
   defaultProps: {
     ...VictoryBoxPlotBase.defaultProps,

packages/victory-native/src/components/victory-brush-container.tsx

@@ -81,9 +81,14 @@ function nativeBrushMixin<
   };
 }
 
-const combinedMixin = flow(originalBrushMixin, nativeBrushMixin);
+const combinedMixin: (
+  base: React.ComponentClass,
+) => React.ComponentClass<VictoryBrushContainerNativeProps> = flow(
+  originalBrushMixin,
+  nativeBrushMixin,
+);
 
-export const brushContainerMixin = (base): VictoryBrushContainerBase =>
+export const brushContainerMixin = (base: React.ComponentClass) =>
   combinedMixin(base);
 
 export const VictoryBrushContainer = brushContainerMixin(VictoryContainer);

packages/victory-native/src/components/victory-brush-line.tsx

@@ -134,7 +134,7 @@ class VictoryNativeBrushLine<
   }
 }
 
-export const VictoryBrushLine = wrapCoreComponent({
+export const VictoryBrushLine = wrapCoreComponent<VictoryNativeBrushLineProps>({
   Component: VictoryNativeBrushLine,
   defaultProps: {
     ...VictoryNativeBrushLine.defaultProps,

packages/victory-native/src/components/victory-candlestick.tsx

@@ -4,10 +4,13 @@ import { G } from "react-native-svg";
 import { VictoryLabel } from "./victory-label";
 import { VictoryContainer } from "./victory-container";
 import { Candle } from "./victory-primitives/candle";
-import { VictoryCandlestick as VictoryCandlestickBase } from "victory-candlestick/es";
+import {
+  VictoryCandlestick as VictoryCandlestickBase,
+  VictoryCandlestickProps,
+} from "victory-candlestick/es";
 import { wrapCoreComponent } from "../helpers/wrap-core-component";
 
-export const VictoryCandlestick = wrapCoreComponent({
+export const VictoryCandlestick = wrapCoreComponent<VictoryCandlestickProps>({
   Component: VictoryCandlestickBase,
   defaultProps: {
     ...VictoryCandlestickBase.defaultProps,

packages/victory-native/src/components/victory-chart.tsx

@@ -1,14 +1,17 @@
 import React from "react";
 import { Dimensions } from "react-native";
 import { G } from "react-native-svg";
-import { VictoryChart as VictoryChartBase } from "victory-chart/es";
+import {
+  VictoryChart as VictoryChartBase,
+  VictoryChartProps,
+} from "victory-chart/es";
 import { Background } from "./victory-primitives/background";
 import { VictoryAxis } from "./victory-axis";
 import { VictoryPolarAxis } from "./victory-polar-axis";
 import { VictoryContainer } from "./victory-container";
 import { wrapCoreComponent } from "../helpers/wrap-core-component";
 
-export const VictoryChart = wrapCoreComponent({
+export const VictoryChart = wrapCoreComponent<VictoryChartProps>({
   Component: VictoryChartBase,
   defaultProps: {
     backgroundComponent: <Background />,

packages/victory-native/src/components/victory-cursor-container.tsx

@@ -69,9 +69,14 @@ function nativeCursorMixin<
   };
 }
 
-const combinedMixin = flow(originalCursorMixin, nativeCursorMixin);
+const combinedMixin: (
+  base: React.ComponentClass,
+) => React.ComponentClass<VictoryCursorContainerNativeProps> = flow(
+  originalCursorMixin,
+  nativeCursorMixin,
+);
 
-export const cursorContainerMixin = (base): VictoryCursorContainerBase =>
+export const cursorContainerMixin = (base: React.ComponentClass) =>
   combinedMixin(base);
 
 export const VictoryCursorContainer = cursorContainerMixin(VictoryContainer);

packages/victory-native/src/components/victory-errorbar.tsx

@@ -1,12 +1,15 @@
 import React from "react";
 import { Dimensions } from "react-native";
 import { G } from "react-native-svg";
-import { VictoryErrorBar as VictoryErrorBarBase } from "victory-errorbar/es";
+import {
+  VictoryErrorBar as VictoryErrorBarBase,
+  VictoryErrorBarProps,
+} from "victory-errorbar/es";
 import { VictoryContainer } from "./victory-container";
 import { ErrorBar } from "./victory-primitives/error-bar";
 import { wrapCoreComponent } from "../helpers/wrap-core-component";
 
-export const VictoryErrorBar = wrapCoreComponent({
+export const VictoryErrorBar = wrapCoreComponent<VictoryErrorBarProps>({
   Component: VictoryErrorBarBase,
   defaultProps: {
     ...VictoryErrorBarBase.defaultProps,

packages/victory-native/src/components/victory-group.tsx

@@ -1,11 +1,14 @@
 import React from "react";
 import { Dimensions } from "react-native";
 import { G } from "react-native-svg";
-import { VictoryGroup as VictoryGroupBase } from "victory-group/es";
+import {
+  VictoryGroup as VictoryGroupBase,
+  VictoryGroupProps,
+} from "victory-group/es";
 import { VictoryContainer } from "./victory-container";
 import { wrapCoreComponent } from "../helpers/wrap-core-component";
 
-export const VictoryGroup = wrapCoreComponent({
+export const VictoryGroup = wrapCoreComponent<VictoryGroupProps>({
   Component: VictoryGroupBase,
   defaultProps: {
     containerComponent: <VictoryContainer />,

packages/victory-native/src/components/victory-histogram.tsx

@@ -4,10 +4,13 @@ import { G } from "react-native-svg";
 import { VictoryLabel } from "./victory-label";
 import { VictoryContainer } from "./victory-container";
 import { Bar } from "./victory-primitives/bar";
-import { VictoryHistogram as VictoryHistogramBase } from "victory-histogram/es";
+import {
+  VictoryHistogram as VictoryHistogramBase,
+  VictoryHistogramProps,
+} from "victory-histogram/es";
 import { wrapCoreComponent } from "../helpers/wrap-core-component";
 
-export const VictoryHistogram = wrapCoreComponent({
+export const VictoryHistogram = wrapCoreComponent<VictoryHistogramProps>({
   Component: VictoryHistogramBase,
   defaultProps: {
     ...VictoryHistogramBase.defaultProps,

packages/victory-native/src/components/victory-legend.tsx

@@ -1,14 +1,17 @@
 import React from "react";
 import { G } from "react-native-svg";
-import { VictoryLegend as VictoryLegendBase } from "victory-legend/es";
+import {
+  VictoryLegend as VictoryLegendBase,
+  VictoryLegendProps,
+} from "victory-legend/es";
 import { Dimensions } from "react-native";
 import { VictoryLabel } from "./victory-label";
 import { VictoryContainer } from "./victory-container";
 import { Point } from "./victory-primitives/point";
 import { Border } from "./victory-primitives/border";
 import { wrapCoreComponent } from "../helpers/wrap-core-component";
 
-export const VictoryLegend = wrapCoreComponent({
+export const VictoryLegend = wrapCoreComponent<VictoryLegendProps>({
   Component: VictoryLegendBase,
   defaultProps: {
     ...VictoryLegendBase.defaultProps,

packages/victory-native/src/components/victory-line.tsx

@@ -1,13 +1,16 @@
 import React from "react";
 import { Dimensions } from "react-native";
-import { VictoryLine as VictoryLineBase } from "victory-line/es";
+import {
+  VictoryLine as VictoryLineBase,
+  VictoryLineProps,
+} from "victory-line/es";
 import { VictoryLabel } from "./victory-label";
 import { VictoryContainer } from "./victory-container";
 import { VictoryClipContainer } from "./victory-clip-container";
 import { Curve } from "./victory-primitives/curve";
 import { wrapCoreComponent } from "../helpers/wrap-core-component";
 
-export const VictoryLine = wrapCoreComponent({
+export const VictoryLine = wrapCoreComponent<VictoryLineProps>({
   Component: VictoryLineBase,
   defaultProps: {
     ...VictoryLineBase.defaultProps,

packages/victory-native/src/components/victory-pie.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import { Dimensions } from "react-native";
 import { G } from "react-native-svg";
-import { VictoryPie as VictoryPieBase } from "victory-pie/es";
+import { VictoryPie as VictoryPieBase, VictoryPieProps } from "victory-pie/es";
 import { VictoryLabel } from "./victory-label";
 import { VictoryContainer } from "./victory-container";
 import { Slice } from "./victory-primitives/slice";
 import { wrapCoreComponent } from "../helpers/wrap-core-component";
 
-export const VictoryPie = wrapCoreComponent({
+export const VictoryPie = wrapCoreComponent<VictoryPieProps>({
   Component: VictoryPieBase,
   defaultProps: {
     ...VictoryPieBase.defaultProps,

packages/victory-native/src/components/victory-polar-axis.tsx

@@ -1,14 +1,17 @@
 import React from "react";
 import { Dimensions } from "react-native";
 import { G } from "react-native-svg";
-import { VictoryPolarAxis as VictoryPolarAxisBase } from "victory-polar-axis/es";
+import {
+  VictoryPolarAxis as VictoryPolarAxisBase,
+  VictoryPolarAxisProps,
+} from "victory-polar-axis/es";
 import { VictoryLabel } from "./victory-label";
 import { VictoryContainer } from "./victory-container";
 import { Arc } from "./victory-primitives/arc";
 import { LineSegment } from "./victory-primitives/line-segment";
 import { wrapCoreComponent } from "../helpers/wrap-core-component";
 
-export const VictoryPolarAxis = wrapCoreComponent({
+export const VictoryPolarAxis = wrapCoreComponent<VictoryPolarAxisProps>({
   Component: VictoryPolarAxisBase,
   defaultProps: {
     ...VictoryPolarAxisBase.defaultProps,

packages/victory-native/src/components/victory-scatter.tsx

@@ -1,13 +1,16 @@
 import React from "react";
 import { Dimensions } from "react-native";
 import { G } from "react-native-svg";
-import { VictoryScatter as VictoryScatterBase } from "victory-scatter/es";
+import {
+  VictoryScatter as VictoryScatterBase,
+  VictoryScatterProps,
+} from "victory-scatter/es";
 import { VictoryLabel } from "./victory-label";
 import { VictoryContainer } from "./victory-container";
 import { Point } from "./victory-primitives/point";
 import { wrapCoreComponent } from "../helpers/wrap-core-component";
 
-export const VictoryScatter = wrapCoreComponent({
+export const VictoryScatter = wrapCoreComponent<VictoryScatterProps>({
   Component: VictoryScatterBase,
   defaultProps: {
     ...VictoryScatterBase.defaultProps,

packages/victory-native/src/components/victory-selection-container.tsx

@@ -81,9 +81,14 @@ function nativeSelectionMixin<
   };
 }
 
-const combinedMixin = flow(originalSelectionMixin, nativeSelectionMixin);
+const combinedMixin: (
+  base: React.ComponentClass,
+) => React.ComponentClass<VictorySelectionContainerNativeProps> = flow(
+  originalSelectionMixin,
+  nativeSelectionMixin,
+);
 
-export const selectionContainerMixin = (base): VictorySelectionContainerBase =>
+export const selectionContainerMixin = (base: React.ComponentClass) =>
   combinedMixin(base);
 
 export const VictorySelectionContainer =

packages/victory-native/src/components/victory-stack.tsx

@@ -1,11 +1,14 @@
 import React from "react";
 import { Dimensions } from "react-native";
 import { G } from "react-native-svg";
-import { VictoryStack as VictoryStackBase } from "victory-stack/es";
+import {
+  VictoryStack as VictoryStackBase,
+  VictoryStackProps,
+} from "victory-stack/es";
 import { VictoryContainer } from "./victory-container";
 import { wrapCoreComponent } from "../helpers/wrap-core-component";
 
-export const VictoryStack = wrapCoreComponent({
+export const VictoryStack = wrapCoreComponent<VictoryStackProps>({
   Component: VictoryStackBase,
   defaultProps: {
     containerComponent: <VictoryContainer />,

packages/victory-native/src/components/victory-voronoi-container.tsx

@@ -80,9 +80,14 @@ function nativeVoronoiMixin<
   };
 }
 
-const combinedMixin = flow(originalVoronoiMixin, nativeVoronoiMixin);
+const combinedMixin: (
+  base: React.ComponentClass,
+) => React.ComponentClass<VictoryVoronoiContainerNativeProps> = flow(
+  originalVoronoiMixin,
+  nativeVoronoiMixin,
+);
 
-export const voronoiContainerMixin = (base): VictoryVoronoiContainerBase =>
+export const voronoiContainerMixin = (base: React.ComponentClass) =>
   combinedMixin(base);
 
 export const VictoryVoronoiContainer = voronoiContainerMixin(VictoryContainer);

packages/victory-native/src/components/victory-voronoi.tsx

@@ -1,13 +1,16 @@
 import React from "react";
 import { Dimensions } from "react-native";
 import { G } from "react-native-svg";
-import { VictoryVoronoi as VictoryVoronoiBase } from "victory-voronoi/es";
+import {
+  VictoryVoronoi as VictoryVoronoiBase,
+  VictoryVoronoiProps,
+} from "victory-voronoi/es";
 import { VictoryLabel } from "./victory-label";
 import { VictoryContainer } from "./victory-container";
 import { Voronoi } from "./victory-primitives/voronoi";
 import { wrapCoreComponent } from "../helpers/wrap-core-component";
 
-export const VictoryVoronoi = wrapCoreComponent({
+export const VictoryVoronoi = wrapCoreComponent<VictoryVoronoiProps>({
   Component: VictoryVoronoiBase,
   defaultProps: {
     ...VictoryVoronoiBase.defaultProps,