victory-core 35.11.3 → 36.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "victory-core",
-  "version": "35.11.3",
+  "version": "36.2.0",
   "description": "Victory Core",
   "keywords": [
     "data visualization",
@@ -20,7 +20,7 @@
   "license": "MIT",
   "dependencies": {
     "d3-ease": "^1.0.0",
-    "d3-interpolate": "^3.0.1",
+    "d3-interpolate": "^1.1.1",
     "d3-scale": "^1.0.0",
     "d3-shape": "^1.2.0",
     "d3-timer": "^1.0.0",
@@ -28,6 +28,9 @@
     "prop-types": "^15.5.8",
     "react-fast-compare": "^2.0.0"
   },
+  "resolutions": {
+    "d3-interpolate/d3-color": "^3.0.0"
+  },
   "peerDependencies": {
     "react": "^16.6.0 || ^17.0.0"
   },
@@ -35,5 +38,5 @@
     "version": "yarn run nps build-libs && nps build-dists"
   },
   "sideEffects": false,
-  "gitHead": "a66afca796bc341b06f028531355044cef7c5157"
+  "gitHead": "00c362fcd3e8f3880e14d3ba42873c34dd69c577"
 }

package/src/index.js

@@ -40,7 +40,11 @@ export * as TextSize from "./victory-util/textsize";
 export { default as Timer } from "./victory-util/timer";
 export * as Transitions from "./victory-util/transitions";
 export * as CommonProps from "./victory-util/common-props";
-export { default as Wrapper } from "./victory-util/wrapper";
+export * as Wrapper from "./victory-util/wrapper";
 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 * as Hooks from "./victory-util/hooks";
+export * as LineHelpers from "./victory-util/line-helpers";
+// TODO: Fix this default export
+export { default as PointPathHelpers } from "./victory-util/point-path-helpers";

package/src/victory-label/victory-label.js

@@ -51,7 +51,7 @@ const getSingleValue = (prop, index = 0) => {
   return Array.isArray(prop) ? prop[index] || prop[0] : prop;
 };
 
