yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-22 14:59:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

PreviewBox: Fix cropping flow for local assets

Browse Source
This commit is contained in:
Gustav Hansen 2022-07-06 12:39:20 +02:00
parent 92558c8238
commit f94df6ff12
1 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
packages/core/upload/admin/src/components/EditAssetDialog/PreviewBox/index.js
View File

@ -42,7 +42,7 @@ export const PreviewBox = ({
const { trackUsage } = useTracking(); const { trackUsage } = useTracking();
const previewRef = useRef(null); const previewRef = useRef(null);
const [isCropImageReady, setIsCropImageReady] = useState(false); const [isCropImageReady, setIsCropImageReady] = useState(false);
const [hasCropIntent, setHasCropIntent] = useState(false); const [hasCropIntent, setHasCropIntent] = useState(null);
const [assetUrl, setAssetUrl] = useState(createAssetUrl(asset, false)); const [assetUrl, setAssetUrl] = useState(createAssetUrl(asset, false));
const [thumbnailUrl, setThumbnailUrl] = useState(createAssetUrl(asset, true)); const [thumbnailUrl, setThumbnailUrl] = useState(createAssetUrl(asset, true));
const { formatMessage } = useIntl(); const { formatMessage } = useIntl();
@ -75,11 +75,26 @@ export const PreviewBox = ({
if (asset.isLocal) { if (asset.isLocal) {
asset.url = fileLocalUrl; asset.url = fileLocalUrl;
} }
setAssetUrl(fileLocalUrl); setAssetUrl(fileLocalUrl);
setThumbnailUrl(fileLocalUrl); setThumbnailUrl(fileLocalUrl);
} }
}, [replacementFile, asset]); }, [replacementFile, asset]);
useEffect(() => {
if (hasCropIntent === false) {
stopCropping();
onCropCancel();
}
}, [hasCropIntent, stopCropping, onCropCancel, onCropFinish]);
useEffect(() => {
if (hasCropIntent && isCropImageReady) {
crop(previewRef.current);
onCropStart();
}
}, [isCropImageReady, hasCropIntent, onCropStart, crop]);
const handleCropping = async () => { const handleCropping = async () => {
const nextAsset = { ...asset, width, height }; const nextAsset = { ...asset, width, height };
const file = await produceFile(nextAsset.name, nextAsset.mime, nextAsset.updatedAt); const file = await produceFile(nextAsset.name, nextAsset.mime, nextAsset.updatedAt);
@ -104,10 +119,9 @@ export const PreviewBox = ({
trackUsage('didCropFile', { duplicatedFile: false, location: trackedLocation }); trackUsage('didCropFile', { duplicatedFile: false, location: trackedLocation });
} }
stopCropping();
onCropCancel();
setAssetUrl(optimizedCachingImage); setAssetUrl(optimizedCachingImage);
setThumbnailUrl(optimizedCachingThumbnailImage); setThumbnailUrl(optimizedCachingThumbnailImage);
setHasCropIntent(false);
}; };
const isInCroppingMode = isCropping && !isLoading; const isInCroppingMode = isCropping && !isLoading;
@ -120,28 +134,18 @@ export const PreviewBox = ({
trackUsage('didCropFile', { duplicatedFile: true, location: trackedLocation }); trackUsage('didCropFile', { duplicatedFile: true, location: trackedLocation });
stopCropping(); setHasCropIntent(false);
onCropFinish(); onCropFinish();
}; };
const handleCropCancel = () => { const handleCropCancel = () => {
setHasCropIntent(false); setHasCropIntent(false);
setIsCropImageReady(false);
stopCropping();
onCropCancel();
}; };
const handleCropStart = () => { const handleCropStart = () => {
setHasCropIntent(true); setHasCropIntent(true);
}; };
useEffect(() => {
if (hasCropIntent && isCropImageReady) {
crop(previewRef.current);
onCropStart();
}
}, [isCropImageReady, hasCropIntent, onCropStart, crop]);
return ( return (
<> <>
<RelativeBox hasRadius background="neutral150" borderColor="neutral200"> <RelativeBox hasRadius background="neutral150" borderColor="neutral200">
@ -214,7 +218,7 @@ export const PreviewBox = ({
name={asset.name} name={asset.name}
url={hasCropIntent ? assetUrl : thumbnailUrl} url={hasCropIntent ? assetUrl : thumbnailUrl}
onLoad={() => { onLoad={() => {
if (hasCropIntent) { if (asset.isLocal ? true : hasCropIntent) {
setIsCropImageReady(true); setIsCropImageReady(true);
} }
}} }}