victory-stack - npm Package Compare versions

Comparing version 35.11.0 to 35.11.2

es/victory-stack.js

@@ -9,5 +9,17 @@ import _isEmpty from "lodash/isEmpty";
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 import PropTypes from "prop-types";
 import React from "react";
-import { Helpers, VictoryContainer, VictoryTheme, CommonProps, Wrapper, PropTypes as CustomPropTypes, useAnimationState, usePreviousProps } from "victory-core";
+import { Helpers, VictoryContainer, VictoryTheme, CommonProps, Wrapper, PropTypes as CustomPropTypes } from "victory-core";
 import { VictorySharedEvents } from "victory-shared-events";
@@ -22,49 +34,79 @@ import { getChildren, getCalculatedProps } from "./helper-methods";
 
-var VictoryStack = function (initialProps) {
-  // eslint-disable-next-line no-use-before-define
-  var role = VictoryStackMemo.role;
+var VictoryStack =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(VictoryStack, _React$Component);
 
-  var _useAnimationState = useAnimationState(),
-      setAnimationState = _useAnimationState.setAnimationState,
-      getAnimationProps = _useAnimationState.getAnimationProps,
-      getProps = _useAnimationState.getProps;
+  function VictoryStack(props) {
+    var _this;
 
-  var props = getProps(initialProps);
-  var modifiedProps = Helpers.modifyProps(props, fallbackProps, role);
-  var eventKey = modifiedProps.eventKey,
-      containerComponent = modifiedProps.containerComponent,
-      standalone = modifiedProps.standalone,
-      groupComponent = modifiedProps.groupComponent,
-      externalEventMutations = modifiedProps.externalEventMutations,
-      width = modifiedProps.width,
-      height = modifiedProps.height,
-      theme = modifiedProps.theme,
-      polar = modifiedProps.polar,
-      horizontal = modifiedProps.horizontal,
-      name = modifiedProps.name;
-  var childComponents = React.Children.toArray(modifiedProps.children);
-  var calculatedProps = getCalculatedProps(modifiedProps, childComponents);
-  var domain = calculatedProps.domain,
-      scale = calculatedProps.scale,
-      style = calculatedProps.style,
-      origin = calculatedProps.origin;
-  var newChildren = React.useMemo(function () {
-    var children = getChildren(props, childComponents, calculatedProps);
-    var orderedChildren = children.map(function (child, index) {
-      var childProps = _assign({
-        animate: getAnimationProps(props, child, index, "victory-stack")
-      }, child.props);
+    _classCallCheck(this, VictoryStack);
 
-      return React.cloneElement(child, childProps);
-    });
-    /*
-      reverse render order for children of `VictoryStack` so that higher children in the stack
-      are rendered behind lower children. This looks nicer for stacked bars with cornerRadius, and
-      areas with strokes
-    */
+    _this = _possibleConstructorReturn(this, (VictoryStack.__proto__ || Object.getPrototypeOf(VictoryStack)).call(this, props));
 
-    return orderedChildren.reverse();
-  }, [props, childComponents, calculatedProps, getAnimationProps]);
-  var containerProps = React.useMemo(function () {
-    if (standalone) {
+    if (props.animate) {
+      _this.state = {
+        nodesShouldLoad: false,
+        nodesDoneLoad: false,
+        animating: true
+      };
+      _this.setAnimationState = Wrapper.setAnimationState.bind(_assertThisInitialized(_this));
+    }
+
+    return _this;
+  }
+
+  _createClass(VictoryStack, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps) {
+      if (this.props.animate) {
+        if (!isEqual(this.props, nextProps)) {
+          this.setAnimationState(this.props, nextProps);
+          return false;
+        }
+      }
+
+      return true;
+    }
+  }, {
+    key: "getNewChildren",
+    value: function getNewChildren(props, childComponents, calculatedProps) {
+      var children = getChildren(props, childComponents, calculatedProps);
+      var getAnimationProps = Wrapper.getAnimationProps.bind(this);
+      var newChildren = children.map(function (child, index) {
+        var childProps = _assign({
+          animate: getAnimationProps(props, child, index)
+        }, child.props);
+
+        return React.cloneElement(child, childProps);
+      });
+      /*
+        reverse render order for children of `VictoryStack` so that higher children in the stack
+        are rendered behind lower children. This looks nicer for stacked bars with cornerRadius, and
+        areas with strokes
+      */
+
+      return newChildren.reverse();
+    }
+  }, {
+    key: "renderContainer",
+    value: function renderContainer(containerComponent, props) {
+      var containerProps = _defaults({}, containerComponent.props, props);
+
+      return React.cloneElement(containerComponent, containerProps);
+    }
+  }, {
+    key: "getContainerProps",
+    value: function getContainerProps(props, calculatedProps) {
+      var width = props.width,
+          height = props.height,
+          standalone = props.standalone,
+          theme = props.theme,
+          polar = props.polar,
+          horizontal = props.horizontal,
+          name = props.name;
+      var domain = calculatedProps.domain,
+          scale = calculatedProps.scale,
+          style = calculatedProps.style,
+          origin = calculatedProps.origin;
       return {
@@ -84,70 +126,96 @@ domain: domain,
     }
+  }, {
+    key: "render",
+    value: function render() {
+      var role = this.constructor.role;
+      var props = this.state && this.state.nodesWillExit ? this.state.oldProps || this.props : this.props;
+      var modifiedProps = Helpers.modifyProps(props, fallbackProps, role);
+      var eventKey = modifiedProps.eventKey,
+          containerComponent = modifiedProps.containerComponent,
+          standalone = modifiedProps.standalone,
+          groupComponent = modifiedProps.groupComponent,
+          externalEventMutations = modifiedProps.externalEventMutations;
+      var childComponents = React.Children.toArray(modifiedProps.children);
+      var calculatedProps = getCalculatedProps(modifiedProps, childComponents);
+      var newChildren = this.getNewChildren(modifiedProps, childComponents, calculatedProps);
+      var containerProps = standalone ? this.getContainerProps(modifiedProps, calculatedProps) : {};
+      var container = standalone ? this.renderContainer(containerComponent, containerProps) : groupComponent;
+      var events = Wrapper.getAllEvents(props);
 
-    return {};
-  }, [standalone, domain, scale, width, height, theme, style, horizontal, polar, origin, name]);
-  var container = React.useMemo(function () {
-    if (standalone) {
-      var defaultContainerProps = _defaults({}, containerComponent.props, containerProps);
+      if (!_isEmpty(events)) {
+        return React.createElement(VictorySharedEvents, {
+          container: container,
+          eventKey: eventKey,
+          events: events,
+          externalEventMutations: externalEventMutations
+        }, newChildren);
+      }
 
-      return React.cloneElement(containerComponent, defaultContainerProps);
+      return React.cloneElement(container, container.props, newChildren);
     }
+  }]);
 
-    return groupComponent;
-  }, [groupComponent, standalone, containerComponent, containerProps]);
-  var events = React.useMemo(function () {
-    return Wrapper.getAllEvents(props);
-  }, [props]);
-  var previousProps = usePreviousProps(initialProps);
-  React.useEffect(function () {
-    // This is called before dismount to keep state in sync
-    return function () {
-      if (initialProps.animate) {
-        setAnimationState(previousProps, initialProps);
-      }
-    };
-  }, [setAnimationState, previousProps, initialProps]);
+  return VictoryStack;
+}(React.Component);
 
