From 1f64c734aa27f40b3c1e4bc15ac061a8a5fe2039 Mon Sep 17 00:00:00 2001 From: keplyx Date: Fri, 6 Mar 2020 23:15:01 +0100 Subject: [PATCH] Replaced native base with react native paper --- App.js | 38 +- components/CustomIntroSlider.js | 2 +- components/DashboardItem.js | 205 ++++---- components/Sidebar.js | 47 +- components/WebSectionList.js | 17 +- components/WebViewScreen.js | 56 +-- native-base-theme/components/Badge.js | 39 -- native-base-theme/components/Body.js | 11 - native-base-theme/components/Button.js | 386 --------------- native-base-theme/components/Card.js | 37 -- native-base-theme/components/CardItem.js | 198 -------- native-base-theme/components/CheckBox.js | 38 -- native-base-theme/components/Container.js | 17 - native-base-theme/components/Content.js | 14 - native-base-theme/components/Fab.js | 25 - native-base-theme/components/Footer.js | 119 ----- native-base-theme/components/FooterTab.js | 79 ---- native-base-theme/components/Form.js | 86 ---- native-base-theme/components/H1.js | 13 - native-base-theme/components/H2.js | 13 - native-base-theme/components/H3.js | 13 - native-base-theme/components/Header.js | 419 ---------------- native-base-theme/components/Icon.js | 12 - native-base-theme/components/Input.js | 19 - native-base-theme/components/InputGroup.js | 132 ------ native-base-theme/components/Item.js | 241 ---------- native-base-theme/components/Label.js | 12 - native-base-theme/components/Left.js | 11 - native-base-theme/components/ListItem.js | 446 ------------------ .../components/Picker.android.js | 14 - native-base-theme/components/Picker.ios.js | 7 - native-base-theme/components/Picker.js | 14 - native-base-theme/components/Radio.js | 31 -- native-base-theme/components/Right.js | 14 - native-base-theme/components/Segment.js | 57 --- native-base-theme/components/Separator.js | 49 -- native-base-theme/components/Spinner.js | 9 - native-base-theme/components/Subtitle.js | 19 - native-base-theme/components/SwipeRow.js | 46 -- native-base-theme/components/Switch.js | 9 - native-base-theme/components/Tab.js | 10 - native-base-theme/components/TabBar.js | 57 --- native-base-theme/components/TabContainer.js | 26 - native-base-theme/components/TabHeading.js | 40 -- native-base-theme/components/Text.js | 17 - native-base-theme/components/Textarea.js | 25 - native-base-theme/components/Thumbnail.js | 40 -- native-base-theme/components/Title.js | 21 - native-base-theme/components/Toast.js | 41 -- native-base-theme/components/View.js | 13 - native-base-theme/components/index.js | 249 ---------- native-base-theme/variables/commonColor.js | 311 ------------ native-base-theme/variables/material.js | 304 ------------ native-base-theme/variables/platform.js | 362 -------------- native-base-theme/variables/platformDark.js | 362 -------------- navigation/DrawerNavigator.js | 27 +- navigation/MainTabNavigator.js | 17 +- package.json | 5 +- screens/About/AboutDependenciesScreen.js | 16 +- screens/About/AboutScreen.js | 180 ++++--- screens/DebugScreen.js | 133 +++--- screens/HomeScreen.js | 87 ++-- screens/PlanningDisplayScreen.js | 60 ++- screens/PlanningScreen.js | 119 ++--- screens/Proximo/ProximoAboutScreen.js | 84 ++-- screens/Proximo/ProximoListScreen.js | 145 ++---- screens/Proximo/ProximoMainScreen.js | 71 +-- screens/Proxiwash/ProxiwashAboutScreen.js | 190 +++----- screens/Proxiwash/ProxiwashScreen.js | 133 ++---- screens/SelfMenuScreen.js | 34 +- screens/SettingsScreen.js | 169 +++---- utils/ThemeManager.js | 130 +++-- utils/WebDataManager.js | 19 +- 73 files changed, 828 insertions(+), 5683 deletions(-) delete mode 100644 native-base-theme/components/Badge.js delete mode 100644 native-base-theme/components/Body.js delete mode 100644 native-base-theme/components/Button.js delete mode 100644 native-base-theme/components/Card.js delete mode 100644 native-base-theme/components/CardItem.js delete mode 100644 native-base-theme/components/CheckBox.js delete mode 100644 native-base-theme/components/Container.js delete mode 100644 native-base-theme/components/Content.js delete mode 100644 native-base-theme/components/Fab.js delete mode 100644 native-base-theme/components/Footer.js delete mode 100644 native-base-theme/components/FooterTab.js delete mode 100644 native-base-theme/components/Form.js delete mode 100644 native-base-theme/components/H1.js delete mode 100644 native-base-theme/components/H2.js delete mode 100644 native-base-theme/components/H3.js delete mode 100644 native-base-theme/components/Header.js delete mode 100644 native-base-theme/components/Icon.js delete mode 100644 native-base-theme/components/Input.js delete mode 100644 native-base-theme/components/InputGroup.js delete mode 100644 native-base-theme/components/Item.js delete mode 100644 native-base-theme/components/Label.js delete mode 100644 native-base-theme/components/Left.js delete mode 100644 native-base-theme/components/ListItem.js delete mode 100644 native-base-theme/components/Picker.android.js delete mode 100644 native-base-theme/components/Picker.ios.js delete mode 100644 native-base-theme/components/Picker.js delete mode 100644 native-base-theme/components/Radio.js delete mode 100644 native-base-theme/components/Right.js delete mode 100644 native-base-theme/components/Segment.js delete mode 100644 native-base-theme/components/Separator.js delete mode 100644 native-base-theme/components/Spinner.js delete mode 100644 native-base-theme/components/Subtitle.js delete mode 100644 native-base-theme/components/SwipeRow.js delete mode 100644 native-base-theme/components/Switch.js delete mode 100644 native-base-theme/components/Tab.js delete mode 100644 native-base-theme/components/TabBar.js delete mode 100644 native-base-theme/components/TabContainer.js delete mode 100644 native-base-theme/components/TabHeading.js delete mode 100644 native-base-theme/components/Text.js delete mode 100644 native-base-theme/components/Textarea.js delete mode 100644 native-base-theme/components/Thumbnail.js delete mode 100644 native-base-theme/components/Title.js delete mode 100644 native-base-theme/components/Toast.js delete mode 100644 native-base-theme/components/View.js delete mode 100644 native-base-theme/components/index.js delete mode 100644 native-base-theme/variables/commonColor.js delete mode 100644 native-base-theme/variables/material.js delete mode 100644 native-base-theme/variables/platform.js delete mode 100644 native-base-theme/variables/platformDark.js diff --git a/App.js b/App.js index 3c146e9..f54c899 100644 --- a/App.js +++ b/App.js @@ -2,18 +2,17 @@ import * as React from 'react'; import {Platform, StatusBar} from 'react-native'; -import {Root, StyleProvider} from 'native-base'; import LocaleManager from './utils/LocaleManager'; import * as Font from 'expo-font'; -import {clearThemeCache} from 'native-base-shoutem-theme'; import AsyncStorageManager from "./utils/AsyncStorageManager"; import CustomIntroSlider from "./components/CustomIntroSlider"; import {SplashScreen} from 'expo'; import ThemeManager from './utils/ThemeManager'; -import { NavigationContainer } from '@react-navigation/native'; -import { createStackNavigator } from '@react-navigation/stack'; +import {NavigationContainer} from '@react-navigation/native'; +import {createStackNavigator} from '@react-navigation/stack'; import DrawerNavigator from './navigation/DrawerNavigator'; import NotificationsManager from "./utils/NotificationsManager"; +import {Provider as PaperProvider} from 'react-native-paper'; type Props = {}; @@ -24,6 +23,17 @@ type State = { currentTheme: ?Object, }; +const MyTheme = { + dark: false, + colors: { + primary: 'rgb(255, 45, 85)', + background: 'rgb(242, 242, 242)', + card: 'rgb(255, 255, 255)', + text: 'rgb(28, 28, 30)', + border: 'rgb(199, 199, 204)', + }, +}; + const Stack = createStackNavigator(); export default class App extends React.Component { @@ -51,7 +61,6 @@ export default class App extends React.Component { currentTheme: ThemeManager.getCurrentTheme() }); this.setupStatusBar(); - clearThemeCache(); } setupStatusBar() { @@ -84,9 +93,6 @@ export default class App extends React.Component { // Wait for custom fonts to be loaded before showing the app // console.log("loading Fonts"); SplashScreen.preventAutoHide(); - await Font.loadAsync({ - 'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'), - }); // console.log("loading preferences"); await AsyncStorageManager.getInstance().loadPreferences(); ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme()); @@ -122,15 +128,13 @@ export default class App extends React.Component { } else { return ( - - - - - - - - - + + + + + + + ); } } diff --git a/components/CustomIntroSlider.js b/components/CustomIntroSlider.js index 55552a8..bde99f9 100644 --- a/components/CustomIntroSlider.js +++ b/components/CustomIntroSlider.js @@ -4,7 +4,7 @@ import * as React from 'react'; import {LinearGradient} from "expo-linear-gradient"; import {Image, StyleSheet, View} from "react-native"; import {MaterialCommunityIcons} from "@expo/vector-icons"; -import {Text} from "native-base"; +import {Text} from "react-native-paper"; import i18n from 'i18n-js'; import AppIntroSlider from "react-native-app-intro-slider"; diff --git a/components/DashboardItem.js b/components/DashboardItem.js index 1d5b2f4..adedc27 100644 --- a/components/DashboardItem.js +++ b/components/DashboardItem.js @@ -1,16 +1,13 @@ // @flow import * as React from 'react'; -import {Body, Card, CardItem, H3, Left, Text, Thumbnail} from "native-base"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import {View} from "react-native"; import ThemeManager from "../utils/ThemeManager"; import HTML from "react-native-render-html"; import {LinearGradient} from "expo-linear-gradient"; -import PlatformTouchable from "react-native-platform-touchable"; import i18n from "i18n-js"; - -const CARD_BORDER_RADIUS = 10; +import {Avatar, Card, Text, Title} from 'react-native-paper'; type Props = { isAvailable: boolean, @@ -72,74 +69,73 @@ export default class DashboardItem extends React.Component { getEventPreviewContainer() { if (this.props.displayEvent !== undefined && this.props.displayEvent !== null) { + const hasImage = this.props.displayEvent['logo'] !== '' && this.props.displayEvent['logo'] !== null; return ( - - - - {this.props.displayEvent['logo'] !== '' && this.props.displayEvent['logo'] !== null ? - : - } - - {this.props.displayEvent['title']} - {this.getFormattedEventTime(this.props.displayEvent)} - - - - - 50 ? 70 : 20, + + {hasImage ? + + + } + /> : + } + + 70 ? 100 : 50, overflow: 'hidden', }}> " + this.props.displayEvent['description'] + ""} tagsStyles={{ p: { - color: ThemeManager.getCurrentThemeVariables().textColor, - fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase, + color: ThemeManager.getCurrentThemeVariables().text, }, - div: {color: ThemeManager.getCurrentThemeVariables().textColor}, + div: {color: ThemeManager.getCurrentThemeVariables().text}, }}/> - - + + + - - {i18n.t("homeScreen.dashboard.seeMore")} - - - - - - - + {i18n.t("homeScreen.dashboard.seeMore")} + + + + + + ); } else return @@ -152,7 +148,7 @@ export default class DashboardItem extends React.Component { color={ this.props.isAvailable ? this.props.color : - ThemeManager.getCurrentThemeVariables().textDisabledColor + ThemeManager.getCurrentThemeVariables().textDisabled } size={this.props.isSquare ? 50 : 40}/> ); @@ -163,19 +159,19 @@ export default class DashboardItem extends React.Component { -

{this.props.title} -

+ @@ -188,21 +184,12 @@ export default class DashboardItem extends React.Component { getContent() { if (this.props.isSquare) { return ( - + {this.getIcon()} {this.getText()} - - ); - } else { - return ( - - {this.getIcon()} - - {this.getText()} - - + ); } } @@ -217,33 +204,41 @@ export default class DashboardItem extends React.Component { else marginRight = 0 } + const color = this.props.isAvailable ? + ThemeManager.getCurrentThemeVariables().text : + ThemeManager.getCurrentThemeVariables().textDisabled; return ( - - + + {this.props.isSquare ? + + {this.getContent()} + + : - - {this.getContent()} - - {this.getEventPreviewContainer()} - - + } + /> + + {this.getEventPreviewContainer()} + + } ); } diff --git a/components/Sidebar.js b/components/Sidebar.js index 353d15a..76ad5f0 100644 --- a/components/Sidebar.js +++ b/components/Sidebar.js @@ -1,17 +1,19 @@ // @flow import * as React from 'react'; -import {Dimensions, FlatList, Image,Platform, StyleSheet} from 'react-native'; -import {Container, Left, ListItem, Text} from "native-base"; +import {Dimensions, FlatList, Image, Platform, StyleSheet, View} from 'react-native'; import i18n from "i18n-js"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../utils/ThemeManager"; import * as WebBrowser from 'expo-web-browser'; +import {List} from 'react-native-paper'; +import {DrawerItem} from '@react-navigation/drawer'; const deviceWidth = Dimensions.get("window").width; type Props = { navigation: Object, + state: Object, }; type State = { @@ -142,32 +144,29 @@ export default class SideBar extends React.Component { getRenderItem({item}: Object) { const onListItemPress = this.onListItemPress.bind(this, item); - // return ; if (item.icon !== undefined) { return ( - + } selected={this.state.active === item.route} onPress={onListItemPress} - > - - - - {item.name} - - - + style={{ + marginLeft: 0, + marginRight: 0, + padding: 0, + borderRadius: 0 + }} + /> ); } else { return ( - - {item.name} - + ); } @@ -176,9 +175,7 @@ export default class SideBar extends React.Component { render() { console.log("rendering SideBar"); return ( - + { keyExtractor={this.listKeyExtractor} renderItem={this.getRenderItem} /> - + ); } } diff --git a/components/WebSectionList.js b/components/WebSectionList.js index 812196e..497b33e 100644 --- a/components/WebSectionList.js +++ b/components/WebSectionList.js @@ -1,12 +1,12 @@ // @flow import * as React from 'react'; -import {H3, Spinner, View} from "native-base"; import ThemeManager from '../utils/ThemeManager'; import WebDataManager from "../utils/WebDataManager"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import i18n from "i18n-js"; -import {RefreshControl, SectionList} from "react-native"; +import {ActivityIndicator, Subheading} from 'react-native-paper'; +import {RefreshControl, SectionList, View} from "react-native"; type Props = { navigation: Object, @@ -148,22 +148,25 @@ export default class WebSectionList extends React.Component { marginBottom: 20 }}> {this.state.refreshing ? - + : } + color={ThemeManager.getCurrentThemeVariables().textDisabled}/>} -

{item.text} -

+ ); } diff --git a/components/WebViewScreen.js b/components/WebViewScreen.js index fe88437..76bdeae 100644 --- a/components/WebViewScreen.js +++ b/components/WebViewScreen.js @@ -1,12 +1,12 @@ // @flow import * as React from 'react'; -import {Platform, View} from 'react-native'; -import {Container, Spinner, Tab, TabHeading, Tabs, Text} from 'native-base'; +import {View} from 'react-native'; import WebView from "react-native-webview"; import Touchable from "react-native-platform-touchable"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../utils/ThemeManager"; +import {ActivityIndicator} from 'react-native-paper'; type Props = { navigation: Object, @@ -62,9 +62,9 @@ export default class WebViewScreen extends React.Component { style={{padding: 6}} onPress={clickAction}> + size={26} + color={ThemeManager.getCurrentThemeVariables().text}/> ); } @@ -112,7 +112,7 @@ export default class WebViewScreen extends React.Component { getRenderLoading() { return ( { alignItems: 'center', justifyContent: 'center' }}> - + ); } @@ -144,50 +147,11 @@ export default class WebViewScreen extends React.Component { ); } - getTabbedWebview() { - let tabbedView = []; - for (let i = 0; i < this.props.data.length; i++) { - tabbedView.push( - - - {this.props.data[i]['name']} - } - key={this.props.data[i]['url']} - style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> - {this.getWebview(this.props.data[i])} - ); - } - return tabbedView; - } - render() { // console.log("rendering WebViewScreen"); - const nav = this.props.navigation; this.webviewArray = []; return ( - - {this.props.data.length === 1 ? - this.getWebview(this.props.data[0]) : - - {this.getTabbedWebview()} - } - + this.getWebview(this.props.data[0]) ); } } diff --git a/native-base-theme/components/Badge.js b/native-base-theme/components/Badge.js deleted file mode 100644 index 8a38fc0..0000000 --- a/native-base-theme/components/Badge.js +++ /dev/null @@ -1,39 +0,0 @@ -// @flow - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const badgeTheme = { - '.primary': { - backgroundColor: variables.buttonPrimaryBg - }, - '.warning': { - backgroundColor: variables.buttonWarningBg - }, - '.info': { - backgroundColor: variables.buttonInfoBg - }, - '.success': { - backgroundColor: variables.buttonSuccessBg - }, - '.danger': { - backgroundColor: variables.buttonDangerBg - }, - 'NativeBase.Text': { - color: variables.badgeColor, - fontSize: variables.fontSizeBase, - lineHeight: variables.lineHeight - 1, - textAlign: 'center', - paddingHorizontal: 3 - }, - backgroundColor: variables.badgeBg, - padding: variables.badgePadding, - paddingHorizontal: 6, - alignSelf: 'flex-start', - justifyContent: variables.platform === PLATFORM.IOS ? 'center' : undefined, - borderRadius: 13.5, - height: 27 - }; - return badgeTheme; -}; diff --git a/native-base-theme/components/Body.js b/native-base-theme/components/Body.js deleted file mode 100644 index 6de0c88..0000000 --- a/native-base-theme/components/Body.js +++ /dev/null @@ -1,11 +0,0 @@ -// @flow - -export default () => { - const bodyTheme = { - flex: 1, - alignItems: 'center', - alignSelf: 'center' - }; - - return bodyTheme; -}; diff --git a/native-base-theme/components/Button.js b/native-base-theme/components/Button.js deleted file mode 100644 index 507b6ec..0000000 --- a/native-base-theme/components/Button.js +++ /dev/null @@ -1,386 +0,0 @@ -// @flow - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const platformStyle = variables.platformStyle; - const platform = variables.platform; - const darkCommon = { - 'NativeBase.Text': { - color: variables.brandDark - }, - 'NativeBase.Icon': { - color: variables.brandDark - }, - 'NativeBase.IconNB': { - color: variables.brandDark - } - }; - const lightCommon = { - 'NativeBase.Text': { - color: variables.brandLight - }, - 'NativeBase.Icon': { - color: variables.brandLight - }, - 'NativeBase.IconNB': { - color: variables.brandLight - } - }; - const primaryCommon = { - 'NativeBase.Text': { - color: variables.buttonPrimaryBg - }, - 'NativeBase.Icon': { - color: variables.buttonPrimaryBg - }, - 'NativeBase.IconNB': { - color: variables.buttonPrimaryBg - } - }; - const successCommon = { - 'NativeBase.Text': { - color: variables.buttonSuccessBg - }, - 'NativeBase.Icon': { - color: variables.buttonSuccessBg - }, - 'NativeBase.IconNB': { - color: variables.buttonSuccessBg - } - }; - const infoCommon = { - 'NativeBase.Text': { - color: variables.buttonInfoBg - }, - 'NativeBase.Icon': { - color: variables.buttonInfoBg - }, - 'NativeBase.IconNB': { - color: variables.buttonInfoBg - } - }; - const warningCommon = { - 'NativeBase.Text': { - color: variables.buttonWarningBg - }, - 'NativeBase.Icon': { - color: variables.buttonWarningBg - }, - 'NativeBase.IconNB': { - color: variables.buttonWarningBg - } - }; - const dangerCommon = { - 'NativeBase.Text': { - color: variables.buttonDangerBg - }, - 'NativeBase.Icon': { - color: variables.buttonDangerBg - }, - 'NativeBase.IconNB': { - color: variables.buttonDangerBg - } - }; - const buttonTheme = { - '.disabled': { - '.transparent': { - backgroundColor: 'transparent', - 'NativeBase.Text': { - color: variables.buttonDisabledBg - }, - 'NativeBase.Icon': { - color: variables.buttonDisabledBg - }, - 'NativeBase.IconNB': { - color: variables.buttonDisabledBg - } - }, - 'NativeBase.Icon': { - color: variables.brandLight - }, - 'NativeBase.IconNB': { - color: variables.brandLight - }, - backgroundColor: variables.buttonDisabledBg - }, - '.bordered': { - '.dark': { - ...darkCommon, - backgroundColor: 'transparent', - borderColor: variables.brandDark, - borderWidth: variables.borderWidth * 2 - }, - '.light': { - ...lightCommon, - backgroundColor: 'transparent', - borderColor: variables.brandLight, - borderWidth: variables.borderWidth * 2 - }, - '.primary': { - ...primaryCommon, - backgroundColor: 'transparent', - borderColor: variables.buttonPrimaryBg, - borderWidth: variables.borderWidth * 2 - }, - '.success': { - ...successCommon, - backgroundColor: 'transparent', - borderColor: variables.buttonSuccessBg, - borderWidth: variables.borderWidth * 2 - }, - '.info': { - ...infoCommon, - backgroundColor: 'transparent', - borderColor: variables.buttonInfoBg, - borderWidth: variables.borderWidth * 2 - }, - '.warning': { - ...warningCommon, - backgroundColor: 'transparent', - borderColor: variables.buttonWarningBg, - borderWidth: variables.borderWidth * 2 - }, - '.danger': { - ...dangerCommon, - backgroundColor: 'transparent', - borderColor: variables.buttonDangerBg, - borderWidth: variables.borderWidth * 2 - }, - '.disabled': { - backgroundColor: 'transparent', - borderColor: variables.buttonDisabledBg, - borderWidth: variables.borderWidth * 2, - 'NativeBase.Text': { - color: variables.buttonDisabledBg - } - }, - ...primaryCommon, - borderWidth: variables.borderWidth * 2, - elevation: null, - shadowColor: null, - shadowOffset: null, - shadowOpacity: null, - shadowRadius: null, - backgroundColor: 'transparent' - }, - - '.dark': { - '.bordered': { - ...darkCommon - }, - backgroundColor: variables.brandDark - }, - '.light': { - '.transparent': { - ...lightCommon, - backgroundColor: 'transparent' - }, - '.bordered': { - ...lightCommon - }, - ...darkCommon, - backgroundColor: variables.brandLight - }, - - '.primary': { - '.bordered': { - ...primaryCommon - }, - backgroundColor: variables.buttonPrimaryBg - }, - - '.success': { - '.bordered': { - ...successCommon - }, - backgroundColor: variables.buttonSuccessBg - }, - - '.info': { - '.bordered': { - ...infoCommon - }, - backgroundColor: variables.buttonInfoBg - }, - - '.warning': { - '.bordered': { - ...warningCommon - }, - backgroundColor: variables.buttonWarningBg - }, - - '.danger': { - '.bordered': { - ...dangerCommon - }, - backgroundColor: variables.buttonDangerBg - }, - - '.block': { - justifyContent: 'center', - alignSelf: 'stretch' - }, - - '.full': { - justifyContent: 'center', - alignSelf: 'stretch', - borderRadius: 0 - }, - - '.rounded': { - borderRadius: variables.borderRadiusLarge - }, - - '.transparent': { - backgroundColor: 'transparent', - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null, - ...primaryCommon, - '.dark': { - ...darkCommon, - }, - '.danger': { - ...dangerCommon, - }, - '.warning': { - ...warningCommon, - }, - '.info': { - ...infoCommon, - }, - '.primary': { - ...primaryCommon, - }, - '.success': { - ...successCommon, - }, - '.light': { - ...lightCommon, - }, - '.disabled': { - backgroundColor: 'transparent', - borderColor: variables.buttonDisabledBg, - borderWidth: variables.borderWidth * 2, - 'NativeBase.Text': { - color: variables.buttonDisabledBg - }, - 'NativeBase.Icon': { - color: variables.buttonDisabledBg - }, - 'NativeBase.IconNB': { - color: variables.buttonDisabledBg - } - } - }, - - '.small': { - height: 30, - 'NativeBase.Text': { - fontSize: 14 - }, - 'NativeBase.Icon': { - fontSize: 20, - paddingTop: 0 - }, - 'NativeBase.IconNB': { - fontSize: 20, - paddingTop: 0 - } - }, - - '.large': { - height: 60, - 'NativeBase.Text': { - fontSize: 22 - } - }, - - '.capitalize': {}, - - '.vertical': { - flexDirection: 'column', - height: null - }, - - 'NativeBase.Text': { - fontFamily: variables.buttonFontFamily, - marginLeft: 0, - marginRight: 0, - color: variables.buttonTextColor, - fontSize: variables.buttonTextSize, - paddingHorizontal: 16, - backgroundColor: 'transparent' - }, - - 'NativeBase.Icon': { - color: variables.buttonTextColor, - fontSize: 24, - marginHorizontal: 16, - paddingTop: platform === PLATFORM.IOS ? 2 : undefined - }, - 'NativeBase.IconNB': { - color: variables.buttonTextColor, - fontSize: 24, - marginHorizontal: 16, - paddingTop: platform === PLATFORM.IOS ? 2 : undefined - }, - - '.iconLeft': { - 'NativeBase.Text': { - marginLeft: 0 - }, - 'NativeBase.IconNB': { - marginRight: 0, - marginLeft: 16 - }, - 'NativeBase.Icon': { - marginRight: 0, - marginLeft: 16 - } - }, - '.iconRight': { - 'NativeBase.Text': { - marginRight: 0 - }, - 'NativeBase.IconNB': { - marginLeft: 0, - marginRight: 16 - }, - 'NativeBase.Icon': { - marginLeft: 0, - marginRight: 16 - } - }, - '.picker': { - 'NativeBase.Text': { - '.note': { - fontSize: 16, - lineHeight: null - } - } - }, - paddingVertical: variables.buttonPadding, - backgroundColor: variables.buttonPrimaryBg, - borderRadius: variables.borderRadiusBase, - borderColor: variables.buttonPrimaryBg, - borderWidth: null, - height: 45, - flexDirection: 'row', - elevation: 2, - shadowColor: - platformStyle === PLATFORM.MATERIAL ? variables.brandDark : undefined, - shadowOffset: - platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined, - shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined, - shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined, - alignItems: 'center', - justifyContent: 'space-between' - }; - return buttonTheme; -}; diff --git a/native-base-theme/components/Card.js b/native-base-theme/components/Card.js deleted file mode 100644 index de4f9f4..0000000 --- a/native-base-theme/components/Card.js +++ /dev/null @@ -1,37 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const cardTheme = { - '.transparent': { - shadowColor: null, - shadowOffset: null, - shadowOpacity: null, - shadowRadius: null, - elevation: null, - backgroundColor: 'transparent', - borderWidth: 0 - }, - '.noShadow': { - shadowColor: null, - shadowOffset: null, - shadowOpacity: null, - elevation: null - }, - marginVertical: 5, - marginHorizontal: 2, - borderWidth: variables.borderWidth, - borderRadius: variables.cardBorderRadius, - borderColor: variables.cardBorderColor, - flexWrap: 'nowrap', - backgroundColor: variables.cardDefaultBg, - shadowColor: '#000', - shadowOffset: { width: 0, height: 2 }, - shadowOpacity: 0.1, - shadowRadius: 1.5, - elevation: 3 - }; - - return cardTheme; -}; diff --git a/native-base-theme/components/CardItem.js b/native-base-theme/components/CardItem.js deleted file mode 100644 index bfb1757..0000000 --- a/native-base-theme/components/CardItem.js +++ /dev/null @@ -1,198 +0,0 @@ -// @flow - -import { StyleSheet } from 'react-native'; - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const platform = variables.platform; - const transparentBtnCommon = { - 'NativeBase.Text': { - fontSize: variables.DefaultFontSize - 3, - color: variables.sTabBarActiveTextColor - }, - 'NativeBase.Icon': { - fontSize: variables.iconFontSize - 10, - color: variables.sTabBarActiveTextColor, - marginHorizontal: null - }, - 'NativeBase.IconNB': { - fontSize: variables.iconFontSize - 10, - color: variables.sTabBarActiveTextColor - }, - paddingVertical: null, - paddingHorizontal: null - }; - - const cardItemTheme = { - 'NativeBase.Left': { - 'NativeBase.Body': { - 'NativeBase.Text': { - '.note': { - color: variables.listNoteColor, - fontWeight: '400', - marginRight: 20 - } - }, - flex: 1, - marginLeft: 10, - alignItems: null - }, - 'NativeBase.Icon': { - fontSize: variables.iconFontSize - }, - 'NativeBase.IconNB': { - fontSize: variables.iconFontSize - }, - 'NativeBase.Text': { - marginLeft: 10, - alignSelf: 'center' - }, - 'NativeBase.Button': { - '.transparent': { - ...transparentBtnCommon, - paddingRight: variables.cardItemPadding + 5 - } - }, - flex: 1, - flexDirection: 'row', - alignItems: 'center' - }, - '.content': { - 'NativeBase.Text': { - color: platform === PLATFORM.IOS ? '#555' : '#222', - fontSize: variables.DefaultFontSize - 2 - } - }, - '.cardBody': { - padding: -5, - 'NativeBase.Text': { - marginTop: 5 - } - }, - 'NativeBase.Body': { - 'NativeBase.Text': { - '.note': { - color: variables.listNoteColor, - fontWeight: '200', - marginRight: 20 - } - }, - 'NativeBase.Button': { - '.transparent': { - ...transparentBtnCommon, - paddingRight: variables.cardItemPadding + 5, - alignSelf: 'stretch' - } - }, - flex: 1, - alignSelf: 'stretch', - alignItems: 'flex-start' - }, - 'NativeBase.Right': { - 'NativeBase.Badge': { - alignSelf: null - }, - 'NativeBase.Button': { - '.transparent': { - ...transparentBtnCommon - }, - alignSelf: null - }, - 'NativeBase.Icon': { - alignSelf: null, - fontSize: variables.iconFontSize - 8, - color: variables.cardBorderColor - }, - 'NativeBase.IconNB': { - alignSelf: null, - fontSize: variables.iconFontSize - 8, - color: variables.cardBorderColor - }, - 'NativeBase.Text': { - fontSize: variables.DefaultFontSize - 1, - alignSelf: null - }, - 'NativeBase.Thumbnail': { - alignSelf: null - }, - 'NativeBase.Image': { - alignSelf: null - }, - 'NativeBase.Radio': { - alignSelf: null - }, - 'NativeBase.Checkbox': { - alignSelf: null - }, - 'NativeBase.Switch': { - alignSelf: null - }, - flex: 0.8 - }, - '.header': { - 'NativeBase.Text': { - fontSize: 16, - fontWeight: platform === PLATFORM.IOS ? '600' : '500' - }, - '.bordered': { - 'NativeBase.Text': { - color: variables.brandPrimary, - fontWeight: platform === PLATFORM.IOS ? '600' : '500' - }, - borderBottomWidth: variables.borderWidth - }, - borderBottomWidth: null, - paddingVertical: variables.cardItemPadding + 5 - }, - '.footer': { - 'NativeBase.Text': { - fontSize: 16, - fontWeight: platform === PLATFORM.IOS ? '600' : '500' - }, - '.bordered': { - 'NativeBase.Text': { - color: variables.brandPrimary, - fontWeight: platform === PLATFORM.IOS ? '600' : '500' - }, - borderTopWidth: variables.borderWidth - }, - borderBottomWidth: null - }, - 'NativeBase.Text': { - '.note': { - color: variables.listNoteColor, - fontWeight: '200' - } - }, - 'NativeBase.Icon': { - width: variables.iconFontSize + 5, - fontSize: variables.iconFontSize - 2 - }, - 'NativeBase.IconNB': { - width: variables.iconFontSize + 5, - fontSize: variables.iconFontSize - 2 - }, - '.bordered': { - borderBottomWidth: StyleSheet.hairlineWidth, - borderColor: variables.cardBorderColor - }, - '.first': { - borderTopLeftRadius: variables.cardBorderRadius, - borderTopRightRadius: variables.cardBorderRadius - }, - '.last': { - borderBottomLeftRadius: variables.cardBorderRadius, - borderBottomRightRadius: variables.cardBorderRadius - }, - flexDirection: 'row', - alignItems: 'center', - borderRadius: variables.cardBorderRadius, - padding: variables.cardItemPadding + 5, - paddingVertical: variables.cardItemPadding, - backgroundColor: variables.cardDefaultBg - }; - - return cardItemTheme; -}; diff --git a/native-base-theme/components/CheckBox.js b/native-base-theme/components/CheckBox.js deleted file mode 100644 index 7a858c3..0000000 --- a/native-base-theme/components/CheckBox.js +++ /dev/null @@ -1,38 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const checkBoxTheme = { - '.checked': { - 'NativeBase.Icon': { - color: variables.checkboxTickColor - }, - 'NativeBase.IconNB': { - color: variables.checkboxTickColor - } - }, - 'NativeBase.Icon': { - color: 'transparent', - lineHeight: variables.CheckboxIconSize, - marginTop: variables.CheckboxIconMarginTop, - fontSize: variables.CheckboxFontSize - }, - 'NativeBase.IconNB': { - color: 'transparent', - lineHeight: variables.CheckboxIconSize, - marginTop: variables.CheckboxIconMarginTop, - fontSize: variables.CheckboxFontSize - }, - borderRadius: variables.CheckboxRadius, - overflow: 'hidden', - width: variables.checkboxSize, - height: variables.checkboxSize, - borderWidth: variables.CheckboxBorderWidth, - paddingLeft: variables.CheckboxPaddingLeft - 1, - paddingBottom: variables.CheckboxPaddingBottom, - left: 10 - }; - - return checkBoxTheme; -}; diff --git a/native-base-theme/components/Container.js b/native-base-theme/components/Container.js deleted file mode 100644 index cfd7e28..0000000 --- a/native-base-theme/components/Container.js +++ /dev/null @@ -1,17 +0,0 @@ -// @flow - -import { Platform, Dimensions } from 'react-native'; - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -const deviceHeight = Dimensions.get('window').height; -export default (variables /* : * */ = variable) => { - const theme = { - flex: 1, - height: Platform.OS === PLATFORM.IOS ? deviceHeight : deviceHeight - 20, - backgroundColor: variables.containerBgColor - }; - - return theme; -}; diff --git a/native-base-theme/components/Content.js b/native-base-theme/components/Content.js deleted file mode 100644 index 97bd81c..0000000 --- a/native-base-theme/components/Content.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow - -export default () => { - const contentTheme = { - flex: 1, - backgroundColor: 'transparent', - 'NativeBase.Segment': { - borderWidth: 0, - backgroundColor: 'transparent' - } - }; - - return contentTheme; -}; diff --git a/native-base-theme/components/Fab.js b/native-base-theme/components/Fab.js deleted file mode 100644 index 4d2b9cb..0000000 --- a/native-base-theme/components/Fab.js +++ /dev/null @@ -1,25 +0,0 @@ -// @flow - -export default () => { - const fabTheme = { - 'NativeBase.Button': { - alignItems: 'center', - padding: null, - justifyContent: 'center', - 'NativeBase.Icon': { - alignSelf: 'center', - fontSize: 20, - marginLeft: 0, - marginRight: 0 - }, - 'NativeBase.IconNB': { - alignSelf: 'center', - fontSize: 20, - marginLeft: 0, - marginRight: 0 - } - } - }; - - return fabTheme; -}; diff --git a/native-base-theme/components/Footer.js b/native-base-theme/components/Footer.js deleted file mode 100644 index 292b35c..0000000 --- a/native-base-theme/components/Footer.js +++ /dev/null @@ -1,119 +0,0 @@ -// @flow - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const platformStyle = variables.platformStyle; - const platform = variables.platform; - - const iconCommon = { - 'NativeBase.Icon': { - color: variables.tabBarActiveTextColor - } - }; - const iconNBCommon = { - 'NativeBase.IconNB': { - color: variables.tabBarActiveTextColor - } - }; - const textCommon = { - 'NativeBase.Text': { - color: variables.tabBarActiveTextColor - } - }; - const footerTheme = { - 'NativeBase.Left': { - 'NativeBase.Button': { - '.transparent': { - backgroundColor: 'transparent', - borderColor: null, - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null, - ...iconCommon, - ...iconNBCommon, - ...textCommon - }, - alignSelf: null, - ...iconCommon, - ...iconNBCommon - // ...textCommon - }, - flex: 1, - alignSelf: 'center', - alignItems: 'flex-start' - }, - 'NativeBase.Body': { - flex: 1, - alignItems: 'center', - alignSelf: 'center', - flexDirection: 'row', - 'NativeBase.Button': { - alignSelf: 'center', - '.transparent': { - backgroundColor: 'transparent', - borderColor: null, - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null, - ...iconCommon, - ...iconNBCommon, - ...textCommon - }, - '.full': { - height: variables.footerHeight, - paddingBottom: variables.footerPaddingBottom, - flex: 1 - }, - ...iconCommon, - ...iconNBCommon - // ...textCommon - } - }, - 'NativeBase.Right': { - 'NativeBase.Button': { - '.transparent': { - backgroundColor: 'transparent', - borderColor: null, - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null, - ...iconCommon, - ...iconNBCommon, - ...textCommon - }, - alignSelf: null, - ...iconCommon, - ...iconNBCommon - // ...textCommon - }, - flex: 1, - alignSelf: 'center', - alignItems: 'flex-end' - }, - backgroundColor: variables.footerDefaultBg, - flexDirection: 'row', - justifyContent: 'center', - borderTopWidth: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL - ? variables.borderWidth - : undefined, - borderColor: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL - ? '#cbcbcb' - : undefined, - height: variables.footerHeight, - paddingBottom: variables.footerPaddingBottom, - elevation: 3, - left: 0, - right: 0 - }; - return footerTheme; -}; diff --git a/native-base-theme/components/FooterTab.js b/native-base-theme/components/FooterTab.js deleted file mode 100644 index abaa023..0000000 --- a/native-base-theme/components/FooterTab.js +++ /dev/null @@ -1,79 +0,0 @@ -// @flow - -import { Platform } from 'react-native'; - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const platform = variables.platform; - - const footerTabTheme = { - 'NativeBase.Button': { - '.active': { - 'NativeBase.Text': { - color: variables.tabBarActiveTextColor, - fontSize: variables.tabBarTextSize, - lineHeight: 16 - }, - 'NativeBase.Icon': { - color: variables.tabBarActiveTextColor - }, - 'NativeBase.IconNB': { - color: variables.tabBarActiveTextColor - }, - backgroundColor: variables.tabActiveBgColor - }, - flexDirection: null, - backgroundColor: 'transparent', - borderColor: null, - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null, - alignSelf: 'center', - flex: 1, - height: variables.footerHeight, - justifyContent: 'center', - '.badge': { - 'NativeBase.Badge': { - 'NativeBase.Text': { - fontSize: 11, - fontWeight: platform === PLATFORM.IOS ? '600' : undefined, - lineHeight: 14 - }, - top: -3, - alignSelf: 'center', - left: 10, - zIndex: 99, - height: 18, - padding: 1.7, - paddingHorizontal: 3 - }, - 'NativeBase.Icon': { - marginTop: -18 - } - }, - 'NativeBase.Icon': { - color: variables.tabBarTextColor - }, - 'NativeBase.IconNB': { - color: variables.tabBarTextColor - }, - 'NativeBase.Text': { - color: variables.tabBarTextColor, - fontSize: variables.tabBarTextSize, - lineHeight: 16 - } - }, - backgroundColor: - Platform.OS === PLATFORM.ANDROID ? variables.footerDefaultBg : undefined, - flexDirection: 'row', - justifyContent: 'space-between', - flex: 1, - alignSelf: 'stretch' - }; - - return footerTabTheme; -}; diff --git a/native-base-theme/components/Form.js b/native-base-theme/components/Form.js deleted file mode 100644 index 3040f30..0000000 --- a/native-base-theme/components/Form.js +++ /dev/null @@ -1,86 +0,0 @@ -// @flow - -export default () => { - const theme = { - 'NativeBase.Item': { - '.fixedLabel': { - 'NativeBase.Label': { - paddingLeft: null - }, - marginLeft: 15 - }, - '.inlineLabel': { - 'NativeBase.Label': { - paddingLeft: null - }, - marginLeft: 15 - }, - '.placeholderLabel': { - 'NativeBase.Input': {} - }, - '.stackedLabel': { - 'NativeBase.Label': { - top: 5, - paddingLeft: null - }, - 'NativeBase.Input': { - paddingLeft: null, - marginLeft: null - }, - 'NativeBase.Icon': { - marginTop: 36 - }, - marginLeft: 15 - }, - '.floatingLabel': { - 'NativeBase.Input': { - paddingLeft: null, - top: 10, - marginLeft: null - }, - 'NativeBase.Label': { - left: 0, - top: 6 - }, - 'NativeBase.Icon': { - top: 6 - }, - marginTop: 15, - marginLeft: 15 - }, - '.regular': { - 'NativeBase.Label': { - left: 0 - }, - marginLeft: 0 - }, - '.rounded': { - 'NativeBase.Label': { - left: 0 - }, - marginLeft: 0 - }, - '.underline': { - 'NativeBase.Label': { - left: 0, - top: 0, - position: 'relative' - }, - 'NativeBase.Input': { - left: -15 - }, - marginLeft: 15 - }, - '.last': { - marginLeft: 0, - paddingLeft: 15 - }, - 'NativeBase.Label': { - paddingRight: 5 - }, - marginLeft: 15 - } - }; - - return theme; -}; diff --git a/native-base-theme/components/H1.js b/native-base-theme/components/H1.js deleted file mode 100644 index 20aa8db..0000000 --- a/native-base-theme/components/H1.js +++ /dev/null @@ -1,13 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const h1Theme = { - color: variables.textColor, - fontSize: variables.fontSizeH1, - lineHeight: variables.lineHeightH1 - }; - - return h1Theme; -}; diff --git a/native-base-theme/components/H2.js b/native-base-theme/components/H2.js deleted file mode 100644 index cad4057..0000000 --- a/native-base-theme/components/H2.js +++ /dev/null @@ -1,13 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const h2Theme = { - color: variables.textColor, - fontSize: variables.fontSizeH2, - lineHeight: variables.lineHeightH2 - }; - - return h2Theme; -}; diff --git a/native-base-theme/components/H3.js b/native-base-theme/components/H3.js deleted file mode 100644 index 19917f5..0000000 --- a/native-base-theme/components/H3.js +++ /dev/null @@ -1,13 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const h3Theme = { - color: variables.textColor, - fontSize: variables.fontSizeH3, - lineHeight: variables.lineHeightH3 - }; - - return h3Theme; -}; diff --git a/native-base-theme/components/Header.js b/native-base-theme/components/Header.js deleted file mode 100644 index 944f6c3..0000000 --- a/native-base-theme/components/Header.js +++ /dev/null @@ -1,419 +0,0 @@ -// @flow - -import { PixelRatio, StatusBar } from 'react-native'; - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const platformStyle = variables.platformStyle; - const platform = variables.platform; - - const headerTheme = { - '.span': { - height: 128, - 'NativeBase.Left': { - alignSelf: 'flex-start' - }, - 'NativeBase.Body': { - alignSelf: 'flex-end', - alignItems: 'flex-start', - justifyContent: 'center', - paddingBottom: 26 - }, - 'NativeBase.Right': { - alignSelf: 'flex-start' - } - }, - '.hasSubtitle': { - 'NativeBase.Body': { - 'NativeBase.Title': { - fontSize: variables.titleFontSize - 2, - fontFamily: variables.titleFontfamily, - textAlign: 'center', - fontWeight: '500', - paddingBottom: 3 - }, - 'NativeBase.Subtitle': { - fontSize: variables.subTitleFontSize, - fontFamily: variables.titleFontfamily, - color: variables.subtitleColor, - textAlign: 'center' - } - } - }, - '.transparent': { - backgroundColor: 'transparent', - borderBottomColor: 'transparent', - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null, - paddingTop: - platform === PLATFORM.ANDROID ? StatusBar.currentHeight : undefined, - height: - platform === PLATFORM.ANDROID - ? variables.toolbarHeight + StatusBar.currentHeight - : variables.toolbarHeight - }, - '.noShadow': { - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null - }, - '.hasTabs': { - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null, - borderBottomWidth: null - }, - '.hasSegment': { - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null, - borderBottomWidth: null, - 'NativeBase.Left': { - flex: 0.3 - }, - 'NativeBase.Right': { - flex: 0.3 - }, - 'NativeBase.Body': { - flex: 1, - 'NativeBase.Segment': { - marginRight: 0, - alignSelf: 'center', - 'NativeBase.Button': { - paddingLeft: 0, - paddingRight: 0 - } - } - } - }, - '.noLeft': { - 'NativeBase.Left': { - width: platform === PLATFORM.IOS ? undefined : 0, - flex: platform === PLATFORM.IOS ? 1 : 0 - }, - 'NativeBase.Body': { - 'NativeBase.Title': { - paddingLeft: platform === PLATFORM.IOS ? undefined : 10 - }, - 'NativeBase.Subtitle': { - paddingLeft: platform === PLATFORM.IOS ? undefined : 10 - } - } - }, - 'NativeBase.Button': { - justifyContent: 'center', - alignSelf: 'center', - alignItems: 'center', - '.transparent': { - 'NativeBase.Text': { - color: variables.toolbarBtnTextColor, - fontWeight: '600' - }, - 'NativeBase.Icon': { - color: variables.toolbarBtnColor - }, - 'NativeBase.IconNB': { - color: variables.toolbarBtnColor - }, - paddingHorizontal: variables.buttonPadding - }, - paddingHorizontal: 15 - }, - '.searchBar': { - 'NativeBase.Item': { - 'NativeBase.Icon': { - backgroundColor: 'transparent', - color: variables.dropdownLinkColor, - fontSize: variables.toolbarSearchIconSize, - alignItems: 'center', - marginTop: 2, - paddingRight: 10, - paddingLeft: 10 - }, - 'NativeBase.IconNB': { - backgroundColor: 'transparent', - color: null, - alignSelf: 'center' - }, - 'NativeBase.Input': { - alignSelf: 'center', - lineHeight: null, - height: variables.searchBarInputHeight - }, - alignSelf: 'center', - alignItems: 'center', - justifyContent: 'flex-start', - flex: 1, - height: variables.searchBarHeight, - borderColor: 'transparent', - backgroundColor: variables.toolbarInputColor - }, - 'NativeBase.Button': { - '.transparent': { - 'NativeBase.Text': { - fontWeight: '500' - }, - paddingHorizontal: null, - paddingLeft: platform === PLATFORM.IOS ? 10 : null - }, - paddingHorizontal: platform === PLATFORM.IOS ? undefined : null, - width: platform === PLATFORM.IOS ? undefined : 0, - height: platform === PLATFORM.IOS ? undefined : 0 - } - }, - '.rounded': { - 'NativeBase.Item': { - borderRadius: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL - ? 25 - : 3 - } - }, - 'NativeBase.Left': { - 'NativeBase.Button': { - '.hasText': { - marginLeft: -10, - height: 30, - 'NativeBase.Icon': { - color: variables.toolbarBtnColor, - fontSize: variables.iconHeaderSize, - marginTop: 2, - marginRight: 5, - marginLeft: 2 - }, - 'NativeBase.Text': { - color: variables.toolbarBtnTextColor, - fontSize: platform === PLATFORM.IOS ? 17 : 0, - marginLeft: 7, - lineHeight: 19.5 - }, - 'NativeBase.IconNB': { - color: variables.toolbarBtnColor, - fontSize: variables.iconHeaderSize, - marginTop: 2, - marginRight: 5, - marginLeft: 2 - } - }, - '.transparent': { - marginLeft: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL - ? -3 - : 0, - 'NativeBase.Icon': { - color: variables.toolbarBtnColor, - fontSize: - platform === PLATFORM.IOS && - variables.platformStyle !== PLATFORM.MATERIAL - ? variables.iconHeaderSize + 1 - : variables.iconHeaderSize, - marginTop: 0, - marginRight: 2, - marginLeft: 1, - paddingTop: 1 - }, - 'NativeBase.IconNB': { - color: variables.toolbarBtnColor, - fontSize: - platform === PLATFORM.IOS && - variables.platformStyle !== PLATFORM.MATERIAL - ? variables.iconHeaderSize + 1 - : variables.iconHeaderSize - 2, - marginTop: 0, - marginRight: 2, - marginLeft: 1, - paddingTop: 1 - }, - 'NativeBase.Text': { - color: variables.toolbarBtnTextColor, - fontSize: platform === PLATFORM.IOS ? 17 : 0, - top: platform === PLATFORM.IOS ? 1 : -1.5, - paddingLeft: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL - ? 2 - : 5, - paddingRight: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL - ? undefined - : 10 - }, - backgroundColor: 'transparent', - borderColor: null, - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null - }, - 'NativeBase.Icon': { - color: variables.toolbarBtnColor - }, - 'NativeBase.IconNB': { - color: variables.toolbarBtnColor - }, - alignSelf: null, - paddingRight: variables.buttonPadding, - paddingLeft: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL - ? 4 - : 8 - }, - flex: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL - ? 1 - : 0.4, - alignSelf: 'center', - alignItems: 'flex-start' - }, - 'NativeBase.Body': { - flex: 1, - alignItems: - platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL - ? 'center' - : 'flex-start', - alignSelf: 'center', - 'NativeBase.Segment': { - borderWidth: 0, - alignSelf: 'flex-end', - marginRight: platform === PLATFORM.IOS ? -40 : -55 - }, - 'NativeBase.Button': { - alignSelf: 'center', - '.transparent': { - backgroundColor: 'transparent' - }, - 'NativeBase.Icon': { - color: variables.toolbarBtnColor - }, - 'NativeBase.IconNB': { - color: variables.toolbarBtnColor - }, - 'NativeBase.Text': { - color: variables.inverseTextColor, - backgroundColor: 'transparent' - } - } - }, - 'NativeBase.Right': { - 'NativeBase.Button': { - '.hasText': { - height: 30, - 'NativeBase.Icon': { - color: variables.toolbarBtnColor, - fontSize: variables.iconHeaderSize - 2, - marginTop: 2, - marginRight: 2, - marginLeft: 5 - }, - 'NativeBase.Text': { - color: variables.toolbarBtnTextColor, - fontSize: platform === PLATFORM.IOS ? 17 : 14, - lineHeight: 19.5 - }, - 'NativeBase.IconNB': { - color: variables.toolbarBtnColor, - fontSize: variables.iconHeaderSize - 2, - marginTop: 2, - marginRight: 2, - marginLeft: 5 - } - }, - '.transparent': { - marginRight: platform === PLATFORM.IOS ? -9 : -5, - paddingLeft: 15, - paddingRight: 12, - paddingHorizontal: 15, - borderRadius: 50, - 'NativeBase.Icon': { - color: variables.toolbarBtnColor, - fontSize: variables.iconHeaderSize - 2, - marginTop: 0, - marginLeft: 2, - marginRight: 0 - // paddingTop: 0 - }, - 'NativeBase.IconNB': { - color: variables.toolbarBtnColor, - fontSize: variables.iconHeaderSize - 2, - marginTop: 0, - marginLeft: 2, - marginRight: 0 - // paddingTop: 0 - }, - 'NativeBase.Text': { - color: variables.toolbarBtnTextColor, - fontSize: platform === PLATFORM.IOS ? 17 : 14, - top: platform === PLATFORM.IOS ? 1 : -1.5, - paddingRight: - platform === PLATFORM.IOS && - variables.platformStyle !== PLATFORM.MATERIAL - ? 0 - : undefined - }, - backgroundColor: 'transparent', - borderColor: null, - elevation: 0, - shadowColor: null, - shadowOffset: null, - shadowRadius: null, - shadowOpacity: null - }, - 'NativeBase.Icon': { - color: variables.toolbarBtnColor - }, - 'NativeBase.IconNB': { - color: variables.toolbarBtnColor - }, - alignSelf: null, - paddingHorizontal: variables.buttonPadding - }, - flex: 1, - alignSelf: 'center', - alignItems: 'flex-end', - flexDirection: 'row', - justifyContent: 'flex-end' - }, - backgroundColor: variables.toolbarDefaultBg, - flexDirection: 'row', - // paddingHorizontal: 10, - paddingLeft: - platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL - ? 6 - : 10, - paddingRight: 10, - justifyContent: 'center', - paddingTop: platform === PLATFORM.IOS ? 18 : 0, - borderBottomWidth: - platform === PLATFORM.IOS - ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) - : 0, - borderBottomColor: variables.toolbarDefaultBorder, - height: - variables.platform === PLATFORM.IOS && - variables.platformStyle === PLATFORM.MATERIAL - ? variables.toolbarHeight + 10 - : variables.toolbarHeight, - elevation: 3, - shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined, - shadowOffset: - platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined, - shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined, - shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined, - top: 0, - left: 0, - right: 0 - }; - - return headerTheme; -}; diff --git a/native-base-theme/components/Icon.js b/native-base-theme/components/Icon.js deleted file mode 100644 index 5cff95d..0000000 --- a/native-base-theme/components/Icon.js +++ /dev/null @@ -1,12 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const iconTheme = { - fontSize: variables.iconFontSize, - color: variable.textColor - }; - - return iconTheme; -}; diff --git a/native-base-theme/components/Input.js b/native-base-theme/components/Input.js deleted file mode 100644 index d0dd6af..0000000 --- a/native-base-theme/components/Input.js +++ /dev/null @@ -1,19 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const inputTheme = { - '.multiline': { - height: null - }, - height: variables.inputHeightBase, - color: variables.inputColor, - paddingLeft: 5, - paddingRight: 5, - flex: 1, - fontSize: variables.inputFontSize - }; - - return inputTheme; -}; diff --git a/native-base-theme/components/InputGroup.js b/native-base-theme/components/InputGroup.js deleted file mode 100644 index 7988ca5..0000000 --- a/native-base-theme/components/InputGroup.js +++ /dev/null @@ -1,132 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const inputGroupTheme = { - 'NativeBase.Icon': { - fontSize: 24, - color: variables.sTabBarActiveTextColor, - paddingHorizontal: 5 - }, - 'NativeBase.IconNB': { - fontSize: 24, - color: variables.sTabBarActiveTextColor, - paddingHorizontal: 5 - }, - 'NativeBase.Input': { - height: variables.inputHeightBase, - color: variables.inputColor, - paddingLeft: 5, - paddingRight: 5, - flex: 1, - fontSize: variables.inputFontSize, - lineHeight: variables.inputLineHeight - }, - '.underline': { - '.success': { - borderColor: variables.inputSuccessBorderColor - }, - '.error': { - borderColor: variables.inputErrorBorderColor - }, - paddingLeft: 5, - borderWidth: variables.borderWidth, - borderTopWidth: 0, - borderRightWidth: 0, - borderLeftWidth: 0, - borderColor: variables.inputBorderColor - }, - '.regular': { - '.success': { - borderColor: variables.inputSuccessBorderColor - }, - '.error': { - borderColor: variables.inputErrorBorderColor - }, - paddingLeft: 5, - borderWidth: variables.borderWidth, - borderColor: variables.inputBorderColor - }, - '.rounded': { - '.success': { - borderColor: variables.inputSuccessBorderColor - }, - '.error': { - borderColor: variables.inputErrorBorderColor - }, - paddingLeft: 5, - borderWidth: variables.borderWidth, - borderRadius: variables.inputGroupRoundedBorderRadius, - borderColor: variables.inputBorderColor - }, - - '.success': { - 'NativeBase.Icon': { - color: variables.inputSuccessBorderColor - }, - 'NativeBase.IconNB': { - color: variables.inputSuccessBorderColor - }, - '.rounded': { - borderRadius: 30, - borderColor: variables.inputSuccessBorderColor - }, - '.regular': { - borderColor: variables.inputSuccessBorderColor - }, - '.underline': { - borderWidth: variables.borderWidth, - borderTopWidth: 0, - borderRightWidth: 0, - borderLeftWidth: 0, - borderColor: variables.inputSuccessBorderColor - }, - borderColor: variables.inputSuccessBorderColor - }, - - '.error': { - 'NativeBase.Icon': { - color: variables.inputErrorBorderColor - }, - 'NativeBase.IconNB': { - color: variables.inputErrorBorderColor - }, - '.rounded': { - borderRadius: 30, - borderColor: variables.inputErrorBorderColor - }, - '.regular': { - borderColor: variables.inputErrorBorderColor - }, - '.underline': { - borderWidth: variables.borderWidth, - borderTopWidth: 0, - borderRightWidth: 0, - borderLeftWidth: 0, - borderColor: variables.inputErrorBorderColor - }, - borderColor: variables.inputErrorBorderColor - }, - '.disabled': { - 'NativeBase.Icon': { - color: '#384850' - }, - 'NativeBase.IconNB': { - color: '#384850' - } - }, - - paddingLeft: 5, - borderWidth: variables.borderWidth, - borderTopWidth: 0, - borderRightWidth: 0, - borderLeftWidth: 0, - borderColor: variables.inputBorderColor, - backgroundColor: 'transparent', - flexDirection: 'row', - alignItems: 'center' - }; - - return inputGroupTheme; -}; diff --git a/native-base-theme/components/Item.js b/native-base-theme/components/Item.js deleted file mode 100644 index 2305604..0000000 --- a/native-base-theme/components/Item.js +++ /dev/null @@ -1,241 +0,0 @@ -// @flow - -import { Platform } from 'react-native'; - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const itemTheme = { - '.floatingLabel': { - 'NativeBase.Input': { - height: 50, - top: 8, - paddingTop: 3, - paddingBottom: 7, - '.multiline': { - minHeight: variables.inputHeightBase, - paddingTop: Platform.OS === PLATFORM.IOS ? 10 : 3, - paddingBottom: Platform.OS === PLATFORM.IOS ? 14 : 10 - } - }, - 'NativeBase.Label': { - paddingTop: 5 - }, - 'NativeBase.Icon': { - top: 6, - paddingTop: 8 - }, - 'NativeBase.IconNB': { - top: 6, - paddingTop: 8 - } - }, - '.fixedLabel': { - 'NativeBase.Label': { - position: null, - top: null, - left: null, - right: null, - flex: 1, - height: null, - width: null, - fontSize: variables.inputFontSize - }, - 'NativeBase.Input': { - flex: 2, - fontSize: variables.inputFontSize - } - }, - '.stackedLabel': { - 'NativeBase.Label': { - position: null, - top: null, - left: null, - right: null, - paddingTop: 5, - alignSelf: 'flex-start', - fontSize: variables.inputFontSize - 2 - }, - 'NativeBase.Icon': { - marginTop: 36 - }, - 'NativeBase.Input': { - alignSelf: Platform.OS === PLATFORM.IOS ? 'stretch' : 'flex-start', - flex: 1, - width: Platform.OS === PLATFORM.IOS ? null : variables.deviceWidth - 25, - fontSize: variables.inputFontSize, - lineHeight: variables.inputLineHeight - 6, - '.secureTextEntry': { - fontSize: variables.inputFontSize - }, - '.multiline': { - paddingTop: Platform.OS === PLATFORM.IOS ? 9 : undefined, - paddingBottom: Platform.OS === PLATFORM.IOS ? 9 : undefined - } - }, - flexDirection: null, - minHeight: variables.inputHeightBase + 15 - }, - '.inlineLabel': { - 'NativeBase.Label': { - position: null, - top: null, - left: null, - right: null, - paddingRight: 20, - height: null, - width: null, - fontSize: variables.inputFontSize - }, - 'NativeBase.Input': { - paddingLeft: 5, - fontSize: variables.inputFontSize - }, - flexDirection: 'row' - }, - 'NativeBase.Label': { - fontSize: variables.inputFontSize, - color: variables.inputColorPlaceholder, - paddingRight: 5 - }, - 'NativeBase.Icon': { - fontSize: 24, - paddingRight: 8 - }, - 'NativeBase.IconNB': { - fontSize: 24, - paddingRight: 8 - }, - 'NativeBase.Input': { - '.multiline': { - height: null - }, - height: variables.inputHeightBase, - color: variables.inputColor, - flex: 1, - top: Platform.OS === PLATFORM.IOS ? 1.5 : undefined, - fontSize: variables.inputFontSize - }, - '.underline': { - 'NativeBase.Input': { - paddingLeft: 15 - }, - '.success': { - borderColor: variables.inputSuccessBorderColor - }, - '.error': { - borderColor: variables.inputErrorBorderColor - }, - borderWidth: variables.borderWidth * 2, - borderTopWidth: 0, - borderRightWidth: 0, - borderLeftWidth: 0, - borderColor: variables.inputBorderColor - }, - '.regular': { - 'NativeBase.Input': { - paddingLeft: 8 - }, - 'NativeBase.Icon': { - paddingLeft: 10 - }, - '.success': { - borderColor: variables.inputSuccessBorderColor - }, - '.error': { - borderColor: variables.inputErrorBorderColor - }, - borderWidth: variables.borderWidth * 2, - borderColor: variables.inputBorderColor - }, - '.rounded': { - 'NativeBase.Input': { - paddingLeft: 8 - }, - 'NativeBase.Icon': { - paddingLeft: 10 - }, - '.success': { - borderColor: variables.inputSuccessBorderColor - }, - '.error': { - borderColor: variables.inputErrorBorderColor - }, - borderWidth: variables.borderWidth * 2, - borderRadius: 30, - borderColor: variables.inputBorderColor - }, - - '.success': { - 'NativeBase.Icon': { - color: variables.inputSuccessBorderColor - }, - 'NativeBase.IconNB': { - color: variables.inputSuccessBorderColor - }, - '.rounded': { - borderRadius: 30, - borderColor: variables.inputSuccessBorderColor - }, - '.regular': { - borderColor: variables.inputSuccessBorderColor - }, - '.underline': { - borderWidth: variables.borderWidth * 2, - borderTopWidth: 0, - borderRightWidth: 0, - borderLeftWidth: 0, - borderColor: variables.inputSuccessBorderColor - }, - borderColor: variables.inputSuccessBorderColor - }, - - '.error': { - 'NativeBase.Icon': { - color: variables.inputErrorBorderColor - }, - 'NativeBase.IconNB': { - color: variables.inputErrorBorderColor - }, - '.rounded': { - borderRadius: 30, - borderColor: variables.inputErrorBorderColor - }, - '.regular': { - borderColor: variables.inputErrorBorderColor - }, - '.underline': { - borderWidth: variables.borderWidth * 2, - borderTopWidth: 0, - borderRightWidth: 0, - borderLeftWidth: 0, - borderColor: variables.inputErrorBorderColor - }, - borderColor: variables.inputErrorBorderColor - }, - '.disabled': { - 'NativeBase.Icon': { - color: '#384850' - }, - 'NativeBase.IconNB': { - color: '#384850' - } - }, - '.picker': { - marginLeft: 0 - }, - - borderWidth: variables.borderWidth * 2, - borderTopWidth: 0, - borderRightWidth: 0, - borderLeftWidth: 0, - borderColor: variables.inputBorderColor, - backgroundColor: 'transparent', - flexDirection: 'row', - alignItems: 'center', - marginLeft: 2 - }; - - return itemTheme; -}; diff --git a/native-base-theme/components/Label.js b/native-base-theme/components/Label.js deleted file mode 100644 index 118f648..0000000 --- a/native-base-theme/components/Label.js +++ /dev/null @@ -1,12 +0,0 @@ -// @flow - -export default () => { - const labelTheme = { - '.focused': { - width: 0 - }, - fontSize: 17 - }; - - return labelTheme; -}; diff --git a/native-base-theme/components/Left.js b/native-base-theme/components/Left.js deleted file mode 100644 index e01d693..0000000 --- a/native-base-theme/components/Left.js +++ /dev/null @@ -1,11 +0,0 @@ -// @flow - -export default () => { - const leftTheme = { - flex: 1, - alignSelf: 'center', - alignItems: 'flex-start' - }; - - return leftTheme; -}; diff --git a/native-base-theme/components/ListItem.js b/native-base-theme/components/ListItem.js deleted file mode 100644 index c41ec5d..0000000 --- a/native-base-theme/components/ListItem.js +++ /dev/null @@ -1,446 +0,0 @@ -// @flow - -import { Platform, PixelRatio } from 'react-native'; - -import pickerTheme from './Picker'; -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const platform = variables.platform; - const selectedStyle = { - 'NativeBase.Text': { - color: variables.listItemSelected - }, - 'NativeBase.Icon': { - color: variables.listItemSelected - } - }; - - const listItemTheme = { - 'NativeBase.InputGroup': { - 'NativeBase.Icon': { - paddingRight: 5 - }, - 'NativeBase.IconNB': { - paddingRight: 5 - }, - 'NativeBase.Input': { - paddingHorizontal: 5 - }, - flex: 1, - borderWidth: null, - margin: -10, - borderBottomColor: 'transparent' - }, - '.searchBar': { - 'NativeBase.Item': { - 'NativeBase.Icon': { - backgroundColor: 'transparent', - color: variables.dropdownLinkColor, - fontSize: - platform === PLATFORM.IOS - ? variables.iconFontSize - 10 - : variables.iconFontSize - 5, - alignItems: 'center', - marginTop: 2, - paddingRight: 8 - }, - 'NativeBase.IconNB': { - backgroundColor: 'transparent', - color: null, - alignSelf: 'center' - }, - 'NativeBase.Input': { - alignSelf: 'center' - }, - alignSelf: 'center', - alignItems: 'center', - justifyContent: 'flex-start', - flex: 1, - height: platform === PLATFORM.IOS ? 30 : 40, - borderColor: 'transparent', - backgroundColor: '#fff', - borderRadius: 5 - }, - 'NativeBase.Button': { - '.transparent': { - 'NativeBase.Text': { - fontWeight: '500' - }, - paddingHorizontal: null, - paddingLeft: platform === PLATFORM.IOS ? 10 : null - }, - paddingHorizontal: platform === PLATFORM.IOS ? undefined : null, - width: platform === PLATFORM.IOS ? undefined : 0, - height: platform === PLATFORM.IOS ? undefined : 0 - }, - backgroundColor: variables.toolbarInputColor, - padding: 10, - marginLeft: null - }, - 'NativeBase.CheckBox': { - marginLeft: -10, - marginRight: 10 - }, - '.first': { - '.itemHeader': { - paddingTop: variables.listItemPadding + 3 - } - }, - '.itemHeader': { - '.first': { - paddingTop: variables.listItemPadding + 3 - }, - borderBottomWidth: - platform === PLATFORM.IOS ? variables.borderWidth : null, - marginLeft: null, - padding: variables.listItemPadding, - paddingLeft: variables.listItemPadding + 5, - paddingTop: - platform === PLATFORM.IOS ? variables.listItemPadding + 25 : undefined, - paddingBottom: - platform === PLATFORM.ANDROID ? variables.listItemPadding + 20 : undefined, - flexDirection: 'row', - borderColor: variables.listBorderColor, - 'NativeBase.Text': { - fontSize: 14, - color: platform === PLATFORM.IOS ? undefined : variables.listNoteColor - } - }, - '.itemDivider': { - borderBottomWidth: null, - marginLeft: null, - padding: variables.listItemPadding, - paddingLeft: variables.listItemPadding + 5, - backgroundColor: variables.listDividerBg, - flexDirection: 'row', - borderColor: variables.listBorderColor - }, - '.selected': { - 'NativeBase.Left': { - ...selectedStyle - }, - 'NativeBase.Body': { - ...selectedStyle - }, - 'NativeBase.Right': { - ...selectedStyle - }, - ...selectedStyle - }, - 'NativeBase.Left': { - 'NativeBase.Body': { - 'NativeBase.Text': { - '.note': { - color: variables.listNoteColor, - fontWeight: '200' - }, - fontWeight: '600' - }, - marginLeft: 10, - alignItems: null, - alignSelf: null - }, - 'NativeBase.Icon': { - width: variables.iconFontSize - 10, - fontSize: variables.iconFontSize - 10 - }, - 'NativeBase.IconNB': { - width: variables.iconFontSize - 10, - fontSize: variables.iconFontSize - 10 - }, - 'NativeBase.Text': { - alignSelf: 'center' - }, - flexDirection: 'row' - }, - 'NativeBase.Body': { - 'NativeBase.Text': { - marginHorizontal: variables.listItemPadding, - '.note': { - color: variables.listNoteColor, - fontWeight: '200' - } - }, - alignSelf: null, - alignItems: null - }, - 'NativeBase.Right': { - 'NativeBase.Badge': { - alignSelf: null - }, - 'NativeBase.PickerNB': { - 'NativeBase.Button': { - marginRight: -15, - 'NativeBase.Text': { - color: variables.topTabBarActiveTextColor - } - } - }, - 'NativeBase.Button': { - alignSelf: null, - '.transparent': { - 'NativeBase.Text': { - color: variables.topTabBarActiveTextColor - } - } - }, - 'NativeBase.Icon': { - alignSelf: null, - fontSize: variables.iconFontSize - 8, - color: '#c9c8cd' - }, - 'NativeBase.IconNB': { - alignSelf: null, - fontSize: variables.iconFontSize - 8, - color: '#c9c8cd' - }, - 'NativeBase.Text': { - '.note': { - color: variables.listNoteColor, - fontWeight: '200' - }, - alignSelf: null - }, - 'NativeBase.Thumbnail': { - alignSelf: null - }, - 'NativeBase.Image': { - alignSelf: null - }, - 'NativeBase.Radio': { - alignSelf: null - }, - 'NativeBase.Checkbox': { - alignSelf: null - }, - 'NativeBase.Switch': { - alignSelf: null - }, - padding: null, - flex: 0.28 - }, - 'NativeBase.Text': { - '.note': { - color: variables.listNoteColor, - fontWeight: '200' - }, - alignSelf: 'center' - }, - '.last': { - marginLeft: -(variables.listItemPadding + 5), - paddingLeft: (variables.listItemPadding + 5) * 2, - top: 1 - }, - '.avatar': { - 'NativeBase.Left': { - flex: 0, - alignSelf: 'flex-start', - paddingTop: 14 - }, - 'NativeBase.Body': { - 'NativeBase.Text': { - marginLeft: null - }, - flex: 1, - paddingVertical: variables.listItemPadding, - borderBottomWidth: variables.borderWidth, - borderColor: variables.listBorderColor, - marginLeft: variables.listItemPadding + 5 - }, - 'NativeBase.Right': { - 'NativeBase.Text': { - '.note': { - fontSize: variables.noteFontSize - 2 - } - }, - flex: 0, - paddingRight: variables.listItemPadding + 5, - alignSelf: 'stretch', - paddingVertical: variables.listItemPadding, - borderBottomWidth: variables.borderWidth, - borderColor: variables.listBorderColor - }, - '.noBorder': { - 'NativeBase.Body': { - borderBottomWidth: null - }, - 'NativeBase.Right': { - borderBottomWidth: null - } - }, - borderBottomWidth: null, - paddingVertical: null, - paddingRight: null - }, - '.thumbnail': { - 'NativeBase.Left': { - flex: 0 - }, - 'NativeBase.Body': { - 'NativeBase.Text': { - marginLeft: null - }, - flex: 1, - paddingVertical: variables.listItemPadding + 8, - borderBottomWidth: variables.borderWidth, - borderColor: variables.listBorderColor, - marginLeft: variables.listItemPadding + 5 - }, - 'NativeBase.Right': { - 'NativeBase.Button': { - '.transparent': { - 'NativeBase.Text': { - fontSize: variables.listNoteSize, - color: variables.sTabBarActiveTextColor - } - }, - height: null - }, - flex: 0, - justifyContent: 'center', - alignSelf: 'stretch', - paddingRight: variables.listItemPadding + 5, - paddingVertical: variables.listItemPadding + 5, - borderBottomWidth: variables.borderWidth, - borderColor: variables.listBorderColor - }, - '.noBorder': { - 'NativeBase.Body': { - borderBottomWidth: null - }, - 'NativeBase.Right': { - borderBottomWidth: null - } - }, - borderBottomWidth: null, - paddingVertical: null, - paddingRight: null - }, - '.icon': { - '.last': { - 'NativeBase.Body': { - borderBottomWidth: null - }, - 'NativeBase.Right': { - borderBottomWidth: null - }, - borderBottomWidth: variables.borderWidth, - borderColor: variables.listBorderColor - }, - 'NativeBase.Left': { - 'NativeBase.Button': { - 'NativeBase.IconNB': { - marginHorizontal: null, - fontSize: variables.iconFontSize - 5 - }, - 'NativeBase.Icon': { - marginHorizontal: null, - fontSize: variables.iconFontSize - 8 - }, - alignSelf: 'center', - height: 29, - width: 29, - borderRadius: 6, - paddingVertical: null, - paddingHorizontal: null, - alignItems: 'center', - justifyContent: 'center' - }, - 'NativeBase.Icon': { - width: variables.iconFontSize - 5, - fontSize: variables.iconFontSize - 2 - }, - 'NativeBase.IconNB': { - width: variables.iconFontSize - 5, - fontSize: variables.iconFontSize - 2 - }, - paddingRight: variables.listItemPadding + 5, - flex: 0, - height: 44, - justifyContent: 'center', - alignItems: 'center' - }, - 'NativeBase.Body': { - 'NativeBase.Text': { - marginLeft: null, - fontSize: 17 - }, - flex: 1, - height: 44, - justifyContent: 'center', - borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), - borderColor: variables.listBorderColor - }, - 'NativeBase.Right': { - 'NativeBase.Text': { - textAlign: 'center', - color: '#8F8E95', - fontSize: 17 - }, - 'NativeBase.IconNB': { - color: '#C8C7CC', - fontSize: variables.iconFontSize - 10, - alignSelf: 'center', - paddingLeft: 10, - paddingTop: 3 - }, - 'NativeBase.Icon': { - color: '#C8C7CC', - fontSize: variables.iconFontSize - 10, - alignSelf: 'center', - paddingLeft: 10, - paddingTop: 3 - }, - 'NativeBase.Switch': { - marginRight: Platform.OS === PLATFORM.IOS ? undefined : -5, - alignSelf: null - }, - 'NativeBase.PickerNB': { - ...pickerTheme() - }, - flexDirection: 'row', - alignItems: 'center', - flex: 0, - alignSelf: 'stretch', - height: 44, - justifyContent: 'flex-end', - borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), - borderColor: variables.listBorderColor, - paddingRight: variables.listItemPadding + 5 - }, - '.noBorder': { - 'NativeBase.Body': { - borderBottomWidth: null - }, - 'NativeBase.Right': { - borderBottomWidth: null - } - }, - borderBottomWidth: null, - paddingVertical: null, - paddingRight: null, - height: 44, - justifyContent: 'center' - }, - '.noBorder': { - borderBottomWidth: null - }, - '.noIndent': { - marginLeft: null, - padding: variables.listItemPadding, - paddingLeft: variables.listItemPadding + 6 - }, - alignItems: 'center', - flexDirection: 'row', - paddingRight: variables.listItemPadding + 6, - paddingVertical: variables.listItemPadding + 3, - marginLeft: variables.listItemPadding + 6, - borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1), - backgroundColor: variables.listBg, - borderColor: variables.listBorderColor - }; - - return listItemTheme; -}; diff --git a/native-base-theme/components/Picker.android.js b/native-base-theme/components/Picker.android.js deleted file mode 100644 index 300a743..0000000 --- a/native-base-theme/components/Picker.android.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow - -export default () => { - const pickerTheme = { - '.note': { - color: '#8F8E95' - }, - // width: 90, - marginRight: -4, - flexGrow: 1 - }; - - return pickerTheme; -}; diff --git a/native-base-theme/components/Picker.ios.js b/native-base-theme/components/Picker.ios.js deleted file mode 100644 index b81b056..0000000 --- a/native-base-theme/components/Picker.ios.js +++ /dev/null @@ -1,7 +0,0 @@ -// @flow - -export default () => { - const pickerTheme = {}; - - return pickerTheme; -}; diff --git a/native-base-theme/components/Picker.js b/native-base-theme/components/Picker.js deleted file mode 100644 index 300a743..0000000 --- a/native-base-theme/components/Picker.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow - -export default () => { - const pickerTheme = { - '.note': { - color: '#8F8E95' - }, - // width: 90, - marginRight: -4, - flexGrow: 1 - }; - - return pickerTheme; -}; diff --git a/native-base-theme/components/Radio.js b/native-base-theme/components/Radio.js deleted file mode 100644 index d1e0e5f..0000000 --- a/native-base-theme/components/Radio.js +++ /dev/null @@ -1,31 +0,0 @@ -// @flow - -import { Platform } from 'react-native'; - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const radioTheme = { - '.selected': { - 'NativeBase.IconNB': { - color: - Platform.OS === PLATFORM.IOS - ? variables.radioColor - : variables.radioSelectedColorAndroid, - lineHeight: - Platform.OS === PLATFORM.IOS ? 25 : variables.radioBtnLineHeight, - height: Platform.OS === PLATFORM.IOS ? 20 : undefined - } - }, - 'NativeBase.IconNB': { - color: Platform.OS === PLATFORM.IOS ? 'transparent' : undefined, - lineHeight: - Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnLineHeight, - fontSize: - Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnSize - } - }; - - return radioTheme; -}; diff --git a/native-base-theme/components/Right.js b/native-base-theme/components/Right.js deleted file mode 100644 index 53b3308..0000000 --- a/native-base-theme/components/Right.js +++ /dev/null @@ -1,14 +0,0 @@ -// @flow - -export default () => { - const rightTheme = { - 'NativeBase.Button': { - alignSelf: null - }, - flex: 1, - alignSelf: 'center', - alignItems: 'flex-end' - }; - - return rightTheme; -}; diff --git a/native-base-theme/components/Segment.js b/native-base-theme/components/Segment.js deleted file mode 100644 index 8ad669c..0000000 --- a/native-base-theme/components/Segment.js +++ /dev/null @@ -1,57 +0,0 @@ -// @flow - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const platform = variables.platform; - - const segmentTheme = { - height: 45, - borderColor: variables.segmentBorderColorMain, - flexDirection: 'row', - justifyContent: 'center', - backgroundColor: variables.segmentBackgroundColor, - 'NativeBase.Button': { - alignSelf: 'center', - borderRadius: 0, - paddingTop: 3, - paddingBottom: 3, - height: 30, - backgroundColor: 'transparent', - borderWidth: 1, - borderLeftWidth: 0, - borderColor: variables.segmentBorderColor, - elevation: 0, - '.active': { - backgroundColor: variables.segmentActiveBackgroundColor, - 'NativeBase.Text': { - color: variables.segmentActiveTextColor - }, - 'NativeBase.Icon': { - color: variables.segmentActiveTextColor - } - }, - '.first': { - borderTopLeftRadius: platform === PLATFORM.IOS ? 5 : undefined, - borderBottomLeftRadius: platform === PLATFORM.IOS ? 5 : undefined, - borderLeftWidth: 1 - }, - '.last': { - borderTopRightRadius: platform === PLATFORM.IOS ? 5 : undefined, - borderBottomRightRadius: platform === PLATFORM.IOS ? 5 : undefined - }, - 'NativeBase.Text': { - color: variables.segmentTextColor, - fontSize: 14 - }, - 'NativeBase.Icon': { - fontSize: 22, - paddingTop: 0, - color: variables.segmentTextColor - } - } - }; - - return segmentTheme; -}; diff --git a/native-base-theme/components/Separator.js b/native-base-theme/components/Separator.js deleted file mode 100644 index 7fdf313..0000000 --- a/native-base-theme/components/Separator.js +++ /dev/null @@ -1,49 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const theme = { - '.group': { - height: 50, - paddingVertical: variables.listItemPadding - 8, - paddingTop: variables.listItemPadding + 12, - '.bordered': { - height: 50, - paddingVertical: variables.listItemPadding - 8, - paddingTop: variables.listItemPadding + 12 - } - }, - '.bordered': { - '.noTopBorder': { - borderTopWidth: 0 - }, - '.noBottomBorder': { - borderBottomWidth: 0 - }, - height: 35, - paddingTop: variables.listItemPadding + 2, - paddingBottom: variables.listItemPadding, - borderBottomWidth: variables.borderWidth, - borderTopWidth: variables.borderWidth, - borderColor: variables.listBorderColor - }, - 'NativeBase.Text': { - fontSize: variables.tabBarTextSize - 2, - color: '#777' - }, - '.noTopBorder': { - borderTopWidth: 0 - }, - '.noBottomBorder': { - borderBottomWidth: 0 - }, - height: 38, - backgroundColor: '#F0EFF5', - flex: 1, - justifyContent: 'center', - paddingLeft: variables.listItemPadding + 5 - }; - - return theme; -}; diff --git a/native-base-theme/components/Spinner.js b/native-base-theme/components/Spinner.js deleted file mode 100644 index a453b3f..0000000 --- a/native-base-theme/components/Spinner.js +++ /dev/null @@ -1,9 +0,0 @@ -// @flow - -export default () => { - const spinnerTheme = { - height: 80 - }; - - return spinnerTheme; -}; diff --git a/native-base-theme/components/Subtitle.js b/native-base-theme/components/Subtitle.js deleted file mode 100644 index bb8ea0a..0000000 --- a/native-base-theme/components/Subtitle.js +++ /dev/null @@ -1,19 +0,0 @@ -// @flow - -import { Platform } from 'react-native'; - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const subtitleTheme = { - fontSize: variables.subTitleFontSize, - fontFamily: variables.titleFontfamily, - color: variables.subtitleColor, - textAlign: 'center', - paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0, - marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3 - }; - - return subtitleTheme; -}; diff --git a/native-base-theme/components/SwipeRow.js b/native-base-theme/components/SwipeRow.js deleted file mode 100644 index 41d6083..0000000 --- a/native-base-theme/components/SwipeRow.js +++ /dev/null @@ -1,46 +0,0 @@ -// @flow - -export default () => { - const swipeRowTheme = { - 'NativeBase.ListItem': { - '.list': { - backgroundColor: '#FFF' - }, - marginLeft: 0 - }, - 'NativeBase.Left': { - flex: 0, - alignSelf: null, - alignItems: null, - 'NativeBase.Button': { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - alignSelf: 'stretch', - borderRadius: 0 - } - }, - 'NativeBase.Right': { - flex: 0, - alignSelf: null, - alignItems: null, - 'NativeBase.Button': { - flex: 1, - alignItems: 'center', - justifyContent: 'center', - alignSelf: 'stretch', - borderRadius: 0 - } - }, - 'NativeBase.Button': { - flex: 1, - height: null, - alignItems: 'center', - justifyContent: 'center', - alignSelf: 'stretch', - borderRadius: 0 - } - }; - - return swipeRowTheme; -}; diff --git a/native-base-theme/components/Switch.js b/native-base-theme/components/Switch.js deleted file mode 100644 index 6b667bc..0000000 --- a/native-base-theme/components/Switch.js +++ /dev/null @@ -1,9 +0,0 @@ -// @flow - -export default () => { - const switchTheme = { - marginVertical: -5 - }; - - return switchTheme; -}; diff --git a/native-base-theme/components/Tab.js b/native-base-theme/components/Tab.js deleted file mode 100644 index b242306..0000000 --- a/native-base-theme/components/Tab.js +++ /dev/null @@ -1,10 +0,0 @@ -// @flow - -export default () => { - const tabTheme = { - flex: 1, - backgroundColor: '#FFF' - }; - - return tabTheme; -}; diff --git a/native-base-theme/components/TabBar.js b/native-base-theme/components/TabBar.js deleted file mode 100644 index fa1490d..0000000 --- a/native-base-theme/components/TabBar.js +++ /dev/null @@ -1,57 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const tabBarTheme = { - '.tabIcon': { - height: undefined - }, - '.vertical': { - height: 60 - }, - 'NativeBase.Button': { - '.transparent': { - 'NativeBase.Text': { - fontSize: variables.tabFontSize, - color: variables.sTabBarActiveTextColor, - fontWeight: '400' - }, - 'NativeBase.IconNB': { - color: variables.sTabBarActiveTextColor - } - }, - 'NativeBase.IconNB': { - color: variables.sTabBarActiveTextColor - }, - 'NativeBase.Text': { - fontSize: variables.tabFontSize, - color: variables.sTabBarActiveTextColor, - fontWeight: '400' - }, - '.isTabActive': { - 'NativeBase.Text': { - fontWeight: '900' - } - }, - flex: 1, - alignSelf: 'stretch', - alignItems: 'center', - justifyContent: 'center', - borderRadius: null, - borderBottomColor: 'transparent', - backgroundColor: variables.tabBgColor - }, - height: 45, - flexDirection: 'row', - justifyContent: 'space-around', - borderWidth: 1, - borderTopWidth: 0, - borderLeftWidth: 0, - borderRightWidth: 0, - borderBottomColor: '#ccc', - backgroundColor: variables.tabBgColor - }; - - return tabBarTheme; -}; diff --git a/native-base-theme/components/TabContainer.js b/native-base-theme/components/TabContainer.js deleted file mode 100644 index fa91548..0000000 --- a/native-base-theme/components/TabContainer.js +++ /dev/null @@ -1,26 +0,0 @@ -// @flow - -import { Platform } from 'react-native'; - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const platformStyle = variables.platformStyle; - - const tabContainerTheme = { - elevation: 3, - height: 50, - flexDirection: 'row', - shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined, - shadowOffset: - platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined, - shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined, - shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined, - justifyContent: 'space-around', - borderBottomWidth: Platform.OS === PLATFORM.IOS ? variables.borderWidth : 0, - borderColor: variables.topTabBarBorderColor - }; - - return tabContainerTheme; -}; diff --git a/native-base-theme/components/TabHeading.js b/native-base-theme/components/TabHeading.js deleted file mode 100644 index 74cd6f4..0000000 --- a/native-base-theme/components/TabHeading.js +++ /dev/null @@ -1,40 +0,0 @@ -// @flow - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const platform = variables.platform; - - const tabHeadingTheme = { - flexDirection: 'row', - backgroundColor: variables.tabDefaultBg, - flex: 1, - alignItems: 'center', - justifyContent: 'center', - '.scrollable': { - paddingHorizontal: 20, - flex: platform === PLATFORM.ANDROID ? 0 : 1, - minWidth: platform === PLATFORM.ANDROID ? undefined : 60 - }, - 'NativeBase.Text': { - color: variables.topTabBarTextColor, - marginHorizontal: 7 - }, - 'NativeBase.Icon': { - color: variables.topTabBarTextColor, - fontSize: platform === PLATFORM.IOS ? 26 : undefined - }, - '.active': { - 'NativeBase.Text': { - color: variables.topTabBarActiveTextColor, - fontWeight: '600' - }, - 'NativeBase.Icon': { - color: variables.topTabBarActiveTextColor - } - } - }; - - return tabHeadingTheme; -}; diff --git a/native-base-theme/components/Text.js b/native-base-theme/components/Text.js deleted file mode 100644 index 8c3fa24..0000000 --- a/native-base-theme/components/Text.js +++ /dev/null @@ -1,17 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const textTheme = { - fontSize: variables.DefaultFontSize, - fontFamily: variables.fontFamily, - color: variables.textColor, - '.note': { - color: '#a7a7a7', - fontSize: variables.noteFontSize - } - }; - - return textTheme; -}; diff --git a/native-base-theme/components/Textarea.js b/native-base-theme/components/Textarea.js deleted file mode 100644 index a46d93b..0000000 --- a/native-base-theme/components/Textarea.js +++ /dev/null @@ -1,25 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const textAreaTheme = { - '.underline': { - borderBottomWidth: variables.borderWidth, - marginTop: 5, - borderColor: variables.inputBorderColor - }, - '.bordered': { - borderWidth: 1, - marginTop: 5, - borderColor: variables.inputBorderColor - }, - color: variables.textColor, - paddingLeft: 10, - paddingRight: 5, - fontSize: 15, - textAlignVertical: 'top' - }; - - return textAreaTheme; -}; diff --git a/native-base-theme/components/Thumbnail.js b/native-base-theme/components/Thumbnail.js deleted file mode 100644 index c6c9f68..0000000 --- a/native-base-theme/components/Thumbnail.js +++ /dev/null @@ -1,40 +0,0 @@ -// @flow - -export default () => { - const thumbnailTheme = { - '.square': { - borderRadius: 0, - '.small': { - width: 36, - height: 36, - borderRadius: 0 - }, - '.large': { - width: 80, - height: 80, - borderRadius: 0 - } - }, - '.small': { - width: 36, - height: 36, - borderRadius: 18, - '.square': { - borderRadius: 0 - } - }, - '.large': { - width: 80, - height: 80, - borderRadius: 40, - '.square': { - borderRadius: 0 - } - }, - width: 56, - height: 56, - borderRadius: 28 - }; - - return thumbnailTheme; -}; diff --git a/native-base-theme/components/Title.js b/native-base-theme/components/Title.js deleted file mode 100644 index 33e96bf..0000000 --- a/native-base-theme/components/Title.js +++ /dev/null @@ -1,21 +0,0 @@ -// @flow - -import { Platform } from 'react-native'; - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const titleTheme = { - fontSize: variables.titleFontSize, - fontFamily: variables.titleFontfamily, - color: variables.titleFontColor, - fontWeight: Platform.OS === PLATFORM.IOS ? '700' : undefined, - textAlign: 'center', - paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0, - marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3, - paddingTop: 1 - }; - - return titleTheme; -}; diff --git a/native-base-theme/components/Toast.js b/native-base-theme/components/Toast.js deleted file mode 100644 index f01db74..0000000 --- a/native-base-theme/components/Toast.js +++ /dev/null @@ -1,41 +0,0 @@ -// @flow - -import variable from './../variables/platform'; -import { PLATFORM } from './../variables/commonColor'; - -export default (variables /* : * */ = variable) => { - const platform = variables.platform; - - const toastTheme = { - '.danger': { - backgroundColor: variables.brandDanger - }, - '.warning': { - backgroundColor: variables.brandWarning - }, - '.success': { - backgroundColor: variables.brandSuccess - }, - backgroundColor: 'rgba(0,0,0,0.8)', - borderRadius: platform === PLATFORM.IOS ? 5 : 0, - flexDirection: 'row', - justifyContent: 'space-between', - alignItems: 'center', - padding: 10, - minHeight: 50, - 'NativeBase.Text': { - color: '#fff', - flex: 1 - }, - 'NativeBase.Button': { - backgroundColor: 'transparent', - height: 30, - elevation: 0, - 'NativeBase.Text': { - fontSize: 14 - } - } - }; - - return toastTheme; -}; diff --git a/native-base-theme/components/View.js b/native-base-theme/components/View.js deleted file mode 100644 index 827581e..0000000 --- a/native-base-theme/components/View.js +++ /dev/null @@ -1,13 +0,0 @@ -// @flow - -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const viewTheme = { - '.padder': { - padding: variables.contentPadding - } - }; - - return viewTheme; -}; diff --git a/native-base-theme/components/index.js b/native-base-theme/components/index.js deleted file mode 100644 index 8b6be3e..0000000 --- a/native-base-theme/components/index.js +++ /dev/null @@ -1,249 +0,0 @@ -/* eslint-disable no-param-reassign */ -// @flow - -import _ from 'lodash'; - -import bodyTheme from './Body'; -import leftTheme from './Left'; -import rightTheme from './Right'; -import headerTheme from './Header'; -import switchTheme from './Switch'; -import thumbnailTheme from './Thumbnail'; -import containerTheme from './Container'; -import contentTheme from './Content'; -import buttonTheme from './Button'; -import titleTheme from './Title'; -import subtitleTheme from './Subtitle'; -import inputGroupTheme from './InputGroup'; -import badgeTheme from './Badge'; -import checkBoxTheme from './CheckBox'; -import cardTheme from './Card'; -import radioTheme from './Radio'; -import h3Theme from './H3'; -import h2Theme from './H2'; -import h1Theme from './H1'; -import footerTheme from './Footer'; -import footerTabTheme from './FooterTab'; -import fabTheme from './Fab'; -import itemTheme from './Item'; -import labelTheme from './Label'; -import textAreaTheme from './Textarea'; -import textTheme from './Text'; -import toastTheme from './Toast'; -import tabTheme from './Tab'; -import tabBarTheme from './TabBar'; -import tabContainerTheme from './TabContainer'; -import viewTheme from './View'; -import tabHeadingTheme from './TabHeading'; -import iconTheme from './Icon'; -import inputTheme from './Input'; -import swipeRowTheme from './SwipeRow'; -import segmentTheme from './Segment'; -import spinnerTheme from './Spinner'; -import cardItemTheme from './CardItem'; -import listItemTheme from './ListItem'; -import formTheme from './Form'; -import separatorTheme from './Separator'; -import pickerTheme from './Picker'; -import variable from './../variables/platform'; - -export default (variables /* : * */ = variable) => { - const theme = { - variables, - 'NativeBase.Left': { - ...leftTheme(variables) - }, - 'NativeBase.Right': { - ...rightTheme(variables) - }, - 'NativeBase.Body': { - ...bodyTheme(variables) - }, - - 'NativeBase.Header': { - ...headerTheme(variables) - }, - - 'NativeBase.Button': { - ...buttonTheme(variables) - }, - - 'NativeBase.Title': { - ...titleTheme(variables) - }, - 'NativeBase.Subtitle': { - ...subtitleTheme(variables) - }, - - 'NativeBase.InputGroup': { - ...inputGroupTheme(variables) - }, - - 'NativeBase.Input': { - ...inputTheme(variables) - }, - - 'NativeBase.Badge': { - ...badgeTheme(variables) - }, - - 'NativeBase.CheckBox': { - ...checkBoxTheme(variables) - }, - - 'NativeBase.Radio': { - ...radioTheme(variables) - }, - - 'NativeBase.Card': { - ...cardTheme(variables) - }, - - 'NativeBase.CardItem': { - ...cardItemTheme(variables) - }, - - 'NativeBase.Toast': { - ...toastTheme(variables) - }, - - 'NativeBase.H1': { - ...h1Theme(variables) - }, - 'NativeBase.H2': { - ...h2Theme(variables) - }, - 'NativeBase.H3': { - ...h3Theme(variables) - }, - 'NativeBase.Form': { - ...formTheme(variables) - }, - - 'NativeBase.Container': { - ...containerTheme(variables) - }, - 'NativeBase.Content': { - ...contentTheme(variables) - }, - - 'NativeBase.Footer': { - ...footerTheme(variables) - }, - - 'NativeBase.Tabs': { - flex: 1 - }, - - 'NativeBase.FooterTab': { - ...footerTabTheme(variables) - }, - - 'NativeBase.ListItem': { - ...listItemTheme(variables) - }, - - 'NativeBase.ListItem1': { - ...listItemTheme(variables) - }, - - 'NativeBase.Icon': { - ...iconTheme(variables) - }, - 'NativeBase.IconNB': { - ...iconTheme(variables) - }, - 'NativeBase.Text': { - ...textTheme(variables) - }, - 'NativeBase.Spinner': { - ...spinnerTheme(variables) - }, - - 'NativeBase.Fab': { - ...fabTheme(variables) - }, - - 'NativeBase.Item': { - ...itemTheme(variables) - }, - - 'NativeBase.Label': { - ...labelTheme(variables) - }, - - 'NativeBase.Textarea': { - ...textAreaTheme(variables) - }, - - 'NativeBase.PickerNB': { - ...pickerTheme(variables), - 'NativeBase.Button': { - 'NativeBase.Text': {} - } - }, - - 'NativeBase.Tab': { - ...tabTheme(variables) - }, - - 'NativeBase.Segment': { - ...segmentTheme(variables) - }, - - 'NativeBase.TabBar': { - ...tabBarTheme(variables) - }, - 'NativeBase.ViewNB': { - ...viewTheme(variables) - }, - 'NativeBase.TabHeading': { - ...tabHeadingTheme(variables) - }, - 'NativeBase.TabContainer': { - ...tabContainerTheme(variables) - }, - 'NativeBase.Switch': { - ...switchTheme(variables) - }, - 'NativeBase.Separator': { - ...separatorTheme(variables) - }, - 'NativeBase.SwipeRow': { - ...swipeRowTheme(variables) - }, - 'NativeBase.Thumbnail': { - ...thumbnailTheme(variables) - } - }; - - const cssifyTheme = (grandparent, parent, parentKey) => { - _.forEach(parent, (style, styleName) => { - if ( - styleName.indexOf('.') === 0 && - parentKey && - parentKey.indexOf('.') === 0 - ) { - if (grandparent) { - if (!grandparent[styleName]) { - grandparent[styleName] = {}; - } else { - grandparent[styleName][parentKey] = style; - } - } - } - if ( - style && - typeof style === 'object' && - styleName !== 'fontVariant' && - styleName !== 'transform' - ) { - cssifyTheme(parent, style, styleName); - } - }); - }; - - cssifyTheme(null, theme, null); - - return theme; -}; diff --git a/native-base-theme/variables/commonColor.js b/native-base-theme/variables/commonColor.js deleted file mode 100644 index 5b3aa80..0000000 --- a/native-base-theme/variables/commonColor.js +++ /dev/null @@ -1,311 +0,0 @@ -// @flow - -import color from 'color'; -import { Platform, Dimensions, PixelRatio } from 'react-native'; - -export const PLATFORM = { - ANDROID: 'android', - IOS: 'ios', - MATERIAL: 'material', - WEB: 'web' -}; - -const deviceHeight = Dimensions.get('window').height; -const deviceWidth = Dimensions.get('window').width; -const platform = Platform.OS; -const platformStyle = undefined; -const isIphoneX = - platform === PLATFORM.IOS && - (deviceHeight === 812 || - deviceWidth === 812 || - deviceHeight === 896 || - deviceWidth === 896); - -export default { - platformStyle, - platform, - - // Accordion - headerStyle: '#edebed', - iconStyle: '#000', - contentStyle: '#f5f4f5', - expandedIconStyle: '#000', - accordionBorderColor: '#d3d3d3', - - // ActionSheet - elevation: 4, - containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)', - innerTouchableBackgroundColor: '#fff', - listItemHeight: 50, - listItemBorderColor: 'transparent', - marginHorizontal: -15, - marginLeft: 14, - marginTop: 15, - minHeight: 56, - padding: 15, - touchableTextColor: '#757575', - - // Android - androidRipple: true, - androidRippleColor: 'rgba(256, 256, 256, 0.3)', - androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', - buttonUppercaseAndroidText: true, - - // Badge - badgeBg: '#ED1727', - badgeColor: '#fff', - badgePadding: platform === PLATFORM.IOS ? 3 : 0, - - // Button - buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', - buttonDisabledBg: '#b5b5b5', - buttonPadding: 6, - get buttonPrimaryBg() { - return this.brandPrimary; - }, - get buttonPrimaryColor() { - return this.inverseTextColor; - }, - get buttonInfoBg() { - return this.brandInfo; - }, - get buttonInfoColor() { - return this.inverseTextColor; - }, - get buttonSuccessBg() { - return this.brandSuccess; - }, - get buttonSuccessColor() { - return this.inverseTextColor; - }, - get buttonDangerBg() { - return this.brandDanger; - }, - get buttonDangerColor() { - return this.inverseTextColor; - }, - get buttonWarningBg() { - return this.brandWarning; - }, - get buttonWarningColor() { - return this.inverseTextColor; - }, - get buttonTextSize() { - return platform === PLATFORM.IOS - ? this.fontSizeBase * 1.1 - : this.fontSizeBase - 1; - }, - get buttonTextSizeLarge() { - return this.fontSizeBase * 1.5; - }, - get buttonTextSizeSmall() { - 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 === PLATFORM.IOS ? 10 : 12, - - // CheckBox - CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0, - CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2, - CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2, - CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5, - CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16, - CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1, - CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17, - checkboxBgColor: '#039BE5', - checkboxSize: 20, - checkboxTickColor: '#fff', - - // Color - brandPrimary: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5', - brandInfo: '#62B1F6', - brandSuccess: '#5cb85c', - brandDanger: '#d9534f', - brandWarning: '#f0ad4e', - brandDark: '#000', - brandLight: '#f4f4f4', - - // Container - containerBgColor: '#fff', - - // Date Picker - datePickerTextColor: '#000', - datePickerBg: 'transparent', - - // FAB - fabWidth: 56, - - // Font - DefaultFontSize: 16, - fontFamily: platform === 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 === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', - footerPaddingBottom: 0, - - // FooterTab - tabBarTextColor: platform === PLATFORM.IOS ? '#737373' : '#bfc6ea', - tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11, - activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff', - sTabBarActiveTextColor: '#007aff', - tabBarActiveTextColor: platform === PLATFORM.IOS ? '#2874F0' : '#fff', - tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5', - - // Header - toolbarBtnColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', - toolbarHeight: platform === PLATFORM.IOS ? 64 : 56, - toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23, - toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff', - searchBarHeight: platform === PLATFORM.IOS ? 30 : 40, - searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50, - toolbarBtnTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - iosStatusbar: 'dark-content', - toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5', - 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 === PLATFORM.IOS ? 30 : 28, - iconHeaderSize: platform === 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 - buttonLineHeight: 19, - lineHeightH1: 32, - lineHeightH2: 27, - lineHeightH3: 22, - lineHeight: platform === PLATFORM.IOS ? 20 : 24, - - // List - listBg: 'transparent', - listBorderColor: '#c9c9c9', - listDividerBg: '#f4f4f4', - listBtnUnderlayColor: '#DDD', - listItemPadding: platform === PLATFORM.IOS ? 10 : 12, - listNoteColor: '#808080', - listNoteSize: 13, - listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5', - - // Progress Bar - defaultProgressColor: '#E4202D', - inverseProgressColor: '#1A191B', - - // Radio Button - radioBtnSize: platform === PLATFORM.IOS ? 25 : 23, - radioSelectedColorAndroid: '#3F51B5', - radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24, - get radioColor() { - return this.brandPrimary; - }, - - // Segment - segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', - segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5', - segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5', - - // Spinner - defaultSpinnerColor: '#45D56E', - inverseSpinnerColor: '#1A191B', - - // Tab - tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', - topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9', - topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff', - topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - - // Tabs - tabBgColor: '#F8F8F8', - tabFontSize: 15, - - // Text - textColor: '#000', - inverseTextColor: '#fff', - noteFontSize: 14, - get defaultTextColor() { - return this.textColor; - }, - - // Title - titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', - titleFontSize: platform === PLATFORM.IOS ? 17 : 19, - subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14, - subtitleColor: platform === PLATFORM.IOS ? '#000' : '#fff', - titleFontColor: platform === PLATFORM.IOS ? '#000' : '#fff', - - // Other - borderRadiusBase: platform === 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/material.js b/native-base-theme/variables/material.js deleted file mode 100644 index 13329ff..0000000 --- a/native-base-theme/variables/material.js +++ /dev/null @@ -1,304 +0,0 @@ -// @flow - -import color from 'color'; -import { Platform, Dimensions, PixelRatio } from 'react-native'; - -import { PLATFORM } from './commonColor'; - -const deviceHeight = Dimensions.get('window').height; -const deviceWidth = Dimensions.get('window').width; -const platform = Platform.OS; -const platformStyle = PLATFORM.MATERIAL; -const isIphoneX = - platform === PLATFORM.IOS && - (deviceHeight === 812 || - deviceWidth === 812 || - deviceHeight === 896 || - deviceWidth === 896); - -export default { - platformStyle, - platform, - - // Accordion - headerStyle: '#edebed', - iconStyle: '#000', - contentStyle: '#f5f4f5', - expandedIconStyle: '#000', - accordionBorderColor: '#d3d3d3', - - // ActionSheet - elevation: 4, - containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)', - innerTouchableBackgroundColor: '#fff', - listItemHeight: 50, - listItemBorderColor: 'transparent', - marginHorizontal: -15, - marginLeft: 14, - marginTop: 15, - minHeight: 56, - padding: 15, - touchableTextColor: '#757575', - - // Android - androidRipple: true, - androidRippleColor: 'rgba(256, 256, 256, 0.3)', - androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', - buttonUppercaseAndroidText: true, - - // Badge - badgeBg: '#ED1727', - badgeColor: '#fff', - badgePadding: 0, - - // Button - buttonFontFamily: 'Roboto', - buttonDisabledBg: '#b5b5b5', - buttonPadding: 6, - get buttonPrimaryBg() { - return this.brandPrimary; - }, - get buttonPrimaryColor() { - return this.inverseTextColor; - }, - get buttonInfoBg() { - return this.brandInfo; - }, - get buttonInfoColor() { - return this.inverseTextColor; - }, - get buttonSuccessBg() { - return this.brandSuccess; - }, - get buttonSuccessColor() { - return this.inverseTextColor; - }, - get buttonDangerBg() { - return this.brandDanger; - }, - get buttonDangerColor() { - return this.inverseTextColor; - }, - get buttonWarningBg() { - return this.brandWarning; - }, - get buttonWarningColor() { - return this.inverseTextColor; - }, - get buttonTextSize() { - return this.fontSizeBase - 1; - }, - get buttonTextSizeLarge() { - return this.fontSizeBase * 1.5; - }, - get buttonTextSizeSmall() { - 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 === PLATFORM.IOS ? 10 : 12, - - // CheckBox - CheckboxRadius: 0, - CheckboxBorderWidth: 2, - CheckboxPaddingLeft: 2, - CheckboxPaddingBottom: 5, - CheckboxIconSize: 16, - CheckboxIconMarginTop: 1, - CheckboxFontSize: 17, - checkboxBgColor: '#039BE5', - checkboxSize: 20, - checkboxTickColor: '#fff', - - // Color - brandPrimary: '#3F51B5', - brandInfo: '#62B1F6', - brandSuccess: '#5cb85c', - brandDanger: '#d9534f', - brandWarning: '#f0ad4e', - brandDark: '#000', - brandLight: '#f4f4f4', - - // Container - containerBgColor: '#fff', - - // Date Picker - datePickerTextColor: '#000', - datePickerBg: 'transparent', - - // FAB - fabWidth: 56, - - // Font - DefaultFontSize: 16, - fontFamily: '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: '#3F51B5', - footerPaddingBottom: 0, - - // FooterTab - tabBarTextColor: '#bfc6ea', - tabBarTextSize: 11, - activeTab: '#fff', - sTabBarActiveTextColor: '#007aff', - tabBarActiveTextColor: '#fff', - tabActiveBgColor: '#3F51B5', - - // Header - toolbarBtnColor: '#fff', - toolbarDefaultBg: '#3F51B5', - toolbarHeight: 56, - toolbarSearchIconSize: 23, - toolbarInputColor: '#fff', - searchBarHeight: platform === PLATFORM.IOS ? 30 : 40, - searchBarInputHeight: platform === PLATFORM.IOS ? 40 : 50, - toolbarBtnTextColor: '#fff', - toolbarDefaultBorder: '#3F51B5', - iosStatusbar: '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: 28, - iconHeaderSize: 24, - - // InputGroup - inputFontSize: 17, - inputBorderColor: '#D9D5DC', - inputSuccessBorderColor: '#2b8339', - inputErrorBorderColor: '#ed2f2f', - inputHeightBase: 50, - get inputColor() { - return this.textColor; - }, - get inputColorPlaceholder() { - return '#575757'; - }, - - // Line Height - buttonLineHeight: 19, - lineHeightH1: 32, - lineHeightH2: 27, - lineHeightH3: 22, - lineHeight: 24, - - // List - listBg: 'transparent', - listBorderColor: '#c9c9c9', - listDividerBg: '#f4f4f4', - listBtnUnderlayColor: '#DDD', - listItemPadding: 12, - listNoteColor: '#808080', - listNoteSize: 13, - listItemSelected: '#3F51B5', - - // Progress Bar - defaultProgressColor: '#E4202D', - inverseProgressColor: '#1A191B', - - // Radio Button - radioBtnSize: 23, - radioSelectedColorAndroid: '#3F51B5', - radioBtnLineHeight: 24, - get radioColor() { - return this.brandPrimary; - }, - - // Segment - segmentBackgroundColor: '#3F51B5', - segmentActiveBackgroundColor: '#fff', - segmentTextColor: '#fff', - segmentActiveTextColor: '#3F51B5', - segmentBorderColor: '#fff', - segmentBorderColorMain: '#3F51B5', - - // Spinner - defaultSpinnerColor: '#45D56E', - inverseSpinnerColor: '#1A191B', - - // Tab - tabDefaultBg: '#3F51B5', - topTabBarTextColor: '#b3c7f9', - topTabBarActiveTextColor: '#fff', - topTabBarBorderColor: '#fff', - topTabBarActiveBorderColor: '#fff', - - // Tabs - tabBgColor: '#F8F8F8', - tabFontSize: 15, - - // Text - textColor: '#000', - inverseTextColor: '#fff', - noteFontSize: 14, - get defaultTextColor() { - return this.textColor; - }, - - // Title - titleFontfamily: 'Roboto', - titleFontSize: 19, - subTitleFontSize: 14, - subtitleColor: '#FFF', - titleFontColor: '#FFF', - - // Other - borderRadiusBase: 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/platform.js b/native-base-theme/variables/platform.js deleted file mode 100644 index 0e708c6..0000000 --- a/native-base-theme/variables/platform.js +++ /dev/null @@ -1,362 +0,0 @@ -// @flow - -import color from 'color'; -import { Platform, Dimensions, PixelRatio } from 'react-native'; - -import { PLATFORM } from './commonColor'; - -const deviceHeight = Dimensions.get('window').height; -const deviceWidth = Dimensions.get('window').width; -const platform = Platform.OS; -const platformStyle = undefined; -const isIphoneX = - platform === PLATFORM.IOS && - (deviceHeight === 812 || - deviceWidth === 812 || - deviceHeight === 896 || - deviceWidth === 896); - -export default { - platformStyle, - platform, - - // Accordion - accordionBorderColor: '#d3d3d3', - accordionContentPadding: 10, - accordionIconFontSize: 18, - contentStyle: '#f5f4f5', - expandedIconStyle: '#000', - headerStyle: '#edebed', - iconStyle: '#000', - - // ActionSheet - elevation: 4, - containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)', - innerTouchableBackgroundColor: '#fff', - listItemHeight: 50, - listItemBorderColor: 'transparent', - marginHorizontal: -15, - marginLeft: 14, - marginTop: 15, - minHeight: 56, - padding: 15, - touchableTextColor: '#757575', - - // Android - androidRipple: true, - androidRippleColor: 'rgba(256, 256, 256, 0.3)', - androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', - buttonUppercaseAndroidText: true, - - // Badge - badgeBg: '#ED1727', - badgeColor: '#fff', - badgePadding: platform === PLATFORM.IOS ? 3 : 0, - - // Button - buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', - buttonTextColor: '#fff', - buttonDisabledBg: '#b5b5b5', - buttonPadding: 6, - buttonDefaultActiveOpacity: 0.5, - buttonDefaultFlex: 1, - buttonDefaultBorderRadius: 2, - buttonDefaultBorderWidth: 1, - get buttonPrimaryBg() { - return this.brandPrimary; - }, - get buttonPrimaryColor() { - return this.inverseTextColor; - }, - get buttonInfoBg() { - return this.brandInfo; - }, - get buttonInfoColor() { - return this.inverseTextColor; - }, - get buttonSuccessBg() { - return this.brandSuccess; - }, - get buttonSuccessColor() { - return this.inverseTextColor; - }, - get buttonDangerBg() { - return this.brandDanger; - }, - get buttonDangerColor() { - return this.inverseTextColor; - }, - get buttonWarningBg() { - return this.brandWarning; - }, - get buttonWarningColor() { - return this.inverseTextColor; - }, - get buttonTextSize() { - return platform === PLATFORM.IOS - ? this.fontSizeBase * 1.1 - : this.fontSizeBase - 1; - }, - get buttonTextSizeLarge() { - return this.fontSizeBase * 1.5; - }, - get buttonTextSizeSmall() { - 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 === PLATFORM.IOS ? 10 : 12, - - // CheckBox - CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0, - CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2, - CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2, - CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5, - CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16, - CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1, - CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17, - checkboxBgColor: '#be1522', - checkboxSize: 20, - checkboxTickColor: '#fff', - checkboxDefaultColor: 'transparent', - checkboxTextShadowRadius: 0, - - // Color - brandPrimary: '#be1522', - brandInfo: '#62B1F6', - brandSuccess: '#5cb85c', - brandDanger: '#d9534f', - brandWarning: '#f0ad4e', - brandDark: '#000', - brandLight: '#f4f4f4', - - // Container - containerBgColor: '#fff', - sideMenuBgColor: "#f2f2f2", - - // Date Picker - datePickerFlex: 1, - datePickerPadding: 10, - datePickerTextColor: '#000', - datePickerBg: 'transparent', - - // FAB - fabBackgroundColor: 'blue', - fabBorderRadius: 28, - fabBottom: 0, - fabButtonBorderRadius: 20, - fabButtonHeight: 40, - fabButtonLeft: 7, - fabButtonMarginBottom: 10, - fabContainerBottom: 20, - fabDefaultPosition: 20, - fabElevation: 4, - fabIconColor: '#fff', - fabIconSize: 24, - fabShadowColor: '#000', - fabShadowOffsetHeight: 2, - fabShadowOffsetWidth: 0, - fabShadowOpacity: 0.4, - fabShadowRadius: 2, - fabWidth: 56, - - // Font - DefaultFontSize: 16, - fontFamily: platform === 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 === PLATFORM.IOS ? '#F8F8F8' : '#be1522', - footerPaddingBottom: 0, - - // FooterTab - tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9', - tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11, - activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff', - sTabBarActiveTextColor: '#007aff', - tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5', - - // Header - toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', - toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522', - toolbarHeight: platform === PLATFORM.IOS ? 64 : 56, - toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23, - toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff', - searchBarHeight: platform === PLATFORM.IOS ? 30 : 40, - searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50, - toolbarBtnTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', - toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#be1522', - iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content', - toolbarTextColor: platform === PLATFORM.IOS ? '#000000' : '#ffffff', - 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 === PLATFORM.IOS ? 30 : 28, - iconHeaderSize: platform === 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 - buttonLineHeight: 19, - lineHeightH1: 32, - lineHeightH2: 27, - lineHeightH3: 22, - lineHeight: platform === PLATFORM.IOS ? 20 : 24, - listItemSelected: '#be1522', - - // List - listBg: 'transparent', - listBorderColor: '#c9c9c9', - listDividerBg: '#e2e2e2', - listBtnUnderlayColor: '#DDD', - listItemPadding: platform === PLATFORM.IOS ? 10 : 12, - listNoteColor: '#808080', - listNoteSize: 13, - - // Progress Bar - defaultProgressColor: '#E4202D', - inverseProgressColor: '#1A191B', - - // Radio Button - radioBtnSize: platform === PLATFORM.IOS ? 25 : 23, - radioSelectedColorAndroid: '#be1522', - radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24, - get radioColor() { - return this.brandPrimary; - }, - - // Segment - segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', - segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5', - segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5', - - // Spinner - defaultSpinnerColor: '#be1522', - inverseSpinnerColor: '#1A191B', - - // Tab - tabBarDisabledTextColor: '#BDBDBD', - tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522', - topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9', - topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', - topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff', - topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', - - // Tabs - tabBgColor: '#F8F8F8', - tabIconColor: platform === "ios" ? "#5d5d5d" : "#fff", - tabFontSize: 15, - - // Text - textColor: '#000', - textDisabledColor: "#c1c1c1", - inverseTextColor: '#fff', - noteFontSize: 14, - get defaultTextColor() { - return this.textColor; - }, - - // Title - titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', - titleFontSize: platform === PLATFORM.IOS ? 17 : 19, - subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14, - subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF', - titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF', - - // CUSTOM - customMaterialIconColor: "#5d5d5d", - fetchedDataSectionListErrorText: "#898989", - - // Calendar/Agenda - agendaBackgroundColor: '#f3f3f4', - agendaEmptyLine: '#dbdbdc', - - // 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)", - - // Screens - planningColor: '#d9b10a', - proximoColor: '#ec5904', - proxiwashColor: '#1fa5ee', - menuColor: '#e91314', - tutorinsaColor: '#f93943', - - - // Other - borderRadiusBase: platform === 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 deleted file mode 100644 index 2b5e1a4..0000000 --- a/native-base-theme/variables/platformDark.js +++ /dev/null @@ -1,362 +0,0 @@ -// @flow - -import color from 'color'; -import { Platform, Dimensions, PixelRatio } from 'react-native'; - -import { PLATFORM } from './commonColor'; - -const deviceHeight = Dimensions.get('window').height; -const deviceWidth = Dimensions.get('window').width; -const platform = Platform.OS; -const platformStyle = undefined; -const isIphoneX = - platform === PLATFORM.IOS && - (deviceHeight === 812 || - deviceWidth === 812 || - deviceHeight === 896 || - deviceWidth === 896); - -export default { - platformStyle, - platform, - - // Accordion - accordionBorderColor: '#d3d3d3', - accordionContentPadding: 10, - accordionIconFontSize: 18, - contentStyle: '#f5f4f5', - expandedIconStyle: '#000', - headerStyle: '#edebed', - iconStyle: '#000', - - // ActionSheet - elevation: 4, - containerTouchableBackgroundColor: 'rgba(0,0,0,0.4)', - innerTouchableBackgroundColor: '#fff', - listItemHeight: 50, - listItemBorderColor: 'transparent', - marginHorizontal: -15, - marginLeft: 14, - marginTop: 15, - minHeight: 56, - padding: 15, - touchableTextColor: '#757575', - - // Android - androidRipple: true, - androidRippleColor: 'rgba(256, 256, 256, 0.3)', - androidRippleColorDark: 'rgba(0, 0, 0, 0.15)', - buttonUppercaseAndroidText: true, - - // Badge - badgeBg: '#ED1727', - badgeColor: '#fff', - badgePadding: platform === PLATFORM.IOS ? 3 : 0, - - // Button - buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', - buttonTextColor: '#fff', - buttonDisabledBg: '#b5b5b5', - buttonPadding: 6, - buttonDefaultActiveOpacity: 0.5, - buttonDefaultFlex: 1, - buttonDefaultBorderRadius: 2, - buttonDefaultBorderWidth: 1, - get buttonPrimaryBg() { - return this.brandPrimary; - }, - get buttonPrimaryColor() { - return this.textColor; - }, - get buttonInfoBg() { - return this.brandInfo; - }, - get buttonInfoColor() { - return this.textColor; - }, - get buttonSuccessBg() { - return this.brandSuccess; - }, - get buttonSuccessColor() { - return this.textColor; - }, - get buttonDangerBg() { - return this.brandDanger; - }, - get buttonDangerColor() { - return this.textColor; - }, - get buttonWarningBg() { - return this.brandWarning; - }, - get buttonWarningColor() { - return this.textColor; - }, - get buttonTextSize() { - return platform === PLATFORM.IOS - ? this.fontSizeBase * 1.1 - : this.fontSizeBase - 1; - }, - get buttonTextSizeLarge() { - return this.fontSizeBase * 1.5; - }, - get buttonTextSizeSmall() { - 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: '#2A2A2A', - cardBorderColor: '#1a1a1a', - cardBorderRadius: 2, - cardItemPadding: platform === PLATFORM.IOS ? 10 : 12, - - // CheckBox - CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0, - CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2, - CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2, - CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5, - CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16, - CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1, - CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17, - checkboxBgColor: '#be1522', - checkboxSize: 20, - checkboxTickColor: '#fff', - checkboxDefaultColor: 'transparent', - checkboxTextShadowRadius: 0, - - // Color - brandPrimary: '#be1522', - brandInfo: '#62B1F6', - brandSuccess: '#5cb85c', - brandDanger: '#d9534f', - brandWarning: '#f0ad4e', - brandDark: '#000', - brandLight: '#f4f4f4', - - // Container - containerBgColor: '#222222', - sideMenuBgColor: "#1c1c1c", - - // Date Picker - datePickerFlex: 1, - datePickerPadding: 10, - datePickerTextColor: '#fff', - datePickerBg: 'transparent', - - // FAB - fabBackgroundColor: 'blue', - fabBorderRadius: 28, - fabBottom: 0, - fabButtonBorderRadius: 20, - fabButtonHeight: 40, - fabButtonLeft: 7, - fabButtonMarginBottom: 10, - fabContainerBottom: 20, - fabDefaultPosition: 20, - fabElevation: 4, - fabIconColor: '#fff', - fabIconSize: 24, - fabShadowColor: '#000', - fabShadowOffsetHeight: 2, - fabShadowOffsetWidth: 0, - fabShadowOpacity: 0.4, - fabShadowRadius: 2, - fabWidth: 56, - - // Font - DefaultFontSize: 16, - fontFamily: platform === 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 === PLATFORM.IOS ? '#333333' : '#be1522', - footerPaddingBottom: 0, - - // FooterTab - tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9', - tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11, - activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff', - sTabBarActiveTextColor: '#007aff', - tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5', - - // Header - toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', - toolbarDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522', - toolbarHeight: platform === PLATFORM.IOS ? 64 : 56, - toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23, - toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff', - searchBarHeight: platform === PLATFORM.IOS ? 30 : 40, - searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50, - toolbarBtnTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', - toolbarDefaultBorder: platform === PLATFORM.IOS ? '#3f3f3f' : '#be1522', - iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content', - toolbarTextColor: '#ffffff', - 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 === PLATFORM.IOS ? 30 : 28, - iconHeaderSize: platform === 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 - buttonLineHeight: 19, - lineHeightH1: 32, - lineHeightH2: 27, - lineHeightH3: 22, - lineHeight: platform === PLATFORM.IOS ? 20 : 24, - listItemSelected: '#be1522', - - // List - listBg: 'transparent', - listBorderColor: '#3e3e3e', - listDividerBg: '#222222', - listBtnUnderlayColor: '#3a3a3a', - listItemPadding: platform === PLATFORM.IOS ? 10 : 12, - listNoteColor: '#acacac', - listNoteSize: 13, - - // Progress Bar - defaultProgressColor: '#E4202D', - inverseProgressColor: '#1A191B', - - // Radio Button - radioBtnSize: platform === PLATFORM.IOS ? 25 : 23, - radioSelectedColorAndroid: '#be1522', - radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24, - get radioColor() { - return this.brandPrimary; - }, - - // Segment - segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5', - segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5', - segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff', - segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5', - - // Spinner - defaultSpinnerColor: '#be1522', - inverseSpinnerColor: '#1A191B', - - // Tab - tabBarDisabledTextColor: '#BDBDBD', - tabDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522', - topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9', - topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', - topTabBarBorderColor: platform === PLATFORM.IOS ? '#3f3f3f' : '#fff', - topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff', - - // Tabs - tabBgColor: '#2b2b2b', - tabIconColor: "#fff", - tabFontSize: 15, - - // Text - textColor: '#ebebeb', - textDisabledColor: "#5b5b5b", - inverseTextColor: '#000', - noteFontSize: 14, - get defaultTextColor() { - return this.textColor; - }, - - // Title - titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium', - titleFontSize: platform === PLATFORM.IOS ? 17 : 19, - subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14, - subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF', - titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF', - - // CUSTOM - customMaterialIconColor: "#b3b3b3", - fetchedDataSectionListErrorText: "#acacac", - - // Calendar/Agenda - agendaBackgroundColor: '#373737', - agendaEmptyLine: '#464646', - - // PROXIWASH - proxiwashFinishedColor: "rgba(17,149,32,0.53)", - proxiwashReadyColor: "transparent", - proxiwashRunningColor: "rgba(29,59,175,0.65)", - proxiwashBrokenColor: "#000000", - proxiwashErrorColor: "rgba(213,8,0,0.57)", - - // Screens - planningColor: '#d99e09', - proximoColor: '#ec5904', - proxiwashColor: '#1fa5ee', - menuColor: '#b81213', - tutorinsaColor: '#f93943', - - - // Other - borderRadiusBase: platform === 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/navigation/DrawerNavigator.js b/navigation/DrawerNavigator.js index 0231262..a3a0f14 100644 --- a/navigation/DrawerNavigator.js +++ b/navigation/DrawerNavigator.js @@ -12,25 +12,12 @@ import BibScreen from "../screens/Websites/BibScreen"; import DebugScreen from '../screens/DebugScreen'; import Sidebar from "../components/Sidebar"; import {createStackNavigator, TransitionPresets} from "@react-navigation/stack"; -import PerfHomeScreen from '../screens/PerfHomeScreen'; -import {Platform, StyleSheet, View} from "react-native"; -import ThemeManager from "../utils/ThemeManager"; +import {View} from "react-native"; import Touchable from "react-native-platform-touchable"; import {MaterialCommunityIcons} from "@expo/vector-icons"; - - -const styles = StyleSheet.create({ - header: { - backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary, - }, - headerTitle: { - color: "#ffffff", - }, -}); +import ThemeManager from "../utils/ThemeManager"; const defaultScreenOptions = { - headerTintColor: 'white', - headerStyle: styles.header, gestureEnabled: true, cardOverlayEnabled: true, ...TransitionPresets.SlideFromRightIOS, @@ -49,7 +36,7 @@ function getDrawerButton(navigation: Object) { + color={ThemeManager.getCurrentThemeVariables().text}/> ); @@ -191,8 +178,8 @@ function BibStackComponent() { const Drawer = createDrawerNavigator(); -function getDrawerContent(nav) { - return +function getDrawerContent(props) { + return } export default function DrawerNavigator() { @@ -201,8 +188,8 @@ export default function DrawerNavigator() { initialRouteName={'Main'} headerMode={'float'} backBehavior={'initialRoute'} - drawerType={'back'} - drawerContent={props => getDrawerContent(props.navigation)} + drawerType={'front'} + drawerContent={(props) => getDrawerContent(props)} screenOptions={defaultScreenOptions} > + color={ThemeManager.getCurrentThemeVariables().text}/> ); @@ -226,7 +215,7 @@ export default function TabNavigator() { return ( ({ tabBarIcon: ({focused, color, size}) => { let icon = TAB_ICONS[route.name]; diff --git a/package.json b/package.json index 90050a9..e3063d5 100644 --- a/package.json +++ b/package.json @@ -22,8 +22,6 @@ "expo-permissions": "~8.0.0", "expo-web-browser": "~8.0.0", "i18n-js": "^3.3.0", - "native-base": "^2.12.1", - "native-base-shoutem-theme": "^0.3.1", "react": "16.9.0", "react-dom": "16.9.0", "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz", @@ -31,9 +29,8 @@ "react-native-autolink": "^1.8.1", "react-native-calendars": "^1.260.0", "react-native-gesture-handler": "~1.5.0", - "react-native-material-menu": "^1.0.0", "react-native-modalize": "^1.3.6", - "react-native-paper": "^3.5.1", + "react-native-paper": "^3.6.0", "react-native-platform-touchable": "^1.1.1", "react-native-reanimated": "~1.4.0", "react-native-render-html": "^4.1.2", diff --git a/screens/About/AboutDependenciesScreen.js b/screens/About/AboutDependenciesScreen.js index 1c97915..e351280 100644 --- a/screens/About/AboutDependenciesScreen.js +++ b/screens/About/AboutDependenciesScreen.js @@ -1,9 +1,9 @@ // @flow import * as React from 'react'; -import {Body, ListItem, Text} from 'native-base'; import {FlatList} from "react-native"; import packageJson from '../../package'; +import {List} from 'react-native-paper'; function generateListFromObject(object) { let list = []; @@ -33,16 +33,10 @@ export default class AboutDependenciesScreen extends React.Component { keyExtractor={(item) => item.name} style={{minHeight: 300, width: '100%'}} renderItem={({item}) => - - - - {item.name} - - - {item.version.replace('^', '')} - - - } + } /> ); } diff --git a/screens/About/AboutScreen.js b/screens/About/AboutScreen.js index 45541d6..165e1d6 100644 --- a/screens/About/AboutScreen.js +++ b/screens/About/AboutScreen.js @@ -2,13 +2,12 @@ import * as React from 'react'; import {FlatList, Linking, Platform, View} from 'react-native'; -import {Body, Button, Card, CardItem, Content, H1, Left, Right, Text, Thumbnail} from 'native-base'; import i18n from "i18n-js"; import appJson from '../../app'; -import {MaterialCommunityIcons} from "@expo/vector-icons"; import AsyncStorageManager from "../../utils/AsyncStorageManager"; import {Modalize} from "react-native-modalize"; import ThemeManager from "../../utils/ThemeManager"; +import {Avatar, Card, Text, Title, List, Button} from 'react-native-paper'; const links = { appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148', @@ -197,80 +196,65 @@ export default class AboutScreen extends React.Component { getAppCard() { return ( - - - - - -

