chat 1.0.6 → 3.0.0

package/src/components/RoomCreator/Header/index.tsx

@@ -1,74 +0,0 @@
-import React from 'react'
-import { View, Text, StyleSheet, Image } from 'react-native'
-import { RoomCreatorHeaderProps } from '../types'
-import Animated from 'react-native-reanimated'
-
-export default (props: RoomCreatorHeaderProps) => {
-	return (
-		<Animated.View
-			style={[
-				styles.container,
-				{ backgroundColor: props.backgroundColor },
-				props.containerStyle
-			]}
-		>
-			<View style={[styles.notchContainer]}>
-				<View style={styles.notch} />
-			</View>
-			<View style={styles.wrapper}>
-				{!!props.image && (
-					<View style={[styles.imageContainer, props.imageStyle]}>
-						<Image style={[styles.image]} source={{ uri: props.image }} />
-					</View>
-				)}
-				<View>
-					{!!props.title && (
-						<Text style={[styles.text, props.titleStyle]}>{props.title}</Text>
-					)}
-					{!!props.subtitle && (
-						<Text style={[props.subtitleStyle]}>{props.subtitle}</Text>
-					)}
-				</View>
-			</View>
-		</Animated.View>
-	)
-}
-
-const styles = StyleSheet.create({
-	container: {
-		// height: 75,
-		borderTopRightRadius: 10,
-		borderTopLeftRadius: 10,
-		overflow: 'hidden',
-		backgroundColor: 'white',
-		borderBottomColor: 'lightgray',
-		borderBottomWidth: 1,
-		padding: 10,
-		zIndex: -1
-	},
-	wrapper: {
-		flexDirection: 'row'
-	},
-	text: {
-		fontWeight: 'bold',
-		fontSize: 18
-	},
-	notchContainer: {
-		alignItems: 'center',
-		paddingVertical: 10
-	},
-	notch: {
-		width: 40,
-		height: 5,
-		borderRadius: 5,
-		backgroundColor: 'lightgray'
-	},
-	image: {
-		...StyleSheet.absoluteFillObject
-	},
-	imageContainer: {
-		height: 80,
-		width: 80,
-		marginRight: 10
-	}
-})

package/src/components/RoomCreator/index.tsx

