Fix the premature execution of the 'onReady' callback

advanced-cropper · Jun 9, 2024 · e624797 · e624797
1 parent 6f4be6d
commit e624797
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/src/hooks/useAbstractCropper.ts b/src/hooks/useAbstractCropper.ts
@@ -25,6 +25,7 @@ export interface AbstractCropperHookProps<Settings extends AbstractCropperSettin
 	crossOrigin?: 'anonymous' | 'use-credentials' | boolean;
 	onReady?: (cropper: AbstractCropperRef<Settings>) => void;
 	onError?: (cropper: AbstractCropperRef<Settings>) => void;
+	onUpdate?: (cropper: AbstractCropperRef<Settings>) => void;
 	unloadTime?: number;
 	autoReconcileState?: boolean;
 	settings?: CropperInstanceSettingsProp<Settings>;
@@ -65,11 +66,6 @@ export function useAbstractCropper<Extension extends SettingsExtension = {}>(
 		checkOrientation,
 		unloadTime,
 		canvas,
-		onLoad() {
-			if (cropperRef.current) {
-				onReady?.(cropperRef.current);
-			}
-		},
 		onError() {
 			if (cropperRef.current) {
 				onError?.(cropperRef.current);
@@ -179,6 +175,12 @@ export function useAbstractCropper<Extension extends SettingsExtension = {}>(
 		resetCropper();
 	}, [cropperImage.getImage()]);
 
+	useUpdateEffect(() => {
+		if (cropperRef.current && currentImage) {
+			onReady?.(cropperRef.current);
+		}
+	}, [currentImage])
+
 	useUpdateEffect(() => {
 		if (cropperRef.current) {
 			onUpdate?.(cropperRef.current);

diff --git a/src/hooks/useCropperImage.ts b/src/hooks/useCropperImage.ts
@@ -1,5 +1,6 @@
 import { useEffect, useRef, useState } from 'react';
 import { CropperImage, isUndefined, promiseTimeout, loadImage } from 'advanced-cropper';
+import { useStateWithCallback } from "./useStateWithCallback";
 
 export interface CropperImageHookSettings {
 	src?: string | null;
@@ -15,9 +16,9 @@ export interface CropperImageHookSettings {
 
 export function useCropperImage(options: CropperImageHookSettings) {
 	const { src, onLoadingStart, onLoadingEnd, onError, onLoad, crossOrigin, checkOrientation, canvas, unloadTime } = options;
-	const [loading, setLoading] = useState(false);
-	const [loaded, setLoaded] = useState(false);
 	const [image, setImage] = useState<CropperImage | null>(null);
+	const [loading, setLoading] = useState(false);
+	const [loaded, setLoaded] = useStateWithCallback(false);
 
 	const currentSrc = useRef<string | null>(null);
 
@@ -43,7 +44,6 @@ export function useCropperImage(options: CropperImageHookSettings) {
 						const [image] = responses as [CropperImage];
 						if (currentSrc.current === src) {
 							setImage(image);
-							onLoad?.(image);
 						}
 					})
 					.catch(() => {
@@ -73,7 +73,9 @@ export function useCropperImage(options: CropperImageHookSettings) {
 
 	useEffect(() => {
 		if (image) {
-			setLoaded(true)
+			setLoaded(true, () => {
+				onLoad?.(image);
+			})
 		}
 	}, [image])