victory-cursor-container 37.0.2 → 37.1.0

package/es/victory-cursor-container.js

@@ -1,153 +1,168 @@
 import _isObject from "lodash/isObject";
 import _defaults from "lodash/defaults";
+/* eslint-disable complexity */
 import React from "react";
-import { VictoryContainer, Helpers, VictoryLabel, LineSegment } from "victory-core";
+import { Helpers, VictoryLabel, LineSegment, VictoryContainer } from "victory-core";
 import { CursorHelpers } from "./cursor-helpers";
-export function cursorContainerMixin(Base) {
-  // @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: /*#__PURE__*/React.createElement(VictoryLabel, null),
-      cursorLabelOffset: {
-        x: 5,
-        y: -10
-      },
-      cursorComponent: /*#__PURE__*/React.createElement(LineSegment, null)
-    };
-    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);
-          }
-        }
-      }];
+export const VICTORY_CURSOR_CONTAINER_DEFAULT_PROPS = {
+  cursorLabelComponent: /*#__PURE__*/React.createElement(VictoryLabel, null),
+  cursorLabelOffset: {
+    x: 5,
+    y: -10
+  },
+  cursorComponent: /*#__PURE__*/React.createElement(LineSegment, null)
+};
+export const useVictoryCursorContainer = initialProps => {
+  const props = {
+    ...VICTORY_CURSOR_CONTAINER_DEFAULT_PROPS,
+    ...initialProps
+  };
+  const {
+    children
+  } = props;
+  const getCursorPosition = () => {
+    const {
+      cursorValue,
+      defaultCursorValue,
+      domain,
+      cursorDimension
+    } = props;
+    if (cursorValue) {
+      return cursorValue;
     }
-    getCursorPosition(props) {
-      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,
+    if (typeof defaultCursorValue === "number") {
+      return {
+        x: (domain.x[0] + domain.x[1]) / 2,
+        y: (domain.y[0] + domain.y[1]) / 2,
+        ...(cursorDimension ? {
           [cursorDimension]: defaultCursorValue
-        };
-      }
-      return defaultCursorValue;
+        } : {})
+      };
     }
-    getCursorLabelOffset(props) {
-      const {
-        cursorLabelOffset
-      } = props;
-      if (typeof cursorLabelOffset === "number") {
-        return {
-          x: cursorLabelOffset,
-          y: cursorLabelOffset
-        };
-      }
-      return cursorLabelOffset;
+    return defaultCursorValue;
+  };
+  const getCursorLabelOffset = () => {
+    const {
+      cursorLabelOffset
+    } = props;
+    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;
+  };
+  const getPadding = () => {
+    if (props.padding === undefined) {
+      const child = Array.isArray(props.children) ? props.children.find(c => {
+        return _isObject(c.props) && c.props.padding !== undefined;
+      }) : props.children;
+      return Helpers.getPadding(child?.props);
     }
-    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 = [];
-      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( /*#__PURE__*/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( /*#__PURE__*/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( /*#__PURE__*/React.cloneElement(cursorComponent, {
-          key: `${name}-y-cursor`,
-          x1: padding.left,
-          x2: width - padding.right,
-          y1: cursorCoordinates.y,
-          y2: cursorCoordinates.y,
-          style: cursorStyle
-        }));
+    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 [];
+    }
+    const newElements = [];
+    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);
       }
-      return newElements;
+      newElements.push( /*#__PURE__*/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( /*#__PURE__*/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
+      }));
     }
-
-    // Overrides method in VictoryContainer
-    getChildren(props) {
-      return [...React.Children.toArray(props.children), ...this.getCursorElements(props)];
+    if (cursorDimension === "y" || cursorDimension === undefined) {
+      newElements.push( /*#__PURE__*/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;
+  };
+  return {
+    props,
+    children: [...React.Children.toArray(children), ...getCursorElements()]
   };
-}
-export const VictoryCursorContainer = cursorContainerMixin(VictoryContainer);
+};
+export const VictoryCursorContainer = initialProps => {
+  const {
+    props,
+    children
+  } = useVictoryCursorContainer(initialProps);
+  return /*#__PURE__*/React.createElement(VictoryContainer, props, children);
+};
+VictoryCursorContainer.role = "container";
+VictoryCursorContainer.defaultEvents = initialProps => {
+  const props = {
+    ...VICTORY_CURSOR_CONTAINER_DEFAULT_PROPS,
+    ...initialProps
+  };
+  const createEventHandler = (handler, disabled) =>
+  // 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)
+    }
+  }];
+};