@@ -1,177 +0,0 @@
-import React, { useMemo, useRef, useState, useEffect } from 'react'
-import BottomSheet from 'reanimated-bottom-sheet'
-import Header from './Header'
-import Content from './Content'
-import Animated from 'react-native-reanimated'
-import {
-	RoomCreatorProps,
-	Selected,
-	RoomCreatorContentProps,
-	RoomCreatorHeaderProps
-} from './types'
-
-const { Value, useCode, block, cond, eq, call, and } = Animated
-
-const initialSelected: Selected = {}
-
-function RoomCreator(props: RoomCreatorProps) {
-	const sheetRef = useRef<BottomSheet>(null)
-	const callbackNode = useMemo(() => props.callbackNode || new Value(1), [
-		props.callbackNode
-	])
-	const [selectedState, setSelected] = useState<Selected>(initialSelected)
-	const [text, setText] = useState('')
-
-	const ref = props.sheetRef !== undefined ? props.sheetRef : sheetRef
-
-	// should we handle selected state or not
-	const selected = props.selected || selectedState
-
-	const ready = useMemo(
-		() =>
-			props.isReadyFunc
-				? props.isReadyFunc(selected)
-				: !!Object.keys(selected).filter(Boolean).length,
-		[props, selected]
-	)
-
-	const mounted = useRef(0)
-
-	useCode(
-		() =>
-			block([
-				cond(
-					// if the sheet just opened
-					eq(callbackNode, 1),
-					call([], onDidClose),
-					// if the sheet just closed
-					cond(
-						and(eq(callbackNode, 0), (mounted.current, 1)),
-						call([], onDidOpen)
-					)
-				)
-			]),
-		[callbackNode, onDidClose, onDidOpen]
-	)
-
-	useEffect(() => {
-		if (!mounted.current) mounted.current = 1
-	}, [])
-
-	function reset() {
-		setSelected(initialSelected)
-		setText('')
-	}
-
-	const toggleSelected = (id: string) => {
-		if (props.onSelectItem) return props.onSelectItem(id)
-
-		setSelected(currentlySelected => {
-			const user = props.users.find(u => u.id === id)
-			if (currentlySelected[id] || !user) {
-				const { [id]: pressed, ...ommitted } = currentlySelected
-				return ommitted
-			}
-			return {
-				...currentlySelected,
-				[id]: user.type
-			}
-		})
-	}
-
-	const open = () => ref.current && ref.current.snapTo(1)
-	const close = () => ref.current && ref.current.snapTo(0)
-
-	if (props.creatorRef) {
-		props.creatorRef.current = {
-			open,
-			close
-		}
-	}
-
-	// useEffect(() => {
-	// 	if (props.isOpen === true) open()
-	// 	else close()
-	// }, [props.isOpen])
-
-	function onDidClose() {
-		if (props.onDidClose) props.onDidClose()
-		reset()
-	}
-
-	function onDidOpen() {
-		if (props.onDidOpen) props.onDidOpen()
-	}
-
-	const renderHeader = () => {
-		const headerProps: RoomCreatorHeaderProps = {
-			callbackNode,
-			image: props.headerImage,
-			imageStyle: props.headerImageStyle,
-			subtitle: props.headerSubtitle,
-			subtitleStyle: props.headerSubtitleStyle,
-			title: props.headerTitle || 'New Message',
-			titleStyle: props.headerTitleStyle,
-			backgroundColor: props.headerBackgroundColor || '#f8f8f8',
-			containerStyle: props.headerContainerStyle
-		}
-		if (props.renderHeader) return props.renderHeader(headerProps)
-		if (props.renderHeader === null) return null
-
-		return <Header {...headerProps} />
-	}
-
-	const renderContent = () => {
-		const contentProps: RoomCreatorContentProps = {
-			toggleSelected,
-			selected,
-			renderFooter: props.renderFooter,
-			buttons: props.buttons,
-			renderButton: props.renderButton,
-			ButtonComponent: props.ButtonComponent,
-			users: props.users,
-			renderItem: props.renderItem,
-			ready,
-			renderSelectedIcon: props.renderSelectedIcon,
-			selectedIconActiveColor: props.selectedIconActiveColor,
-			selectedIconInactiveColor: props.selectedIconInactiveColor,
-			enableTextInput: props.enableTextInput,
-			inputContainerStyle: props.inputContainerStyle,
-			inputStyle: props.inputStyle,
-			showInputWhenNotReady: props.showInputWhenNotReady,
-			inputProps: props.inputProps,
-			onChangeText: setText,
-			text
-		}
-		if (props.renderContent) return props.renderContent(contentProps)
-		if (props.renderContent === null) return null
-
-		return <Content {...contentProps} />
-	}
-
-	const snapPoints = useMemo(() => props.snapPoints || ['0%', '90%'], [
-		props.snapPoints
-	])
-
-	const initialSnap = props.startOpen ? 1 : 0
-
-	const renderSheet = () => {
-		return (
-			<BottomSheet
-				{...{ initialSnap }}
-				{...props.sheetProps}
-				{...{
-					renderHeader,
-					renderContent,
-					snapPoints,
-					callbackNode,
-					ref
-				}}
-			/>
-		)
-	}
-
-	return <>{renderSheet()}</>
-}
-
-export default RoomCreator

package/src/components/RoomCreator/types.ts

