victory-create-container 37.0.2 → 37.1.0

package/src/create-container.tsx

@@ -0,0 +1,169 @@
+import {
+  VictoryZoomContainer,
+  useVictoryZoomContainer,
+} from "victory-zoom-container";
+import {
+  VictorySelectionContainer,
+  useVictorySelectionContainer,
+} from "victory-selection-container";
+import React from "react";
+import { VictoryContainer } from "victory-core";
+import { forOwn, groupBy, isEmpty, toPairs } from "lodash";
+import {
+  VictoryVoronoiContainer,
+  useVictoryVoronoiContainer,
+} from "victory-voronoi-container";
+import {
+  VictoryCursorContainer,
+  useVictoryCursorContainer,
+} from "victory-cursor-container";
+import {
+  VictoryBrushContainer,
+  useVictoryBrushContainer,
+} from "victory-brush-container";
+
+function ensureArray<T>(thing: T): [] | T | T[] {
+  if (!thing) {
+    return [];
+  } else if (!Array.isArray(thing)) {
+    return [thing];
+  }
+  return thing;
+}
+
+const combineEventHandlers = (eventHandlersArray: any[]) => {
+  // takes an array of event handler objects and produces one eventHandlers object
+  // creates a custom combinedHandler() for events with multiple conflicting handlers
+  return eventHandlersArray.reduce((localHandlers, finalHandlers) => {
+    forOwn(localHandlers, (localHandler, eventName) => {
+      const existingHandler = finalHandlers[eventName];
+      if (existingHandler) {
+        // create new handler for event that concats the existing handler's mutations with new ones
+        finalHandlers[eventName] = function combinedHandler(...params) {
+          // named for debug clarity
+          // sometimes handlers return undefined; use empty array instead, for concat()
+          const existingMutations = ensureArray(existingHandler(...params));
+          const localMutations = ensureArray(localHandler(...params));
+          return existingMutations.concat(localMutations);
+        };
+      } else {
+        finalHandlers[eventName] = localHandler;
+      }
+    });
+    return finalHandlers;
+  });
+};
+
+const combineDefaultEvents = (defaultEvents: any[]) => {
+  // takes a defaultEvents array and returns one equal or lesser length,
+  // by combining any events that have the same target
+  const eventsByTarget = groupBy(defaultEvents, "target");
+  const events = toPairs(eventsByTarget).map(([target, eventsArray]) => {
+    const newEventsArray = eventsArray.filter(Boolean);
+    return isEmpty(newEventsArray)
+      ? null
+      : {
+          target,
+          eventHandlers: combineEventHandlers(
+            eventsArray.map((event) => event.eventHandlers),
+          ),
+          // note: does not currently handle eventKey or childName
+        };
+  });
+  return events.filter(Boolean);
+};
+
+export type ContainerType =
+  | "zoom"
+  | "selection"
+  | "brush"
+  | "cursor"
+  | "voronoi";
+
+/**
+ * Container hooks are used to provide the container logic to the container components through props and a modified children object
+ * - These hooks contain shared logic for both web and Victory Native containers.
+ * - In this utility, we call multiple of these hooks with the props returned by the previous to combine the container logic.
+ */
+const CONTAINER_HOOKS = {
+  zoom: useVictoryZoomContainer,
+  selection: useVictorySelectionContainer,
+  brush: useVictoryBrushContainer,
+  cursor: useVictoryCursorContainer,
+  voronoi: useVictoryVoronoiContainer,
+};
+
+/**
+ * Container hooks are wrappers that return a VictoryContainer with the props provided by their respective hooks, and the modified children.
+ * - These containers are specific to the web. Victory Native has its own container components.
+ * - For this utility, we only need the container components to extract the defaultEvents.
+ */
+const CONTAINER_COMPONENTS_WEB = {
+  zoom: VictoryZoomContainer,
+  selection: VictorySelectionContainer,
+  brush: VictoryBrushContainer,
+  cursor: VictoryCursorContainer,
+  voronoi: VictoryVoronoiContainer,
+};
+
+type ContainerComponents = Record<
+  ContainerType,
+  React.ComponentType<any> & {
+    defaultEvents: (props: any) => any[];
+  }
+>;
+
+export function makeCreateContainerFunction<
+  TContainerComponents extends ContainerComponents,
+>(
+  containerComponents: TContainerComponents,
+  VictoryContainerBase: typeof VictoryContainer,
+) {
+  type ContainerProps<T extends ContainerType> = React.ComponentProps<
+    TContainerComponents[T]
+  >;
+
+  return function combineContainers<
+    TContainerA extends ContainerType,
+    TContainerB extends ContainerType,
+  >(containerA: TContainerA, containerB: TContainerB) {
+    const ContainerA = containerComponents[containerA];
+    const ContainerB = containerComponents[containerB];
+    const useContainerA = CONTAINER_HOOKS[containerA];
+    const useContainerB = CONTAINER_HOOKS[containerB];
+
+    const CombinedContainer = (
+      props: ContainerProps<TContainerA> & ContainerProps<TContainerB>,
+    ) => {
+      const { children: childrenA, props: propsA } = useContainerA(props);
+      const { children: combinedChildren, props: combinedProps } =
+        useContainerB({
+          ...propsA,
+          children: childrenA,
+        });
+
+      return (
+        <VictoryContainerBase {...combinedProps}>
+          {combinedChildren}
+        </VictoryContainerBase>
+      );
+    };
+
+    CombinedContainer.displayName = `Victory${containerA}${containerB}Container`;
+    CombinedContainer.role = "container";
+    CombinedContainer.defaultEvents = (
+      props: ContainerProps<TContainerA> & ContainerProps<TContainerB>,
+    ) =>
+      combineDefaultEvents([
+        ...ContainerA.defaultEvents(props),
+        ...ContainerB.defaultEvents(props),
+      ]);
+
+    return CombinedContainer;
+  };
+}
+
+export const createContainer = makeCreateContainerFunction(
+  CONTAINER_COMPONENTS_WEB,
+  VictoryContainer,
+);