-const useMultiLineBackgrounds = (props) => {
+const shouldUseMultilineBackgrounds = (props) => {
   const { backgroundStyle, backgroundPadding } = props;
   return (
     (Array.isArray(backgroundStyle) && !isEmpty(backgroundStyle)) ||
@@ -365,7 +365,7 @@ const getChildBackgrounds = (calculatedProps, tspanValues) => {
 };
 
 const getBackgroundElement = (calculatedProps, tspanValues) => {
-  return useMultiLineBackgrounds(calculatedProps)
+  return shouldUseMultilineBackgrounds(calculatedProps)
     ? getChildBackgrounds(calculatedProps, tspanValues)
     : getFullBackground(calculatedProps, tspanValues);
 };
@@ -387,7 +387,7 @@ const calculateSpanDy = (tspanValues, i, calculatedProps) => {
     currentCaps / 2 +
     previousCaps / 2;
 
-  return useMultiLineBackgrounds(calculatedProps)
+  return shouldUseMultilineBackgrounds(calculatedProps)
     ? textHeight +
         current.backgroundPadding.top +
         previous.backgroundPadding.bottom

package/src/victory-primitives/point.js

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import { assign } from "lodash";
 import * as Helpers from "../victory-util/helpers";
-import pathHelpers from "./path-helpers";
+import pathHelpers from "../victory-util/point-path-helpers";
 import * as CommonProps from "../victory-util/common-props";
 import Path from "./path";
 

package/src/victory-util/hooks/index.js

@@ -0,0 +1,2 @@
+export { usePreviousProps } from "./use-previous-props";
+export { useAnimationState } from "./use-animation-state";

package/src/victory-util/hooks/use-animation-state.js

@@ -0,0 +1,123 @@
+import React from "react";
+import { defaults, some } from "lodash";
+
+import * as Collection from "../collection";
+import * as Transitions from "../transitions";
+
+const INITIAL_STATE = {
+  nodesShouldLoad: false,
+  nodesDoneLoad: false,
+  animating: true
+};
+
+export const useAnimationState = (initialState = INITIAL_STATE) => {
+  const [state, _setState] = React.useState(initialState);
+
+  // This allows us to use a state object and maintain the same API as this.setState
+  const setState = React.useCallback(
+    (newState) => {
+      _setState((oldState) => ({ ...oldState, ...newState }));
+    },
+    [_setState]
+  );
+
+  // This is a copy of Wrapper.getAnimationProps
+  const getAnimationProps = React.useCallback(
+    (props, child, index) => {
+      if (!props.animate) {
+        return child.props.animate;
+      }
+      const getFilteredState = () => {
+        let childrenTransitions = state && state.childrenTransitions;
+        childrenTransitions = Collection.isArrayOfArrays(childrenTransitions)
+          ? childrenTransitions[index]
+          : childrenTransitions;
+        return defaults({ childrenTransitions }, state);
+      };
+
+      let getTransitions = props.animate && props.animate.getTransitions;
+      const filteredState = getFilteredState();
+      const parentState =
+        (props.animate && props.animate.parentState) || filteredState;
+      if (!getTransitions) {
+        const getTransitionProps = Transitions.getTransitionPropsFactory(
+          props,
+          filteredState,
+          (newState) => setState(newState)
+        );
+        getTransitions = (childComponent) =>
+          getTransitionProps(childComponent, index);
+      }
+      return defaults(
+        { getTransitions, parentState },
+        props.animate,
+        child.props.animate
+      );
+    },
+    [state, setState]
+  );
+
+  // This is a copy of Wrapper.setAnimationState
+  const setAnimationState = React.useCallback(
+    (props, nextProps) => {
+      if (!props.animate) {
+        return;
+      }
+      if (props.animate.parentState) {
+        const nodesWillExit = props.animate.parentState.nodesWillExit;
+        const oldProps = nodesWillExit ? props : null;
+        const newState = defaults(
+          { oldProps, nextProps },
+          props.animate.parentState
+        );
+        setState(newState);
+      } else {
+        const oldChildren = React.Children.toArray(props.children);
+        const nextChildren = React.Children.toArray(nextProps.children);
+        const isContinuous = (child) => {
+          const check = (c) => c.type && c.type.continuous;
+          return Array.isArray(child) ? some(child, check) : check(child);
+        };
+
+        const continuous =
+          !props.polar &&
+          some(oldChildren, (child) => {
+            return (
+              isContinuous(child) ||
+              (child.props.children && isContinuous(child.props.children))
+            );
+          });
+        const {
+          nodesWillExit,
+          nodesWillEnter,
+          childrenTransitions,
+          nodesShouldEnter
+        } = Transitions.getInitialTransitionState(oldChildren, nextChildren);
+
+        setState({
+          nodesWillExit,
+          nodesWillEnter,
+          nodesShouldEnter,
+          childrenTransitions: Collection.isArrayOfArrays(childrenTransitions)
+            ? childrenTransitions[0]
+            : childrenTransitions,
+          oldProps: nodesWillExit ? props : null,
+          nextProps,
+          continuous
+        });
+      }
+    },
+    [setState]
+  );
+
+  const getProps = React.useCallback(
+    (initialProps) => {
+      return state && state.nodesWillExit
+        ? state.oldProps || initialProps
+        : initialProps;
+    },
+    [state]
+  );
+
+  return { state, setState, getAnimationProps, setAnimationState, getProps };
+};

package/src/victory-util/hooks/use-previous-props.js

@@ -0,0 +1,9 @@
+import React from "react";
+
+export const usePreviousProps = (props) => {
+  const ref = React.useRef();
+  React.useEffect(() => {
+    ref.current = props;
+  });
+  return ref.current || {};
+};

package/src/victory-util/line-helpers.js

@@ -0,0 +1,54 @@
+import * as d3Shape from "d3-shape";
+
+const defined = (d) => {
+  const y = d._y1 !== undefined ? d._y1 : d._y;
+  return y !== null && y !== undefined && d._y0 !== null;
+};
+
+const getXAccessor = (scale) => {
+  return (d) => scale.x(d._x1 !== undefined ? d._x1 : d._x);
+};
+
+const getYAccessor = (scale) => {
+  return (d) => scale.y(d._y1 !== undefined ? d._y1 : d._y);
+};
+
+const getAngleAccessor = (scale) => {
+  return (d) => {
+    const x = scale.x(d._x1 !== undefined ? d._x1 : d._x);
+    return -1 * x + Math.PI / 2;
+  };
+};
+
+const toNewName = (interpolation) => {
+  // d3 shape changed the naming scheme for interpolators from "basis" -> "curveBasis" etc.
+  const capitalize = (s) => s && s[0].toUpperCase() + s.slice(1);
+  return `curve${capitalize(interpolation)}`;
+};
+
+export const getLineFunction = (props) => {
+  const { polar, scale, horizontal } = props;
+  const defaultOpenCurve = polar ? false : true;
+  const openCurve =
+    props.openCurve === undefined ? defaultOpenCurve : props.openCurve;
+  const interpolationFunction =
+    typeof props.interpolation === "function" && props.interpolation;
+  const interpolationName =
+    typeof props.interpolation === "string" &&
+    (!openCurve
+      ? `${toNewName(props.interpolation)}Closed`
+      : toNewName(props.interpolation));
+  return polar
+    ? d3Shape
+        .lineRadial()
+        .defined(defined)
+        .curve(interpolationFunction || d3Shape[interpolationName])
+        .angle(getAngleAccessor(scale))
+        .radius(getYAccessor(scale))
+    : d3Shape
+        .line()
+        .defined(defined)
+        .curve(interpolationFunction || d3Shape[interpolationName])
+        .x(horizontal ? getYAccessor(scale) : getXAccessor(scale))
+        .y(horizontal ? getXAccessor(scale) : getYAccessor(scale));
+};

package/src/victory-util/transitions.js

@@ -82,7 +82,6 @@ export function getInitialTransitionState(oldChildren, nextChildren) {
     if (!newChild || oldChild.type !== newChild.type) {
       return {};
     }
-
     const { entering, exiting } =
       getNodeTransitions(getChildData(oldChild), getChildData(newChild)) || {};