chat 1.0.6 → 3.0.0

package/src/components/Inbox/Item/index.tsx

@@ -1,307 +0,0 @@
-import React, { useCallback, useRef } from 'react'
-import { RectButton } from 'react-native-gesture-handler'
-import { View, StyleSheet } from 'react-native'
-import Title from './Title'
-import ItemDate from './ItemDate'
-import {
-	InboxItemProps,
-	InitialsProps,
-	SwipeableProps,
-	UnreadIndicatorProps
-} from '../types'
-import { ExistingRoomModel } from '../../../classes/Room/types'
-import UnreadIndicator from './UnreadIndicator'
-import Subtitle from './Subtitle'
-import Avatar from '../../Avatar'
-import Initials from './Initials'
-import Swipeable from './Swipeable/index'
-import TypingIndicator from '../../TypingIndicator'
-
-function Item<InboxItem extends ExistingRoomModel = ExistingRoomModel>(
-	props: InboxItemProps<InboxItem>
-) {
-	const renderCount = useRef(1)
-	renderCount.current++
-	function renderTitle() {
-		if (props.renderTitle) return props.renderTitle(props.name)
-		if (props.renderTitle === null) return null
-
-		const TitleComponent = props.TitleComponent || Title
-
-		return (
-			<TitleComponent
-				title={props.name}
-				style={props.titleStyle}
-				containerStyle={props.titleContainerStyle}
-			/>
-		)
-	}
-	function renderDate() {
-		if (props.renderDate) return props.renderDate(props.lastMessageCreatedAt)
-		if (props.renderDate === null) return null
-
-		const DateComponent = props.DateComponent || ItemDate
-
-		return (
-			<DateComponent
-				dateToStringFunc={props.dateToStringFunc}
-				date={props.lastMessageCreatedAt}
-				style={props.dateStyle}
-			/>
-		)
-	}
-	function renderUnreadIndicator() {
-		if (!props.showUnreadIndicator) return null
-
-		let position = 'center' as UnreadIndicatorProps['position']
-		if (
-			props.unreadIndicatorPosition &&
-			props.unreadIndicatorPosition.includes('-')
-		) {
-			// ex: turn bottom-left into bottom
-			// why? this component is only concerned w vertical position
-			position = props.unreadIndicatorPosition.split(
-				'-'
-			)[0] as UnreadIndicatorProps['position']
-		}
-
-		const backgroundColor = props.unreadIndicatorColor || 'blue'
-
-		const indicatorProps: UnreadIndicatorProps = {
-			unreadCount: props.unreadCount,
-			textColor: props.unreadTextColor,
-			showCount: props.showUnreadIndicatorCount,
-			backgroundStyle: props.unreadIndicatorStyle,
-			textStyle: props.unreadIndicatorTextStyle,
-			position,
-			backgroundColor,
-			type: props.unreadIndicatorType || 'gradient',
-			gradientProps: props.unreadIndicatorGradientProps || {
-				colors: ['red', 'blue']
-			},
-			show: props.showUnreadIndicator,
-			size: props.unreadIndicatorSize
-		}
-
-		if (props.renderUnreadIndicator)
-			return props.renderUnreadIndicator(indicatorProps)
-		if (props.renderUnreadIndicator === null) return null
-
-		const UnreadIndicatorComponent =
-			props.UnreadIndicatorComponent || UnreadIndicator
-
-		return <UnreadIndicatorComponent {...indicatorProps} />
-	}
-	function renderSubtitle() {
-		if (props.renderSubtitle === null) return null
-		if (props.showTypingIndicator && props.numberOfPeopleTyping)
-			return renderTypingIndicator()
-
-		if (props.renderSubtitle) return props.renderSubtitle(props.lastMessageText)
-
-		const SubtitleComponent = props.SubtitleComponent || Subtitle
-
-		return (
-			<SubtitleComponent
-				textStyle={props.subtitleTextStyle}
-				lastMessageText={props.lastMessageText}
-			/>
-		)
-	}
-
-	// function renderAvatarOrInitials() {
-	// 	// not destructuring for clarity of where the variables come from
-	// 	const avatar = props.avatar
-	// 	const prioritizeAvatar = props.prioritizeAvatarOverInitials
-	// 	const size = props.avatarSize
-	// 	const members = props.members
-
-	// 	if (avatar && prioritizeAvatar) {
-	// 		const imageProps = props.avatarImageProps
-	// 		if (props.renderAvatar)
-	// 			props.renderAvatar({ imageProps, size, avatar, members })
-	// 		if (props.renderAvatar === null) return null
-
-	// 		const AvatarComponent = props.AvatarComponent || Avatar
-
-	// 		return <AvatarComponent {...imageProps} size={size} avatar={avatar} />
-	// 	}
-	// }
-
-	function renderAvatarOrInitials() {
-		if (props.disableAvatar) return null
-
-		const avatar = props.avatar
-		const initials = props.initials
-		const prioritizeAvatar = props.prioritizeAvatarOverInitials !== false
-		let size = props.avatarSize || 55
-		const imageProps = props.avatarImageProps
-		const textStyle = props.initialsTextStyle
-		const initialsContainerStyle = props.initialsContainerStyle
-
-		const InitialsComponent = props.InitialsComponent || Initials
-		const AvatarComponent = props.AvatarComponent || Avatar
-
-		if (Array.isArray(avatar)) {
-			size /= 2
-			return (
-				<>
-					{avatar.map((member, i) => {
-						if (member.avatar && prioritizeAvatar) {
-							const avatarProps = {
-								imageProps,
-								size,
-								avatar: member.avatar
-							}
-							if (props.renderAvatar) return props.renderAvatar(avatarProps)
-							if (props.renderAvatar === null) return null
-
-							return <AvatarComponent {...avatarProps} />
-						}
-
-						const initialsProps: InitialsProps = {
-							textStyle,
-							containerStyle: initialsContainerStyle,
-							initials,
-							size,
-							textColor: props.initialsTextColor,
-							backgroundColor: props.initialsBackgroundColor
-						}
-
-						if (props.renderInitials) return props.renderInitials(initialProps)
-						if (props.renderInitials === null) return null
-
-						return (
-							<InitialsComponent
-								key={initials + i.toString()}
-								{...initialsProps}
-							/>
-						)
-					})}
-				</>
-			)
-		}
-
-		if (avatar && prioritizeAvatar) {
-			const avatarProps = {
-				imageProps,
-				size,
-				avatar
-			}
-			if (props.renderAvatar) return props.renderAvatar(avatarProps)
-			if (props.renderAvatar === null) return null
-
-			return <AvatarComponent {...avatarProps} />
-		}
-
-		const initialProps: InitialsProps = {
-			initials,
-			size,
-			textStyle,
-			containerStyle: initialsContainerStyle,
-			textColor: props.initialsTextColor,
-			backgroundColor: props.initialsBackgroundColor
-		}
-
-		if (props.renderInitials) return props.renderInitials(initialProps)
-		if (props.renderInitials === null) return null
-
-		return <InitialsComponent {...initialProps} />
-	}
-
-	function typingIndicator() {
-		if (props.renderTypingIndicator) return props.renderTypingIndicator()
-		if (props.renderTypingIndicator === null) return null
-
-		return (
-			<View style={{ marginTop: 5 }}>
-				<TypingIndicator />
-			</View>
-		)
-	}
-
-	const renderTypingIndicator = useCallback(typingIndicator, [
-		props.renderTypingIndicator
-	])
-
-	const unreadIndicatorIsOnRight = !!(
-		props.showTypingIndicator &&
-		props.unreadIndicatorPosition &&
-		props.unreadIndicatorPosition.includes('right')
-	)
-
-	const flexDirection = unreadIndicatorIsOnRight ? 'row-reverse' : 'row'
-
-	// if row-reverse, this flips to the other side
-	const paddingLeft = props.showUnreadIndicator ? 5 : 10
-
-	const swipeableProps: SwipeableProps = {
-		id: props.id,
-		rightActions: props.swipeRightActions,
-		leftActions: props.swipeLeftActions,
-		renderAction: props.renderSwipeAction,
-		actionWidth: props.swipeActionWidth,
-		gestureHandlerProps: props.swipeableRowProps,
-		renderLeftActions: props.renderLeftActions,
-		renderRightActions: props.renderRightActions,
-		textStyle: props.actionTextStyle
-	}
-
-	const ContainerComponent = props.swipeable ? Swipeable : View
-
-	return (
-		<ContainerComponent {...swipeableProps}>
-			<RectButton
-				onPress={props.onPress}
-				style={{ backgroundColor: props.backgroundColor }}
-			>
-				<View
-					style={[
-						{
-							paddingLeft,
-							...styles.container,
-							...(props.containerStyle || {})
-						},
-						{ flexDirection }
-					]}
-				>
-					{renderUnreadIndicator()}
-					<View style={[styles.wrapper]}>
-						{renderAvatarOrInitials()}
-						<View style={styles.inner}>
-							<View style={styles.content}>
-								{renderTitle()}
-								{renderDate()}
-							</View>
-							{renderSubtitle()}
-						</View>
-					</View>
-				</View>
-			</RectButton>
-		</ContainerComponent>
-	)
-}
-
-export default React.memo(Item)
-
-const styles = StyleSheet.create({
-	container: {
-		flexDirection: 'row',
-		paddingVertical: 10,
-		justifyContent: 'center',
-		marginBottom: 5,
-		paddingRight: 10
-	},
-	wrapper: {
-		flex: 1,
-		flexDirection: 'row'
-	},
-	content: {
-		flexDirection: 'row',
-		justifyContent: 'space-between'
-	},
-	inner: {
-		flex: 1,
-		paddingLeft: 10
-	}
-})

