yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-21 22:40:24 +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 previewRef = useRef(null);
const [isCropImageReady, setIsCropImageReady] = useState(false);
const [hasCropIntent, setHasCropIntent] = useState(false);
const [hasCropIntent, setHasCropIntent] = useState(null);
const [assetUrl, setAssetUrl] = useState(createAssetUrl(asset, false));
const [thumbnailUrl, setThumbnailUrl] = useState(createAssetUrl(asset, true));
const { formatMessage } = useIntl();
@ -75,11 +75,26 @@ export const PreviewBox = ({
if (asset.isLocal) {
asset.url = fileLocalUrl;
}
setAssetUrl(fileLocalUrl);
setThumbnailUrl(fileLocalUrl);
}
}, [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 nextAsset = { ...asset, width, height };
const file = await produceFile(nextAsset.name, nextAsset.mime, nextAsset.updatedAt);
@ -104,10 +119,9 @@ export const PreviewBox = ({
trackUsage('didCropFile', { duplicatedFile: false, location: trackedLocation });
}
stopCropping();
onCropCancel();
setAssetUrl(optimizedCachingImage);
setThumbnailUrl(optimizedCachingThumbnailImage);
setHasCropIntent(false);
};
const isInCroppingMode = isCropping && !isLoading;
@ -120,28 +134,18 @@ export const PreviewBox = ({
trackUsage('didCropFile', { duplicatedFile: true, location: trackedLocation });
stopCropping();
setHasCropIntent(false);
onCropFinish();
};
const handleCropCancel = () => {
setHasCropIntent(false);
setIsCropImageReady(false);
stopCropping();
onCropCancel();
};
const handleCropStart = () => {
setHasCropIntent(true);
};
useEffect(() => {
if (hasCropIntent && isCropImageReady) {
crop(previewRef.current);
onCropStart();
}
}, [isCropImageReady, hasCropIntent, onCropStart, crop]);
return (
<>
<RelativeBox hasRadius background="neutral150" borderColor="neutral200">
@ -214,7 +218,7 @@ export const PreviewBox = ({
name={asset.name}
url={hasCropIntent ? assetUrl : thumbnailUrl}
onLoad={() => {
if (hasCropIntent) {
if (asset.isLocal ? true : hasCropIntent) {
setIsCropImageReady(true);
}
}}