@nexusui/components
Version:
These are custom components specially-developed for NexusUI applications. They will make your life easier by giving you out-of-the-box implementations for various high-level UI elements that you can drop directly into your application.
208 lines (207 loc) • 6.56 kB
TypeScript
import { CardProps } from '@mui/material/Card';
import { IBasicUser } from '../../models';
import { IRichTextConfig } from '../CommentRichText';
export declare const prefix = "NexusCommentCard";
export type ICommentAttachment = {
id: string;
name: string;
type: string;
size: number;
url?: string;
file?: File;
};
export type ICommentAuthor = IBasicUser & {
/**
* Current status of the user. These statuses and color mappings can be defined in the statusMapping prop.
*/
status?: string;
/**
* Background color to use for the Avatar.
*/
backgroundColor?: string;
/**
* Text color to use for the Avatar.
*/
textColor?: string;
};
export type ICommentAction = {
/**
* Unique ID representing the individual action.
*/
id: string;
/**
* Text to display in the action menu.
*/
label: string;
/**
* Callback function triggered when the menu item is clicked.
*/
onClick: React.MouseEventHandler<HTMLLIElement>;
};
export type IBasicComment = {
/**
* Unique ID of the individual comment.
*/
id: string;
/**
* Information about the user who authored the comment.
*
*```
* export type ICommentAuthor = {
* id: string;
* firstName: string;
* lastName: string;
* avatar: string;
* email: string;
* status?: string;
* backgroundColor?: string;
* textColor?: string;
* };
* ```
*/
author: ICommentAuthor;
/**
* Mapping of statuses to colors used for the status badges for authors. You can define your own custom status strings that you want to use or use the presets. Colors support SX shorthand.
*
* @default { available: 'success.light', away: 'grey.300', offline: 'error.main' }
*/
statusMapping?: {
[key: string]: string;
};
/**
* The last time the comment was updated/modified. E.g.: `new Date()`, `2022-09-30T03:29:19Z`, `1664508603697`
*/
dateModified: Date | string | number;
/**
* If true, the timestamp will appear below the author name instead of to the side.
* @default true
*/
stackDate?: boolean;
/**
* The content of the comment.
*/
message: string;
/**
* The attachments attached to current comment. It will take effect when mode is `richtext`.
*/
attachments?: ReadonlyArray<ICommentAttachment>;
/**
* The tags for current comment. It will take effect when mode is `richtext`.
*/
tags?: ReadonlyArray<string>;
/**
* The metadata of the current comment can be intercepted by `InputMetaPlugin` and `BlockMetaPlugin` in `richTextConfig.plugin`. It will take effect when mode is `richtext`.
*/
metadata?: Record<string, any>;
/**
* Indicates if the current comment is under tagging state. A tags panel will be displayed. I will tak effect when the mode is `richtext`.
*/
tagging?: boolean;
/**
* Callback function to call when the user clicks outside the tags panel. It will take effect when mode is `richtext`.
*/
onTagCancel?: () => void;
/**
* A list of actions to show in the comment dropdown menu when the user hovers over the comment.
*
*```
* export type ICommentAction = {
* id: string;
* label: string;
* onClick: React.MouseEventHandler<HTMLLIElement>;
* };
* ```
* @default []
*/
actions?: ReadonlyArray<ICommentAction>;
/**
* If true, hover interaction will be disabled and any available actions will always be visible.
* @default false
*/
disableHover?: boolean;
/**
* If true, the comment will render a textfield for editing the content.
* @default false
*/
editing?: boolean;
/**
* Sets the max number of lines to show before truncating the text (0 to disable truncation).
*
* @default 3
*/
maxLines?: number;
/**
* Callback function to call when the edited comment is saved.
*/
onEditSave?: (comment: string, attachments?: ICommentAttachment[], tags?: string[], metadata?: Record<string, any>) => void;
/**
* Callback function to call when the comment editing is canceled without saving.
*/
onEditCancel?: () => void;
};
export type IComment = IBasicComment & {
/**
* The highlight words of comment.
*/
highlight?: string;
/**
* Number of replies that the comment has.
*
* @default 0
*/
replies?: number;
/**
* A list of participants in the conversation.
* @default []
*/
participants?: ReadonlyArray<ICommentAuthor>;
/**
* If true, the comment appears with a blue/selected color background.
* @default false
*/
selected?: boolean;
/**
* If true, the comment will show a badge dot indicating that it hasn't been read.
* @default false
*/
unread?: boolean;
/**
* If true, the comment has been resolved.
* @default false
*/
resolved?: boolean;
/**
* If true, the resolve/unresolve buttons will be available on the comment. Typically this capability is reserved for the original author.
* @default false
*/
canResolve?: boolean;
/**
* Callback triggered when the Resolve button is clicked.
*/
onResolved?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, id: string) => void;
/**
* Callback triggered when the Unresolve button is clicked.
*/
onUnresolved?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, id: string) => void;
/**
* Callback function to call when the comment is clicked/selected.
*/
onSelected?: (id: string, event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
/**
* Callback function called when the comment layout changes, such as the comment card expanding through "read more/less" actions, comment editing actions, etc.
*/
onLayoutChange?: () => void;
};
export type ICommentRichText = {
/**
* Indicate the comment mode.
* @default 'plaintext'
*/
mode?: 'plaintext' | 'richtext';
/**
* The rich text config will take effect when mode is `richtext`;
*/
richTextConfig?: IRichTextConfig;
};
export type ICommentCard = IComment & ICommentRichText & Omit<CardProps, 'onClick'>;
export declare const CommentCardContainer: React.FC<ICommentCard>;