verdnatura-mirror/Rocket.Chat.ReactNative
verdnatura-mirror
/
Rocket.Chat.ReactNative
mirror of https://github.com/RocketChat/Rocket.Chat.ReactNative
2
0
Fork 1
Code Issues Packages Projects Releases Wiki Activity

fix: scroll the pages New Message, Search for Rooms, Messages and Threads (#4952) 

* [FIX] Scroll the pages Directory, New Message, Search for Rooms, Messages and Threads

* flex for the flatlist

* minor tweak at roomslistview and remove the keyboard from directoryview

---------

Co-authored-by: Gleidson Daniel Silva <gleidson10daniel@hotmail.com>
This commit is contained in:
Reinaldo Neto 2023-04-10 16:41:49 -03:00 committed by GitHub
parent 4b13045d1c
commit cf14ebea78
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 67 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/containers/KeyboardView.tsx
View File

@ -6,7 +6,7 @@ import scrollPersistTaps from '../lib/methods/helpers/scrollPersistTaps';
interface IKeyboardViewProps extends KeyboardAwareScrollViewProps { interface IKeyboardViewProps extends KeyboardAwareScrollViewProps {
keyboardVerticalOffset?: number; keyboardVerticalOffset?: number;
scrollEnabled?: boolean; scrollEnabled?: boolean;
children: React.ReactElement[] | React.ReactElement; children: React.ReactElement[] | React.ReactElement | null | (React.ReactElement | null)[];
} }
const KeyboardView = ({ style, contentContainerStyle, scrollEnabled, keyboardVerticalOffset, children }: IKeyboardViewProps) => ( const KeyboardView = ({ style, contentContainerStyle, scrollEnabled, keyboardVerticalOffset, children }: IKeyboardViewProps) => (

47
app/views/NewMessageView/index.tsx
View File

@ -5,6 +5,7 @@ import { FlatList } from 'react-native';
import { shallowEqual } from 'react-redux'; import { shallowEqual } from 'react-redux';
import { useNavigation } from '@react-navigation/native'; import { useNavigation } from '@react-navigation/native';
import KeyboardView from '../../containers/KeyboardView';
import * as HeaderButton from '../../containers/HeaderButton'; import * as HeaderButton from '../../containers/HeaderButton';
import * as List from '../../containers/List'; import * as List from '../../containers/List';
import SafeAreaView from '../../containers/SafeAreaView'; import SafeAreaView from '../../containers/SafeAreaView';
@ -82,29 +83,31 @@ const NewMessageView = () => {
return ( return (
<SafeAreaView testID='new-message-view'> <SafeAreaView testID='new-message-view'>
<StatusBar /> <KeyboardView>
<FlatList <StatusBar />
data={search.length > 0 ? search : chats} <FlatList
keyExtractor={item => item._id || item.rid} data={search.length > 0 ? search : chats}
ListHeaderComponent={<HeaderNewMessage maxUsers={maxUsers} onChangeText={handleSearch} />} keyExtractor={item => item._id || item.rid}
renderItem={({ item }) => { ListHeaderComponent={<HeaderNewMessage maxUsers={maxUsers} onChangeText={handleSearch} />}
const itemSearch = item as ISearch; renderItem={({ item }) => {
const itemModel = item as TSubscriptionModel; const itemSearch = item as ISearch;
const itemModel = item as TSubscriptionModel;
return ( return (
<UserItem <UserItem
name={useRealName && itemSearch.fname ? itemSearch.fname : itemModel.name} name={useRealName && itemSearch.fname ? itemSearch.fname : itemModel.name}
username={itemSearch.search ? itemSearch.username : itemModel.name} username={itemSearch.search ? itemSearch.username : itemModel.name}
onPress={() => goRoom(itemModel)} onPress={() => goRoom(itemModel)}
testID={`new-message-view-item-${item.name}`} testID={`new-message-view-item-${item.name}`}
/> />
); );
}} }}
ItemSeparatorComponent={List.Separator} ItemSeparatorComponent={List.Separator}
ListFooterComponent={List.Separator} ListFooterComponent={List.Separator}
contentContainerStyle={{ backgroundColor: colors.backgroundColor }} contentContainerStyle={{ backgroundColor: colors.backgroundColor }}
keyboardShouldPersistTaps='always' keyboardShouldPersistTaps='always'
/> />
</KeyboardView>
</SafeAreaView> </SafeAreaView>
); );
}; };

23
app/views/RoomsListView/index.tsx
View File

@ -11,6 +11,7 @@ import { Header } from '@react-navigation/elements';
import { CompositeNavigationProp, RouteProp } from '@react-navigation/native'; import { CompositeNavigationProp, RouteProp } from '@react-navigation/native';
import { Dispatch } from 'redux'; import { Dispatch } from 'redux';
import KeyboardView from '../../containers/KeyboardView';
import database from '../../lib/database'; import database from '../../lib/database';
import RoomItem, { ROW_HEIGHT, ROW_HEIGHT_CONDENSED } from '../../containers/RoomItem'; import RoomItem, { ROW_HEIGHT, ROW_HEIGHT_CONDENSED } from '../../containers/RoomItem';
import log, { logEvent, events } from '../../lib/methods/helpers/log'; import log, { logEvent, events } from '../../lib/methods/helpers/log';
@ -62,8 +63,8 @@ import { E2E_BANNER_TYPE, DisplayMode, SortBy, MAX_SIDEBAR_WIDTH, themes } from
import { Services } from '../../lib/services'; import { Services } from '../../lib/services';
type TNavigation = CompositeNavigationProp< type TNavigation = CompositeNavigationProp<
StackNavigationProp<ChatsStackParamList, 'RoomsListView'>, StackNavigationProp<ChatsStackParamList, 'RoomsListView'>,
CompositeNavigationProp<StackNavigationProp<ChatsStackParamList>, StackNavigationProp<DrawerParamList>> CompositeNavigationProp<StackNavigationProp<ChatsStackParamList>, StackNavigationProp<DrawerParamList>>
>; >;
interface IRoomsListViewProps { interface IRoomsListViewProps {
@ -479,11 +480,11 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
internalSetState = ( internalSetState = (
state: state:
| (( | ((
prevState: Readonly<IRoomsListViewState>, prevState: Readonly<IRoomsListViewState>,
props: Readonly<IRoomsListViewProps> props: Readonly<IRoomsListViewProps>
) => Pick<IRoomsListViewState, keyof IRoomsListViewState> | IRoomsListViewState | null) ) => Pick<IRoomsListViewState, keyof IRoomsListViewState> | IRoomsListViewState | null)
| (Pick<IRoomsListViewState, keyof IRoomsListViewState> | IRoomsListViewState | null), | (Pick<IRoomsListViewState, keyof IRoomsListViewState> | IRoomsListViewState | null),
callback?: () => void callback?: () => void
) => { ) => {
if (this.animated) { if (this.animated) {
@ -907,7 +908,7 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
} }
}; };
getScrollRef = (ref: FlatList) => (this.scroll = ref); getScrollRef = (ref: FlatList) => this.scroll = ref;
renderListHeader = () => { renderListHeader = () => {
const { searching } = this.state; const { searching } = this.state;
@ -1025,9 +1026,11 @@ class RoomsListView extends React.Component<IRoomsListViewProps, IRoomsListViewS
return ( return (
<SafeAreaView testID='rooms-list-view' style={{ backgroundColor: themes[theme].backgroundColor }}> <SafeAreaView testID='rooms-list-view' style={{ backgroundColor: themes[theme].backgroundColor }}>
<StatusBar /> <KeyboardView>
{this.renderHeader()} <StatusBar />
{this.renderScroll()} {this.renderHeader()}
{this.renderScroll()}
</KeyboardView>
{/* TODO - this ts-ignore is here because the route props, on IBaseScreen*/} {/* TODO - this ts-ignore is here because the route props, on IBaseScreen*/}
{/* @ts-ignore*/} {/* @ts-ignore*/}
{showServerDropdown ? <ServerDropdown navigation={navigation} theme={theme} /> : null} {showServerDropdown ? <ServerDropdown navigation={navigation} theme={theme} /> : null}

27
app/views/SearchMessagesView/index.tsx
View File

@ -39,6 +39,7 @@ import {
ICustomEmoji ICustomEmoji
} from '../../definitions'; } from '../../definitions';
import { Services } from '../../lib/services'; import { Services } from '../../lib/services';
import KeyboardView from '../../containers/KeyboardView';
const QUERY_SIZE = 50; const QUERY_SIZE = 50;
@ -327,18 +328,20 @@ class SearchMessagesView extends React.Component<ISearchMessagesViewProps, ISear
return ( return (
<SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='search-messages-view'> <SafeAreaView style={{ backgroundColor: themes[theme].backgroundColor }} testID='search-messages-view'>
<StatusBar /> <StatusBar />
<View style={styles.searchContainer}> <KeyboardView>
<FormTextInput <View style={styles.searchContainer}>
autoFocus <FormTextInput
label={I18n.t('Search')} autoFocus
onChangeText={this.search} label={I18n.t('Search')}
placeholder={I18n.t('Search_Messages')} onChangeText={this.search}
testID='search-message-view-input' placeholder={I18n.t('Search_Messages')}
/> testID='search-message-view-input'
<Markdown msg={I18n.t('You_can_search_using_RegExp_eg')} theme={theme} /> />
<View style={[styles.divider, { backgroundColor: themes[theme].separatorColor }]} /> <Markdown msg={I18n.t('You_can_search_using_RegExp_eg')} theme={theme} />
</View> <View style={[styles.divider, { backgroundColor: themes[theme].separatorColor }]} />
{this.renderList()} </View>
{this.renderList()}
</KeyboardView>
</SafeAreaView> </SafeAreaView>
); );
} }

23
app/views/ThreadMessagesView/index.tsx
View File

@ -35,6 +35,7 @@ import styles from './styles';
import { IApplicationState, IBaseScreen, IMessage, SubscriptionType, TSubscriptionModel, TThreadModel } from '../../definitions'; import { IApplicationState, IBaseScreen, IMessage, SubscriptionType, TSubscriptionModel, TThreadModel } from '../../definitions';
import { getUidDirectMessage, debounce, isIOS } from '../../lib/methods/helpers'; import { getUidDirectMessage, debounce, isIOS } from '../../lib/methods/helpers';
import { Services } from '../../lib/services'; import { Services } from '../../lib/services';
import KeyboardView from '../../containers/KeyboardView';
const API_FETCH_COUNT = 50; const API_FETCH_COUNT = 50;
@ -516,16 +517,18 @@ class ThreadMessagesView extends React.Component<IThreadMessagesViewProps, IThre
return ( return (
<SafeAreaView testID='thread-messages-view'> <SafeAreaView testID='thread-messages-view'>
<StatusBar /> <KeyboardView>
{this.renderContent()} <StatusBar />
{showFilterDropdown ? ( {this.renderContent()}
<Dropdown {showFilterDropdown ? (
currentFilter={currentFilter} <Dropdown
onFilterSelected={this.onFilterSelected} currentFilter={currentFilter}
onClose={this.closeFilterDropdown} onFilterSelected={this.onFilterSelected}
theme={theme} onClose={this.closeFilterDropdown}
/> theme={theme}
) : null} />
) : null}
</KeyboardView>
</SafeAreaView> </SafeAreaView>
); );
} }