110 lines
2.4 KiB
TypeScript
110 lines
2.4 KiB
TypeScript
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',
|
|
},
|
|
})
|