chat 1.0.6 → 3.0.0

package/src/components/Chat/Message/Touchable/index.tsx

@@ -1,60 +0,0 @@
-import React, { useRef, useCallback, FunctionComponent } from 'react'
-
-import { TouchableProps } from '../../types'
-import {
-	LongPressGestureHandler,
-	State,
-	TapGestureHandler
-} from 'react-native-gesture-handler'
-
-const Touchable: FunctionComponent<TouchableProps> = props => {
-	const doubleTapRef = useRef<TapGestureHandler>(null)
-	const { onLongPress, onPress, onDoubleTap: handleDoubleTap, id } = props
-	const onHandlerStateChange = useCallback(
-		event => {
-			if (event.nativeEvent.state === State.ACTIVE) {
-				if (onLongPress) onLongPress(id)
-				// alert("I'm being pressed for so long")
-			}
-		},
-		[onLongPress, id]
-	)
-	const onSingleTap = useCallback(
-		event => {
-			if (event.nativeEvent.state === State.ACTIVE) {
-				if (onPress) onPress(id)
-			}
-		},
-		[onPress, id]
-	)
-	const onDoubleTap = useCallback(
-		event => {
-			if (event.nativeEvent.state === State.ACTIVE) {
-				if (handleDoubleTap) handleDoubleTap(id)
-			}
-		},
-		[handleDoubleTap, id]
-	)
-	return (
-		<LongPressGestureHandler
-			onHandlerStateChange={onHandlerStateChange}
-			minDurationMs={props.longPressDelay || 500}
-		>
-			<TapGestureHandler
-				onHandlerStateChange={onSingleTap}
-				waitFor={doubleTapRef}
-			>
-				<TapGestureHandler
-					maxDelayMs={props.doubleTapDelay || 500}
-					ref={doubleTapRef}
-					onHandlerStateChange={onDoubleTap}
-					numberOfTaps={2}
-				>
-					{props.children}
-				</TapGestureHandler>
-			</TapGestureHandler>
-		</LongPressGestureHandler>
-	)
-}
-
-export default Touchable

package/src/components/Chat/Message/index.tsx

