victory-cursor-container 37.0.2 → 37.1.0

package/src/victory-cursor-container.tsx

@@ -1,6 +1,6 @@
+/* eslint-disable complexity */
 import React from "react";
 import {
-  VictoryContainer,
   Helpers,
   VictoryContainerProps,
   CoordinatesPropType,
@@ -8,6 +8,10 @@ import {
   ValueOrAccessor,
   VictoryLabel,
   LineSegment,
+  VictoryContainer,
+  VictoryEventHandler,
+  DomainTuple,
+  PaddingProps,
 } from "victory-core";
 import { defaults, isObject } from "lodash";
 import { CursorHelpers } from "./cursor-helpers";
@@ -22,191 +26,208 @@ export interface VictoryCursorContainerProps extends VictoryContainerProps {
   cursorLabelOffset?: CursorCoordinatesPropType;
   defaultCursorValue?: CursorCoordinatesPropType;
   disable?: boolean;
+  horizontal?: boolean;
+  padding?: PaddingProps;
   onCursorChange?: (
     value: CursorCoordinatesPropType,
     props: VictoryCursorContainerProps,
   ) => void;
 }
 
-type ComponentClass<TProps> = { new (props: TProps): React.Component<TProps> };
-
-export function cursorContainerMixin<
-  TBase extends ComponentClass<TProps>,
-  TProps extends VictoryCursorContainerProps,
->(Base: TBase) {
-  // @ts-expect-error "TS2545: A mixin class must have a constructor with a single rest parameter of type 'any[]'."
-  return class VictoryCursorContainer extends Base {
-    static displayName = "VictoryCursorContainer";
-    static defaultProps = {
-      ...VictoryContainer.defaultProps,
-      cursorLabelComponent: <VictoryLabel />,
-      cursorLabelOffset: {
-        x: 5,
-        y: -10,
-      },
-      cursorComponent: <LineSegment />,
-    };
-    static defaultEvents(props) {
-      return [
-        {
-          target: "parent",
-          eventHandlers: {
-            onMouseLeave: (evt, targetProps) => {
-              return props.disable
-                ? {}
-                : CursorHelpers.onMouseLeave(evt, targetProps);
-            },
-            onTouchCancel: () => {
-              return [];
-            },
-            onMouseMove: (evt, targetProps) => {
-              return props.disable
-                ? {}
-                : CursorHelpers.onMouseMove(evt, targetProps);
-            },
-            onTouchMove: (evt, targetProps) => {
-              return props.disable
-                ? {}
-                : CursorHelpers.onMouseMove(evt, targetProps);
-            },
-          },
-        },
-      ];
-    }
+interface VictoryCursorContainerMutatedProps
+  extends VictoryCursorContainerProps {
+  cursorValue: CoordinatesPropType | null;
+  domain: { x: DomainTuple; y: DomainTuple };
+}
 
-    getCursorPosition(props) {
-      const { cursorValue, defaultCursorValue, domain, cursorDimension } =
-        props;
-      if (cursorValue) {
-        return cursorValue;
-      }
+export const VICTORY_CURSOR_CONTAINER_DEFAULT_PROPS = {
+  cursorLabelComponent: <VictoryLabel />,
+  cursorLabelOffset: {
+    x: 5,
+    y: -10,
+  },
+  cursorComponent: <LineSegment />,
+};
+
+export const useVictoryCursorContainer = (
+  initialProps: VictoryCursorContainerProps,
+) => {
+  const props = {
+    ...VICTORY_CURSOR_CONTAINER_DEFAULT_PROPS,
+    ...(initialProps as VictoryCursorContainerMutatedProps),
+  };
+  const { children } = props;
 
-      if (typeof defaultCursorValue === "number") {
-        return {
-          x: (domain.x[0] + domain.x[1]) / 2,
-          y: (domain.y[0] + domain.y[1]) / 2,
-          [cursorDimension]: defaultCursorValue,
-        };
-      }
+  const getCursorPosition = () => {
+    const { cursorValue, defaultCursorValue, domain, cursorDimension } = props;
+    if (cursorValue) {
+      return cursorValue;
+    }
 
-      return defaultCursorValue;
+    if (typeof defaultCursorValue === "number") {
+      return {
+        x: ((domain.x[0] as number) + (domain.x[1] as number)) / 2,
+        y: ((domain.y[0] as number) + (domain.y[1] as number)) / 2,
+        ...(cursorDimension ? { [cursorDimension]: defaultCursorValue } : {}),
+      };
     }
 
-    getCursorLabelOffset(props) {
-      const { cursorLabelOffset } = props;
+    return defaultCursorValue;
+  };
 
-      if (typeof cursorLabelOffset === "number") {
-        return {
-          x: cursorLabelOffset,
-          y: cursorLabelOffset,
-        };
-      }
+  const getCursorLabelOffset = () => {
+    const { cursorLabelOffset } = props;
 
-      return cursorLabelOffset;
+    if (typeof cursorLabelOffset === "number") {
+      return {
+        x: cursorLabelOffset,
+        y: cursorLabelOffset,
+      };
     }
 
-    getPadding(props) {
-      if (props.padding === undefined) {
-        const child = props.children.find((c) => {
-          return isObject(c.props) && c.props.padding !== undefined;
-        });
-        return Helpers.getPadding(child.props);
-      }
-      return Helpers.getPadding(props);
-    }
+    return cursorLabelOffset;
+  };
 
-    getCursorElements(props) {
-      // eslint-disable-line max-statements
-      const {
-        scale,
-        cursorLabelComponent,
-        cursorLabel,
-        cursorComponent,
-        width,
-        height,
-        name,
-        horizontal,
-        theme,
-      } = props;
-      const cursorDimension = CursorHelpers.getDimension(props);
-      const cursorValue = this.getCursorPosition(props);
-      const cursorLabelOffset = this.getCursorLabelOffset(props);
-
-      if (!cursorValue) {
-        return [];
-      }
+  const getPadding = () => {
+    if (props.padding === undefined) {
+      const child = Array.isArray(props.children)
+        ? props.children.find((c: any) => {
+            return isObject(c.props) && c.props.padding !== undefined;
+          })
+        : props.children;
+      return Helpers.getPadding(child?.props);
+    }
+    return Helpers.getPadding(props);
+  };
 
-      const newElements: React.ReactElement[] = [];
-      const padding = this.getPadding(props);
-      const cursorCoordinates = {
-        x: horizontal ? scale.y(cursorValue.y) : scale.x(cursorValue.x),
-        y: horizontal ? scale.x(cursorValue.x) : scale.y(cursorValue.y),
-      };
-      if (cursorLabel) {
-        let labelProps = defaults(
-          { active: true },
-          cursorLabelComponent.props,
-          {
-            x: cursorCoordinates.x + cursorLabelOffset.x,
-            y: cursorCoordinates.y + cursorLabelOffset.y,
-            datum: cursorValue,
-            active: true,
-            key: `${name}-cursor-label`,
-          },
-        );
-        if (Helpers.isTooltip(cursorLabelComponent)) {
-          const tooltipTheme = (theme && theme.tooltip) || {};
-          labelProps = defaults({}, labelProps, tooltipTheme);
-        }
-        newElements.push(
-          React.cloneElement(
-            cursorLabelComponent,
-            defaults({}, labelProps, {
-              text: Helpers.evaluateProp(cursorLabel, labelProps),
-            }),
-          ),
-        );
-      }
+  const getCursorElements = () => {
+    // eslint-disable-line max-statements
+    const {
+      scale,
+      cursorLabelComponent,
+      cursorLabel,
+      cursorComponent,
+      width,
+      height,
+      name,
+      horizontal,
+      theme,
+    } = props;
+    const cursorDimension = CursorHelpers.getDimension(props);
+    const cursorValue = getCursorPosition();
+    const cursorLabelOffset = getCursorLabelOffset();
+
+    if (!cursorValue) {
+      return [];
+    }
 
-      const cursorStyle = Object.assign(
-        { stroke: "black" },
-        cursorComponent.props.style,
-      );
-      if (cursorDimension === "x" || cursorDimension === undefined) {
-        newElements.push(
-          React.cloneElement(cursorComponent, {
-            key: `${name}-x-cursor`,
-            x1: cursorCoordinates.x,
-            x2: cursorCoordinates.x,
-            y1: padding.top,
-            y2: height - padding.bottom,
-            style: cursorStyle,
-          }),
-        );
+    const newElements: React.ReactElement[] = [];
+    const padding = getPadding();
+    const cursorCoordinates =
+      scale &&
+      "x" in scale &&
+      "y" in scale &&
+      typeof scale.y === "function" &&
+      typeof scale.x === "function"
+        ? {
+            x: horizontal ? scale.y(cursorValue.y) : scale.x(cursorValue.x),
+            y: horizontal ? scale.x(cursorValue.x) : scale.y(cursorValue.y),
+          }
+        : {
+            x: cursorValue.x,
+            y: cursorValue.y,
+          };
+    if (cursorLabel) {
+      let labelProps = defaults({ active: true }, cursorLabelComponent.props, {
+        x: cursorCoordinates.x + cursorLabelOffset.x,
+        y: cursorCoordinates.y + cursorLabelOffset.y,
+        datum: cursorValue,
+        active: true,
+        key: `${name}-cursor-label`,
+      });
+      if (Helpers.isTooltip(cursorLabelComponent)) {
+        const tooltipTheme = (theme && theme.tooltip) || {};
+        labelProps = defaults({}, labelProps, tooltipTheme);
       }
-      if (cursorDimension === "y" || cursorDimension === undefined) {
-        newElements.push(
-          React.cloneElement(cursorComponent, {
-            key: `${name}-y-cursor`,
-            x1: padding.left,
-            x2: width - padding.right,
-            y1: cursorCoordinates.y,
-            y2: cursorCoordinates.y,
-            style: cursorStyle,
+      newElements.push(
+        React.cloneElement(
+          cursorLabelComponent,
+          defaults({}, labelProps, {
+            text: Helpers.evaluateProp(cursorLabel, labelProps),
           }),
-        );
-      }
-      return newElements;
+        ),
+      );
     }
 
-    // Overrides method in VictoryContainer
-    getChildren(props) {
-      return [
-        ...React.Children.toArray(props.children),
-        ...this.getCursorElements(props),
-      ];
+    const cursorStyle = Object.assign(
+      { stroke: "black" },
+      cursorComponent.props.style,
+    );
+    if (cursorDimension === "x" || cursorDimension === undefined) {
+      newElements.push(
+        React.cloneElement(cursorComponent, {
+          key: `${name}-x-cursor`,
+          x1: cursorCoordinates.x,
+          x2: cursorCoordinates.x,
+          y1: padding.top,
+          y2: (typeof height === "number" ? height : 0) - padding.bottom,
+          style: cursorStyle,
+        }),
+      );
+    }
+    if (cursorDimension === "y" || cursorDimension === undefined) {
+      newElements.push(
+        React.cloneElement(cursorComponent, {
+          key: `${name}-y-cursor`,
+          x1: padding.left,
+          x2: (typeof width === "number" ? width : 0) - padding.right,
+          y1: cursorCoordinates.y,
+          y2: cursorCoordinates.y,
+          style: cursorStyle,
+        }),
+      );
     }
+    return newElements;
   };
-}
 
-export const VictoryCursorContainer = cursorContainerMixin(VictoryContainer);
+  return {
+    props,
+    children: [
+      ...React.Children.toArray(children),
+      ...getCursorElements(),
+    ] as React.ReactElement[],
+  };
+};
+
+export const VictoryCursorContainer = (
+  initialProps: VictoryCursorContainerProps,
+) => {
+  const { props, children } = useVictoryCursorContainer(initialProps);
+  return <VictoryContainer {...props}>{children}</VictoryContainer>;
+};
+
+VictoryCursorContainer.role = "container";
+
+VictoryCursorContainer.defaultEvents = (
+  initialProps: VictoryCursorContainerProps,
+) => {
+  const props = { ...VICTORY_CURSOR_CONTAINER_DEFAULT_PROPS, ...initialProps };
+  const createEventHandler =
+    (handler: VictoryEventHandler, disabled?: boolean): VictoryEventHandler =>
+    // eslint-disable-next-line max-params
+    (event, targetProps, eventKey, context) =>
+      disabled || props.disable
+        ? {}
+        : handler(event, { ...props, ...targetProps }, eventKey, context);
+
+  return [
+    {
+      target: "parent",
+      eventHandlers: {
+        onMouseLeave: createEventHandler(CursorHelpers.onMouseLeave),
+        onMouseMove: createEventHandler(CursorHelpers.onMouseMove),
+        onTouchMove: createEventHandler(CursorHelpers.onMouseMove),
+      },
+    },
+  ];
+};