victory-core
Version:
151 lines (150 loc) • 4.72 kB
JavaScript
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); }
import React, { useRef } from "react";
import uniqueId from "lodash/uniqueId";
import { Portal } from "../victory-portal/portal";
import * as UserProps from "../victory-util/user-props";
import { mergeRefs } from "../victory-util";
import { PortalOutlet } from "../victory-portal/portal-outlet";
import { PortalProvider } from "../victory-portal/portal-context";
const defaultProps = {
className: "VictoryContainer",
portalComponent: /*#__PURE__*/React.createElement(Portal, null),
portalZIndex: 99,
responsive: true,
role: "img"
};
export function useVictoryContainer(initialProps) {
const props = {
...defaultProps,
...initialProps
};
const {
title,
desc,
width,
height,
responsive
} = props;
const localContainerRef = useRef(null);
// Generated ID stored in ref because it needs to persist across renders
const generatedId = useRef(uniqueId("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
};
}
export 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.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.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: mergeRefs([localContainerRef, containerRef])
}, /*#__PURE__*/React.createElement(PortalProvider, null, /*#__PURE__*/React.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.createElement("title", {
id: titleId
}, title) : null, desc ? /*#__PURE__*/React.createElement("desc", {
id: descId
}, desc) : null, children), /*#__PURE__*/React.createElement("div", {
style: {
...dimensions,
zIndex: portalZIndex,
position: "absolute",
top: 0,
left: 0
}
}, /*#__PURE__*/React.createElement(PortalOutlet, {
as: portalComponent,
width: width,
height: height,
viewBox: viewBox,
preserveAspectRatio: preserveAspectRatio,
style: {
...dimensions,
overflow: "visible"
}
}))));
};
VictoryContainer.role = "container";