From acfdea2518ad047896079b2ab7b716fa9544baee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Ferreiro?= <ferreiro@pinkroom.dev>
Date: Tue, 29 Nov 2022 10:59:32 +0000
Subject: [PATCH] reafctor image carousel into new component; fix photo
overlapping text in composer
---
ios/app.xcodeproj/project.pbxproj | 130 ++++++------
src/view/com/composer/ComposePost.tsx | 197 +++---------------
src/view/com/composer/PhotoCarouselPicker.tsx | 192 +++++++++++++++++
3 files changed, 285 insertions(+), 234 deletions(-)
create mode 100644 src/view/com/composer/PhotoCarouselPicker.tsx
diff --git a/ios/app.xcodeproj/project.pbxproj b/ios/app.xcodeproj/project.pbxproj
index 323cf87b..f964b123 100644
--- a/ios/app.xcodeproj/project.pbxproj
+++ b/ios/app.xcodeproj/project.pbxproj
@@ -8,13 +8,13 @@
/* Begin PBXBuildFile section */
00E356F31AD99517003FC87E /* appTests.m in Sources */ = {isa = PBXBuildFile; fileRef = 00E356F21AD99517003FC87E /* appTests.m */; };
- 03CEA62EF4246066A4356DBF /* libPods-app.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 40C05267EED8EC1DA4212FD4 /* libPods-app.a */; };
13B07FBC1A68108700A75B9A /* AppDelegate.mm in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB01A68108700A75B9A /* AppDelegate.mm */; };
13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
- 64B2214C33449E5F5EB4EA8C /* libPods-app-appTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = D5A91013937D8724CBF0A625 /* libPods-app-appTests.a */; };
+ 6D37A166CEFC7E8937DE72CB /* libPods-app.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 596ED3134AA9EF6DBAB6EB96 /* libPods-app.a */; };
81AB9BB82411601600AC10FF /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */; };
E4BBD590292C1F5200296224 /* app.entitlements in Resources */ = {isa = PBXBuildFile; fileRef = E4437C9E28581FA7006DA9E7 /* app.entitlements */; };
+ F19C1FC2EC3C7162CB25E815 /* libPods-app-appTests.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 16A4C892E71787BF5849EC83 /* libPods-app-appTests.a */; };
/* End PBXBuildFile section */
/* Begin PBXContainerItemProxy section */
@@ -31,19 +31,19 @@
00E356EE1AD99517003FC87E /* appTests.xctest */ = {isa = PBXFileReference; explicitFileType = wrapper.cfbundle; includeInIndex = 0; path = appTests.xctest; sourceTree = BUILT_PRODUCTS_DIR; };
00E356F11AD99517003FC87E /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
00E356F21AD99517003FC87E /* appTests.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = appTests.m; sourceTree = "<group>"; };
+ 0C0949EE4E80361188F0C002 /* Pods-app.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-app.debug.xcconfig"; path = "Target Support Files/Pods-app/Pods-app.debug.xcconfig"; sourceTree = "<group>"; };
13B07F961A680F5B00A75B9A /* app.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = app.app; sourceTree = BUILT_PRODUCTS_DIR; };
13B07FAF1A68108700A75B9A /* AppDelegate.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; name = AppDelegate.h; path = app/AppDelegate.h; sourceTree = "<group>"; };
13B07FB01A68108700A75B9A /* AppDelegate.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; name = AppDelegate.mm; path = app/AppDelegate.mm; sourceTree = "<group>"; };
13B07FB51A68108700A75B9A /* Images.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Images.xcassets; path = app/Images.xcassets; sourceTree = "<group>"; };
13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = Info.plist; path = app/Info.plist; sourceTree = "<group>"; };
13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; name = main.m; path = app/main.m; sourceTree = "<group>"; };
- 1F5A3A10A9E763C1649E35A2 /* Pods-app-appTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-app-appTests.release.xcconfig"; path = "Target Support Files/Pods-app-appTests/Pods-app-appTests.release.xcconfig"; sourceTree = "<group>"; };
- 40C05267EED8EC1DA4212FD4 /* libPods-app.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-app.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+ 16A4C892E71787BF5849EC83 /* libPods-app-appTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-app-appTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+ 30A0A65C98339E6009F0927D /* Pods-app.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-app.release.xcconfig"; path = "Target Support Files/Pods-app/Pods-app.release.xcconfig"; sourceTree = "<group>"; };
+ 4DFF35494A5D1C813CE7EF11 /* Pods-app-appTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-app-appTests.debug.xcconfig"; path = "Target Support Files/Pods-app-appTests/Pods-app-appTests.debug.xcconfig"; sourceTree = "<group>"; };
+ 596ED3134AA9EF6DBAB6EB96 /* libPods-app.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-app.a"; sourceTree = BUILT_PRODUCTS_DIR; };
+ 685FA16DF9AC2B99AE3B5DBD /* Pods-app-appTests.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-app-appTests.release.xcconfig"; path = "Target Support Files/Pods-app-appTests/Pods-app-appTests.release.xcconfig"; sourceTree = "<group>"; };
81AB9BB72411601600AC10FF /* LaunchScreen.storyboard */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = file.storyboard; name = LaunchScreen.storyboard; path = app/LaunchScreen.storyboard; sourceTree = "<group>"; };
- 9778B24B11B793045DA74F2B /* Pods-app.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-app.debug.xcconfig"; path = "Target Support Files/Pods-app/Pods-app.debug.xcconfig"; sourceTree = "<group>"; };
- AA52915648F9E2111DA9ADD8 /* Pods-app.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-app.release.xcconfig"; path = "Target Support Files/Pods-app/Pods-app.release.xcconfig"; sourceTree = "<group>"; };
- CC31CE4B797ED8DCD20C1535 /* Pods-app-appTests.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-app-appTests.debug.xcconfig"; path = "Target Support Files/Pods-app-appTests/Pods-app-appTests.debug.xcconfig"; sourceTree = "<group>"; };
- D5A91013937D8724CBF0A625 /* libPods-app-appTests.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-app-appTests.a"; sourceTree = BUILT_PRODUCTS_DIR; };
E4437C9E28581FA7006DA9E7 /* app.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; name = app.entitlements; path = app/app.entitlements; sourceTree = "<group>"; };
ED297162215061F000B7C4FE /* JavaScriptCore.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = JavaScriptCore.framework; path = System/Library/Frameworks/JavaScriptCore.framework; sourceTree = SDKROOT; };
/* End PBXFileReference section */
@@ -53,7 +53,7 @@
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
- 64B2214C33449E5F5EB4EA8C /* libPods-app-appTests.a in Frameworks */,
+ F19C1FC2EC3C7162CB25E815 /* libPods-app-appTests.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
@@ -61,7 +61,7 @@
isa = PBXFrameworksBuildPhase;
buildActionMask = 2147483647;
files = (
- 03CEA62EF4246066A4356DBF /* libPods-app.a in Frameworks */,
+ 6D37A166CEFC7E8937DE72CB /* libPods-app.a in Frameworks */,
);
runOnlyForDeploymentPostprocessing = 0;
};
@@ -103,8 +103,8 @@
isa = PBXGroup;
children = (
ED297162215061F000B7C4FE /* JavaScriptCore.framework */,
- 40C05267EED8EC1DA4212FD4 /* libPods-app.a */,
- D5A91013937D8724CBF0A625 /* libPods-app-appTests.a */,
+ 596ED3134AA9EF6DBAB6EB96 /* libPods-app.a */,
+ 16A4C892E71787BF5849EC83 /* libPods-app-appTests.a */,
);
name = Frameworks;
sourceTree = "<group>";
@@ -143,10 +143,10 @@
BBD78D7AC51CEA395F1C20DB /* Pods */ = {
isa = PBXGroup;
children = (
- 9778B24B11B793045DA74F2B /* Pods-app.debug.xcconfig */,
- AA52915648F9E2111DA9ADD8 /* Pods-app.release.xcconfig */,
- CC31CE4B797ED8DCD20C1535 /* Pods-app-appTests.debug.xcconfig */,
- 1F5A3A10A9E763C1649E35A2 /* Pods-app-appTests.release.xcconfig */,
+ 0C0949EE4E80361188F0C002 /* Pods-app.debug.xcconfig */,
+ 30A0A65C98339E6009F0927D /* Pods-app.release.xcconfig */,
+ 4DFF35494A5D1C813CE7EF11 /* Pods-app-appTests.debug.xcconfig */,
+ 685FA16DF9AC2B99AE3B5DBD /* Pods-app-appTests.release.xcconfig */,
);
path = Pods;
sourceTree = "<group>";
@@ -158,11 +158,11 @@
isa = PBXNativeTarget;
buildConfigurationList = 00E357021AD99517003FC87E /* Build configuration list for PBXNativeTarget "appTests" */;
buildPhases = (
- 5D162178C88ED1C10D55B6A4 /* [CP] Check Pods Manifest.lock */,
+ D25A2C8B8B280E54CDBF5192 /* [CP] Check Pods Manifest.lock */,
00E356EA1AD99517003FC87E /* Sources */,
00E356EB1AD99517003FC87E /* Frameworks */,
00E356EC1AD99517003FC87E /* Resources */,
- 431D96626A2B8B60C16D4F56 /* [CP] Copy Pods Resources */,
+ 93C4A008E3B1F5BDF90AA282 /* [CP] Copy Pods Resources */,
);
buildRules = (
);
@@ -178,13 +178,13 @@
isa = PBXNativeTarget;
buildConfigurationList = 13B07F931A680F5B00A75B9A /* Build configuration list for PBXNativeTarget "app" */;
buildPhases = (
- 467B75E7982670E38F3A3036 /* [CP] Check Pods Manifest.lock */,
+ E5C10128C4EC047B9CD6EEFB /* [CP] Check Pods Manifest.lock */,
FD10A7F022414F080027D42C /* Start Packager */,
13B07F871A680F5B00A75B9A /* Sources */,
13B07F8C1A680F5B00A75B9A /* Frameworks */,
13B07F8E1A680F5B00A75B9A /* Resources */,
00DD1BFF1BD5951E006B06BC /* Bundle React Native code and images */,
- 55D43DDC59A5C9BA3D615BAB /* [CP] Copy Pods Resources */,
+ 29E5C2625DDCB23B01CF3257 /* [CP] Copy Pods Resources */,
);
buildRules = (
);
@@ -266,46 +266,7 @@
shellPath = /bin/sh;
shellScript = "set -e\n\nexport NODE_BINARY=node\n../node_modules/react-native/scripts/react-native-xcode.sh\n";
};
- 431D96626A2B8B60C16D4F56 /* [CP] Copy Pods Resources */ = {
- isa = PBXShellScriptBuildPhase;
- buildActionMask = 2147483647;
- files = (
- );
- inputFileListPaths = (
- "${PODS_ROOT}/Target Support Files/Pods-app-appTests/Pods-app-appTests-resources-${CONFIGURATION}-input-files.xcfilelist",
- );
- name = "[CP] Copy Pods Resources";
- outputFileListPaths = (
- "${PODS_ROOT}/Target Support Files/Pods-app-appTests/Pods-app-appTests-resources-${CONFIGURATION}-output-files.xcfilelist",
- );
- runOnlyForDeploymentPostprocessing = 0;
- shellPath = /bin/sh;
- shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-app-appTests/Pods-app-appTests-resources.sh\"\n";
- showEnvVarsInLog = 0;
- };
- 467B75E7982670E38F3A3036 /* [CP] Check Pods Manifest.lock */ = {
- isa = PBXShellScriptBuildPhase;
- buildActionMask = 2147483647;
- files = (
- );
- inputFileListPaths = (
- );
- inputPaths = (
- "${PODS_PODFILE_DIR_PATH}/Podfile.lock",
- "${PODS_ROOT}/Manifest.lock",
- );
- name = "[CP] Check Pods Manifest.lock";
- outputFileListPaths = (
- );
- outputPaths = (
- "$(DERIVED_FILE_DIR)/Pods-app-checkManifestLockResult.txt",
- );
- runOnlyForDeploymentPostprocessing = 0;
- shellPath = /bin/sh;
- shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
- showEnvVarsInLog = 0;
- };
- 55D43DDC59A5C9BA3D615BAB /* [CP] Copy Pods Resources */ = {
+ 29E5C2625DDCB23B01CF3257 /* [CP] Copy Pods Resources */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
@@ -322,7 +283,24 @@
shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-app/Pods-app-resources.sh\"\n";
showEnvVarsInLog = 0;
};
- 5D162178C88ED1C10D55B6A4 /* [CP] Check Pods Manifest.lock */ = {
+ 93C4A008E3B1F5BDF90AA282 /* [CP] Copy Pods Resources */ = {
+ isa = PBXShellScriptBuildPhase;
+ buildActionMask = 2147483647;
+ files = (
+ );
+ inputFileListPaths = (
+ "${PODS_ROOT}/Target Support Files/Pods-app-appTests/Pods-app-appTests-resources-${CONFIGURATION}-input-files.xcfilelist",
+ );
+ name = "[CP] Copy Pods Resources";
+ outputFileListPaths = (
+ "${PODS_ROOT}/Target Support Files/Pods-app-appTests/Pods-app-appTests-resources-${CONFIGURATION}-output-files.xcfilelist",
+ );
+ runOnlyForDeploymentPostprocessing = 0;
+ shellPath = /bin/sh;
+ shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-app-appTests/Pods-app-appTests-resources.sh\"\n";
+ showEnvVarsInLog = 0;
+ };
+ D25A2C8B8B280E54CDBF5192 /* [CP] Check Pods Manifest.lock */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
files = (
@@ -344,6 +322,28 @@
shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
showEnvVarsInLog = 0;
};
+ E5C10128C4EC047B9CD6EEFB /* [CP] Check Pods Manifest.lock */ = {
+ isa = PBXShellScriptBuildPhase;
+ buildActionMask = 2147483647;
+ files = (
+ );
+ inputFileListPaths = (
+ );
+ inputPaths = (
+ "${PODS_PODFILE_DIR_PATH}/Podfile.lock",
+ "${PODS_ROOT}/Manifest.lock",
+ );
+ name = "[CP] Check Pods Manifest.lock";
+ outputFileListPaths = (
+ );
+ outputPaths = (
+ "$(DERIVED_FILE_DIR)/Pods-app-checkManifestLockResult.txt",
+ );
+ runOnlyForDeploymentPostprocessing = 0;
+ shellPath = /bin/sh;
+ shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n";
+ showEnvVarsInLog = 0;
+ };
FD10A7F022414F080027D42C /* Start Packager */ = {
isa = PBXShellScriptBuildPhase;
buildActionMask = 2147483647;
@@ -396,7 +396,7 @@
/* Begin XCBuildConfiguration section */
00E356F61AD99517003FC87E /* Debug */ = {
isa = XCBuildConfiguration;
- baseConfigurationReference = CC31CE4B797ED8DCD20C1535 /* Pods-app-appTests.debug.xcconfig */;
+ baseConfigurationReference = 4DFF35494A5D1C813CE7EF11 /* Pods-app-appTests.debug.xcconfig */;
buildSettings = {
ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
BUNDLE_LOADER = "$(TEST_HOST)";
@@ -424,7 +424,7 @@
};
00E356F71AD99517003FC87E /* Release */ = {
isa = XCBuildConfiguration;
- baseConfigurationReference = 1F5A3A10A9E763C1649E35A2 /* Pods-app-appTests.release.xcconfig */;
+ baseConfigurationReference = 685FA16DF9AC2B99AE3B5DBD /* Pods-app-appTests.release.xcconfig */;
buildSettings = {
ALWAYS_EMBED_SWIFT_STANDARD_LIBRARIES = YES;
BUNDLE_LOADER = "$(TEST_HOST)";
@@ -449,7 +449,7 @@
};
13B07F941A680F5B00A75B9A /* Debug */ = {
isa = XCBuildConfiguration;
- baseConfigurationReference = 9778B24B11B793045DA74F2B /* Pods-app.debug.xcconfig */;
+ baseConfigurationReference = 0C0949EE4E80361188F0C002 /* Pods-app.debug.xcconfig */;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CLANG_ENABLE_MODULES = YES;
@@ -478,7 +478,7 @@
};
13B07F951A680F5B00A75B9A /* Release */ = {
isa = XCBuildConfiguration;
- baseConfigurationReference = AA52915648F9E2111DA9ADD8 /* Pods-app.release.xcconfig */;
+ baseConfigurationReference = 30A0A65C98339E6009F0927D /* Pods-app.release.xcconfig */;
buildSettings = {
ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon;
CLANG_ENABLE_MODULES = YES;
diff --git a/src/view/com/composer/ComposePost.tsx b/src/view/com/composer/ComposePost.tsx
index ce42ee17..2f8c29e7 100644
--- a/src/view/com/composer/ComposePost.tsx
+++ b/src/view/com/composer/ComposePost.tsx
@@ -9,13 +9,10 @@ import {
TextInput,
TouchableOpacity,
View,
- ScrollView,
- Image,
} from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
import {UserAutocompleteViewModel} from '../../../state/models/user-autocomplete-view'
-import {UserLocalPhotosModel} from '../../../state/models/user-local-photos'
import {Autocomplete} from './Autocomplete'
import * as Toast from '../util/Toast'
import ProgressCircle from '../util/ProgressCircle'
@@ -26,7 +23,8 @@ import * as apilib from '../../../state/lib/api'
import {ComposerOpts} from '../../../state/models/shell-ui'
import {s, colors, gradients} from '../../lib/styles'
import {detectLinkables} from '../../../lib/strings'
-import {openPicker, openCamera} from 'react-native-image-crop-picker'
+import {PhotoCarouselPicker} from './PhotoCarouselPicker'
+import {UserLocalPhotosModel} from '../../../state/models/user-local-photos'
const MAX_TEXT_LENGTH = 256
const DANGER_TEXT_LENGTH = MAX_TEXT_LENGTH
@@ -45,7 +43,8 @@ export const ComposePost = observer(function ComposePost({
const [isProcessing, setIsProcessing] = useState(false)
const [error, setError] = useState('')
const [text, setText] = useState('')
- const [photoUris, setPhotoUris] = useState<string[]>([])
+ const [selectedPhotos, setSelectedPhotos] = useState<string[]>([])
+
const autocompleteView = useMemo<UserAutocompleteViewModel>(
() => new UserAutocompleteViewModel(store),
[],
@@ -58,6 +57,11 @@ export const ComposePost = observer(function ComposePost({
useEffect(() => {
autocompleteView.setup()
})
+
+ useEffect(() => {
+ localPhotos.setup()
+ }, [])
+
useEffect(() => {
// HACK
// wait a moment before focusing the input to resolve some layout bugs with the keyboard-avoiding-view
@@ -75,10 +79,6 @@ export const ComposePost = observer(function ComposePost({
}
}, [textInput.current])
- useEffect(() => {
- localPhotos.setup()
- }, [])
-
const onChangeText = (newText: string) => {
setText(newText)
@@ -207,7 +207,13 @@ export const ComposePost = observer(function ComposePost({
</View>
</View>
) : undefined}
- <View style={styles.textInputLayout}>
+ <View
+ style={[
+ styles.textInputLayout,
+ selectedPhotos.length !== 0
+ ? styles.textInputLayoutWithPhoto
+ : styles.textInputLayoutWithoutPhoto,
+ ]}>
<UserAvatar
handle={store.me.handle || ''}
displayName={store.me.displayName}
@@ -223,100 +229,12 @@ export const ComposePost = observer(function ComposePost({
{textDecorated}
</TextInput>
</View>
- {photoUris.length !== 0 && (
- <View style={styles.selectedImageContainer}>
- {photoUris.length !== 0 &&
- photoUris.map((item, index) => (
- <View
- key={`selected-image-${index}`}
- style={[
- styles.selectedImage,
- photoUris.length === 1
- ? styles.selectedImage250
- : photoUris.length === 2
- ? styles.selectedImage175
- : styles.selectedImage85,
- ]}>
- <TouchableOpacity
- onPress={() => {
- setPhotoUris(
- photoUris.filter(filterItem => filterItem !== item),
- )
- }}
- style={styles.removePhotoButton}>
- <FontAwesomeIcon
- icon="xmark"
- size={16}
- style={{color: colors.white}}
- />
- </TouchableOpacity>
-
- <Image
- style={[
- styles.selectedImage,
- photoUris.length === 1
- ? styles.selectedImage250
- : photoUris.length === 2
- ? styles.selectedImage175
- : styles.selectedImage85,
- ]}
- source={{uri: item}}
- />
- </View>
- ))}
- </View>
- )}
- {localPhotos.photos != null && text === '' && photoUris.length === 0 && (
- <ScrollView
- horizontal
- style={styles.photosContainer}
- showsHorizontalScrollIndicator={false}>
- <TouchableOpacity
- style={[styles.galleryButton, styles.photo]}
- onPress={() => {
- openCamera({multiple: true, maxFiles: 4}).then()
- }}>
- <FontAwesomeIcon
- icon="camera"
- size={24}
- style={{color: colors.blue3}}
- />
- </TouchableOpacity>
- {localPhotos.photos.map((item, index) => (
- <TouchableOpacity
- key={`local-image-${index}`}
- style={styles.photoButton}
- onPress={() => {
- setPhotoUris([item.node.image.uri, ...photoUris])
- }}>
- <Image
- style={styles.photo}
- source={{uri: item.node.image.uri}}
- />
- </TouchableOpacity>
- ))}
- <TouchableOpacity
- style={[styles.galleryButton, styles.photo]}
- onPress={() => {
- openPicker({multiple: true, maxFiles: 4}).then(items => {
- setPhotoUris([
- ...items.reduce(
- (accum, cur) => accum.concat(cur.sourceURL!),
- [] as string[],
- ),
- ...photoUris,
- ])
- })
- }}>
- <FontAwesomeIcon
- icon="image"
- style={{color: colors.blue3}}
- size={24}
- />
- </TouchableOpacity>
- </ScrollView>
- )}
- <View style={styles.separator} />
+ <PhotoCarouselPicker
+ selectedPhotos={selectedPhotos}
+ setSelectedPhotos={setSelectedPhotos}
+ localPhotos={localPhotos}
+ inputText={text}
+ />
<View style={[s.flexRow, s.pt10, s.pb10, s.pr5, styles.contentCenter]}>
<View style={s.flex1} />
<Text style={[s.mr10, {color: progressColor}]}>
@@ -390,9 +308,14 @@ const styles = StyleSheet.create({
justifyContent: 'center',
marginRight: 5,
},
+ textInputLayoutWithPhoto: {
+ flexWrap: 'wrap',
+ },
+ textInputLayoutWithoutPhoto: {
+ flex: 1,
+ },
textInputLayout: {
flexDirection: 'row',
- flex: 1,
borderTopWidth: 1,
borderTopColor: colors.gray2,
paddingTop: 16,
@@ -416,68 +339,4 @@ const styles = StyleSheet.create({
paddingRight: 8,
},
contentCenter: {alignItems: 'center'},
- selectedImageContainer: {
- flex: 10,
- flexDirection: 'row',
- },
- selectedImage: {
- borderRadius: 8,
- margin: 2,
- },
- selectedImage250: {
- width: 250,
- height: 250,
- },
- selectedImage175: {
- width: 175,
- height: 175,
- },
- selectedImage85: {
- width: 85,
- height: 85,
- },
- photosContainer: {
- width: '100%',
- maxHeight: 96,
- padding: 8,
- overflow: 'hidden',
- },
- removePhotoButton: {
- position: 'absolute',
- top: 8,
- right: 8,
- width: 24,
- height: 24,
- borderRadius: 12,
- alignItems: 'center',
- justifyContent: 'center',
- backgroundColor: colors.black,
- zIndex: 1,
- },
- galleryButton: {
- borderWidth: 1,
- borderColor: colors.gray3,
- alignItems: 'center',
- justifyContent: 'center',
- },
- photoButton: {
- width: 75,
- height: 75,
- marginRight: 8,
- borderWidth: 1,
- borderRadius: 16,
- borderColor: colors.gray3,
- },
- photo: {
- width: 75,
- height: 75,
- marginRight: 8,
- borderRadius: 16,
- },
- separator: {
- borderBottomColor: 'black',
- borderBottomWidth: StyleSheet.hairlineWidth,
- width: '110%',
- marginLeft: -16,
- },
})
diff --git a/src/view/com/composer/PhotoCarouselPicker.tsx b/src/view/com/composer/PhotoCarouselPicker.tsx
new file mode 100644
index 00000000..f3c3b89c
--- /dev/null
+++ b/src/view/com/composer/PhotoCarouselPicker.tsx
@@ -0,0 +1,192 @@
+import React from 'react'
+import {
+ Image,
+ StyleSheet,
+ TouchableOpacity,
+ View,
+ ScrollView,
+} from 'react-native'
+import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
+import {colors} from '../../lib/styles'
+import {openPicker, openCamera} from 'react-native-image-crop-picker'
+import {observer} from 'mobx-react-lite'
+
+export const PhotoCarouselPicker = observer(function PhotoCarouselPicker({
+ selectedPhotos,
+ setSelectedPhotos,
+ inputText,
+ localPhotos,
+}: {
+ selectedPhotos: string[]
+ setSelectedPhotos: React.Dispatch<React.SetStateAction<string[]>>
+ inputText: string
+ localPhotos: any
+}) {
+ return (
+ <>
+ {selectedPhotos.length !== 0 && (
+ <View style={styles.selectedImageContainer}>
+ {selectedPhotos.length !== 0 &&
+ selectedPhotos.map((item, index) => (
+ <View
+ key={`selected-image-${index}`}
+ style={[
+ styles.selectedImage,
+ selectedPhotos.length === 1
+ ? styles.selectedImage250
+ : selectedPhotos.length === 2
+ ? styles.selectedImage175
+ : styles.selectedImage85,
+ ]}>
+ <TouchableOpacity
+ onPress={() => {
+ setSelectedPhotos(
+ selectedPhotos.filter(filterItem => filterItem !== item),
+ )
+ }}
+ style={styles.removePhotoButton}>
+ <FontAwesomeIcon
+ icon="xmark"
+ size={16}
+ style={{color: colors.white}}
+ />
+ </TouchableOpacity>
+
+ <Image
+ style={[
+ styles.selectedImage,
+ selectedPhotos.length === 1
+ ? styles.selectedImage250
+ : selectedPhotos.length === 2
+ ? styles.selectedImage175
+ : styles.selectedImage85,
+ ]}
+ source={{uri: item}}
+ />
+ </View>
+ ))}
+ </View>
+ )}
+ {localPhotos.photos != null &&
+ inputText === '' &&
+ selectedPhotos.length === 0 && (
+ <ScrollView
+ horizontal
+ style={styles.photosContainer}
+ showsHorizontalScrollIndicator={false}>
+ <TouchableOpacity
+ style={[styles.galleryButton, styles.photo]}
+ onPress={() => {
+ openCamera({multiple: true, maxFiles: 4}).then()
+ }}>
+ <FontAwesomeIcon
+ icon="camera"
+ size={24}
+ style={{color: colors.blue3}}
+ />
+ </TouchableOpacity>
+ {localPhotos.photos.map((item: any, index: number) => (
+ <TouchableOpacity
+ key={`local-image-${index}`}
+ style={styles.photoButton}
+ onPress={() => {
+ setSelectedPhotos([item.node.image.uri, ...selectedPhotos])
+ }}>
+ <Image
+ style={styles.photo}
+ source={{uri: item.node.image.uri}}
+ />
+ </TouchableOpacity>
+ ))}
+ <TouchableOpacity
+ style={[styles.galleryButton, styles.photo]}
+ onPress={() => {
+ openPicker({multiple: true, maxFiles: 4}).then(items => {
+ setSelectedPhotos([
+ ...items.reduce(
+ (accum, cur) => accum.concat(cur.sourceURL!),
+ [] as string[],
+ ),
+ ...selectedPhotos,
+ ])
+ })
+ }}>
+ <FontAwesomeIcon
+ icon="image"
+ style={{color: colors.blue3}}
+ size={24}
+ />
+ </TouchableOpacity>
+ </ScrollView>
+ )}
+ <View style={styles.separator} />
+ </>
+ )
+})
+
+const styles = StyleSheet.create({
+ selectedImageContainer: {
+ flex: 1,
+ flexDirection: 'row',
+ marginTop: 16,
+ },
+ selectedImage: {
+ borderRadius: 8,
+ margin: 2,
+ },
+ selectedImage250: {
+ width: 250,
+ height: 250,
+ },
+ selectedImage175: {
+ width: 175,
+ height: 175,
+ },
+ selectedImage85: {
+ width: 85,
+ height: 85,
+ },
+ photosContainer: {
+ width: '100%',
+ maxHeight: 96,
+ padding: 8,
+ overflow: 'hidden',
+ },
+ removePhotoButton: {
+ position: 'absolute',
+ top: 8,
+ right: 8,
+ width: 24,
+ height: 24,
+ borderRadius: 12,
+ alignItems: 'center',
+ justifyContent: 'center',
+ backgroundColor: colors.black,
+ zIndex: 1,
+ },
+ galleryButton: {
+ borderWidth: 1,
+ borderColor: colors.gray3,
+ alignItems: 'center',
+ justifyContent: 'center',
+ },
+ photoButton: {
+ width: 75,
+ height: 75,
+ marginRight: 8,
+ borderWidth: 1,
+ borderRadius: 16,
+ borderColor: colors.gray3,
+ },
+ photo: {
+ width: 75,
+ height: 75,
+ marginRight: 8,
+ borderRadius: 16,
+ },
+ separator: {
+ borderBottomColor: 'black',
+ borderBottomWidth: StyleSheet.hairlineWidth,
+ width: '100%',
+ },
+})