victory-group 36.0.0 → 36.2.2

package/es/helper-methods.js

@@ -8,8 +8,21 @@ function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 import React from "react";
-import { Helpers, Scale, Data, Wrapper } from "victory-core";
+import { Data, Helpers, Scale, Wrapper } from "victory-core";
+import isEqual from "react-fast-compare";
 var fallbackProps = {
   width: 450,
   height: 300,
@@ -65,6 +78,38 @@ export function getCalculatedProps(props, childComponents) {
     origin: origin,
     padding: padding
   };
+} // We need to remove sharedEvents in order to memoize the calculated data
+// With shared events, the props change on every event, and every value is re-calculated
+
+var withoutSharedEvents = function (props) {
+  var children = props.children;
+  var modifiedChildren = React.Children.toArray(children).map(function (child) {
+    return _objectSpread({}, child, {
+      props: Helpers.omit(child.props, ["sharedEvents"])
+    });
+  });
+  props.children = modifiedChildren;
+  return props;
+};
+
+export function useMemoizedProps(initialProps) {
+  var modifiedProps = withoutSharedEvents(initialProps);
+
+  var _React$useState = React.useState(modifiedProps),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      props = _React$useState2[0],
+      setProps = _React$useState2[1]; // React.memo uses shallow equality to compare objects. This way props
+  // will only be re-calculated when they change.
+
+
+  React.useEffect(function () {
+    if (!isEqual(modifiedProps, props)) {
+      setProps(modifiedProps);
+    }
+  }, [props, setProps, modifiedProps]);
+  return React.useMemo(function () {
+    return getCalculatedProps(props, props.children);
+  }, [props]);
 }
 
 function pixelsToValue(props, axis, calculatedProps) {

package/es/index.d.ts

@@ -19,6 +19,7 @@ export interface VictoryGroupProps
     VictoryDatableProps,
     VictoryMultiLabelableProps {
   categories?: CategoryPropType;
+  children?: React.ReactNode;
   color?: string;
   colorScale?: ColorScalePropType;
   domain?: DomainPropType;

package/es/victory-group.js

@@ -8,9 +8,9 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import PropTypes from "prop-types";
 import React from "react";
-import { Helpers, VictoryContainer, VictoryTheme, CommonProps, Wrapper, usePreviousProps, useAnimationState } from "victory-core";
+import { Helpers, VictoryContainer, VictoryTheme, CommonProps, Wrapper, Hooks } from "victory-core";
 import { VictorySharedEvents } from "victory-shared-events";
-import { getChildren, getCalculatedProps } from "./helper-methods";
+import { getChildren, useMemoizedProps } from "./helper-methods";
 import isEqual from "react-fast-compare";
 var fallbackProps = {
   width: 450,
@@ -23,10 +23,10 @@ var VictoryGroup = function (initialProps) {
   // eslint-disable-next-line no-use-before-define
   var role = VictoryGroupMemo.role;
 
-  var _useAnimationState = useAnimationState(),
-      getAnimationProps = _useAnimationState.getAnimationProps,
-      setAnimationState = _useAnimationState.setAnimationState,
-      getProps = _useAnimationState.getProps;
+  var _Hooks$useAnimationSt = Hooks.useAnimationState(),
+      getAnimationProps = _Hooks$useAnimationSt.getAnimationProps,
+      setAnimationState = _Hooks$useAnimationSt.setAnimationState,
+      getProps = _Hooks$useAnimationSt.getProps;
 
   var props = getProps(initialProps);
   var modifiedProps = Helpers.modifyProps(props, fallbackProps, role);
@@ -42,7 +42,7 @@ var VictoryGroup = function (initialProps) {
       horizontal = modifiedProps.horizontal,
       name = modifiedProps.name;
   var childComponents = React.Children.toArray(modifiedProps.children);
-  var calculatedProps = getCalculatedProps(modifiedProps, childComponents);
+  var calculatedProps = useMemoizedProps(modifiedProps);
   var domain = calculatedProps.domain,
       scale = calculatedProps.scale,
       style = calculatedProps.style,
@@ -88,7 +88,7 @@ var VictoryGroup = function (initialProps) {
   var events = React.useMemo(function () {
     return Wrapper.getAllEvents(props);
   }, [props]);
-  var previousProps = usePreviousProps(initialProps);
+  var previousProps = Hooks.usePreviousProps(initialProps);
   React.useEffect(function () {
     // This is called before dismount to keep state in sync
     return function () {

package/lib/helper-methods.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getCalculatedProps = getCalculatedProps;
+exports.useMemoizedProps = useMemoizedProps;
 exports.getChildren = getChildren;
 
 var _assign2 = _interopRequireDefault(require("lodash/assign"));
@@ -12,6 +13,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _victoryCore = require("victory-core");
 
+var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
@@ -22,6 +25,18 @@ function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
 
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 var fallbackProps = {
   width: 450,
   height: 300,
@@ -84,6 +99,42 @@ function getCalculatedProps(props, childComponents) {
     origin: origin,
     padding: padding
   };
+} // We need to remove sharedEvents in order to memoize the calculated data
+// With shared events, the props change on every event, and every value is re-calculated
+
+
+var withoutSharedEvents = function (props) {
+  var children = props.children;
+
+  var modifiedChildren = _react.default.Children.toArray(children).map(function (child) {
+    return _objectSpread({}, child, {
+      props: _victoryCore.Helpers.omit(child.props, ["sharedEvents"])
+    });
+  });
+
+  props.children = modifiedChildren;
+  return props;
+};
+
+function useMemoizedProps(initialProps) {
+  var modifiedProps = withoutSharedEvents(initialProps);
+
+  var _React$useState = _react.default.useState(modifiedProps),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      props = _React$useState2[0],
+      setProps = _React$useState2[1]; // React.memo uses shallow equality to compare objects. This way props
+  // will only be re-calculated when they change.
+
+
+  _react.default.useEffect(function () {
+    if (!(0, _reactFastCompare.default)(modifiedProps, props)) {
+      setProps(modifiedProps);
+    }
+  }, [props, setProps, modifiedProps]);
+
+  return _react.default.useMemo(function () {
+    return getCalculatedProps(props, props.children);
+  }, [props]);
 }
 
 function pixelsToValue(props, axis, calculatedProps) {

package/lib/index.d.ts

@@ -19,6 +19,7 @@ export interface VictoryGroupProps
     VictoryDatableProps,
     VictoryMultiLabelableProps {
   categories?: CategoryPropType;
+  children?: React.ReactNode;
   color?: string;
   colorScale?: ColorScalePropType;
   domain?: DomainPropType;

package/lib/victory-group.js

@@ -40,10 +40,10 @@ var VictoryGroup = function (initialProps) {
   // eslint-disable-next-line no-use-before-define
   var role = VictoryGroupMemo.role;
 
-  var _useAnimationState = (0, _victoryCore.useAnimationState)(),
-      getAnimationProps = _useAnimationState.getAnimationProps,
-      setAnimationState = _useAnimationState.setAnimationState,
-      getProps = _useAnimationState.getProps;
+  var _Hooks$useAnimationSt = _victoryCore.Hooks.useAnimationState(),
+      getAnimationProps = _Hooks$useAnimationSt.getAnimationProps,
+      setAnimationState = _Hooks$useAnimationSt.setAnimationState,
+      getProps = _Hooks$useAnimationSt.getProps;
 
   var props = getProps(initialProps);
 
@@ -63,7 +63,7 @@ var VictoryGroup = function (initialProps) {
 
   var childComponents = _react.default.Children.toArray(modifiedProps.children);
 
-  var calculatedProps = (0, _helperMethods.getCalculatedProps)(modifiedProps, childComponents);
+  var calculatedProps = (0, _helperMethods.useMemoizedProps)(modifiedProps);
   var domain = calculatedProps.domain,
       scale = calculatedProps.scale,
       style = calculatedProps.style,
@@ -112,7 +112,7 @@ var VictoryGroup = function (initialProps) {
     return _victoryCore.Wrapper.getAllEvents(props);
   }, [props]);
 
-  var previousProps = (0, _victoryCore.usePreviousProps)(initialProps);
+  var previousProps = _victoryCore.Hooks.usePreviousProps(initialProps);
 
   _react.default.useEffect(function () {
     // This is called before dismount to keep state in sync

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-group",
-  "version": "36.0.0",
+  "version": "36.2.2",
   "description": "Group Layout Component for Victory",
   "keywords": [
     "data visualization",
@@ -22,8 +22,8 @@
     "lodash": "^4.17.19",
     "prop-types": "^15.5.8",
     "react-fast-compare": "^2.0.0",
-    "victory-core": "^36.0.0",
-    "victory-shared-events": "^36.0.0"
+    "victory-core": "^36.2.2",
+    "victory-shared-events": "^36.2.2"
   },
   "peerDependencies": {
     "react": "^16.6.0 || ^17.0.0"
@@ -32,5 +32,5 @@
     "version": "yarn run nps build-libs && nps build-dists"
   },
   "sideEffects": false,
-  "gitHead": "0f9e0825ddbae3287022cb4cd59c56f9993a4b77"
+  "gitHead": "e09146d4bede80e27ed095fcd7e1167c00fba864"
 }

package/src/helper-methods.js

@@ -2,7 +2,8 @@
 /* eslint-disable no-use-before-define */
 import { assign } from "lodash";
 import React from "react";
-import { Helpers, Scale, Data, Wrapper } from "victory-core";
+import { Data, Helpers, Scale, Wrapper } from "victory-core";
+import isEqual from "react-fast-compare";
 
 const fallbackProps = {
   width: 450,
@@ -63,6 +64,37 @@ export function getCalculatedProps(props, childComponents) {
   };
 }
 
+// We need to remove sharedEvents in order to memoize the calculated data
+// With shared events, the props change on every event, and every value is re-calculated
+const withoutSharedEvents = (props) => {
+  const { children } = props;
+  const modifiedChildren = React.Children.toArray(children).map((child) => {
+    return {
+      ...child,
+      props: Helpers.omit(child.props, ["sharedEvents"])
+    };
+  });
+  props.children = modifiedChildren;
+  return props;
+};
+
+export function useMemoizedProps(initialProps) {
+  const modifiedProps = withoutSharedEvents(initialProps);
+  const [props, setProps] = React.useState(modifiedProps);
+
+  // React.memo uses shallow equality to compare objects. This way props
+  // will only be re-calculated when they change.
+  React.useEffect(() => {
+    if (!isEqual(modifiedProps, props)) {
+      setProps(modifiedProps);
+    }
+  }, [props, setProps, modifiedProps]);
+
+  return React.useMemo(() => {
+    return getCalculatedProps(props, props.children);
+  }, [props]);
+}
+
 function pixelsToValue(props, axis, calculatedProps) {
   if (!props.offset) {
     return 0;

package/src/index.d.ts

@@ -19,6 +19,7 @@ export interface VictoryGroupProps
     VictoryDatableProps,
     VictoryMultiLabelableProps {
   categories?: CategoryPropType;
+  children?: React.ReactNode;
   color?: string;
   colorScale?: ColorScalePropType;
   domain?: DomainPropType;

package/src/victory-group.js

@@ -7,11 +7,10 @@ import {
   VictoryTheme,
   CommonProps,
   Wrapper,
-  usePreviousProps,
-  useAnimationState
+  Hooks
 } from "victory-core";
 import { VictorySharedEvents } from "victory-shared-events";
-import { getChildren, getCalculatedProps } from "./helper-methods";
+import { getChildren, useMemoizedProps } from "./helper-methods";
 import isEqual from "react-fast-compare";
 
 const fallbackProps = {
@@ -25,7 +24,7 @@ const VictoryGroup = (initialProps) => {
   // eslint-disable-next-line no-use-before-define
   const { role } = VictoryGroupMemo;
   const { getAnimationProps, setAnimationState, getProps } =
-    useAnimationState();
+    Hooks.useAnimationState();
   const props = getProps(initialProps);
 
   const modifiedProps = Helpers.modifyProps(props, fallbackProps, role);
@@ -44,7 +43,7 @@ const VictoryGroup = (initialProps) => {
   } = modifiedProps;
 
   const childComponents = React.Children.toArray(modifiedProps.children);
-  const calculatedProps = getCalculatedProps(modifiedProps, childComponents);
+  const calculatedProps = useMemoizedProps(modifiedProps);
   const { domain, scale, style, origin } = calculatedProps;
 
   const newChildren = React.useMemo(() => {
@@ -105,7 +104,7 @@ const VictoryGroup = (initialProps) => {
     return Wrapper.getAllEvents(props);
   }, [props]);
 
-  const previousProps = usePreviousProps(initialProps);
+  const previousProps = Hooks.usePreviousProps(initialProps);
 
   React.useEffect(() => {
     // This is called before dismount to keep state in sync