feat(review): limit 1 file per upload and disable textarea when uploading file

packages/component-manuscript/src/components/ReviewerReportForm.js

@@ -93,12 +93,16 @@ const ReviewerReportForm = ({
     <Row left>
       <Label>Report</Label>
       {!fileFetching.review ? (
-        <FilePicker
-          allowedFileExtensions={['pdf', 'doc', 'docx']}
-          onUpload={addFile}
-        >
-          <ActionText left={12}>Upload file</ActionText>
-        </FilePicker>
+        <Fragment>
+          {isEmpty(formValues.files) && (
+            <FilePicker
+              allowedFileExtensions={['pdf', 'doc', 'docx']}
+              onUpload={addFile}
+            >
+              <ActionText left={12}>Upload file</ActionText>
+            </FilePicker>
+          )}
+        </Fragment>
       ) : (
         <Spinner size={2} />
       )}
@@ -111,10 +115,12 @@ const ReviewerReportForm = ({
               {...input}
               hasError={input.validationStatus === 'error'}
               onChange={e => changeField('public', e.target.value)}
+              readOnly={fileFetching.review}
               rows={6}
             />
           )}
           name="public"
+          readOnly={fileFetching.review}
           validate={isEmpty(formValues.files) ? [required] : []}
         />
       </FullWidth>
@@ -153,10 +159,12 @@ const ReviewerReportForm = ({
                   {...input}
                   hasError={input.validationStatus === 'error'}
                   onChange={e => changeField('confidential', e.target.value)}
+                  readOnly={fileFetching.review}
                   rows={6}
                 />
               )}
               name="confidential"
+              readOnly={fileFetching.review}
               validate={[required]}
             />
           </FullWidth>
@@ -311,6 +319,10 @@ const Textarea = styled.textarea`
   font-family: ${th('fontWriting')};
   border-color: ${({ hasError }) =>
     hasError ? th('colorError') : th('colorPrimary')};
+  transition: all 300ms linear;
+  &:read-only {
+    background-color: ${th('colorBackgroundHue')};
+  }
 `
 
 const Spacing = styled.div`