feat: 话题卡片增加已读未读容器

pull/70/head
moonrailgun 2 years ago
parent 8b5b0459f1
commit 84584c8bed

@ -29,6 +29,7 @@ export {
} from 'tailchat-design';
export { Link } from 'react-router-dom';
export { MessageAckContainer } from '@/components/ChatBox/ChatMessageList/MessageAckContainer';
export { Image } from '@/components/Image';
export { IconBtn } from '@/components/IconBtn';
export { PillTabs, PillTabPane } from '@/components/PillTabs';

@ -110,6 +110,10 @@ declare module '@capital/common' {
export const getCachedConverseInfo: any;
export const getCachedBaseGroupInfo: any;
export const getCachedUserSettings: any;
/**
*
* @example
@ -166,6 +170,8 @@ declare module '@capital/common' {
export const joinArray: any;
export const navigate: any;
export const useLocation: any;
export const useNavigate: any;
@ -302,6 +308,10 @@ declare module '@capital/common' {
export const regUserExtraInfo: any;
export const pluginSettings: any;
export const regPluginSettings: any;
export const useGroupIdContext: () => string;
export const useGroupPanelContext: () => {
@ -380,6 +390,10 @@ declare module '@capital/component' {
export const metaFormFieldSchema: any;
export const Link: any;
export const MessageAckContainer: any;
export const Image: any;
export const IconBtn: React.FC<{

@ -5,7 +5,13 @@ import {
showSuccessToasts,
useAsyncRequest,
} from '@capital/common';
import { IconBtn, Input, UserName, UserAvatar } from '@capital/component';
import {
IconBtn,
Input,
UserName,
UserAvatar,
MessageAckContainer,
} from '@capital/component';
import styled from 'styled-components';
import type { GroupTopic } from '../types';
import { Translate } from '../translate';
@ -32,7 +38,7 @@ const Root = styled.div`
flex: 1;
user-select: text;
.header {·
.header {
display: flex;
line-height: 32px;
@ -85,49 +91,51 @@ export const TopicCard: React.FC<{
}, [topic.groupId, topic.panelId, topic._id, comment]);
return (
<Root>
<div className="left">
<UserAvatar userId={topic.author} />
</div>
<div className="right">
<div className="header">
<div className="name">
<UserName userId={topic.author} />
</div>
<div className="date">{showMessageTime(topic.createdAt)}</div>
<MessageAckContainer>
<Root>
<div className="left">
<UserAvatar userId={topic.author} />
</div>
<div className="body">
<div className="content">{getMessageRender(topic.content)}</div>
<div className="right">
<div className="header">
<div className="name">
<UserName userId={topic.author} />
</div>
<div className="date">{showMessageTime(topic.createdAt)}</div>
</div>
{Array.isArray(topic.comments) && topic.comments.length > 0 && (
<TopicComments comments={topic.comments} />
)}
</div>
<div className="body">
<div className="content">{getMessageRender(topic.content)}</div>
<div className="footer">
<IconBtn
title={Translate.reply}
icon="mdi:message-reply-text-outline"
onClick={toggleShowReply}
/>
</div>
{Array.isArray(topic.comments) && topic.comments.length > 0 && (
<TopicComments comments={topic.comments} />
)}
</div>
{showReply && (
<ReplyBox>
<Input
autoFocus
placeholder={Translate.replyThisTopic}
disabled={loading}
value={comment}
onChange={(e) => setComment(e.target.value)}
onPressEnter={handleComment}
<div className="footer">
<IconBtn
title={Translate.reply}
icon="mdi:message-reply-text-outline"
onClick={toggleShowReply}
/>
</ReplyBox>
)}
</div>
</Root>
</div>
{showReply && (
<ReplyBox>
<Input
autoFocus
placeholder={Translate.replyThisTopic}
disabled={loading}
value={comment}
onChange={(e) => setComment(e.target.value)}
onPressEnter={handleComment}
/>
</ReplyBox>
)}
</div>
</Root>
</MessageAckContainer>
);
});
TopicCard.displayName = 'TopicCard';

@ -110,6 +110,10 @@ declare module '@capital/common' {
export const getCachedConverseInfo: any;
export const getCachedBaseGroupInfo: any;
export const getCachedUserSettings: any;
/**
*
* @example
@ -123,14 +127,20 @@ declare module '@capital/common' {
export const sharedEvent: any;
export const useAsync: any;
export const useAsync: <T extends (...args: any[]) => Promise<any>>(
fn: T,
deps?: React.DependencyList
) => { loading: boolean; value?: any; error?: Error };
export const useAsyncFn: any;
export const useAsyncFn: <T extends (...args: any[]) => Promise<any>>(
fn: T,
deps?: React.DependencyList
) => [{ loading: boolean; value?: any; error?: Error }, T];
export const useAsyncRefresh: <T extends (...args: any[]) => Promise<any>>(
fn: T,
deps?: React.DependencyList
) => [{ loading: boolean; value?: any; error?: Error }, T];
) => { loading: boolean; value?: any; error?: Error; refresh: () => void };
export const useAsyncRequest: <T extends (...args: any[]) => Promise<any>>(
fn: T,
@ -158,12 +168,22 @@ declare module '@capital/common' {
export const showMessageTime: any;
export const joinArray: any;
export const navigate: any;
export const useLocation: any;
export const useNavigate: any;
/**
* @deprecated please use createMetaFormSchema from @capital/component
*/
export const createFastFormSchema: any;
/**
* @deprecated please use metaFormFieldSchema from @capital/component
*/
export const fieldSchema: any;
export const useCurrentUserInfo: any;
@ -183,13 +203,21 @@ declare module '@capital/common' {
export const regGroupPanel: any;
export const messageInterpreter: any;
export const messageInterpreter: {
name?: string;
explainMessage: (message: string) => React.ReactNode;
}[];
export const regMessageInterpreter: any;
export const regMessageInterpreter: (interpreter: {
name?: string;
explainMessage: (message: string) => React.ReactNode;
}) => void;
export const getMessageRender: any;
export const getMessageRender: (message: string) => React.ReactNode;
export const regMessageRender: any;
export const regMessageRender: (
render: (message: string) => React.ReactNode
) => void;
export const getMessageTextDecorators: any;
@ -224,7 +252,23 @@ declare module '@capital/common' {
export const pluginPanelActions: any;
export const regPluginPanelAction: any;
export const regPluginPanelAction: (
action:
| {
name: string;
label: string;
icon: string;
position: 'group';
onClick: (ctx: { groupId: string; panelId: string }) => void;
}
| {
name: string;
label: string;
icon: string;
position: 'dm';
onClick: (ctx: { converseId: string }) => void;
}
) => void;
export const pluginPermission: any;
@ -260,6 +304,14 @@ declare module '@capital/common' {
export const regPluginGroupTextPanelExtraMenu: any;
export const pluginUserExtraInfo: any;
export const regUserExtraInfo: any;
export const pluginSettings: any;
export const regPluginSettings: any;
export const useGroupIdContext: () => string;
export const useGroupPanelContext: () => {
@ -308,15 +360,41 @@ declare module '@capital/component' {
}>
>;
export const TextArea: any;
export const Avatar: any;
export const SensitiveText: React.FC<{ className?: string; text: string }>;
export const TextArea: any;
export const Icon: React.FC<{ icon: string } & React.SVGProps<SVGSVGElement>>;
export const Image: any;
export const CopyableText: React.FC<{
className?: string;
style?: React.CSSProperties;
config?:
| boolean
| {
text?: string;
onCopy?: (event?: React.MouseEvent<HTMLDivElement>) => void;
icon?: React.ReactNode;
tooltips?: boolean | React.ReactNode;
format?: 'text/plain' | 'text/html';
};
}>;
export const Icon: React.FC<{ icon: string } & React.SVGProps<SVGSVGElement>>;
export const WebFastForm: any;
export const WebMetaForm: any;
export const createMetaFormSchema: any;
export const metaFormFieldSchema: any;
export const Link: any;
export const MessageAckContainer: any;
export const Image: any;
export const IconBtn: React.FC<{
icon: string;
@ -325,6 +403,9 @@ declare module '@capital/component' {
size?: 'small' | 'middle' | 'large';
shape?: 'circle' | 'square';
title?: string;
danger?: boolean;
active?: boolean;
disabled?: boolean;
onClick?: React.MouseEventHandler<HTMLElement>;
}>;
@ -334,14 +415,6 @@ declare module '@capital/component' {
export const LoadingSpinner: React.FC<{ tip?: string }>;
export const WebFastForm: any;
export const WebMetaForm: any;
export const createMetaFormSchema: any;
export const metaFormFieldSchema: any;
export const FullModalField: any;
export const DefaultFullModalInputEditorRender: any;
@ -408,12 +481,22 @@ declare module '@capital/component' {
export const ErrorBoundary: any;
export const UserAvatar: any;
export const UserAvatar: React.FC<{
userId: string;
className?: string;
style?: React.CSSProperties;
size?: 'large' | 'small' | 'default' | number;
}>;
export const UserName: React.FC<{
userId: string;
className?: string;
style?: React.CSSProperties;
}>;
export const Markdown: any;
export const Webview: any;
export const WebviewKeepAlive: any;
}

Loading…
Cancel
Save