chat 1.0.6 → 3.0.0

package/src/components/Chat-Old/index.tsx

@@ -1,356 +0,0 @@
-import React, {
-	useMemo,
-	useRef,
-	useEffect,
-	useCallback,
-	MutableRefObject
-} from 'react'
-import {
-	FlatList,
-	ListRenderItemInfo,
-	SafeAreaView,
-	View,
-	StyleSheet,
-	Animated,
-	ViewToken,
-	TextInput
-} from 'react-native'
-import {
-	Transitioning,
-	Transition,
-	TransitioningView
-} from 'react-native-reanimated'
-import Message from './Message'
-import {
-	ChatProps,
-	MessageProps,
-	ComposerProps,
-	SystemMessageProps,
-	ChatRef
-} from './types'
-import { NewMessageModel } from '../../classes/Message/types'
-import Composer from './Composer'
-import SystemMessage from './SystemMessage'
-
-function Chat<MessageModel extends NewMessageModel = NewMessageModel>(
-	props: ChatProps<MessageModel>,
-	ref: MutableRefObject<ChatRef<MessageModel>>
-) {
-	// "constructor" variables
-
-	const inputRef = useRef<TextInput>()
-	const flatListRef = useRef<FlatList<MessageModel>>()
-	const componentRef = useRef<ChatRef<MessageModel>>()
-
-	if (!componentRef.current) {
-		componentRef.current = {
-			focusInput: () => inputRef.current && inputRef.current.focus(),
-			blurInput: () => inputRef.current && inputRef.current.blur(),
-			scrollToEnd: () =>
-				flatListRef.current && flatListRef.current.scrollToEnd(),
-			scrollToIndex: params =>
-				flatListRef.current && flatListRef.current.scrollToIndex(params),
-			scrollToItem: params =>
-				flatListRef.current && flatListRef.current.scrollToItem(params),
-			scrollToOffset: params =>
-				flatListRef.current && flatListRef.current.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 }
-	)
-
-	// effect to handle new messages coming in / scrolling to bottom
-	// TODO we may have to use getNode() for the animated flatlist, right?
-	useEffect(() => {
-		if (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.scrollToOffset({ offset: 0 })
-			else if (props.scrollToBottomOnAllNewMessages)
-				flatListRef.current.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)
-	const messagesRef = useRef(props.messages)
-	// ...onto the effect 😅
-	useEffect(() => {
-		// make updated methods available to onviewable items changed
-		onViewableItemsChangedRef.current = props.onViewableItemsChanged
-		onViewMessagesRef.current = props.onViewMessages
-		messagesRef.current = props.messages
-	}, [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 💩
-
-	// 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,
-		props.namesOfUsersTyping,
-		props.messages,
-		props.disableTransitions
-	])
-
-	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.user && props.user.id)
-		)
-
-		// show name if the previous message was sent by someone else
-		const showName = !isMe && messageCreatesNewBunch
-
-		// by default, only show avatar for a the bottom of a bunch
-		let showAvatar = props.showAvatarForEveryMessage || messageCreatesNewBunch
-		// and we hide the avatar if we say to
-		if (isMe && props.hideMyAvatar) showAvatar = false
-
-		const bubbleStyle =
-			props.bubbleStyle && props.bubbleStyle[isMe ? 'me' : 'others']
-		const messageContainerStyle =
-			props.messageContainerStyle &&
-			props.messageContainerStyle[isMe ? 'me' : 'others']
-		const bubbleTextStyle =
-			props.bubbleTextStyle && props.bubbleTextStyle[isMe ? 'me' : 'others']
-		const messageWrapperStyle =
-			props.messageWrapperStyle &&
-			props.messageWrapperStyle[isMe ? 'me' : 'others']
-
-		const messageProps: MessageProps = {
-			messageContainerStyle,
-			bubbleStyle,
-			bubbleTextStyle,
-			messageWrapperStyle,
-			delivered: true,
-			isMe: message.user.id === props.user.id,
-			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: props.onLongPressMessage,
-			onPress: props.onPressMessage,
-			pressType: props.messagePressType || 'double',
-			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: props.renderAvatar,
-			showAvatar,
-			initialsBackgroundColor: props.initialsBackgroundColor,
-			initialsTextColor: props.initialsTextColor,
-			renderInitials: props.renderInitials
-		}
-
-		if (props.renderMessage) return props.renderMessage(messageProps)
-		return <Message {...messageProps} />
-	}
-
-	const keyExtractor = useMemo(
-		() => props.keyExtractor || (({ id }: MessageModel) => id),
-		[props.keyExtractor]
-	)
-
-	const renderList = () => {
-		return (
-			<Animated.FlatList
-				{...props.flatListProps}
-				ref={flatListRef as MutableRefObject<FlatList<MessageModel>>}
-				data={props.messages}
-				keyExtractor={keyExtractor}
-				renderItem={renderItem}
-				extraData={props.extraData}
-				ListHeaderComponent={props.ListFooterComponent}
-				inverted
-				onScroll={onScroll}
-				onViewableItemsChanged={onViewableItemsChanged}
-				keyboardShouldPeristTaps={props.keyboardShouldPersistTaps || 'handled'}
-				keyboardDismissMode={props.keyboardDismissMode || 'interactive'}
-				contentContainerStyle={{
-					...styles.contentContainer,
-					...(props.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>
-		}
-		if (props.renderComposer) return props.renderComposer(composerProps)
-
-		return <Composer {...composerProps} />
-	}
-
-	// now, onto the actual render code
-	const Container =
-		props.ContainerComponent || (props.safeArea ? SafeAreaView : View)
-
-	// reanimated transition
-	const transition = useMemo(
-		() =>
-			props.transitionConfig || (
-				<Transition.Sequence>
-					<Transition.Together>
-						<Transition.Out type="fade" />
-						<Transition.Change interpolation="easeOut" />
-					</Transition.Together>
-					<Transition.In type="fade" />
-				</Transition.Sequence>
-			),
-		[props.transitionConfig]
-	)
-	const containerStyle = useMemo(
-		() => ({
-			...styles.container,
-			...props.containerStyle
-		}),
-		[props.containerStyle]
-	)
-	return (
-		<Transitioning.View
-			ref={transitionRef}
-			transition={transition}
-			style={containerStyle}
-		>
-			<Container style={containerStyle}>
-				{renderHeader()}
-				{renderList()}
-				{renderFooter()}
-				{renderComposer()}
-			</Container>
-		</Transitioning.View>
-	)
-}
-
-export default Chat
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1
-	},
-	contentContainer: {
-		flexGrow: 1
-	}
-})