-  if (!_isEmpty(events)) {
-    return React.createElement(VictorySharedEvents, {
-      container: container,
-      eventKey: eventKey,
-      events: events,
-      externalEventMutations: externalEventMutations
-    }, newChildren);
+Object.defineProperty(VictoryStack, "displayName", {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  value: "VictoryStack"
+});
+Object.defineProperty(VictoryStack, "role", {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  value: "stack"
+});
+Object.defineProperty(VictoryStack, "propTypes", {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  value: _objectSpread({}, CommonProps.baseProps, {
+    bins: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.instanceOf(Date)])), CustomPropTypes.nonNegative]),
+    categories: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.shape({
+      x: PropTypes.arrayOf(PropTypes.string),
+      y: PropTypes.arrayOf(PropTypes.string)
+    })]),
+    children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+    colorScale: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.oneOf(["grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue"])]),
+    fillInMissingData: PropTypes.bool,
+    horizontal: PropTypes.bool,
+    labelComponent: PropTypes.element,
+    labels: PropTypes.oneOfType([PropTypes.func, PropTypes.array]),
+    style: PropTypes.shape({
+      parent: PropTypes.object,
+      data: PropTypes.object,
+      labels: PropTypes.object
+    }),
+    xOffset: PropTypes.number
+  })
+});
+Object.defineProperty(VictoryStack, "defaultProps", {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  value: {
+    containerComponent: React.createElement(VictoryContainer, null),
+    groupComponent: React.createElement("g", null),
+    standalone: true,
+    theme: VictoryTheme.grayscale,
+    fillInMissingData: true
   }
-
-  return React.cloneElement(container, container.props, newChildren);
-};
-
-VictoryStack.propTypes = _objectSpread({}, CommonProps.baseProps, {
-  bins: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.instanceOf(Date)])), CustomPropTypes.nonNegative]),
-  categories: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.shape({
-    x: PropTypes.arrayOf(PropTypes.string),
-    y: PropTypes.arrayOf(PropTypes.string)
-  })]),
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-  colorScale: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.string), PropTypes.oneOf(["grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue"])]),
-  fillInMissingData: PropTypes.bool,
-  horizontal: PropTypes.bool,
-  labelComponent: PropTypes.element,
-  labels: PropTypes.oneOfType([PropTypes.func, PropTypes.array]),
-  style: PropTypes.shape({
-    parent: PropTypes.object,
-    data: PropTypes.object,
-    labels: PropTypes.object
-  }),
-  xOffset: PropTypes.number
 });
