Migrate victory-native to TypeScript (#2739)

Co-authored-by: Charlie Brown <carbonrobot@gmail.com>

Author: KenanYusuf

.changeset/fair-bobcats-knock.md

@@ -0,0 +1,13 @@
+---
+"victory-area": patch
+"victory-box-plot": patch
+"victory-brush-line": patch
+"victory-core": patch
+"victory-errorbar": patch
+"victory-native": patch
+"victory-polar-axis": patch
+"victory-scatter": patch
+"victory-tooltip": patch
+---
+
+Migrate victory-native to TypeScript

config/webpack/webpack.config.js

@@ -28,16 +28,15 @@ module.exports = {
   cache: true,
   context: SRC,
   entry: "./index",
-  externals: [
-    {
-      react: {
-        root: "React",
-        commonjs2: "react",
-        commonjs: "react",
-        amd: "react",
-      },
+  externals: {
+    react: {
+      root: "React",
+      commonjs2: "react",
+      commonjs: "react",
+      amd: "react",
     },
-  ],
+    "react-native": "react-native",
+  },
   resolve: {
     extensions: [".ts", ".tsx", ".js", ".jsx"],
   },

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

@@ -95,7 +95,7 @@ class VictoryAreaBase extends React.Component<VictoryAreaProps> {
     ),
   };
 
-  static defaultProps = {
+  static defaultProps: VictoryAreaProps = {
     containerComponent: <VictoryContainer />,
     dataComponent: <Area />,
     groupComponent: <VictoryClipContainer />,

packages/victory-box-plot/src/victory-box-plot.tsx

@@ -283,7 +283,7 @@ class VictoryBoxPlotBase extends React.Component<VictoryBoxPlotProps> {
     whiskerWidth: PropTypes.number,
   };
 
-  static defaultProps = {
+  static defaultProps: VictoryBoxPlotProps = {
     containerComponent: <VictoryContainer />,
     data: defaultData,
     dataComponent: <Box />,

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

@@ -174,7 +174,9 @@ const fallbackProps = {
   },
 };
 
-export class VictoryBrushLine extends React.Component<VictoryBrushLineProps> {
+export class VictoryBrushLine<
+  T extends VictoryBrushLineProps,
+> extends React.Component<T> {
   static propTypes = {
     allowDrag: PropTypes.bool,
     allowDraw: PropTypes.bool,
@@ -466,7 +468,7 @@ export class VictoryBrushLine extends React.Component<VictoryBrushLineProps> {
                 }
                 return [];
               },
-              onMouseUp(evt, targetProps) {
+              onMouseUp: (evt, targetProps) => {
                 const {
                   onBrushDomainChange,
                   brushDomain,
@@ -494,7 +496,7 @@ export class VictoryBrushLine extends React.Component<VictoryBrushLineProps> {
                   },
                 ];
               },
-              onMouseLeave(evt, targetProps) {
+              onMouseLeave: (evt, targetProps) => {
                 const { brushDomain } = targetProps;
                 return [
                   {

packages/victory-core/src/victory-clip-container/victory-clip-container.tsx

@@ -73,7 +73,7 @@ export class VictoryClipContainer extends React.Component<VictoryClipContainerPr
     clipPathComponent: <ClipPath />,
     groupComponent: <g />,
   };
-  private clipId: VictoryClipContainerProps["clipId"];
+  public clipId: VictoryClipContainerProps["clipId"];
 
   constructor(props: VictoryClipContainerProps) {
     super(props);

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

@@ -43,7 +43,9 @@ export interface VictoryContainerProps {
   width?: number;
 }
 
-export class VictoryContainer extends React.Component<VictoryContainerProps> {
+export class VictoryContainer<
+  TProps extends VictoryContainerProps,
+> extends React.Component<TProps> {
   static displayName = "VictoryContainer";
   static role = "container";
   static propTypes = {
@@ -96,7 +98,7 @@ export class VictoryContainer extends React.Component<VictoryContainerProps> {
   private containerRef: HTMLElement;
   private shouldHandleWheel: boolean;
 
-  constructor(props: VictoryContainerProps) {
+  constructor(props: TProps) {
     super(props);
     this.containerId =
       !isObject(props) || props.containerId === undefined

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

@@ -48,7 +48,7 @@ export class Portal
     this.forceUpdate();
   };
 
-  private getChildren() {
+  public getChildren() {
     return keys(this.map).map((key) => {
       const el = this.map[key];
       return el ? React.cloneElement(el, { key }) : el;

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

@@ -30,9 +30,9 @@ export class VictoryPortal extends React.Component<VictoryPortalProps> {
 
   static contextType = PortalContext;
   private checkedContext!: boolean;
-  private renderInPlace!: boolean;
-  private element!: React.ReactElement;
   private portalKey!: number;
+  public renderInPlace!: boolean;
+  public element!: React.ReactElement;
 
   componentDidMount() {
     if (!this.checkedContext) {

packages/victory-core/src/victory-primitives/arc.tsx

@@ -17,6 +17,7 @@ export interface ArcProps extends VictoryCommonPrimitiveProps {
   pathComponent?: React.ReactElement;
   r?: number;
   startAngle?: number;
+  type?: string;
 }
 
 const getArcPath = (props) => {

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

@@ -102,7 +102,7 @@ class VictoryErrorBarBase extends React.Component<VictoryErrorBarProps> {
     horizontal: PropTypes.bool,
   };
 
-  static defaultProps = {
+  static defaultProps: VictoryErrorBarProps = {
     containerComponent: <VictoryContainer />,
     data: defaultData,
     dataComponent: <ErrorBar />,