feat: Disabled rotate button when is processing

cozy · May 30, 2023 · c602868 · c602868
1 parent bcb75c7
commit c602868
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResult/ScanResultCard.jsx b/packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResult/ScanResultCard.jsx
@@ -25,6 +25,7 @@ const ScanResultCard = forwardRef(
   ) => {
     const { setFormData, formData } = useFormData()
     const [imgWrapperMinHeight, setImgWrapperMinHeight] = useState(0)
+    const [isImageRotating, setIsImageRotating] = useState(false)
     const { stepIndex } = currentStep
 
     const handleSelectedFile = () => {
@@ -42,10 +43,12 @@ const ScanResultCard = forwardRef(
     }
 
     const handleRotate = () => {
+      setIsImageRotating(true)
       setRotationImage(prev => prev - 90)
     }
 
     const handleImageLoaded = () => {
+      setIsImageRotating(false)
       // We don't want to recalculate the size on every rotation
       if (ref.current && imgWrapperMinHeight === 0) {
         const maxSize = Math.max(
@@ -83,6 +86,7 @@ const ScanResultCard = forwardRef(
           <ScanResultCardActions
             onRotate={handleRotate}
             onCancel={handleSelectedFile}
+            isImageRotating={isImageRotating}
           />
         </div>
       </Card>

diff --git a/packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResult/ScanResultCardActions.jsx b/packages/cozy-mespapiers-lib/src/components/ModelSteps/ScanResult/ScanResultCardActions.jsx
@@ -17,7 +17,7 @@ const useStyles = makeStyles(theme => ({
   }
 }))
 
-const ScanResultCardActions = ({ onRotate, onCancel }) => {
+const ScanResultCardActions = ({ onRotate, onCancel, isImageRotating }) => {
   const classes = useStyles()
   const { t } = useI18n()
 
@@ -37,6 +37,7 @@ const ScanResultCardActions = ({ onRotate, onCancel }) => {
         onClick={onRotate}
         aria-label={t('Acquisition.rotate')}
         title={t('Acquisition.rotate')}
+        disabled={isImageRotating}
       >
         <Icon icon="rotate-left" />
       </IconButton>
@@ -46,7 +47,8 @@ const ScanResultCardActions = ({ onRotate, onCancel }) => {
 
 ScanResultCardActions.propTypes = {
   onCancel: PropTypes.func,
-  onRotate: PropTypes.func
+  onRotate: PropTypes.func,
+  isImageRotating: PropTypes.bool
 }
 
 export default ScanResultCardActions