-VictoryStack.defaultProps = {
-  containerComponent: React.createElement(VictoryContainer, null),
-  groupComponent: React.createElement("g", null),
-  standalone: true,
-  theme: VictoryTheme.grayscale,
-  fillInMissingData: true
-};
-var VictoryStackMemo = React.memo(VictoryStack, isEqual);
-VictoryStackMemo.displayName = "VictoryStack";
-VictoryStackMemo.role = "stack";
-VictoryStackMemo.expectedComponents = ["groupComponent", "containerComponent", "labelComponent"];
-VictoryStackMemo.getChildren = getChildren;
-export default VictoryStackMemo;
+Object.defineProperty(VictoryStack, "expectedComponents", {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  value: ["groupComponent", "containerComponent", "labelComponent"]
+});
+Object.defineProperty(VictoryStack, "getChildren", {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  value: getChildren
+});
+export { VictoryStack as default };

lib/victory-stack.js

@@ -32,2 +32,14 @@ "use strict";
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _possibleConstructorReturn(self, call) { if (call && (typeof call === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
 var fallbackProps = {
@@ -39,54 +51,79 @@ width: 450,
 
-var VictoryStack = function (initialProps) {
-  // eslint-disable-next-line no-use-before-define
-  var role = VictoryStackMemo.role;
+var VictoryStack =
+/*#__PURE__*/
+function (_React$Component) {
+  _inherits(VictoryStack, _React$Component);
 
-  var _useAnimationState = (0, _victoryCore.useAnimationState)(),
-      setAnimationState = _useAnimationState.setAnimationState,
-      getAnimationProps = _useAnimationState.getAnimationProps,
-      getProps = _useAnimationState.getProps;
+  function VictoryStack(props) {
+    var _this;
 
-  var props = getProps(initialProps);
+    _classCallCheck(this, VictoryStack);
 
-  var modifiedProps = _victoryCore.Helpers.modifyProps(props, fallbackProps, role);
+    _this = _possibleConstructorReturn(this, (VictoryStack.__proto__ || Object.getPrototypeOf(VictoryStack)).call(this, props));
 
-  var eventKey = modifiedProps.eventKey,
-      containerComponent = modifiedProps.containerComponent,
-      standalone = modifiedProps.standalone,
-      groupComponent = modifiedProps.groupComponent,
-      externalEventMutations = modifiedProps.externalEventMutations,
-      width = modifiedProps.width,
-      height = modifiedProps.height,
-      theme = modifiedProps.theme,
-      polar = modifiedProps.polar,
-      horizontal = modifiedProps.horizontal,
-      name = modifiedProps.name;
+    if (props.animate) {
+      _this.state = {
+        nodesShouldLoad: false,
+        nodesDoneLoad: false,
+        animating: true
+      };
+      _this.setAnimationState = _victoryCore.Wrapper.setAnimationState.bind(_assertThisInitialized(_this));
+    }
 
-  var childComponents = _react.default.Children.toArray(modifiedProps.children);
+    return _this;
+  }
 
-  var calculatedProps = (0, _helperMethods.getCalculatedProps)(modifiedProps, childComponents);
-  var domain = calculatedProps.domain,
-      scale = calculatedProps.scale,
-      style = calculatedProps.style,
-      origin = calculatedProps.origin;
+  _createClass(VictoryStack, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(nextProps) {
+      if (this.props.animate) {
+        if (!(0, _reactFastCompare.default)(this.props, nextProps)) {
+          this.setAnimationState(this.props, nextProps);
+          return false;
+        }
+      }
 
-  var newChildren = _react.default.useMemo(function () {
-    var children = (0, _helperMethods.getChildren)(props, childComponents, calculatedProps);
-    var orderedChildren = children.map(function (child, index) {
-      var childProps = (0, _assign2.default)({
-        animate: getAnimationProps(props, child, index, "victory-stack")
-      }, child.props);
-      return _react.default.cloneElement(child, childProps);
-    });
-    /*
-      reverse render order for children of `VictoryStack` so that higher children in the stack
-      are rendered behind lower children. This looks nicer for stacked bars with cornerRadius, and
-      areas with strokes
-    */
+      return true;
+    }
+  }, {
+    key: "getNewChildren",
+    value: function getNewChildren(props, childComponents, calculatedProps) {
+      var children = (0, _helperMethods.getChildren)(props, childComponents, calculatedProps);
 
-    return orderedChildren.reverse();
-  }, [props, childComponents, calculatedProps, getAnimationProps]);
+      var getAnimationProps = _victoryCore.Wrapper.getAnimationProps.bind(this);
 
-  var containerProps = _react.default.useMemo(function () {
-    if (standalone) {
+      var newChildren = children.map(function (child, index) {
+        var childProps = (0, _assign2.default)({
+          animate: getAnimationProps(props, child, index)
+        }, child.props);
+        return _react.default.cloneElement(child, childProps);
+      });
+      /*
+        reverse render order for children of `VictoryStack` so that higher children in the stack
+        are rendered behind lower children. This looks nicer for stacked bars with cornerRadius, and
+        areas with strokes
+      */
+
+      return newChildren.reverse();
+    }
+  }, {
+    key: "renderContainer",
+    value: function renderContainer(containerComponent, props) {
+      var containerProps = (0, _defaults2.default)({}, containerComponent.props, props);
+      return _react.default.cloneElement(containerComponent, containerProps);
+    }
+  }, {
+    key: "getContainerProps",
+    value: function getContainerProps(props, calculatedProps) {
+      var width = props.width,
+          height = props.height,
+          standalone = props.standalone,
+          theme = props.theme,
+          polar = props.polar,
+          horizontal = props.horizontal,
+          name = props.name;
+      var domain = calculatedProps.domain,
+          scale = calculatedProps.scale,
+          style = calculatedProps.style,
+          origin = calculatedProps.origin;
       return {
@@ -106,76 +143,101 @@ domain: domain,
     }
+  }, {
+    key: "render",
+    value: function render() {
+      var role = this.constructor.role;
+      var props = this.state && this.state.nodesWillExit ? this.state.oldProps || this.props : this.props;
 
-    return {};
-  }, [standalone, domain, scale, width, height, theme, style, horizontal, polar, origin, name]);
+      var modifiedProps = _victoryCore.Helpers.modifyProps(props, fallbackProps, role);
 
-  var container = _react.default.useMemo(function () {
-    if (standalone) {
-      var defaultContainerProps = (0, _defaults2.default)({}, containerComponent.props, containerProps);
-      return _react.default.cloneElement(containerComponent, defaultContainerProps);
-    }
+      var eventKey = modifiedProps.eventKey,
+          containerComponent = modifiedProps.containerComponent,
+          standalone = modifiedProps.standalone,
+          groupComponent = modifiedProps.groupComponent,
+          externalEventMutations = modifiedProps.externalEventMutations;
 
-    return groupComponent;
-  }, [groupComponent, standalone, containerComponent, containerProps]);
+      var childComponents = _react.default.Children.toArray(modifiedProps.children);
 
-  var events = _react.default.useMemo(function () {
-    return _victoryCore.Wrapper.getAllEvents(props);
-  }, [props]);
+      var calculatedProps = (0, _helperMethods.getCalculatedProps)(modifiedProps, childComponents);
+      var newChildren = this.getNewChildren(modifiedProps, childComponents, calculatedProps);
+      var containerProps = standalone ? this.getContainerProps(modifiedProps, calculatedProps) : {};
+      var container = standalone ? this.renderContainer(containerComponent, containerProps) : groupComponent;
 
-  var previousProps = (0, _victoryCore.usePreviousProps)(initialProps);
+      var events = _victoryCore.Wrapper.getAllEvents(props);
 
-  _react.default.useEffect(function () {
-    // This is called before dismount to keep state in sync
-    return function () {
-      if (initialProps.animate) {
-        setAnimationState(previousProps, initialProps);
+      if (!(0, _isEmpty2.default)(events)) {
+        return _react.default.createElement(_victorySharedEvents.VictorySharedEvents, {
+          container: container,
+          eventKey: eventKey,
+          events: events,
+          externalEventMutations: externalEventMutations
+        }, newChildren);
       }
-    };
-  }, [setAnimationState, previousProps, initialProps]);
 
-  if (!(0, _isEmpty2.default)(events)) {
-    return _react.default.createElement(_victorySharedEvents.VictorySharedEvents, {
-      container: container,
-      eventKey: eventKey,
-      events: events,
-      externalEventMutations: externalEventMutations
-    }, newChildren);
-  }
+      return _react.default.cloneElement(container, container.props, newChildren);
+    }
+  }]);
 
-  return _react.default.cloneElement(container, container.props, newChildren);
-};
+  return VictoryStack;
+}(_react.default.Component);
 
-VictoryStack.propTypes = _objectSpread({}, _victoryCore.CommonProps.baseProps, {
-  bins: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_victoryCore.PropTypes.nonNegative, _propTypes.default.instanceOf(Date)])), _victoryCore.PropTypes.nonNegative]),
-  categories: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.shape({
-    x: _propTypes.default.arrayOf(_propTypes.default.string),
-    y: _propTypes.default.arrayOf(_propTypes.default.string)
-  })]),
-  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]),
-  colorScale: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.oneOf(["grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue"])]),
-  fillInMissingData: _propTypes.default.bool,
-  horizontal: _propTypes.default.bool,
-  labelComponent: _propTypes.default.element,
-  labels: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.array]),
-  style: _propTypes.default.shape({
-    parent: _propTypes.default.object,
-    data: _propTypes.default.object,
-    labels: _propTypes.default.object
-  }),
-  xOffset: _propTypes.default.number
+exports.default = VictoryStack;
+Object.defineProperty(VictoryStack, "displayName", {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  value: "VictoryStack"
 });
