From 2d83d11558fd19c18fba4042c94657c3ef9f0bb5 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 12 Apr 2021 17:28:38 -0400 Subject: added icons, fixed picker almost --- src/components/messages/ChatInput.tsx | 81 ++++++++++++++++++++++++++++------- 1 file changed, 66 insertions(+), 15 deletions(-) (limited to 'src/components/messages/ChatInput.tsx') diff --git a/src/components/messages/ChatInput.tsx b/src/components/messages/ChatInput.tsx index a73d4869..2b49295b 100644 --- a/src/components/messages/ChatInput.tsx +++ b/src/components/messages/ChatInput.tsx @@ -1,11 +1,14 @@ import React from 'react'; -import {Image, StyleSheet, TextInput, View} from 'react-native'; +import {Image, StyleSheet, View} from 'react-native'; +import {TouchableOpacity} from 'react-native-gesture-handler'; +import ImagePicker from 'react-native-image-crop-picker'; import {useStore} from 'react-redux'; import { + AutoCompleteInput, MessageInputProps, + useAttachmentPickerContext, useMessageInputContext, } from 'stream-chat-react-native'; -import {ChatInputSubmit} from '../messages'; import {RootState} from '../../store/rootReducer'; import { LocalAttachmentType, @@ -16,6 +19,8 @@ import { LocalReactionType, LocalUserType, } from '../../types'; +import {normalize} from '../../utils'; +import {ChatInputSubmit} from '../messages'; const ChatInput: React.FC< MessageInputProps< @@ -30,7 +35,35 @@ const ChatInput: React.FC< > = () => { const state: RootState = useStore().getState(); const avatar = state.user.avatar; - const {sendMessage, setText, text} = useMessageInputContext(); + const {sendMessage, text, setText, uploadNewImage} = useMessageInputContext(); + const { + setSelectedImages, + selectedImages, + openPicker, + } = useAttachmentPickerContext(); + + const selectImage = () => { + ImagePicker.openPicker({ + cropping: true, + freeStyleCropEnabled: true, + mediaType: 'photo', + multiple: true, + // includeBase64: true, + }) + .then((pictures) => { + pictures.map((pic) => + uploadNewImage({ + width: pic.width, + height: pic.height, + source: 'picker', + uri: 'ph://' + pic.localIdentifier, + }), + ); + }) + .catch((error) => { + console.log(error); + }); + }; return ( @@ -43,15 +76,23 @@ const ChatInput: React.FC< : require('../../assets/images/avatar-placeholder.png') } /> - - + + + {/* */} + + + + setText('/')}> + + + + ); @@ -77,17 +118,27 @@ const styles = StyleSheet.create({ marginHorizontal: '1%', }, avatar: { - height: 35, - width: 35, + height: normalize(30), + width: normalize(30), borderRadius: 30, marginRight: 10, marginLeft: '3%', - marginVertical: '2%', + marginVertical: 5, alignSelf: 'flex-end', }, whiteBackround: { backgroundColor: '#fff', }, + actionButtons: { + height: normalize(30) + 10, + flexDirection: 'row', + justifyContent: 'space-evenly', + alignItems: 'center', + marginRight: 10, + width: 100, + alignSelf: 'flex-end', + // borderWidth: 1, + }, }); export default ChatInput; -- cgit v1.2.3-70-g09d2