chat 1.0.8 → 4.0.0

package/src/components/Chat/Composer/Send/index.tsx

@@ -1,51 +0,0 @@
-import React, { useCallback } from 'react'
-import { Button, StyleSheet, TouchableOpacity, View } from 'react-native'
-import { Ionicons } from '@expo/vector-icons'
-import { SendButtonProps } from '../../types'
-
-const Send = (props: SendButtonProps) => {
-	if (props.mode === 'hidden') return null
-	const { containerStyle } = props
-	const Container = useCallback(
-		({ children }) => {
-			const style = {
-				...styles.container,
-				...(containerStyle || {}),
-			}
-			return <View style={style}>{children}</View>
-		},
-		[containerStyle],
-	)
-	if (props.mode === 'icon')
-		return (
-			<Container>
-				<TouchableOpacity onPress={props.onSend} style={[styles.button, { backgroundColor: props.tintColor || 'blue' }]}>
-					<Ionicons name="ios-arrow-round-up" size={size * 1.5} color={'white'} />
-				</TouchableOpacity>
-			</Container>
-		)
-	return (
-		<Container>
-			<Button title="Send" onPress={props.onSend} color={props.tintColor || 'blue'} />
-		</Container>
-	)
-}
-
-export default React.memo(Send)
-
-const size = 20
-
-const styles = StyleSheet.create({
-	container: {
-		paddingRight: 5,
-		paddingBottom: 5,
-	},
-	button: {
-		borderRadius: size,
-		height: size * 1.5,
-		width: size * 1.5,
-		justifyContent: 'center',
-		alignItems: 'center',
-		// padding: size / 2
-	},
-})

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

@@ -1,187 +0,0 @@
-import React, { useState, useCallback, useMemo, useEffect } from 'react'
-import uuid from 'uuid'
-import { View, StyleSheet, Keyboard } from 'react-native'
-import { isIphoneX, getBottomSpace } from 'react-native-iphone-x-helper'
-import { ComposerProps, InputProps, SendButtonProps } from '../types'
-import Input from './Input'
-import Send from './Send'
-import { MessageMedia, NewMessageModel } from '../../../classes/Message/types'
-
-// const emptyMedia: ComposerProps['media'][] = []
-
-const Composer = (props: ComposerProps) => {
-	// First, we set up a state manager for the composer's text.
-	const [textState, setText] = useState(props.initialText || '')
-	// if you pass a text prop, use that state instead
-	const [text, onChangeText] = useMemo(
-		() => [
-			props.text !== undefined ? props.text : textState,
-			props.text !== undefined ? props.onInputTextChanged : setText,
-		],
-		[props.text, textState, props.onInputTextChanged]
-	)
-
-	const [mediaState, setMedia] = useState<ComposerProps['media'][]>([])
-	const [media, onChangeMedia] = [
-		props.media || mediaState,
-		(props.media && props.onChangeMedia) || setMedia,
-	]
-
-	// track whether or not the keyboard is open to style the bottom based on where or not you're on an iPhone X
-	const [keyboardOpen, setKeyboardOpen] = useState(false)
-	useEffect(() => {
-		const show = () => {
-			setKeyboardOpen(true)
-		}
-		const hide = () => {
-			setKeyboardOpen(false)
-		}
-		Keyboard.addListener('keyboardWillShow', show)
-		Keyboard.addListener('keyboardWillHide', hide)
-		return () => {
-			Keyboard.removeListener('keyboardWillShow', show)
-			Keyboard.removeListener('keyboardWillHide', hide)
-		}
-	}, [])
-
-	const { user } = props
-	const messagesReadyToSend = useMemo(() => {
-		const messages: NewMessageModel[] = []
-		if (media && media.length) {
-			;(media as MessageMedia[]).forEach((item: MessageMedia) => {
-				const message: NewMessageModel = {
-					user,
-					text: '',
-					id: uuid.v4(),
-					createdAt: new Date(),
-					media: item,
-				}
-				messages.push(message)
-			})
-		}
-		if (text) {
-			const message: NewMessageModel = {
-				user,
-				text: text && text.trim(),
-				id: uuid.v4(),
-				createdAt: new Date(),
-			}
-			messages.push(message)
-		}
-		return messages
-	}, [user, text, media])
-
-	const { onSend } = props
-	const send = useCallback(() => {
-		if (messagesReadyToSend.length) {
-			if (onChangeText) onChangeText('')
-			if (onChangeMedia) onChangeMedia([])
-			onSend(messagesReadyToSend)
-		}
-	}, [onChangeText, onChangeMedia, messagesReadyToSend, onSend])
-
-	const { textInputProps, renderTextInput } = props
-	const renderInput = useCallback(() => {
-		if (renderTextInput === null) return null
-
-		const onSubmitEditing: InputProps['onSubmitEditing'] = () => {
-			if (props.sendOnKeyboardReturn) send()
-		}
-
-		const inputProps: InputProps = {
-			inputProps: textInputProps,
-			onChangeText,
-			text,
-			containerStyle: props.inputContainerStyle,
-			placeholderColor: props.placeholderColor,
-			placeholderText: props.placeholderText,
-			style: props.inputStyle,
-			tintColor: props.tintColor,
-			inputRef: props.inputRef,
-			sendOnKeyboardReturn: props.sendOnKeyboardReturn,
-			onSubmitEditing,
-		}
-
-		if (renderTextInput) return renderTextInput(inputProps)
-
-		return <Input {...inputProps} />
-	}, [
-		onChangeText,
-		text,
-		textInputProps,
-		renderTextInput,
-		props.inputContainerStyle,
-		props.placeholderColor,
-		props.placeholderText,
-		props.inputStyle,
-		props.tintColor,
-		// TODO leave or take out?
-		props.inputRef,
-		props.sendOnKeyboardReturn,
-		send,
-	])
-
-	const { renderSendButton } = props
-	const sendButtonMode =
-		props.sendButtonMode?.({ hasText: !!(text && text.trim()) }) ?? 'icon'
-	const renderSend = useCallback(() => {
-		if (renderSendButton === null) return null
-
-		// const mode: ChatProps['sendButtonMode'] = {
-		// 	empty: 'hidden',
-		// 	withText: 'icon',
-		// 	...(sendButtonMode || {}),
-		// }
-		const sendProps: SendButtonProps = {
-			onSend: send,
-			text,
-			media: media as MessageMedia[],
-			user,
-			// mode: (text && text.trim ? mode.withText : mode.empty) || 'icon',
-			mode: sendButtonMode,
-			containerStyle: props.sendButtonContainerStyle,
-			tintColor: props.tintColor,
-		}
-		if (renderSendButton) return renderSendButton(sendProps)
-
-		return <Send {...sendProps} />
-	}, [
-		send,
-		text,
-		user,
-		media,
-		renderSendButton,
-		sendButtonMode,
-		props.sendButtonContainerStyle,
-		props.tintColor,
-	])
-
-	const containerStyle = useMemo(() => {
-		const paddingBottom = keyboardOpen && isIphoneX() ? 10 : getBottomSpace()
-		return [styles.container, { paddingBottom }, props.containerStyle]
-	}, [props.containerStyle, keyboardOpen])
-
-	return (
-		<View style={[containerStyle]}>
-			<View style={styles.wrapper}>
-				{renderInput()}
-				{renderSend()}
-			</View>
-		</View>
-	)
-}
-
-Composer.displayName = 'Juice.Composer'
-
-export default React.memo(Composer)
-
-const styles = StyleSheet.create({
-	container: {
-		paddingBottom: 10,
-		paddingTop: 5,
-	},
-	wrapper: {
-		flexDirection: 'row',
-		alignItems: 'flex-end',
-	},
-})

