react-intlayer
Version:
Easily internationalize i18n your React applications with type-safe multilingual content management.
112 lines • 2.88 kB
JavaScript
"use client";
import { jsx } from "react/jsx-runtime";
import {
useCallback,
useEffect,
useRef,
useState
} from "react";
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
}
);
};
export {
ContentSelector
};
//# sourceMappingURL=ContentSelector.mjs.map