victory-core 36.4.0 → 36.5.1

package/src/victory-util/{domain.js → domain.ts}

@@ -1,4 +1,3 @@
-/* eslint-disable func-style */
 /* eslint-disable no-use-before-define */
 import React from "react";
 import {
@@ -7,7 +6,7 @@ import {
   sortedUniq,
   isFunction,
   includes,
-  isDate
+  isDate,
 } from "lodash";
 import * as Data from "./data";
 import * as Scale from "./scale";
@@ -48,11 +47,12 @@ function getDomainPadding(props, axis) {
     : formatPadding(props.domainPadding);
 }
 
-function getFlatData(dataset, axis) {
-  return flatten(dataset).map((datum) => {
-    return datum[`_${axis}`] && datum[`_${axis}`][1] !== undefined
-      ? datum[`_${axis}`][1]
-      : datum[`_${axis}`];
+function getFlatData(dataset, axis: "x" | "y") {
+  const axisKey = `_${axis}`;
+  return flatten(dataset).map((datum: any) => {
+    return datum[axisKey] && datum[axisKey][1] !== undefined
+      ? datum[axisKey][1]
+      : datum[axisKey];
   });
 }
 
@@ -61,7 +61,7 @@ function getExtremeFromData(dataset, axis, type = "min") {
     type === "max" ? Math.max(...arr) : Math.min(...arr);
   const initialValue = type === "max" ? -Infinity : Infinity;
   let containsDate = false;
-  const result = flatten(dataset).reduce((memo, datum) => {
+  const result = flatten(dataset).reduce((memo: number, datum: any) => {
     const current0 =
       datum[`_${axis}0`] !== undefined ? datum[`_${axis}0`] : datum[`_${axis}`];
     const current1 =
@@ -95,23 +95,23 @@ function padDomain(domain, props, axis) {
 
   const paddedRangeExtent = Math.max(
     rangeExtent - padding.left - padding.right,
-    1
+    1,
   );
   const paddedDomainExtent =
     (Math.abs(max.valueOf() - min.valueOf()) / paddedRangeExtent) * rangeExtent;
 
   const simplePadding = {
     left: (paddedDomainExtent * padding.left) / rangeExtent,
-    right: (paddedDomainExtent * padding.right) / rangeExtent
+    right: (paddedDomainExtent * padding.right) / rangeExtent,
   };
 
   let paddedDomain = {
     min: min.valueOf() - simplePadding.left,
-    max: max.valueOf() + simplePadding.right
+    max: max.valueOf() + simplePadding.right,
   };
 
   const singleQuadrantDomainPadding = isPlainObject(
-    props.singleQuadrantDomainPadding
+    props.singleQuadrantDomainPadding,
   )
     ? props.singleQuadrantDomainPadding[axis]
     : props.singleQuadrantDomainPadding;
@@ -129,14 +129,16 @@ function padDomain(domain, props, axis) {
   if (addsQuadrants && singleQuadrantDomainPadding !== false) {
     // Naive initial padding calculation
     const initialPadding = {
+      // @ts-expect-error `max/min` might be dates
       left: (Math.abs(max - min) * padding.left) / rangeExtent,
-      right: (Math.abs(max - min) * padding.right) / rangeExtent
+      // @ts-expect-error `max/min` might be dates
+      right: (Math.abs(max - min) * padding.right) / rangeExtent,
     };
 
     // Adjust the domain by the initial padding
     const adjustedDomain = {
       min: adjust(min.valueOf() - initialPadding.left, "min"),
-      max: adjust(max.valueOf() + initialPadding.right, "max")
+      max: adjust(max.valueOf() + initialPadding.right, "max"),
     };
 
     // re-calculate padding, taking the adjusted domain into account
@@ -146,20 +148,20 @@ function padDomain(domain, props, axis) {
         rangeExtent,
       right:
         (Math.abs(adjustedDomain.max - adjustedDomain.min) * padding.right) /
-        rangeExtent
+        rangeExtent,
     };
 
     // Adjust the domain by the final padding
     paddedDomain = {
       min: adjust(min.valueOf() - finalPadding.left, "min"),
-      max: adjust(max.valueOf() + finalPadding.right, "max")
+      max: adjust(max.valueOf() + finalPadding.right, "max"),
     };
   }
 
   // default to minDomain / maxDomain if they exist
   const finalDomain = {
     min: minDomain !== undefined ? minDomain : paddedDomain.min,
-    max: maxDomain !== undefined ? maxDomain : paddedDomain.max
+    max: maxDomain !== undefined ? maxDomain : paddedDomain.max,
   };
 
   return min instanceof Date || max instanceof Date
@@ -178,8 +180,8 @@ function padDomain(domain, props, axis) {
  * @returns {Function} a function that takes props and axis and returns a formatted domain
  */
 export function createDomainFunction(
-  getDomainFromDataFunction,
-  formatDomainFunction
+  getDomainFromDataFunction?,
+  formatDomainFunction?,
 ) {
   getDomainFromDataFunction = isFunction(getDomainFromDataFunction)
     ? getDomainFromDataFunction
@@ -228,7 +230,7 @@ export function getDomain(props, axis) {
  * @param {Array} categories: an array of categories corresponding to a given axis
  * @returns {Array|undefined} returns a domain from categories or undefined
  */
-export function getDomainFromCategories(props, axis, categories) {
+export function getDomainFromCategories(props, axis, categories?) {
   categories = categories || Data.getCategories(props, axis);
   const { polar, startAngle = 0, endAngle = 360 } = props;
   if (!categories) {
@@ -355,7 +357,7 @@ export function getDomainWithZero(props, axis) {
   const dataset = Data.getData(props);
   const y0Min = dataset.reduce(
     (min, datum) => (datum._y0 < min ? datum._y0 : min),
-    Infinity
+    Infinity,
   );
 
   const ensureZero = (domain) => {
@@ -388,7 +390,7 @@ export function getDomainWithZero(props, axis) {
 
   return createDomainFunction(getDomainFunction, formatDomainFunction)(
     props,
-    axis
+    axis,
   );
 }
 
@@ -429,7 +431,7 @@ export function getMinFromProps(props, axis) {
  * for a given dimension i.e. only x values.
  * @returns {Array} the symmetric domain
  */
-export function getSymmetricDomain(domain, values) {
+export function getSymmetricDomain(domain, values: number[]) {
   const processedData = sortedUniq(values.sort((a, b) => a - b));
   const step = processedData[1] - processedData[0];
   return [domain[0], domain[1] + step];
@@ -462,7 +464,7 @@ export function isDomainComponent(component) {
     "pie",
     "scatter",
     "stack",
-    "voronoi"
+    "voronoi",
   ];
   return includes(whitelist, role);
 }

package/src/victory-util/{events.js → events.ts}

@@ -1,4 +1,4 @@
-/* eslint-disable func-style,no-use-before-define */
+/* eslint-disable no-use-before-define */
 import {
   assign,
   isEmpty,
@@ -8,21 +8,52 @@ import {
   omitBy,
   uniq,
   includes,
-  keys
+  keys,
 } from "lodash";
+import type { EventMixinCalculatedValues } from "./add-events";
 
 const GLOBAL_EVENT_REGEX = /^onGlobal(.*)$/;
 
+type ComponentEventKey = string | number;
+export interface ComponentEvent {
+  target?: "parent" | string;
+  eventKey?: ComponentEventKey | ComponentEventKey[];
+  eventHandlers: ComponentEventHandlers;
+}
+export type ComponentEventName = `on${Capitalize<string>}`;
+export interface ComponentEventHandlers {
+  [k: ComponentEventName]: ComponentEventHandler;
+}
+export type ComponentEventHandler = (
+  evt: React.SyntheticEvent,
+  childProps: unknown,
+  eventKey: ComponentEventKey,
+  eventName: ComponentEventName,
+) => UpdatedProps;
+export type UpdatedProps = any;
+
+interface ComponentWithEvents extends EventMixinCalculatedValues {
+  state;
+  setState;
+}
+
 /* Returns all own and shared events that should be attached to a single target element,
  * i.e. an individual bar specified by target: "data", eventKey: [index].
  * Returned events are scoped to the appropriate state. Either that of the component itself
  * (i.e. VictoryBar) in the case of own events, or that of the parent component
  * (i.e. VictoryChart) in the case of shared events
  */
-// eslint-disable-next-line max-params,no-shadow
-export function getEvents(props, target, eventKey, getScopedEvents) {
+// eslint-disable-next-line max-params
+export function getEvents(
+  this: ComponentWithEvents,
+  props,
+  target,
+  eventKey,
+  // eslint-disable-next-line no-shadow
+  getScopedEvents,
+) {
   // Returns all events that apply to a particular target element
-  const getEventsByTarget = (events) => {
+  const getEventsByTarget = (events: Array<ComponentEvent>) => {
     const getSelectedEvents = () => {
       const targetEvents = events.reduce((memo, event) => {
         if (event.target !== undefined) {
@@ -32,7 +63,7 @@ export function getEvents(props, target, eventKey, getScopedEvents) {
           return matchesTarget ? memo.concat(event) : memo;
         }
         return memo.concat(event);
-      }, []);
+      }, [] as ComponentEvent[]);
 
       if (eventKey !== undefined && target !== "parent") {
         return targetEvents.filter((obj) => {
@@ -51,7 +82,7 @@ export function getEvents(props, target, eventKey, getScopedEvents) {
       Array.isArray(selectedEvents) &&
       selectedEvents.reduce((memo, event) => {
         return event ? assign(memo, event.eventHandlers) : memo;
-      }, {})
+      }, {} as ComponentEvent["eventHandlers"])
     );
   };
 
@@ -92,7 +123,13 @@ export function getEvents(props, target, eventKey, getScopedEvents) {
  * element.
  */
 // eslint-disable-next-line max-params
-export function getScopedEvents(events, namespace, childType, baseProps) {
+export function getScopedEvents(
+  this: ComponentWithEvents,
+  events,
+  namespace,
+  childType,
+  baseProps,
+) {
   if (isEmpty(events)) {
     return {};
   }
@@ -149,15 +186,15 @@ export function getScopedEvents(events, namespace, childType, baseProps) {
       }
       const mutationTargetProps = getTargetProps(
         { childName, key, target },
-        "props"
+        "props",
       );
       const mutationTargetState = getTargetProps(
         { childName, key, target },
-        "state"
+        "state",
       );
       const mutatedProps = eventReturn.mutation(
         assign({}, mutationTargetProps, mutationTargetState),
-        baseProps
+        baseProps,
       );
       const childState = baseState[childName] || {};
 
@@ -175,7 +212,7 @@ export function getScopedEvents(events, namespace, childType, baseProps) {
         return target === "parent"
           ? assign(state, { [key]: assign(state[key], mutatedProps) })
           : assign(state, {
-              [key]: assign(state[key], { [target]: mutatedProps })
+              [key]: assign(state[key], { [target]: mutatedProps }),
             });
       };
 
@@ -249,24 +286,38 @@ export function getScopedEvents(events, namespace, childType, baseProps) {
   }, {});
 }
 
-/* Returns a partially applied event handler for a specific target element
+/*
+ * Returns a partially applied event handler for a specific target element
  * This allows event handlers to have access to props controlling each element
  */
-export function getPartialEvents(events, eventKey, childProps) {
-  return events
-    ? keys(events).reduce((memo, eventName) => {
-        const appliedEvent = (evt) =>
-          events[eventName](evt, childProps, eventKey, eventName);
-        memo[eventName] = appliedEvent;
-        return memo;
-      }, {})
-    : {};
+export function getPartialEvents(
+  events: ComponentEventHandlers,
+  eventKey: ComponentEventKey,
+  childProps: unknown,
+): PartialEvents {
+  if (!events) return {};
+
+  return keys(events).reduce((memo, eventName) => {
+    const appliedEvent = (evt) =>
+      events[eventName](evt, childProps, eventKey, eventName);
+    memo[eventName] = appliedEvent;
+    return memo;
+  }, {} as PartialEvents);
+}
+export interface PartialEvents {
+  [eventName: ComponentEventName]: (evt: React.SyntheticEvent) => UpdatedProps;
 }
 
 /* Returns the property of the state object corresponding to event changes for
  * a particular element
  */
-export function getEventState(eventKey, namespace, childType) {
+// eslint-disable-next-line max-params
+export function getEventState(
+  this: ComponentWithEvents,
+  eventKey: ComponentEventKey,
+  namespace: string,
+  childType?: string,
+) {
   // Mandatory usage: `getEventState.bind(this)`
   // eslint-disable-next-line no-invalid-this
   const state = this.state || {};
@@ -297,7 +348,7 @@ export function getExternalMutationsWithChildren(
   mutations,
   baseProps,
   baseState,
-  childNames
+  childNames,
 ) {
   baseProps = baseProps || {};
   baseState = baseState || {};
@@ -308,7 +359,7 @@ export function getExternalMutationsWithChildren(
       mutations,
       baseProps[childName],
       baseState[childName],
-      childName
+      childName,
     );
     memo[childName] = mutation ? mutation : childState;
     return pickBy(memo, (v) => !isEmpty(v));
@@ -330,7 +381,7 @@ export function getExternalMutations(
   mutations,
   baseProps,
   baseState,
-  childName
+  childName?,
 ) {
   baseProps = baseProps || {};
   baseState = baseState || {};
@@ -345,7 +396,7 @@ export function getExternalMutations(
         mutations,
         keyProps,
         keyState,
-        identifier
+        identifier,
       );
       memo[eventKey] =
         mutation !== undefined ? assign({}, keyState, mutation) : keyState;
@@ -359,7 +410,7 @@ export function getExternalMutations(
           mutations,
           keyProps[target],
           keyState[target],
-          identifier
+          identifier,
         );
         m[target] =
           mutation !== undefined
@@ -387,7 +438,7 @@ export function getExternalMutation(
   mutations,
   baseProps,
   baseState,
-  identifier
+  identifier,
 ) {
   const filterMutations = (mutation, type) => {
     if (typeof mutation[type] === "string") {
@@ -408,13 +459,13 @@ export function getExternalMutation(
   }
   // find any mutation objects that match the target
   const targetMutations = scopedMutations.filter((m) =>
-    filterMutations(m, "target")
+    filterMutations(m, "target"),
   );
   if (isEmpty(targetMutations)) {
     return undefined;
   }
   const keyMutations = targetMutations.filter((m) =>
-    filterMutations(m, "eventKey")
+    filterMutations(m, "eventKey"),
   );
   if (isEmpty(keyMutations)) {
     return undefined;
@@ -444,7 +495,7 @@ export function getComponentEvents(props, components) {
         ? memo.concat(...componentEvents)
         : memo;
       return memo;
-    }, []);
+    }, [] as ComponentEvent[]);
   return events && events.length ? events : undefined;
 }
 

package/src/victory-util/{helpers.js → helpers.ts}

@@ -1,4 +1,3 @@
-/* eslint-disable func-style */
 /* eslint-disable no-use-before-define */
 import React from "react";
 import { defaults, isFunction, property, pick, assign, keys } from "lodash";
@@ -28,15 +27,19 @@ function getPolarRange(props, axis) {
 
 /**
  * creates an object with some keys excluded
- * replacement for lodash.omit for performance. does not mimick the entire lodash.omit api
+ * replacement for lodash.omit for performance. does not mimic the entire lodash.omit api
  * @param {Object} originalObject: created object will be based on this object
  * @param {Array<String>} ks: an array of keys to omit from the new object
  * @returns {Object} new object with same properties as originalObject
  */
-export function omit(originalObject, ks = []) {
+export function omit<T, Keys extends keyof T>(
+  originalObject: T,
+  ks: Array<Keys> = [],
+): Omit<T, Keys> {
   // code based on babel's _objectWithoutProperties
-  const newObject = {};
+  const newObject = {} as T;
   for (const key in originalObject) {
+    // @ts-expect-error String is not assignable to Key
     if (ks.indexOf(key) >= 0) {
       continue;
     }
@@ -57,7 +60,7 @@ export function getPoint(datum) {
     x: exists(_voronoiX) ? _voronoiX : defaultX,
     x0: exists(_x0) ? _x0 : _x,
     y: exists(_voronoiY) ? _voronoiY : defaultY,
-    y0: exists(_y0) ? _y0 : _y
+    y0: exists(_y0) ? _y0 : _y,
   };
   return defaults({}, point, datum);
 }
@@ -74,7 +77,7 @@ export function scalePoint(props, datum) {
     x: polar ? y * Math.cos(x) + origin.x : x,
     x0: polar ? y0 * Math.cos(x0) + origin.x : x0,
     y: polar ? -y * Math.sin(x) + origin.y : y,
-    y0: polar ? -y0 * Math.sin(x0) + origin.x : y0
+    y0: polar ? -y0 * Math.sin(x0) + origin.x : y0,
   };
 }
 
@@ -86,7 +89,7 @@ export function getPadding(props, name = "padding") {
     top: paddingObj.top || paddingVal,
     bottom: paddingObj.bottom || paddingVal,
     left: paddingObj.left || paddingVal,
-    right: paddingObj.right || paddingVal
+    right: paddingObj.right || paddingVal,
   };
 }
 
@@ -119,7 +122,7 @@ export function getStyles(style, defaultStyles) {
   return {
     parent: defaults({}, parent, defaultParent, { width, height }),
     labels: defaults({}, labels, defaultLabels),
-    data: defaults({}, data, defaultData)
+    data: defaults({}, data, defaultData),
   };
 }
 
@@ -162,7 +165,7 @@ export function getPolarOrigin(props) {
   const offsetHeight = height / 2 + top - bottom;
   return {
     x: offsetWidth + radius > width ? radius + left - right : offsetWidth,
-    y: offsetHeight + radius > height ? radius + top - bottom : offsetHeight
+    y: offsetHeight + radius > height ? radius + top - bottom : offsetHeight,
   };
 }
 
@@ -190,7 +193,7 @@ export function createAccessor(key) {
   return property(key);
 }
 
-export function modifyProps(props, fallbackProps, role) {
+export function modifyProps(props, fallbackProps?, role?) {
   const theme = props.theme && props.theme[role] ? props.theme[role] : {};
   const themeProps = omit(theme, ["style"]);
   const horizontal = isHorizontal(props);
@@ -219,13 +222,24 @@ export function getCurrentAxis(axis, horizontal) {
  * @returns {Array} returns an array of results from calling the iteratee on all nested children
  */
 /* eslint-disable max-params */
-export function reduceChildren(
-  children,
-  iteratee,
+export function reduceChildren<
+  TChildren extends React.ReactNode,
+  TItem,
+  TResult = TItem[],
+>(
+  children: TChildren[],
+  iteratee: (
+    child: TChildren,
+    childName: string,
+    parent?: TChildren,
+  ) => TItem | null,
   parentProps = {},
-  initialMemo = [],
-  combine = (memo, item) => memo.concat(item)
-) {
+  // @ts-expect-error These defaults are hard to type
+  initialMemo: TResult = [],
+  combine: (memo: TResult, item: TItem) => TResult = (memo, item) =>
+    // @ts-expect-error These defaults are hard to type
+    memo.concat(item),
+): TResult {
   const sharedProps = [
     "data",
     "domain",
@@ -235,9 +249,9 @@ export function reduceChildren(
     "endAngle",
     "minDomain",
     "maxDomain",
-    "horizontal"
+    "horizontal",
   ];
-  const traverseChildren = (childArray, names, parent) => {
+  const traverseChildren = (childArray, names, parent?) => {
     return childArray.reduce((memo, child, index) => {
       const childRole = child.type && child.type.role;
       const childName = child.props.name || `${childRole}-${names[index]}`;
@@ -245,7 +259,7 @@ export function reduceChildren(
         const childProps = assign(
           {},
           child.props,
-          pick(parentProps, sharedProps)
+          pick(parentProps, sharedProps),
         );
 
         const nestedChildren =
@@ -253,11 +267,15 @@ export function reduceChildren(
           child.type.role === "stack" &&
           isFunction(child.type.getChildren)
             ? child.type.getChildren(childProps)
-            : React.Children.toArray(child.props.children).map((c) => {
+            : (
+                React.Children.toArray(
+                  child.props.children,
+                ) as Array<React.ReactElement>
+              ).map((c) => {
                 const nestedChildProps = assign(
                   {},
                   c.props,
-                  pick(childProps, sharedProps)
+                  pick(childProps, sharedProps),
                 );
                 return React.cloneElement(c, nestedChildProps);
               });
@@ -266,7 +284,7 @@ export function reduceChildren(
         const nestedResults = traverseChildren(
           nestedChildren,
           childNames,
-          child
+          child,
         );
         memo = combine(memo, nestedResults);
       } else {
@@ -285,7 +303,7 @@ export function reduceChildren(
 /**
  * @param {Object} props: the props object
  * @returns {Boolean} returns true if the props object contains `horizontal: true` of if any
- * children or nested children are hoizontal
+ * children or nested children are horizontal
  */
 export function isHorizontal(props) {
   if (props.horizontal !== undefined || !props.children) {

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

@@ -7,7 +7,7 @@ import * as Transitions from "../transitions";
 const INITIAL_STATE = {
   nodesShouldLoad: false,
   nodesDoneLoad: false,
-  animating: true
+  animating: true,
 };
 
 export const useAnimationState = (initialState = INITIAL_STATE) => {
@@ -18,7 +18,7 @@ export const useAnimationState = (initialState = INITIAL_STATE) => {
     (newState) => {
       _setState((oldState) => ({ ...oldState, ...newState }));
     },
-    [_setState]
+    [_setState],
   );
 
   // This is a copy of Wrapper.getAnimationProps
@@ -43,7 +43,7 @@ export const useAnimationState = (initialState = INITIAL_STATE) => {
         const getTransitionProps = Transitions.getTransitionPropsFactory(
           props,
           filteredState,
-          (newState) => setState(newState)
+          (newState) => setState(newState),
         );
         getTransitions = (childComponent) =>
           getTransitionProps(childComponent, index);
@@ -51,10 +51,10 @@ export const useAnimationState = (initialState = INITIAL_STATE) => {
       return defaults(
         { getTransitions, parentState },
         props.animate,
-        child.props.animate
+        child.props.animate,
       );
     },
-    [state, setState]
+    [state, setState],
   );
 
   // This is a copy of Wrapper.setAnimationState
@@ -68,7 +68,7 @@ export const useAnimationState = (initialState = INITIAL_STATE) => {
         const oldProps = nodesWillExit ? props : null;
         const newState = defaults(
           { oldProps, nextProps },
-          props.animate.parentState
+          props.animate.parentState,
         );
         setState(newState);
       } else {
@@ -91,7 +91,7 @@ export const useAnimationState = (initialState = INITIAL_STATE) => {
           nodesWillExit,
           nodesWillEnter,
           childrenTransitions,
-          nodesShouldEnter
+          nodesShouldEnter,
         } = Transitions.getInitialTransitionState(oldChildren, nextChildren);
 
         setState({
@@ -103,11 +103,11 @@ export const useAnimationState = (initialState = INITIAL_STATE) => {
             : childrenTransitions,
           oldProps: nodesWillExit ? props : null,
           nextProps,
-          continuous
+          continuous,
         });
       }
     },
-    [setState]
+    [setState],
   );
 
   const getProps = React.useCallback(
@@ -116,7 +116,7 @@ export const useAnimationState = (initialState = INITIAL_STATE) => {
         ? state.oldProps || initialProps
         : initialProps;
     },
-    [state]
+    [state],
   );
 
   return { state, setState, getAnimationProps, setAnimationState, getProps };

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

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