package/src/components/Inbox/index.tsx

@@ -1,315 +0,0 @@
-import React, { useRef, useEffect } from 'react'
-import {
-	Animated,
-	ListRenderItemInfo,
-	StyleSheet,
-	SafeAreaView
-} from 'react-native'
-import InboxProps, { InboxMethodProps, InboxItemProps } from './types'
-import { ExistingRoomModel } from '../../classes/Room/types'
-import Item from './Item'
-import Room from '../../classes/Room'
-import { getInitials } from '../../helpers/getInitials'
-import Separator from './Item/Separator'
-import Reanimated, {
-	Transitioning,
-	Transition,
-	TransitioningView
-} from 'react-native-reanimated'
-
-export default function<InboxItem extends ExistingRoomModel>(
-	props: InboxProps<InboxItem>
-) {
-	// "constructor" variables
-
-	// used to shuffle/transition the inbox when it changes
-	const transitionRef = useRef<TransitioningView>(null)
-
-	const numberOfRoomsWithUsersTyping = (props.rooms || []).filter(
-		room => new Room(room).getUsersTyping().length
-	).length
-
-	useEffect(() => {
-		if (props.enableRoomTransitions !== false && transitionRef.current)
-			transitionRef.current.animateNextTransition()
-	}, [props.rooms, props.enableRoomTransitions, numberOfRoomsWithUsersTyping])
-
-	// track animated position of scroll
-	const scrollY: Animated.Value =
-		props.animatedScrollNode || new Animated.Value(0)
-
-	// upate position of scroll variable
-	const onScroll = Animated.event(
-		[{ nativeEvent: { contentOffset: { y: scrollY } } }],
-		{ useNativeDriver: true }
-	)
-
-	// render room list
-	function renderList() {
-		// give a unique key to each item (flatlist prop)
-		function keyExtractor(item: InboxItem, index: number) {
-			return props.keyExtractor
-				? props.keyExtractor(item, index)
-				: (item && item.id) || index.toString()
-		}
-		return (
-			<Animated.FlatList
-				onScroll={onScroll}
-				extraData={props.extraData}
-				contentContainerStyle={styles.contentContainer}
-				ItemSeparatorComponent={() => (
-					<Separator size={props.separatorSize} color={props.separatorColor} />
-				)}
-				{...props.flatListProps}
-				keyExtractor={keyExtractor}
-				renderItem={renderItem}
-				data={props.rooms}
-			/>
-		)
-	}
-
-	// optionally render header
-	function renderHeader() {
-		const headerProps: InboxMethodProps<InboxItem>['renderHeader'] = {
-			scrollY,
-			big: props.bigHeader !== false,
-			onPressNewRoom: props.onPressNewRoom
-		}
-		if (props.renderHeader) return props.renderHeader(headerProps)
-		if (props.renderHeader === null) return null
-
-		const HeaderComponent = props.HeaderComponent || Animated.View
-
-		return <HeaderComponent {...headerProps} />
-	}
-
-	// optionally render footer
-	function renderFooter() {
-		const footerProps: InboxMethodProps<InboxItem>['renderFooter'] = {
-			scrollY
-		}
-
-		if (props.renderFooter) return props.renderFooter(footerProps)
-		if (props.renderFooter === null) return null
-
-		const FooterComponent = props.FooterComponent || Animated.View
-
-		return <FooterComponent {...footerProps} />
-	}
-
-	// flatlist methods
-
-	// render each room item
-	function renderItem(itemInfo: ListRenderItemInfo<InboxItem>) {
-		// not sure why you'd wanna return null, but just in case...
-		if (props.renderItem === null) return null
-		// render item raw – without our constructed props
-		if (props.renderItem) return props.renderItem(itemInfo)
-
-		const maxNumberOfInitials = props.maxNumberOfInitials || 2
-
-		const {
-			lastMessage,
-			members,
-			id,
-			unreadCount = 0,
-			name: roomName = ''
-		} = itemInfo.item
-
-		const room = new Room({ members, id, name: roomName })
-
-		const name = props.roomNameFunc
-			? props.roomNameFunc({ members, name: roomName })
-			: room.getName()
-
-		// first check for a room avatar
-		const roomAvatar = itemInfo.item.avatar
-
-		// either one image or an array
-		let avatar: InboxItemProps<InboxItem>['avatar'] = roomAvatar || ''
-		const initials: string = props.roomInitialsFunc
-			? props.roomInitialsFunc({
-					members,
-					name,
-					maxNumberOfInitials
-			  })
-			: room.getInitials(maxNumberOfInitials)
-
-		const otherMembers = room.getArrayOfMembersOtherThanMe()
-
-		/*
-		
-			This next block of verbose code concerns itself with 
-			the avatar / initials icon 
-		
-		*/
-
-		// if the room has no name, and we prefer to show avatars
-		// then we want to get as close as we can to showing the avatar
-		if (props.prioritizeAvatarOverInitials && !roomName) {
-			// if there's currently no avatar
-			// and only one member
-			// then make the avatar that person's picture
-			if (!avatar && otherMembers.length === 1 && otherMembers[0]) {
-				avatar = (otherMembers[0] && otherMembers[0].avatar) || ''
-			}
-			// alternatively, if there are multiple people,
-			// no room avatar,
-			// and we want to show multiple avatars as a fallback
-			if (
-				otherMembers.length > 1 &&
-				!roomAvatar &&
-				props.fallbackToMultipleAvatarsIfNoGroupAvatar !== false
-			) {
-				// TODO something here is weird, this doesn't make sense
-
-				// avatar then becomes an array which also includes the initials
-				// for each member user, an array with this => { avatar, initials }
-				// then, in the item component, if avatar is prioritized and existent, we render that
-				avatar = otherMembers
-					.map(member => ({
-						initials: getInitials(member.name, props.maxNumberOfInitials),
-						avatar: member.avatar || ''
-					}))
-					.sort((a, b) => (a.avatar > b.avatar ? 1 : -1))
-			}
-			// 😅 glad that's done
-		}
-
-		const onPress = (pointerInside?: boolean) =>
-			props.onPressItem
-				? props.onPressItem(id, pointerInside)
-				: console.log(
-						id,
-						'pressed. change onPressItem prop on the <Inbox /> component to handle this function.'
-				  )
-
-		const onLongPress = (pointerInside?: boolean) =>
-			props.onLongPressItem
-				? props.onLongPressItem(id, pointerInside)
-				: console.log(
-						'long pressed ',
-						id,
-						'edit onLongPressItem prop to handle this function'
-				  )
-
-		// well those are some props.
-		// each room receives these
-		// most of them are passed directly from the parent component props
-		// the ones marked <someprop>: props.<someprop> !== false are default true
-		const itemProps: InboxItemProps<InboxItem> = {
-			lastMessageCreatedAt: lastMessage.createdAt,
-			lastMessageText: lastMessage.text,
-			avatar,
-			name,
-			initials,
-			onPress,
-			unreadCount,
-			renderTitle: props.renderItemTitle,
-			renderDate: props.renderItemDate,
-			TitleComponent: props.ItemTitleComponent,
-			titleStyle: props.titleStyle,
-			titleContainerStyle: props.titleContainerStyle,
-			DateComponent: props.ItemDateComponent,
-			unreadIndicatorColor: props.unreadIndicatorColor,
-			unreadTextColor: props.unreadTextColor,
-			showUnreadIndicator: props.showUnreadIndicator !== false,
-			showUnreadIndicatorCount: props.showUnreadIndicatorCount !== false,
-			UnreadIndicatorComponent: props.UnreadIndicatorComponent,
-			renderUnreadIndicator: props.renderUnreadIndicator,
-			unreadIndicatorStyle: props.unreadIndicatorStyle,
-			unreadIndicatorTextStyle: props.unreadIndicatorTextStyle,
-			unreadIndicatorPosition: props.unreadIndicatorPostion,
-			dateToStringFunc: props.dateToStringFunc,
-			onLongPress,
-			prioritizeAvatarOverInitials:
-				props.prioritizeAvatarOverInitials !== false, // default true
-			renderAvatar: props.renderAvatar,
-			renderInitials: props.renderInitials,
-			renderSubtitle: props.renderItemSubtitle,
-			SubtitleComponent: props.ItemSubtitleComponent,
-			subtitleTextStyle: props.itemSubtitleTextStyle,
-			AvatarComponent: props.ItemAvatarComponent,
-			InitialsComponent: props.ItemInitialsComponent,
-			roomInitialsFunc: props.roomInitialsFunc,
-			avatarImageProps: props.avatarImageProps,
-			avatarSize: props.avatarSize,
-			initialsContainerStyle: props.initialsContainerStyle,
-			initialsTextStyle: props.initialsTextStyle,
-			disableAvatar: props.disableAvatar,
-			initialsBackgroundColor: props.initialsBackgroundColor,
-			initialsTextColor: props.initialsTextColor,
-			swipeable: props.swipeableRow !== false,
-			id,
-			renderSwipeAction: props.renderSwipeAction,
-			swipeLeftActions: props.swipeLeftActions,
-			swipeRightActions: props.swipeRightActions,
-			swipeActionWidth: props.swipeActionWidth,
-			backgroundColor: props.itemBackgroundColor || 'white',
-			swipeableRowProps: props.swipeableRowProps,
-			unreadIndicatorType: props.unreadIndicatorType,
-			unreadIndicatorGradientProps: props.unreadIndicatorGradientProps,
-			unreadIndicatorSize: props.unreadIndicatorSize,
-			containerStyle: props.itemContainerStyle,
-			dateStyle: props.dateStyle,
-			renderLeftActions: props.renderLeftActions,
-			renderRightActions: props.renderRightActions,
-			actionTextStyle: props.actionTextStyle,
-			showTypingIndicator: props.showTypingIndicator !== false,
-			renderTypingIndicator: props.renderTypingIndicator,
-			numberOfPeopleTyping: room.getUsersTyping().length
-		}
-
-		// if you want to use your own renderItem function, but include the props we made
-		// the alternative is a normal props.renderItem() which gets the raw flatlist data
-		if (props.renderItemWithProps) return props.renderItemWithProps(itemProps)
-
-		// custom InboxItem component, or the one we used
-		const InboxItemComponent = props.InboxItemComponent || Item
-		return <InboxItemComponent {...itemProps} />
-	}
-
-	// component props
-	const Container =
-		props.ContainerComponent ||
-		(props.safeArea
-			? Reanimated.createAnimatedComponent(SafeAreaView)
-			: Reanimated.View)
-	const containerStyles = [styles.container, props.containerStyle]
-
-	// inbox shuffle transition config
-	const transition: InboxProps<
-		InboxItem
-	>['roomTransitionConfig'] = props.roomTransitionConfig || (
-		<Transition.Together>
-			<Transition.Change
-				interpolation="easeInOut"
-				durationMs={400}
-				propagation="top"
-			/>
-		</Transition.Together>
-	)
-
-	return (
-		<Transitioning.View
-			transition={transition}
-			ref={transitionRef}
-			style={containerStyles}
-		>
-			<Container style={containerStyles}>
-				{renderHeader()}
-				{renderList()}
-				{renderFooter()}
-			</Container>
-		</Transitioning.View>
-	)
-}
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1
-	},
-	contentContainer: {
-		flexGrow: 1
-	}
-})