@@ -1,328 +0,0 @@
-import React, {
-	useCallback,
-	useRef,
-	MutableRefObject,
-	useMemo,
-	FunctionComponent,
-	useEffect,
-	RefObject,
-} from 'react'
-import { View, StyleSheet, Text } from 'react-native'
-import { MessageProps } from '../types'
-import { NewMessageModel } from '../../../classes/Message/types'
-// import { NewMessageModel } from '../../../classes/Message/types'
-import Bubble from '../Bubble'
-import { Avatar, Initials } from '../../index'
-import { InitialsProps, AvatarProps } from '../../../components/Inbox/types'
-// TODO update imports for these
-import { getInitials } from '../../../helpers/getInitials'
-import {
-	Transitioning,
-	TransitioningView,
-	Transition,
-} from 'react-native-reanimated'
-import Touchable from './Touchable'
-// import { AvatarProps, InitialsProps } from '../../Inbox/types'
-// import { getInitials } from '../../../helpers/getInitials'
-
-const Message = <Model extends NewMessageModel = NewMessageModel>(
-	props: MessageProps<Model>
-) => {
-	const bubble = useRef<View>()
-	const transitionRef = useRef<TransitioningView>()
-	const mounted = useRef(false)
-
-	const {
-		renderAvatar,
-		avatar,
-		avatarImageProps,
-		showAvatar,
-		name,
-		renderInitials,
-		initialsBackgroundColor,
-		initialsTextColor,
-	} = props
-
-	useEffect(() => {
-		if (mounted.current) {
-			// console.log('message updated', props.text)
-			transitionRef.current && transitionRef.current.animateNextTransition()
-		} else {
-			mounted.current = true
-		}
-	}, [props.avatar, props.text, renderAvatar])
-
-	const { renderFooter } = props
-
-	const footer = useCallback(
-		() => (renderFooter ? renderFooter({ id: props.id }) : null),
-		[props.id, renderFooter]
-	)
-
-	const containerStyle = useMemo(() => {
-		return [
-			styles.container,
-			props.isMe ? meStyles.container : otherStyles.container,
-			props.messageContainerStyle,
-		]
-	}, [props.isMe, props.messageContainerStyle])
-
-	const wrapperStyle = useMemo(() => {
-		return [
-			styles.wrapper,
-			props.isMe ? meStyles.wrapper : otherStyles.wrapper,
-			props.messageWrapperStyle,
-		]
-	}, [props.isMe, props.messageWrapperStyle])
-
-	// no avatar size if it's rendered null. this var is used in different spots
-	const avatarSize = renderAvatar === null ? 0 : props.avatarSize || 35
-
-	const maybeRenderName = useCallback(() => {
-		const style = {
-			...styles.name,
-			...(props.isMe ? meStyles.name : otherStyles.name),
-		}
-		return props.showName && props.name ? (
-			<Text style={[style, props.nameStyle]}>{props.name}</Text>
-		) : null
-	}, [props.showName, props.name, props.nameStyle, props.isMe])
-
-	const renderAvatarOrInitials = useCallback(() => {
-		if (renderAvatar === null) return null
-		// we make opacity 0 instead of hiding it to maintain the same width from the side
-		const opacity = showAvatar === false ? 0 : 1
-		const size = avatarSize
-
-		if (avatar) {
-			const avatarProps: AvatarProps = {
-				avatar: avatar,
-				imageProps: avatarImageProps,
-				size,
-				ImageComponent: props.AvatarImageComponent,
-			}
-			if (renderAvatar) return renderAvatar(avatarProps)
-			return (
-				<AvatarContainer opacity={opacity} showAvatar={!!showAvatar}>
-					<Avatar {...avatarProps} />
-				</AvatarContainer>
-			)
-		}
-		const initialsProps: InitialsProps = {
-			initials: getInitials(name),
-			size,
-			textColor: initialsTextColor,
-			backgroundColor: initialsBackgroundColor || props.tintColor,
-		}
-		if (renderInitials) return renderInitials(initialsProps)
-		return (
-			<AvatarContainer opacity={opacity} showAvatar={!!showAvatar}>
-				<Initials {...initialsProps} />
-			</AvatarContainer>
-		)
-	}, [
-		avatar,
-		avatarImageProps,
-		avatarSize,
-		renderAvatar,
-		showAvatar,
-		name,
-		renderInitials,
-		initialsBackgroundColor,
-		initialsTextColor,
-		props.tintColor,
-		props.AvatarImageComponent,
-	])
-
-	const {
-		bubbleBackgroundColor,
-		id,
-		userId,
-		userName,
-		createdAt,
-		text,
-		system,
-	} = props
-	const backgroundColor = useMemo(() => {
-		const fallback = props.isMe
-			? ['#7B16FF', '#7114EA']
-			: ['#f1f7f8', '#f8f8f8']
-		if (!bubbleBackgroundColor) return fallback
-		let colors: string[] = []
-		if (typeof bubbleBackgroundColor === 'string') {
-			colors = [bubbleBackgroundColor, bubbleBackgroundColor]
-		} else if (Array.isArray(bubbleBackgroundColor)) {
-			colors = bubbleBackgroundColor
-		} else if (typeof bubbleBackgroundColor === 'function') {
-			const background = bubbleBackgroundColor({
-				createdAt,
-				id,
-				user: {
-					name: userName ?? '',
-					id: userId ?? '',
-					avatar: avatar ?? '',
-				},
-				text,
-				system,
-			})
-			// const background = bubbleBackgroundColor({
-			// 	user: {
-			// 		avatar: props.avatar || '',
-			// 		id: props.userId || '',
-			// 		name: props.userName || '',
-			// 	},
-			// 	id: props.id,
-			// })
-			if (Array.isArray(background)) {
-				colors = background
-			} else if (typeof background === 'string') {
-				colors = [background, background]
-			}
-		}
-		if (!colors.length) {
-			console.warn(
-				`🍇 Juice.Chat issue: It looks like you tried to set the message bubble background color, but something was off, so we're using the default colors. You should be passing either a string, array, or function to the bubbleBackgroundColor, like this: bubbleBackgroundColor={{ ${
-					props.isMe ? 'me' : 'others'
-				}: 'blue' }}. Instead, you passed this: ${bubbleBackgroundColor}.`
-			)
-			return fallback
-		}
-		return colors
-	}, [
-		props.isMe,
-		bubbleBackgroundColor,
-		createdAt,
-		id,
-		userName,
-		userId,
-		avatar,
-		text,
-		system,
-	])
-	const renderBubble = () => {
-		return (
-			<Bubble
-				text={props.text}
-				isMe={props.isMe}
-				style={props.bubbleStyle}
-				textStyle={props.bubbleTextStyle}
-				bubbleRef={bubble as MutableRefObject<View>}
-				backgroundColor={backgroundColor}
-				textColor={props.bubbleTextColor}
-				mediaContentType={props.mediaContentType}
-				mediaHeight={props.mediaHeight}
-				mediaWidth={props.mediaWidth}
-				mediaUri={props.mediaUri}
-				mediaUrl={props.mediaUrl}
-				renderMedia={props.renderMedia}
-				renderText={props.renderText}
-			/>
-		)
-	}
-	const outerStyle = useMemo(
-		() => (props.createsNewBunch ? { marginTop: 10 } : {}),
-		[props.createsNewBunch]
-	)
-	return (
-		<Touchable
-			id={props.id}
-			longPressDelay={props.longPressDelay}
-			doubleTapDelay={props.doubleTapDelay}
-			onDoubleTap={props.onDoubleTap}
-			onPress={props.onPress}
-			onLongPress={props.onLongPress}
-		>
-			<Transitioning.View
-				style={outerStyle}
-				transition={transition}
-				ref={transitionRef as RefObject<TransitioningView>}
-			>
-				<View style={containerStyle}>
-					<View style={wrapperStyle}>
-						{renderAvatarOrInitials()}
-						<View style={{ flex: 1, justifyContent: 'flex-start' }}>
-							{maybeRenderName()}
-							<View style={wrapperStyle}>{renderBubble()}</View>
-						</View>
-					</View>
-					{footer()}
-				</View>
-			</Transitioning.View>
-		</Touchable>
-	)
-}
-
-const transition = (
-	// <Transition.Sequence>
-	// {/* <Transition.Out type="fade" /> */}
-	<Transition.Together>
-		<Transition.Change interpolation="easeOut" />
-		<Transition.In type="fade" />
-	</Transition.Together>
-	// </Transition.Sequence>
-)
-
-const AvatarContainer: FunctionComponent<{
-	showAvatar: boolean
-	opacity: 0 | 1
-}> = React.memo(function AvatarContainer({ children, showAvatar, opacity }) {
-	return (
-		<View
-			style={{
-				opacity,
-				transform: [{ rotate: !showAvatar ? '180deg' : '0deg' }],
-			}}
-		>
-			{children}
-		</View>
-	)
-})
-
-Message.displayName = 'Message'
-
-export default React.memo(Message)
-
-const styles = StyleSheet.create({
-	outer: {},
-	container: {
-		marginTop: 1,
-		alignItems: 'flex-end',
-		paddingHorizontal: 10,
-	},
-	// wrapper is concerned with which side the avatar is on relative to the bubble
-	wrapper: {
-		flex: 1,
-		alignItems: 'flex-end',
-		justifyContent: 'flex-start',
-	},
-	name: {
-		marginHorizontal: 10,
-		fontSize: 14,
-		color: 'gray',
-		paddingVertical: 5,
-	},
-})
-
-const meStyles = StyleSheet.create({
-	container: {
-		justifyContent: 'flex-end',
-	},
-	wrapper: {
-		flexDirection: 'row-reverse',
-	},
-	name: {
-		textAlign: 'right',
-	},
-})
-
-const otherStyles = StyleSheet.create({
-	container: {
-		justifyContent: 'flex-end',
-	},
-	wrapper: {
-		flexDirection: 'row',
-	},
-	name: {
-		textAlign: 'left',
-	},
-})

