Shared:Components:ArticleItem: add link

This commit is contained in:
Timofey Boyko 2024-08-27 09:59:13 +03:00
parent 826a4fae00
commit 6709883fe4
2 changed files with 77 additions and 53 deletions

View File

@ -26,6 +26,7 @@
import React from "react";
import { ReactSVG } from "react-svg";
import { Link } from "react-router-dom";
import { Text } from "../text";
@ -69,6 +70,7 @@ export const ArticleItemPure = (props: ArticleItemProps) => {
badgeTitle,
$currentColorScheme,
title,
linkData,
} = props;
const onClickAction = (e: React.MouseEvent) => {
@ -105,62 +107,68 @@ export const ArticleItemPure = (props: ArticleItemProps) => {
const renderItem = () => {
return (
<StyledArticleItemTheme
className={className}
style={style}
showText={showText}
isEndOfBlock={isEndOfBlock}
isActive={isActive}
data-testid="article-item"
$currentColorScheme={$currentColorScheme}
title={tooltipTitle}
<Link
style={{ textDecoration: "none" }}
to={linkData?.path}
state={linkData?.state}
>
<StyledArticleItemSibling
id={folderId}
<StyledArticleItemTheme
className={className}
style={style}
showText={showText}
isEndOfBlock={isEndOfBlock}
isActive={isActive}
isDragging={isDragging}
isDragActive={isDragActive}
onClick={onClickAction}
onMouseUp={onMouseUpAction}
onMouseDown={onMouseDown}
/>
<StyledArticleItemImg isActive={isActive}>
<ReactSVG className="icon" src={icon} />
{!showText && (
<>
{showInitial && (
<StyledArticleItemInitialText>
{getInitial(text)}
</StyledArticleItemInitialText>
)}
{showBadge && !iconBadge && (
<StyledArticleItemBadgeWrapper
onClick={onClickBadgeAction}
showText={showText}
/>
)}
</>
)}
</StyledArticleItemImg>
{showText && (
<StyledArticleItemText isActive={isActive} noSelect>
{text}
</StyledArticleItemText>
)}
{showBadge && showText && (
<StyledArticleItemBadgeWrapper
showText={showText}
onClick={onClickBadgeAction}
title={badgeTitle}
>
{!iconBadge ? (
<Badge className="catalog-item__badge" label={labelBadge} />
) : (
<ReactSVG className="catalog-item__icon" src={iconBadge} />
data-testid="article-item"
$currentColorScheme={$currentColorScheme}
title={tooltipTitle}
>
<StyledArticleItemSibling
id={folderId}
isActive={isActive}
isDragging={isDragging}
isDragActive={isDragActive}
onClick={onClickAction}
onMouseUp={onMouseUpAction}
onMouseDown={onMouseDown}
/>
<StyledArticleItemImg isActive={isActive}>
<ReactSVG className="icon" src={icon} />
{!showText && (
<>
{showInitial && (
<StyledArticleItemInitialText>
{getInitial(text)}
</StyledArticleItemInitialText>
)}
{showBadge && !iconBadge && (
<StyledArticleItemBadgeWrapper
onClick={onClickBadgeAction}
showText={showText}
/>
)}
</>
)}
</StyledArticleItemBadgeWrapper>
)}
</StyledArticleItemTheme>
</StyledArticleItemImg>
{showText && (
<StyledArticleItemText isActive={isActive} noSelect>
{text}
</StyledArticleItemText>
)}
{showBadge && showText && (
<StyledArticleItemBadgeWrapper
showText={showText}
onClick={onClickBadgeAction}
title={badgeTitle}
>
{!iconBadge ? (
<Badge className="catalog-item__badge" label={labelBadge} />
) : (
<ReactSVG className="catalog-item__icon" src={iconBadge} />
)}
</StyledArticleItemBadgeWrapper>
)}
</StyledArticleItemTheme>
</Link>
);
};

View File

@ -26,6 +26,21 @@
import { TColorScheme } from "../../themes";
export type TArticleLinkDataState =
| {
title: string;
isRoot: boolean;
isPublicRoomType: boolean;
rootFolderType: number;
canCreate: boolean;
}
| {};
export type TArticleLinkData = {
path: string;
state: TArticleLinkDataState;
};
export interface ArticleItemProps {
/** Accepts className */
className?: string;
@ -70,4 +85,5 @@ export interface ArticleItemProps {
badgeTitle?: string;
$currentColorScheme?: TColorScheme;
title?: string;
linkData: TArticleLinkData;
}