react-native-gifted-chat/lib/ReplyPreview.js

The most complete chat UI for React Native

import React, { useMemo } from 'react';
import { StyleSheet, View, Pressable } from 'react-native';
import { Text } from 'react-native-gesture-handler';
import { Color } from './Color';
import { useColorScheme } from './hooks/useColorScheme';
export function ReplyPreview({ replyMessage, onClearReply, containerStyle, usernameStyle, textStyle, clearButtonStyle, clearButtonTextStyle, }) {
    const colorScheme = useColorScheme();
    const containerStyles = useMemo(() => [
        styles.container,
        colorScheme === 'dark' && styles.container_dark,
        containerStyle,
    ], [colorScheme, containerStyle]);
    const usernameStyles = useMemo(() => [
        styles.username,
        colorScheme === 'dark' && styles.username_dark,
        usernameStyle,
    ], [colorScheme, usernameStyle]);
    const textStyles = useMemo(() => [
        styles.text,
        colorScheme === 'dark' && styles.text_dark,
        textStyle,
    ], [colorScheme, textStyle]);
    return (<View style={containerStyles}>
      <View style={styles.border}/>
      <View style={styles.content}>
        <Text style={usernameStyles} numberOfLines={1}>
          {replyMessage.user?.name || 'User'}
        </Text>
        <Text style={textStyles} numberOfLines={1}>
          {replyMessage.text || (replyMessage.image ? 'Photo' : (replyMessage.audio ? 'Audio' : 'Message'))}
        </Text>
      </View>
      <Pressable onPress={onClearReply} style={[styles.clearButton, clearButtonStyle]} hitSlop={8}>
        <Text style={[styles.clearButtonText, clearButtonTextStyle]}>
          {'✕'}
        </Text>
      </Pressable>
    </View>);
}
const styles = StyleSheet.create({
    container: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 10,
        paddingVertical: 8,
        backgroundColor: '#f5f5f5',
        borderBottomWidth: StyleSheet.hairlineWidth,
        borderBottomColor: Color.defaultColor,
    },
    container_dark: {
        backgroundColor: '#2a2a2a',
        borderBottomColor: '#444',
    },
    border: {
        width: 3,
        height: '100%',
        backgroundColor: Color.defaultBlue,
        borderRadius: 1.5,
        marginRight: 10,
    },
    content: {
        flex: 1,
    },
    username: {
        fontSize: 13,
        fontWeight: '600',
        color: Color.defaultBlue,
        marginBottom: 2,
    },
    username_dark: {
        color: '#6eb5ff',
    },
    text: {
        fontSize: 13,
        color: '#666',
    },
    text_dark: {
        color: '#999',
    },
    clearButton: {
        width: 24,
        height: 24,
        borderRadius: 12,
        backgroundColor: Color.defaultColor,
        justifyContent: 'center',
        alignItems: 'center',
        marginLeft: 10,
    },
    clearButtonText: {
        fontSize: 12,
        fontWeight: '600',
        color: '#666',
    },
});
//# sourceMappingURL=ReplyPreview.js.map