Merge remote-tracking branch 'parent/main' into upstream-20240326

app/javascript/mastodon/features/compose/components/compose_form.jsx

@@ -26,7 +26,6 @@ import PrivacyDropdownContainer from '../containers/privacy_dropdown_container';
 import SearchabilityDropdownContainer from '../containers/searchability_dropdown_container';
 import SpoilerButtonContainer from '../containers/spoiler_button_container';
 import UploadButtonContainer from '../containers/upload_button_container';
-import UploadFormContainer from '../containers/upload_form_container';
 import WarningContainer from '../containers/warning_container';
 import { countableText } from '../util/counter';
 
@@ -35,6 +34,7 @@ import { EditIndicator } from './edit_indicator';
 import { NavigationBar } from './navigation_bar';
 import { PollForm } from "./poll_form";
 import { ReplyIndicator } from './reply_indicator';
+import { UploadForm } from './upload_form';
 
 const allowedAroundShortCode = '><\u0085\u0020\u00a0\u1680\u2000\u2001\u2002\u2003\u2004\u2005\u2006\u2007\u2008\u2009\u200a\u202f\u205f\u3000\u2028\u2029\u0009\u000a\u000b\u000c\u000d';
 
@@ -297,7 +297,7 @@ class ComposeForm extends ImmutablePureComponent {
             />
           </div>
 
-          <UploadFormContainer />
+          <UploadForm />
           <PollForm />
 
           <div className='compose-form__footer'>

app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.jsx

@@ -330,7 +330,7 @@ class EmojiPickerDropdown extends PureComponent {
   state = {
     active: false,
     loading: false,
-    bottom: true,
+    placement: 'bottom',
   };
 
   setRef = (c) => {
@@ -338,7 +338,6 @@ class EmojiPickerDropdown extends PureComponent {
   };
 
   onShowDropdown = () => {
-    this.updateDropdownPosition();
     this.setState({ active: true });
 
     if (!EmojiPicker) {
@@ -359,23 +358,6 @@ class EmojiPickerDropdown extends PureComponent {
     this.setState({ active: false });
   };
 
-  updateDropdownPosition = () => {
-    let bottom = true;
-
-    if (this.target) {
-      const height = window.innerHeight;
-      const rect = this.target.getBoundingClientRect();
-
-      if (height && rect) {
-        bottom = height / 2 > rect.top;
-      }
-    }
-
-    if (this.state.bottom !== bottom) {
-      this.setState({ bottom });
-    }
-  };
-
   onToggle = (e) => {
     if (!this.state.loading && (!e.key || e.key === 'Enter')) {
       if (this.state.active) {
@@ -400,10 +382,14 @@ class EmojiPickerDropdown extends PureComponent {
     return this.target;
   };
 
+  handleOverlayEnter = (state) => {
+    this.setState({ placement: state.placement });
+  };
+
   render () {
     const { intl, onPickEmoji, onSkinTone, skinTone, frequentlyUsedEmojis } = this.props;
     const title = intl.formatMessage(messages.emoji);
-    const { active, loading, bottom } = this.state;
+    const { active, loading, placement } = this.state;
 
     return (
       <div className='emoji-picker-dropdown' onKeyDown={this.handleKeyDown} ref={this.setTargetRef}>
@@ -416,7 +402,7 @@ class EmojiPickerDropdown extends PureComponent {
           inverted
         />
 
-        <Overlay show={active} placement={ bottom ? 'bottom' : 'top' } target={this.findTarget} popperConfig={{ strategy: 'fixed' }}>
+        <Overlay show={active} placement={placement} flip target={this.findTarget} popperConfig={{ strategy: 'fixed', onFirstUpdate: this.handleOverlayEnter }}>
           {({ props, placement })=> (
             <div {...props} style={{ ...props.style }}>
               <div className={`dropdown-animation ${placement}`}>

app/javascript/mastodon/features/compose/components/upload.jsx

@@ -1,77 +1,81 @@
 import PropTypes from 'prop-types';
+import { useCallback } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
 import classNames from 'classnames';
 
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
+import { useDispatch, useSelector } from 'react-redux';
 
 import spring from 'react-motion/lib/spring';
 
 import CloseIcon from '@/material-icons/400-20px/close.svg?react';
 import EditIcon from '@/material-icons/400-24px/edit.svg?react';
 import WarningIcon from '@/material-icons/400-24px/warning.svg?react';
+import { undoUploadCompose, initMediaEditModal } from 'mastodon/actions/compose';
 import { Blurhash } from 'mastodon/components/blurhash';
 import { Icon }  from 'mastodon/components/icon';
+import Motion from 'mastodon/features/ui/util/optional_motion';
 
-import Motion from '../../ui/util/optional_motion';
+export const Upload = ({ id, onDragStart, onDragEnter, onDragEnd }) => {
+  const dispatch = useDispatch();
+  const media = useSelector(state => state.getIn(['compose', 'media_attachments']).find(item => item.get('id') === id));
+  const sensitive = useSelector(state => state.getIn(['compose', 'spoiler']));
 
-export default class Upload extends ImmutablePureComponent {
+  const handleUndoClick = useCallback(() => {
+    dispatch(undoUploadCompose(id));
+  }, [dispatch, id]);
 
-  static propTypes = {
-    media: ImmutablePropTypes.map.isRequired,
-    sensitive: PropTypes.bool,
-    onUndo: PropTypes.func.isRequired,
-    onOpenFocalPoint: PropTypes.func.isRequired,
-  };
+  const handleFocalPointClick = useCallback(() => {
+    dispatch(initMediaEditModal(id));
+  }, [dispatch, id]);
 
-  handleUndoClick = e => {
-    e.stopPropagation();
-    this.props.onUndo(this.props.media.get('id'));
-  };
+  const handleDragStart = useCallback(() => {
+    onDragStart(id);
+  }, [onDragStart, id]);
 
-  handleFocalPointClick = e => {
-    e.stopPropagation();
-    this.props.onOpenFocalPoint(this.props.media.get('id'));
-  };
+  const handleDragEnter = useCallback(() => {
+    onDragEnter(id);
+  }, [onDragEnter, id]);
 
-  render () {
-    const { media, sensitive } = this.props;
-
-    if (!media) {
-      return null;
-    }
-
-    const focusX = media.getIn(['meta', 'focus', 'x']);
-    const focusY = media.getIn(['meta', 'focus', 'y']);
-    const x = ((focusX /  2) + .5) * 100;
-    const y = ((focusY / -2) + .5) * 100;
-    const missingDescription = (media.get('description') || '').length === 0;
-
-    return (
-      <div className='compose-form__upload'>
-        <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
-          {({ scale }) => (
-            <div className='compose-form__upload__thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: !sensitive ? `url(${media.get('preview_url')})` : null, backgroundPosition: `${x}% ${y}%` }}>
-              {sensitive && <Blurhash
-                hash={media.get('blurhash')}
-                className='compose-form__upload__preview'
-              />}
-
-              <div className='compose-form__upload__actions'>
-                <button type='button' className='icon-button compose-form__upload__delete' onClick={this.handleUndoClick}><Icon icon={CloseIcon} /></button>
-                <button type='button' className='icon-button' onClick={this.handleFocalPointClick}><Icon icon={EditIcon} /> <FormattedMessage id='upload_form.edit' defaultMessage='Edit' /></button>
-              </div>
-
-              <div className='compose-form__upload__warning'>
-                <button type='button' className={classNames('icon-button', { active: missingDescription })} onClick={this.handleFocalPointClick}>{missingDescription && <Icon icon={WarningIcon} />} ALT</button>
-              </div>
-            </div>
-          )}
-        </Motion>
-      </div>
-    );
+  if (!media) {
+    return null;
   }
 
-}
+  const focusX = media.getIn(['meta', 'focus', 'x']);
+  const focusY = media.getIn(['meta', 'focus', 'y']);
+  const x = ((focusX /  2) + .5) * 100;
+  const y = ((focusY / -2) + .5) * 100;
+  const missingDescription = (media.get('description') || '').length === 0;
+
+  return (
+    <div className='compose-form__upload' draggable onDragStart={handleDragStart} onDragEnter={handleDragEnter} onDragEnd={onDragEnd}>
+      <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
+        {({ scale }) => (
+          <div className='compose-form__upload__thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: !sensitive ? `url(${media.get('preview_url')})` : null, backgroundPosition: `${x}% ${y}%` }}>
+            {sensitive && <Blurhash
+              hash={media.get('blurhash')}
+              className='compose-form__upload__preview'
+            />}
+
+            <div className='compose-form__upload__actions'>
+              <button type='button' className='icon-button compose-form__upload__delete' onClick={handleUndoClick}><Icon icon={CloseIcon} /></button>
+              <button type='button' className='icon-button' onClick={handleFocalPointClick}><Icon icon={EditIcon} /> <FormattedMessage id='upload_form.edit' defaultMessage='Edit' /></button>
+            </div>
+
+            <div className='compose-form__upload__warning'>
+              <button type='button' className={classNames('icon-button', { active: missingDescription })} onClick={handleFocalPointClick}>{missingDescription && <Icon icon={WarningIcon} />} ALT</button>
+            </div>
+          </div>
+        )}
+      </Motion>
+    </div>
+  );
+};
+
+Upload.propTypes = {
+  id: PropTypes.string,
+  onDragEnter: PropTypes.func,
+  onDragStart: PropTypes.func,
+  onDragEnd: PropTypes.func,
+};

app/javascript/mastodon/features/compose/components/upload_form.jsx

@@ -1,31 +1,53 @@
-import ImmutablePropTypes from 'react-immutable-proptypes';
-import ImmutablePureComponent from 'react-immutable-pure-component';
+import { useRef, useCallback } from 'react';
 
-import UploadContainer from '../containers/upload_container';
-import UploadProgressContainer from '../containers/upload_progress_container';
+import { useSelector, useDispatch } from 'react-redux';
 
-export default class UploadForm extends ImmutablePureComponent {
+import { changeMediaOrder } from 'mastodon/actions/compose';
 
-  static propTypes = {
-    mediaIds: ImmutablePropTypes.list.isRequired,
-  };
+import { Upload } from './upload';
+import { UploadProgress } from './upload_progress';
 
-  render () {
-    const { mediaIds } = this.props;
+export const UploadForm = () => {
+  const dispatch = useDispatch();
+  const mediaIds = useSelector(state => state.getIn(['compose', 'media_attachments']).map(item => item.get('id')));
+  const active = useSelector(state => state.getIn(['compose', 'is_uploading']));
+  const progress = useSelector(state => state.getIn(['compose', 'progress']));
+  const isProcessing = useSelector(state => state.getIn(['compose', 'is_processing']));
 
-    return (
-      <>
-        <UploadProgressContainer />
+  const dragItem = useRef();
+  const dragOverItem = useRef();
 
-        {mediaIds.size > 0 && (
-          <div className='compose-form__uploads'>
-            {mediaIds.map(id => (
-              <UploadContainer id={id} key={id} />
-            ))}
-          </div>
-        )}
-      </>
-    );
-  }
+  const handleDragStart = useCallback(id => {
+    dragItem.current = id;
+  }, [dragItem]);
 
-}
+  const handleDragEnter = useCallback(id => {
+    dragOverItem.current = id;
+  }, [dragOverItem]);
+
+  const handleDragEnd = useCallback(() => {
+    dispatch(changeMediaOrder(dragItem.current, dragOverItem.current));
+    dragItem.current = null;
+    dragOverItem.current = null;
+  }, [dispatch, dragItem, dragOverItem]);
+
+  return (
+    <>
+      <UploadProgress active={active} progress={progress} isProcessing={isProcessing} />
+
+      {mediaIds.size > 0 && (
+        <div className='compose-form__uploads'>
+          {mediaIds.map(id => (
+            <Upload
+              key={id}
+              id={id}
+              onDragStart={handleDragStart}
+              onDragEnter={handleDragEnter}
+              onDragEnd={handleDragEnd}
+            />
+          ))}
+        </div>
+      )}
+    </>
+  );
+};

app/javascript/mastodon/features/compose/components/upload_progress.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
 
 import { FormattedMessage } from 'react-intl';
 
@@ -10,46 +9,40 @@ import { Icon }  from 'mastodon/components/icon';
 
 import Motion from '../../ui/util/optional_motion';
 
-export default class UploadProgress extends PureComponent {
-
-  static propTypes = {
-    active: PropTypes.bool,
-    progress: PropTypes.number,
-    isProcessing: PropTypes.bool,
-  };
-
-  render () {
-    const { active, progress, isProcessing } = this.props;
-
-    if (!active) {
-      return null;
-    }
-
-    let message;
-
-    if (isProcessing) {
-      message = <FormattedMessage id='upload_progress.processing' defaultMessage='Processing…' />;
-    } else {
-      message = <FormattedMessage id='upload_progress.label' defaultMessage='Uploading…' />;
-    }
-
-    return (
-      <div className='upload-progress'>
-        <Icon id='upload' icon={UploadFileIcon} />
-
-        <div className='upload-progress__message'>
-          {message}
-
-          <div className='upload-progress__backdrop'>
-            <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
-              {({ width }) =>
-                <div className='upload-progress__tracker' style={{ width: `${width}%` }} />
-              }
-            </Motion>
-          </div>
-        </div>
-      </div>
-    );
+export const UploadProgress = ({ active, progress, isProcessing }) => {
+  if (!active) {
+    return null;
   }
 
-}
+  let message;
+
+  if (isProcessing) {
+    message = <FormattedMessage id='upload_progress.processing' defaultMessage='Processing…' />;
+  } else {
+    message = <FormattedMessage id='upload_progress.label' defaultMessage='Uploading…' />;
+  }
+
+  return (
+    <div className='upload-progress'>
+      <Icon id='upload' icon={UploadFileIcon} />
+
+      <div className='upload-progress__message'>
+        {message}
+
+        <div className='upload-progress__backdrop'>
+          <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
+            {({ width }) =>
+              <div className='upload-progress__tracker' style={{ width: `${width}%` }} />
+            }
+          </Motion>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+UploadProgress.propTypes = {
+  active: PropTypes.bool,
+  progress: PropTypes.number,
+  isProcessing: PropTypes.bool,
+};