victory-selection-container/lib/victory-selection-container.js

Interactive Selection Component for Victory

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useVictorySelectionContainer = exports.VictorySelectionContainer = exports.VICTORY_SELECTION_CONTAINER_DEFAULT_PROPS = void 0;
var _react = _interopRequireDefault(require("react"));
var _victoryCore = require("victory-core");
var _selectionHelpers = require("./selection-helpers");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
const VICTORY_SELECTION_CONTAINER_DEFAULT_PROPS = exports.VICTORY_SELECTION_CONTAINER_DEFAULT_PROPS = {
  activateSelectedData: true,
  allowSelection: true,
  selectionComponent: /*#__PURE__*/_react.default.createElement(_victoryCore.Rect, null),
  selectionStyle: {
    stroke: "transparent",
    fill: "black",
    fillOpacity: 0.1
  }
};
const useVictorySelectionContainer = initialProps => {
  const props = {
    ...VICTORY_SELECTION_CONTAINER_DEFAULT_PROPS,
    ...initialProps
  };
  const {
    x1,
    x2,
    y1,
    y2,
    selectionStyle,
    selectionComponent,
    children,
    name
  } = props;
  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 {
    props,
    children: [children, shouldRenderRect && /*#__PURE__*/_react.default.cloneElement(selectionComponent, {
      key: `${name}-selection`,
      x,
      y,
      width,
      height,
      style: selectionStyle
    })]
  };
};
exports.useVictorySelectionContainer = useVictorySelectionContainer;
const VictorySelectionContainer = initialProps => {
  const {
    props,
    children
  } = useVictorySelectionContainer(initialProps);
  return /*#__PURE__*/_react.default.createElement(_victoryCore.VictoryContainer, props, children);
};
exports.VictorySelectionContainer = VictorySelectionContainer;
VictorySelectionContainer.role = "container";
VictorySelectionContainer.defaultEvents = initialProps => {
  const props = {
    ...VICTORY_SELECTION_CONTAINER_DEFAULT_PROPS,
    ...initialProps
  };
  const createEventHandler = (handler, disabled) =>
  // eslint-disable-next-line max-params
  (event, targetProps, eventKey, context) => disabled || props.disable ? {} : handler(event, {
    ...props,
    ...targetProps
  }, eventKey, context);
  return [{
    target: "parent",
    eventHandlers: {
      onMouseDown: createEventHandler(_selectionHelpers.SelectionHelpers.onMouseDown),
      onTouchStart: createEventHandler(_selectionHelpers.SelectionHelpers.onMouseDown),
      onMouseMove: createEventHandler(_selectionHelpers.SelectionHelpers.onMouseMove),
      onTouchMove: createEventHandler(_selectionHelpers.SelectionHelpers.onMouseMove),
      onMouseUp: createEventHandler(_selectionHelpers.SelectionHelpers.onMouseUp),
      onTouchEnd: createEventHandler(_selectionHelpers.SelectionHelpers.onMouseUp)
    }
  }];
};