Replace addEvents HOC with custom hook

.babelrc

@@ -13,11 +13,13 @@
     "@babel/transform-spread",
     "@babel/transform-template-literals",
     "@babel/proposal-object-rest-spread",
-    "@babel/plugin-proposal-export-namespace-from"
+    "@babel/plugin-proposal-export-namespace-from",
+    "@babel/plugin-proposal-optional-chaining"
   ],
   "env": {
     "commonjs": {
       "plugins": [
+        "@babel/plugin-proposal-optional-chaining",
         [
           "@babel/transform-modules-commonjs",
           {

package.json

@@ -36,6 +36,7 @@
     "@babel/core": "7.0.0-beta.44",
     "@babel/plugin-proposal-class-properties": "7.0.0-beta.44",
     "@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.44",
+    "@babel/plugin-proposal-optional-chaining": "^7.14.5",
     "@babel/plugin-transform-arrow-functions": "7.0.0-beta.44",
     "@babel/plugin-transform-block-scoping": "7.0.0-beta.44",
     "@babel/plugin-transform-classes": "7.0.0-beta.44",

packages/victory-bar/src/victory-bar.js

@@ -1,3 +1,4 @@
+/* eslint-disable react/no-multi-comp */
 import PropTypes from "prop-types";
 import React from "react";
 import { getBaseProps } from "./helper-methods";
@@ -8,9 +9,10 @@ import {
   VictoryContainer,
   VictoryTheme,
   CommonProps,
-  addEvents,
+  useEvents,
   Data,
-  Domain
+  Domain,
+  VictoryTransition
 } from "victory-core";
 
 const fallbackProps = {
@@ -26,99 +28,130 @@ const defaultData = [
   { x: 4, y: 4 }
 ];
 
-class VictoryBar extends React.Component {
-  static animationWhitelist = [
-    "data",
-    "domain",
-    "height",
-    "padding",
-    "style",
-    "width"
-  ];
-
-  static displayName = "VictoryBar";
-
-  static role = "bar";
-
-  static defaultTransitions = {
-    onLoad: {
-      duration: 2000,
-      before: () => ({ _y: 0, _y1: 0, _y0: 0 }),
-      after: (datum) => ({ _y: datum._y, _y1: datum._y1, _y0: datum._y0 })
-    },
-    onExit: {
-      duration: 500,
-      before: () => ({ _y: 0, yOffset: 0 })
-    },
-    onEnter: {
-      duration: 500,
-      before: () => ({ _y: 0, _y1: 0, _y0: 0 }),
-      after: (datum) => ({ _y: datum._y, _y1: datum._y1, _y0: datum._y0 })
-    }
-  };
-
-  static propTypes = {
-    ...CommonProps.baseProps,
-    ...CommonProps.dataProps,
-    alignment: PropTypes.oneOf(["start", "middle", "end"]),
-    barRatio: PropTypes.number,
-    barWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-    cornerRadius: PropTypes.oneOfType([
-      PropTypes.number,
-      PropTypes.func,
-      PropTypes.shape({
-        top: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-        topLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-        topRight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-        bottom: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-        bottomLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
-        bottomRight: PropTypes.oneOfType([PropTypes.number, PropTypes.func])
-      })
-    ]),
-    getPath: PropTypes.func,
-    horizontal: PropTypes.bool
-  };
-
-  static defaultProps = {
-    containerComponent: <VictoryContainer />,
-    data: defaultData,
-    dataComponent: <Bar />,
-    groupComponent: <g role="presentation" />,
-    labelComponent: <VictoryLabel />,
-    samples: 50,
-    sortOrder: "ascending",
-    standalone: true,
-    theme: VictoryTheme.grayscale
-  };
-
-  static getDomain = Domain.getDomainWithZero;
-  static getData = Data.getData;
-  static getBaseProps = (props) => getBaseProps(props, fallbackProps);
-  static expectedComponents = [
-    "dataComponent",
-    "labelComponent",
-    "groupComponent",
-    "containerComponent"
-  ];
-
-  // Overridden in native versions
-  shouldAnimate() {
-    return !!this.props.animate;
+const VictoryBar = (props) => {
+  const modifiedProps = React.useMemo(
+    () => Helpers.modifyProps(props, fallbackProps, "bar"),
+    [props]
+  );
+
+  const { renderedData, renderContainer } = useEvents(modifiedProps, {
+    expectedComponents: VictoryBar.expectedComponents,
+    getBaseProps: VictoryBar.getBaseProps,
+    role: "bar",
+    animationWhitelist: VictoryBar.animationWhitelist
+  });
+
+  return props.standalone
+    ? renderContainer(props.containerComponent, renderedData)
+    : renderedData;
+};
+
+VictoryBar.animationWhitelist = [
+  "data",
+  "domain",
+  "height",
+  "padding",
+  "style",
+  "width"
+];
+
+VictoryBar.displayName = "VictoryBar";
+
+VictoryBar.role = "bar";
+
+VictoryBar.defaultTransitions = {
+  onLoad: {
+    duration: 2000,
+    before: () => ({ _y: 0, _y1: 0, _y0: 0 }),
+    after: (datum) => ({ _y: datum._y, _y1: datum._y1, _y0: datum._y0 })
+  },
+  onExit: {
+    duration: 500,
+    before: () => ({ _y: 0, yOffset: 0 })
+  },
+  onEnter: {
+    duration: 500,
+    before: () => ({ _y: 0, _y1: 0, _y0: 0 }),
+    after: (datum) => ({ _y: datum._y, _y1: datum._y1, _y0: datum._y0 })
+  },
+  onMove: {
+    duration: 500
   }
+};
 
-  render() {
-    const { animationWhitelist, role } = VictoryBar;
-    const props = Helpers.modifyProps(this.props, fallbackProps, role);
+VictoryBar.propTypes = {
+  ...CommonProps.baseProps,
+  ...CommonProps.dataProps,
+  alignment: PropTypes.oneOf(["start", "middle", "end"]),
+  barRatio: PropTypes.number,
+  barWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+  cornerRadius: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.func,
+    PropTypes.shape({
+      top: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+      topLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+      topRight: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+      bottom: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+      bottomLeft: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
+      bottomRight: PropTypes.oneOfType([PropTypes.number, PropTypes.func])
+    })
+  ]),
+  getPath: PropTypes.func,
+  horizontal: PropTypes.bool
+};
+
+VictoryBar.defaultProps = {
+  containerComponent: <VictoryContainer />,
+  data: defaultData,
+  dataComponent: <Bar />,
+  groupComponent: <g role="presentation" />,
+  labelComponent: <VictoryLabel />,
+  samples: 50,
+  sortOrder: "ascending",
+  standalone: true,
+  theme: VictoryTheme.grayscale
+};
+
+VictoryBar.getDomain = Domain.getDomainWithZero;
+VictoryBar.getData = Data.getData;
+VictoryBar.getBaseProps = (props) => getBaseProps(props, fallbackProps);
+VictoryBar.expectedComponents = [
+  "dataComponent",
+  "labelComponent",
+  "groupComponent",
+  "containerComponent"
+];
 
-    if (this.shouldAnimate()) {
-      return this.animateComponent(props, animationWhitelist);
-    }
+// This component is at the top level so VictoryBar has access to the animation props
+const Wrapper = (props) => {
+  // TODO: Figure out how to override this in victory-native
+  const shouldAnimate = React.useMemo(() => {
+    return !!props.animate;
+  }, [props]);
 
-    const children = this.renderData(props);
-    return props.standalone
-      ? this.renderContainer(props.containerComponent, children)
-      : children;
+  const animationWhitelist = React.useMemo(() => {
+    return props.animate && props.animate.animationWhitelist
+      ? props.animate.animationWhitelist
+      : VictoryBar.animationWhitelist;
+  }, [props]);
+
+  if (shouldAnimate) {
+    return (
+      <VictoryTransition
+        animate={props.animate}
+        animationWhitelist={animationWhitelist}
+      >
+        <VictoryBar {...props} />
+      </VictoryTransition>
+    );
   }
-}
 
-export default addEvents(VictoryBar);
+  return <VictoryBar {...props} />;
+};
+
+Wrapper.propTypes = VictoryBar.propTypes;
+Wrapper.role = VictoryBar.role;
+Wrapper.getBaseProps = VictoryBar.getBaseProps;
+
+export default Wrapper;

packages/victory-core/src/index.js

@@ -45,3 +45,4 @@ export * as Axis from "./victory-util/axis";
 export { default as TimerContext } from "./victory-util/timer-context";
 export { default as PortalContext } from "./victory-portal/portal-context";
 export * from "./victory-util/hooks";
+export { useEvents } from "./victory-util/use-events";