package/src/components/Inbox/question.md

@@ -1,21 +0,0 @@
-Any idea on how to achieve this fix with react hooks in a function component? Not sure what to do since you can't use `this`.
-
-I have an `onViewableItemsChanged` function that relies on two outside variables: `messages` and `roomId`. I tried using `useCallback`, but I still get this error, since an updated `messages` array refreshes onViewableItemsChanged.
-
-**Example:**
-
-```javascript
-const onViewableItemsChanged = useCallback(
-	info => {
-		info.viewableItems.forEach(({ item }) => {
-			const mostRecentMessage = messages[messages.length - 1]
-			if (item.id === mostRecentMessage) viewMessage(roomId, item.id)
-		})
-	},
-	[messages, roomId]
-)
-
-...
-
-return <FlatList onViewableItemsChanged={onViewableItemsChanged} />
-```

package/src/components/Inbox/readme.md

@@ -1,21 +0,0 @@
-# Juice Inbox Component
-
-This react native component is a drop-in for an entire inbox UI.
-
-It directly integrates with Juice's `useInbox` hook.
-
-## Quick example
-
-This example shows a **fully backend-connected**, **real-time** inbox. 🤯
-
-```javascript
-import * as React from 'react'
-import Juice, { useInbox } from 'usechat'
-
-export default function() {
-	const [{ data, loading }] = useInbox()
-	return <Juice.Inbox rooms={data} onPressItem={id => console.log(id)} />
-}
-```
-
-You can use it with your own backend if you'd like, since it's fully customizable. This component has a ton of props, so everything is extensible. But it was definitely made with `useInbox` in mind.