fix(web): ontology tag
This commit is contained in:
@@ -3,14 +3,14 @@ import { Popover, type PopoverProps } from 'antd'
|
||||
import Tag, { type TagProps } from '@/components/Tag'
|
||||
|
||||
interface OverflowTagsProps {
|
||||
items: ReactNode[];
|
||||
items?: ReactNode[];
|
||||
gap?: number;
|
||||
numTagColor?: TagProps['color'];
|
||||
numTag?: (num?: number) => ReactNode;
|
||||
popoverProps?: PopoverProps | false;
|
||||
}
|
||||
|
||||
const OverflowTags = ({ items, gap = 8, numTagColor = 'default', numTag, popoverProps }: OverflowTagsProps) => {
|
||||
const OverflowTags = ({ items = [], gap = 8, numTagColor = 'default', numTag, popoverProps }: OverflowTagsProps) => {
|
||||
const containerRef = useRef<HTMLDivElement>(null)
|
||||
const measureRef = useRef<HTMLDivElement>(null)
|
||||
const [visibleCount, setVisibleCount] = useState(items.length)
|
||||
@@ -20,7 +20,7 @@ const OverflowTags = ({ items, gap = 8, numTagColor = 'default', numTag, popover
|
||||
if (!measure || containerWidth === 0) return
|
||||
|
||||
const children = Array.from(measure.children) as HTMLElement[]
|
||||
if (!children.length) return
|
||||
if (!children.length) { setVisibleCount(0); return }
|
||||
|
||||
// last child is the sample +N tag
|
||||
const extraTagWidth = (children[children.length - 1] as HTMLElement).offsetWidth
|
||||
|
||||
@@ -166,10 +166,10 @@ const Ontology: FC = () => {
|
||||
<div className="rb:h-10 rb:wrap-break-word rb:line-clamp-2 rb:leading-5">{item.scene_description}</div>
|
||||
</Tooltip>
|
||||
|
||||
<div className="rb:mt-2">
|
||||
<div className="rb:mt-2 rb:h-5.5">
|
||||
<OverflowTags
|
||||
popoverProps={false}
|
||||
items={[...item.entity_type?.map((type, i) => <Tag key={i} variant="borderless" color="dark">{type}</Tag>), <Tag variant="borderless" color="dark">{`+${item.type_num - 3}`}</Tag>]}
|
||||
items={item.entity_type ? [...item.entity_type.map((type, i) => <Tag key={i} variant="borderless" color="dark">{type}</Tag>), <Tag variant="borderless" color="dark">{`+${item.type_num - 3}`}</Tag>] : []}
|
||||
numTag={(num?: number) => <Tag variant="borderless" color="dark">{`+${item.type_num - 3 + (num ? num - 1 : 0)}`}</Tag>}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user