@@ -1,233 +0,0 @@
-import { ReactNode, ComponentType, ReactElement } from 'react'
-import Animated from 'react-native-reanimated'
-import BottomSheet from 'reanimated-bottom-sheet'
-import {
-	NewMessageModel,
-	SendFromFeedRecipients,
-	SendFromFeedRecipientArray
-} from '../../classes/Message/types'
-import { RoomMembers } from '../../classes/Room/types'
-import {
-	TextStyle,
-	StyleProp,
-	ImageStyle,
-	ViewStyle,
-	TextInputProps
-} from 'react-native'
-// import { RoomCreatorItemProps } from './types'
-
-export interface RoomCreatorRef {
-	open: () => void
-	close: () => void
-}
-
-interface RoomCreatorItem extends User {
-	type: Selected[keyof Selected]
-}
-
-export interface RoomCreatorProps {
-	renderHeader?: null | ((props: RoomCreatorHeaderProps) => ReactNode)
-	renderContent?: null | ((props: RoomCreatorContentProps) => ReactNode)
-	snapPoints?: [string, string] | [number, number]
-	callbackNode?: Animated.Value<number>
-	sheetProps?: Omit<BottomSheet['props'], 'snapPoints'>
-	sheetRef?: React.MutableRefObject<BottomSheet>
-	creatorRef?: React.MutableRefObject<RoomCreatorRef>
-	message?: null | NewMessageModel
-	renderFooter?: null | ((props: RoomCreatorFooterProps) => ReactNode)
-	disableSendAsGroup?: boolean
-	onSendSeparately?: RoomCreatorFunctions['onSendSeparately']
-	onCreateRoom?: RoomCreatorFunctions['onCreateRoom']
-	onSendAsGroup?: RoomCreatorFunctions['onSendAsGroup']
-	selected?: Selected
-	/**
-	 * (Optional) Function called when a user is pressed.
-	 * If used, the internal state manager of pressed items is disabled.
-	 *
-	 * **Important** you must use the `selected` too prop if you use this prop.
-	 *
-	 * @param id - the ID of the pressed user
-	 *
-	 * @example
-	 * ```javascript
-	 * return <Inbox selected={selected} onSelectItem />
-	 * ```
-	 */
-	onSelectItem?: (id: string) => void
-	users: Array<RoomCreatorItem>
-	onDidClose?: () => void
-	onDidOpen?: () => void
-	text?: string
-	onChangeText?: string
-	disableComposer?: boolean
-	isReadyFunc?: (selected: Selected) => boolean
-	startOpen?: boolean
-	buttons: Buttons
-	renderButton?: (props: RenderButtonProps) => ReactNode | null
-	ButtonComponent?: ComponentType<RenderButtonProps>
-	headerTitle?: string
-	headerTitleStyle?: RoomCreatorHeaderProps['titleStyle']
-	headerSubtitle?: RoomCreatorHeaderProps['subtitle']
-	headerSubtitleStyle?: RoomCreatorHeaderProps['subtitleStyle']
-	headerImage?: RoomCreatorHeaderProps['image']
-	headerImageStyle?: RoomCreatorHeaderProps['imageStyle']
-	renderItem?: null | ((props: RoomCreatorItemProps) => ReactElement)
-	selectedIconActiveColor?: string
-	selectedIconInactiveColor?: string
-	renderSelectedIcon?: (iconProps: SelectedIconProps) => ReactNode | null
-	/**
-	 * Optionally enable text box. Text will be passed to onPress function for all buttons.
-	 */
-	enableTextInput?: RoomCreatorFooterProps['enableTextInput']
-	inputStyle?: RoomCreatorFooterProps['inputStyle']
-	inputContainerStyle?: RoomCreatorFooterProps['inputContainerStyle']
-	showInputWhenNotReady?: RoomCreatorFooterProps['showInputWhenNotReady']
-	inputProps?: RoomCreatorInputProps['inputProps']
-	headerBackgroundColor?: string
-	headerContainerStyle?: ViewStyle
-}
-
-export type RoomCreatorFunctions = {
-	onSendSeparately: (details: {
-		message: NewMessageModel
-		members: SendFromFeedRecipients
-	}) => Promise<void>
-	onCreateRoom: (members: RoomMembers) => void
-	onSendAsGroup: (details: {
-		message: NewMessageModel
-		members: SendFromFeedRecipientArray['recipients']
-	}) => Promise<any>
-}
-
-export interface RoomCreatorItemProps {
-	name: string
-	id: string
-	avatar: string
-	selected: boolean
-	handle?: string
-	toggleSelected: (id: string) => void
-	renderSelectedIcon?: RoomCreatorProps['renderSelectedIcon']
-	selectedIconActiveColor?: RoomCreatorProps['selectedIconActiveColor']
-	selectedIconInactiveColor?: RoomCreatorProps['selectedIconInactiveColor']
-}
-
-export interface SelectedIconProps {
-	activeColor: string
-	inactiveColor: string
-	active: boolean
-}
-
-export interface RoomCreatorContentProps {
-	toggleSelected: (id: string) => void
-	selected: Selected
-	renderFooter?: RoomCreatorProps['renderFooter']
-	renderButton?: RoomCreatorProps['renderButton']
-	buttons: RoomCreatorProps['buttons']
-	ButtonComponent?: RoomCreatorProps['ButtonComponent']
-	users: RoomCreatorProps['users']
-	renderItem?: RoomCreatorProps['renderItem']
-	ready: boolean
-	renderSelectedIcon?: RoomCreatorProps['renderSelectedIcon']
-	selectedIconActiveColor?: RoomCreatorProps['selectedIconActiveColor']
-	selectedIconInactiveColor?: RoomCreatorProps['selectedIconInactiveColor']
-	enableTextInput?: RoomCreatorFooterProps['enableTextInput']
-	inputStyle?: RoomCreatorFooterProps['inputStyle']
-	inputContainerStyle?: RoomCreatorFooterProps['inputContainerStyle']
-	showInputWhenNotReady?: RoomCreatorFooterProps['showInputWhenNotReady']
-	inputProps?: RoomCreatorInputProps['inputProps']
-	text: RoomCreatorInputProps['text']
-	onChangeText: RoomCreatorInputProps['onChangeText']
-}
-
-export interface RoomCreatorHeaderProps {
-	callbackNode: Animated.Value<number>
-	title: string
-	subtitle?: string
-	image?: string
-	imageStyle?: StyleProp<ImageStyle>
-	titleStyle?: StyleProp<TextStyle>
-	subtitleStyle?: StyleProp<TextStyle>
-	backgroundColor?: string
-	containerStyle?: ViewStyle
-}
-
-export interface RoomCreatorFooterProps {
-	ButtonComponent?: RoomCreatorProps['ButtonComponent']
-	renderButton?: RoomCreatorProps['renderButton']
-	buttons: RoomCreatorProps['buttons']
-	ready: boolean
-	selected: Selected
-	enableTextInput: boolean
-	inputStyle?: RoomCreatorInputProps['inputStyle']
-	inputContainerStyle?: RoomCreatorInputProps['inputContainerStyle']
-	inputProps?: RoomCreatorInputProps['inputProps']
-	showInputWhenNotReady: boolean
-	text: RoomCreatorInputProps['text']
-	onChangeText: RoomCreatorInputProps['onChangeText']
-}
-
-export interface RoomCreatorInputProps {
-	text: string
-	onChangeText: TextInputProps['onChangeText']
-	inputProps?: TextInputProps
-	inputStyle?: TextInputProps['style']
-	inputContainerStyle?: StyleProp<ViewStyle>
-}
-
-export interface Selected {
-	[id: string]: 'room' | 'user'
-}
-
-/**
- * Buttons will show up at the bottom of the room creator
- *
- * @example
- * Note that in the example below, you will need to make sure that selected matches the proper schema for members. It is left this way for simplicity.
- * ```javascript
- * <Inbox
- * 	buttons={[
- * 	 {
- * 	   text: 'Start Chat',
- *     onPress: (selected) => new Room({ members: selected }).create()
- * 	 }
- * 	]}
- * />
- * ```
- *
- *
- */
-export interface Button {
-	text: string
-	onPress: (config: {
-		selected: Selected
-		ready: boolean
-		loading: boolean
-		text: string
-	}) => any | Promise<any>
-	disabledString?: string
-	color?: string
-	textColor?: string
-	disabledColor?: string
-	disabledTextColor?: string
-	ready?: boolean
-	loading?: boolean
-}
-
-export interface RenderButtonProps {
-	backgroundColor: string
-	text: string
-	textColor: string
-	onPress: () => void
-	ready: boolean
-	index: number
-	loading: boolean
-}
-
-export interface User {
-	id: string
-	name: string
-	avatar: string
-	handle?: string
-}
-
-export type Buttons = Button[]

