victory-selection-container

Author: KenanYusuf

demo/ts/components/selection-demo.tsx

@@ -6,7 +6,8 @@ import { VictoryGroup } from "victory-group";
 import { VictoryBar } from "victory-bar";
 import { VictoryLine } from "victory-line";
 import { VictoryScatter } from "victory-scatter";
-import { VictorySelectionContainer } from "victory-selection-container";
+// import { VictorySelectionContainer } from "victory-selection-container";
+import { VictorySelectionContainerFn as VictorySelectionContainer } from "victory-selection-container";
 import { VictoryLegend } from "victory-legend";
 import { VictoryTooltip } from "victory-tooltip";
 

packages/victory-core/src/victory-container/victory-container-fn.tsx

@@ -2,7 +2,6 @@ import React, { useRef } from "react";
 import { uniqueId } from "lodash";
 import { Portal } from "../victory-portal/portal";
 import { PortalContext } from "../victory-portal/portal-context";
-import TimerContext from "../victory-util/timer-context";
 import * as UserProps from "../victory-util/user-props";
 import { OriginType } from "../victory-label/victory-label";
 import { D3Scale } from "../types/prop-types";
@@ -182,4 +181,3 @@ export const VictoryContainerFn = (initialProps: VictoryContainerProps) => {
 };
 
 VictoryContainerFn.role = "container";
-VictoryContainerFn.contextType = TimerContext;

packages/victory-selection-container/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./victory-selection-container";
+export { VictorySelectionContainerFn } from "./victory-selection-container-fn";
 export * from "./selection-helpers";

packages/victory-selection-container/src/victory-selection-container-fn.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import {
+  Datum,
+  Rect,
+  VictoryContainerFn,
+  VictoryContainerProps,
+} from "victory-core";
+import { SelectionHelpers } from "./selection-helpers";
+
+export interface VictorySelectionContainerProps extends VictoryContainerProps {
+  activateSelectedData?: boolean;
+  allowSelection?: boolean;
+  disable?: boolean;
+  onSelection?: (
+    points: {
+      childName?: string | string[];
+      eventKey?: string | number;
+      data?: Datum[];
+    }[],
+    bounds: {
+      x: number | Date;
+      y: number | Date;
+    }[],
+    props: VictorySelectionContainerProps,
+  ) => void;
+  horizontal?: boolean;
+  onSelectionCleared?: (props: VictorySelectionContainerProps) => void;
+  selectionBlacklist?: string[];
+  selectionComponent?: React.ReactElement;
+  selectionDimension?: "x" | "y";
+  selectionStyle?: React.CSSProperties;
+}
+
+const defaultProps = {
+  activateSelectedData: true,
+  allowSelection: true,
+  selectionComponent: <Rect />,
+  selectionStyle: {
+    stroke: "transparent",
+    fill: "black",
+    fillOpacity: 0.1,
+  },
+};
+
+export const VictorySelectionContainerFn = (
+  initialProps: VictorySelectionContainerProps,
+) => {
+  const propsWithDefaults = { ...defaultProps, ...initialProps };
+
+  const { x1, x2, y1, y2, selectionStyle, selectionComponent, children, name } =
+    propsWithDefaults;
+  const width = Math.abs(x2 - x1) || 1;
+  const height = Math.abs(y2 - y1) || 1;
+  const x = Math.min(x1, x2);
+  const y = Math.min(y1, y2);
+
+  const shouldRenderRect = y1 && y2 && x1 && x2;
+
+  return (
+    <VictoryContainerFn {...propsWithDefaults}>
+      {children}
+
+      {shouldRenderRect &&
+        React.cloneElement(selectionComponent, {
+          key: `${name}-selection`,
+          x,
+          y,
+          width,
+          height,
+          style: selectionStyle,
+        })}
+    </VictoryContainerFn>
+  );
+};
+
+VictorySelectionContainerFn.role = "container";
+
+VictorySelectionContainerFn.defaultEvents = (
+  props: VictorySelectionContainerProps,
+) => {
+  const createEventHandler =
+    (handler: (event: any, targetProps: any) => any) =>
+    (event: any, targetProps: any) =>
+      props.disable ? {} : handler(event, { ...defaultProps, ...targetProps });
+
+  return [
+    {
+      target: "parent",
+      eventHandlers: {
+        onMouseDown: createEventHandler(SelectionHelpers.onMouseDown),
+        onTouchStart: createEventHandler(SelectionHelpers.onMouseDown),
+        onMouseMove: createEventHandler(SelectionHelpers.onMouseMove),
+        onTouchMove: createEventHandler(SelectionHelpers.onMouseMove),
+        onMouseUp: createEventHandler(SelectionHelpers.onMouseUp),
+        onTouchEnd: createEventHandler(SelectionHelpers.onMouseUp),
+      },
+    },
+  ];
+};