@codeleap/web 3.16.2 → 3.17.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codeleap/web",
-  "version": "3.16.2",
+  "version": "3.17.0",
   "main": "src/index.ts",
   "repository": {
     "url": "https://github.com/codeleap-uk/internal-libs-monorepo.git",

package/src/components/CropPicker/index.tsx

@@ -6,7 +6,7 @@ import {
 import { CropPickerPresets } from './styles'
 import { CropPickerProps } from './types'
 import { useCropPicker } from './useCropPicker'
-import { Modal, Button, FileInput, FileInputRef } from '../components'
+import { Modal, Button, FileInput, FileInputRef, LoadingOverlay } from '../components'
 
 const ReactCrop: React.Component = require('react-image-crop').Component
 import 'react-image-crop/dist/ReactCrop.css'
@@ -35,6 +35,7 @@ export const _CropPicker = forwardRef<FileInputRef, CropPickerProps>(
       confirmButton = 'Confirm Crop',
       debugName,
       handle,
+      withLoading = false,
       ...fileInputProps
     } = allProps
 
@@ -47,6 +48,7 @@ export const _CropPicker = forwardRef<FileInputRef, CropPickerProps>(
       image,
       crop,
       setRelativeCrop,
+      isLoading,
       handleCropChange,
     } = handle || useCropPicker({ onFileSelect, ref, ...targetCrop })
 
@@ -98,6 +100,14 @@ export const _CropPicker = forwardRef<FileInputRef, CropPickerProps>(
               />
             </ReactCrop>
           )}
+          {
+            withLoading ? (
+              <LoadingOverlay
+                debugName='CropPicker'
+                visible={isLoading}
+              />
+            ) : null
+          }
         </Modal>
       </>
     )

package/src/components/CropPicker/types.ts

@@ -19,6 +19,7 @@ export type CropPickerProps = Partial<FileInputProps> &
     debugName: string
     handle?: ReturnType<typeof useCropPicker>
     ref: AnyRef<HTMLElement>
+    withLoading?: boolean
   }
 
 export type ImageReading = HTMLImageElement

package/src/components/CropPicker/useCropPicker.tsx

@@ -23,6 +23,7 @@ export function useCropPicker({
   const [image, setImage] = useState<ImageReading>(null)
   const [crop, setCrop] = useState<Crop>()
   const [relativeCrop, setRelativeCrop] = useState<Crop>()
+  const [isLoading, setIsLoading] = useState(false)
   const croppedPromise = usePromise<WebInputFile[]>({})
 
   const onCancel = () => croppedPromise.resolve([])
@@ -40,6 +41,7 @@ export function useCropPicker({
   }
 
   const onConfirmCrop = async () => {
+    setIsLoading(true)
     const [preview, croppedFile] = await cropImage(image, relativeCrop)
     onResolved([
       {
@@ -47,6 +49,7 @@ export function useCropPicker({
         preview,
       },
     ])
+    setIsLoading(false)
     setTimeout(() => cleanup())
   }
 
@@ -127,6 +130,7 @@ export function useCropPicker({
     setCrop,
     relativeCrop,
     setRelativeCrop,
+    isLoading,
     croppedPromise,
     handleCropChange,
   }