package/src/components/Chat/SystemMessage/index.tsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import { View, Text, StyleSheet } from 'react-native'
-import moment from 'moment'
-import { SystemMessageProps } from '../types'
-
-const SystemMessage = React.memo((props: SystemMessageProps) => {
-	return (
-		<View style={[styles.container, props.containerStyle]}>
-			<Text style={styles.date}>
-				{props.dateToStringFunc
-					? props.dateToStringFunc(props.createdAt)
-					: moment(props.createdAt).calendar(undefined, {
-							lastDay: '[Yesterday]',
-							sameDay: 'LT',
-							nextDay: '[Tomorrow at] LT',
-							lastWeek: 'dddd',
-							nextWeek: '[Next] dddd',
-							sameElse: 'L'
-					  })}
-			</Text>
-			<Text style={styles.text}>{props.text}</Text>
-		</View>
-	)
-})
-
-export default SystemMessage
-
-const styles = StyleSheet.create({
-	container: {
-		paddingHorizontal: 10,
-		paddingVertical: 5
-	},
-	date: {
-		color: 'gray',
-		textAlign: 'center',
-		fontSize: 14
-	},
-	text: {
-		color: 'gray',
-		fontWeight: '500',
-		textAlign: 'center',
-		fontSize: 14
-	}
-})

package/src/components/Chat/TypingFooter/index.tsx

@@ -1,48 +0,0 @@
-import React, { useMemo } from 'react'
-import { StyleSheet, View, Text } from 'react-native'
-// import Juice from 'usechat'
-import { TypingFooterProps } from '../types'
-import TypingIndicator from '../../TypingIndicator'
-
-export default React.memo(
-	({
-		typingText,
-		containerStyle,
-		numberOfUsersTyping,
-		...indicatorProps
-	}: TypingFooterProps) => {
-		const extension = useMemo(() => {
-			if (!numberOfUsersTyping) return ''
-			return numberOfUsersTyping > 1 ? 'are' : 'is'
-		}, [numberOfUsersTyping])
-		return (
-			<View style={[styles.container, containerStyle]}>
-				<View style={styles.wrapper}>
-					<TypingIndicator {...indicatorProps} />
-					{!!typingText && !!numberOfUsersTyping && (
-						<Text style={styles.text}>
-							{typingText} {extension} typing...
-						</Text>
-					)}
-				</View>
-			</View>
-		)
-	}
-)
-
-const styles = StyleSheet.create({
-	container: {
-		alignItems: 'flex-start',
-		padding: 10,
-		paddingBottom: 5
-	},
-	wrapper: {
-		flexDirection: 'row',
-		alignItems: 'center'
-	},
-	text: {
-		color: 'gray',
-		fontStyle: 'italic',
-		marginLeft: 10
-	}
-})