chat 1.0.8 → 3.0.0

package/src/components/ChatProvider/index.tsx

@@ -1,31 +0,0 @@
-import React, { FunctionComponent } from 'react'
-import { FuegoProvider, Fuego } from '@nandorojo/fuego'
-import ChatContext from '../../ChatContext'
-import { ChatProviderProps } from './types'
-import Chat from '../../classes/Chat/index'
-
-export let fuego: Fuego
-export let chat: Chat
-
-// useful for non-react projects that need to use this var too.
-export const setFuego = (f: Fuego) => (fuego = f)
-export const setChat = (c: Chat) => (chat = c)
-
-const Provider: FunctionComponent<ChatProviderProps> = ({
-	children,
-	fuego: FuegoInstance,
-	chat: ChatInstance = new Chat({})
-}) => {
-	setFuego(FuegoInstance)
-	setChat(ChatInstance)
-	// fuego = FuegoInstance
-	// chat = ChatInstance
-
-	return (
-		<FuegoProvider fuego={fuego}>
-			<ChatContext.Provider>{children}</ChatContext.Provider>
-		</FuegoProvider>
-	)
-}
-
-export default Provider

package/src/components/ChatProvider/types.ts

@@ -1,8 +0,0 @@
-import { Fuego } from '@nandorojo/fuego'
-import Chat from '../../classes/Chat'
-
-export interface ChatProviderProps {
-	fuego: Fuego
-	roomPath?: string
-	chat?: Chat
-}

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

@@ -1,47 +0,0 @@
-import React, { FunctionComponent } from 'react'
-import { CircleProps } from './types'
-import { View, StyleSheet } from 'react-native'
-
-const Circle: FunctionComponent<CircleProps> = props => {
-	const size = props.size
-	const height = props.height || size
-	const width = props.width || size
-	const borderWidth = props.borderWidth || 0
-	const borderRadius = props.borderRadius || size / 2
-
-	const innerSize = size - borderWidth * 2
-	const innerBorderRadius = innerSize / 2
-	return (
-		<View
-			style={[
-				styles.container,
-				{ height, width, borderRadius, backgroundColor: props.borderColor }
-			]}
-		>
-			<View
-				style={[
-					styles.wrapper,
-					{
-						height: innerSize,
-						width: innerSize,
-						borderRadius: innerBorderRadius
-					}
-				]}
-			>
-				{props.children}
-			</View>
-		</View>
-	)
-}
-
-export default Circle
-
-const styles = StyleSheet.create({
-	container: {
-		justifyContent: 'center',
-		alignItems: 'center'
-	},
-	wrapper: {
-		overflow: 'hidden'
-	}
-})

package/src/components/Inbox/Item/Circle/types.ts

@@ -1,8 +0,0 @@
-export interface CircleProps {
-	size: number
-	height?: number
-	width?: number
-	borderWidth?: number
-	borderRadius?: number
-	borderColor?: string
-}

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

@@ -1,41 +0,0 @@
-import React from 'react'
-import { Text, StyleSheet, View } from 'react-native'
-import { InitialsProps } from '../../types'
-
-export default React.memo((props: InitialsProps) => {
-	const borderRadius = props.size / 2
-	const fontSize = props.size / 2.5
-	return (
-		<View
-			style={[
-				styles.container,
-				props.containerStyle ? props.containerStyle : {},
-				props.backgroundColor ? { backgroundColor: props.backgroundColor } : {},
-				{ borderRadius, height: props.size, width: props.size }
-			]}
-		>
-			<Text
-				style={[
-					styles.text,
-					{ fontSize },
-					props.textStyle ? props.textStyle : {},
-					props.textColor ? { color: props.textColor } : {}
-				]}
-			>
-				{props.initials.toUpperCase()}
-			</Text>
-		</View>
-	)
-})
-
-const styles = StyleSheet.create({
-	container: {
-		backgroundColor: 'lightblue',
-		alignItems: 'center',
-		justifyContent: 'center'
-	},
-	text: {
-		color: 'white',
-		fontWeight: 'bold'
-	}
-})

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