-VictoryStack.defaultProps = {
-  containerComponent: _react.default.createElement(_victoryCore.VictoryContainer, null),
-  groupComponent: _react.default.createElement("g", null),
-  standalone: true,
-  theme: _victoryCore.VictoryTheme.grayscale,
-  fillInMissingData: true
-};
-
-var VictoryStackMemo = _react.default.memo(VictoryStack, _reactFastCompare.default);
-
-VictoryStackMemo.displayName = "VictoryStack";
-VictoryStackMemo.role = "stack";
-VictoryStackMemo.expectedComponents = ["groupComponent", "containerComponent", "labelComponent"];
-VictoryStackMemo.getChildren = _helperMethods.getChildren;
-var _default = VictoryStackMemo;
-exports.default = _default;
+Object.defineProperty(VictoryStack, "role", {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  value: "stack"
+});
+Object.defineProperty(VictoryStack, "propTypes", {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  value: _objectSpread({}, _victoryCore.CommonProps.baseProps, {
+    bins: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_victoryCore.PropTypes.nonNegative, _propTypes.default.instanceOf(Date)])), _victoryCore.PropTypes.nonNegative]),
+    categories: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.shape({
+      x: _propTypes.default.arrayOf(_propTypes.default.string),
+      y: _propTypes.default.arrayOf(_propTypes.default.string)
+    })]),
+    children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]),
+    colorScale: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string), _propTypes.default.oneOf(["grayscale", "qualitative", "heatmap", "warm", "cool", "red", "green", "blue"])]),
+    fillInMissingData: _propTypes.default.bool,
+    horizontal: _propTypes.default.bool,
+    labelComponent: _propTypes.default.element,
+    labels: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.array]),
+    style: _propTypes.default.shape({
+      parent: _propTypes.default.object,
+      data: _propTypes.default.object,
+      labels: _propTypes.default.object
+    }),
+    xOffset: _propTypes.default.number
+  })
+});
+Object.defineProperty(VictoryStack, "defaultProps", {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  value: {
+    containerComponent: _react.default.createElement(_victoryCore.VictoryContainer, null),
+    groupComponent: _react.default.createElement("g", null),
+    standalone: true,
+    theme: _victoryCore.VictoryTheme.grayscale,
+    fillInMissingData: true
+  }
+});
+Object.defineProperty(VictoryStack, "expectedComponents", {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  value: ["groupComponent", "containerComponent", "labelComponent"]
+});
+Object.defineProperty(VictoryStack, "getChildren", {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  value: _helperMethods.getChildren
+});

