victory-cursor-container 36.9.2-next.3 → 37.0.0

package/src/victory-cursor-container.tsx

@@ -1,6 +1,6 @@
-/* eslint-disable complexity */
 import React from "react";
 import {
+  VictoryContainer,
   Helpers,
   VictoryContainerProps,
   CoordinatesPropType,
@@ -8,10 +8,6 @@ import {
   ValueOrAccessor,
   VictoryLabel,
   LineSegment,
-  VictoryContainer,
-  VictoryEventHandler,
-  DomainTuple,
-  PaddingProps,
 } from "victory-core";
 import { defaults, isObject } from "lodash";
 import { CursorHelpers } from "./cursor-helpers";
@@ -26,208 +22,191 @@ export interface VictoryCursorContainerProps extends VictoryContainerProps {
   cursorLabelOffset?: CursorCoordinatesPropType;
   defaultCursorValue?: CursorCoordinatesPropType;
   disable?: boolean;
-  horizontal?: boolean;
-  padding?: PaddingProps;
   onCursorChange?: (
     value: CursorCoordinatesPropType,
     props: VictoryCursorContainerProps,
   ) => void;
 }
 
-interface VictoryCursorContainerMutatedProps
-  extends VictoryCursorContainerProps {
-  cursorValue: CoordinatesPropType | null;
-  domain: { x: DomainTuple; y: DomainTuple };
-}
-
-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;
+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);
+            },
+          },
+        },
+      ];
+    };
+
+    getCursorPosition(props) {
+      const { cursorValue, defaultCursorValue, domain, cursorDimension } =
+        props;
+      if (cursorValue) {
+        return cursorValue;
+      }
 
-  const getCursorPosition = () => {
-    const { cursorValue, defaultCursorValue, domain, cursorDimension } = props;
-    if (cursorValue) {
-      return cursorValue;
-    }
+      if (typeof defaultCursorValue === "number") {
+        return {
+          x: (domain.x[0] + domain.x[1]) / 2,
+          y: (domain.y[0] + domain.y[1]) / 2,
+          [cursorDimension]: 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 } : {}),
-      };
+      return defaultCursorValue;
     }
 
-    return defaultCursorValue;
-  };
+    getCursorLabelOffset(props) {
+      const { cursorLabelOffset } = props;
 
-  const getCursorLabelOffset = () => {
-    const { cursorLabelOffset } = props;
+      if (typeof cursorLabelOffset === "number") {
+        return {
+          x: cursorLabelOffset,
+          y: cursorLabelOffset,
+        };
+      }
 
-    if (typeof cursorLabelOffset === "number") {
-      return {
-        x: cursorLabelOffset,
-        y: cursorLabelOffset,
-      };
+      return cursorLabelOffset;
     }
 
-    return cursorLabelOffset;
-  };
-
-  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);
+    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 Helpers.getPadding(props);
-  };
 
-  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 [];
-    }
+    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 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);
+      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),
+            }),
+          ),
+        );
       }
-      newElements.push(
-        React.cloneElement(
-          cursorLabelComponent,
-          defaults({}, labelProps, {
-            text: Helpers.evaluateProp(cursorLabel, labelProps),
-          }),
-        ),
-      );
-    }
 
-    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,
-        }),
+      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,
+          }),
+        );
+      }
+      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,
+          }),
+        );
+      }
+      return newElements;
     }
-    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,
-        }),
-      );
+
+    // Overrides method in VictoryContainer
+    getChildren(props) {
+      return [
+        ...React.Children.toArray(props.children),
+        ...this.getCursorElements(props),
+      ];
     }
-    return newElements;
   };
+}
 
-  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),
-      },
-    },
-  ];
-};
+export const VictoryCursorContainer = cursorContainerMixin(VictoryContainer);