TS Migrate: victory-group

packages/victory-group/package.json

@@ -27,7 +27,8 @@
     "victory-shared-events": "^36.5.3"
   },
   "devDependencies": {
-    "victory-bar": "*"
+    "victory-bar": "*",
+    "victory-group": "*"
   },
   "peerDependencies": {
     "react": ">=16.6.0"

packages/victory-group/src/helper-methods.js → packages/victory-group/src/helper-methods.tsx

@@ -18,8 +18,8 @@ export function getCalculatedProps(props, childComponents) {
   const style = Wrapper.getStyle(props.theme, props.style, role);
   const { offset, colorScale, color, polar, horizontal } = props;
   const categories =
-    props.categories || Wrapper.getCategories(props, childComponents);
-  const datasets = props.datasets || Wrapper.getDataFromChildren(props);
+    props.categories || Wrapper.getCategories(props, childComponents, null);
+  const datasets = props.datasets || Wrapper.getDataFromChildren(props, null);
   const domain = {
     x: Wrapper.getDomain(
       assign({}, props, { categories }),
@@ -67,12 +67,14 @@ export function getCalculatedProps(props, childComponents) {
 // With shared events, the props change on every event, and every value is re-calculated
 const withoutSharedEvents = (props) => {
   const { children } = props;
-  const modifiedChildren = React.Children.toArray(children).map((child) => {
-    return {
-      ...child,
-      props: Helpers.omit(child.props, ["sharedEvents"]),
-    };
-  });
+  const modifiedChildren = React.Children.toArray(children).map(
+    (child: Record<string, any> | any) => {
+      return {
+        ...child,
+        props: Helpers.omit(child.props, ["sharedEvents"]),
+      };
+    },
+  );
   props.children = modifiedChildren;
   return props;
 };

packages/victory-group/src/index.ts

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

packages/victory-group/src/victory-group.test.js → packages/victory-group/src/victory-group.test.tsx

@@ -17,8 +17,8 @@ describe("components/victory-group", () => {
         </VictoryGroup>,
       );
       const svg = container.querySelector("svg");
-      expect(svg.style.width).toEqual("100%");
-      expect(svg.style.height).toEqual("100%");
+      expect(svg?.style.width).toEqual("100%");
+      expect(svg?.style.height).toEqual("100%");
     });
 
     it("renders an svg with the correct viewBox", () => {
@@ -30,7 +30,7 @@ describe("components/victory-group", () => {
       );
       const svg = container.querySelector("svg");
       const viewBoxValue = `0 0 ${450} ${300}`;
-      expect(svg.getAttribute("viewBox")).toEqual(viewBoxValue);
+      expect(svg?.getAttribute("viewBox")).toEqual(viewBoxValue);
     });
 
     it("accepts user props", () => {

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

@@ -9,6 +9,16 @@ import {
   VictoryContainer,
   VictoryTheme,
   Wrapper,
+  CategoryPropType,
+  ColorScalePropType,
+  DomainPropType,
+  DomainPaddingPropType,
+  EventPropTypeInterface,
+  StringOrNumberOrCallback,
+  VictoryCommonProps,
+  VictoryDatableProps,
+  VictoryMultiLabelableProps,
+  VictoryStyleInterface,
 } from "victory-core";
 import { VictorySharedEvents } from "victory-shared-events";
 import { getChildren, useMemoizedProps } from "./helper-methods";
@@ -21,9 +31,34 @@ const fallbackProps = {
   offset: 0,
 };
 
-const VictoryGroup = (initialProps) => {
+export type VictoryGroupTTargetType = "data" | "labels" | "parent";
+export interface VictoryGroupBaseProps
+  extends VictoryCommonProps,
+    VictoryDatableProps,
+    VictoryMultiLabelableProps {
+  categories?: CategoryPropType;
+  children?: React.ReactNode;
+  color?: string;
+  colorScale?: ColorScalePropType;
+  domain?: DomainPropType;
+  domainPadding?: DomainPaddingPropType;
+  events?: EventPropTypeInterface<
+    VictoryGroupTTargetType,
+    StringOrNumberOrCallback
+  >[];
+  eventKey?: StringOrNumberOrCallback;
+  expectedComponents?: string[];
+  horizontal?: boolean;
+  offset?: number;
+  style?: VictoryStyleInterface;
+  displayName?: string;
+  role?: string;
+  getChildren?: any;
+}
+
+const VictoryGroupBase: React.FC<VictoryGroupBaseProps> = (initialProps) => {
   // eslint-disable-next-line no-use-before-define
-  const { role } = VictoryGroupMemo;
+  const role = VictoryGroup?.role;
   const { getAnimationProps, setAnimationState, getProps } =
     Hooks.useAnimationState();
   const props = getProps(initialProps);
@@ -51,7 +86,7 @@ const VictoryGroup = (initialProps) => {
     const children = getChildren(props, childComponents, calculatedProps);
     return children.map((child, index) => {
       const childProps = assign(
-        { animate: getAnimationProps(props, child, index, "victory-group") },
+        { animate: getAnimationProps(props, child, index) },
         child.props,
       );
       return React.cloneElement(child, childProps);
@@ -144,32 +179,18 @@ const VictoryGroup = (initialProps) => {
   return React.cloneElement(container, container.props, newChildren);
 };
 
-VictoryGroup.propTypes = {
+VictoryGroupBase.propTypes = {
   ...CommonProps.baseProps,
   ...CommonProps.dataProps,
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,
   ]),
-  color: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
-  colorScale: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.string),
-    PropTypes.oneOf([
-      "grayscale",
-      "qualitative",
-      "heatmap",
-      "warm",
-      "cool",
-      "red",
-      "green",
-      "blue",
-    ]),
-  ]),
   horizontal: PropTypes.bool,
   offset: PropTypes.number,
 };
 
-VictoryGroup.defaultProps = {
+VictoryGroupBase.defaultProps = {
   containerComponent: <VictoryContainer />,
   groupComponent: <g />,
   samples: 50,
@@ -178,19 +199,22 @@ VictoryGroup.defaultProps = {
   theme: VictoryTheme.grayscale,
 };
 
-// We need to attatch the static properties to the memoized version, or else
+// TODO: This utility could be moved and used for other components
+const typedMemo: <T>(component: T, equalityCheck?: any) => T = React.memo;
+
+// We need to attach the static properties to the memoized version, or else
 // VictoryChart will not be able to get this component's role type
-const VictoryGroupMemo = React.memo(VictoryGroup, isEqual);
+export const VictoryGroup = typedMemo<VictoryGroupBaseProps>(
+  VictoryGroupBase,
+  isEqual,
+);
 
-VictoryGroupMemo.displayName = "VictoryGroup";
-VictoryGroupMemo.role = "group";
+VictoryGroup.displayName = "VictoryGroup";
 
-VictoryGroupMemo.expectedComponents = [
+VictoryGroup.role = "group";
+VictoryGroup.expectedComponents = [
   "groupComponent",
   "containerComponent",
   "labelComponent",
 ];
-
-VictoryGroupMemo.getChildren = getChildren;
-
-export default VictoryGroupMemo;
+VictoryGroup.getChildren = getChildren;