diff --git a/src/state/modals/index.tsx b/src/state/modals/index.tsx index 05e0c53f66..f77da6759b 100644 --- a/src/state/modals/index.tsx +++ b/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 diff --git a/src/view/com/modals/CropImage.web.tsx b/src/view/com/modals/CropImage.web.tsx deleted file mode 100644 index 41ca306573..0000000000 --- a/src/view/com/modals/CropImage.web.tsx +++ /dev/null @@ -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(null) - const [crop, setCrop] = React.useState() - - 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 ( - - - setCrop(percentCrop)} - circularCrop={circular}> - - - - - - - Cancel - - - - - - - Done - - - - - - ) -} - -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, - }, -}) diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx index 76b2811b14..350e98a26b 100644 --- a/src/view/com/modals/Modal.web.tsx +++ b/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 = } else if (modal.name === 'list-add-remove-users') { element = - } else if (modal.name === 'crop-image') { - element = } else if (modal.name === 'delete-account') { element = } else if (modal.name === 'change-handle') {