Add ability to reorder uploaded media before posting in web UI

Based on Gargron's changes in Mastodon: https://github.com/mastodon/mastodon/pull/28456

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak
2024-04-05 14:00:07 +02:00
parent 35620a7330
commit 3a27967846
5 changed files with 84 additions and 7 deletions

View File

@ -61,7 +61,7 @@ const messages = defineMessages({
descriptionMissingTitle: { id: 'upload_form.description_missing.title', defaultMessage: 'This attachment doesn\'t have a description' },
});
interface IUpload {
interface IUpload extends Pick<React.HTMLAttributes<HTMLDivElement>, 'onDragStart' | 'onDragEnter' | 'onDragEnd'> {
media: Attachment;
onSubmit?(): void;
onDelete?(): void;
@ -75,6 +75,9 @@ const Upload: React.FC<IUpload> = ({
onSubmit,
onDelete,
onDescriptionChange,
onDragStart,
onDragEnter,
onDragEnd,
descriptionLimit,
withPreview = true,
}) => {
@ -151,7 +154,18 @@ const Upload: React.FC<IUpload> = ({
);
return (
<div className='compose-form__upload' tabIndex={0} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} onClick={handleClick} role='button'>
<div
className='compose-form__upload'
tabIndex={0}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
onClick={handleClick}
role='button'
draggable
onDragStart={onDragStart}
onDragEnter={onDragEnter}
onDragEnd={onDragEnd}
>
<Blurhash hash={media.blurhash} className='media-gallery__preview' />
<Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
{({ scale }) => (