@cometchat/chat-uikit-react-native
Version:
Ready-to-use Chat UI Components for React Native
47 lines • 2.39 kB
JavaScript
import React from "react";
import { TextInput, View, } from "react-native";
import { useTheme } from "../../../theme";
import { localize } from "../../resources/CometChatLocalize";
import { CometChatUIEventHandler, CometChatUIEvents } from "../../events";
import { ViewAlignment } from "../../constants/UIKitConstants";
/**
* CometChatMessageInput renders a message input field with a divider and action buttons.
* It supports auxiliary, secondary, and primary buttons along with search input functionality.
*
* Props for the component.
* The rendered message input component.
*/
export const CometChatMessageInput = (props) => {
const theme = useTheme();
const { text = "", placeHolderText = localize("ENTER_YOUR_MESSAGE_HERE"), onChangeText, style, SecondaryButtonView, AuxiliaryButtonView, auxiliaryButtonAlignment = "left", PrimaryButtonView, onSelectionChange, messageInputRef, VoiceRecordingButtonView, } = props;
return (<View style={style?.containerStyle}>
<TextInput ref={messageInputRef} style={style?.textStyle} onChangeText={onChangeText} placeholderTextColor={style?.placeHolderTextColor} multiline textAlignVertical='top' placeholder={placeHolderText} onSelectionChange={onSelectionChange} onFocus={() => {
CometChatUIEventHandler.emitUIEvent(CometChatUIEvents.hidePanel, {
alignment: ViewAlignment.composerBottom,
child: () => null, // Hide the panel content.
});
}}>
{text}
</TextInput>
<View style={style?.dividerStyle}/>
<View style={{
flexDirection: "row",
justifyContent: "space-between",
borderTopColor: theme.color.background1,
paddingHorizontal: 12,
paddingBottom: 8,
paddingTop: 4,
}}>
<View style={{ flexDirection: "row", alignItems: "center", gap: theme.spacing.spacing.s4 }}>
{SecondaryButtonView}
{VoiceRecordingButtonView}
{auxiliaryButtonAlignment === "left" && AuxiliaryButtonView}
</View>
<View style={{ flexDirection: "row", alignItems: "center", gap: theme.spacing.spacing.s4 }}>
{auxiliaryButtonAlignment === "right" && AuxiliaryButtonView}
{PrimaryButtonView && <PrimaryButtonView />}
</View>
</View>
</View>);
};
//# sourceMappingURL=CometChatMessageInput.js.map