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