chat 1.0.6 → 3.0.0

package/src/components/Chat/index.tsx

@@ -1,592 +0,0 @@
-import React, {
-	useMemo,
-	useRef,
-	useEffect,
-	useCallback,
-	MutableRefObject,
-} from 'react'
-import {
-	FlatList,
-	ListRenderItemInfo,
-	SafeAreaView,
-	View,
-	StyleSheet,
-	Animated,
-	ViewToken,
-	TextInput,
-	KeyboardAvoidingView,
-	Alert,
-	Clipboard,
-} from 'react-native'
-import {
-	Transitioning,
-	Transition,
-	TransitioningView,
-} from 'react-native-reanimated'
-import { NewMessageModel } from '../../classes/Message/types'
-import Message from './Message'
-import {
-	ChatProps,
-	MessageProps,
-	ComposerProps,
-	SystemMessageProps,
-	ChatRef,
-} from './types'
-import Composer from './Composer'
-import SystemMessage from './SystemMessage'
-import TypingFooter from './TypingFooter'
-
-function Chat<MessageModel extends NewMessageModel = NewMessageModel>(
-	props: ChatProps<MessageModel>
-) {
-	const checkForBrokenProps = () => {
-		if (!props.user.name) {
-			console.error(
-				'Breaking error: Messages component is missing a name in the user prop.'
-			)
-		}
-		if (!props.user.id) {
-			console.error(
-				'Breaking error: Messages component is missing an id in the user prop.'
-			)
-		}
-	}
-	checkForBrokenProps()
-	// "constructor" variables
-	const { chatRef: ref } = props
-	const inputRef = useRef<TextInput>()
-	const flatListRef = useRef<typeof Animated.ScrollView>()
-	// const flatListRef = useRef<typeof Animated.FlatList<MessageModel>>()
-	const componentRef = useRef<ChatRef<MessageModel>>()
-
-	useEffect(() => {
-		componentRef.current = {
-			focusInput: () => inputRef.current?.focus(),
-			blurInput: () => inputRef.current?.blur(),
-			scrollToEnd: () => flatListRef.current?.getNode().scrollToEnd(),
-			scrollToIndex: params =>
-				flatListRef.current?.getNode().scrollToIndex(params),
-			scrollToItem: params =>
-				flatListRef.current?.getNode().scrollToItem(params),
-			scrollToOffset: params =>
-				flatListRef.current?.getNode().scrollToOffset(params),
-		}
-		if (ref) ref.current = componentRef.current
-	})
-
-	// if (!componentRef.current) {
-	// 	componentRef.current = {
-	// 		focusInput: () => inputRef.current && inputRef.current.focus(),
-	// 		blurInput: () => inputRef.current && inputRef.current.blur(),
-	// 		scrollToEnd: () =>
-	// 			flatListRef.current && flatListRef.current.getNode().scrollToEnd(),
-	// 		scrollToIndex: params =>
-	// 			flatListRef.current &&
-	// 			flatListRef.current.getNode().scrollToIndex(params),
-	// 		scrollToItem: params =>
-	// 			flatListRef.current &&
-	// 			flatListRef.current.getNode().scrollToItem(params),
-	// 		scrollToOffset: params =>
-	// 			flatListRef.current &&
-	// 			flatListRef.current.getNode().scrollToOffset(params),
-	// 	}
-	// 	if (ref) ref.current = componentRef.current
-	// }
-
-	// used to shuffle/transition the inbox when it changes
-	const transitionRef = useRef<TransitioningView>(null)
-	const mounted = useRef(false)
-
-	// track animated position of scroll
-	const scrollY: Animated.Value = useMemo(
-		() => props.animatedScrollNode || new Animated.Value(0),
-		[props.animatedScrollNode]
-	)
-
-	// upate position of scroll variable
-	const onScroll = Animated.event(
-		[{ nativeEvent: { contentOffset: { y: scrollY } } }],
-		{ useNativeDriver: true }
-	)
-
-	const messagesRef = useRef(props.messages)
-
-	// effect to handle new messages coming in / scrolling to bottom
-	// TODO we may have to use getNode() for the animated flatlist, right?
-	useEffect(() => {
-		const latestMessageIsNew =
-			(props.messages[0] && props.messages[0].id) !==
-			(messagesRef.current[0] && messagesRef.current[0].id)
-		// const numberOfMessagesIncreased =
-		// 	props.messages.length > messagesRef.current.length
-		if (
-			latestMessageIsNew &&
-			// numberOfMessagesIncreased &&
-			flatListRef.current
-		) {
-			const iSentLastMessage =
-				props.messages[0] &&
-				props.messages[0].user &&
-				props.messages[0].user.id === props.user.id
-			if (iSentLastMessage && !props.disableScrollToBottomOnSend)
-				flatListRef.current.getNode().scrollToOffset({ offset: 0 })
-			else if (props.scrollToBottomOnAllNewMessages)
-				flatListRef.current.getNode().scrollToOffset({ offset: 0 })
-		}
-	}, [
-		props.disableScrollToBottomOnSend,
-		props.scrollToBottomOnAllNewMessages,
-		props.messages,
-		props.user.id,
-	])
-
-	// 💩 a super way of handling viewable items not on the fly. (easy way to track viewed messages)
-	// TODO abstract this to a different custom hook.
-	const onViewableItemsChangedRef = useRef(props.onViewableItemsChanged)
-	const onViewMessagesRef = useRef(props.onViewMessages)
-	// track the messages in a non-array too for fast querying.
-	const messagesDict = useRef<{ [id: string]: MessageModel }>({})
-	// ...onto the effect 😅
-	useEffect(() => {
-		// make updated methods available to onviewable items changed
-		onViewableItemsChangedRef.current = props.onViewableItemsChanged
-		onViewMessagesRef.current = props.onViewMessages
-		messagesRef.current = props.messages
-		messagesDict.current = {}
-		if (props.messages) {
-			props.messages.forEach(message => {
-				messagesDict.current[message.id] = message
-			})
-		}
-	}, [props.onViewableItemsChanged, props.onViewMessages, props.messages])
-
-	const onViewableItemsChanged: FlatList<
-		MessageModel
-	>['props']['onViewableItemsChanged'] = useCallback(
-		(info: { viewableItems: ViewToken[]; changed: ViewToken[] }) => {
-			if (onViewableItemsChangedRef.current)
-				onViewableItemsChangedRef.current(info)
-
-			if (onViewMessagesRef.current) {
-				const visibleMessages = info.viewableItems
-					.filter(i => i.isViewable)
-					.map(i => i.item)
-				const latestMessageId =
-					messagesRef.current &&
-					messagesRef.current[0] &&
-					messagesRef.current[0].id
-				onViewMessagesRef.current({
-					visibleMessages,
-					latestMessageId,
-				})
-			}
-		},
-		[]
-	)
-	// END OF THAT 💩
-
-	const numberOfUsersTyping = useMemo(
-		() => props.namesOfUsersTyping?.length ?? 0,
-		[props.namesOfUsersTyping]
-	)
-	// effect to handle animating the screen if the messages changed or people typing just changed
-	useEffect(() => {
-		if (
-			!props.disableTransitions &&
-			// if we've already mounted, or we want to transition even if we haven't...
-			(mounted.current || !props.disableTransitionOnMount) &&
-			// and assuming the transition component is initialized...
-			transitionRef.current
-		)
-			// animate
-			transitionRef.current.animateNextTransition()
-		else mounted.current = true
-	}, [
-		props.disableTransitionOnMount,
-		numberOfUsersTyping,
-		props.messages,
-		props.disableTransitions,
-	])
-
-	const { onPressMessage, onDoubleTapMessage, onLongPressMessage } = props
-	const onPressItem = useCallback(
-		id => {
-			const message = messagesDict.current?.[id]
-			if (onPressMessage) onPressMessage(message)
-		},
-		[onPressMessage]
-	)
-
-	const onDoubleTapItem = useCallback(
-		id => {
-			const message = messagesDict.current?.[id]
-			if (onDoubleTapMessage) onDoubleTapMessage(message)
-		},
-		[onDoubleTapMessage]
-	)
-
-	const onLongPressItem = useCallback(
-		id => {
-			const message = messagesDict.current?.[id]
-			if (onLongPressMessage) return onLongPressMessage(message)
-			if (message && message.text) {
-				Alert.alert('Message', message.text, [
-					{
-						text: 'Copy text',
-						onPress: () => {
-							Clipboard.setString(message.text)
-						},
-						style: 'cancel',
-					},
-					{ text: 'Go back' },
-				])
-			}
-		},
-		[onLongPressMessage]
-	)
-
-	const renderItem = (info: ListRenderItemInfo<MessageModel>) => {
-		if (props.renderItem) return props.renderItem(info)
-		if (props.renderMessage === null) return null
-
-		const { item: message, index } = info
-
-		if (message.system) {
-			const systemProps: SystemMessageProps = {
-				text: message.text,
-				createdAt: message.createdAt,
-				textStyle: props.systemMessageTextStyle,
-				containerStyle: props.systemMessageContainerStyle,
-				dateToStringFunc: props.systemMessageDateToStringFunc,
-				dateStyle: props.systemMessageDateStyle,
-			}
-
-			if (props.renderSystemMessage === null) return null
-			if (props.renderSystemMessage)
-				return props.renderSystemMessage(systemProps)
-
-			return <SystemMessage {...systemProps} />
-		}
-
-		const isMe = message.user.id === props.user.id
-
-		// indicates that the previous message was sent by someone else, so this starts a new bunch
-		const messageCreatesNewBunch = !(
-			props.messages[index + 1] &&
-			props.messages[index + 1].user &&
-			props.messages[index + 1].user.id ===
-				(props.messages[index] &&
-					props.messages[index].user &&
-					props.messages[index].user.id)
-		)
-
-		const isMostRecentMessageInBunch = !(
-			props.messages[index - 1] &&
-			props.messages[index - 1].user &&
-			props.messages[index - 1].user.id ===
-				(props.messages[index] &&
-					props.messages[index].user &&
-					props.messages[index].user.id)
-		)
-
-		// show name if the previous message was sent by someone else
-		// also, only show my own name if specified, since that's kinda weird to show my own. beat my dribble
-		let showName = props.showNameForEveryMessage || messageCreatesNewBunch
-		if (isMe && !props.showMyName) showName = false
-
-		// by default, only show avatar for a the bottom of a bunch
-		const showAvatar =
-			props.showAvatarForEveryMessage || isMostRecentMessageInBunch
-		let renderAvatar = props.renderAvatar
-		// and we hide the avatar if we say to
-		if (isMe && props.hideMyAvatar) {
-			// showAvatar = false
-			renderAvatar = null
-		}
-
-		const bubbleStyle = props.bubbleStyle?.({ isMe })
-		const messageContainerStyle = props.messageContainerStyle?.({ isMe })
-		const bubbleTextStyle = props.bubbleTextStyle?.({ isMe })
-		const messageWrapperStyle = props.messageWrapperStyle?.({ isMe })
-		const bubbleBackgroundColor = props.bubbleBackgroundColor?.({ isMe })
-		const bubbleTextColor = props.bubbleTextColor?.({ isMe })
-
-		const messageProps: MessageProps = {
-			messageContainerStyle,
-			bubbleStyle,
-			bubbleTextStyle,
-			messageWrapperStyle,
-			delivered: true,
-			// isMe: (message.user && message.user.id) === (props.user && props.user.id),
-			isMe,
-			renderFooter: props.renderMessageFooter,
-			imageProps: props.imageProps,
-			// media: message.media,
-			name: message.user.name,
-			system: message.system,
-			text: message.text,
-			read: true,
-			renderMedia: props.renderMessageMedia,
-			onLongPress: onLongPressItem,
-			onPress: onPressItem,
-			// pressType: props.messagePressType || 'double',
-			onDoubleTap: onDoubleTapItem,
-			doubleTapDelay: props.messageDoubleTapDelay,
-			disableSwipeActions: props.disableSwipeActions,
-			swipeActions: props.swipeActions,
-			longPressDelay: props.messageLongPressDelay,
-			id: message.id,
-			showName,
-			avatar: message.user.avatar,
-			avatarImageProps: props.avatarImageProps,
-			avatarSize: props.avatarSize,
-			renderAvatar,
-			showAvatar,
-			initialsBackgroundColor: props.initialsBackgroundColor,
-			initialsTextColor: props.initialsTextColor,
-			renderInitials: props.renderInitials,
-			nameStyle: props.nameStyle,
-			tintColor: props.tintColor,
-			swipeActionWidth: props.swipeActionWidth,
-			renderSwipeAction: props.renderSwipeAction,
-			bubbleBackgroundColor,
-			bubbleTextColor,
-			userId: message.user.id,
-			userName: message.user.name,
-			AvatarImageComponent: props.AvatarImageComponent,
-			mediaHeight: message.media?.height,
-			mediaWidth: message.media?.width,
-			mediaUri: message.media?.uri,
-			mediaContentType: message.media?.contentType,
-			mediaUrl: message.media?.url,
-			createsNewBunch: messageCreatesNewBunch,
-			renderText: props.renderMessageText,
-			createdAt: message.createdAt,
-		}
-
-		if (props.renderMessage) return props.renderMessage(messageProps)
-		return <Message {...messageProps} />
-	}
-	// 	,
-	// 	[
-	// 		props.tintColor,
-	// 		props.user,
-	// 		props.renderItem,
-	// 		props.renderMessage,
-	// 		props.renderMessageFooter,
-	// 		props.renderSystemMessage,
-	// 		props.renderMessageMedia,
-	// 		props.onPressMessage,
-	// 		props.systemMessageContainerStyle,
-	// 		props.systemMessageDateToStringFunc,
-	// 		props.systemMessageDateStyle,
-	// 		props.systemMessageTextStyle,
-	// 		props.messages,
-	// 		props.showNameForEveryMessage,
-	// 		props.showMyName,
-	// 		props.showAvatarForEveryMessage,
-	// 		props.renderAvatar,
-	// 		props.hideMyAvatar,
-	// 		props.bubbleStyle,
-	// 		props.messageContainerStyle,
-	// 		props.bubbleTextStyle,
-	// 		props.messageWrapperStyle,
-	// 		props.bubbleBackgroundColor,
-	// 		props.bubbleTextStyle,
-	// 		props.bubbleTextColor,
-	// 		props.renderMessageFooter,
-	// 		props.imageProps,
-	// 		props.onLongPressMessage,
-	// 		props.messagePressType,
-	// 		props.onPressMessage,
-	// 		props.messageDoubleTapDelay,
-	// 		props.disableSwipeActions,
-	// 		props.swipeActionWidth,
-	// 		props.swipeActions,
-	// 		props.messageLongPressDelay,
-	// 		props.avatarImageProps,
-	// 		props.avatarSize,
-	// 		props.initialsBackgroundColor,
-	// 		props.initialsTextColor,
-	// 		props.renderInitials,
-	// 		props.nameStyle,
-	// 		props.swipeActionWidth,
-	// 		props.AvatarImageComponent,
-	// 	],
-	// )
-
-	const keyExtractor = useMemo(
-		() => props.keyExtractor || (({ id }: MessageModel) => id),
-		[props.keyExtractor]
-	)
-	const namesOfUsersTyping = useMemo(() => props.namesOfUsersTyping || [], [
-		props.namesOfUsersTyping,
-	])
-
-	const typingText = namesOfUsersTyping.join(', ')
-
-	const { renderTypingIndicator, typingIndicatorProps } = props
-	const ListFooterComponent = useCallback(() => {
-		if (renderTypingIndicator === null || !numberOfUsersTyping) return null
-
-		return (
-			<TypingFooter
-				typingText={props.showTypingText ? typingText : ''}
-				numberOfUsersTyping={numberOfUsersTyping}
-				{...typingIndicatorProps}
-			/>
-		)
-	}, [
-		typingText,
-		props.showTypingText,
-		renderTypingIndicator,
-		numberOfUsersTyping,
-		typingIndicatorProps,
-	])
-
-	const {
-		flatListProps,
-		keyboardDismissMode = 'interactive',
-		keyboardShouldPersistTaps = 'handled',
-		extraData,
-		messages,
-		contentContainerStyle,
-	} = props
-	const renderList = () => {
-		return (
-			<Animated.FlatList
-				{...flatListProps}
-				ref={flatListRef as MutableRefObject<FlatList<MessageModel>>}
-				data={messages}
-				keyExtractor={keyExtractor}
-				renderItem={renderItem}
-				extraData={extraData}
-				ListHeaderComponent={ListFooterComponent}
-				inverted
-				// initialNum
-				onScroll={onScroll}
-				onViewableItemsChanged={onViewableItemsChanged}
-				keyboardShouldPeristTaps={keyboardShouldPersistTaps}
-				keyboardDismissMode={keyboardDismissMode}
-				contentContainerStyle={{
-					...styles.contentContainer,
-					...(contentContainerStyle || {}),
-				}}
-				initialNumToRender={20}
-			/>
-		)
-	}
-	// , [
-	// 	flatListProps,
-	// 	keyboardDismissMode,
-	// 	keyboardShouldPersistTaps,
-	// 	extraData,
-	// 	messages,
-	// 	onViewableItemsChanged,
-	// 	ListFooterComponent,
-	// 	onScroll,
-	// 	keyExtractor,
-	// 	renderItem,
-	// 	contentContainerStyle,
-	// ])
-	const renderHeader = () => {
-		if (props.renderHeader) return props.renderHeader()
-		return null
-	}
-	const renderFooter = () => {
-		if (props.renderFooter) return props.renderFooter()
-		return null
-	}
-	const renderComposer = () => {
-		if (props.renderComposer === null) return null
-
-		const composerProps: ComposerProps = {
-			onInputTextChanged: props.onInputTextChanged,
-			text: props.text,
-			initialText: props.initialText,
-			placeholderColor: props.placeholderColor,
-			placeholderText: props.placeholderText,
-			renderSendButton: props.renderSendButton,
-			renderTextInput: props.renderTextInput,
-			textInputProps: props.textInputProps,
-			media: props.media,
-			onChangeMedia: props.onChangeMedia,
-			user: props.user,
-			onSend: props.onSend,
-			sendButtonMode: props.sendButtonMode,
-			containerStyle: props.composerContainerStyle,
-			inputContainerStyle: props.inputContainerStyle,
-			inputStyle: props.inputStyle,
-			tintColor: props.tintColor,
-			inputRef: inputRef as MutableRefObject<TextInput>,
-			sendButtonContainerStyle: props.sendButtonContainerStyle,
-			sendOnKeyboardReturn: props.sendOnKeyboardReturn,
-		}
-		if (props.renderComposer) return props.renderComposer(composerProps)
-
-		return <Composer {...composerProps} />
-	}
-
-	// now, onto the actual render code
-	const Container =
-		props.ContainerComponent || (props.safeArea ? SafeAreaView : View)
-	const KeyboardView =
-		props.avoidKeyboard === false ? View : KeyboardAvoidingView
-
-	// reanimated transition
-	const transition = useMemo(
-		() =>
-			props.transitionConfig ||
-			(true && (
-				<Transition.Together>
-					{/* <Transition.Out type="fade" durationMs={100} /> */}
-					<Transition.Change interpolation="easeInOut" />
-					<Transition.In type="fade" />
-				</Transition.Together>
-			)),
-		[props.transitionConfig]
-	)
-	const containerStyle = useMemo(
-		() => ({
-			...styles.container,
-			...props.containerStyle,
-		}),
-		[props.containerStyle]
-	)
-	return (
-		<Transitioning.View
-			ref={transitionRef}
-			transition={transition}
-			style={containerStyle}
-		>
-			<Container style={containerStyle}>
-				<KeyboardView
-					style={containerStyle}
-					// behavior={Platform.OS === 'ios' ? 'padding' : undefined}
-					behavior="padding"
-				>
-					{renderHeader()}
-					{renderList()}
-					{renderFooter()}
-					{renderComposer()}
-				</KeyboardView>
-			</Container>
-		</Transitioning.View>
-	)
-}
-
-Chat.append = function<M>(state: M[], messages: M[]) {
-	return [...messages, ...state]
-}
-
-export default Chat
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-	},
-	contentContainer: {
-		flexGrow: 1,
-		marginTop: 5,
-	},
-})