IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Shared:Components:ArticleItem: add link

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

114
packages/shared/components/article-item/ArticleItem.tsx
View File

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

16
packages/shared/components/article-item/ArticleItem.types.ts
View File

@ -26,6 +26,21 @@
import { TColorScheme } from "../../themes"; 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 { export interface ArticleItemProps {
/** Accepts className */ /** Accepts className */
className?: string; className?: string;
@ -70,4 +85,5 @@ export interface ArticleItemProps {
badgeTitle?: string; badgeTitle?: string;
$currentColorScheme?: TColorScheme; $currentColorScheme?: TColorScheme;
title?: string; title?: string;
linkData: TArticleLinkData;
} }