{appJson.expo.name}

- - v.{appJson.expo.version} - - - - - item.icon} - listKey={"app"} - renderItem={this.getCardItem} - /> + + }/> + + item.icon} + listKey={"app"} + renderItem={this.getCardItem} + /> + ); } getTeamCard() { return ( - - - - - -

{i18n.t('aboutScreen.team')}

- - - - - {i18n.t('aboutScreen.author')} - - item.icon} - listKey={"team1"} - renderItem={this.getCardItem} - /> - - {i18n.t('aboutScreen.additionalDev')} - - item.icon} - listKey={"team2"} - renderItem={this.getCardItem} - /> + + }/> + + {i18n.t('aboutScreen.author')} + item.icon} + listKey={"team1"} + renderItem={this.getCardItem} + /> + {i18n.t('aboutScreen.additionalDev')} + item.icon} + listKey={"team2"} + renderItem={this.getCardItem} + /> + ); } getTechnoCard() { return ( - - - {i18n.t('aboutScreen.technologies')} - - item.icon} - listKey={"techno"} - renderItem={this.getCardItem} - /> + + + {i18n.t('aboutScreen.technologies')} + item.icon} + listKey={"techno"} + renderItem={this.getCardItem} + /> + ); } @@ -282,31 +266,29 @@ export default class AboutScreen extends React.Component { */ getCardItem({item}: Object) { let shouldShow = !item.showOnlyInDebug || (item.showOnlyInDebug && this.state.isDebugUnlocked); + console.log(item.text); if (shouldShow) { - return ( - - - - {item.text} - - {item.showChevron ? - - - - : - - } - ) - ; + if (item.showChevron) { + return ( + } + right={props => } + onPress={item.onPressCallback} + /> + ); + } else { + return ( + } + onPress={item.onPressCallback} + /> + ); + } + } else { - return + return null; } } @@ -330,39 +312,39 @@ export default class AboutScreen extends React.Component { return ( + modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}> -

{i18n.t('aboutScreen.bugs')}

+ {i18n.t('aboutScreen.bugs')} {i18n.t('aboutScreen.bugsDescription')} @@ -390,7 +372,7 @@ export default class AboutScreen extends React.Component { render() { return ( - + {this.getBugReportModal()} { keyExtractor={(item) => item.id} renderItem={this.getMainCard} /> - + ); } } diff --git a/screens/DebugScreen.js b/screens/DebugScreen.js index cf0d5d3..1c4b423 100644 --- a/screens/DebugScreen.js +++ b/screens/DebugScreen.js @@ -1,31 +1,12 @@ // @flow import * as React from 'react'; -import { - Body, - Button, - Card, - CardItem, - Container, - Content, - Form, - H1, - H3, - Input, - Item, - Label, - Left, - List, - ListItem, - Right, - Text -} from "native-base"; import ThemeManager from '../utils/ThemeManager'; -import {MaterialCommunityIcons} from "@expo/vector-icons"; -import {Alert, Clipboard, View} from "react-native"; +import {Alert, Clipboard, ScrollView, View} from "react-native"; import AsyncStorageManager from "../utils/AsyncStorageManager"; import NotificationsManager from "../utils/NotificationsManager"; import {Modalize} from "react-native-modalize"; +import {Button, Card, List, Subheading, TextInput, Title} from 'react-native-paper'; type Props = { navigation: Object, @@ -54,29 +35,24 @@ export default class DebugScreen extends React.Component { } static getGeneralItem(onPressCallback: Function, icon: ?string, title: string, subtitle: string) { - return ( - - {icon !== undefined ? - - - - : - } - - - {title} - - - {subtitle} - - - - - ); + if (icon !== undefined) { + return ( + } + onPress={onPressCallback} + /> + ); + } else { + return ( + + ); + } } alertCurrentExpoToken() { @@ -111,26 +87,30 @@ export default class DebugScreen extends React.Component { flex: 1, padding: 20 }}> -

{this.state.modalCurrentDisplayItem.key}

-

Default: {this.state.modalCurrentDisplayItem.default}

-

Current: {this.state.modalCurrentDisplayItem.current}

-
- - - this.modalInputValue = text}/> - -
+ {this.state.modalCurrentDisplayItem.key} + Default: {this.state.modalCurrentDisplayItem.default} + Current: {this.state.modalCurrentDisplayItem.current} + this.modalInputValue = text} + /> - @@ -149,42 +129,37 @@ export default class DebugScreen extends React.Component { render() { return ( - + + modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}> {this.getModalContent()} - - - - - Notifications - - - + + + + {DebugScreen.getGeneralItem(() => this.alertCurrentExpoToken(), 'bell', 'Get current Expo Token', '')} {DebugScreen.getGeneralItem(() => this.forceExpoTokenUpdate(), 'bell-ring', 'Force Expo token update', '')} - + - - - - Preferences - - - + + + {Object.values(this.state.currentPreferences).map((object) => {DebugScreen.getGeneralItem(() => this.showEditModal(object), undefined, object.key, 'Click to edit')} )} - + - - - + + ); } } diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js index f4bb0a3..563ab1f 100644 --- a/screens/HomeScreen.js +++ b/screens/HomeScreen.js @@ -1,8 +1,7 @@ // @flow import * as React from 'react'; -import {Image, TouchableOpacity, View} from 'react-native'; -import {Body, Button, Card, CardItem, Left, Text, Thumbnail} from 'native-base'; +import {TouchableOpacity, View} from 'react-native'; import i18n from "i18n-js"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import Autolink from 'react-native-autolink'; @@ -10,6 +9,8 @@ import ThemeManager from "../utils/ThemeManager"; import DashboardItem from "../components/DashboardItem"; import * as WebBrowser from 'expo-web-browser'; import WebSectionList from "../components/WebSectionList"; +import PlatformTouchable from "react-native-platform-touchable"; +import {Avatar, Card, Text} from 'react-native-paper'; // import DATA from "../dashboard_data.json"; @@ -405,11 +406,11 @@ export default class HomeScreen extends React.Component { let proxiwashIsAvailable = parseInt(proxiwashData['dryers']) > 0 || parseInt(proxiwashData['washers']) > 0; let proxiwashSubtitle; let dryerColor = parseInt(proxiwashData['dryers']) > 0 ? - ThemeManager.getCurrentThemeVariables().textColor : - ThemeManager.getCurrentThemeVariables().listNoteColor; + ThemeManager.getCurrentThemeVariables().text : + ThemeManager.getCurrentThemeVariables().textDisabled; let washerColor = parseInt(proxiwashData['washers']) > 0 ? - ThemeManager.getCurrentThemeVariables().textColor : - ThemeManager.getCurrentThemeVariables().listNoteColor; + ThemeManager.getCurrentThemeVariables().text : + ThemeManager.getCurrentThemeVariables().textDisabled; let availableDryers = proxiwashData['dryers']; let availableWashers = proxiwashData['washers']; if (proxiwashIsAvailable) { @@ -505,59 +506,35 @@ export default class HomeScreen extends React.Component { const onImagePress = this.openLink.bind(this, item.full_picture); const onOutLinkPress = this.openLink.bind(this, item.permalink_url); return ( - - - - - - {NAME_AMICALE} - {HomeScreen.getFormattedDate(item.created_time)} - - - - - - {item.full_picture !== '' && item.full_picture !== undefined ? - - - - : } - {item.message !== undefined ? - : - } - - - - - - - + En savoir plus + + + ); } diff --git a/screens/PlanningDisplayScreen.js b/screens/PlanningDisplayScreen.js index 37d8996..b79628a 100644 --- a/screens/PlanningDisplayScreen.js +++ b/screens/PlanningDisplayScreen.js @@ -1,12 +1,12 @@ // @flow import * as React from 'react'; -import {Image} from 'react-native'; -import {Container, Content, H1, H3, View} from 'native-base'; +import {Image, ScrollView, View} from 'react-native'; import ThemeManager from "../utils/ThemeManager"; import HTML from "react-native-render-html"; import {Linking} from "expo"; import PlanningEventManager from '../utils/PlanningEventManager'; +import {Subheading, Title} from 'react-native-paper'; type Props = { navigation: Object, @@ -27,38 +27,32 @@ export default class PlanningDisplayScreen extends React.Component { render() { // console.log("rendering planningDisplayScreen"); return ( - - -