@@ -1,26 +0,0 @@
-import React from 'react'
-import { Text, StyleSheet } from 'react-native'
-import moment from 'moment'
-import { DateProps } from '../../types'
-
-export default (props: DateProps) => {
-	const text = props.dateToStringFunc
-		? props.dateToStringFunc(props.date)
-		: moment(props.date).calendar(undefined, {
-				lastDay: '[Yesterday]',
-				sameDay: 'LT',
-				nextDay: '[Tomorrow at] LT',
-				lastWeek: 'dddd',
-				nextWeek: '[Next] dddd',
-				sameElse: 'L'
-		  })
-
-	return <Text style={[styles.text, props.style]}>{text}</Text>
-}
-
-const styles = StyleSheet.create({
-	text: {
-		color: 'gray',
-		paddingLeft: 5
-	}
-})

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

@@ -1,13 +0,0 @@
-import React from 'react'
-import { View } from 'react-native'
-
-export default (props: { color?: string; size?: number }) => {
-	return (
-		<View
-			style={{
-				backgroundColor: props.color || 'lightgray',
-				height: props.size || 0.75
-			}}
-		/>
-	)
-}

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

@@ -1,23 +0,0 @@
-import React from 'react'
-import { Text, StyleSheet } from 'react-native'
-import { InboxItemSubtitleProps } from '../../types'
-
-export default function(props: InboxItemSubtitleProps) {
-	const { lastMessageText, textStyle = {} } = props
-	return (
-		<Text
-			style={[styles.text, textStyle]}
-			numberOfLines={2}
-			ellipsizeMode={'tail'}
-		>
-			{lastMessageText}
-		</Text>
-	)
-}
-
-const styles = StyleSheet.create({
-	text: {
-		color: 'gray',
-		marginTop: 5
-	}
-})

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

@@ -1,143 +0,0 @@
-import React, { FunctionComponent, useRef } from 'react'
-import Swipes from 'react-native-gesture-handler/Swipeable'
-import { Animated, Text, View, StyleSheet } from 'react-native'
-import { SwipeableProps, SwipeableAction } from '../../types'
-import { RectButton } from 'react-native-gesture-handler'
-
-const Swipeable: FunctionComponent<SwipeableProps> = props => {
-	const actionItemWidth = props.actionWidth || 64
-	const swipeableRowRef = useRef<Swipes>(null)
-
-	function renderAction(
-		action: SwipeableAction,
-		index: number,
-		progress: Progress,
-		drag: Drag,
-		side: 'left' | 'right',
-		numberOfActions: number
-	) {
-		if (props.renderAction)
-			return props.renderAction(action, index, progress, drag, side)
-		if (props.renderAction === null) return null
-
-		const outputRange =
-			side === 'right'
-				? [(numberOfActions - index) * actionItemWidth, 0]
-				: [-index * actionItemWidth, 0]
-
-		const translateX = progress.interpolate({
-			inputRange: [0, 1],
-			outputRange
-		})
-
-		function onPress() {
-			if (swipeableRowRef.current) swipeableRowRef.current.close()
-			if (action.onPress) action.onPress(props.id)
-		}
-
-		return (
-			<Animated.View
-				key={JSON.stringify(action + `${Math.random()}`)}
-				style={{ flex: 1, transform: [{ translateX }] }}
-			>
-				<RectButton
-					style={[styles.action, { backgroundColor: action.backgroundColor }]}
-					onPress={onPress}
-				>
-					{action.renderIcon && action.renderIcon(progress, drag)}
-					<Text
-						style={[
-							styles.actionText,
-							{ color: action.color },
-							props.textStyle
-						]}
-					>
-						{action.text}
-					</Text>
-				</RectButton>
-			</Animated.View>
-		)
-	}
-	function renderRightActions(progress: Progress, drag: Drag) {
-		const actions =
-			props.rightActions ||
-			[
-				// {
-				// 	color: 'white',
-				// 	backgroundColor: 'purple',
-				// 	IconNode: null,
-				// 	text: 'Test'
-				// }
-			]
-		if (props.renderRightActions)
-			return props.renderRightActions(actions, progress, drag)
-		if (props.renderRightActions === null) return null
-
-		return renderActionList(actions, progress, drag, 'right')
-	}
-	function renderLeftActions(progress: Progress, drag: Drag) {
-		const actions =
-			props.leftActions ||
-			[
-				// {
-				// 	color: 'white',
-				// 	backgroundColor: 'blue',
-				// 	IconNode: null,
-				// 	text: 'Scripture monkey'
-				// }
-			]
-		if (props.renderLeftActions)
-			return props.renderLeftActions(actions, progress, drag)
-		if (props.renderLeftActions === null) return null
-
-		return renderActionList(actions, progress, drag, 'left')
-	}
-	function renderActionList(
-		actions: SwipeableAction[],
-		progress: Progress,
-		drag: Drag,
-		side: 'left' | 'right'
-	) {
-		return (
-			<View
-				style={[styles.actionList, { width: actionItemWidth * actions.length }]}
-			>
-				{actions.map((action, index) =>
-					renderAction(action, index, progress, drag, side, actions.length)
-				)}
-			</View>
-		)
-	}
-	return (
-		<Swipes
-			friction={2}
-			leftThreshold={30}
-			rightThreshold={40}
-			renderLeftActions={renderLeftActions}
-			renderRightActions={renderRightActions}
-			ref={swipeableRowRef}
-			{...(props.gestureHandlerProps || {})}
-		>
-			{props.children}
-		</Swipes>
-	)
-}
-
-export default React.memo(Swipeable)
-
-type Progress = Animated.Value | Animated.AnimatedInterpolation
-type Drag = Animated.AnimatedInterpolation
-
-const styles = StyleSheet.create({
-	actionList: {
-		flexDirection: 'row'
-	},
-	action: {
-		alignItems: 'center',
-		justifyContent: 'center',
-		flex: 1
-	},
-	actionText: {
-		padding: 10
-	}
-})

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

