@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.
96 lines (95 loc) • 3.58 kB
TypeScript
import { BoxProps } from '@mui/material/Box';
import { CommentToolboxActionItem } from './plugins/ToolbarPlugin';
import { TagOption } from './plugins/TagsPlugin';
import { IBasicUser } from '../../models';
import { ICommentAttachment } from '../CommentCard';
export type ICommentMetaPlugin = {
boxRef?: React.MutableRefObject<HTMLDivElement | undefined>;
metadata?: Record<string, any>;
onMetadataChange?: (metadata: Record<string, any>) => void;
};
export type ICommentToolboxActions = ReadonlyArray<CommentToolboxActionItem> | ((state?: 'add' | 'edit', metadata?: Record<string, any>) => ReadonlyArray<CommentToolboxActionItem>);
export type IRichTextConfig = {
/**
* Configuration of mention plugin
*/
mention?: {
/**
* All users who can be mentioned
*/
allowedMentionUsers?: ReadonlyArray<IBasicUser>;
/**
* Callback of `share with another user` action from mention list menu
*/
onShare?: () => void;
};
/**
* Configuration of attachment plugin
*/
attachment?: {
/**
* The acceptable mine types for attachments.
* @default ['*']
*/
acceptableMimeTypes?: ReadonlyArray<string>;
/**
* The download callback of attachments viewer
*/
onDownload?: (attachment: ICommentAttachment) => Promise<void>;
};
/**
* Configuration of tag plugin
*/
tag?: {
/**
* Tags options
* @default [{ label: 'Decision', value: 'decision', color: 'warning' },{ label: 'Action', value: 'action', color: 'info' },{ label: 'Urgent', value: 'urgent', color: 'error' }]
*/
tagOptions?: ReadonlyArray<TagOption>;
};
/**
* Configuration of toolbox plugin
*/
toolbox?: {
/**
* Indicates the maximum number of icons displayed in the toolbox, more icons will be displayed if the number exceeds the limit
* @default 5
*/
max?: number;
/**
* In addition to the default mention, link, attachment, and tag, this allows you to extend more icons
*/
moreActions?: ICommentToolboxActions;
/**
* Indicates whether the toolbox is expanded by default
* @default false
*/
defaultExpanded?: boolean;
};
/**
* Configuration of custom plugin
*/
plugin?: {
InputMetaPlugin?: React.FunctionComponent<ICommentMetaPlugin>;
BlockMetaPlugin?: React.FunctionComponent<ICommentMetaPlugin>;
};
/**
* Validation callback before comment submitted
*/
onValidBeforeSubmit?: (comment: string, attachment?: ICommentAttachment[], tags?: string[], metadata?: Record<string, any>) => boolean;
};
export interface ICommentRichTextInput extends Omit<BoxProps, 'children'> {
initialComment?: string;
initialAttachments?: ReadonlyArray<ICommentAttachment>;
initialTags?: ReadonlyArray<string>;
initialMetadata?: Record<string, any>;
placeholder?: string;
autofocus?: boolean;
disabled?: boolean;
state?: 'add' | 'edit';
onSave?: (data: string, attachments?: ICommentAttachment[], tags?: string[], metadata?: Record<string, any>) => void;
onCancel?: () => void;
onCommentChange?: (data: string, attachments?: ICommentAttachment[], tags?: string[], metadata?: Record<string, any>) => void;
richTextConfig?: IRichTextConfig;
}
export declare const CommentRichTextInput: (props: ICommentRichTextInput) => import("react/jsx-runtime").JSX.Element;