victory-core/lib/victory-container/victory-container.js

Victory Core

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.VictoryContainer = void 0;
exports.useVictoryContainer = useVictoryContainer;
var _react = _interopRequireWildcard(require("react"));
var _uniqueId = _interopRequireDefault(require("lodash/uniqueId"));
var _portal = require("../victory-portal/portal");
var UserProps = _interopRequireWildcard(require("../victory-util/user-props"));
var _victoryUtil = require("../victory-util");
var _portalOutlet = require("../victory-portal/portal-outlet");
var _portalContext = require("../victory-portal/portal-context");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
const defaultProps = {
  className: "VictoryContainer",
  portalComponent: /*#__PURE__*/_react.default.createElement(_portal.Portal, null),
  portalZIndex: 99,
  responsive: true,
  role: "img"
};
function useVictoryContainer(initialProps) {
  const props = {
    ...defaultProps,
    ...initialProps
  };
  const {
    title,
    desc,
    width,
    height,
    responsive
  } = props;
  const localContainerRef = (0, _react.useRef)(null);

  // Generated ID stored in ref because it needs to persist across renders
  const generatedId = (0, _react.useRef)((0, _uniqueId.default)("victory-container-"));
  const containerId = props.containerId ?? generatedId.current;
  const getIdForElement = elName => `${containerId}-${elName}`;
  const userProps = UserProps.getSafeUserProps(props);
  const dimensions = responsive ? {
    width: "100%",
    height: "100%"
  } : {
    width,
    height
  };
  const viewBox = responsive ? `0 0 ${width} ${height}` : undefined;
  const preserveAspectRatio = responsive ? props.preserveAspectRatio : undefined;
  const ariaLabelledBy = [title && getIdForElement("title"), props["aria-labelledby"]].filter(Boolean).join(" ") || undefined;
  const ariaDescribedBy = [desc && getIdForElement("desc"), props["aria-describedby"]].filter(Boolean).join(" ") || undefined;
  const titleId = getIdForElement("title");
  const descId = getIdForElement("desc");
  return {
    ...props,
    titleId,
    descId,
    dimensions,
    viewBox,
    preserveAspectRatio,
    ariaLabelledBy,
    ariaDescribedBy,
    userProps,
    localContainerRef
  };
}
const VictoryContainer = initialProps => {
  const {
    role,
    title,
    desc,
    children,
    className,
    portalZIndex,
    portalComponent,
    width,
    height,
    style,
    tabIndex,
    responsive,
    events,
    ouiaId,
    ouiaSafe,
    ouiaType,
    dimensions,
    ariaDescribedBy,
    ariaLabelledBy,
    viewBox,
    preserveAspectRatio,
    userProps,
    titleId,
    descId,
    containerRef,
    localContainerRef
  } = useVictoryContainer(initialProps);
  _react.default.useEffect(() => {
    if (!events?.onWheel) return;
    const handleWheel = e => e.preventDefault();
    const container = localContainerRef?.current;
    container?.addEventListener("wheel", handleWheel);
    return () => {
      container?.removeEventListener("wheel", handleWheel);
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  return /*#__PURE__*/_react.default.createElement("div", {
    className: className,
    style: {
      ...style,
      width: responsive ? style?.width : dimensions.width,
      height: responsive ? style?.height : dimensions.height,
      pointerEvents: style?.pointerEvents ?? "none",
      touchAction: style?.touchAction ?? "none",
      position: style?.position ?? "relative"
    },
    "data-ouia-component-id": ouiaId,
    "data-ouia-component-type": ouiaType,
    "data-ouia-safe": ouiaSafe,
    ref: (0, _victoryUtil.mergeRefs)([localContainerRef, containerRef])
  }, /*#__PURE__*/_react.default.createElement(_portalContext.PortalProvider, null, /*#__PURE__*/_react.default.createElement("svg", _extends({
    width: width,
    height: height,
    tabIndex: tabIndex,
    role: role,
    "aria-labelledby": ariaLabelledBy,
    "aria-describedby": ariaDescribedBy,
    viewBox: viewBox,
    preserveAspectRatio: preserveAspectRatio,
    style: {
      ...dimensions,
      pointerEvents: "all"
    }
  }, userProps, events), title ? /*#__PURE__*/_react.default.createElement("title", {
    id: titleId
  }, title) : null, desc ? /*#__PURE__*/_react.default.createElement("desc", {
    id: descId
  }, desc) : null, children), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      ...dimensions,
      zIndex: portalZIndex,
      position: "absolute",
      top: 0,
      left: 0
    }
  }, /*#__PURE__*/_react.default.createElement(_portalOutlet.PortalOutlet, {
    as: portalComponent,
    width: width,
    height: height,
    viewBox: viewBox,
    preserveAspectRatio: preserveAspectRatio,
    style: {
      ...dimensions,
      overflow: "visible"
    }
  }))));
};
exports.VictoryContainer = VictoryContainer;
VictoryContainer.role = "container";