From e4410a8bad14ceeb1eb5acfed7cf8763cdca8904 Mon Sep 17 00:00:00 2001
From: Mary <git@mary.my.id>
Date: Wed, 8 May 2024 12:12:23 +0700
Subject: [PATCH] refactor: bring back dimensions

---
 src/lib/media/picker.web.tsx          | 4 ++++
 src/state/modals/index.tsx            | 1 +
 src/view/com/modals/CropImage.web.tsx | 8 +++++++-
 3 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/lib/media/picker.web.tsx b/src/lib/media/picker.web.tsx
index 7e2562e297..95c79cc879 100644
--- a/src/lib/media/picker.web.tsx
+++ b/src/lib/media/picker.web.tsx
@@ -17,6 +17,10 @@ export async function openCropper(opts: CropperOptions): Promise<RNImage> {
     unstable__openModal({
       name: 'crop-image',
       uri: opts.path,
+      dimensions:
+        opts.width && opts.height
+          ? {width: opts.width, height: opts.height}
+          : undefined,
       onSelect: (img?: RNImage) => {
         if (img) {
           resolve(img)
diff --git a/src/state/modals/index.tsx b/src/state/modals/index.tsx
index f7eb762462..86eaac3478 100644
--- a/src/state/modals/index.tsx
+++ b/src/state/modals/index.tsx
@@ -39,6 +39,7 @@ export interface ListAddRemoveUsersModal {
 export interface CropImageModal {
   name: 'crop-image'
   uri: string
+  dimensions?: {width: number; height: number}
   onSelect: (img?: RNImage) => void
 }
 
diff --git a/src/view/com/modals/CropImage.web.tsx b/src/view/com/modals/CropImage.web.tsx
index 8a678b4294..3d8f094b17 100644
--- a/src/view/com/modals/CropImage.web.tsx
+++ b/src/view/com/modals/CropImage.web.tsx
@@ -17,9 +17,11 @@ export const snapPoints = ['0%']
 
 export function Component({
   uri,
+  dimensions,
   onSelect,
 }: {
   uri: string
+  dimensions?: {width: number; height: number}
   onSelect: (img?: RNImage) => void
 }) {
   const pal = usePalette('default')
@@ -31,6 +33,7 @@ export function Component({
   const [crop, setCrop] = React.useState<PercentCrop>()
 
   const isEmpty = !crop || (crop.width || crop.height) === 0
+  const aspect = dimensions ? dimensions.width / dimensions.height : undefined
 
   const onPressCancel = () => {
     onSelect(undefined)
@@ -75,7 +78,10 @@ export function Component({
   return (
     <View>
       <View style={[styles.cropper, pal.borderDark]}>
-        <ReactCrop crop={crop} onChange={(_, next) => setCrop(next)}>
+        <ReactCrop
+          aspect={aspect}
+          crop={crop}
+          onChange={(_, next) => setCrop(next)}>
           <img ref={imageRef} src={uri} style={{maxHeight: '75vh'}} />
         </ReactCrop>
       </View>