zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

reafctor image carousel into new component; 

fix photo overlapping text in composer
zio/stable
João Ferreiro 2022-11-29 10:59:32 +00:00
parent 77ea3bfd0a
commit acfdea2518
3 changed files with 285 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
ios/app.xcodeproj/project.pbxproj
View File

@ -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;

197
src/view/com/composer/ComposePost.tsx
View File

@ -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,
},
})

192
src/view/com/composer/PhotoCarouselPicker.tsx 100644
View File

@ -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%',
},
})