adai/MemoryBear
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(web): OverflowTags replace

Browse Source
This commit is contained in:
zhaoying
2026-04-22 11:48:35 +08:00
parent f37e9b444b
commit 7552a5c8fa
7 changed files with 81 additions and 116 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/components/OverflowTags/index.tsx
View File

@@ -1,5 +1,5 @@
import { useRef, useState, useLayoutEffect, useCallback, type ReactNode } from 'react'
import { Popover } from 'antd'
import { Popover, type PopoverProps } from 'antd'
import Tag, { type TagProps } from '@/components/Tag'
interface OverflowTagsProps {
@@ -7,9 +7,10 @@ interface OverflowTagsProps {
gap?: number;
numTagColor?: TagProps['color'];
numTag?: (num?: number) => ReactNode;
popoverProps?: PopoverProps | false;
}
const OverflowTags = ({ items, gap = 8, numTagColor = 'default', numTag }: 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)
@@ -66,11 +67,15 @@ const OverflowTags = ({ items, gap = 8, numTagColor = 'default', numTag }: Overf
{items.map((item, i) => <span key={i}>{item}</span>)}
<Tag>+0</Tag>
</div>
<Popover content={
<div style={{ display: 'flex', gap, flexWrap: 'wrap', maxWidth: 300 }}>
{items.map((item, i) => <span key={i}>{item}</span>)}
</div>
}>
<Popover
content={
<div style={{ display: 'flex', gap, flexWrap: 'wrap', maxWidth: 300 }}>
{items.map((item, i) => <span key={i}>{item}</span>)}
</div>
}
{...(popoverProps || {})}
open={popoverProps === false ? false : undefined}
>
<div style={{ display: 'flex', gap, alignItems: 'center', flexWrap: 'nowrap' }}>
{items.slice(0, visibleCount).map((item, i) => <span key={i}>{item}</span>)}
{hidden > 0 && numTag

9
web/src/components/Tag/index.tsx
View File

@@ -1,8 +1,8 @@
/*
* @Author: ZhaoYing
* @Date: 2026-02-02 15:29:57
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-02-02 15:29:57
* @Last Modified by: ZhaoYing
* @Last Modified time: 2026-04-22 11:39:15
*/
/**
* Tag Component
@@ -23,6 +23,7 @@ export interface TagProps {
children: ReactNode;
/** Additional CSS classes */
className?: string;
variant?: 'outline' | 'borderless'
}
/** Color theme mappings with text, border, and background colors */
@@ -37,9 +38,9 @@ const colors = {
}
/** Custom tag component with color themes */
const Tag: FC<TagProps> = ({ color = 'processing', children, className }) => {
const Tag: FC<TagProps> = ({ color = 'processing', children, className, variant = 'outline' }) => {
return (
<span className={`rb:inline-block rb:px-1 rb:py-0.5 rb:rounded-sm rb:text-[12px] rb:font-regular! rb:leading-4 rb:border ${colors[color]} ${className || ''}`}>
<span className={`rb:inline-block rb:px-1 rb:py-0.5 rb:rounded-sm rb:text-[12px] rb:font-regular! rb:leading-4 rb:border ${colors[color]} ${className || ''}, ${variant === 'borderless' ? 'rb:border-none!' : ''}`}>
{children}
</span>
)