- {this.displayData.title} -

-

- {PlanningEventManager.getFormattedTime(this.displayData)} -

- {this.displayData.logo !== null ? - - - - : } + + + {this.displayData.title} + + + {PlanningEventManager.getFormattedTime(this.displayData)} + + {this.displayData.logo !== null ? + + + + : } - {this.displayData.description !== null ? - // Surround description with div to allow text styling if the description is not html - " + this.displayData.description + ""} - tagsStyles={{ - p: { - color: ThemeManager.getCurrentThemeVariables().textColor, - fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase - }, - div: {color: ThemeManager.getCurrentThemeVariables().textColor} - }} - onLinkPress={openWebLink}/> - : } - - + {this.displayData.description !== null ? + // Surround description with div to allow text styling if the description is not html + " + this.displayData.description + ""} + tagsStyles={{ + p: { + color: ThemeManager.getCurrentThemeVariables().text, + }, + div: {color: ThemeManager.getCurrentThemeVariables().text} + }} + onLinkPress={openWebLink}/> + : } + ); } } diff --git a/screens/PlanningScreen.js b/screens/PlanningScreen.js index 2b941e3..32f4460 100644 --- a/screens/PlanningScreen.js +++ b/screens/PlanningScreen.js @@ -1,14 +1,13 @@ // @flow import * as React from 'react'; -import {BackHandler, Image} from 'react-native'; -import {H3, Text, View} from 'native-base'; +import {BackHandler, Image, View} from 'react-native'; import i18n from "i18n-js"; import ThemeManager from "../utils/ThemeManager"; import {Agenda, LocaleConfig} from 'react-native-calendars'; -import Touchable from 'react-native-platform-touchable'; import WebDataManager from "../utils/WebDataManager"; import PlanningEventManager from '../utils/PlanningEventManager'; +import {Text, Title, List, Avatar, Divider} from 'react-native-paper'; LocaleConfig.locales['fr'] = { monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], @@ -87,12 +86,6 @@ export default class PlanningScreen extends React.Component { this.onBackButtonPressAndroid = this.onBackButtonPressAndroid.bind(this); } - shouldComponentUpdate(nextProps: Props, nextState: State): boolean { - return nextState.refreshing === false && this.state.refreshing === true || - nextState.agendaItems !== this.state.agendaItems || - nextState.calendarShowing !== this.state.calendarShowing; - } - componentDidMount() { this.onRefresh(); this.willBlurSubscription = this.props.navigation.addListener( @@ -114,11 +107,6 @@ export default class PlanningScreen extends React.Component { } }; - componentWillUnmount() { - this.didFocusSubscription && this.didFocusSubscription.remove(); - this.willBlurSubscription && this.willBlurSubscription.remove(); - } - getCurrentDate() { let today = new Date(); return this.getFormattedDate(today); @@ -141,63 +129,36 @@ export default class PlanningScreen extends React.Component { } getRenderItem(item: Object) { - return ( - this.props.navigation.navigate('PlanningDisplayScreen', {data: item})}> - - - - {PlanningEventManager.getFormattedTime(item)} - -

{item.title}

- - - {item.logo !== null ? - - : } - + const onPress = this.props.navigation.navigate.bind(this, 'PlanningDisplayScreen', {data: item}); + if (item.logo !== null) { + return ( + + + } + onPress={onPress} + /> - - ); + ); + } else { + return ( + + + + + ); + } } getRenderEmptyDate() { return ( - - - + ); } @@ -303,28 +264,28 @@ export default class PlanningScreen extends React.Component { // agenda theme theme={{ backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor, - calendarBackground: ThemeManager.getCurrentThemeVariables().containerBgColor, - textSectionTitleColor: ThemeManager.getCurrentThemeVariables().listNoteColor, - selectedDayBackgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary, + calendarBackground: ThemeManager.getCurrentThemeVariables().background, + textSectionTitleColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor, + selectedDayBackgroundColor: ThemeManager.getCurrentThemeVariables().primary, selectedDayTextColor: '#ffffff', - todayTextColor: ThemeManager.getCurrentThemeVariables().brandPrimary, - dayTextColor: ThemeManager.getCurrentThemeVariables().textColor, - textDisabledColor: ThemeManager.getCurrentThemeVariables().textDisabledColor, - dotColor: ThemeManager.getCurrentThemeVariables().brandPrimary, + todayTextColor: ThemeManager.getCurrentThemeVariables().primary, + dayTextColor: ThemeManager.getCurrentThemeVariables().text, + textDisabledColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor, + dotColor: ThemeManager.getCurrentThemeVariables().primary, selectedDotColor: '#ffffff', arrowColor: 'orange', - monthTextColor: ThemeManager.getCurrentThemeVariables().brandPrimary, - indicatorColor: ThemeManager.getCurrentThemeVariables().brandPrimary, + monthTextColor: ThemeManager.getCurrentThemeVariables().primary, + indicatorColor: ThemeManager.getCurrentThemeVariables().primary, textDayFontWeight: '300', textMonthFontWeight: 'bold', textDayHeaderFontWeight: '300', textDayFontSize: 16, textMonthFontSize: 16, textDayHeaderFontSize: 16, - agendaDayTextColor: ThemeManager.getCurrentThemeVariables().listNoteColor, - agendaDayNumColor: ThemeManager.getCurrentThemeVariables().listNoteColor, - agendaTodayColor: ThemeManager.getCurrentThemeVariables().brandPrimary, - agendaKnobColor: ThemeManager.getCurrentThemeVariables().brandPrimary, + agendaDayTextColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor, + agendaDayNumColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor, + agendaTodayColor: ThemeManager.getCurrentThemeVariables().primary, + agendaKnobColor: ThemeManager.getCurrentThemeVariables().primary, }} /> ); diff --git a/screens/Proximo/ProximoAboutScreen.js b/screens/Proximo/ProximoAboutScreen.js index 3c25636..25581c0 100644 --- a/screens/Proximo/ProximoAboutScreen.js +++ b/screens/Proximo/ProximoAboutScreen.js @@ -1,10 +1,9 @@ // @flow import * as React from 'react'; -import {Image, View} from 'react-native'; -import {Card, CardItem, Container, Content, H2, Left, Text} from 'native-base'; +import {Image, ScrollView, View} from 'react-native'; import i18n from "i18n-js"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; +import {Text, Card, List, Paragraph} from 'react-native-paper'; type Props = { navigation: Object, @@ -16,52 +15,41 @@ type Props = { export default class ProximoAboutScreen extends React.Component { render() { - const nav = this.props.navigation; return ( - - - - - - {i18n.t('proximoScreen.description')} - - - - -

{i18n.t('proximoScreen.openingHours')}

- - - - 18h30 - 19h30 - - - - - - -

{i18n.t('proximoScreen.paymentMethods')}

- - - - {i18n.t('proximoScreen.paymentMethodsDescription')} - - - - + + + + + {i18n.t('proximoScreen.description')} + + } + /> + + 18h30 - 19h30 + + + + } + /> + + 18{i18n.t('proximoScreen.paymentMethodsDescription')} + + + ); } } diff --git a/screens/Proximo/ProximoListScreen.js b/screens/Proximo/ProximoListScreen.js index ee1b90f..3a9b5a9 100644 --- a/screens/Proximo/ProximoListScreen.js +++ b/screens/Proximo/ProximoListScreen.js @@ -1,14 +1,12 @@ // @flow import * as React from 'react'; -import {Body, Content, H1, H3, Input, Item, Left, ListItem, Right, Text, Thumbnail} from 'native-base'; -import {FlatList, Image, Platform, View} from "react-native"; -import Touchable from 'react-native-platform-touchable'; -import Menu, {MenuItem} from 'react-native-material-menu'; +import {FlatList, Image, ScrollView, View} from "react-native"; import i18n from "i18n-js"; import {MaterialCommunityIcons} from "@expo/vector-icons"; import ThemeManager from "../../utils/ThemeManager"; import {Modalize} from 'react-native-modalize'; +import {Avatar, Divider, IconButton, List, Menu, Searchbar, Subheading, Text, Title} from "react-native-paper"; const sortMode = { price: "0", @@ -51,6 +49,7 @@ type State = { sortNameIcon: React.Node, modalCurrentDisplayItem: Object, currentlyDisplayedData: Array, + menuVisible: boolean, }; /** @@ -62,13 +61,11 @@ export default class ProximoListScreen extends React.Component { originalData: Array; shouldFocusSearchBar: boolean; - sortMenuRef: Menu; - - onMenuRef: Function; onSearchStringChange: Function; onSelectSortModeName: Function; onSelectSortModePrice: Function; onSortMenuPress: Function; + onSortMenuDismiss: Function; renderItem: Function; constructor(props: any) { @@ -83,24 +80,17 @@ export default class ProximoListScreen extends React.Component { sortPriceIcon: '', sortNameIcon: '', modalCurrentDisplayItem: {}, + menuVisible: false, }; - this.onMenuRef = this.onMenuRef.bind(this); this.onSearchStringChange = this.onSearchStringChange.bind(this); this.onSelectSortModeName = this.onSelectSortModeName.bind(this); this.onSelectSortModePrice = this.onSelectSortModePrice.bind(this); this.onSortMenuPress = this.onSortMenuPress.bind(this); + this.onSortMenuDismiss = this.onSortMenuPress.bind(this); this.renderItem = this.renderItem.bind(this); } - /** - * Saves the reference to the sort menu for later use - * - * @param ref The menu reference - */ - onMenuRef(ref: Menu) { - this.sortMenuRef = ref; - }; /** * Sets the sort mode based on the one selected. @@ -146,8 +136,6 @@ export default class ProximoListScreen extends React.Component { break; } this.setupSortIcons(mode, isReverse); - if (this.sortMenuRef !== undefined) - this.sortMenuRef.hide(); } /** @@ -165,23 +153,10 @@ export default class ProximoListScreen extends React.Component { getSearchBar() { return ( - - - - - - + ); } @@ -194,11 +169,11 @@ export default class ProximoListScreen extends React.Component { getStockColor(availableStock: number) { let color: string; if (availableStock > 3) - color = ThemeManager.getCurrentThemeVariables().brandSuccess; + color = ThemeManager.getCurrentThemeVariables().success; else if (availableStock > 0) - color = ThemeManager.getCurrentThemeVariables().brandWarning; + color = ThemeManager.getCurrentThemeVariables().warning; else - color = ThemeManager.getCurrentThemeVariables().brandDanger; + color = ThemeManager.getCurrentThemeVariables().danger; return color; } @@ -212,12 +187,10 @@ export default class ProximoListScreen extends React.Component { const downSortIcon = ; const upSortIcon = ; switch (mode) { case sortMode.price: @@ -274,27 +247,27 @@ export default class ProximoListScreen extends React.Component { flex: 1, padding: 20 }}> -

