react-intlayer/dist/esm/UI/ContentSelector.mjs

Easily internationalize i18n your React applications with type-safe multilingual content management.

'use client';

import { useCallback, useEffect, useRef, useState } from "react";
import { jsx } from "react/jsx-runtime";

//#region src/UI/ContentSelector.tsx
const DEFAULT_PRESS_DETECT_DURATION = 250;
const ContentSelector = ({ children, onPress, onHover, onUnhover, onClickOutside: onUnselect, pressDuration = DEFAULT_PRESS_DETECT_DURATION, isSelecting: isSelectingProp, ...props }) => {
	const divRef = useRef(null);
	const [isHovered, setIsHovered] = useState(false);
	const [isSelectingState, setIsSelectingState] = useState(isSelectingProp);
	const pressTimerRef = useRef(null);
	const isChildrenString = typeof children === "string";
	const handleOnLongPress = () => {
		setIsSelectingState(true);
		onPress();
	};
	const startPressTimer = () => {
		pressTimerRef.current = setTimeout(() => {
			handleOnLongPress();
		}, pressDuration);
	};
	const clearPressTimer = () => {
		if (pressTimerRef.current) {
			clearTimeout(pressTimerRef.current);
			pressTimerRef.current = null;
		}
	};
	const handleMouseDown = () => {
		clearPressTimer();
		startPressTimer();
	};
	const handleMouseEnter = () => {
		setIsHovered(true);
		onHover?.();
	};
	const handleMouseUp = () => {
		onUnhover?.();
		setIsHovered(false);
		clearPressTimer();
	};
	const handleClickOutside = useCallback((event) => {
		if (divRef.current && !divRef.current.contains(event.target)) {
			setIsSelectingState(false);
			onUnselect?.();
		}
	}, [onUnselect]);
	useEffect(() => {
		document.addEventListener("mousedown", handleClickOutside);
		return () => {
			document.removeEventListener("mousedown", handleClickOutside);
		};
	}, [handleClickOutside]);
	const handleOnClick = (e) => {
		if (isSelectingState) {
			e.preventDefault();
			e.stopPropagation();
		}
	};
	const handleOnBlur = () => {
		setIsSelectingState(false);
	};
	return /* @__PURE__ */ jsx("span", {
		style: {
			display: isChildrenString ? "inline" : "inline-block",
			cursor: "pointer",
			userSelect: "none",
			borderRadius: "0.375rem",
			outlineWidth: "2px",
			outlineOffset: "4px",
			outlineStyle: "solid",
			outlineColor: isSelectingProp || isSelectingState || isHovered ? "inherit" : "transparent",
			transition: "all 100ms 50ms ease-in-out"
		},
		role: "button",
		tabIndex: 0,
		onKeyUp: () => null,
		onClick: handleOnClick,
		onMouseDown: handleMouseDown,
		onMouseUp: handleMouseUp,
		onMouseLeave: handleMouseUp,
		onTouchStart: handleMouseDown,
		onTouchEnd: handleMouseUp,
		onTouchCancel: handleMouseUp,
		onBlur: handleOnBlur,
		onMouseEnter: handleMouseEnter,
		ref: divRef,
		...props,
		children
	});
};

//#endregion
export { ContentSelector };
//# sourceMappingURL=ContentSelector.mjs.map