react-intlayer/dist/cjs/UI/ContentSelector.cjs

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

'use client';

const require_rolldown_runtime = require('../_virtual/rolldown_runtime.cjs');
let react = require("react");
let react_jsx_runtime = require("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 = (0, react.useRef)(null);
	const [isHovered, setIsHovered] = (0, react.useState)(false);
	const [isSelectingState, setIsSelectingState] = (0, react.useState)(isSelectingProp);
	const pressTimerRef = (0, react.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 = (0, react.useCallback)((event) => {
		if (divRef.current && !divRef.current.contains(event.target)) {
			setIsSelectingState(false);
			onUnselect?.();
		}
	}, [onUnselect]);
	(0, react.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__ */ (0, react_jsx_runtime.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
exports.ContentSelector = ContentSelector;
//# sourceMappingURL=ContentSelector.cjs.map