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

RN-167 custom list to show loading indicator only on search (#598)

Browse source
This commit is contained in:
enahum 2017-06-05 16:18:15 -04:00 committed by GitHub
parent c285a6f553
commit a836b7ad04
1 changed files with 33 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

49
app/components/custom_list/index.js
View file

@ -165,6 +165,7 @@ export default class CustomList extends PureComponent {
loading,
onListEndReached,
onListEndReachedThreshold,
searching,
showNoResults,
showSections,
theme
@ -179,8 +180,15 @@ export default class CustomList extends PureComponent {
noResults = data.length === 0;
}
if (loading) {
return <Loading/>;
let loadingComponent;
if (loading && searching) {
loadingComponent = (
<View
style={style.searching}
>
<Loading/>
</View>
);
}
if (showNoResults && noResults) {
@ -196,20 +204,23 @@ export default class CustomList extends PureComponent {
}
return (
<ListView
style={style.listView}
dataSource={dataSource}
renderRow={this.renderRow}
renderSectionHeader={showSections ? this.renderSectionHeader : null}
renderSeparator={this.renderSeparator}
renderFooter={this.renderFooter}
enableEmptySections={true}
onEndReached={onListEndReached}
onEndReachedThreshold={onListEndReachedThreshold}
pageSize={listPageSize}
initialListSize={listInitialSize}
scrollRenderAheadDistance={listScrollRenderAheadDistance}
/>
<View style={{flex: 1}}>
<ListView
style={style.listView}
dataSource={dataSource}
renderRow={this.renderRow}
renderSectionHeader={showSections ? this.renderSectionHeader : null}
renderSeparator={this.renderSeparator}
renderFooter={this.renderFooter}
enableEmptySections={true}
onEndReached={onListEndReached}
onEndReachedThreshold={onListEndReachedThreshold}
pageSize={listPageSize}
initialListSize={listInitialSize}
scrollRenderAheadDistance={listScrollRenderAheadDistance}
/>
{loadingComponent}
</View>
);
}
}
@ -228,6 +239,12 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
loadingText: {
color: changeOpacity(theme.centerChannelColor, 0.6)
},
searching: {
backgroundColor: theme.centerChannelBg,
height: '100%',
position: 'absolute',
width: '100%'
},
sectionContainer: {
backgroundColor: changeOpacity(theme.centerChannelColor, 0.07),
paddingLeft: 10,