{this.state.modalCurrentDisplayItem.name}

+ {this.state.modalCurrentDisplayItem.name} -

{this.state.modalCurrentDisplayItem.quantity + ' ' + i18n.t('proximoScreen.inStock')} -

-

{this.state.modalCurrentDisplayItem.price}€

+ + {this.state.modalCurrentDisplayItem.price}€ - + {this.state.modalCurrentDisplayItem.description} - + ); } @@ -317,65 +290,50 @@ export default class ProximoListScreen extends React.Component { } onSortMenuPress() { - this.sortMenuRef.show(); + this.setState({menuVisible: true}); + console.log('pressed'); } + onSortMenuDismiss() { + this.setState({menuVisible: false}); + } getSortMenu() { return ( - - + visible={this.state.menuVisible} + onDismiss={this.onSortMenuDismiss} + anchor={ + } > - - {this.state.sortNameIcon} - {i18n.t('proximoScreen.sortName')} - - - {this.state.sortPriceIcon} - {i18n.t('proximoScreen.sortPrice')} - + + + ); } renderItem({item}: Object) { - const onListItemPress = this.onListItemPress.bind(this, item); - return ( - - - - - - {item.name} - - - {item.quantity + ' ' + i18n.t('proximoScreen.inStock')} - - - - - {item.price}€ - - - ); + const onPress = this.onListItemPress.bind(this, item); + return ( + } + right={props => + + {item.price}€ + } + /> + ); } keyExtractor(item: Object) { @@ -384,12 +342,11 @@ export default class ProximoListScreen extends React.Component { render() { // console.log("rendering ProximoListScreen"); - const nav = this.props.navigation; return ( + modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().card}}> {this.getModalContent()} { - - - - - - + + ); } @@ -185,36 +178,20 @@ export default class ProximoMainScreen extends React.Component { shouldFocusSearchBar: false, data: item, }; + const subtitle = item.data.length + " " + (item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article')); const onPress = this.props.navigation.navigate.bind(this, 'ProximoListScreen', dataToSend); if (item.data.length > 0) { return ( - - - - - - - {item.type.name} - - - {item.data.length} {item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article')} - - - - - - + left={props => } + right={props => } + /> ); } else return ; diff --git a/screens/Proxiwash/ProxiwashAboutScreen.js b/screens/Proxiwash/ProxiwashAboutScreen.js index 14e6c1c..0176460 100644 --- a/screens/Proxiwash/ProxiwashAboutScreen.js +++ b/screens/Proxiwash/ProxiwashAboutScreen.js @@ -1,11 +1,9 @@ // @flow import * as React from 'react'; -import {Image, View} from 'react-native'; -import {Body, Card, CardItem, Content, H2, H3, Left, Tab, TabHeading, Tabs, Text} from 'native-base'; +import {Image, View, ScrollView} from 'react-native'; import i18n from "i18n-js"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; -import ThemeManager from "../../utils/ThemeManager"; +import {Card, List, Paragraph, Text, Title} from 'react-native-paper'; type Props = { navigation: Object, @@ -18,129 +16,67 @@ export default class ProxiwashAboutScreen extends React.Component { render() { return ( - - - - {i18n.t('proxiwashScreen.informationTab')} - - } - key={1} - style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> - - - - - {i18n.t('proxiwashScreen.description')} - - - - -

{i18n.t('proxiwashScreen.dryer')}

- - - - -

{i18n.t('proxiwashScreen.procedure')}

- {i18n.t('proxiwashScreen.dryerProcedure')} - - - - -

{i18n.t('proxiwashScreen.tips')}

- {i18n.t('proxiwashScreen.dryerTips')} - - - - - - - -

{i18n.t('proxiwashScreen.washer')}

- - - - -

{i18n.t('proxiwashScreen.procedure')}

- {i18n.t('proxiwashScreen.washerProcedure')} - - - - -

{i18n.t('proxiwashScreen.tips')}

- {i18n.t('proxiwashScreen.washerTips')} - - - - - - - - {i18n.t('proxiwashScreen.paymentTab')} - - } - key={2} - style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> - - - - - -

{i18n.t('proxiwashScreen.tariffs')}

- - - - - {i18n.t('proxiwashScreen.washersTariff')} - {i18n.t('proxiwashScreen.dryersTariff')} - - - - - - - -

{i18n.t('proxiwashScreen.paymentMethods')}

- - - - - {i18n.t('proxiwashScreen.paymentMethodsDescription')} - - - - - - + + + + + {i18n.t('proxiwashScreen.description')} + + } + /> + + {i18n.t('proxiwashScreen.procedure')} + {i18n.t('proxiwashScreen.dryerProcedure')} + {i18n.t('proxiwashScreen.tips')} + {i18n.t('proxiwashScreen.dryerTips')} + + + + + } + /> + + {i18n.t('proxiwashScreen.procedure')} + {i18n.t('proxiwashScreen.washerProcedure')} + {i18n.t('proxiwashScreen.tips')} + {i18n.t('proxiwashScreen.washerTips')} + + + + + } + /> + + {i18n.t('proxiwashScreen.washersTariff')} + {i18n.t('proxiwashScreen.dryersTariff')} + + + + } + /> + + {i18n.t('proxiwashScreen.paymentMethodsDescription')} + + + ); } } diff --git a/screens/Proxiwash/ProxiwashScreen.js b/screens/Proxiwash/ProxiwashScreen.js index fd84a4f..8477b9f 100644 --- a/screens/Proxiwash/ProxiwashScreen.js +++ b/screens/Proxiwash/ProxiwashScreen.js @@ -2,16 +2,13 @@ import * as React from 'react'; import {Alert, Platform, View} from 'react-native'; -import {Body, Card, CardItem, Left, Right, Text} from 'native-base'; import ThemeManager from '../../utils/ThemeManager'; import i18n from "i18n-js"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; import WebSectionList from "../../components/WebSectionList"; import NotificationsManager from "../../utils/NotificationsManager"; -import PlatformTouchable from "react-native-platform-touchable"; -import Touchable from "react-native-platform-touchable"; import AsyncStorageManager from "../../utils/AsyncStorageManager"; import * as Expo from "expo"; +import {Divider, IconButton, List, Text} from 'react-native-paper'; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json"; @@ -288,17 +285,12 @@ export default class ProxiwashScreen extends React.Component { getRightButton() { return ( - - - + ); } @@ -327,75 +319,52 @@ export default class ProxiwashScreen extends React.Component { let machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number; let isDryer = section.title === i18n.t('proxiwashScreen.dryers'); const onPress = this.showAlert.bind(this, machineName, item, isDryer); + let width = item.donePercent !== '' ? (parseInt(item.donePercent)).toString() + '%' : 0; + if (MACHINE_STATES[item.state] === '0') + width = '100%'; return ( - - - + + - - - - - - - - - {machineName + ' '} - {this.isMachineWatched(item.number) ? - : ''} - - - {isMachineRunning ? item.startTime + '/' + item.endTime : ''} - - - - - - {stateStrings[MACHINE_STATES[item.state]]} - - - - - ); + left={props => this.isMachineWatched(item.number) ? + : + } + right={props => ( + + + + {stateStrings[MACHINE_STATES[item.state]]} + + + + + )} + /> + + + ); } } diff --git a/screens/SelfMenuScreen.js b/screens/SelfMenuScreen.js index 127224b..226e108 100644 --- a/screens/SelfMenuScreen.js +++ b/screens/SelfMenuScreen.js @@ -2,10 +2,10 @@ import * as React from 'react'; import {View} from 'react-native'; -import {Card, CardItem, H2, H3, Text} from 'native-base'; import ThemeManager from "../utils/ThemeManager"; import i18n from "i18n-js"; import WebSectionList from "../components/WebSectionList"; +import {Card, Text, Title} from 'react-native-paper'; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/menu/menu_data.json"; @@ -102,11 +102,11 @@ export default class SelfMenuScreen extends React.Component { marginBottom: 10, borderRadius: 50 }}> -

