mirror of
https://github.com/netbirdio/netbird.git
synced 2026-10-22 13:29:08 +02:00
Eduard GertandEdward
f5707c3485
* [client] Add RTL layout support to the desktop UI <html dir> follows the active language, Radix primitives get the matching dir, physical spacing/positioning uses logical utilities, and directional icons, animations, arrow-key navigation and tooltip sides flip in RTL. * [client] Address RTL review feedback Force LTR with isolation for monospace values, let truncated names take their direction from their content, and keep the profile name field in the UI direction. * [client] Keep translated monospace labels in their own direction The forced-LTR rule for monospace values now skips elements with an explicit dir, translated development labels use dir=auto, and monospace values rendered through TruncatedText opt into LTR. --------- Co-authored-by: Edward <43848523+thomashacker@users.noreply.github.com>
40 lines
975 B
TypeScript
40 lines
975 B
TypeScript
import { useLayoutEffect, useRef, useState, type ReactNode } from "react";
|
|
import { Tooltip } from "@/components/Tooltip";
|
|
|
|
type Props = {
|
|
text: string;
|
|
className?: string;
|
|
tooltipContent?: ReactNode;
|
|
delayDuration?: number;
|
|
dir?: "ltr" | "rtl" | "auto";
|
|
};
|
|
|
|
export const TruncatedText = ({
|
|
text,
|
|
className,
|
|
tooltipContent,
|
|
delayDuration = 600,
|
|
dir = "auto",
|
|
}: Props) => {
|
|
const ref = useRef<HTMLSpanElement>(null);
|
|
const [overflowing, setOverflowing] = useState(false);
|
|
|
|
useLayoutEffect(() => {
|
|
const el = ref.current;
|
|
if (!el) return;
|
|
setOverflowing(el.scrollWidth > el.clientWidth);
|
|
}, [text]);
|
|
|
|
const span = (
|
|
<span ref={ref} dir={dir} className={className}>
|
|
{text}
|
|
</span>
|
|
);
|
|
if (!overflowing) return span;
|
|
return (
|
|
<Tooltip content={tooltipContent ?? text} delayDuration={delayDuration}>
|
|
{span}
|
|
</Tooltip>
|
|
);
|
|
};
|