ConversationView: Move attachments processing into redux
This commit is contained in:
parent
ff6750e4fd
commit
452e0b7b31
25 changed files with 544 additions and 763 deletions
|
@ -4,18 +4,82 @@
|
|||
import React from 'react';
|
||||
|
||||
export type PropsType = {
|
||||
conversationId: string;
|
||||
processAttachments: (options: {
|
||||
conversationId: string;
|
||||
files: ReadonlyArray<File>;
|
||||
}) => void;
|
||||
renderCompositionArea: () => JSX.Element;
|
||||
renderConversationHeader: () => JSX.Element;
|
||||
renderTimeline: () => JSX.Element;
|
||||
};
|
||||
|
||||
export function ConversationView({
|
||||
conversationId,
|
||||
processAttachments,
|
||||
renderCompositionArea,
|
||||
renderConversationHeader,
|
||||
renderTimeline,
|
||||
}: PropsType): JSX.Element {
|
||||
const onDrop = React.useCallback(
|
||||
(event: React.DragEvent<HTMLDivElement>) => {
|
||||
if (!event.dataTransfer) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.dataTransfer.types[0] !== 'Files') {
|
||||
return;
|
||||
}
|
||||
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
const { files } = event.dataTransfer;
|
||||
processAttachments({
|
||||
conversationId,
|
||||
files: Array.from(files),
|
||||
});
|
||||
},
|
||||
[conversationId, processAttachments]
|
||||
);
|
||||
|
||||
const onPaste = React.useCallback(
|
||||
(event: React.ClipboardEvent<HTMLDivElement>) => {
|
||||
if (!event.clipboardData) {
|
||||
return;
|
||||
}
|
||||
const { items } = event.clipboardData;
|
||||
|
||||
const anyImages = [...items].some(
|
||||
item => item.type.split('/')[0] === 'image'
|
||||
);
|
||||
if (!anyImages) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.stopPropagation();
|
||||
event.preventDefault();
|
||||
|
||||
const files: Array<File> = [];
|
||||
for (let i = 0; i < items.length; i += 1) {
|
||||
if (items[i].type.split('/')[0] === 'image') {
|
||||
const file = items[i].getAsFile();
|
||||
if (file) {
|
||||
files.push(file);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
processAttachments({
|
||||
conversationId,
|
||||
files,
|
||||
});
|
||||
},
|
||||
[conversationId, processAttachments]
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="ConversationView">
|
||||
<div className="ConversationView" onDrop={onDrop} onPaste={onPaste}>
|
||||
<div className="ConversationView__header">
|
||||
{renderConversationHeader()}
|
||||
</div>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue