feat(mespapiers): Improve UX on ScanResult

We make sure that the height of the component is equal to the tallest side of the image.
cozy · May 30, 2023 · 75ded76 · 75ded76
1 parent efe075f
commit 75ded76
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 40 deletions.
diff --git a/packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResultCard.jsx b/packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResultCard.jsx
@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types'
-import React, { useState, useRef } from 'react'
+import React, { useState, forwardRef } from 'react'
 
 import Card from 'cozy-ui/transpiled/react/Card'
 import Icon from 'cozy-ui/transpiled/react/Icon'
@@ -12,11 +12,12 @@ import { useFormData } from '../Hooks/useFormData'
 
 const isImageType = file => file.type.match(/image\/.*/)
 
-const ScanResultCard = ({ currentFile, setCurrentFile, currentStep }) => {
-  const imageRef = useRef(null)
-  const { setFormData, formData } = useFormData()
-  const [rotationImage, setRotationImage] = useState(0)
-  const { stepIndex } = currentStep
+const ScanResultCard = forwardRef(
+  ({ currentFile, setCurrentFile, currentStep }, ref) => {
+    const { setFormData, formData } = useFormData()
+    const [rotationImage, setRotationImage] = useState(0)
+    const [imgWrapperMinHeight, setImgWrapperMinHeight] = useState(0)
+    const { stepIndex } = currentStep
 
     const handleSelectedFile = () => {
       const newData = formData.data.filter(
@@ -26,42 +27,61 @@ const ScanResultCard = ({ currentFile, setCurrentFile, currentStep }) => {
         getLastFormDataFile({ formData: { data: newData }, stepIndex })
       )
 
-    setFormData(prev => ({
-      ...prev,
-      data: newData
-    }))
-  }
+      setFormData(prev => ({
+        ...prev,
+        data: newData
+      }))
+    }
 
-  const handleRotate = () => {
-    setRotationImage(prev => prev - 90)
-  }
+    const handleRotate = () => {
+      setRotationImage(prev => prev - 90)
+    }
+
+    const handleImageLoaded = () => {
+      // We don't want to recalculate the size on every rotation
+      if (ref.current && imgWrapperMinHeight === 0) {
+        const maxSize = Math.max(
+          ref.current.offsetWidth,
+          ref.current.offsetHeight
+        )
+        setImgWrapperMinHeight(maxSize)
+      }
+    }
 
-  return (
-    <Card className="u-ta-center u-p-1">
-      <div className="u-mah-5">
-        {isImageType(currentFile) ? (
-          <RotateImage
-            image={URL.createObjectURL(currentFile)}
-            rotation={rotationImage}
-            a11n={{ 'aria-hidden': true }}
-            ref={imageRef}
+    return (
+      <Card className="u-ta-center u-p-1 u-flex u-flex-column u-flex-justify-between">
+        <div
+          className="u-flex u-flex-justify-center u-flex-items-center u-h-100"
+          style={{ minHeight: imgWrapperMinHeight }}
+        >
+          <div className="u-mah-5">
+            {isImageType(currentFile) ? (
+              <RotateImage
+                image={URL.createObjectURL(currentFile)}
+                onLoaded={handleImageLoaded}
+                rotation={rotationImage}
+                a11n={{ 'aria-hidden': true }}
+                ref={ref}
+              />
+            ) : (
+              <>
+                <Icon icon="file-type-pdf" size={80} aria-hidden="true" />
+                <Typography>{currentFile.name}</Typography>
+              </>
+            )}
+          </div>
+        </div>
+        <div style={{ display: 'flex', gap: '1rem', marginTop: '1rem' }}>
+          <ScanResultCardActions
+            onRotate={handleRotate}
+            onCancel={handleSelectedFile}
           />
-        ) : (
-          <>
-            <Icon icon="file-type-pdf" size={80} aria-hidden="true" />
-            <Typography>{currentFile.name}</Typography>
-          </>
-        )}
-      </div>
-      <div style={{ display: 'flex', gap: '1rem', marginTop: '1rem' }}>
-        <ScanResultCardActions
-          onRotate={handleRotate}
-          onCancel={handleSelectedFile}
-        />
-      </div>
-    </Card>
-  )
-}
+        </div>
+      </Card>
+    )
+  }
+)
+ScanResultCard.displayName = 'ScanResultCard'
 
 ScanResultCard.propTypes = {
   currentFile: PropTypes.object.isRequired,

diff --git a/packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResultWrapper.jsx b/packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResultWrapper.jsx
@@ -1,6 +1,6 @@
 import cx from 'classnames'
 import PropTypes from 'prop-types'
-import React, { memo } from 'react'
+import React, { useRef, memo } from 'react'
 
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import useBreakpoints from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
@@ -15,6 +15,7 @@ import { KEYS } from '../../constants/const'
 import { useStepperDialog } from '../Hooks/useStepperDialog'
 
 const ScanResultWrapper = ({ currentFile, setCurrentFile, currentStep }) => {
+  const imageRef = useRef(null)
   const { page = 'default', illustration } = currentStep
   const { t } = useI18n()
   const { isMobile } = useBreakpoints()
@@ -46,6 +47,7 @@ const ScanResultWrapper = ({ currentFile, setCurrentFile, currentStep }) => {
           currentFile={currentFile}
           setCurrentFile={setCurrentFile}
           currentStep={currentStep}
+          ref={imageRef}
         />
       </div>
       <ScanResultActions