@messenger-box/platform-mobile 10.0.3-alpha.7 → 10.0.3-alpha.72

package/src/screens/inbox/components/ExpandableInputActionSheet.tsx

@@ -0,0 +1,518 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+    View,
+    TouchableOpacity,
+    Animated,
+    Keyboard,
+    Dimensions,
+    StyleSheet,
+    PanResponder,
+    Text,
+    TouchableWithoutFeedback,
+    Modal,
+    Image,
+    TextInput,
+    KeyboardAvoidingView,
+    Platform,
+    ScrollView,
+    ActivityIndicator,
+} from 'react-native';
+import { HStack } from '@admin-layout/gluestack-ui-mobile';
+import { MaterialIcons, Ionicons, MaterialCommunityIcons } from '@expo/vector-icons';
+import colors from 'tailwindcss/colors';
+
+const { height: SCREEN_HEIGHT, width: SCREEN_WIDTH } = Dimensions.get('window');
+const MAX_HEIGHT = SCREEN_HEIGHT * 0.5; // Half screen height instead of 80%
+const BASE_MIN_HEIGHT = 150; // Default compact height without images
+const IMAGE_PREVIEW_HEIGHT = 90; // Height needed for image preview section including margins
+const HANDLE_HEIGHT = 30;
+
+interface ExpandableInputActionSheetProps {
+    isVisible: boolean;
+    onClose: () => void;
+    onSend: () => void;
+    onSelectImages: () => void;
+    text: string;
+    onChangeText: (text: string) => void;
+    textInputRef: React.RefObject<any>;
+    isSendDisabled: boolean;
+    selectedImages: Array<any>;
+    onRemoveImage: (index: number) => void;
+    loading?: boolean;
+}
+
+const ExpandableInputActionSheet = ({
+    isVisible,
+    onClose,
+    onSend,
+    onSelectImages,
+    text,
+    onChangeText,
+    textInputRef,
+    isSendDisabled,
+    selectedImages,
+    onRemoveImage,
+    loading = false,
+}: ExpandableInputActionSheetProps) => {
+    const translateY = useRef(new Animated.Value(MAX_HEIGHT)).current;
+    const [isExpanded, setIsExpanded] = useState(false);
+    const [isDragging, setIsDragging] = useState(false);
+    const inputRef = useRef<TextInput>(null);
+
+    // Calculate height based on whether we have images
+    const getMinHeight = () => {
+        return selectedImages.length > 0 ? BASE_MIN_HEIGHT + IMAGE_PREVIEW_HEIGHT : BASE_MIN_HEIGHT;
+    };
+
+    const [sheetHeight, setSheetHeight] = useState(getMinHeight());
+
+    // Update height when images array changes
+    useEffect(() => {
+        if (!isExpanded) {
+            setSheetHeight(getMinHeight());
+        }
+    }, [selectedImages.length, isExpanded]);
+
+    // Add a function to handle text input changes
+    const handleTextChange = (newText) => {
+        // Update the parent component's state
+        onChangeText(newText);
+    };
+
+    // Close animation
+    const closeSheet = () => {
+        // Ensure any text changes are properly passed to the parent component
+        // This ensures the parent component has the latest text state
+        if (inputRef.current) {
+            inputRef.current.blur();
+        }
+
+        Keyboard.dismiss();
+        Animated.timing(translateY, {
+            toValue: MAX_HEIGHT,
+            duration: 300,
+            useNativeDriver: true,
+        }).start(() => {
+            // Ensure onClose is called after animation completes
+            onClose();
+            setIsExpanded(false);
+        });
+    };
+
+    // Expand the sheet to max height
+    const expandSheet = () => {
+        setIsExpanded(true);
+        setSheetHeight(MAX_HEIGHT);
+    };
+
+    // Collapse the sheet to min height
+    const collapseSheet = () => {
+        setIsExpanded(false);
+        setSheetHeight(getMinHeight());
+    };
+
+    // Toggle expansion when handle is clicked
+    const toggleExpansion = () => {
+        if (isExpanded) {
+            collapseSheet();
+        } else {
+            expandSheet();
+        }
+    };
+
+    // Open animation
+    useEffect(() => {
+        if (isVisible) {
+            // Set initial height based on images
+            setSheetHeight(getMinHeight());
+            setIsExpanded(false);
+
+            Animated.timing(translateY, {
+                toValue: 0,
+                duration: 300,
+                useNativeDriver: true,
+            }).start(() => {
+                // Focus the text input after a small delay to ensure the sheet is visible
+                setTimeout(() => {
+                    if (inputRef.current) {
+                        inputRef.current.focus();
+                    }
+                }, 100);
+            });
+        }
+    }, [isVisible, translateY, selectedImages.length]);
+
+    // Handle keyboard showing/hiding
+    useEffect(() => {
+        const keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', (e) => {
+            // Keep height as is when keyboard shows
+            if (!isExpanded) {
+                setSheetHeight(getMinHeight());
+            }
+        });
+
+        const keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', () => {
+            if (!isDragging && !isExpanded) {
+                setSheetHeight(getMinHeight());
+            }
+        });
+
+        return () => {
+            keyboardWillShowListener.remove();
+            keyboardWillHideListener.remove();
+        };
+    }, [isDragging, isExpanded, selectedImages.length]);
+
+    // Create pan responder for drag gestures
+    const panResponder = useRef(
+        PanResponder.create({
+            onStartShouldSetPanResponder: () => true,
+            onMoveShouldSetPanResponder: (_, gestureState) => {
+                return Math.abs(gestureState.dy) > 5;
+            },
+            onPanResponderGrant: () => {
+                setIsDragging(true);
+                translateY.setOffset(-1 * translateY['_value']);
+            },
+            onPanResponderMove: (_, gestureState) => {
+                // Allow dragging down to close or up to expand
+                if (gestureState.dy > 0) {
+                    // Dragging down
+                    translateY.setValue(gestureState.dy);
+                } else if (gestureState.dy < 0 && !isExpanded) {
+                    // Dragging up (only if not already expanded)
+                    // Calculate what percentage of full expansion this drag represents
+                    const expansionPercentage = Math.min(1, Math.abs(gestureState.dy) / 200);
+                    // Calculate new height based on drag distance
+                    const additionalHeight = (MAX_HEIGHT - getMinHeight()) * expansionPercentage;
+                    const newHeight = getMinHeight() + additionalHeight;
+                    setSheetHeight(newHeight);
+                }
+            },
+            onPanResponderRelease: (_, gestureState) => {
+                translateY.flattenOffset();
+                setIsDragging(false);
+
+                // If dragged down significantly, close the sheet
+                if (gestureState.dy > 50) {
+                    closeSheet();
+                } else if (gestureState.dy < -50 && !isExpanded) {
+                    // If dragged up significantly, expand to full height
+                    expandSheet();
+                } else {
+                    // Otherwise, snap back to current position
+                    Animated.spring(translateY, {
+                        toValue: 0,
+                        useNativeDriver: true,
+                        tension: 50,
+                        friction: 7,
+                    }).start();
+
+                    // If not expanding or closing, restore height to previous state
+                    if (gestureState.dy > 0 && gestureState.dy <= 50) {
+                        // Small downward drag, keep current state
+                        if (isExpanded) {
+                            setSheetHeight(MAX_HEIGHT);
+                        } else {
+                            setSheetHeight(getMinHeight());
+                        }
+                    }
+                }
+            },
+        }),
+    ).current;
+
+    return (
+        <Modal
+            visible={isVisible}
+            transparent={true}
+            animationType="none"
+            onRequestClose={closeSheet}
+            statusBarTranslucent={true}
+        >
+            <KeyboardAvoidingView
+                style={styles.container}
+                behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+                keyboardVerticalOffset={Platform.OS === 'ios' ? 10 : 0}
+            >
+                <TouchableWithoutFeedback onPress={closeSheet}>
+                    <View style={styles.backdrop} />
+                </TouchableWithoutFeedback>
+
+                <Animated.View
+                    style={[
+                        styles.sheetContainer,
+                        {
+                            transform: [{ translateY }],
+                            height: sheetHeight,
+                        },
+                    ]}
+                >
+                    {/* Drag handle with click to expand */}
+                    <TouchableOpacity style={styles.handleContainer} onPress={toggleExpansion} activeOpacity={0.7}>
+                        <View style={styles.handle} {...panResponder.panHandlers} />
+                    </TouchableOpacity>
+
+                    {/* Main content */}
+                    <View style={styles.sheetContent}>
+                        {/* Input area at top - always visible */}
+                        <View style={styles.inputContainer}>
+                            <TextInput
+                                ref={inputRef}
+                                value={text}
+                                onChangeText={handleTextChange}
+                                style={[styles.textInput, isExpanded && styles.textInputExpanded]}
+                                placeholder="Jot something down"
+                                placeholderTextColor="#888"
+                                multiline
+                                numberOfLines={isExpanded ? 5 : 2}
+                                autoCapitalize="sentences"
+                                autoCorrect={true}
+                                blurOnSubmit={false}
+                                textAlignVertical="top"
+                            />
+                        </View>
+
+                        {/* Image preview section - immediately below input, always visible */}
+                        {selectedImages.length > 0 && (
+                            <View style={styles.imagePreviewWrapper}>
+                                <ScrollView
+                                    horizontal
+                                    showsHorizontalScrollIndicator={false}
+                                    style={styles.imagePreviewContainer}
+                                    contentContainerStyle={styles.imagePreviewContent}
+                                >
+                                    {selectedImages.map((img, index) => (
+                                        <View key={`image-preview-${index}`} style={styles.imagePreview}>
+                                            <View style={styles.imageBox}>
+                                                {img.uri || img.url ? (
+                                                    <Image
+                                                        source={{ uri: img.uri || img.url }}
+                                                        style={{ width: '100%', height: '100%' }}
+                                                        resizeMode="cover"
+                                                    />
+                                                ) : (
+                                                    <View
+                                                        style={{
+                                                            width: '100%',
+                                                            height: '100%',
+                                                            backgroundColor: colors.gray[200],
+                                                        }}
+                                                    />
+                                                )}
+                                            </View>
+                                            <TouchableOpacity
+                                                onPress={() => onRemoveImage(index)}
+                                                style={styles.removeImageButton}
+                                            >
+                                                <Ionicons name="close" size={16} color="white" />
+                                            </TouchableOpacity>
+                                        </View>
+                                    ))}
+                                </ScrollView>
+                            </View>
+                        )}
+
+                        {/* Extra content area - only in expanded mode */}
+                        {isExpanded && (
+                            <ScrollView style={styles.extraContentArea} showsVerticalScrollIndicator={false}>
+                                {/* This area only appears when expanded */}
+                                <View style={styles.expandedContentPlaceholder} />
+                            </ScrollView>
+                        )}
+
+                        {/* Bottom controls always at bottom */}
+                        <HStack style={styles.controlsContainer}>
+                            <View style={styles.leftControls}>
+                                <TouchableOpacity onPress={onSelectImages} style={styles.actionButton}>
+                                    <MaterialIcons name="add" size={24} color="#888" />
+                                </TouchableOpacity>
+                            </View>
+
+                            <TouchableOpacity
+                                onPress={() => {
+                                    // Make sure input is focused and synchronized before sending
+                                    if (inputRef.current) {
+                                        // Force a blur to commit any pending text changes
+                                        inputRef.current.blur();
+                                        // Short timeout to ensure state is updated
+                                        setTimeout(() => {
+                                            onSend();
+                                        }, 50);
+                                    } else {
+                                        onSend();
+                                    }
+                                }}
+                                disabled={isSendDisabled || loading}
+                                style={styles.sendIconContainer}
+                            >
+                                <View style={{ padding: 4 }}>
+                                    {loading ? (
+                                        <View
+                                            style={{
+                                                width: 32,
+                                                height: 32,
+                                                alignItems: 'center',
+                                                justifyContent: 'center',
+                                            }}
+                                        >
+                                            <ActivityIndicator size="small" color={colors.blue[400]} />
+                                        </View>
+                                    ) : (
+                                        <MaterialCommunityIcons
+                                            name="send-circle"
+                                            size={32}
+                                            color={isSendDisabled ? colors.gray[400] : colors.blue[500]}
+                                        />
+                                    )}
+                                </View>
+                            </TouchableOpacity>
+                        </HStack>
+                    </View>
+                </Animated.View>
+            </KeyboardAvoidingView>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'flex-end',
+    },
+    backdrop: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0,0,0,0.5)',
+    },
+    sheetContainer: {
+        backgroundColor: 'white',
+        borderTopLeftRadius: 20,
+        borderTopRightRadius: 20,
+        overflow: 'hidden',
+        paddingBottom: 15,
+        elevation: 5, // For Android
+        shadowColor: '#000', // For iOS
+        shadowOffset: { width: 0, height: -3 },
+        shadowOpacity: 0.2,
+        shadowRadius: 5,
+        width: SCREEN_WIDTH,
+    },
+    handleContainer: {
+        height: HANDLE_HEIGHT,
+        width: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    handle: {
+        width: 40,
+        height: 5,
+        borderRadius: 3,
+        backgroundColor: '#ddd',
+    },
+    sheetContent: {
+        flex: 1,
+        paddingHorizontal: 15,
+        paddingTop: 0,
+        flexDirection: 'column',
+        justifyContent: 'space-between',
+    },
+    inputContainer: {
+        backgroundColor: '#fff',
+        borderRadius: 12,
+        padding: 12,
+        marginTop: 5,
+        // marginBottom: 10,
+    },
+    textInput: {
+        backgroundColor: 'transparent',
+        borderWidth: 0,
+        fontSize: 16,
+        color: '#444',
+        paddingVertical: 0,
+        paddingHorizontal: 0,
+        minHeight: 40,
+    },
+    textInputExpanded: {
+        minHeight: 80,
+        maxHeight: 200,
+    },
+    imagePreviewWrapper: {
+        marginBottom: 10,
+    },
+    imagePreviewContainer: {
+        height: 65,
+    },
+    imagePreviewContent: {
+        alignItems: 'center',
+        paddingRight: 5,
+    },
+    extraContentArea: {
+        flex: 1,
+        marginBottom: 10,
+    },
+    expandedContentPlaceholder: {
+        height: 20,
+    },
+    controlsContainer: {
+        height: 45,
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingHorizontal: 0,
+        flexDirection: 'row',
+        // borderTopWidth: 1,
+        // borderTopColor: colors.gray[200],
+        // paddingTop: 5,
+        paddingBottom: 10,
+    },
+    leftControls: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    actionButton: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: 8,
+        // padding: 6,
+    },
+    imagePreview: {
+        width: 60,
+        height: 60,
+        marginRight: 8,
+        position: 'relative',
+    },
+    imageBox: {
+        width: '100%',
+        height: '100%',
+        borderRadius: 8,
+        overflow: 'hidden',
+        backgroundColor: colors.gray[200],
+    },
+    removeImageButton: {
+        position: 'absolute',
+        top: -5,
+        right: -5,
+        backgroundColor: 'rgba(0,0,0,0.6)',
+        borderRadius: 12,
+        width: 20,
+        height: 20,
+        alignItems: 'center',
+        justifyContent: 'center',
+        zIndex: 10,
+    },
+    sendIconContainer: {
+        width: 48,
+        height: 48,
+        alignItems: 'center',
+        justifyContent: 'center',
+        // padding: 6,
+    },
+});
+
+export default ExpandableInputActionSheet;