package/src/components/TypingIndicator/index.tsx

@@ -1,169 +0,0 @@
-import React from 'react'
-import { View, StyleSheet } from 'react-native'
-import { LinearGradient } from 'expo-linear-gradient'
-import Animated, { Easing } from 'react-native-reanimated'
-
-const {
-	Value,
-	useCode,
-	interpolate,
-	Clock,
-	set,
-	block,
-	startClock,
-	cond,
-	stopClock,
-	timing
-} = Animated
-
-const dots = [1, 2, 3]
-const length = dots.length
-
-export default function(props: TypingIndicatorProps) {
-	const animatedValue = new Value(0)
-	const config = {
-		duration: 2500,
-		toValue: new Value(length + 1),
-		easing: Easing.inOut(Easing.linear)
-	}
-	useCode(() => set(animatedValue, runLoop(config)), [animatedValue])
-
-	const { theme = 'red' } = props
-
-	if (props.hide) return null
-
-	const renderDot = (index: number) => {
-		const opacity = interpolate(animatedValue, {
-			inputRange: [index - 1, index, index + 1],
-			outputRange: [0, 1, 0]
-		})
-		return (
-			<View key={index.toString()} style={styles.dot}>
-				<LinearGradient
-					{...{
-						colors: props.dotEmptyColors || themes[theme].emptyDotColors,
-						start: [0.9, 0.9],
-						end: [0.1, 0.1]
-					}}
-					style={{ flex: 1 }}
-				/>
-				<Animated.View style={{ opacity, ...StyleSheet.absoluteFillObject }}>
-					<LinearGradient
-						{...{
-							colors: props.dotColors || themes[theme].dotColors,
-							start: [0.1, 0.1],
-							end: [0.9, 0.9]
-						}}
-						style={{ flex: 1 }}
-					/>
-				</Animated.View>
-			</View>
-		)
-	}
-	return (
-		<View style={styles.container}>
-			<LinearGradient
-				{...{
-					colors: props.backgroundColors || themes[theme].backgroundColors,
-					start: [0.1, 0.1],
-					end: [0.9, 0.9]
-				}}
-				style={styles.wrapper}
-			>
-				<View style={styles.dots}>{dots.map(renderDot)}</View>
-			</LinearGradient>
-		</View>
-	)
-}
-
-const themes = {
-	purple: {
-		backgroundColors: ['#7950f2', '#5f3dc4'],
-		dotColors: ['white', 'white'],
-		emptyDotColors: ['#adb5bd', '#adb5bd']
-	},
-	red: {
-		backgroundColors: ['#E5E5EA', '#E5E5EA'],
-		dotColors: ['#ff8000', '#ec2a80'],
-		emptyDotColors: ['#D1D1D6', '#D1D1D6']
-	},
-	default: {
-		backgroundColors: ['#E5E5EA', '#E5E5EA'],
-		dotColors: ['#8E8E93', '#8E8E93'],
-		emptyDotColors: ['#D1D1D6', '#D1D1D6']
-	}
-}
-
-export interface TypingIndicatorProps {
-	hide?: boolean
-	backgroundColors?: string[]
-	dotColors?: string[]
-	dotEmptyColors?: string[]
-	theme?: 'purple' | 'red' | 'default'
-}
-
-const dotSize = 9
-const padding = dotSize / 4
-const paddingVertical = padding * 5
-const totalHeight = dotSize + paddingVertical * 2
-
-const styles = StyleSheet.create({
-	container: {
-		alignItems: 'flex-start'
-	},
-	wrapper: {
-		paddingHorizontal: padding * 3,
-		paddingVertical,
-		borderRadius: totalHeight / 2
-	},
-	dots: {
-		flexDirection: 'row'
-	},
-	dot: {
-		height: dotSize,
-		width: dotSize,
-		borderRadius: dotSize / 2,
-		backgroundColor: 'white',
-		marginHorizontal: padding,
-		overflow: 'hidden'
-	}
-})
-
-function runLoop(config: Animated.TimingConfig) {
-	const clock = new Clock()
-
-	const state = {
-		finished: new Value(0),
-		position: new Value(0),
-		time: new Value(0),
-		frameTime: new Value(0)
-	}
-
-	return block([
-		// start right away
-		startClock(clock),
-
-		// process your state
-		timing(clock, state, config),
-
-		// when over (processed by timing at the end)
-		cond(state.finished, [
-			// we stop
-			stopClock(clock),
-
-			// set flag ready to be restarted
-			set(state.finished, 0),
-			// same value as the initial defined in the state creation
-			set(state.position, 0),
-
-			// very important to reset this ones !!! as mentioned in the doc about timing is saying
-			set(state.time, 0),
-			set(state.frameTime, 0),
-
-			// and we restart
-			startClock(clock)
-		]),
-
-		state.position
-	])
-}