package/src/create-container.ts

@@ -1,173 +0,0 @@
-import React from "react";
-import { toPairs, groupBy, forOwn, flow, isEmpty } from "lodash";
-import { Helpers, VictoryContainer, Log } from "victory-core";
-import { voronoiContainerMixin } from "victory-voronoi-container";
-import { zoomContainerMixin } from "victory-zoom-container";
-import { selectionContainerMixin } from "victory-selection-container";
-import { brushContainerMixin } from "victory-brush-container";
-import { cursorContainerMixin } from "victory-cursor-container";
-
-export type ContainerType =
-  | "brush"
-  | "cursor"
-  | "selection"
-  | "voronoi"
-  | "zoom";
-
-type MixinFunction = (...args: any[]) => any;
-
-function ensureArray<T>(thing: T): [] | T | T[] {
-  if (!thing) {
-    return [];
-  } else if (!Array.isArray(thing)) {
-    return [thing];
-  }
-  return thing;
-}
-
-const combineEventHandlers = (eventHandlersArray: any[]) => {
-  // takes an array of event handler objects and produces one eventHandlers object
-  // creates a custom combinedHandler() for events with multiple conflicting handlers
-  return eventHandlersArray.reduce((localHandlers, finalHandlers) => {
-    forOwn(localHandlers, (localHandler, eventName) => {
-      const existingHandler = finalHandlers[eventName];
-      if (existingHandler) {
-        // create new handler for event that concats the existing handler's mutations with new ones
-        finalHandlers[eventName] = function combinedHandler(...params) {
-          // named for debug clarity
-          // sometimes handlers return undefined; use empty array instead, for concat()
-          const existingMutations = ensureArray(existingHandler(...params));
-          const localMutations = ensureArray(localHandler(...params));
-          return existingMutations.concat(localMutations);
-        };
-      } else {
-        finalHandlers[eventName] = localHandler;
-      }
-    });
-    return finalHandlers;
-  });
-};
-
-const combineDefaultEvents = (defaultEvents: any[]) => {
-  // takes a defaultEvents array and returns one equal or lesser length,
-  // by combining any events that have the same target
-  const eventsByTarget = groupBy(defaultEvents, "target");
-  const events = toPairs(eventsByTarget).map(([target, eventsArray]) => {
-    const newEventsArray = eventsArray.filter(Boolean);
-    return isEmpty(newEventsArray)
-      ? null
-      : {
-          target,
-          eventHandlers: combineEventHandlers(
-            eventsArray.map((event) => event.eventHandlers),
-          ),
-          // note: does not currently handle eventKey or childName
-        };
-  });
-  return events.filter(Boolean);
-};
-
-export const combineContainerMixins = (
-  mixins: MixinFunction[],
-  Container: React.ComponentType<any>,
-) => {
-  // similar to Object.assign(A, B), this function will decide conflicts in favor mixinB.
-  // this applies to propTypes and defaultProps.
-  // getChildren will call A's getChildren() and pass the resulting children to B's.
-  // defaultEvents attempts to resolve any conflicts between A and B's defaultEvents.
-  const Classes = mixins.map((mixin) => mixin(Container));
-  const instances = Classes.map((Class) => new Class());
-  const NaiveCombinedContainer = flow(mixins)(Container);
-
-  const displayType = Classes.map((Class) => {
-    const match = Class.displayName.match(/Victory(.*)Container/);
-    return match[1] || "";
-  }).join("");
-
-  return class VictoryCombinedContainer extends NaiveCombinedContainer {
-    static displayName = `Victory${displayType}Container`;
-
-    static propTypes = Classes.reduce(
-      (propTypes, Class) => ({ ...propTypes, ...Class.propTypes }),
-      {},
-    );
-
-    static defaultProps = Classes.reduce(
-      (defaultProps, Class) => ({ ...defaultProps, ...Class.defaultProps }),
-      {},
-    );
-
-    static defaultEvents(props) {
-      return combineDefaultEvents(
-        Classes.reduce((defaultEvents, Class) => {
-          const events = Helpers.isFunction(Class.defaultEvents)
-            ? Class.defaultEvents(props)
-            : Class.defaultEvents;
-          return [...defaultEvents, ...events];
-        }, []),
-      );
-    }
-
-    getChildren(props) {
-      return instances.reduce(
-        (children, instance) => instance.getChildren({ ...props, children }),
-        props.children,
-      );
-    }
-  };
-};
-
-const checkBehaviorName = (
-  behavior: ContainerType,
-  behaviors: ContainerType[],
-) => {
-  if (behavior && !behaviors.includes(behavior)) {
-    Log.warn(
-      `"${behavior}" is not a valid behavior. Choose from [${behaviors.join(
-        ", ",
-      )}].`,
-    );
-  }
-};
-
-export const makeCreateContainerFunction =
-  (
-    mixinMap: Record<ContainerType, MixinFunction[]>,
-    Container: React.ComponentType<any>,
-  ) =>
-  (
-    behaviorA: ContainerType,
-    behaviorB: ContainerType,
-    ...invalid: ContainerType[]
-  ) => {
-    const behaviors = Object.keys(mixinMap) as ContainerType[];
-
-    checkBehaviorName(behaviorA, behaviors);
-    checkBehaviorName(behaviorB, behaviors);
-
-    if (invalid.length) {
-      Log.warn(
-        "too many arguments given to createContainer (maximum accepted: 2).",
-      );
-    }
-
-    const firstMixins = mixinMap[behaviorA];
-    const secondMixins = mixinMap[behaviorB] || [];
-
-    if (!firstMixins) {
-      return Container;
-    }
-
-    return combineContainerMixins([...firstMixins, ...secondMixins], Container);
-  };
-
-export const createContainer = makeCreateContainerFunction(
-  {
-    zoom: [zoomContainerMixin],
-    voronoi: [voronoiContainerMixin],
-    selection: [selectionContainerMixin],
-    cursor: [cursorContainerMixin],
-    brush: [brushContainerMixin],
-  },
-  VictoryContainer,
-);