mirror of
https://github.com/docmost/docmost.git
synced 2026-08-29 10:05:03 +08:00
Philipinho
572452c80b
Add the bases feature: formula engine package, grid/table UI, and the base-embed editor extension, with supporting client and server changes.
30 lines
772 B
TypeScript
30 lines
772 B
TypeScript
import { CSSProperties, useRef, useState } from "react";
|
|
import { Tooltip } from "@mantine/core";
|
|
import cellClasses from "@/ee/base/styles/cells.module.css";
|
|
|
|
type ChoiceBadgeProps = {
|
|
name: string;
|
|
style: CSSProperties;
|
|
};
|
|
|
|
export function ChoiceBadge({ name, style }: ChoiceBadgeProps) {
|
|
const ref = useRef<HTMLSpanElement>(null);
|
|
const [truncated, setTruncated] = useState(false);
|
|
|
|
return (
|
|
<Tooltip label={name} withinPortal openDelay={400} disabled={!truncated}>
|
|
<span
|
|
ref={ref}
|
|
className={cellClasses.badge}
|
|
style={style}
|
|
onMouseEnter={() => {
|
|
const el = ref.current;
|
|
if (el) setTruncated(el.scrollWidth > el.clientWidth);
|
|
}}
|
|
>
|
|
{name}
|
|
</span>
|
|
</Tooltip>
|
|
);
|
|
}
|