vergnet/application-amicale
5
5
Fork 5
Code Issues Pull requests Releases Wiki Activity

Added spinner on first load

Browse source
This commit is contained in:
keplyx 2019-08-06 14:06:05 +02:00
parent 405f1769d3
commit c60fb5291c
3 changed files with 294 additions and 289 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
components/FetchedDataSectionList.js
View file

@ -2,7 +2,7 @@
import * as React from 'react'; import * as React from 'react';
import WebDataManager from "../utils/WebDataManager"; import WebDataManager from "../utils/WebDataManager";
import {Container, H3, Tab, TabHeading, Tabs, Text} from "native-base"; import {Container, H3, Spinner, Tab, TabHeading, Tabs, Text} from "native-base";
import CustomHeader from "./CustomHeader"; import CustomHeader from "./CustomHeader";
import {RefreshControl, SectionList, View} from "react-native"; import {RefreshControl, SectionList, View} from "react-native";
import CustomMaterialIcon from "./CustomMaterialIcon"; import CustomMaterialIcon from "./CustomMaterialIcon";
@ -50,7 +50,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
* Get the translation for the header in the current language * Get the translation for the header in the current language
* @return {string} * @return {string}
*/ */
getHeaderTranslation() : string { getHeaderTranslation(): string {
return "Header"; return "Header";
} }
@ -152,10 +152,11 @@ export default class FetchedDataSectionList extends React.Component<Props, State
* No need to be overridden, has good defaults. * No need to be overridden, has good defaults.
* *
* @param text * @param text
* @param isSpinner
* @param icon * @param icon
* @return {*} * @return {*}
*/ */
getEmptyRenderItem(text: string, icon: string) { getEmptyRenderItem(text: string, isSpinner: boolean, icon: string) {
return ( return (
<View> <View>
<View style={{ <View style={{
@ -165,11 +166,14 @@ export default class FetchedDataSectionList extends React.Component<Props, State
height: 100, height: 100,
marginBottom: 20 marginBottom: 20
}}> }}>
{isSpinner ?
<Spinner/>
:
<CustomMaterialIcon <CustomMaterialIcon
icon={icon} icon={icon}
fontSize={100} fontSize={100}
width={100} width={100}
color={ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText}/> color={ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText}/>}
</View> </View>
<H3 style={{ <H3 style={{
@ -209,6 +213,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
text: this.state.refreshing ? text: this.state.refreshing ?
i18n.t('general.loading') : i18n.t('general.loading') :
i18n.t('general.networkError'), i18n.t('general.networkError'),
isSpinner: this.state.refreshing,
icon: this.state.refreshing ? icon: this.state.refreshing ?
'refresh' : 'refresh' :
'access-point-network-off' 'access-point-network-off'
@ -256,7 +261,7 @@ export default class FetchedDataSectionList extends React.Component<Props, State
} }
renderItem={({item, section}) => renderItem={({item, section}) =>
isEmpty ? isEmpty ?
this.getEmptyRenderItem(item.text, item.icon) : this.getEmptyRenderItem(item.text, item.isSpinner, item.icon) :
this.getRenderItem(item, section, dataset) this.getRenderItem(item, section, dataset)
} }
style={{minHeight: 300, width: '100%'}} style={{minHeight: 300, width: '100%'}}

8
native-base-theme/variables/platform.js
View file

@ -2,14 +2,14 @@
import color from "color"; import color from "color";
import { Platform, Dimensions, PixelRatio } from "react-native"; import {Dimensions, PixelRatio, Platform} from "react-native";
const deviceHeight = Dimensions.get("window").height; const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width; const deviceWidth = Dimensions.get("window").width;
const platform = Platform.OS; const platform = Platform.OS;
const platformStyle = undefined; const platformStyle = undefined;
const isIphoneX = const isIphoneX =
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896); platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
export default { export default {
platformStyle, platformStyle,
@ -226,7 +226,7 @@ export default {
segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5", segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
// Spinner // Spinner
defaultSpinnerColor: "#45D56E", defaultSpinnerColor: "#e42612",
inverseSpinnerColor: "#1A191B", inverseSpinnerColor: "#1A191B",
// Tab // Tab
@ -258,7 +258,7 @@ export default {
// CUSTOM // CUSTOM
customMaterialIconColor: "#5d5d5d", customMaterialIconColor: "#5d5d5d",
fetchedDataSectionListErrorText : "#898989", fetchedDataSectionListErrorText: "#898989",
// PROXIWASH // PROXIWASH
proxiwashFinishedColor: "rgba(54,165,22,0.31)", proxiwashFinishedColor: "rgba(54,165,22,0.31)",

6
native-base-theme/variables/platformDark.js
View file

@ -2,7 +2,7 @@
import color from "color"; import color from "color";
import { Platform, Dimensions, PixelRatio } from "react-native"; import {Dimensions, PixelRatio, Platform} from "react-native";
const deviceHeight = Dimensions.get("window").height; const deviceHeight = Dimensions.get("window").height;
const deviceWidth = Dimensions.get("window").width; const deviceWidth = Dimensions.get("window").width;
@ -226,7 +226,7 @@ export default {
segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5", segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
// Spinner // Spinner
defaultSpinnerColor: "#45D56E", defaultSpinnerColor: "#e42612",
inverseSpinnerColor: "#1A191B", inverseSpinnerColor: "#1A191B",
// Tab // Tab
@ -258,7 +258,7 @@ export default {
// CUSTOM // CUSTOM
customMaterialIconColor: "#b3b3b3", customMaterialIconColor: "#b3b3b3",
fetchedDataSectionListErrorText : "#acacac", fetchedDataSectionListErrorText: "#acacac",
// PROXIWASH // PROXIWASH
proxiwashFinishedColor: "rgba(17,149,32,0.53)", proxiwashFinishedColor: "rgba(17,149,32,0.53)",