package.json

 {
   "name": "victory-stack",
-  "version": "35.11.0",
+  "version": "35.11.2",
   "description": "Stack Layout Component for Victory",
@@ -25,4 +25,4 @@ "keywords": [
     "react-fast-compare": "^2.0.0",
-    "victory-core": "^35.11.0",
-    "victory-shared-events": "^35.11.0"
+    "victory-core": "^35.11.2",
+    "victory-shared-events": "^35.11.2"
   },
@@ -29,0 +29,0 @@ "peerDependencies": {

src/victory-stack.js

@@ -10,5 +10,3 @@ import { assign, defaults, isEmpty } from "lodash";
   Wrapper,
-  PropTypes as CustomPropTypes,
-  useAnimationState,
-  usePreviousProps
+  PropTypes as CustomPropTypes
 } from "victory-core";
@@ -25,34 +23,98 @@ import { VictorySharedEvents } from "victory-shared-events";
 
-const VictoryStack = (initialProps) => {
-  // eslint-disable-next-line no-use-before-define
-  const { role } = VictoryStackMemo;
-  const { setAnimationState, getAnimationProps, getProps } =
-    useAnimationState();
+export default class VictoryStack extends React.Component {
+  static displayName = "VictoryStack";
 
-  const props = getProps(initialProps);
+  static role = "stack";
 
-  const modifiedProps = Helpers.modifyProps(props, fallbackProps, role);
-  const {
-    eventKey,
-    containerComponent,
-    standalone,
-    groupComponent,
-    externalEventMutations,
-    width,
-    height,
-    theme,
-    polar,
-    horizontal,
-    name
-  } = modifiedProps;
+  static propTypes = {
+    ...CommonProps.baseProps,
+    bins: PropTypes.oneOfType([
+      PropTypes.arrayOf(
+        PropTypes.oneOfType([
+          CustomPropTypes.nonNegative,
+          PropTypes.instanceOf(Date)
+        ])
+      ),
+      CustomPropTypes.nonNegative
+    ]),
+    categories: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.string),
+      PropTypes.shape({
+        x: PropTypes.arrayOf(PropTypes.string),
+        y: PropTypes.arrayOf(PropTypes.string)
+      })
+    ]),
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.node),
+      PropTypes.node
+    ]),
+    colorScale: PropTypes.oneOfType([
+      PropTypes.arrayOf(PropTypes.string),
+      PropTypes.oneOf([
+        "grayscale",
+        "qualitative",
+        "heatmap",
+        "warm",
+        "cool",
+        "red",
+        "green",
+        "blue"
+      ])
+    ]),
+    fillInMissingData: PropTypes.bool,
+    horizontal: PropTypes.bool,
+    labelComponent: PropTypes.element,
+    labels: PropTypes.oneOfType([PropTypes.func, PropTypes.array]),
+    style: PropTypes.shape({
+      parent: PropTypes.object,
+      data: PropTypes.object,
+      labels: PropTypes.object
+    }),
+    xOffset: PropTypes.number
+  };
 
