react-intlayer
Version:
Easily internationalize i18n your React applications with type-safe multilingual content management.
75 lines • 2.03 kB
JavaScript
"use client";
import { jsx } from "react/jsx-runtime";
import { isSameKeyPath } from "@intlayer/core";
import {
MessageKey,
useCommunicator,
useEditorEnabled,
useFocusDictionary
} from "@intlayer/editor-react";
import { useCallback, useMemo } from "react";
import { useIntlayerContext } from "../client/index.mjs";
import { ContentSelector } from "../UI/ContentSelector.mjs";
const ContentSelectorWrapperContent = ({
children,
dictionaryKey,
keyPath
}) => {
const { focusedContent, setFocusedContent } = useFocusDictionary();
const { postMessage, senderId } = useCommunicator();
const handleSelect = useCallback(
() => setFocusedContent({
dictionaryKey,
keyPath
}),
[dictionaryKey, keyPath]
);
const handleHover = useCallback(
() => postMessage({
type: `${MessageKey.INTLAYER_HOVERED_CONTENT_CHANGED}/post`,
data: {
dictionaryKey,
keyPath
},
senderId
}),
[dictionaryKey, keyPath]
);
const handleUnhover = useCallback(
() => postMessage({
type: `${MessageKey.INTLAYER_HOVERED_CONTENT_CHANGED}/post`,
data: null,
senderId
}),
[senderId]
);
const isSelected = useMemo(
() => (focusedContent?.dictionaryKey === dictionaryKey && (focusedContent?.keyPath?.length ?? 0) > 0 && isSameKeyPath(focusedContent?.keyPath ?? [], keyPath)) ?? false,
[focusedContent, keyPath, dictionaryKey]
);
return /* @__PURE__ */ jsx(
ContentSelector,
{
onPress: handleSelect,
onHover: handleHover,
onUnhover: handleUnhover,
isSelecting: isSelected,
children
}
);
};
const ContentSelectorRenderer = ({
children,
...props
}) => {
const { enabled } = useEditorEnabled();
const { disableEditor } = useIntlayerContext();
if (enabled && !disableEditor) {
return /* @__PURE__ */ jsx(ContentSelectorWrapperContent, { ...props, children });
}
return children;
};
export {
ContentSelectorRenderer
};
//# sourceMappingURL=ContentSelectorWrapper.mjs.map