Migrate victory-bar to TypeScript (#2709)

.changeset/young-squids-lay.md

@@ -0,0 +1,5 @@
+---
+"victory-bar": patch
+---
+
+Migrate victory-bar to TypeScript

packages/victory-bar/src/bar-helper-methods.js → packages/victory-bar/src/bar-helper-methods.ts

@@ -1,8 +1,18 @@
 import { assign, isNil, isPlainObject } from "lodash";
-import { Helpers } from "victory-core";
+import { Helpers, VictoryStyleObject } from "victory-core";
+import { BarProps } from "./bar";
+import {
+  VictoryBarCornerRadiusObject,
+  VictoryBarCornerRadiusKey,
+} from "./victory-bar";
 
-export const getBarWidth = (barWidth, props) => {
-  const { scale, data, defaultBarWidth, style } = props;
+const DEFAULT_BAR_WIDTH = 8;
+
+export const getBarWidth = (
+  barWidth: BarProps["barWidth"],
+  props: BarProps,
+) => {
+  const { scale, data, style } = props;
   if (barWidth) {
     return Helpers.evaluateProp(barWidth, props);
   } else if (style.width) {
@@ -13,18 +23,24 @@ export const getBarWidth = (barWidth, props) => {
   const bars = data.length + 2;
   const barRatio = props.barRatio || 0.5;
   const defaultWidth =
-    barRatio * (data.length < 2 ? defaultBarWidth : extent / bars);
+    barRatio * (data.length < 2 ? DEFAULT_BAR_WIDTH : extent / bars);
   return Math.max(1, defaultWidth);
 };
 
-const getCornerRadiusFromObject = (cornerRadius, props) => {
-  const realCornerRadius = {
+const getCornerRadiusFromObject = (
+  cornerRadius: VictoryBarCornerRadiusObject,
+  props: BarProps,
+) => {
+  const realCornerRadius: VictoryBarCornerRadiusObject = {
     topLeft: 0,
     topRight: 0,
     bottomLeft: 0,
     bottomRight: 0,
   };
-  const updateCornerRadius = (corner, fallback) => {
+  const updateCornerRadius = (
+    corner: VictoryBarCornerRadiusKey,
+    fallback: "top" | "bottom",
+  ) => {
     if (!isNil(cornerRadius[corner])) {
       realCornerRadius[corner] = Helpers.evaluateProp(
         cornerRadius[corner],
@@ -44,8 +60,17 @@ const getCornerRadiusFromObject = (cornerRadius, props) => {
   return realCornerRadius;
 };
 
-export const getCornerRadius = (cornerRadius, props) => {
-  const realCornerRadius = {
+function isCornerRadiusObject(
+  cornerRadius: BarProps["cornerRadius"],
+): cornerRadius is VictoryBarCornerRadiusObject {
+  return isPlainObject(cornerRadius);
+}
+
+export const getCornerRadius = (
+  cornerRadius: BarProps["cornerRadius"],
+  props: BarProps,
+) => {
+  const realCornerRadius: VictoryBarCornerRadiusObject = {
     topLeft: 0,
     topRight: 0,
     bottomLeft: 0,
@@ -54,15 +79,15 @@ export const getCornerRadius = (cornerRadius, props) => {
   if (!cornerRadius) {
     return realCornerRadius;
   }
-  if (isPlainObject(cornerRadius)) {
+  if (isCornerRadiusObject(cornerRadius)) {
     return getCornerRadiusFromObject(cornerRadius, props);
   }
   realCornerRadius.topLeft = Helpers.evaluateProp(cornerRadius, props);
   realCornerRadius.topRight = Helpers.evaluateProp(cornerRadius, props);
   return realCornerRadius;
 };
 
-export const getStyle = (style = {}, props) => {
+export const getStyle = (style: VictoryStyleObject = {}, props: BarProps) => {
   if (props.disableInlineStyles) {
     return {};
   }

packages/victory-bar/src/bar.js → packages/victory-bar/src/bar.tsx

@@ -1,11 +1,36 @@
+/* eslint-disable react/prop-types */
 import { assign } from "lodash";
-import PropTypes from "prop-types";
 import React, { forwardRef } from "react";
-import { CommonProps, Helpers, Path } from "victory-core";
+import {
+  Helpers,
+  NumberOrCallback,
+  Path,
+  VictoryCommonPrimitiveProps,
+} from "victory-core";
 import { getStyle, getBarWidth, getCornerRadius } from "./bar-helper-methods";
 import { getPolarBarPath, getBarPath } from "./path-helper-methods";
+import {
+  VictoryBarAlignmentType,
+  VictoryBarCornerRadiusObject,
+} from "./victory-bar";
 
-const evaluateProps = (props) => {
+export interface BarProps extends VictoryCommonPrimitiveProps {
+  alignment?: VictoryBarAlignmentType;
+  barOffset?: number[];
+  barRatio?: number;
+  barWidth?: NumberOrCallback;
+  cornerRadius?: NumberOrCallback | VictoryBarCornerRadiusObject;
+  datum?: any;
+  getPath?: (x: number, y: number, props: any) => string;
+  horizontal?: boolean;
+  pathComponent?: React.ReactElement;
+  width?: number;
+  x?: number;
+  y?: number;
+  y0?: number;
+}
+
+const evaluateProps = (props: BarProps) => {
   /**
    * Potential evaluated props of following must be evaluated in this order:
    * 1) `style`
@@ -41,14 +66,17 @@ const evaluateProps = (props) => {
   });
 };
 
-const defaultProps = {
-  defaultBarWidth: 8,
+const defaultProps: Partial<BarProps> = {
   pathComponent: <Path />,
   role: "presentation",
   shapeRendering: "auto",
 };
+
 // eslint-disable-next-line prefer-arrow-callback
-const Bar = forwardRef(function Bar(props, ref) {
+export const Bar = forwardRef<SVGPathElement, BarProps>(function Bar(
+  props,
+  ref,
+) {
   props = evaluateProps({ ...defaultProps, ...props });
   const { polar, origin, style, barWidth, cornerRadius } = props;
 
@@ -57,6 +85,11 @@ const Bar = forwardRef(function Bar(props, ref) {
     : getBarPath(props, barWidth, cornerRadius);
   const defaultTransform =
     polar && origin ? `translate(${origin.x}, ${origin.y})` : undefined;
+
+  if (!props.pathComponent) {
+    return null;
+  }
+
   return React.cloneElement(props.pathComponent, {
     ...props.events,
     "aria-label": props.ariaLabel,
@@ -73,32 +106,3 @@ const Bar = forwardRef(function Bar(props, ref) {
     ref,
   });
 });
-
-Bar.propTypes = {
-  ...CommonProps.primitiveProps,
-  alignment: PropTypes.oneOf(["start", "middle", "end"]),
-  barRatio: PropTypes.number,
-  barWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-  cornerRadius: PropTypes.oneOfType([
-    PropTypes.number,
-    PropTypes.func,
-    PropTypes.shape({
-      top: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-      topLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-      topRight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-      bottom: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-      bottomLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-      bottomRight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-    }),
-  ]),
-  datum: PropTypes.object,
-  getPath: PropTypes.func,
-  horizontal: PropTypes.bool,
-  pathComponent: PropTypes.element,
-  width: PropTypes.number,
-  x: PropTypes.number,
-  y: PropTypes.number,
-  y0: PropTypes.number,
-};
-
-export default Bar;