Multi-select forwarding and deleting
This commit is contained in:
parent
d986356eea
commit
1d549a9991
82 changed files with 2607 additions and 991 deletions
|
@ -37,17 +37,17 @@ export type PropsData = {
|
|||
canReact: boolean;
|
||||
canReply: boolean;
|
||||
selectedReaction?: string;
|
||||
isSelected?: boolean;
|
||||
isTargeted?: boolean;
|
||||
} & Omit<MessagePropsData, 'renderingContext' | 'menu'>;
|
||||
|
||||
export type PropsActions = {
|
||||
deleteMessage: (options: {
|
||||
deleteMessages: (options: {
|
||||
conversationId: string;
|
||||
messageId: string;
|
||||
messageIds: ReadonlyArray<string>;
|
||||
}) => void;
|
||||
deleteMessageForEveryone: (id: string) => void;
|
||||
pushPanelForConversation: PushPanelForConversationActionType;
|
||||
toggleForwardMessageModal: (id: string) => void;
|
||||
toggleForwardMessagesModal: (id: Array<string>) => void;
|
||||
reactToMessage: (
|
||||
id: string,
|
||||
{ emoji, remove }: { emoji: string; remove: boolean }
|
||||
|
@ -55,7 +55,13 @@ export type PropsActions = {
|
|||
retryMessageSend: (id: string) => void;
|
||||
retryDeleteForEveryone: (id: string) => void;
|
||||
setQuoteByMessageId: (conversationId: string, messageId: string) => void;
|
||||
} & MessagePropsActions;
|
||||
toggleSelectMessage: (
|
||||
conversationId: string,
|
||||
messageId: string,
|
||||
shift: boolean,
|
||||
selected: boolean
|
||||
) => void;
|
||||
} & Omit<MessagePropsActions, 'onToggleSelect' | 'onReplyToMessage'>;
|
||||
|
||||
export type Props = PropsData &
|
||||
PropsActions &
|
||||
|
@ -87,14 +93,14 @@ export function TimelineMessage(props: Props): JSX.Element {
|
|||
containerElementRef,
|
||||
containerWidthBreakpoint,
|
||||
conversationId,
|
||||
deleteMessage,
|
||||
deleteMessages,
|
||||
deleteMessageForEveryone,
|
||||
deletedForEveryone,
|
||||
direction,
|
||||
giftBadge,
|
||||
i18n,
|
||||
id,
|
||||
isSelected,
|
||||
isTargeted,
|
||||
isSticker,
|
||||
isTapToView,
|
||||
kickOffAttachmentDownload,
|
||||
|
@ -110,7 +116,8 @@ export function TimelineMessage(props: Props): JSX.Element {
|
|||
setQuoteByMessageId,
|
||||
text,
|
||||
timestamp,
|
||||
toggleForwardMessageModal,
|
||||
toggleForwardMessagesModal,
|
||||
toggleSelectMessage,
|
||||
} = props;
|
||||
|
||||
const [reactionPickerRoot, setReactionPickerRoot] = useState<
|
||||
|
@ -260,14 +267,14 @@ export function TimelineMessage(props: Props): JSX.Element {
|
|||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (isSelected) {
|
||||
if (isTargeted) {
|
||||
document.addEventListener('keydown', toggleReactionPickerKeyboard);
|
||||
}
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', toggleReactionPickerKeyboard);
|
||||
};
|
||||
}, [isSelected, toggleReactionPickerKeyboard]);
|
||||
}, [isTargeted, toggleReactionPickerKeyboard]);
|
||||
|
||||
const renderMenu = useCallback(() => {
|
||||
return (
|
||||
|
@ -357,9 +364,9 @@ export function TimelineMessage(props: Props): JSX.Element {
|
|||
actions={[
|
||||
{
|
||||
action: () =>
|
||||
deleteMessage({
|
||||
deleteMessages({
|
||||
conversationId,
|
||||
messageId: id,
|
||||
messageIds: [id],
|
||||
}),
|
||||
style: 'negative',
|
||||
text: i18n('delete'),
|
||||
|
@ -372,24 +379,17 @@ export function TimelineMessage(props: Props): JSX.Element {
|
|||
{i18n('deleteWarning')}
|
||||
</ConfirmationDialog>
|
||||
)}
|
||||
<div
|
||||
onDoubleClick={ev => {
|
||||
if (!handleReplyToMessage) {
|
||||
return;
|
||||
}
|
||||
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
handleReplyToMessage();
|
||||
<Message
|
||||
{...props}
|
||||
renderingContext="conversation/TimelineItem"
|
||||
onContextMenu={handleContextMenu}
|
||||
renderMenu={renderMenu}
|
||||
onToggleSelect={(selected, shift) => {
|
||||
toggleSelectMessage(conversationId, id, shift, selected);
|
||||
}}
|
||||
>
|
||||
<Message
|
||||
{...props}
|
||||
renderingContext="conversation/TimelineItem"
|
||||
onContextMenu={handleContextMenu}
|
||||
renderMenu={renderMenu}
|
||||
/>
|
||||
</div>
|
||||
onReplyToMessage={handleReplyToMessage}
|
||||
/>
|
||||
|
||||
<MessageContextMenu
|
||||
i18n={i18n}
|
||||
|
@ -404,7 +404,10 @@ export function TimelineMessage(props: Props): JSX.Element {
|
|||
? () => retryDeleteForEveryone(id)
|
||||
: undefined
|
||||
}
|
||||
onForward={canForward ? () => toggleForwardMessageModal(id) : undefined}
|
||||
onSelect={() => toggleSelectMessage(conversationId, id, false, true)}
|
||||
onForward={
|
||||
canForward ? () => toggleForwardMessagesModal([id]) : undefined
|
||||
}
|
||||
onDeleteForMe={() => setHasDeleteConfirmation(true)}
|
||||
onDeleteForEveryone={
|
||||
canDeleteForEveryone ? () => setHasDOEConfirmation(true) : undefined
|
||||
|
@ -589,6 +592,7 @@ type MessageContextProps = {
|
|||
onDeleteForMe: () => void;
|
||||
onDeleteForEveryone: (() => void) | undefined;
|
||||
onMoreInfo: () => void;
|
||||
onSelect: () => void;
|
||||
};
|
||||
|
||||
const MessageContextMenu = ({
|
||||
|
@ -599,6 +603,7 @@ const MessageContextMenu = ({
|
|||
onReplyToMessage,
|
||||
onReact,
|
||||
onMoreInfo,
|
||||
onSelect,
|
||||
onRetryMessageSend,
|
||||
onRetryDeleteForEveryone,
|
||||
onForward,
|
||||
|
@ -668,6 +673,17 @@ const MessageContextMenu = ({
|
|||
>
|
||||
{i18n('moreInfo')}
|
||||
</MenuItem>
|
||||
<MenuItem
|
||||
attributes={{
|
||||
className:
|
||||
'module-message__context--icon module-message__context__select',
|
||||
}}
|
||||
onClick={() => {
|
||||
onSelect();
|
||||
}}
|
||||
>
|
||||
{i18n('icu:MessageContextMenu__select')}
|
||||
</MenuItem>
|
||||
{onRetryMessageSend && (
|
||||
<MenuItem
|
||||
attributes={{
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue