73 lines
1.8 KiB
TypeScript
73 lines
1.8 KiB
TypeScript
// * Packages
|
|
import { usePage } from "@inertiajs/react";
|
|
import { ReactNode } from "react";
|
|
// * Other
|
|
import { AppEnv } from "@/types/global";
|
|
import { TranslationField } from "@/back/types/i18n";
|
|
import useTrans from "@/hooks/use-translations";
|
|
import str from "@/hooks/use-string";
|
|
|
|
const PREVIEW_LENGTH = 50;
|
|
|
|
function normalizePreview(value: string): string {
|
|
return str(value).normalize().value().substring(0, PREVIEW_LENGTH);
|
|
}
|
|
|
|
function useGetTranslationValue(
|
|
value?: TranslationField,
|
|
): { value: string; locale?: string } | null {
|
|
const { appEnv } = usePage().props as unknown as { appEnv: AppEnv };
|
|
|
|
if (!value) return null;
|
|
|
|
const local = value[appEnv.locale];
|
|
if (local) return { value: local };
|
|
|
|
const fallback = Object.entries(value).find(([, v]) => v?.trim());
|
|
if (!fallback) return null;
|
|
|
|
return { value: fallback[1], locale: fallback[0] };
|
|
}
|
|
|
|
function RenderValue({
|
|
value,
|
|
renderHtml,
|
|
}: {
|
|
value: string;
|
|
renderHtml: boolean;
|
|
}): ReactNode {
|
|
const preview = normalizePreview(value);
|
|
|
|
return renderHtml ? (
|
|
// eslint-disable-next-line react/no-danger
|
|
<p dangerouslySetInnerHTML={{ __html: preview }} />
|
|
) : (
|
|
preview
|
|
);
|
|
}
|
|
|
|
export default function RenderTranslationCell({
|
|
value,
|
|
renderHtml = false,
|
|
}: {
|
|
value?: TranslationField;
|
|
renderHtml?: boolean;
|
|
}): ReactNode {
|
|
const result = useGetTranslationValue(value);
|
|
const notKnown = useTrans("uwil-i18n::trans.value_not_known");
|
|
|
|
if (!result) {
|
|
return <p className="text-muted-foreground italic m-0">{notKnown}</p>;
|
|
}
|
|
|
|
if (!result.locale) {
|
|
return <RenderValue value={result.value} renderHtml={renderHtml} />;
|
|
}
|
|
|
|
return (
|
|
<span className="italic text-xs">
|
|
<span className="text-muted-foreground mr-1">{result.locale}:</span>
|
|
<RenderValue value={result.value} renderHtml={renderHtml} />
|
|
</span>
|
|
);
|
|
}
|