@remotion/studio
Version:
APIs for interacting with the Remotion Studio
119 lines (118 loc) • 5.18 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.InfoBubble = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const player_1 = require("@remotion/player");
const react_1 = require("react");
const react_dom_1 = __importDefault(require("react-dom"));
const colors_1 = require("../../helpers/colors");
const z_index_1 = require("../../state/z-index");
const portals_1 = require("../Menu/portals");
const styles_1 = require("../Menu/styles");
const InfoTooltip_1 = require("./InfoTooltip");
const icon = {
color: colors_1.LIGHT_TEXT,
height: 15,
};
const container = {
display: 'inline-block',
border: 'none',
fontSize: 14,
verticalAlign: 'text-bottom',
};
const InfoBubble = ({ title, children }) => {
const [hovered, setIsHovered] = (0, react_1.useState)(false);
const [opened, setOpened] = (0, react_1.useState)(false);
const ref = (0, react_1.useRef)(null);
const { tabIndex, currentZIndex } = (0, z_index_1.useZIndex)();
const size = player_1.PlayerInternals.useElementSize(ref, {
triggerOnWindowResize: true,
shouldApplyCssTransforms: true,
});
const refresh = size === null || size === void 0 ? void 0 : size.refresh;
const onHide = (0, react_1.useCallback)(() => {
setOpened(false);
}, []);
(0, react_1.useEffect)(() => {
const { current } = ref;
if (!current) {
return;
}
const onMouseEnter = () => setIsHovered(true);
const onMouseLeave = () => setIsHovered(false);
const onPointerUp = () => {
return setOpened((o) => {
if (!o) {
refresh === null || refresh === void 0 ? void 0 : refresh();
}
return !o;
});
};
const onClick = (e) => {
e.stopPropagation();
const isKeyboardInitiated = e.detail === 0;
if (!isKeyboardInitiated) {
return;
}
return setOpened((o) => {
return !o;
});
};
current.addEventListener('mouseenter', onMouseEnter);
current.addEventListener('mouseleave', onMouseLeave);
current.addEventListener('pointerup', onPointerUp);
current.addEventListener('click', onClick);
return () => {
current.removeEventListener('mouseenter', onMouseEnter);
current.removeEventListener('mouseleave', onMouseLeave);
current.removeEventListener('pointerup', onPointerUp);
current.removeEventListener('click', onClick);
};
}, [refresh]);
const layout = (0, react_1.useMemo)(() => {
if (!size) {
return 'down';
}
const spaceToBottom = size.windowSize.height - (size.top + size.height);
const spaceToTop = size.top;
const l = spaceToTop > spaceToBottom ? 'down' : 'up';
return l;
}, [size]);
const portalStyle = (0, react_1.useMemo)(() => {
if (!size || !opened) {
return null;
}
return {
...(layout === 'up'
? {
position: 'fixed',
top: size.top + size.height,
}
: {
position: 'fixed',
bottom: size.windowSize.height - size.top,
}),
left: size.left,
};
}, [layout, opened, size]);
const style = (0, react_1.useMemo)(() => {
return {
...container,
userSelect: 'none',
WebkitUserSelect: 'none',
color: 'white',
display: 'inline-flex',
flexDirection: 'row',
alignItems: 'center',
padding: 6,
};
}, []);
return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
jsx_runtime_1.jsx("button", { ref: ref, tabIndex: tabIndex, style: style, title: title, type: "button", children: jsx_runtime_1.jsx("svg", { style: icon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: hovered ? 'white' : colors_1.LIGHT_TEXT, d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24h80c13.3 0 24-10.7 24-24s-10.7-24-24-24h-8V248c0-13.3-10.7-24-24-24H216c-13.3 0-24 10.7-24 24s10.7 24 24 24h24v64H216zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" }) }) }), portalStyle
? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(InfoTooltip_1.InfoTooltip, { backgroundColor: colors_1.INPUT_BACKGROUND, arrowDirection: layout, children: children }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
: null] }));
};
exports.InfoBubble = InfoBubble;