Merge pull request #2290 from SUI-Components/feat/image-editor-preview-before-save

feat(components/molecule/imageEditor): Add a preview mode to molecule/imageEditor to optimize image

Author: oegea

components/molecule/imageEditor/package.json

@@ -19,6 +19,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "@s-ui/js": "2",
     "@s-ui/react-atom-slider": "1",
     "react-easy-crop": "3.4.0"
   }

components/molecule/imageEditor/src/config.js

@@ -1,3 +1,4 @@
 export const baseClass = 'sui-MoleculeImageEditor'
 export const DEFAULT_ASPECT = 4 / 3
 export const noop = () => {}
+export const DEBOUNCING_TIME = 100

components/molecule/imageEditor/src/index.js

@@ -3,10 +3,11 @@ import Cropper from 'react-easy-crop'
 
 import PropTypes from 'prop-types'
 
+import {debounce} from '@s-ui/js/lib/function/debounce.js'
 import AtomSlider from '@s-ui/react-atom-slider'
 
 import getCroppedImg from './utils/cropImage.js'
-import {baseClass, DEFAULT_ASPECT, noop} from './config.js'
+import {baseClass, DEBOUNCING_TIME, DEFAULT_ASPECT, noop} from './config.js'
 
 const MoleculeImageEditor = ({
   aspect = DEFAULT_ASPECT,
@@ -18,24 +19,30 @@ const MoleculeImageEditor = ({
   rotateLabelIcon,
   rotateLabelText
 }) => {
-  const [crop, setCrop] = useState({x: 0, y: 0})
-  const [rotation, setRotation] = useState(0)
-  const [zoom, setZoom] = useState(0)
+  const [crop, cropSetter] = useState({x: 0, y: 0})
+  const [rotation, rotationSetter] = useState(0)
+  const [zoom, zoomSetter] = useState(0)
+
+  const setCrop = debounce(cropSetter, DEBOUNCING_TIME)
+  const setRotation = debounce(rotationSetter, DEBOUNCING_TIME)
+  const setZoom = debounce(zoomSetter, DEBOUNCING_TIME)
 
   const getRotationDegrees = rotation => (rotation * 360) / 100
 
+  const cropCompleteHandler = async (croppedArea, croppedAreaPixels) => {
+    const rotationDegrees = getRotationDegrees(rotation)
+    onCropping(true)
+    const [croppedImageUrl, croppedImageBlobObject] = await getCroppedImg(
+      image,
+      croppedAreaPixels,
+      rotationDegrees
+    )
+    onChange(croppedImageUrl, croppedImageBlobObject)
+    onCropping(false)
+  }
+
   const onCropComplete = useCallback(
-    async (croppedArea, croppedAreaPixels) => {
-      const rotationDegrees = getRotationDegrees(rotation)
-      onCropping(true)
-      const [croppedImageUrl, croppedImageBlobObject] = await getCroppedImg(
-        image,
-        croppedAreaPixels,
-        rotationDegrees
-      )
-      onChange(croppedImageUrl, croppedImageBlobObject)
-      onCropping(false)
-    },
+    debounce(cropCompleteHandler, DEBOUNCING_TIME),
     [rotation, onCropping, image, onChange]
   )
 
@@ -67,7 +74,7 @@ const MoleculeImageEditor = ({
         )}
         <AtomSlider
           onChange={(event, {value}) => setZoom(value)}
-          value={zoom}
+          defaultValue={zoom}
           hideMarks
         />
       </div>
@@ -88,7 +95,7 @@ const MoleculeImageEditor = ({
         )}
         <AtomSlider
           onChange={(event, {value}) => setRotation(value)}
-          value={rotation}
+          defaultValue={rotation}
           hideMarks
         />
       </div>