Almost done with rewrite

This commit is contained in:
2024-10-15 16:58:01 -05:00
parent 5549cbbe10
commit 701315011b
10 changed files with 277 additions and 14 deletions

View File

@ -0,0 +1,52 @@
import { MaterialIcons } from '@expo/vector-icons';
import React from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { ThemedView } from '@/components/theme/Theme';
import {
getLocationAsync,
pickImageAsync,
takePictureAsync,
} from '@/components/chat/mediaUtils';
export default class AccessoryBar extends React.Component<any> {
render () {
const { onSend, isTyping } = this.props;
return (
<ThemedView style={styles.container}>
<Button onPress={() => pickImageAsync(onSend)} name='photo' />
<Button onPress={() => takePictureAsync(onSend)} name='camera' />
<Button onPress={() => getLocationAsync(onSend)} name='my-location' />
<Button
onPress={() => {
isTyping()
}}
name='chat'
/>
</ThemedView>
);
}
};
const Button = ({
onPress,
size = 30,
color = 'rgba(255,255,255,0.8)',
...props
}) => (
<TouchableOpacity onPress={onPress}>
<MaterialIcons size={size} color={color} {...props} />
</TouchableOpacity>
);
const styles = StyleSheet.create({
container: {
height: 45,
width: '100%',
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
borderTopWidth: StyleSheet.hairlineWidth,
borderTopColor: 'rgba(255,255,255,0.3)',
},
});

View File

@ -0,0 +1,109 @@
import React, { useCallback } from 'react';
import {
StyleProp,
ViewStyle,
TextStyle,
StyleSheet,
TouchableOpacity
} from 'react-native';
import { ThemedText, ThemedView } from '@/components/theme/Theme';
import { useActionSheet } from '@expo/react-native-action-sheet';
import {
getLocationAsync,
pickImageAsync,
takePictureAsync,
} from '@/components/chat/mediaUtils';
type Props = {
renderIcon?: () => React.ReactNode;
wrapperStyle?: StyleProp<ViewStyle>;
containerStyle?: StyleProp<ViewStyle>;
iconTextStyle?: StyleProp<TextStyle>;
onSend: (messages: unknown) => void;
};
const CustomActions = ({
renderIcon,
iconTextStyle,
containerStyle,
wrapperStyle,
onSend,
}: Props) => {
const { showActionSheetWithOptions } = useActionSheet();
const onActionPress = useCallback(() => {
const options = [
'Choose From Library',
'Take Picture',
'Send Location',
'Cancel',
];
const cancelButtonIndex = options.length - 1;
showActionSheetWithOptions(
{
options,
cancelButtonIndex,
},
async (buttonIndex) => {
switch (buttonIndex) {
case 0:
pickImageAsync(onSend);
return;
case 1:
takePictureAsync(onSend);
return;
case 2:
getLocationAsync(onSend);
}
}
)
}, [showActionSheetWithOptions, onSend]);
const renderIconComponent = useCallback(() => {
if (renderIcon) return renderIcon();
return (
<ThemedView style={[styles.wrapper, wrapperStyle]}>
<ThemedText style={[styles.iconText, iconTextStyle]}>
+
</ThemedText>
</ThemedView>
);
}, [renderIcon, wrapperStyle, iconTextStyle]);
return (
<TouchableOpacity
style={[styles.container, containerStyle]}
onPress={onActionPress}
>
{renderIconComponent()}
</TouchableOpacity>
);
};
export default CustomActions
const styles = StyleSheet.create({
container: {
width: 26,
height: 26,
marginLeft: 10,
marginBottom: 10,
},
wrapper: {
borderRadius: 13,
borderColor: '#b2b2b2',
borderWidth: 2,
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
iconText: {
color: '#b2b2b2',
fontWeight: 'bold',
fontSize: 16,
lineHeight: 16,
backgroundColor: 'transparent',
textAlign: 'center',
},
})

View File

View File

View File

View File

View File

@ -0,0 +1,65 @@
import { Alert } from 'react-native';
import * as Linking from 'expo-linking';
import * as Location from 'expo-location';
import * as Permissions from 'expo-permissions';
import * as ImagePicker from 'expo-image-picker';
export const getPermissionAsync = async (
permission: Permissions.PermissionType) => {
const {status} = await Permissions.askAsync(permission);
if (status !== 'granted') {
const permissionName = permission.toLowerCase().replace('_', ' ');
Alert.alert(
`Cannot access ${permissionName}`,
`If you would like to use this feature, you will need to enable ` +
`the ${permissionName} permission in your phone's settings.`,
[
{
text: 'Let\'s go!',
onPress: () => Linking.openURL('app-settings:'),
},
{
text: 'Nevermind',
onPress: () => {},
style: 'cancel'
},
],
{ cancelable: true }
);
return false;
}
return true;
};
export const getLocationAsync = async (
onSend: (locations: { location: Location.LocationObjectCoords }[]) => void) => {
const response = await Location.requestForegroundPermissionsAsync();
if (!response.granted) return;
const location = await Location.getCurrentPositionAsync();
if (!location) return;
onSend([{ location: location.coords }]);
};
export const pickImageAsync = async (onSend: (images: {image: string}[]) => void) => {
const response = await ImagePicker.requestMediaLibraryPermissionsAsync();
if (!response.granted) return;
const result = await ImagePicker.launchImageLibraryAsync({
allowsEditing: true,
aspect: [4, 3],
});
if (result.canceled) return;
const images = result.assets.map(({ uri: image }) => ({ image }));
onSend(images);
};
export const takePictureAsync = async (onSend: (images: {image: string}[]) => void) => {
const response = await ImagePicker.requestCameraPermissionsAsync();
if (!response.granted) return;
const result = await ImagePicker.launchCameraAsync({
allowsEditing: true,
aspect: [4, 3],
});
if (result.canceled) return;
const images = result.assets.map(({ uri: image }) => ({ image }));
onSend(images);
};