react-intlayer
Version:
Easily internationalize i18n your React applications with type-safe multilingual content management.
131 lines • 4.04 kB
JavaScript
;
"use client";
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var ContentSelector_exports = {};
__export(ContentSelector_exports, {
ContentSelector: () => ContentSelector
});
module.exports = __toCommonJS(ContentSelector_exports);
var import_jsx_runtime = require("react/jsx-runtime");
var import_react = require("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 = (0, import_react.useRef)(null);
const [isHovered, setIsHovered] = (0, import_react.useState)(false);
const [isSelectingState, setIsSelectingState] = (0, import_react.useState)(isSelectingProp);
const pressTimerRef = (0, import_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, import_react.useCallback)(
(event) => {
if (divRef.current && !divRef.current.contains(event.target)) {
setIsSelectingState(false);
onUnselect?.();
}
},
[onUnselect]
);
(0, import_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, import_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
}
);
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
ContentSelector
});
//# sourceMappingURL=ContentSelector.cjs.map