@livelike/react-native
Version:
LiveLike React Native package
206 lines • 6.51 kB
JavaScript
import React, { useCallback, useState } from 'react';
import { TextInput, View, StyleSheet, Image, TouchableOpacity, Keyboard } from 'react-native';
import { useAnalytics, useChatMessageActions, useChatRoomState, useCustomFontStyle, useStyles, useTheme, useTrackKeyboardEffect } from '../../hooks';
import { LLComposerSendButton } from './LLComposerSendButton';
import { LLGifPicker } from '../LLGifPicker';
import { LLStickerPicker } from '../LLStickerPicker';
export function LLChatMessageComposer(_ref) {
let {
roomId,
styles: stylesProp,
TextInputComponent = TextInput,
GifPickerComponentStyles,
StickerPickerComponentStyles,
SendButtonComponentStyles,
StickerPickerComponent = LLStickerPicker,
GifPickerComponent = LLGifPicker,
SendButtonComponent = LLComposerSendButton
} = _ref;
const [inputValue, setInputValue] = useState('');
const [isGifPickerVisible, setIsGifPickerVisible] = useState(false);
const [isStickerPickerVisible, setIsStickerPickerVisible] = useState(false);
const [isSendingMessage, setIsSendingMessage] = useState(false);
const {
theme,
themeAssets
} = useTheme();
const messageComposerStyles = useStyles({
componentStylesFn: getMessageComposerStyles,
stylesProp
});
const {
sendChatMessage
} = useChatMessageActions({
roomId
});
const {
userAvatarUrl
} = useChatRoomState({
roomId
});
const {
trackEvent
} = useAnalytics();
const composerInputStyles = useCustomFontStyle({
style: messageComposerStyles.composerInput
});
useTrackKeyboardEffect();
const onSendMessage = useCallback(() => {
const textValue = inputValue.trim();
if (!textValue) {
return;
}
setIsSendingMessage(true);
sendChatMessage({
roomId,
message: textValue,
sender_image_url: userAvatarUrl
}).then(messageRes => {
setInputValue('');
}).finally(() => {
setIsSendingMessage(false);
});
}, [roomId, inputValue, sendChatMessage, userAvatarUrl]);
const onSelectSticker = useCallback(stickerShortcode => {
sendChatMessage({
roomId,
message: `:${stickerShortcode}:`,
sender_image_url: userAvatarUrl
}).then(imageMessageRes => {
setIsStickerPickerVisible(false);
});
}, [roomId, sendChatMessage, userAvatarUrl]);
const onSelectGif = useCallback(gif => {
sendChatMessage({
roomId,
sender_image_url: userAvatarUrl,
image_url: gif.images.downsized.url,
image_width: gif.images.downsized.width,
image_height: gif.images.downsized.height
}).then(imageMessageRes => {
Keyboard.dismiss();
setIsGifPickerVisible(false);
});
}, [sendChatMessage, roomId, userAvatarUrl]);
const onStickerPanelOpen = useCallback(() => {
trackEvent('Sticker Panel Opened', {
roomId
});
}, [roomId]);
const onStickerPanelClose = useCallback(() => {
trackEvent('Sticker Panel Closed', {
roomId
});
}, [roomId]);
const onGifPanelOpen = useCallback(() => {
trackEvent('GIF Panel Opened', {
roomId
});
}, [roomId]);
const onGifPanelClose = useCallback(() => {
trackEvent('GIF Panel Closed', {
roomId
});
}, [roomId]);
const toggleStickerPicker = useCallback(() => {
if (!isStickerPickerVisible) {
Keyboard.dismiss();
setIsStickerPickerVisible(true);
} else {
setIsStickerPickerVisible(false);
}
}, [isStickerPickerVisible]);
const toggleGifPicker = useCallback(() => {
if (!isGifPickerVisible) {
Keyboard.dismiss();
setIsGifPickerVisible(true);
} else {
setIsGifPickerVisible(false);
}
}, [isGifPickerVisible]);
const onInputPressIn = useCallback(() => {
if (isStickerPickerVisible) {
setIsStickerPickerVisible(false);
} else if (isGifPickerVisible) {
setIsGifPickerVisible(false);
}
}, [isStickerPickerVisible, isGifPickerVisible]);
if (isGifPickerVisible) {
return /*#__PURE__*/React.createElement(GifPickerComponent, {
visible: isGifPickerVisible,
onPanelOpen: onGifPanelOpen,
onPanelClose: onGifPanelClose,
onSelectGif: onSelectGif,
closeGifPicker: toggleGifPicker,
styles: GifPickerComponentStyles
});
}
if (isStickerPickerVisible) {
return /*#__PURE__*/React.createElement(StickerPickerComponent, {
visible: isStickerPickerVisible,
onPanelOpen: onStickerPanelOpen,
onPanelClose: onStickerPanelClose,
onSelectSticker: onSelectSticker,
closeStickerPicker: toggleStickerPicker,
styles: StickerPickerComponentStyles
});
}
return /*#__PURE__*/React.createElement(View, {
style: messageComposerStyles.composerContainer
}, /*#__PURE__*/React.createElement(TextInputComponent, {
style: composerInputStyles,
onChangeText: setInputValue,
onPressIn: onInputPressIn,
value: inputValue,
editable: !isSendingMessage,
placeholder: "Start typing",
placeholderTextColor: theme.secondaryText
}), inputValue.length === 0 ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: toggleGifPicker,
accessibilityLabel: "Gifs",
disabled: isSendingMessage
}, /*#__PURE__*/React.createElement(Image, {
style: messageComposerStyles.composerIcon,
source: themeAssets.gif
})), /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: toggleStickerPicker,
accessibilityLabel: "Stickers",
disabled: isSendingMessage
}, /*#__PURE__*/React.createElement(Image, {
style: messageComposerStyles.composerIcon,
source: themeAssets.sticker
}))) : /*#__PURE__*/React.createElement(SendButtonComponent, {
onPress: onSendMessage,
disabled: isSendingMessage || inputValue.length === 0,
isSendingMessage: isSendingMessage,
styles: SendButtonComponentStyles
}));
}
const getMessageComposerStyles = _ref2 => {
let {
theme
} = _ref2;
return StyleSheet.create({
composerContainer: {
flexDirection: 'row',
alignItems: 'center',
padding: 10,
backgroundColor: theme.secondaryBackground
},
composerInput: {
flex: 1,
height: 45,
borderRadius: 10,
paddingHorizontal: 12,
marginRight: 10,
color: theme.text,
backgroundColor: theme.background
},
composerIcon: {
height: 24,
width: 24,
marginHorizontal: 10
}
});
};
//# sourceMappingURL=LLChatMessageComposer.js.map