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

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

@@ -0,0 +1,460 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+    View,
+    TouchableOpacity,
+    Keyboard,
+    Dimensions,
+    StyleSheet,
+    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 SelectedImage {
+    uri?: string;
+    url?: string;
+    [key: string]: any;
+}
+
+interface ExpandableInputProps {
+    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;
+    onHeightChange?: (height: number) => void;
+}
+
+const ImagePreview: React.FC<{
+    images: SelectedImage[];
+    onRemove: (index: number) => void;
+}> = React.memo(({ images, onRemove }) => (
+    <View style={styles.imagePreviewWrapper}>
+        <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            style={styles.imagePreviewContainer}
+            contentContainerStyle={styles.imagePreviewContent}
+        >
+            {images.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={() => onRemove(index)}
+                        style={styles.removeImageButton}
+                        accessibilityLabel="Remove image"
+                    >
+                        <Ionicons name="close" size={16} color="white" />
+                    </TouchableOpacity>
+                </View>
+            ))}
+        </ScrollView>
+    </View>
+));
+
+const SendButton: React.FC<{
+    onSend: () => void;
+    disabled: boolean;
+    loading: boolean;
+}> = React.memo(({ onSend, disabled, loading }) => (
+    <TouchableOpacity
+        onPress={onSend}
+        disabled={disabled || loading}
+        style={styles.sendIconContainer}
+        accessibilityLabel="Send message"
+    >
+        <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={disabled ? colors.gray[400] : colors.blue[500]}
+                />
+            )}
+        </View>
+    </TouchableOpacity>
+));
+
+const ExpandableInput = ({
+    onClose,
+    onSend,
+    onSelectImages,
+    text,
+    onChangeText,
+    textInputRef,
+    isSendDisabled,
+    selectedImages,
+    onRemoveImage,
+    loading = false,
+    onHeightChange,
+}: ExpandableInputProps) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const inputRef = useRef<TextInput>(null);
+    const [isInputFocused, setIsInputFocused] = useState(false);
+
+    // 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]);
+
+    // Memoize handlers
+    const handleTextChange = React.useCallback(
+        (newText) => {
+            onChangeText(newText);
+        },
+        [onChangeText],
+    );
+
+    const handleSend = React.useCallback(() => {
+        if (inputRef.current) {
+            inputRef.current.blur();
+            setTimeout(() => {
+                onSend();
+            }, 50);
+        } else {
+            onSend();
+        }
+    }, [onSend]);
+
+    // Close sheet (no animation)
+    const closeSheet = () => {
+        if (inputRef.current) {
+            inputRef.current.blur();
+        }
+        Keyboard.dismiss();
+        setIsExpanded(false);
+        setSheetHeight(getMinHeight());
+        onClose();
+    };
+
+    // 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();
+        }
+    };
+
+    // Always show: set initial height and focus on mount
+    useEffect(() => {
+        setSheetHeight(getMinHeight());
+        setIsExpanded(false);
+        setTimeout(() => {
+            if (inputRef.current) {
+                inputRef.current.focus();
+            }
+        }, 100);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // Handle keyboard showing/hiding
+    useEffect(() => {
+        const keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', (e) => {
+            if (!isExpanded) {
+                setSheetHeight(getMinHeight());
+            }
+        });
+
+        const keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', () => {
+            if (!isExpanded) {
+                setSheetHeight(getMinHeight());
+            }
+        });
+
+        return () => {
+            keyboardWillShowListener.remove();
+            keyboardWillHideListener.remove();
+        };
+    }, [isExpanded, selectedImages.length]);
+
+    return (
+        <KeyboardAvoidingView
+            style={styles.container}
+            behavior={Platform.OS === 'ios' ? 'padding' : undefined}
+            keyboardVerticalOffset={Platform.OS === 'ios' ? 120 : 0}
+        >
+            <View
+                style={[
+                    styles.sheetContainer,
+                    {
+                        height: sheetHeight,
+                    },
+                ]}
+                onLayout={(event) => {
+                    if (onHeightChange) {
+                        onHeightChange(event.nativeEvent.layout.height);
+                    }
+                }}
+            >
+                {/* Handle for expand/collapse */}
+                {isInputFocused && (
+                    <TouchableOpacity
+                        style={styles.handleContainer}
+                        onPress={toggleExpansion}
+                        accessibilityLabel="Expand or collapse input"
+                        activeOpacity={0.7}
+                    >
+                        <View style={styles.handle} />
+                    </TouchableOpacity>
+                )}
+                {/* Main content */}
+                <View style={styles.sheetContent}>
+                    {/* Input area at top - always visible */}
+                    <View style={styles.inputContainer}>
+                        <TextInput
+                            ref={textInputRef || 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"
+                            accessibilityLabel="Message input"
+                            onFocus={() => setIsInputFocused(true)}
+                            onBlur={() => setIsInputFocused(false)}
+                        />
+                    </View>
+                    {/* Image preview section */}
+                    {selectedImages.length > 0 && <ImagePreview images={selectedImages} onRemove={onRemoveImage} />}
+                    {/* Extra content area - only in expanded mode */}
+                    {isExpanded && (
+                        <ScrollView style={styles.extraContentArea} showsVerticalScrollIndicator={false}>
+                            <View style={styles.expandedContentPlaceholder} />
+                        </ScrollView>
+                    )}
+                    {/* Bottom controls always at bottom */}
+                    <HStack style={styles.controlsContainer}>
+                        <View style={styles.leftControls}>
+                            <TouchableOpacity
+                                onPress={onSelectImages}
+                                style={styles.actionButton}
+                                accessibilityLabel="Add images"
+                            >
+                                <MaterialIcons name="add" size={24} color="#888" />
+                            </TouchableOpacity>
+                        </View>
+                        <SendButton onSend={handleSend} disabled={isSendDisabled} loading={loading} />
+                    </HStack>
+                </View>
+            </View>
+        </KeyboardAvoidingView>
+    );
+};
+
+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',
+        borderTopWidth: 1,
+        borderTopColor: colors.gray[200],
+    },
+    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 ExpandableInput;