victory-zoom-container

Author: KenanYusuf

demo/ts/components/victory-zoom-container-demo.tsx

@@ -9,7 +9,8 @@ import { VictoryArea } from "victory-area";
 import { VictoryBar } from "victory-bar";
 import { VictoryLine } from "victory-line";
 import { VictoryScatter } from "victory-scatter";
-import { VictoryZoomContainer } from "victory-zoom-container";
+import { VictoryZoomContainerFn as VictoryZoomContainer } from "victory-zoom-container";
+// import { VictoryZoomContainer } from "victory-zoom-container";
 import { VictoryTooltip } from "victory-tooltip";
 import { VictoryLegend } from "victory-legend";
 import {
@@ -331,7 +332,9 @@ export default class VictoryZoomContainerDemo extends React.Component<
                       {
                         mutation: (props) => {
                           return {
-                            style: Object.assign({}, props.style, { stroke: "orange" }),
+                            style: Object.assign({}, props.style, {
+                              stroke: "orange",
+                            }),
                           };
                         },
                       },
@@ -417,7 +420,9 @@ export default class VictoryZoomContainerDemo extends React.Component<
                       target: "data",
                       mutation: (props) => {
                         return {
-                          style: Object.assign({}, props.style, { fill: "gold" }),
+                          style: Object.assign({}, props.style, {
+                            fill: "gold",
+                          }),
                         };
                       },
                     },
@@ -426,7 +431,9 @@ export default class VictoryZoomContainerDemo extends React.Component<
                       target: "data",
                       mutation: (props) => {
                         return {
-                          style: Object.assign({}, props.style, { fill: "orange" }),
+                          style: Object.assign({}, props.style, {
+                            fill: "orange",
+                          }),
                         };
                       },
                     },
@@ -435,7 +442,9 @@ export default class VictoryZoomContainerDemo extends React.Component<
                       target: "data",
                       mutation: (props) => {
                         return {
-                          style: Object.assign({}, props.style, { fill: "red" }),
+                          style: Object.assign({}, props.style, {
+                            fill: "red",
+                          }),
                         };
                       },
                     },

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

@@ -51,7 +51,7 @@ const defaultProps = {
 };
 
 export const VictoryContainerFn = (initialProps: VictoryContainerProps) => {
-  const propsWithDefaults = { ...defaultProps, ...initialProps };
+  const props = { ...defaultProps, ...initialProps };
   const {
     role,
     title,
@@ -69,19 +69,19 @@ export const VictoryContainerFn = (initialProps: VictoryContainerProps) => {
     ouiaId,
     ouiaSafe,
     ouiaType,
-  } = propsWithDefaults;
+  } = props;
 
   const containerRef = useRef<HTMLDivElement>(null);
 
   const portalRef = useRef<Portal>(null);
 
   // Generated ID stored in ref because it needs to persist across renders
   const generatedId = useRef(uniqueId("victory-container-"));
-  const containerId = propsWithDefaults.containerId ?? generatedId;
+  const containerId = props.containerId ?? generatedId;
 
   const getIdForElement = (elName: string) => `${containerId}-${elName}`;
 
-  const userProps = UserProps.getSafeUserProps(propsWithDefaults);
+  const userProps = UserProps.getSafeUserProps(props);
 
   const dimensions = responsive
     ? { width: "100%", height: "100%" }
@@ -90,24 +90,24 @@ export const VictoryContainerFn = (initialProps: VictoryContainerProps) => {
   const viewBox = responsive ? `0 0 ${width} ${height}` : undefined;
 
   const preserveAspectRatio = responsive
-    ? propsWithDefaults.preserveAspectRatio
+    ? props.preserveAspectRatio
     : undefined;
 
   const ariaLabelledBy =
-    [title && getIdForElement("title"), propsWithDefaults["aria-labelledby"]]
+    [title && getIdForElement("title"), props["aria-labelledby"]]
       .filter(Boolean)
       .join(" ") || undefined;
 
   const ariaDescribedBy =
-    [desc && getIdForElement("desc"), propsWithDefaults["aria-describedby"]]
+    [desc && getIdForElement("desc"), props["aria-describedby"]]
       .filter(Boolean)
       .join(" ") || undefined;
 
   const handleWheel = (e: WheelEvent) => e.preventDefault();
 
   React.useEffect(() => {
     // TODO check that this works
-    if (!propsWithDefaults.events?.onWheel) return;
+    if (!props.events?.onWheel) return;
 
     const container = containerRef?.current;
     container?.addEventListener("wheel", handleWheel);
@@ -138,7 +138,7 @@ export const VictoryContainerFn = (initialProps: VictoryContainerProps) => {
         data-ouia-component-id={ouiaId}
         data-ouia-component-type={ouiaType}
         data-ouia-safe={ouiaSafe}
-        ref={mergeRefs([containerRef, propsWithDefaults.containerRef])}
+        ref={mergeRefs([containerRef, props.containerRef])}
       >
         <svg
           width={width}

packages/victory-selection-container/src/victory-selection-container-fn.tsx

@@ -31,6 +31,13 @@ export interface VictorySelectionContainerProps extends VictoryContainerProps {
   selectionStyle?: React.CSSProperties;
 }
 
+type Handler = (
+  event: any,
+  targetProps: any,
+  eventKey?: any,
+  context?: any,
+) => void;
+
 const defaultProps = {
   activateSelectedData: true,
   allowSelection: true,
@@ -45,10 +52,10 @@ const defaultProps = {
 export const VictorySelectionContainerFn = (
   initialProps: VictorySelectionContainerProps,
 ) => {
-  const propsWithDefaults = { ...defaultProps, ...initialProps };
+  const props = { ...defaultProps, ...initialProps };
 
   const { x1, x2, y1, y2, selectionStyle, selectionComponent, children, name } =
-    propsWithDefaults;
+    props;
   const width = Math.abs(x2 - x1) || 1;
   const height = Math.abs(y2 - y1) || 1;
   const x = Math.min(x1, x2);
@@ -57,7 +64,7 @@ export const VictorySelectionContainerFn = (
   const shouldRenderRect = y1 && y2 && x1 && x2;
 
   return (
-    <VictoryContainerFn {...propsWithDefaults}>
+    <VictoryContainerFn {...props}>
       {children}
 
       {shouldRenderRect &&
@@ -76,12 +83,16 @@ export const VictorySelectionContainerFn = (
 VictorySelectionContainerFn.role = "container";
 
 VictorySelectionContainerFn.defaultEvents = (
-  props: VictorySelectionContainerProps,
+  initialProps: VictorySelectionContainerProps,
 ) => {
+  const props = { ...defaultProps, ...initialProps };
   const createEventHandler =
-    (handler: (event: any, targetProps: any) => any) =>
-    (event: any, targetProps: any) =>
-      props.disable ? {} : handler(event, { ...defaultProps, ...targetProps });
+    (handler: Handler, disabled?: boolean): Handler =>
+    // eslint-disable-next-line max-params
+    (event, targetProps, eventKey, context) =>
+      disabled || props.disable
+        ? {}
+        : handler(event, { ...props, ...targetProps }, eventKey, context);
 
   return [
     {

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

@@ -1,2 +1,3 @@
 export * from "./victory-zoom-container";
+export { VictoryZoomContainerFn } from "./victory-zoom-container-fn";
 export * from "./zoom-helpers";