-
Notifications
You must be signed in to change notification settings - Fork 291
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
a70c5e4
commit 469f341
Showing
13 changed files
with
156 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
17 changes: 17 additions & 0 deletions
17
client/web/plugins/com.msgbyte.bbcode/src/tags/CardTag.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import { Card } from '@capital/component'; | ||
import React from 'react'; | ||
import type { TagProps } from '../bbcode/type'; | ||
|
||
export const CardTag: React.FC<TagProps> = React.memo((props) => { | ||
const { node } = props; | ||
const label = node.content.join(''); | ||
const attrs = node.attrs ?? {}; | ||
|
||
const payload: any = { | ||
label, | ||
...attrs, | ||
}; | ||
|
||
return <Card type={payload.type} payload={payload} />; | ||
}); | ||
CardTag.displayName = 'CardTag'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
import { downloadUrl } from '@/utils/file-helper'; | ||
import React from 'react'; | ||
import { Icon } from 'tailchat-design'; | ||
import { useMemoizedFn, t } from 'tailchat-shared'; | ||
import { IconBtn } from '../IconBtn'; | ||
import { CardWrapper } from './Wrapper'; | ||
|
||
export interface FileCardPayload { | ||
label: string; | ||
url: string; | ||
} | ||
|
||
export const FileCard: React.FC<{ | ||
payload: FileCardPayload; | ||
}> = React.memo((props) => { | ||
const payload = props.payload ?? {}; | ||
|
||
const handleDownload = useMemoizedFn(() => { | ||
downloadUrl(payload.url, payload.label); | ||
}); | ||
|
||
return ( | ||
<CardWrapper> | ||
<div className="flex items-center"> | ||
<div className="mr-3 overflow-hidden"> | ||
<div className="flex text-lg items-center"> | ||
<Icon icon="mdi:paperclip" /> | ||
<span className="ml-1">{t('文件')}</span> | ||
</div> | ||
|
||
<div className="text-sm text-black text-opacity-60 dark:text-white dark:text-opacity-60"> | ||
{payload.label} | ||
</div> | ||
</div> | ||
|
||
<IconBtn | ||
title={t('下载')} | ||
icon="mdi:cloud-download-outline" | ||
onClick={handleDownload} | ||
/> | ||
</div> | ||
</CardWrapper> | ||
); | ||
}); | ||
FileCard.displayName = 'FileCard'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,14 @@ | ||
import React from 'react'; | ||
|
||
export const CardWrapper: React.FC<React.PropsWithChildren> = React.memo( | ||
(props) => { | ||
return ( | ||
<div className="w-3/4"> | ||
<div className="border border-black border-opacity-20 rounded-md p-2 bg-black bg-opacity-5 dark:bg-black dark:bg-opacity-10 inline-flex overflow-hidden"> | ||
{props.children} | ||
</div> | ||
</div> | ||
); | ||
} | ||
); | ||
CardWrapper.displayName = 'CardWrapper'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import React from 'react'; | ||
import { t } from 'tailchat-shared'; | ||
import { FileCard, FileCardPayload } from './FileCard'; | ||
import { CardWrapper } from './Wrapper'; | ||
|
||
interface Props { | ||
type: 'file'; | ||
payload: FileCardPayload; | ||
} | ||
export const Card: React.FC<Props> = React.memo((props) => { | ||
if (props.type === 'file') { | ||
return <FileCard payload={props.payload} />; | ||
} | ||
|
||
return <CardWrapper>{t('未知的卡片类型')}</CardWrapper>; | ||
}); | ||
Card.displayName = 'Card'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters