chat 1.0.6 → 3.0.0

package/src/components/Chat-Old/Bubble/index.tsx

@@ -1,58 +0,0 @@
-import React, { useMemo, FunctionComponent } from 'react'
-import { BubbleProps } from '../types'
-import { View, Text, StyleSheet } from 'react-native'
-
-const Bubble: FunctionComponent<BubbleProps> = props => {
-	const containerStyles = useMemo(
-		() => [
-			styles.container,
-			props.isMe ? meStyles.container : otherStyles.container,
-			props.style
-		],
-		[props.style, props.isMe]
-	)
-	const textStyles = useMemo(
-		() => [
-			styles.text,
-			props.isMe ? meStyles.text : otherStyles.text,
-			props.style
-		],
-		[props.style, props.isMe]
-	)
-	return (
-		<View style={containerStyles} ref={props.bubbleRef}>
-			<Text style={textStyles}>{props.text}</Text>
-		</View>
-	)
-}
-
-export default Bubble
-
-const styles = StyleSheet.create({
-	container: {
-		paddingHorizontal: 10,
-		paddingVertical: 5,
-		borderRadius: 10
-	},
-	text: {
-		textAlign: 'left'
-	}
-})
-
-const meStyles = StyleSheet.create({
-	container: {
-		backgroundColor: 'blue'
-	},
-	text: {
-		color: 'white'
-	}
-})
-
-const otherStyles = StyleSheet.create({
-	container: {
-		backgroundColor: 'lightgray'
-	},
-	text: {
-		color: 'black'
-	}
-})

package/src/components/Chat-Old/Composer/Input/index.tsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import { TextInput, StyleSheet, View } from 'react-native'
-import { InputProps } from '../../types'
-
-const Input = (props: InputProps) => {
-	return (
-		<View style={[styles.container, props.containerStyle]}>
-			<TextInput
-				{...props.inputProps}
-				placeholder={props.placeholderText || 'Type a new message...'}
-				placeholderTextColor={props.placeholderColor || 'lightgray'}
-				selectionColor={props.tintColor || 'blue'}
-				onChangeText={props.onChangeText}
-				value={props.text}
-				style={[styles.input, props.style]}
-				multiline
-				ref={props.inputRef}
-			/>
-		</View>
-	)
-}
-
-export default Input
-
-const styles = StyleSheet.create({
-	container: {
-		flex: 1,
-		flexDirection: 'row'
-	},
-	input: {
-		flex: 1,
-		padding: 10
-	}
-})

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

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

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

@@ -1,131 +0,0 @@
-import React, { useState, useCallback, useMemo } from 'react'
-import uuid from 'uuid'
-import { View, StyleSheet } from 'react-native'
-import { ComposerProps, InputProps, SendButtonProps, ChatProps } from '../types'
-import Input from './Input'
-import { MessageMedia, NewMessageModel, MessageMediaWithUri } from '../../../classes/Message/types'
-import Send from './Send'
-
-const emptyMedia: Omit<MessageMedia, 'url'>[] = []
-
-export default React.memo((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] = [
-		props.text || textState,
-		(props.text && props.onInputTextChanged) || setText
-	]
-
-	const [mediaState, setMedia] = useState<MessageMediaWithUri[]>(emptyMedia)
-	const [media, onChangeMedia] = [
-		props.media || mediaState,
-		(props.media && props.onChangeMedia) || setMedia
-	]
-
-	const { textInputProps, renderTextInput } = props
-	const renderInput = useCallback(() => {
-		if (renderTextInput === null) return null
-
-		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
-		}
-
-		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
-	])
-
-	const { user } = props
-	const messagesReadyToSend = useMemo(() => {
-		const messages: NewMessageModel[] = []
-		if (media.length) {
-			;(media as MessageMedia[]).forEach(item => {
-				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) {
-			onChangeText('')
-			onChangeMedia([])
-			onSend(messagesReadyToSend)
-		}
-	}, [onChangeText, onChangeMedia, messagesReadyToSend, onSend])
-
-	const { renderSendButton, sendButtonMode } = props
-	const renderSend = useCallback(() => {
-		if (renderSendButton === null) return null
-
-		const mode: ChatProps['sendButtonMode'] = {
-			empty: 'hidden',
-			withText: 'icon',
-			...(sendButtonMode || {})
-		}
-		const sendProps: SendButtonProps = {
-			onSend: send,
-			text,
-			media,
-			user,
-			mode: (text && text.trim ? mode.withText : mode.empty) || 'icon'
-		}
-		if (renderSendButton) return renderSendButton(sendProps)
-
-		return <Send {...sendProps} />
-	}, [send, text, user, media, renderSendButton, sendButtonMode])
-
-	return (
-		<View style={props.containerStyle}>
-			<View style={styles.wrapper}>
-				{renderInput()}
-				{renderSend()}
-			</View>
-		</View>
-	)
-})
-
-const styles = StyleSheet.create({
-	container: {},
-	wrapper: {
-		flexDirection: 'row'
-	}
-})

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

@@ -1,160 +0,0 @@
-import React, {
-	useCallback,
-	useRef,
-	MutableRefObject,
-	useMemo,
-	FunctionComponent
-} from 'react'
-import { View, StyleSheet, Text } from 'react-native'
-import { MessageProps } from '../types'
-import { NewMessageModel } from '../../../classes/Message/types'
-import Bubble from '../Bubble'
-import { Avatar, Initials } from '../..'
-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 { 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])
-
-	const maybeRenderName = useCallback(() => {
-		return props.showName && props.name ? (
-			<Text style={styles.name}>{props.name}</Text>
-		) : null
-	}, [props.showName, props.name])
-
-	const {
-		renderAvatar,
-		avatar,
-		avatarImageProps,
-		avatarSize,
-		showAvatar,
-		name,
-		renderInitials,
-		initialsBackgroundColor,
-		initialsTextColor
-	} = props
-	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 || 40
-
-		const Container: FunctionComponent<{}> = ({ children }) => (
-			<View style={{ opacity }}>{children}</View>
-		)
-
-		if (avatar) {
-			const avatarProps: AvatarProps = {
-				avatar: avatar,
-				imageProps: avatarImageProps,
-				size
-			}
-			if (renderAvatar) return renderAvatar(avatarProps)
-			return (
-				<Container>
-					<Avatar {...avatarProps} />
-				</Container>
-			)
-		}
-		const initialsProps: InitialsProps = {
-			initials: getInitials(name),
-			size,
-			textColor: initialsTextColor,
-			backgroundColor: initialsBackgroundColor || props.tintColor
-		}
-		if (renderInitials) return renderInitials(initialsProps)
-		return (
-			<Container>
-				<Initials {...initialsProps} />
-			</Container>
-		)
-	}, [
-		avatar,
-		avatarImageProps,
-		avatarSize,
-		renderAvatar,
-		showAvatar,
-		name,
-		renderInitials,
-		initialsBackgroundColor,
-		initialsTextColor,
-		props.tintColor
-	])
-
-	return (
-		<View style={containerStyle}>
-			<View style={wrapperStyle}>
-				{renderAvatarOrInitials()}
-				<View>
-					{maybeRenderName()}
-					<Bubble
-						text={props.text}
-						isMe={props.isMe}
-						style={props.bubbleStyle}
-						textStyle={props.bubbleTextStyle}
-						bubbleRef={bubble as MutableRefObject<View>}
-					/>
-				</View>
-			</View>
-			{footer()}
-		</View>
-	)
-}
-
-export default React.memo(Message)
-
-const styles = StyleSheet.create({
-	container: {
-		marginTop: 1,
-		flexDirection: 'row'
-	},
-	// wrapper is concerned with which side the avatar is on relative to the bubble
-	wrapper: {
-		flex: 1
-	},
-	name: {
-		marginLeft: 5
-	}
-})
-
-const meStyles = StyleSheet.create({
-	container: {
-		justifyContent: 'flex-end'
-	},
-	wrapper: {
-		flexDirection: 'row-reverse'
-	}
-})
-
-const otherStyles = StyleSheet.create({
-	container: {
-		justifyContent: 'flex-end'
-	},
-	wrapper: {
-		flexDirection: 'row'
-	}
-})

package/src/components/Chat-Old/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-Old/Swiper/index.tsx

@@ -1,30 +0,0 @@
-import React, { useCallback } from 'react'
-import Swipeable from 'react-native-gesture-handler/Swipeable'
-import { SwipeableProps, SwipeActionProps } from '../types'
-import Action from './Action'
-
-export default (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>
-}

package/src/components/Chat-Old/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
-	}
-})