victory-cursor-container 37.0.2 → 37.1.0

package/lib/victory-cursor-container.js

@@ -3,159 +3,176 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VictoryCursorContainer = void 0;
-exports.cursorContainerMixin = cursorContainerMixin;
+exports.useVictoryCursorContainer = exports.VictoryCursorContainer = exports.VICTORY_CURSOR_CONTAINER_DEFAULT_PROPS = void 0;
 var _isObject2 = _interopRequireDefault(require("lodash/isObject"));
 var _defaults2 = _interopRequireDefault(require("lodash/defaults"));
 var _react = _interopRequireDefault(require("react"));
 var _victoryCore = require("victory-core");
 var _cursorHelpers = require("./cursor-helpers");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-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 = {
-      ..._victoryCore.VictoryContainer.defaultProps,
-      cursorLabelComponent: /*#__PURE__*/_react.default.createElement(_victoryCore.VictoryLabel, null),
-      cursorLabelOffset: {
-        x: 5,
-        y: -10
-      },
-      cursorComponent: /*#__PURE__*/_react.default.createElement(_victoryCore.LineSegment, null)
-    };
-    static defaultEvents(props) {
-      return [{
-        target: "parent",
-        eventHandlers: {
-          onMouseLeave: (evt, targetProps) => {
-            return props.disable ? {} : _cursorHelpers.CursorHelpers.onMouseLeave(evt, targetProps);
-          },
-          onTouchCancel: () => {
-            return [];
-          },
-          onMouseMove: (evt, targetProps) => {
-            return props.disable ? {} : _cursorHelpers.CursorHelpers.onMouseMove(evt, targetProps);
-          },
-          onTouchMove: (evt, targetProps) => {
-            return props.disable ? {} : _cursorHelpers.CursorHelpers.onMouseMove(evt, targetProps);
-          }
-        }
-      }];
+/* eslint-disable complexity */
+
+const VICTORY_CURSOR_CONTAINER_DEFAULT_PROPS = exports.VICTORY_CURSOR_CONTAINER_DEFAULT_PROPS = {
+  cursorLabelComponent: /*#__PURE__*/_react.default.createElement(_victoryCore.VictoryLabel, null),
+  cursorLabelOffset: {
+    x: 5,
+    y: -10
+  },
+  cursorComponent: /*#__PURE__*/_react.default.createElement(_victoryCore.LineSegment, null)
+};
+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 (0, _isObject2.default)(c.props) && c.props.padding !== undefined;
-        });
-        return _victoryCore.Helpers.getPadding(child.props);
-      }
-      return _victoryCore.Helpers.getPadding(props);
+    return cursorLabelOffset;
+  };
+  const getPadding = () => {
+    if (props.padding === undefined) {
+      const child = Array.isArray(props.children) ? props.children.find(c => {
+        return (0, _isObject2.default)(c.props) && c.props.padding !== undefined;
+      }) : props.children;
+      return _victoryCore.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.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 = (0, _defaults2.default)({
-          active: true
-        }, cursorLabelComponent.props, {
-          x: cursorCoordinates.x + cursorLabelOffset.x,
-          y: cursorCoordinates.y + cursorLabelOffset.y,
-          datum: cursorValue,
-          active: true,
-          key: `${name}-cursor-label`
-        });
-        if (_victoryCore.Helpers.isTooltip(cursorLabelComponent)) {
-          const tooltipTheme = theme && theme.tooltip || {};
-          labelProps = (0, _defaults2.default)({}, labelProps, tooltipTheme);
-        }
-        newElements.push( /*#__PURE__*/_react.default.cloneElement(cursorLabelComponent, (0, _defaults2.default)({}, labelProps, {
-          text: _victoryCore.Helpers.evaluateProp(cursorLabel, labelProps)
-        })));
-      }
-      const cursorStyle = Object.assign({
-        stroke: "black"
-      }, cursorComponent.props.style);
-      if (cursorDimension === "x" || cursorDimension === undefined) {
-        newElements.push( /*#__PURE__*/_react.default.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.default.cloneElement(cursorComponent, {
-          key: `${name}-y-cursor`,
-          x1: padding.left,
-          x2: width - padding.right,
-          y1: cursorCoordinates.y,
-          y2: cursorCoordinates.y,
-          style: cursorStyle
-        }));
+    return _victoryCore.Helpers.getPadding(props);
+  };
+  const getCursorElements = () => {
+    // eslint-disable-line max-statements
+    const {
+      scale,
+      cursorLabelComponent,
+      cursorLabel,
+      cursorComponent,
+      width,
+      height,
+      name,
+      horizontal,
+      theme
+    } = props;
+    const cursorDimension = _cursorHelpers.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 = (0, _defaults2.default)({
+        active: true
+      }, cursorLabelComponent.props, {
+        x: cursorCoordinates.x + cursorLabelOffset.x,
+        y: cursorCoordinates.y + cursorLabelOffset.y,
+        datum: cursorValue,
+        active: true,
+        key: `${name}-cursor-label`
+      });
+      if (_victoryCore.Helpers.isTooltip(cursorLabelComponent)) {
+        const tooltipTheme = theme && theme.tooltip || {};
+        labelProps = (0, _defaults2.default)({}, labelProps, tooltipTheme);
       }
-      return newElements;
+      newElements.push( /*#__PURE__*/_react.default.cloneElement(cursorLabelComponent, (0, _defaults2.default)({}, labelProps, {
+        text: _victoryCore.Helpers.evaluateProp(cursorLabel, labelProps)
+      })));
     }
-
-    // Overrides method in VictoryContainer
-    getChildren(props) {
-      return [..._react.default.Children.toArray(props.children), ...this.getCursorElements(props)];
+    const cursorStyle = Object.assign({
+      stroke: "black"
+    }, cursorComponent.props.style);
+    if (cursorDimension === "x" || cursorDimension === undefined) {
+      newElements.push( /*#__PURE__*/_react.default.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( /*#__PURE__*/_react.default.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.default.Children.toArray(children), ...getCursorElements()]
   };
-}
-const VictoryCursorContainer = exports.VictoryCursorContainer = cursorContainerMixin(_victoryCore.VictoryContainer);
+};
+exports.useVictoryCursorContainer = useVictoryCursorContainer;
+const VictoryCursorContainer = initialProps => {
+  const {
+    props,
+    children
+  } = useVictoryCursorContainer(initialProps);
+  return /*#__PURE__*/_react.default.createElement(_victoryCore.VictoryContainer, props, children);
+};
+exports.VictoryCursorContainer = VictoryCursorContainer;
+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.CursorHelpers.onMouseLeave),
+      onMouseMove: createEventHandler(_cursorHelpers.CursorHelpers.onMouseMove),
+      onTouchMove: createEventHandler(_cursorHelpers.CursorHelpers.onMouseMove)
+    }
+  }];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-cursor-container",
-  "version": "37.0.2",
+  "version": "37.1.0",
   "description": "Interactive Cursor Component for Victory",
   "keywords": [
     "data visualization",
@@ -21,7 +21,7 @@
   "license": "MIT",
   "dependencies": {
     "lodash": "^4.17.19",
-    "victory-core": "^37.0.2"
+    "victory-core": "37.1.0"
   },
   "peerDependencies": {
     "react": ">=16.6.0"