@@ -1,23 +0,0 @@
-import React from 'react'
-import { Text, StyleSheet, View } from 'react-native'
-import { InboxItemTitleProps } from '../../types'
-
-export default function({ title, style, containerStyle }: InboxItemTitleProps) {
-	return (
-		<View style={[styles.container, containerStyle]}>
-			<Text numberOfLines={1} ellipsizeMode="tail" style={[styles.text, style]}>
-				{title}
-			</Text>
-		</View>
-	)
-}
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1
-	},
-	text: {
-		fontWeight: '600',
-		fontSize: 17
-	}
-})

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

@@ -1,84 +0,0 @@
-import React from 'react'
-import { View, Text, StyleSheet, ViewStyle } from 'react-native'
-import { UnreadIndicatorProps } from '../../types'
-import { LinearGradient } from 'expo-linear-gradient'
-
-const Indicator = (props: UnreadIndicatorProps) => {
-	if (!props.show) return null
-
-	let size = props.size || (props.showCount ? 20 : 15)
-
-	// set vertical position
-	let justifyContent = 'center'
-	if (props.position === 'bottom') justifyContent = 'flex-end'
-	if (props.position === 'top') justifyContent = 'flex-start'
-
-	// determine width
-	const characterCount =
-		(props.unreadCount && props.unreadCount.toString().length) || 1
-
-	let width = size
-	if (props.showCount && characterCount === 2) width = size * 1.1
-	else if (props.showCount && characterCount === 3) width = size * 1.5
-
-	// indicator should be invisible if the count is 0, no?
-	const opacity = props.unreadCount ? 1 : 0
-
-	// if it's a gradient, set the gradient as the component
-	const BackgroundComponent = props.type === 'gradient' ? LinearGradient : View
-
-	return (
-		<View
-			style={[
-				styles.container,
-				{
-					justifyContent,
-					width: props.showCount ? size * 1.5 : size,
-					opacity
-				} as ViewStyle
-			]}
-		>
-			<BackgroundComponent
-				style={[
-					styles.background,
-					{
-						backgroundColor: props.backgroundColor,
-						width,
-						height: size,
-						borderRadius: size / 2
-					},
-					props.backgroundStyle || {}
-				]}
-				{...(props.gradientProps || {
-					colors: ['red', 'blue']
-				})}
-			>
-				<Text
-					style={[
-						styles.text,
-						props.textStyle || {},
-						props.textColor ? { color: props.textColor } : {}
-					]}
-				>
-					{!!props.showCount && (props.unreadCount || '')}
-				</Text>
-			</BackgroundComponent>
-		</View>
-	)
-}
-const styles = StyleSheet.create({
-	container: {
-		alignItems: 'center'
-	},
-	background: {
-		overflow: 'hidden',
-		alignItems: 'center',
-		justifyContent: 'center',
-		backgroundColor: 'blue'
-	},
-	text: {
-		color: 'white'
-	}
-})
-
-export default React.memo(Indicator)