mirror of https://github.com/msgbyte/tailchat
You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.9 KiB
TypeScript
59 lines
1.9 KiB
TypeScript
import { UserListItem } from '@/components/UserListItem';
|
|
import { getMessageTextDecorators } from '@/plugin/common';
|
|
import { stopPropagation } from '@/utils/dom-helper';
|
|
import React from 'react';
|
|
import { Mention, MentionsInput } from 'react-mentions';
|
|
import { t } from 'tailchat-shared';
|
|
import { useChatInputMentionsContext } from './context';
|
|
import './input.less';
|
|
|
|
interface ChatInputBoxInputProps
|
|
extends Omit<
|
|
React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>,
|
|
'value' | 'onChange'
|
|
> {
|
|
inputRef?: React.Ref<HTMLInputElement>;
|
|
value: string;
|
|
onChange: (message: string, mentions: string[]) => void;
|
|
}
|
|
export const ChatInputBoxInput: React.FC<ChatInputBoxInputProps> = React.memo(
|
|
(props) => {
|
|
const { users, placeholder, disabled } = useChatInputMentionsContext();
|
|
|
|
return (
|
|
<MentionsInput
|
|
inputRef={props.inputRef}
|
|
className="chatbox-mention-input"
|
|
placeholder={placeholder ?? t('输入一些什么')}
|
|
disabled={disabled}
|
|
singleLine={true}
|
|
maxLength={1000}
|
|
value={props.value}
|
|
onChange={(e, newValue, _, mentions) =>
|
|
props.onChange(
|
|
newValue,
|
|
mentions.map((m) => m.id)
|
|
)
|
|
}
|
|
onKeyDown={props.onKeyDown}
|
|
onPaste={props.onPaste}
|
|
onContextMenu={stopPropagation}
|
|
allowSuggestionsAboveCursor={true}
|
|
forceSuggestionsAboveCursor={true}
|
|
>
|
|
<Mention
|
|
trigger="@"
|
|
data={users}
|
|
displayTransform={(id, display) => `@${display}`}
|
|
appendSpaceOnAdd={true}
|
|
renderSuggestion={(suggestion) => (
|
|
<UserListItem userId={String(suggestion.id)} />
|
|
)}
|
|
markup={getMessageTextDecorators().mention('__id__', '__display__')}
|
|
/>
|
|
</MentionsInput>
|
|
);
|
|
}
|
|
);
|
|
ChatInputBoxInput.displayName = 'ChatInputBoxInput';
|