-  const childComponents = React.Children.toArray(modifiedProps.children);
-  const calculatedProps = getCalculatedProps(modifiedProps, childComponents);
-  const { domain, scale, style, origin } = calculatedProps;
+  static defaultProps = {
+    containerComponent: <VictoryContainer />,
+    groupComponent: <g />,
+    standalone: true,
+    theme: VictoryTheme.grayscale,
+    fillInMissingData: true
+  };
 
-  const newChildren = React.useMemo(() => {
+  static expectedComponents = [
+    "groupComponent",
+    "containerComponent",
+    "labelComponent"
+  ];
+
+  static getChildren = getChildren;
+
+  constructor(props) {
+    super(props);
+    if (props.animate) {
+      this.state = {
+        nodesShouldLoad: false,
+        nodesDoneLoad: false,
+        animating: true
+      };
+      this.setAnimationState = Wrapper.setAnimationState.bind(this);
+    }
+  }
+
+  shouldComponentUpdate(nextProps) {
+    if (this.props.animate) {
+      if (!isEqual(this.props, nextProps)) {
+        this.setAnimationState(this.props, nextProps);
+        return false;
+      }
+    }
+    return true;
+  }
+
+  getNewChildren(props, childComponents, calculatedProps) {
     const children = getChildren(props, childComponents, calculatedProps);
-    const orderedChildren = children.map((child, index) => {
+    const getAnimationProps = Wrapper.getAnimationProps.bind(this);
+    const newChildren = children.map((child, index) => {
       const childProps = assign(
-        { animate: getAnimationProps(props, child, index, "victory-stack") },
+        { animate: getAnimationProps(props, child, index) },
         child.props
@@ -67,147 +129,71 @@ );
     */
-    return orderedChildren.reverse();
-  }, [props, childComponents, calculatedProps, getAnimationProps]);
+    return newChildren.reverse();
+  }
 
-  const containerProps = React.useMemo(() => {
-    if (standalone) {
-      return {
-        domain,
-        scale,
-        width,
-        height,
-        standalone,
-        theme,
-        style: style.parent,
-        horizontal,
-        polar,
-        origin,
-        name
-      };
-    }
-    return {};
-  }, [
-    standalone,
-    domain,
-    scale,
-    width,
-    height,
-    theme,
-    style,
-    horizontal,
-    polar,
-    origin,
-    name
-  ]);
+  renderContainer(containerComponent, props) {
+    const containerProps = defaults({}, containerComponent.props, props);
+    return React.cloneElement(containerComponent, containerProps);
+  }
 
-  const container = React.useMemo(() => {
-    if (standalone) {
-      const defaultContainerProps = defaults(
-        {},
-        containerComponent.props,
-        containerProps
+  getContainerProps(props, calculatedProps) {
+    const { width, height, standalone, theme, polar, horizontal, name } = props;
+    const { domain, scale, style, origin } = calculatedProps;
+    return {
+      domain,
+      scale,
+      width,
+      height,
+      standalone,
+      theme,
+      style: style.parent,
+      horizontal,
+      polar,
+      origin,
+      name
+    };
+  }
+
+  render() {
+    const { role } = this.constructor;
+    const props =
+      this.state && this.state.nodesWillExit
+        ? this.state.oldProps || this.props
+        : this.props;
+    const modifiedProps = Helpers.modifyProps(props, fallbackProps, role);
+    const {
+      eventKey,
+      containerComponent,
+      standalone,
+      groupComponent,
+      externalEventMutations
+    } = modifiedProps;
+    const childComponents = React.Children.toArray(modifiedProps.children);
+    const calculatedProps = getCalculatedProps(modifiedProps, childComponents);
+    const newChildren = this.getNewChildren(
+      modifiedProps,
+      childComponents,
+      calculatedProps
+    );
+    const containerProps = standalone
+      ? this.getContainerProps(modifiedProps, calculatedProps)
+      : {};
+    const container = standalone
+      ? this.renderContainer(containerComponent, containerProps)
+      : groupComponent;
+    const events = Wrapper.getAllEvents(props);
+    if (!isEmpty(events)) {
+      return (
+        <VictorySharedEvents
+          container={container}
+          eventKey={eventKey}
+          events={events}
+          externalEventMutations={externalEventMutations}
+        >
+          {newChildren}
+        </VictorySharedEvents>
       );
-      return React.cloneElement(containerComponent, defaultContainerProps);
     }
-    return groupComponent;
-  }, [groupComponent, standalone, containerComponent, containerProps]);
 
-  const events = React.useMemo(() => {
-    return Wrapper.getAllEvents(props);
-  }, [props]);
-
-  const previousProps = usePreviousProps(initialProps);
-
-  React.useEffect(() => {
-    // This is called before dismount to keep state in sync
-    return () => {
-      if (initialProps.animate) {
-        setAnimationState(previousProps, initialProps);
-      }
-    };
-  }, [setAnimationState, previousProps, initialProps]);
-
-  if (!isEmpty(events)) {
-    return (
-      <VictorySharedEvents
-        container={container}
-        eventKey={eventKey}
-        events={events}
-        externalEventMutations={externalEventMutations}
-      >
-        {newChildren}
-      </VictorySharedEvents>
-    );
+    return React.cloneElement(container, container.props, newChildren);
   }
-
-  return React.cloneElement(container, container.props, newChildren);
-};
-
-VictoryStack.propTypes = {
-  ...CommonProps.baseProps,
-  bins: PropTypes.oneOfType([
-    PropTypes.arrayOf(
-      PropTypes.oneOfType([
-        CustomPropTypes.nonNegative,
-        PropTypes.instanceOf(Date)
-      ])
-    ),
-    CustomPropTypes.nonNegative
-  ]),
-  categories: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.string),
-    PropTypes.shape({
-      x: PropTypes.arrayOf(PropTypes.string),
-      y: PropTypes.arrayOf(PropTypes.string)
-    })
-  ]),
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node
-  ]),
-  colorScale: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.string),
-    PropTypes.oneOf([
-      "grayscale",
-      "qualitative",
-      "heatmap",
-      "warm",
-      "cool",
-      "red",
-      "green",
-      "blue"
-    ])
-  ]),
-  fillInMissingData: PropTypes.bool,
-  horizontal: PropTypes.bool,
-  labelComponent: PropTypes.element,
-  labels: PropTypes.oneOfType([PropTypes.func, PropTypes.array]),
-  style: PropTypes.shape({
-    parent: PropTypes.object,
-    data: PropTypes.object,
-    labels: PropTypes.object
-  }),
-  xOffset: PropTypes.number
-};
-
-VictoryStack.defaultProps = {
-  containerComponent: <VictoryContainer />,
-  groupComponent: <g />,
-  standalone: true,
-  theme: VictoryTheme.grayscale,
-  fillInMissingData: true
-};
-
-const VictoryStackMemo = React.memo(VictoryStack, isEqual);
-
-VictoryStackMemo.displayName = "VictoryStack";
-VictoryStackMemo.role = "stack";
-
-VictoryStackMemo.expectedComponents = [
-  "groupComponent",
-  "containerComponent",
-  "labelComponent"
-];
-
-VictoryStackMemo.getChildren = getChildren;
-
-export default VictoryStackMemo;
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Lines of code

18075

increased by0.21%

Worsened metrics

Total package byte prevSize

931008

decreased by-0.11%

Dependency changes

• Updatedvictory-core@^35.11.2

• Updatedvictory-shared-events@^35.11.2