toki/mattermost-mobile
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

MM-26699 Track open modals (#4539)

Browse source
This commit is contained in:
Elias Nahum 2020-07-08 13:43:20 -04:00 committed by GitHub
parent c2b9ff3c7c
commit 8816953e43
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 87 additions and 48 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
app/actions/navigation/index.js
View file

@ -252,6 +252,7 @@ export function showModal(name, title, passProps = {}, options = {}) {
},
};
EphemeralStore.addNavigationModal(name);
Navigation.showModal({
stack: {
children: [{
@ -324,10 +325,15 @@ export function showSearchModal(initialValue = '') {
}
export async function dismissModal(options = {}) {
if (!EphemeralStore.hasModalsOpened()) {
return;
}
const componentId = EphemeralStore.getNavigationTopComponentId();
try {
await Navigation.dismissModal(componentId, options);
EphemeralStore.removeNavigationModal(componentId);
} catch (error) {
// RNN returns a promise rejection if there is no modal to
// dismiss. We'll do nothing in this case.
@ -335,8 +341,13 @@ export async function dismissModal(options = {}) {
}
export async function dismissAllModals(options = {}) {
if (!EphemeralStore.hasModalsOpened()) {
return;
}
try {
await Navigation.dismissAllModals(options);
EphemeralStore.clearNavigationModals();
} catch (error) {
// RNN returns a promise rejection if there are no modals to
// dismiss. We'll do nothing in this case.

2
app/actions/navigation/index.test.js
View file

@ -17,6 +17,8 @@ jest.unmock('@actions/navigation');
jest.mock('@store/ephemeral_store', () => ({
getNavigationTopComponentId: jest.fn(),
clearNavigationComponents: jest.fn(),
addNavigationModal: jest.fn(),
hasModalsOpened: jest.fn().mockReturnValue(true),
}));
const mockStore = configureMockStore([thunk]);

102
app/screens/search/search.js
View file

@ -9,6 +9,7 @@ import {intlShape} from 'react-intl';
import {
Keyboard,
Platform,
SafeAreaView,
SectionList,
Text,
View,
@ -734,61 +735,66 @@ export default class Search extends PureComponent {
}
return (
<KeyboardLayout>
<StatusBar/>
<View style={[style.header, paddingRes]}>
<SearchBar
ref={this.setSearchBarRef}
placeholder={intl.formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
cancelTitle={intl.formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
backgroundColor='transparent'
inputHeight={Platform.OS === 'ios' ? 33 : 46}
inputStyle={searchBarInput}
placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
selectionColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorDelete={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
titleCancelColor={theme.sidebarHeaderTextColor}
onChangeText={this.handleTextChanged}
onSearchButtonPress={this.handleSearchButtonPress}
onCancelButtonPress={this.cancelSearch}
onSelectionChange={this.handleSelectionChange}
autoCapitalize='none'
showArrow={true}
value={value}
containerStyle={style.searchBarContainer}
backArrowSize={28}
keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
containerHeight={33}
<SafeAreaView style={style.flex}>
<KeyboardLayout>
<StatusBar/>
<View style={[style.header, paddingRes]}>
<SearchBar
ref={this.setSearchBarRef}
placeholder={intl.formatMessage({id: 'search_bar.search', defaultMessage: 'Search'})}
cancelTitle={intl.formatMessage({id: 'mobile.post.cancel', defaultMessage: 'Cancel'})}
backgroundColor='transparent'
inputHeight={Platform.OS === 'ios' ? 33 : 46}
inputStyle={searchBarInput}
placeholderTextColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
selectionColor={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorSearch={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
tintColorDelete={changeOpacity(theme.sidebarHeaderTextColor, 0.5)}
titleCancelColor={theme.sidebarHeaderTextColor}
onChangeText={this.handleTextChanged}
onSearchButtonPress={this.handleSearchButtonPress}
onCancelButtonPress={this.cancelSearch}
onSelectionChange={this.handleSelectionChange}
autoCapitalize='none'
showArrow={true}
value={value}
containerStyle={style.searchBarContainer}
backArrowSize={28}
keyboardAppearance={getKeyboardAppearanceFromTheme(theme)}
containerHeight={33}
/>
</View>
<SectionList
ref={this.setListRef}
style={style.sectionList}
renderSectionHeader={this.renderSectionHeader}
sections={sections}
keyboardShouldPersistTaps='always'
keyboardDismissMode='interactive'
stickySectionHeadersEnabled={Platform.OS === 'ios'}
onLayout={this.handleLayout}
onScroll={this.handleScroll}
scrollEventThrottle={60}
ListFooterComponent={this.renderFooter}
/>
</View>
<SectionList
ref={this.setListRef}
style={style.sectionList}
renderSectionHeader={this.renderSectionHeader}
sections={sections}
keyboardShouldPersistTaps='always'
keyboardDismissMode='interactive'
stickySectionHeadersEnabled={Platform.OS === 'ios'}
onLayout={this.handleLayout}
onScroll={this.handleScroll}
scrollEventThrottle={60}
ListFooterComponent={this.renderFooter}
/>
<Autocomplete
cursorPosition={cursorPosition}
onChangeText={this.handleTextChanged}
isSearch={true}
value={value}
enableDateSuggestion={this.props.enableDateSuggestion}
/>
</KeyboardLayout>
<Autocomplete
cursorPosition={cursorPosition}
onChangeText={this.handleTextChanged}
isSearch={true}
value={value}
enableDateSuggestion={this.props.enableDateSuggestion}
/>
</KeyboardLayout>
</SafeAreaView>
);
}
}
const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
return {
flex: {
flex: 1,
},
header: {
backgroundColor: theme.sidebarHeaderBg,
width: '100%',

20
app/store/ephemeral_store.js
View file

@ -11,6 +11,7 @@ class EphemeralStore {
this.deviceToken = null;
this.currentServerUrl = null;
this.navigationComponentIdStack = [];
this.navigationModalStack = [];
this.safeAreaInsets = {
[ViewTypes.PORTRAIT]: null,
[ViewTypes.LANDSCAPE]: null,
@ -21,14 +22,23 @@ class EphemeralStore {
clearNavigationComponents = () => {
this.navigationComponentIdStack = [];
this.navigationModalStack = [];
this.allNavigationComponentIds = [];
};
clearNavigationModals = () => {
this.navigationModalStack = [];
}
addNavigationComponentId = (componentId) => {
this.addToNavigationComponentIdStack(componentId);
this.addToAllNavigationComponentIds(componentId);
};
addNavigationModal = (componentId) => {
this.navigationModalStack.unshift(componentId);
}
addToNavigationComponentIdStack = (componentId) => {
const index = this.navigationComponentIdStack.indexOf(componentId);
if (index > 0) {
@ -44,6 +54,8 @@ class EphemeralStore {
}
}
hasModalsOpened = () => this.navigationModalStack.length > 0;
removeNavigationComponentId = (componentId) => {
const index = this.navigationComponentIdStack.indexOf(componentId);
if (index >= 0) {
@ -51,6 +63,14 @@ class EphemeralStore {
}
}
removeNavigationModal = (componentId) => {
const index = this.navigationModalStack.indexOf(componentId);
if (index >= 0) {
this.navigationModalStack.splice(index, 1);
}
}
getStartFromNotification = () => {
return this.appStartedFromPushNotification;
};