package/src/components/Chat/Media/Image/index.tsx

@@ -1,26 +0,0 @@
-import React, { useMemo } from 'react'
-import { Image, Dimensions, ImageStyle } from 'react-native'
-import { MessageMedia } from '../../../../classes/Message/types'
-
-const Img = (props: Omit<MessageMedia, 'contentType'>) => {
-	const dimensions = useMemo((): ImageStyle => {
-		const aspectRatio = props.width / props.height
-		const isVertical = props.height > props.width
-		const { width: screenWidth } = Dimensions.get('window')
-		const width = isVertical ? screenWidth * 0.6 : screenWidth * 0.7
-		const height = width / aspectRatio
-
-		return { height, width }
-	}, [props.height, props.width])
-	return (
-		<Image
-			source={{ uri: props.url || props.uri }}
-			style={dimensions}
-			resizeMode="cover"
-		/>
-	)
-}
-
-Img.displayName = 'Juice.Image'
-
-export default React.memo(Img)

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

@@ -1,11 +0,0 @@
-import React from 'react'
-import { MessageMedia } from '../../../classes/Message/types'
-import Image from './Image'
-
-const Media = ({ contentType, ...props }: MessageMedia) => {
-	if (contentType === 'image') return <Image {...props} />
-	if (contentType === 'video') return null
-	return null
-}
-
-export default React.memo(Media)

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

@@ -1,7 +0,0 @@
-import React from 'react'
-import { SwipeableProps, SwipeActionProps } from '../../../types'
-import { View } from 'react-native'
-
-export default (props: SwipeActionProps) => {
-	return <View></View>
-}

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

@@ -1,32 +0,0 @@
-import React, { useCallback } from 'react'
-import Swipeable from 'react-native-gesture-handler/Swipeable'
-import { SwipeableProps, SwipeActionProps } from '../../types'
-import Action from './Action'
-
-const Swiper = (props: SwipeableProps) => {
-	const { renderSwipeAction } = props
-	const renderAction = useCallback(
-		(actionProps: SwipeActionProps) => {
-			if (renderSwipeAction) return renderSwipeAction(actionProps)
-
-			return <Action {...actionProps} />
-		},
-		[renderSwipeAction]
-	)
-
-	const { swipeActions } = props
-	const leftActions = swipeActions && swipeActions.left
-	const rightActions = swipeActions && swipeActions.right
-
-	const renderRightActions = useCallback(() => {
-		if (rightActions) {
-			rightActions.forEach(action => {})
-		}
-	}, [rightActions])
-
-	const renderActionList = useCallback(() => {}, [])
-
-	return <Swipeable></Swipeable>
-}
-
-export default Swiper

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, 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',
-	},
-})