From c60fb5291c91caa38a487290fa6021729e4279a4 Mon Sep 17 00:00:00 2001 From: keplyx Date: Tue, 6 Aug 2019 14:06:05 +0200 Subject: [PATCH] Added spinner on first load --- components/FetchedDataSectionList.js | 23 +- native-base-theme/variables/platform.js | 554 ++++++++++---------- native-base-theme/variables/platformDark.js | 6 +- 3 files changed, 294 insertions(+), 289 deletions(-) diff --git a/components/FetchedDataSectionList.js b/components/FetchedDataSectionList.js index 44e85b4..f200dd5 100644 --- a/components/FetchedDataSectionList.js +++ b/components/FetchedDataSectionList.js @@ -2,7 +2,7 @@ import * as React from 'react'; 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 {RefreshControl, SectionList, View} from "react-native"; import CustomMaterialIcon from "./CustomMaterialIcon"; @@ -50,7 +50,7 @@ export default class FetchedDataSectionList extends React.Component - + {isSpinner ? + + : + }

isEmpty ? - this.getEmptyRenderItem(item.text, item.icon) : + this.getEmptyRenderItem(item.text, item.isSpinner, item.icon) : this.getRenderItem(item, section, dataset) } style={{minHeight: 300, width: '100%'}} diff --git a/native-base-theme/variables/platform.js b/native-base-theme/variables/platform.js index c3f6abc..75913bf 100644 --- a/native-base-theme/variables/platform.js +++ b/native-base-theme/variables/platform.js @@ -2,295 +2,295 @@ 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 deviceWidth = Dimensions.get("window").width; const platform = Platform.OS; const platformStyle = undefined; const isIphoneX = -platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896); + platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896); export default { - platformStyle, - platform, + platformStyle, + platform, - //Accordion - headerStyle: "#edebed", - iconStyle: "#000", - contentStyle: "#f5f4f5", - expandedIconStyle: "#000", - accordionBorderColor: "#d3d3d3", + //Accordion + headerStyle: "#edebed", + iconStyle: "#000", + contentStyle: "#f5f4f5", + expandedIconStyle: "#000", + accordionBorderColor: "#d3d3d3", - // Android - androidRipple: true, - androidRippleColor: "rgba(256, 256, 256, 0.3)", - androidRippleColorDark: "rgba(0, 0, 0, 0.15)", - btnUppercaseAndroidText: true, + // Android + androidRipple: true, + androidRippleColor: "rgba(256, 256, 256, 0.3)", + androidRippleColorDark: "rgba(0, 0, 0, 0.15)", + btnUppercaseAndroidText: true, - // Badge - badgeBg: "#ED1727", - badgeColor: "#fff", - badgePadding: platform === "ios" ? 3 : 0, + // Badge + badgeBg: "#ED1727", + badgeColor: "#fff", + badgePadding: platform === "ios" ? 3 : 0, - // Button - btnFontFamily: platform === "ios" ? "System" : "Roboto_medium", - btnTextColor: '#fff', - btnDisabledBg: "#b5b5b5", - buttonPadding: 6, - get btnPrimaryBg() { - return this.brandPrimary; - }, - get btnPrimaryColor() { - return this.inverseTextColor; - }, - get btnInfoBg() { - return this.brandInfo; - }, - get btnInfoColor() { - return this.inverseTextColor; - }, - get btnSuccessBg() { - return this.brandSuccess; - }, - get btnSuccessColor() { - return this.inverseTextColor; - }, - get btnDangerBg() { - return this.brandDanger; - }, - get btnDangerColor() { - return this.inverseTextColor; - }, - get btnWarningBg() { - return this.brandWarning; - }, - get btnWarningColor() { - return this.inverseTextColor; - }, - get btnTextSize() { - return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1; - }, - get btnTextSizeLarge() { - return this.fontSizeBase * 1.5; - }, - get btnTextSizeSmall() { - return this.fontSizeBase * 0.8; - }, - get borderRadiusLarge() { - return this.fontSizeBase * 3.8; - }, - get iconSizeLarge() { - return this.iconFontSize * 1.5; - }, - get iconSizeSmall() { - return this.iconFontSize * 0.6; - }, - - // Card - cardDefaultBg: "#fff", - cardBorderColor: "#ccc", - cardBorderRadius: 2, - cardItemPadding: platform === "ios" ? 10 : 12, - - // CheckBox - CheckboxRadius: platform === "ios" ? 13 : 0, - CheckboxBorderWidth: platform === "ios" ? 1 : 2, - CheckboxPaddingLeft: platform === "ios" ? 4 : 2, - CheckboxPaddingBottom: platform === "ios" ? 0 : 5, - CheckboxIconSize: platform === "ios" ? 21 : 16, - CheckboxIconMarginTop: platform === "ios" ? undefined : 1, - CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17, - checkboxBgColor: "#E4202D", - checkboxSize: 20, - checkboxTickColor: "#fff", - - // Color - brandPrimary: platform === "ios" ? "#e42612" : "#e42612", - brandInfo: "#62B1F6", - brandSuccess: "#5cb85c", - brandDanger: "#d9534f", - brandWarning: "#f0ad4e", - brandDark: "#000", - brandLight: "#f4f4f4", - - //Container - containerBgColor: "#fff", - - //Date Picker - datePickerTextColor: "#000", - datePickerBg: "transparent", - - // Font - DefaultFontSize: 16, - fontFamily: platform === "ios" ? "System" : "Roboto", - fontSizeBase: 15, - get fontSizeH1() { - return this.fontSizeBase * 1.8; - }, - get fontSizeH2() { - return this.fontSizeBase * 1.6; - }, - get fontSizeH3() { - return this.fontSizeBase * 1.4; - }, - - // Footer - footerHeight: 55, - footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5", - footerPaddingBottom: 0, - - // FooterTab - tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9", - tabBarTextSize: platform === "ios" ? 14 : 11, - activeTab: platform === "ios" ? "#007aff" : "#fff", - sTabBarActiveTextColor: "#007aff", - tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff", - tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5", - - // Header - toolbarBtnColor: platform === "ios" ? "#e42612" : "#fff", - toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#e42612", - toolbarHeight: platform === "ios" ? 64 : 56, - toolbarSearchIconSize: platform === "ios" ? 20 : 23, - toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff", - searchBarHeight: platform === "ios" ? 30 : 40, - searchBarInputHeight: platform === "ios" ? 30 : 50, - toolbarBtnTextColor: platform === "ios" ? "#e42612" : "#fff", - toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#ba1f0f", - iosStatusbar: platform === "ios" ? "dark-content" : "light-content", - get statusBarColor() { - return color(this.toolbarDefaultBg) - .darken(0.2) - .hex(); - }, - get darkenHeader() { - return color(this.tabBgColor) - .darken(0.03) - .hex(); - }, - - // Icon - iconFamily: "Ionicons", - iconFontSize: platform === "ios" ? 30 : 28, - iconHeaderSize: platform === "ios" ? 33 : 24, - - // InputGroup - inputFontSize: 17, - inputBorderColor: "#D9D5DC", - inputSuccessBorderColor: "#2b8339", - inputErrorBorderColor: "#ed2f2f", - inputHeightBase: 50, - get inputColor() { - return this.textColor; - }, - get inputColorPlaceholder() { - return "#575757"; - }, - - // Line Height - btnLineHeight: 19, - lineHeightH1: 32, - lineHeightH2: 27, - lineHeightH3: 22, - lineHeight: platform === "ios" ? 20 : 24, - listItemSelected: platform === "ios" ? "#e42612" : "#e42612", - - // List - listBg: "transparent", - listBorderColor: "#c9c9c9", - listDividerBg: "#f4f4f4", - listBtnUnderlayColor: "#DDD", - listItemPadding: platform === "ios" ? 10 : 12, - listNoteColor: "#808080", - listNoteSize: 13, - - // Progress Bar - defaultProgressColor: "#E4202D", - inverseProgressColor: "#1A191B", - - // Radio Button - radioBtnSize: platform === "ios" ? 25 : 23, - radioSelectedColorAndroid: "#E4202D", - radioBtnLineHeight: platform === "ios" ? 29 : 24, - get radioColor() { - return this.brandPrimary; - }, - - // Segment - segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5", - segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff", - segmentTextColor: platform === "ios" ? "#007aff" : "#fff", - segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5", - segmentBorderColor: platform === "ios" ? "#007aff" : "#fff", - segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5", - - // Spinner - defaultSpinnerColor: "#45D56E", - inverseSpinnerColor: "#1A191B", - - // Tab - tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#e42612", - topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9", - topTabBarActiveTextColor: platform === "ios" ? "#e42612" : "#fff", - topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff", - topTabBarActiveBorderColor: platform === "ios" ? "#e42612" : "#fff", - - // Tabs - tabBgColor: "#F8F8F8", - tabFontSize: 15, - - // Text - textColor: "#000", - inverseTextColor: "#fff", - noteFontSize: 14, - get defaultTextColor() { - return this.textColor; - }, - - // Title - titleFontfamily: platform === "ios" ? "System" : "Roboto_medium", - titleFontSize: platform === "ios" ? 17 : 19, - subTitleFontSize: platform === "ios" ? 11 : 14, - subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF", - titleFontColor: platform === "ios" ? "#000" : "#FFF", - - - // CUSTOM - customMaterialIconColor: "#5d5d5d", - fetchedDataSectionListErrorText : "#898989", - - // PROXIWASH - proxiwashFinishedColor: "rgba(54,165,22,0.31)", - proxiwashReadyColor: "transparent", - proxiwashRunningColor: "rgba(94,104,241,0.3)", - proxiwashBrokenColor: "rgba(162,162,162,0.31)", - proxiwashErrorColor: "rgba(204,7,0,0.31)", - - // Other - borderRadiusBase: platform === "ios" ? 5 : 2, - borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), - contentPadding: 10, - dropdownLinkColor: "#414142", - inputLineHeight: 24, - deviceWidth, - deviceHeight, - isIphoneX, - inputGroupRoundedBorderRadius: 30, - - //iPhoneX SafeArea - Inset: { - portrait: { - topInset: 24, - leftInset: 0, - rightInset: 0, - bottomInset: 34 + // Button + btnFontFamily: platform === "ios" ? "System" : "Roboto_medium", + btnTextColor: '#fff', + btnDisabledBg: "#b5b5b5", + buttonPadding: 6, + get btnPrimaryBg() { + return this.brandPrimary; }, - landscape: { - topInset: 0, - leftInset: 44, - rightInset: 44, - bottomInset: 21 + get btnPrimaryColor() { + return this.inverseTextColor; + }, + get btnInfoBg() { + return this.brandInfo; + }, + get btnInfoColor() { + return this.inverseTextColor; + }, + get btnSuccessBg() { + return this.brandSuccess; + }, + get btnSuccessColor() { + return this.inverseTextColor; + }, + get btnDangerBg() { + return this.brandDanger; + }, + get btnDangerColor() { + return this.inverseTextColor; + }, + get btnWarningBg() { + return this.brandWarning; + }, + get btnWarningColor() { + return this.inverseTextColor; + }, + get btnTextSize() { + return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1; + }, + get btnTextSizeLarge() { + return this.fontSizeBase * 1.5; + }, + get btnTextSizeSmall() { + return this.fontSizeBase * 0.8; + }, + get borderRadiusLarge() { + return this.fontSizeBase * 3.8; + }, + get iconSizeLarge() { + return this.iconFontSize * 1.5; + }, + get iconSizeSmall() { + return this.iconFontSize * 0.6; + }, + + // Card + cardDefaultBg: "#fff", + cardBorderColor: "#ccc", + cardBorderRadius: 2, + cardItemPadding: platform === "ios" ? 10 : 12, + + // CheckBox + CheckboxRadius: platform === "ios" ? 13 : 0, + CheckboxBorderWidth: platform === "ios" ? 1 : 2, + CheckboxPaddingLeft: platform === "ios" ? 4 : 2, + CheckboxPaddingBottom: platform === "ios" ? 0 : 5, + CheckboxIconSize: platform === "ios" ? 21 : 16, + CheckboxIconMarginTop: platform === "ios" ? undefined : 1, + CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17, + checkboxBgColor: "#E4202D", + checkboxSize: 20, + checkboxTickColor: "#fff", + + // Color + brandPrimary: platform === "ios" ? "#e42612" : "#e42612", + brandInfo: "#62B1F6", + brandSuccess: "#5cb85c", + brandDanger: "#d9534f", + brandWarning: "#f0ad4e", + brandDark: "#000", + brandLight: "#f4f4f4", + + //Container + containerBgColor: "#fff", + + //Date Picker + datePickerTextColor: "#000", + datePickerBg: "transparent", + + // Font + DefaultFontSize: 16, + fontFamily: platform === "ios" ? "System" : "Roboto", + fontSizeBase: 15, + get fontSizeH1() { + return this.fontSizeBase * 1.8; + }, + get fontSizeH2() { + return this.fontSizeBase * 1.6; + }, + get fontSizeH3() { + return this.fontSizeBase * 1.4; + }, + + // Footer + footerHeight: 55, + footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5", + footerPaddingBottom: 0, + + // FooterTab + tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9", + tabBarTextSize: platform === "ios" ? 14 : 11, + activeTab: platform === "ios" ? "#007aff" : "#fff", + sTabBarActiveTextColor: "#007aff", + tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff", + tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5", + + // Header + toolbarBtnColor: platform === "ios" ? "#e42612" : "#fff", + toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#e42612", + toolbarHeight: platform === "ios" ? 64 : 56, + toolbarSearchIconSize: platform === "ios" ? 20 : 23, + toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff", + searchBarHeight: platform === "ios" ? 30 : 40, + searchBarInputHeight: platform === "ios" ? 30 : 50, + toolbarBtnTextColor: platform === "ios" ? "#e42612" : "#fff", + toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#ba1f0f", + iosStatusbar: platform === "ios" ? "dark-content" : "light-content", + get statusBarColor() { + return color(this.toolbarDefaultBg) + .darken(0.2) + .hex(); + }, + get darkenHeader() { + return color(this.tabBgColor) + .darken(0.03) + .hex(); + }, + + // Icon + iconFamily: "Ionicons", + iconFontSize: platform === "ios" ? 30 : 28, + iconHeaderSize: platform === "ios" ? 33 : 24, + + // InputGroup + inputFontSize: 17, + inputBorderColor: "#D9D5DC", + inputSuccessBorderColor: "#2b8339", + inputErrorBorderColor: "#ed2f2f", + inputHeightBase: 50, + get inputColor() { + return this.textColor; + }, + get inputColorPlaceholder() { + return "#575757"; + }, + + // Line Height + btnLineHeight: 19, + lineHeightH1: 32, + lineHeightH2: 27, + lineHeightH3: 22, + lineHeight: platform === "ios" ? 20 : 24, + listItemSelected: platform === "ios" ? "#e42612" : "#e42612", + + // List + listBg: "transparent", + listBorderColor: "#c9c9c9", + listDividerBg: "#f4f4f4", + listBtnUnderlayColor: "#DDD", + listItemPadding: platform === "ios" ? 10 : 12, + listNoteColor: "#808080", + listNoteSize: 13, + + // Progress Bar + defaultProgressColor: "#E4202D", + inverseProgressColor: "#1A191B", + + // Radio Button + radioBtnSize: platform === "ios" ? 25 : 23, + radioSelectedColorAndroid: "#E4202D", + radioBtnLineHeight: platform === "ios" ? 29 : 24, + get radioColor() { + return this.brandPrimary; + }, + + // Segment + segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5", + segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff", + segmentTextColor: platform === "ios" ? "#007aff" : "#fff", + segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5", + segmentBorderColor: platform === "ios" ? "#007aff" : "#fff", + segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5", + + // Spinner + defaultSpinnerColor: "#e42612", + inverseSpinnerColor: "#1A191B", + + // Tab + tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#e42612", + topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9", + topTabBarActiveTextColor: platform === "ios" ? "#e42612" : "#fff", + topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff", + topTabBarActiveBorderColor: platform === "ios" ? "#e42612" : "#fff", + + // Tabs + tabBgColor: "#F8F8F8", + tabFontSize: 15, + + // Text + textColor: "#000", + inverseTextColor: "#fff", + noteFontSize: 14, + get defaultTextColor() { + return this.textColor; + }, + + // Title + titleFontfamily: platform === "ios" ? "System" : "Roboto_medium", + titleFontSize: platform === "ios" ? 17 : 19, + subTitleFontSize: platform === "ios" ? 11 : 14, + subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF", + titleFontColor: platform === "ios" ? "#000" : "#FFF", + + + // CUSTOM + customMaterialIconColor: "#5d5d5d", + fetchedDataSectionListErrorText: "#898989", + + // PROXIWASH + proxiwashFinishedColor: "rgba(54,165,22,0.31)", + proxiwashReadyColor: "transparent", + proxiwashRunningColor: "rgba(94,104,241,0.3)", + proxiwashBrokenColor: "rgba(162,162,162,0.31)", + proxiwashErrorColor: "rgba(204,7,0,0.31)", + + // Other + borderRadiusBase: platform === "ios" ? 5 : 2, + borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), + contentPadding: 10, + dropdownLinkColor: "#414142", + inputLineHeight: 24, + deviceWidth, + deviceHeight, + isIphoneX, + inputGroupRoundedBorderRadius: 30, + + //iPhoneX SafeArea + Inset: { + portrait: { + topInset: 24, + leftInset: 0, + rightInset: 0, + bottomInset: 34 + }, + landscape: { + topInset: 0, + leftInset: 44, + rightInset: 44, + bottomInset: 21 + } } - } }; diff --git a/native-base-theme/variables/platformDark.js b/native-base-theme/variables/platformDark.js index 89528a9..4a9f15e 100644 --- a/native-base-theme/variables/platformDark.js +++ b/native-base-theme/variables/platformDark.js @@ -2,7 +2,7 @@ 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 deviceWidth = Dimensions.get("window").width; @@ -226,7 +226,7 @@ export default { segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5", // Spinner - defaultSpinnerColor: "#45D56E", + defaultSpinnerColor: "#e42612", inverseSpinnerColor: "#1A191B", // Tab @@ -258,7 +258,7 @@ export default { // CUSTOM customMaterialIconColor: "#b3b3b3", - fetchedDataSectionListErrorText : "#acacac", + fetchedDataSectionListErrorText: "#acacac", // PROXIWASH proxiwashFinishedColor: "rgba(17,149,32,0.53)",