learningtribes-studio-frontend 1.4.1 → 1.4.2-alpha.0

package/src/components/EditImageModal/index.jsx

@@ -110,7 +110,8 @@ export default class EditImageModal extends React.Component {
         nextProps.clearAssetsStatus();
         newState.currentUploadErrorMessage = null;
         newState.isStatusAlertOpen = false;
-        newState.pageNumber = 2;
+        // Stay on page 1 - the form fields are now shown on the same page
+        newState.pageNumber = 1;
         break;
       }
       case assetActions.upload.UPLOAD_EXCEED_MAX_COUNT_ERROR: {
@@ -274,7 +275,9 @@ export default class EditImageModal extends React.Component {
     });
 
     if (isValidFormContent) {
-      this.imageFormRef.dispatchEvent(new CustomEvent('submitForm',
+      // Use the form ref if available, otherwise dispatch from modal wrapper
+      const targetElement = this.imageFormRef || this.modalWrapperRef;
+      targetElement.dispatchEvent(new CustomEvent('submitForm',
         {
           bubbles: true,
           detail: {
@@ -293,7 +296,9 @@ export default class EditImageModal extends React.Component {
 
       this.resetImageSelection();
     } else {
-      this.statusAlertRef.focus();
+      if (this.statusAlertRef) {
+        this.statusAlertRef.focus();
+      }
     }
   }
 
@@ -662,7 +667,7 @@ export default class EditImageModal extends React.Component {
           {this.getStatusAlert()}
         </div>
       </div>
-      <div className="row mb-5">
+      <div className="row mb-3">
         <div className="col">
           <WrappedAssetsDropZone
             maxFileCount={1}
@@ -673,38 +678,39 @@ export default class EditImageModal extends React.Component {
           />
         </div>
       </div>
-      <div className="row no-gutters">
-        <div className="col">
-          <WrappedMessage message={messages.editImageModalInsertHeader} tagName="h3" />
-        </div>
-      </div>
-      <div className="row">
-        <div className="col-6 order-2">
-          {(this.state.assetsPageType === pageTypes.NORMAL ||
-            this.state.assetsPageType === pageTypes.NO_RESULTS) && (
-            <WrappedAssetsSearch />
-          )}
-        </div>
-        <div className="col-6 order-1">
-          {this.state.assetsPageType === pageTypes.NORMAL && (
-            <div aria-hidden>
-              <WrappedAssetsResultsCount />
-            </div>
-          )}
-        </div>
-      </div>
       <div className="row">
         <div className="col">
           {this.getImageSelectionModalBodyAssetsList(this.state.assetsPageType)}
         </div>
       </div>
       {this.state.assetsPageType === pageTypes.NORMAL && (
-        <div className="row mt-3 no-gutters">
+        <div className="row mt-2 no-gutters">
           <div className="col">
             <WrappedPagination />
           </div>
         </div>
       )}
+      {this.isAssetSelected() && (
+        <div className="row mt-3">
+          <div className="col">
+            {/* Hidden image to load dimensions */}
+            {this.state.imageSource && (
+              <img
+                alt=""
+                src={this.getImageAssetSource()}
+                onLoad={this.onImageLoad}
+                onError={this.onImageError}
+                ref={this.setImageRef}
+                style={{ display: 'none' }}
+              />
+            )}
+            <form ref={this.setImageFormRef}>
+              {this.getImageDescriptionInput()}
+              {this.getImageDimensionsInput()}
+            </form>
+          </div>
+        </div>
+      )}
     </React.Fragment>
   );
 
@@ -731,7 +737,12 @@ export default class EditImageModal extends React.Component {
   getModalButtons = () => {
     let buttons;
     if (this.state.pageNumber === 1) {
-      buttons = this.getNextPageButton();
+      // Show Save button if asset is selected, otherwise show Next button
+      if (this.isAssetSelected()) {
+        buttons = this.getInsertImageButton();
+      } else {
+        buttons = this.getNextPageButton();
+      }
     } else if (this.state.pageNumber === 2) {
       buttons = this.getInsertImageButton();
     }