package/lib/victory-cursor-container.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import { VictoryContainer, VictoryContainerProps, CoordinatesPropType, VictoryLabelProps, ValueOrAccessor } from "victory-core";
+import { VictoryContainerProps, CoordinatesPropType, VictoryLabelProps, ValueOrAccessor, VictoryEventHandler, DomainTuple, PaddingProps } from "victory-core";
 export declare type CursorCoordinatesPropType = CoordinatesPropType | number;
 export interface VictoryCursorContainerProps extends VictoryContainerProps {
     cursorComponent?: React.ReactElement;
@@ -9,126 +9,77 @@ export interface VictoryCursorContainerProps extends VictoryContainerProps {
     cursorLabelOffset?: CursorCoordinatesPropType;
     defaultCursorValue?: CursorCoordinatesPropType;
     disable?: boolean;
+    horizontal?: boolean;
+    padding?: PaddingProps;
     onCursorChange?: (value: CursorCoordinatesPropType, props: VictoryCursorContainerProps) => void;
 }
-declare type ComponentClass<TProps> = {
-    new (props: TProps): React.Component<TProps>;
-};
-export declare function cursorContainerMixin<TBase extends ComponentClass<TProps>, TProps extends VictoryCursorContainerProps>(Base: TBase): {
-    new (props: TProps): {
-        getCursorPosition(props: any): any;
-        getCursorLabelOffset(props: any): any;
-        getPadding(props: any): {
-            top: any;
-            bottom: any;
-            left: any;
-            right: any;
-        };
-        getCursorElements(props: any): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-        getChildren(props: any): (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment)[];
-        context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<TProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        render(): React.ReactNode;
-        readonly props: Readonly<TProps>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<TProps>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<TProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<TProps>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<TProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<TProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<TProps>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<TProps>, nextState: Readonly<{}>, nextContext: any): void;
+export declare const VICTORY_CURSOR_CONTAINER_DEFAULT_PROPS: {
+    cursorLabelComponent: JSX.Element;
+    cursorLabelOffset: {
+        x: number;
+        y: number;
     };
-    displayName: string;
-    defaultProps: {
-        cursorLabelComponent: JSX.Element;
-        cursorLabelOffset: {
-            x: number;
-            y: number;
+    cursorComponent: JSX.Element;
+};
+export declare const useVictoryCursorContainer: (initialProps: VictoryCursorContainerProps) => {
+    props: {
+        cursorValue: CoordinatesPropType | null;
+        domain: {
+            x: DomainTuple;
+            y: DomainTuple;
         };
         cursorComponent: JSX.Element;
-        className: string;
-        portalComponent: JSX.Element;
-        portalZIndex: number;
-        responsive: boolean;
-        role: string;
-    };
-    defaultEvents(props: any): {
-        target: string;
-        eventHandlers: {
-            onMouseLeave: (evt: any, targetProps: any) => {};
-            onTouchCancel: () => never[];
-            onMouseMove: (evt: any, targetProps: any) => {} | undefined;
-            onTouchMove: (evt: any, targetProps: any) => {} | undefined;
-        };
-    }[];
-} & TBase;
-export declare const VictoryCursorContainer: {
-    new (props: VictoryCursorContainerProps): {
-        getCursorPosition(props: any): any;
-        getCursorLabelOffset(props: any): any;
-        getPadding(props: any): {
-            top: any;
-            bottom: any;
-            left: any;
-            right: any;
-        };
-        getCursorElements(props: any): React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
-        getChildren(props: any): (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment)[];
-        context: unknown;
-        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<VictoryCursorContainerProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callback?: (() => void) | undefined): void;
-        render(): React.ReactNode;
-        readonly props: Readonly<VictoryCursorContainerProps>;
-        state: Readonly<{}>;
-        refs: {
-            [key: string]: React.ReactInstance;
-        };
-        componentDidMount?(): void;
-        shouldComponentUpdate?(nextProps: Readonly<VictoryCursorContainerProps>, nextState: Readonly<{}>, nextContext: any): boolean;
-        componentWillUnmount?(): void;
-        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
-        getSnapshotBeforeUpdate?(prevProps: Readonly<VictoryCursorContainerProps>, prevState: Readonly<{}>): any;
-        componentDidUpdate?(prevProps: Readonly<VictoryCursorContainerProps>, prevState: Readonly<{}>, snapshot?: any): void;
-        componentWillMount?(): void;
-        UNSAFE_componentWillMount?(): void;
-        componentWillReceiveProps?(nextProps: Readonly<VictoryCursorContainerProps>, nextContext: any): void;
-        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<VictoryCursorContainerProps>, nextContext: any): void;
-        componentWillUpdate?(nextProps: Readonly<VictoryCursorContainerProps>, nextState: Readonly<{}>, nextContext: any): void;
-        UNSAFE_componentWillUpdate?(nextProps: Readonly<VictoryCursorContainerProps>, nextState: Readonly<{}>, nextContext: any): void;
-    };
-    displayName: string;
-    defaultProps: {
+        cursorDimension?: "x" | "y" | undefined;
+        cursorLabel?: ValueOrAccessor<VictoryLabelProps["text"]>;
         cursorLabelComponent: JSX.Element;
-        cursorLabelOffset: {
-            x: number;
-            y: number;
-        };
-        cursorComponent: JSX.Element;
-        className: string;
-        portalComponent: JSX.Element;
-        portalZIndex: number;
-        responsive: boolean;
-        role: string;
+        cursorLabelOffset: CursorCoordinatesPropType;
+        defaultCursorValue?: CursorCoordinatesPropType | undefined;
+        disable?: boolean | undefined;
+        horizontal?: boolean | undefined;
+        padding?: PaddingProps | undefined;
+        onCursorChange?: ((value: CursorCoordinatesPropType, props: VictoryCursorContainerProps) => void) | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
+        className?: string | undefined;
+        containerId?: string | number | undefined;
+        containerRef?: React.Ref<HTMLElement> | undefined;
+        desc?: string | undefined;
+        events?: React.DOMAttributes<any> | undefined;
+        height?: number | undefined;
+        name?: string | undefined;
+        origin?: import("victory-core").OriginType | undefined;
+        polar?: boolean | undefined;
+        portalComponent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+        portalZIndex?: number | undefined;
+        preserveAspectRatio?: string | undefined;
+        responsive?: boolean | undefined;
+        role?: string | undefined;
+        scale?: {
+            x?: import("victory-core").D3Scale<any> | undefined;
+            y?: import("victory-core").D3Scale<any> | undefined;
+        } | undefined;
+        style?: React.CSSProperties | undefined;
+        tabIndex?: number | undefined;
+        theme?: import("victory-core").VictoryThemeDefinition | undefined;
+        title?: string | undefined;
+        width?: number | undefined;
+        ouiaId?: string | number | undefined;
+        ouiaSafe?: boolean | undefined;
+        ouiaType?: string | undefined;
     };
-    defaultEvents(props: any): {
+    children: React.ReactElement<any, string | React.JSXElementConstructor<any>>[];
+};
+export declare const VictoryCursorContainer: {
+    (initialProps: VictoryCursorContainerProps): JSX.Element;
+    role: string;
+    defaultEvents(initialProps: VictoryCursorContainerProps): {
         target: string;
         eventHandlers: {
-            onMouseLeave: (evt: any, targetProps: any) => {};
-            onTouchCancel: () => never[];
-            onMouseMove: (evt: any, targetProps: any) => {} | undefined;
-            onTouchMove: (evt: any, targetProps: any) => {} | undefined;
+            onMouseLeave: VictoryEventHandler;
+            onMouseMove: VictoryEventHandler;
+            onTouchMove: VictoryEventHandler;
         };
     }[];
-} & typeof VictoryContainer;
-export {};
+};
 //# sourceMappingURL=victory-cursor-container.d.ts.map