@cometchat/chat-uikit-react-native/lib/shared/views/CometChatList/Header.js

Ready-to-use Chat UI Components for React Native

import React from "react";
import { Text, TextInput, TouchableOpacity, View, } from "react-native";
import { useTheme } from "../../../theme";
import { Icon } from "../../icons/Icon";
import styles from "./styles";
/**
 * Header component renders the top portion of the list with a title, back button, selection actions,
 * AppBar options, and a search box.
 *
 *   Props to customize the header.
 *   The rendered header component.
 */
export default function Header({ selectedCount = 0, hideBackButton = true, onBack = () => { }, AppBarOptions, shouldSelect = false, hideSubmitButton = false, onCancel = () => { }, onConfirm = () => { }, hideSearch = false, searchHandler = () => { }, searchInput = "", onSubmitEditing = () => { }, backButtonIcon, backButtonIconStyle = {}, title = "", titleStyle = {}, titleViewStyle, containerStyle, searchPlaceholderText = "Search", confirmSelectionStyle, selectionCancelStyle, titleSeparatorStyle = {}, searchStyle, hideHeader = false, backButtonIconContainerStyle = { marginLeft: 10 }, }) {
    const theme = useTheme();
    return (<View style={[styles.listBaseHeaderStyle, containerStyle]}>
      {!hideHeader && (<View style={styles.upperContainer}>
          <View style={{ flexDirection: "row", ...titleSeparatorStyle }}>
            {/* Render back button and title if not in selection mode */}
            {!shouldSelect && (!hideBackButton || title.length !== 0) && (<View style={styles.headerLeftContainer}>
                {!hideBackButton && (<TouchableOpacity onPress={onBack}>
                    <Icon containerStyle={backButtonIconContainerStyle} name='arrow-back-fill' size={backButtonIconStyle.width} height={backButtonIconStyle.height} width={backButtonIconStyle.width} color={backButtonIconStyle.tintColor} icon={backButtonIcon} imageStyle={backButtonIconStyle}/>
                  </TouchableOpacity>)}
                {title.length !== 0 && (<View style={titleViewStyle}>
                    <Text ellipsizeMode='tail' numberOfLines={1} style={[{ color: theme.color.textPrimary }, titleStyle]}>
                      {title}
                    </Text>
                  </View>)}
              </View>)}

            {/* Render selection mode actions: cancel button and selected count */}
            {shouldSelect && (<View style={[
                    { paddingHorizontal: theme.spacing.spacing.s4 },
                    styles.headerLeftContainer,
                ]}>
                <TouchableOpacity onPress={onCancel}>
                  <Icon name='close' size={selectionCancelStyle?.iconStyle?.width || 24} height={selectionCancelStyle?.iconStyle?.height || 24} width={selectionCancelStyle?.iconStyle?.width || 24} color={selectionCancelStyle?.iconStyle?.tintColor || theme.color.iconPrimary} icon={selectionCancelStyle?.icon} imageStyle={selectionCancelStyle?.iconStyle} containerStyle={selectionCancelStyle?.iconContainerStyle}/>
                </TouchableOpacity>
                <Text style={[styles.selectedCountText, titleStyle, theme.typography.heading2.medium]}>
                  {selectedCount}
                </Text>
              </View>)}

            {/* Render AppBar options or the selection confirm (tick) icon */}
            <View style={styles.headerRightContainer}>
              {!shouldSelect && AppBarOptions && <AppBarOptions />}
              {selectedCount > 0 && shouldSelect && !hideSubmitButton && (<TouchableOpacity onPress={onConfirm} style={{ paddingHorizontal: 20 }}>
                  <Icon name='list-item-check' size={confirmSelectionStyle?.iconStyle?.width || 24} height={confirmSelectionStyle?.iconStyle?.height || 24} width={confirmSelectionStyle?.iconStyle?.width || 24} color={confirmSelectionStyle?.iconStyle?.tintColor || theme.color.iconPrimary} icon={confirmSelectionStyle?.icon} imageStyle={confirmSelectionStyle?.iconStyle} containerStyle={confirmSelectionStyle?.iconContainerStyle}/>
                </TouchableOpacity>)}
            </View>
          </View>
        </View>)}

      {/* Render search box */}
      {!hideSearch && (<View style={[
                {
                    backgroundColor: theme.color.background3,
                    borderRadius: theme.spacing.radius.max,
                    paddingHorizontal: theme.spacing.spacing.s3,
                    marginVertical: theme.spacing.spacing.s2,
                    gap: theme.spacing.spacing.s1,
                },
                searchStyle?.containerStyle,
            ]}>
          <Icon name='search-fill' size={searchStyle?.iconStyle?.width || 24} height={searchStyle?.iconStyle?.height || 24} width={searchStyle?.iconStyle?.width || 24} color={searchStyle?.iconStyle?.tintColor || theme.color.iconSecondary} icon={searchStyle?.icon} imageStyle={searchStyle?.iconStyle}/>

          <TextInput placeholder={searchPlaceholderText} placeholderTextColor={searchStyle?.placehodlerTextStyle?.color || theme.color.textTertiary} onChangeText={searchHandler} returnKeyType='search' value={searchInput} numberOfLines={1} style={[
                {
                    flex: 1,
                    color: theme.color.textPrimary,
                    ...theme.typography.heading4.regular,
                },
                searchStyle?.textStyle,
            ]} onSubmitEditing={onSubmitEditing}/>
        </View>)}
    </View>);
}
//# sourceMappingURL=Header.js.map