From 604dc249185b40ab60c8c44a83e97e30194f9087 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 26 Apr 2021 17:45:20 -0400 Subject: added cancel button --- src/screens/chat/ChatSearchBar.tsx | 25 ++++--------------------- src/screens/chat/NewChatModal.tsx | 10 ++-------- 2 files changed, 6 insertions(+), 29 deletions(-) (limited to 'src') diff --git a/src/screens/chat/ChatSearchBar.tsx b/src/screens/chat/ChatSearchBar.tsx index d8aff567..1faf6dc0 100644 --- a/src/screens/chat/ChatSearchBar.tsx +++ b/src/screens/chat/ChatSearchBar.tsx @@ -16,7 +16,6 @@ import Animated, {useAnimatedStyle} from 'react-native-reanimated'; interface SearchBarProps extends TextInputProps { onCancel: () => void; - animationProgress: Animated.SharedValue; searching: boolean; placeholder: string; } @@ -26,7 +25,6 @@ const ChatSearchBar: React.FC = ({ onChangeText, value, onCancel, - animationProgress, onLayout, placeholder, }) => { @@ -37,14 +35,6 @@ const ChatSearchBar: React.FC = ({ Keyboard.dismiss(); }; - /* - * On-search marginRight style ("cancel" button slides and fades in). - */ - const animatedStyles = useAnimatedStyle(() => ({ - marginRight: animationProgress.value * 58, - opacity: animationProgress.value, - })); - return ( @@ -61,11 +51,9 @@ const ChatSearchBar: React.FC = ({ {...{placeholder, value, onChangeText, onFocus, onBlur}} /> - - - Cancel - - + + Cancel + ); }; @@ -87,9 +75,6 @@ const styles = StyleSheet.create({ borderRadius: 20, backgroundColor: '#F0F0F0', }, - searchIcon: { - marginRight: 8, - }, input: { flex: 1, fontSize: 16, @@ -97,10 +82,8 @@ const styles = StyleSheet.create({ letterSpacing: normalize(0.5), }, cancelButton: { - height: '100%', - position: 'absolute', justifyContent: 'center', - paddingHorizontal: 8, + paddingLeft: 10, }, cancelText: { color: '#818181', diff --git a/src/screens/chat/NewChatModal.tsx b/src/screens/chat/NewChatModal.tsx index 95e46ecd..3d9a1d70 100644 --- a/src/screens/chat/NewChatModal.tsx +++ b/src/screens/chat/NewChatModal.tsx @@ -27,10 +27,6 @@ const NewChatModal: React.FC = ({ setChatModalVisible, }) => { const [searching, setSearching] = useState(false); - /* - * Animated value - */ - const animationProgress = useSharedValue(0); const [results, setResults] = useState[]>([]); const [query, setQuery] = useState(''); const handleFocus = () => { @@ -40,21 +36,19 @@ const NewChatModal: React.FC = ({ Keyboard.dismiss(); }; const handleCancel = () => { - setSearching(false); + setChatModalVisible(false); }; const getDefaultSuggested = async () => { const searchResults = await loadSearchResults( `${SEARCH_ENDPOINT_SUGGESTED}`, ); - console.log(searchResults); const sanitizedResult = [ { title: 'users', data: searchResults?.users, }, ]; - console.log(searchResults, sanitizedResult); setResults(sanitizedResult); }; @@ -102,7 +96,7 @@ const NewChatModal: React.FC = ({ onBlur={handleBlur} onFocus={handleFocus} value={query} - {...{animationProgress, searching}} + searching={searching} placeholder={''} /> {results.length > 0 && ( -- cgit v1.2.3-70-g09d2 From b6134c042658994421163ceda21731505098e2ac Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 26 Apr 2021 17:46:06 -0400 Subject: linted --- src/components/search/SearchBar.tsx | 2 +- src/screens/chat/ChatSearchBar.tsx | 3 +-- src/screens/chat/NewChatModal.tsx | 1 - 3 files changed, 2 insertions(+), 4 deletions(-) (limited to 'src') diff --git a/src/components/search/SearchBar.tsx b/src/components/search/SearchBar.tsx index d441b07b..ea36d58b 100644 --- a/src/components/search/SearchBar.tsx +++ b/src/components/search/SearchBar.tsx @@ -128,7 +128,7 @@ const SearchBar: React.FC = ({ style={styles.searchIcon} /> void; diff --git a/src/screens/chat/NewChatModal.tsx b/src/screens/chat/NewChatModal.tsx index 3d9a1d70..0b0661f9 100644 --- a/src/screens/chat/NewChatModal.tsx +++ b/src/screens/chat/NewChatModal.tsx @@ -7,7 +7,6 @@ import { Text, View, } from 'react-native'; -import {useSharedValue} from 'react-native-reanimated'; import {BottomDrawer} from '../../components'; import { SEARCH_ENDPOINT_MESSAGES, -- cgit v1.2.3-70-g09d2 From ab6e44b9f31b06fbf67511b54eb9752913d47831 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 26 Apr 2021 18:03:22 -0400 Subject: fixed background shadow issue --- src/components/common/BottomDrawer.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/components/common/BottomDrawer.tsx b/src/components/common/BottomDrawer.tsx index 988c1e79..3d9c0471 100644 --- a/src/components/common/BottomDrawer.tsx +++ b/src/components/common/BottomDrawer.tsx @@ -6,7 +6,7 @@ import { View, ViewProps, } from 'react-native'; -import Animated, {interpolateColors} from 'react-native-reanimated'; +import Animated, {interpolateColors, useValue} from 'react-native-reanimated'; import BottomSheet from 'reanimated-bottom-sheet'; import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; @@ -23,7 +23,7 @@ const BottomDrawer: React.FC = (props) => { const {isOpen, setIsOpen, showHeader, initialSnapPosition} = props; const drawerRef = useRef(null); const [modalVisible, setModalVisible] = useState(isOpen); - const bgAlpha = new Animated.Value(isOpen ? 1 : 0); + const bgAlpha = useValue(isOpen ? 1 : 0); useEffect(() => { if (isOpen) { @@ -54,6 +54,7 @@ const BottomDrawer: React.FC = (props) => { inputRange: [0, 1], outputColorRange: ['rgba(0,0,0,0.3)', 'rgba(0,0,0,0)'], }); + return ( Date: Mon, 26 Apr 2021 18:17:05 -0400 Subject: clear text --- src/screens/chat/NewChatModal.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) (limited to 'src') diff --git a/src/screens/chat/NewChatModal.tsx b/src/screens/chat/NewChatModal.tsx index 0b0661f9..9872dd6f 100644 --- a/src/screens/chat/NewChatModal.tsx +++ b/src/screens/chat/NewChatModal.tsx @@ -35,6 +35,7 @@ const NewChatModal: React.FC = ({ Keyboard.dismiss(); }; const handleCancel = () => { + setQuery(''); setChatModalVisible(false); }; @@ -118,7 +119,12 @@ const NewChatModal: React.FC = ({ { + if (!open) { + setQuery(''); + } + setChatModalVisible(open); + }} showHeader={false}> {_modalContent()} -- cgit v1.2.3-70-g09d2 From 8253184aef6051f053cc40e95e9c3433fae591ed Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Mon, 26 Apr 2021 18:27:49 -0400 Subject: fixed bug by updating timing --- src/screens/chat/ChatResultsCell.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src') diff --git a/src/screens/chat/ChatResultsCell.tsx b/src/screens/chat/ChatResultsCell.tsx index d947c122..e1eb97dd 100644 --- a/src/screens/chat/ChatResultsCell.tsx +++ b/src/screens/chat/ChatResultsCell.tsx @@ -12,7 +12,7 @@ import {defaultUserProfile} from '../../utils/users'; interface ChatResults { profileData: ProfilePreviewType; loggedInUser: UserType; - setChatModalVisible: Function; + setChatModalVisible: (open: boolean) => void; } const ChatResultsCell: React.FC = ({ @@ -47,7 +47,7 @@ const ChatResultsCell: React.FC = ({ setChannel(channel); setTimeout(() => { navigation.navigate('Chat'); - }, 100); + }, 250); } catch (error) { Alert.alert(ERROR_FAILED_TO_CREATE_CHANNEL); } -- cgit v1.2.3-70-g09d2