Restrict querySelectorAll to the upload form component

master
Thibaut Girka 6 years ago committed by ThibG
parent 1544ac4e27
commit c20b27a9f4
  1. 13
      app/javascript/flavours/glitch/features/composer/index.js
  2. 4
      app/javascript/flavours/glitch/features/composer/upload_form/index.js

@ -222,7 +222,7 @@ const handlers = {
// Submits the status. // Submits the status.
handleSubmit () { handleSubmit () {
const { textarea: { value } } = this; const { textarea: { value }, uploadForm } = this;
const { const {
onChangeText, onChangeText,
onSubmit, onSubmit,
@ -249,16 +249,23 @@ const handlers = {
// Submit unless there are media with missing descriptions // Submit unless there are media with missing descriptions
if (mediaDescriptionConfirmation && onMediaDescriptionConfirm && media && media.some(item => !item.get('description'))) { if (mediaDescriptionConfirmation && onMediaDescriptionConfirm && media && media.some(item => !item.get('description'))) {
const firstWithoutDescription = media.findIndex(item => !item.get('description')); const firstWithoutDescription = media.findIndex(item => !item.get('description'));
const inputs = document.querySelectorAll('.composer--upload_form--item input'); if (uploadForm) {
const inputs = uploadForm.querySelectorAll('.composer--upload_form--item input');
if (inputs.length == media.size && firstWithoutDescription !== -1) { if (inputs.length == media.size && firstWithoutDescription !== -1) {
inputs[firstWithoutDescription].focus(); inputs[firstWithoutDescription].focus();
} }
}
onMediaDescriptionConfirm(); onMediaDescriptionConfirm();
} else if (onSubmit) { } else if (onSubmit) {
onSubmit(); onSubmit();
} }
}, },
// Sets a reference to the upload form.
handleRefUploadForm (uploadFormComponent) {
this.uploadForm = uploadFormComponent;
},
// Sets a reference to the textarea. // Sets a reference to the textarea.
handleRefTextarea (textareaComponent) { handleRefTextarea (textareaComponent) {
if (textareaComponent) { if (textareaComponent) {
@ -365,6 +372,7 @@ class Composer extends React.Component {
handleSecondarySubmit, handleSecondarySubmit,
handleSelect, handleSelect,
handleSubmit, handleSubmit,
handleRefUploadForm,
handleRefTextarea, handleRefTextarea,
handleRefSpoilerText, handleRefSpoilerText,
} = this.handlers; } = this.handlers;
@ -455,6 +463,7 @@ class Composer extends React.Component {
onRemove={onUndoUpload} onRemove={onUndoUpload}
progress={progress} progress={progress}
uploading={isUploading} uploading={isUploading}
handleRef={handleRefUploadForm}
/> />
) : null} ) : null}
<ComposerOptions <ComposerOptions

@ -17,12 +17,13 @@ export default function ComposerUploadForm ({
onRemove, onRemove,
progress, progress,
uploading, uploading,
handleRef,
}) { }) {
const computedClass = classNames('composer--upload_form', { uploading }); const computedClass = classNames('composer--upload_form', { uploading });
// The result. // The result.
return ( return (
<div className={computedClass}> <div className={computedClass} ref={handleRef}>
{uploading ? <ComposerUploadFormProgress progress={progress} /> : null} {uploading ? <ComposerUploadFormProgress progress={progress} /> : null}
{media ? ( {media ? (
<div className='content'> <div className='content'>
@ -55,4 +56,5 @@ ComposerUploadForm.propTypes = {
onRemove: PropTypes.func.isRequired, onRemove: PropTypes.func.isRequired,
progress: PropTypes.number, progress: PropTypes.number,
uploading: PropTypes.bool, uploading: PropTypes.bool,
handleRef: PropTypes.func,
}; };

Loading…
Cancel
Save