{section.title}

+ }}>{section.title} ); } @@ -115,42 +115,32 @@ export default class SelfMenuScreen extends React.Component { return ( - -

{item.name}

+ - - + {item.dishes.map((object) => {object.name !== "" ? {this.formatName(object.name)} : } )} - + ); } diff --git a/screens/SettingsScreen.js b/screens/SettingsScreen.js index 20ca284..1de1a6e 100644 --- a/screens/SettingsScreen.js +++ b/screens/SettingsScreen.js @@ -1,13 +1,12 @@ // @flow import * as React from 'react'; -import {Body, Card, CardItem, CheckBox, Content, Left, List, ListItem, Picker, Right, Text,} from "native-base"; +import {ScrollView, View} from "react-native"; import ThemeManager from '../utils/ThemeManager'; import i18n from "i18n-js"; -import {NavigationActions, StackActions} from "@react-navigation/native"; -import {MaterialCommunityIcons} from "@expo/vector-icons"; import AsyncStorageManager from "../utils/AsyncStorageManager"; import NotificationsManager from "../utils/NotificationsManager"; +import {Card, List, Switch, RadioButton, Text, TouchableRipple} from 'react-native-paper'; type Props = { navigation: Object, @@ -51,28 +50,25 @@ export default class SettingsScreen extends React.Component { */ static getGeneralItem(control: React.Node, icon: string, title: string, subtitle: string) { return ( - - - - - - - {title} - - - {subtitle} - - + } + right={props => control} + /> + ); + } - - {control} - - + getRadioButton(onPress: Function, value: string, label: string) { + return ( + + + {label} + + + ); } @@ -113,19 +109,16 @@ export default class SettingsScreen extends React.Component { */ getProxiwashNotifPicker() { return ( - - - - - - - + + + + + + ); } @@ -136,19 +129,16 @@ export default class SettingsScreen extends React.Component { */ getStartScreenPicker() { return ( - - - - - - - + + + + + + ); } @@ -158,19 +148,6 @@ export default class SettingsScreen extends React.Component { onToggleNightMode() { ThemeManager.getInstance().setNightMode(!this.state.nightMode); this.setState({nightMode: !this.state.nightMode}); - this.resetStack(); - } - - /** - * Reset react navigation stack to allow for a theme reset - */ - resetStack() { - const resetAction = StackActions.reset({ - index: 0, - key: null, - actions: [NavigationActions.navigate({routeName: 'Main'})], - }); - this.props.navigation.dispatch(resetAction); } /** @@ -184,57 +161,47 @@ export default class SettingsScreen extends React.Component { */ getToggleItem(onPressCallback: Function, icon: string, title: string, subtitle: string) { return ( - - - - - - - {title} - - - {subtitle} - - - - - - + } + right={props => + } + /> ); } render() { return ( - - - - {i18n.t('settingsScreen.generalCard')} - - + + + + {this.getToggleItem(this.onToggleNightMode, 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))} - {SettingsScreen.getGeneralItem(this.getStartScreenPicker(), 'power', i18n.t('settingsScreen.startScreen'), i18n.t('settingsScreen.startScreenSub'))} - + } + > + {this.getStartScreenPicker()} + + - - - Proxiwash - - - {SettingsScreen.getGeneralItem(this.getProxiwashNotifPicker(), 'washing-machine', i18n.t('settingsScreen.proxiwashNotifReminder'), i18n.t('settingsScreen.proxiwashNotifReminderSub'))} - + + + } + > + {this.getProxiwashNotifPicker()} + - + ); } } diff --git a/utils/ThemeManager.js b/utils/ThemeManager.js index cad5868..207ffcd 100644 --- a/utils/ThemeManager.js +++ b/utils/ThemeManager.js @@ -1,10 +1,8 @@ // @flow -import platform from '../native-base-theme/variables/platform'; -import platformDark from '../native-base-theme/variables/platformDark'; -import getTheme from '../native-base-theme/components'; import AsyncStorageManager from "./AsyncStorageManager"; - +// import {DarkTheme as NavDarkTheme, DefaultTheme as NavDefaultTheme} from '@react-navigation/native'; +import {DarkTheme, DefaultTheme} from 'react-native-paper'; /** * Singleton class used to manage themes */ @@ -17,6 +15,78 @@ export default class ThemeManager { this.updateThemeCallback = null; } + static getWhiteTheme() { + return { + ...DefaultTheme, + colors: { + ...DefaultTheme.colors, + primary: '#be1522', + accent: '#be1522', + card: "rgb(255, 255, 255)", + dividerBackground: '#e2e2e2', + textDisabled: '#c1c1c1', + icon: '#5d5d5d', + success: "#5cb85c", + warning: "#f0ad4e", + danger: "#d9534f", + + // Calendar/Agenda + agendaBackgroundColor: '#f3f3f4', + agendaDayTextColor: '#636363', + + // 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)", + + // Screens + planningColor: '#d9b10a', + proximoColor: '#ec5904', + proxiwashColor: '#1fa5ee', + menuColor: '#e91314', + tutorinsaColor: '#f93943', + }, + }; + } + + static getDarkTheme() { + return { + ...DarkTheme, + colors: { + ...DarkTheme.colors, + primary: '#be1522', + accent: '#be1522', + card: "rgb(18, 18, 18)", + dividerBackground: '#222222', + textDisabled: '#5b5b5b', + icon: '#b3b3b3', + success: "#5cb85c", + warning: "#f0ad4e", + danger: "#d9534f", + + // Calendar/Agenda + agendaBackgroundColor: '#171717', + agendaDayTextColor: '#6d6d6d', + + // PROXIWASH + proxiwashFinishedColor: "rgba(17,149,32,0.53)", + proxiwashReadyColor: "transparent", + proxiwashRunningColor: "rgba(29,59,175,0.65)", + proxiwashBrokenColor: "#000000", + proxiwashErrorColor: "rgba(213,8,0,0.57)", + + // Screens + planningColor: '#d99e09', + proximoColor: '#ec5904', + proxiwashColor: '#1fa5ee', + menuColor: '#b81213', + tutorinsaColor: '#f93943', + }, + }; + } + /** * Get this class instance or create one if none is found * @returns {ThemeManager} @@ -27,6 +97,32 @@ export default class ThemeManager { ThemeManager.instance; } + /** + * @returns {boolean} Night mode state + */ + static getNightMode(): boolean { + return AsyncStorageManager.getInstance().preferences.nightMode.current === '1'; + } + + /** + * Get the current theme based on night mode + * @returns {Object} + */ + static getCurrentTheme(): Object { + if (ThemeManager.getNightMode()) + return ThemeManager.getDarkTheme(); + else + return ThemeManager.getWhiteTheme(); + } + + /** + * Get the variables contained in the current theme + * @returns {Object} + */ + static getCurrentThemeVariables(): Object { + return ThemeManager.getCurrentTheme().colors; + } + /** * Set the function to be called when the theme is changed (allows for general reload of the app) * @param callback Function to call after theme change @@ -47,30 +143,4 @@ export default class ThemeManager { this.updateThemeCallback(); } - /** - * @returns {boolean} Night mode state - */ - static getNightMode(): boolean { - return AsyncStorageManager.getInstance().preferences.nightMode.current === '1'; - } - - /** - * Get the current theme based on night mode - * @returns {Object} - */ - static getCurrentTheme(): Object { - if (ThemeManager.getNightMode()) - return getTheme(platformDark); - else - return getTheme(platform); - } - - /** - * Get the variables contained in the current theme - * @returns {Object} - */ - static getCurrentThemeVariables(): Object { - return ThemeManager.getCurrentTheme().variables; - } - }; diff --git a/utils/WebDataManager.js b/utils/WebDataManager.js index 45eda76..251c299 100644 --- a/utils/WebDataManager.js +++ b/utils/WebDataManager.js @@ -1,4 +1,3 @@ -import {Toast} from "native-base"; /** * Class used to get json data from the web @@ -48,15 +47,15 @@ export default class WebDataManager { * @param errorString */ showUpdateToast(errorString) { - let isSuccess = this.isDataObjectValid(); - if (!isSuccess) { - Toast.show({ - text: errorString, - buttonText: 'OK', - type: isSuccess ? "success" : "danger", - duration: 2000 - }); - } + // let isSuccess = this.isDataObjectValid(); + // if (!isSuccess) { + // Toast.show({ + // text: errorString, + // buttonText: 'OK', + // type: isSuccess ? "success" : "danger", + // duration: 2000 + // }); + // } } }