usememos/memos
1
1
Fork 0
mirror of https://github.com/usememos/memos.git synced 2025-02-24 21:33:45 +08:00
Code Issues Projects Releases Packages Wiki Activity

chore: add OverflowTip kit component

Browse source
This commit is contained in:
Steven 2023-11-07 07:20:17 +08:00
parent 9c4f72c96e
commit 32cafbff9b
3 changed files with 45 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

23
web/src/components/CreateTagDialog.tsx
View file

@ -8,6 +8,7 @@ import { useTagStore } from "@/store/module";
import { useTranslate } from "@/utils/i18n";
import { generateDialog } from "./Dialog";
import Icon from "./Icon";
import OverflowTip from "./kit/OverflowTip";
type Props = DialogProps;
@ -108,13 +109,14 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
{Array.from(tagNameList)
.sort()
.map((tag) => (
<span
className="max-w-[120px] text-sm mr-2 mt-1 font-mono cursor-pointer truncate dark:text-gray-300 hover:opacity-60 hover:line-through"
<OverflowTip
key={tag}
onClick={() => handleDeleteTag(tag)}
className="max-w-[120px] text-sm mr-2 mt-1 font-mono cursor-pointer dark:text-gray-300 hover:opacity-60 hover:line-through"
>
#{tag}
</span>
<span className="w-full" onClick={() => handleDeleteTag(tag)}>
#{tag}
</span>
</OverflowTip>
))}
</div>
</>
@ -135,13 +137,14 @@ const CreateTagDialog: React.FC<Props> = (props: Props) => {
<>
<div className="w-full flex flex-row justify-start items-start flex-wrap mb-2">
{shownSuggestTagNameList.map((tag) => (
<span
className="max-w-[120px] text-sm mr-2 mt-1 font-mono cursor-pointer truncate dark:text-gray-300 hover:opacity-60"
<OverflowTip
key={tag}
onClick={() => handleUpsertTag(tag)}
className="max-w-[120px] text-sm mr-2 mt-1 font-mono cursor-pointer dark:text-gray-300 hover:opacity-60"
>
#{tag}
</span>
<span className="w-full" onClick={() => handleUpsertTag(tag)}>
#{tag}
</span>
</OverflowTip>
))}
</div>
<Button size="sm" variant="outlined" onClick={handleSaveSuggestTagList}>

2
web/src/components/TagList.tsx
View file

@ -139,7 +139,7 @@ const TagItemContainer: React.FC<TagItemContainerProps> = (props: TagItemContain
</div>
{hasSubTags ? (
<div
className={`w-full flex flex-col justify-start items-start h-auto ml-5 pl-1 border-l-2 border-l-gray-200 dark:border-l-gray-400 ${
className={`w-[calc(100%-1rem)] flex flex-col justify-start items-start h-auto ml-4 pl-1 border-l-2 border-l-gray-200 dark:border-l-gray-400 ${
!showSubTags && "!hidden"
}`}
>

31
web/src/components/kit/OverflowTip.tsx Normal file
View file

@ -0,0 +1,31 @@
import { Tooltip } from "@mui/joy";
import classNames from "classnames";
import { useRef, useState, useEffect } from "react";
interface Props {
children: React.ReactNode;
className?: string;
}
const OverflowTip = ({ children, className }: Props) => {
const [isOverflowed, setIsOverflow] = useState(false);
const textElementRef = useRef<HTMLDivElement>(null);
useEffect(() => {
if (!textElementRef.current) {
return;
}
setIsOverflow(textElementRef.current.scrollWidth > textElementRef.current.clientWidth);
}, []);
return (
<Tooltip title={children} placement="top" arrow disableHoverListener={!isOverflowed}>
<div ref={textElementRef} className={classNames("truncate", className)}>
{children}
</div>
</Tooltip>
);
};
export default OverflowTip;