package/src/components/index.ts

@@ -1,18 +0,0 @@
-export { default as Inbox } from './Inbox'
-export { default as RoomCreator } from './RoomCreator'
-export { default as CreateRoomList } from './RoomCreator/Content'
-export { default as TypingIndicator } from './TypingIndicator'
-export { default as Messages } from './Chat'
-export { default as Avatar } from './Avatar'
-export {
-	default as ChatProvider,
-	chat,
-	fuego,
-	setChat,
-	setFuego,
-} from './ChatProvider'
-export { default as Initials } from './Inbox/Item/Initials'
-export { default as Bubble } from './Chat/Bubble'
-export { default as UnreadIndicator } from './Inbox/Item/UnreadIndicator'
-export { default as Composer } from './Chat/Composer'
-export { default as SystemMessage } from './Chat/SystemMessage'

package/src/helpers/getInitials.ts

@@ -1,11 +0,0 @@
-export const getInitials = function(name: string | null, maxLength = 2) {
-	const parts = name?.split(' ') ?? ''
-	let initials = ''
-	for (let i = 0; i < parts.length; i++) {
-		if (parts[i].length > 0 && parts[i] !== '') {
-			initials += parts[i][0]
-		}
-	}
-	if (maxLength) initials = initials.slice(0, maxLength)
-	return initials
-}

package/src/helpers/sortByAvatar.ts

@@ -1 +0,0 @@
-export default (a, b) => (a.avatar > b.avatar ? 1 : -1)

package/src/hooks/index.ts

@@ -1,8 +0,0 @@
-export { default as useMessages } from './useMessages'
-export { default as useRoom } from './useRoom'
-export { default as useTyping } from './useTyping'
-export { default as useInbox } from './useInbox'
-export { default as useCreator } from './useCreator'
-export { default as useViewMessages } from './useViewMessages'
-export { default as useSendToPeople } from './useSend/useSendToPeople'
-export { default as useSendToGroup } from './useSend/useSendToGroup'