delete old modal

src/state/modals/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import {Image as RNImage} from 'react-native-image-crop-picker'
 import {AppBskyActorDefs, AppBskyGraphDefs} from '@atproto/api'
 
 import {useNonReactiveCallback} from '#/lib/hooks/useNonReactiveCallback'
@@ -29,15 +28,6 @@ export interface ListAddRemoveUsersModal {
   ) => void
 }
 
-export interface CropImageModal {
-  name: 'crop-image'
-  uri: string
-  dimensions?: {width: number; height: number}
-  aspect?: number
-  circular?: boolean
-  onSelect: (img?: RNImage) => void
-}
-
 export interface DeleteAccountModal {
   name: 'delete-account'
 }
@@ -111,9 +101,6 @@ export type Modal =
   | UserAddRemoveListsModal
   | ListAddRemoveUsersModal
 
-  // Posts
-  | CropImageModal
-
   // Bluesky access
   | WaitlistModal
   | InviteCodesModal

src/view/com/modals/CropImage.web.tsx

@@ -1,145 +0,0 @@
-import React from 'react'
-import {StyleSheet, TouchableOpacity, View} from 'react-native'
-import {Image as RNImage} from 'react-native-image-crop-picker'
-import {manipulateAsync, SaveFormat} from 'expo-image-manipulator'
-import {LinearGradient} from 'expo-linear-gradient'
-import {msg, Trans} from '@lingui/macro'
-import {useLingui} from '@lingui/react'
-import ReactCrop, {PercentCrop} from 'react-image-crop'
-
-import {usePalette} from '#/lib/hooks/usePalette'
-import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
-import {getDataUriSize} from '#/lib/media/util'
-import {gradients, s} from '#/lib/styles'
-import {useModalControls} from '#/state/modals'
-import {Text} from '#/view/com/util/text/Text'
-
-export const snapPoints = ['0%']
-
-export function Component({
-  uri,
-  aspect,
-  circular,
-  onSelect,
-}: {
-  uri: string
-  aspect?: number
-  circular?: boolean
-  onSelect: (img?: RNImage) => void
-}) {
-  const pal = usePalette('default')
-  const {_} = useLingui()
-
-  const {closeModal} = useModalControls()
-  const {isMobile} = useWebMediaQueries()
-
-  const imageRef = React.useRef<HTMLImageElement>(null)
-  const [crop, setCrop] = React.useState<PercentCrop>()
-
-  const isEmpty = !crop || (crop.width || crop.height) === 0
-
-  const onPressCancel = () => {
-    onSelect(undefined)
-    closeModal()
-  }
-  const onPressDone = async () => {
-    const img = imageRef.current!
-
-    const result = await manipulateAsync(
-      uri,
-      isEmpty
-        ? []
-        : [
-            {
-              crop: {
-                originX: (crop.x * img.naturalWidth) / 100,
-                originY: (crop.y * img.naturalHeight) / 100,
-                width: (crop.width * img.naturalWidth) / 100,
-                height: (crop.height * img.naturalHeight) / 100,
-              },
-            },
-          ],
-      {
-        base64: true,
-        format: SaveFormat.JPEG,
-      },
-    )
-
-    onSelect({
-      path: result.uri,
-      mime: 'image/jpeg',
-      size: result.base64 !== undefined ? getDataUriSize(result.base64) : 0,
-      width: result.width,
-      height: result.height,
-    })
-
-    closeModal()
-  }
-
-  return (
-    <View>
-      <View style={[styles.cropper, pal.borderDark]}>
-        <ReactCrop
-          aspect={aspect}
-          crop={crop}
-          onChange={(_pixelCrop, percentCrop) => setCrop(percentCrop)}
-          circularCrop={circular}>
-          <img ref={imageRef} src={uri} style={{maxHeight: '75vh'}} />
-        </ReactCrop>
-      </View>
-      <View style={[styles.btns, isMobile && {paddingHorizontal: 16}]}>
-        <TouchableOpacity
-          onPress={onPressCancel}
-          accessibilityRole="button"
-          accessibilityLabel={_(msg`Cancel image crop`)}
-          accessibilityHint={_(msg`Exits image cropping process`)}>
-          <Text type="xl" style={pal.link}>
-            <Trans>Cancel</Trans>
-          </Text>
-        </TouchableOpacity>
-        <View style={s.flex1} />
-        <TouchableOpacity
-          onPress={onPressDone}
-          accessibilityRole="button"
-          accessibilityLabel={_(msg`Save image crop`)}
-          accessibilityHint={_(msg`Saves image crop settings`)}>
-          <LinearGradient
-            colors={[gradients.blueLight.start, gradients.blueLight.end]}
-            start={{x: 0, y: 0}}
-            end={{x: 1, y: 1}}
-            style={[styles.btn]}>
-            <Text type="xl-medium" style={s.white}>
-              <Trans>Done</Trans>
-            </Text>
-          </LinearGradient>
-        </TouchableOpacity>
-      </View>
-    </View>
-  )
-}
-
-const styles = StyleSheet.create({
-  cropper: {
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    borderWidth: 1,
-    borderRadius: 4,
-    overflow: 'hidden',
-    alignItems: 'center',
-  },
-  ctrls: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: 10,
-  },
-  btns: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginTop: 10,
-  },
-  btn: {
-    borderRadius: 4,
-    paddingVertical: 8,
-    paddingHorizontal: 24,
-  },
-})

src/view/com/modals/Modal.web.tsx

@@ -12,7 +12,6 @@ import * as ChangeEmailModal from './ChangeEmail'
 import * as ChangeHandleModal from './ChangeHandle'
 import * as ChangePasswordModal from './ChangePassword'
 import * as CreateOrEditListModal from './CreateOrEditList'
-import * as CropImageModal from './CropImage.web'
 import * as DeleteAccountModal from './DeleteAccount'
 import * as InviteCodesModal from './InviteCodes'
 import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings'
@@ -50,9 +49,6 @@ function Modal({modal}: {modal: ModalIface}) {
   }
 
   const onPressMask = () => {
-    if (modal.name === 'crop-image') {
-      return // dont close on mask presses during crop
-    }
     closeModal()
   }
   const onInnerPress = () => {
@@ -67,8 +63,6 @@ function Modal({modal}: {modal: ModalIface}) {
     element = <UserAddRemoveLists.Component {...modal} />
   } else if (modal.name === 'list-add-remove-users') {
     element = <ListAddUserModal.Component {...modal} />
-  } else if (modal.name === 'crop-image') {
-    element = <CropImageModal.Component {...modal} />
   } else if (modal.name === 'delete-account') {
     element = <DeleteAccountModal.Component />
   } else if (modal.name === 'change-handle') {