lpitault/application-amicale
1
0
Fork 0
forked from vergnet/application-amicale
Code Issues Pull requests Releases Wiki Activity

Replaced native base with react native paper

Browse source
This commit is contained in:
keplyx 2020-03-06 23:15:01 +01:00
parent 79eaefab88
commit 1f64c734aa
73 changed files with 828 additions and 5683 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
App.js
View file

@ -2,18 +2,17 @@
import * as React from 'react'; import * as React from 'react';
import {Platform, StatusBar} from 'react-native'; import {Platform, StatusBar} from 'react-native';
import {Root, StyleProvider} from 'native-base';
import LocaleManager from './utils/LocaleManager'; import LocaleManager from './utils/LocaleManager';
import * as Font from 'expo-font'; import * as Font from 'expo-font';
import {clearThemeCache} from 'native-base-shoutem-theme';
import AsyncStorageManager from "./utils/AsyncStorageManager"; import AsyncStorageManager from "./utils/AsyncStorageManager";
import CustomIntroSlider from "./components/CustomIntroSlider"; import CustomIntroSlider from "./components/CustomIntroSlider";
import {SplashScreen} from 'expo'; import {SplashScreen} from 'expo';
import ThemeManager from './utils/ThemeManager'; import ThemeManager from './utils/ThemeManager';
import { NavigationContainer } from '@react-navigation/native'; import {NavigationContainer} from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack'; import {createStackNavigator} from '@react-navigation/stack';
import DrawerNavigator from './navigation/DrawerNavigator'; import DrawerNavigator from './navigation/DrawerNavigator';
import NotificationsManager from "./utils/NotificationsManager"; import NotificationsManager from "./utils/NotificationsManager";
import {Provider as PaperProvider} from 'react-native-paper';
type Props = {}; type Props = {};
@ -24,6 +23,17 @@ type State = {
currentTheme: ?Object, 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(); const Stack = createStackNavigator();
export default class App extends React.Component<Props, State> { export default class App extends React.Component<Props, State> {
@ -51,7 +61,6 @@ export default class App extends React.Component<Props, State> {
currentTheme: ThemeManager.getCurrentTheme() currentTheme: ThemeManager.getCurrentTheme()
}); });
this.setupStatusBar(); this.setupStatusBar();
clearThemeCache();
} }
setupStatusBar() { setupStatusBar() {
@ -84,9 +93,6 @@ export default class App extends React.Component<Props, State> {
// Wait for custom fonts to be loaded before showing the app // Wait for custom fonts to be loaded before showing the app
// console.log("loading Fonts"); // console.log("loading Fonts");
SplashScreen.preventAutoHide(); SplashScreen.preventAutoHide();
await Font.loadAsync({
'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
});
// console.log("loading preferences"); // console.log("loading preferences");
await AsyncStorageManager.getInstance().loadPreferences(); await AsyncStorageManager.getInstance().loadPreferences();
ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme()); ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme());
@ -122,15 +128,13 @@ export default class App extends React.Component<Props, State> {
} else { } else {
return ( return (
<Root> <PaperProvider theme={this.state.currentTheme}>
<StyleProvider style={this.state.currentTheme}> <NavigationContainer theme={this.state.currentTheme}>
<NavigationContainer> <Stack.Navigator headerMode="none">
<Stack.Navigator headerMode="none"> <Stack.Screen name="Root" component={DrawerNavigator}/>
<Stack.Screen name="Root" component={DrawerNavigator} /> </Stack.Navigator>
</Stack.Navigator> </NavigationContainer>
</NavigationContainer> </PaperProvider>
</StyleProvider>
</Root>
); );
} }
} }

2
components/CustomIntroSlider.js
View file

@ -4,7 +4,7 @@ import * as React from 'react';
import {LinearGradient} from "expo-linear-gradient"; import {LinearGradient} from "expo-linear-gradient";
import {Image, StyleSheet, View} from "react-native"; import {Image, StyleSheet, View} from "react-native";
import {MaterialCommunityIcons} from "@expo/vector-icons"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import {Text} from "native-base"; import {Text} from "react-native-paper";
import i18n from 'i18n-js'; import i18n from 'i18n-js';
import AppIntroSlider from "react-native-app-intro-slider"; import AppIntroSlider from "react-native-app-intro-slider";

205
components/DashboardItem.js
View file

@ -1,16 +1,13 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Body, Card, CardItem, H3, Left, Text, Thumbnail} from "native-base";
import {MaterialCommunityIcons} from "@expo/vector-icons"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import {View} from "react-native"; import {View} from "react-native";
import ThemeManager from "../utils/ThemeManager"; import ThemeManager from "../utils/ThemeManager";
import HTML from "react-native-render-html"; import HTML from "react-native-render-html";
import {LinearGradient} from "expo-linear-gradient"; import {LinearGradient} from "expo-linear-gradient";
import PlatformTouchable from "react-native-platform-touchable";
import i18n from "i18n-js"; import i18n from "i18n-js";
import {Avatar, Card, Text, Title} from 'react-native-paper';
const CARD_BORDER_RADIUS = 10;
type Props = { type Props = {
isAvailable: boolean, isAvailable: boolean,
@ -72,74 +69,73 @@ export default class DashboardItem extends React.Component<Props> {
getEventPreviewContainer() { getEventPreviewContainer() {
if (this.props.displayEvent !== undefined && this.props.displayEvent !== null) { if (this.props.displayEvent !== undefined && this.props.displayEvent !== null) {
const hasImage = this.props.displayEvent['logo'] !== '' && this.props.displayEvent['logo'] !== null;
return ( return (
<View> <Card style={{marginBottom: 10}}>
<CardItem style={{ {hasImage ?
paddingTop: 0, <Card.Title
paddingBottom: 0, title={this.props.displayEvent['title']}
backgroundColor: 'transparent', subtitle={this.getFormattedEventTime(this.props.displayEvent)}
}}> left={() =>
<Left> <Avatar.Image
{this.props.displayEvent['logo'] !== '' && this.props.displayEvent['logo'] !== null ? source={{uri: this.props.displayEvent['logo']}}
<Thumbnail source={{uri: this.props.displayEvent['logo']}} square/> : size={60}
<View/>} style={{backgroundColor: 'transparent'}}/>
<Body> }
<Text>{this.props.displayEvent['title']}</Text> /> :
<Text note>{this.getFormattedEventTime(this.props.displayEvent)}</Text> <Card.Title
</Body> title={this.props.displayEvent['title']}
</Left> subtitle={this.getFormattedEventTime(this.props.displayEvent)}
</CardItem> />}
<CardItem style={{ <View>
borderRadius: CARD_BORDER_RADIUS, <Card.Content style={{
backgroundColor: 'transparent', height: this.props.displayEvent['description'].length > 70 ? 100 : 50,
}}>
<Body style={{
height: this.props.displayEvent['description'].length > 50 ? 70 : 20,
overflow: 'hidden', overflow: 'hidden',
}}> }}>
<HTML html={"<div>" + this.props.displayEvent['description'] + "</div>"} <HTML html={"<div>" + this.props.displayEvent['description'] + "</div>"}
tagsStyles={{ tagsStyles={{
p: { p: {
color: ThemeManager.getCurrentThemeVariables().textColor, color: ThemeManager.getCurrentThemeVariables().text,
fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase,
}, },
div: {color: ThemeManager.getCurrentThemeVariables().textColor}, div: {color: ThemeManager.getCurrentThemeVariables().text},
}}/> }}/>
<LinearGradient
colors={[ </Card.Content>
// Fix for ios gradient: transparent color must match final color <LinearGradient
ThemeManager.getNightMode() ? 'rgba(42,42,42,0)' : 'rgba(255,255,255,0)', colors={[
ThemeManager.getCurrentThemeVariables().cardDefaultBg // Fix for ios gradient: transparent color must match final color
]} ThemeManager.getNightMode() ? 'rgba(42,42,42,0)' : 'rgba(255,255,255,0)',
start={{x: 0, y: 0}} ThemeManager.getCurrentThemeVariables().card
end={{x: 0, y: 0.6}} ]}
// end={[0, 0.6]} start={{x: 0, y: 0}}
style={{ end={{x: 0, y: 0.6}}
position: 'absolute', // end={[0, 0.6]}
width: '100%', style={{
height: 65, position: 'absolute',
bottom: -5, width: '100%',
}}> height: 65,
<View style={{ bottom: -5,
marginLeft: 'auto', }}>
<View style={{
marginLeft: 'auto',
marginTop: 'auto',
flexDirection: 'row'
}}>
<Text style={{
marginTop: 'auto', marginTop: 'auto',
flexDirection: 'row' marginBottom: 'auto',
padding: 0,
}}> }}>
<Text style={{ {i18n.t("homeScreen.dashboard.seeMore")}
marginTop: 'auto', </Text>
marginBottom: 'auto', <MaterialCommunityIcons
padding: 0, name={'chevron-right'}
}}> size={26}
{i18n.t("homeScreen.dashboard.seeMore")} color={ThemeManager.getCurrentThemeVariables().text}/>
</Text> </View>
<MaterialCommunityIcons </LinearGradient>
name={'chevron-right'} </View>
size={26}/> </Card>
</View>
</LinearGradient>
</Body>
</CardItem>
</View>
); );
} else } else
return <View/> return <View/>
@ -152,7 +148,7 @@ export default class DashboardItem extends React.Component<Props> {
color={ color={
this.props.isAvailable ? this.props.isAvailable ?
this.props.color : this.props.color :
ThemeManager.getCurrentThemeVariables().textDisabledColor ThemeManager.getCurrentThemeVariables().textDisabled
} }
size={this.props.isSquare ? 50 : 40}/> size={this.props.isSquare ? 50 : 40}/>
); );
@ -163,19 +159,19 @@ export default class DashboardItem extends React.Component<Props> {
<View style={{ <View style={{
width: this.props.isSquare ? '100%' : 'auto', width: this.props.isSquare ? '100%' : 'auto',
}}> }}>
<H3 style={{ <Title style={{
color: this.props.isAvailable ? color: this.props.isAvailable ?
ThemeManager.getCurrentThemeVariables().textColor : ThemeManager.getCurrentThemeVariables().text :
ThemeManager.getCurrentThemeVariables().listNoteColor, ThemeManager.getCurrentThemeVariables().textDisabled,
textAlign: this.props.isSquare ? 'center' : 'left', textAlign: this.props.isSquare ? 'center' : 'left',
width: this.props.isSquare ? '100%' : 'auto', width: this.props.isSquare ? '100%' : 'auto',
}}> }}>
{this.props.title} {this.props.title}
</H3> </Title>
<Text style={{ <Text style={{
color: this.props.isAvailable ? color: this.props.isAvailable ?
ThemeManager.getCurrentThemeVariables().listNoteColor : ThemeManager.getCurrentThemeVariables().text :
ThemeManager.getCurrentThemeVariables().textDisabledColor, ThemeManager.getCurrentThemeVariables().textDisabled,
textAlign: this.props.isSquare ? 'center' : 'left', textAlign: this.props.isSquare ? 'center' : 'left',
width: this.props.isSquare ? '100%' : 'auto', width: this.props.isSquare ? '100%' : 'auto',
}}> }}>
@ -188,21 +184,12 @@ export default class DashboardItem extends React.Component<Props> {
getContent() { getContent() {
if (this.props.isSquare) { if (this.props.isSquare) {
return ( return (
<Body> <View>
<View style={{marginLeft: 'auto', marginRight: 'auto'}}> <View style={{marginLeft: 'auto', marginRight: 'auto'}}>
{this.getIcon()} {this.getIcon()}
</View> </View>
{this.getText()} {this.getText()}
</Body> </View>
);
} else {
return (
<Left>
{this.getIcon()}
<Body>
{this.getText()}
</Body>
</Left>
); );
} }
} }
@ -217,33 +204,41 @@ export default class DashboardItem extends React.Component<Props> {
else else
marginRight = 0 marginRight = 0
} }
const color = this.props.isAvailable ?
ThemeManager.getCurrentThemeVariables().text :
ThemeManager.getCurrentThemeVariables().textDisabled;
return ( return (
<Card style={{ <Card
flex: 0, style={{
width: this.props.isSquare ? '48%' : 'auto', width: this.props.isSquare ? '48%' : 'auto',
marginLeft: this.props.isSquare ? 0 : 10, marginLeft: this.props.isSquare ? 0 : 10,
marginRight: marginRight, marginRight: marginRight,
marginTop: 10, marginTop: 10,
borderRadius: CARD_BORDER_RADIUS, overflow: 'hidden',
backgroundColor: ThemeManager.getCurrentThemeVariables().cardDefaultBg, }}
overflow: 'hidden', onPress={this.props.clickAction}>
}}> {this.props.isSquare ?
<PlatformTouchable <Card.Content>
onPress={this.props.clickAction} {this.getContent()}
style={{ </Card.Content>
zIndex: 100, :
minHeight: this.props.isSquare ? 150 : 'auto',
}}
>
<View> <View>
<CardItem style={{ <Card.Title
backgroundColor: 'transparent', title={this.props.title}
}}> titleStyle={{color: color}}
{this.getContent()} subtitle={this.props.subtitle}
</CardItem> subtitleStyle={{color: color}}
{this.getEventPreviewContainer()} left={(props) => <Avatar.Icon
</View> {...props}
</PlatformTouchable> icon={this.props.icon}
color={this.props.isAvailable ? this.props.color : ThemeManager.getCurrentThemeVariables().textDisabled}
size={60}
style={{backgroundColor: 'transparent'}}/>}
/>
<Card.Content>
{this.getEventPreviewContainer()}
</Card.Content>
</View>}
</Card> </Card>
); );
} }

47
components/Sidebar.js
View file

@ -1,17 +1,19 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Dimensions, FlatList, Image,Platform, StyleSheet} from 'react-native'; import {Dimensions, FlatList, Image, Platform, StyleSheet, View} from 'react-native';
import {Container, Left, ListItem, Text} from "native-base";
import i18n from "i18n-js"; import i18n from "i18n-js";
import {MaterialCommunityIcons} from "@expo/vector-icons"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import ThemeManager from "../utils/ThemeManager"; import ThemeManager from "../utils/ThemeManager";
import * as WebBrowser from 'expo-web-browser'; 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; const deviceWidth = Dimensions.get("window").width;
type Props = { type Props = {
navigation: Object, navigation: Object,
state: Object,
}; };
type State = { type State = {
@ -142,32 +144,29 @@ export default class SideBar extends React.Component<Props, State> {
getRenderItem({item}: Object) { getRenderItem({item}: Object) {
const onListItemPress = this.onListItemPress.bind(this, item); const onListItemPress = this.onListItemPress.bind(this, item);
// return <View/>;
if (item.icon !== undefined) { if (item.icon !== undefined) {
return ( return (
<ListItem <DrawerItem
button label={item.name}
noBorder focused={false}
icon={({color, size}) =>
<MaterialCommunityIcons color={color} size={size} name={item.icon}/>}
selected={this.state.active === item.route} selected={this.state.active === item.route}
onPress={onListItemPress} onPress={onListItemPress}
> style={{
<Left> marginLeft: 0,
<MaterialCommunityIcons marginRight: 0,
name={item.icon} padding: 0,
size={26} borderRadius: 0
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor} }}
/> />
<Text style={styles.text}>
{item.name}
</Text>
</Left>
</ListItem>
); );
} else { } else {
return ( return (
<ListItem itemDivider> <List.Item
<Text>{item.name}</Text> title={item.name}
</ListItem> style={{backgroundColor: ThemeManager.getCurrentThemeVariables().dividerBackground}}
/>
); );
} }
@ -176,9 +175,7 @@ export default class SideBar extends React.Component<Props, State> {
render() { render() {
console.log("rendering SideBar"); console.log("rendering SideBar");
return ( return (
<Container style={{ <View style={{height: '100%'}}>
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
}}>
<Image source={require("../assets/drawer-cover.png")} style={styles.drawerCover}/> <Image source={require("../assets/drawer-cover.png")} style={styles.drawerCover}/>
<FlatList <FlatList
data={this.dataSet} data={this.dataSet}
@ -186,7 +183,7 @@ export default class SideBar extends React.Component<Props, State> {
keyExtractor={this.listKeyExtractor} keyExtractor={this.listKeyExtractor}
renderItem={this.getRenderItem} renderItem={this.getRenderItem}
/> />
</Container> </View>
); );
} }
} }

17
components/WebSectionList.js
View file

@ -1,12 +1,12 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {H3, Spinner, View} from "native-base";
import ThemeManager from '../utils/ThemeManager'; import ThemeManager from '../utils/ThemeManager';
import WebDataManager from "../utils/WebDataManager"; import WebDataManager from "../utils/WebDataManager";
import {MaterialCommunityIcons} from "@expo/vector-icons"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import i18n from "i18n-js"; 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 = { type Props = {
navigation: Object, navigation: Object,
@ -148,22 +148,25 @@ export default class WebSectionList extends React.Component<Props, State> {
marginBottom: 20 marginBottom: 20
}}> }}>
{this.state.refreshing ? {this.state.refreshing ?
<Spinner/> <ActivityIndicator
animating={true}
size={'large'}
color={ThemeManager.getCurrentThemeVariables().primary}/>
: :
<MaterialCommunityIcons <MaterialCommunityIcons
name={item.icon} name={item.icon}
size={100} size={100}
color={ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText}/>} color={ThemeManager.getCurrentThemeVariables().textDisabled}/>}
</View> </View>
<H3 style={{ <Subheading style={{
textAlign: 'center', textAlign: 'center',
marginRight: 20, marginRight: 20,
marginLeft: 20, marginLeft: 20,
color: ThemeManager.getCurrentThemeVariables().fetchedDataSectionListErrorText color: ThemeManager.getCurrentThemeVariables().textDisabled
}}> }}>
{item.text} {item.text}
</H3> </Subheading>
</View>); </View>);
} }

56
components/WebViewScreen.js
View file

@ -1,12 +1,12 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Platform, View} from 'react-native'; import {View} from 'react-native';
import {Container, Spinner, Tab, TabHeading, Tabs, Text} from 'native-base';
import WebView from "react-native-webview"; import WebView from "react-native-webview";
import Touchable from "react-native-platform-touchable"; import Touchable from "react-native-platform-touchable";
import {MaterialCommunityIcons} from "@expo/vector-icons"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import ThemeManager from "../utils/ThemeManager"; import ThemeManager from "../utils/ThemeManager";
import {ActivityIndicator} from 'react-native-paper';
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -62,9 +62,9 @@ export default class WebViewScreen extends React.Component<Props> {
style={{padding: 6}} style={{padding: 6}}
onPress={clickAction}> onPress={clickAction}>
<MaterialCommunityIcons <MaterialCommunityIcons
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
name={icon} name={icon}
size={26}/> size={26}
color={ThemeManager.getCurrentThemeVariables().text}/>
</Touchable> </Touchable>
); );
} }
@ -112,7 +112,7 @@ export default class WebViewScreen extends React.Component<Props> {
getRenderLoading() { getRenderLoading() {
return ( return (
<View style={{ <View style={{
backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor, backgroundColor: ThemeManager.getCurrentThemeVariables().background,
position: 'absolute', position: 'absolute',
top: 0, top: 0,
right: 0, right: 0,
@ -122,7 +122,10 @@ export default class WebViewScreen extends React.Component<Props> {
alignItems: 'center', alignItems: 'center',
justifyContent: 'center' justifyContent: 'center'
}}> }}>
<Spinner/> <ActivityIndicator
animating={true}
size={'large'}
color={ThemeManager.getCurrentThemeVariables().primary}/>
</View> </View>
); );
} }
@ -144,50 +147,11 @@ export default class WebViewScreen extends React.Component<Props> {
); );
} }
getTabbedWebview() {
let tabbedView = [];
for (let i = 0; i < this.props.data.length; i++) {
tabbedView.push(
<Tab heading={
<TabHeading>
<MaterialCommunityIcons
name={this.props.data[i]['icon']}
color={ThemeManager.getCurrentThemeVariables().tabIconColor}
size={20}
/>
<Text>{this.props.data[i]['name']}</Text>
</TabHeading>}
key={this.props.data[i]['url']}
style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
{this.getWebview(this.props.data[i])}
</Tab>);
}
return tabbedView;
}
render() { render() {
// console.log("rendering WebViewScreen"); // console.log("rendering WebViewScreen");
const nav = this.props.navigation;
this.webviewArray = []; this.webviewArray = [];
return ( return (
<Container> this.getWebview(this.props.data[0])
{this.props.data.length === 1 ?
this.getWebview(this.props.data[0]) :
<Tabs
tabContainerStyle={{
elevation: 0, // Fix for android shadow
}}
locked={true}
style={{
backgroundColor: Platform.OS === 'ios' ?
ThemeManager.getCurrentThemeVariables().tabDefaultBg :
ThemeManager.getCurrentThemeVariables().brandPrimary
}}
>
{this.getTabbedWebview()}
</Tabs>}
</Container>
); );
} }
} }

39
native-base-theme/components/Badge.js
View file

@ -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;
};

11
native-base-theme/components/Body.js
View file

@ -1,11 +0,0 @@
// @flow
export default () => {
const bodyTheme = {
flex: 1,
alignItems: 'center',
alignSelf: 'center'
};
return bodyTheme;
};

386
native-base-theme/components/Button.js
View file

@ -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;
};

37
native-base-theme/components/Card.js
View file

@ -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;
};

198
native-base-theme/components/CardItem.js
View file

@ -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;
};

38
native-base-theme/components/CheckBox.js
View file

@ -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;
};

17
native-base-theme/components/Container.js
View file

@ -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;
};

14
native-base-theme/components/Content.js
View file

@ -1,14 +0,0 @@
// @flow
export default () => {
const contentTheme = {
flex: 1,
backgroundColor: 'transparent',
'NativeBase.Segment': {
borderWidth: 0,
backgroundColor: 'transparent'
}
};
return contentTheme;
};

25
native-base-theme/components/Fab.js
View file

@ -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;
};

119
native-base-theme/components/Footer.js
View file

@ -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;
};

79
native-base-theme/components/FooterTab.js
View file

@ -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;
};

86
native-base-theme/components/Form.js
View file

@ -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;
};

13
native-base-theme/components/H1.js
View file

@ -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;
};

13
native-base-theme/components/H2.js
View file

@ -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;
};

13
native-base-theme/components/H3.js
View file

@ -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;
};

419
native-base-theme/components/Header.js
View file

@ -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;
};

12
native-base-theme/components/Icon.js
View file

@ -1,12 +0,0 @@
// @flow
import variable from './../variables/platform';
export default (variables /* : * */ = variable) => {
const iconTheme = {
fontSize: variables.iconFontSize,
color: variable.textColor
};
return iconTheme;
};

19
native-base-theme/components/Input.js
View file

@ -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;
};

132
native-base-theme/components/InputGroup.js
View file

@ -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;
};

241
native-base-theme/components/Item.js
View file

@ -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;
};

12
native-base-theme/components/Label.js
View file

@ -1,12 +0,0 @@
// @flow
export default () => {
const labelTheme = {
'.focused': {
width: 0
},
fontSize: 17
};
return labelTheme;
};

11
native-base-theme/components/Left.js
View file

@ -1,11 +0,0 @@
// @flow
export default () => {
const leftTheme = {
flex: 1,
alignSelf: 'center',
alignItems: 'flex-start'
};
return leftTheme;
};

446
native-base-theme/components/ListItem.js
View file

@ -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;
};

14
native-base-theme/components/Picker.android.js
View file

@ -1,14 +0,0 @@
// @flow
export default () => {
const pickerTheme = {
'.note': {
color: '#8F8E95'
},
// width: 90,
marginRight: -4,
flexGrow: 1
};
return pickerTheme;
};

7
native-base-theme/components/Picker.ios.js
View file

@ -1,7 +0,0 @@
// @flow
export default () => {
const pickerTheme = {};
return pickerTheme;
};

14
native-base-theme/components/Picker.js
View file

@ -1,14 +0,0 @@
// @flow
export default () => {
const pickerTheme = {
'.note': {
color: '#8F8E95'
},
// width: 90,
marginRight: -4,
flexGrow: 1
};
return pickerTheme;
};

31
native-base-theme/components/Radio.js
View file

@ -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;
};

14
native-base-theme/components/Right.js
View file

@ -1,14 +0,0 @@
// @flow
export default () => {
const rightTheme = {
'NativeBase.Button': {
alignSelf: null
},
flex: 1,
alignSelf: 'center',
alignItems: 'flex-end'
};
return rightTheme;
};

57
native-base-theme/components/Segment.js
View file

@ -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;
};

49
native-base-theme/components/Separator.js
View file

@ -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;
};

9
native-base-theme/components/Spinner.js
View file

@ -1,9 +0,0 @@
// @flow
export default () => {
const spinnerTheme = {
height: 80
};
return spinnerTheme;
};

19
native-base-theme/components/Subtitle.js
View file

@ -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;
};

46
native-base-theme/components/SwipeRow.js
View file

@ -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;
};

9
native-base-theme/components/Switch.js
View file

@ -1,9 +0,0 @@
// @flow
export default () => {
const switchTheme = {
marginVertical: -5
};
return switchTheme;
};

10
native-base-theme/components/Tab.js
View file

@ -1,10 +0,0 @@
// @flow
export default () => {
const tabTheme = {
flex: 1,
backgroundColor: '#FFF'
};
return tabTheme;
};

57
native-base-theme/components/TabBar.js
View file

@ -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;
};

26
native-base-theme/components/TabContainer.js
View file

@ -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;
};

40
native-base-theme/components/TabHeading.js
View file

@ -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;
};

17
native-base-theme/components/Text.js
View file

@ -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;
};

25
native-base-theme/components/Textarea.js
View file

@ -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;
};

40
native-base-theme/components/Thumbnail.js
View file

@ -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;
};

21
native-base-theme/components/Title.js
View file

@ -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;
};

41
native-base-theme/components/Toast.js
View file

@ -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;
};

13
native-base-theme/components/View.js
View file

@ -1,13 +0,0 @@
// @flow
import variable from './../variables/platform';
export default (variables /* : * */ = variable) => {
const viewTheme = {
'.padder': {
padding: variables.contentPadding
}
};
return viewTheme;
};

249
native-base-theme/components/index.js
View file

@ -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;
};

311
native-base-theme/variables/commonColor.js
View file

@ -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
}
}
};

304
native-base-theme/variables/material.js
View file

@ -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
}
}
};

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

@ -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
}
}
};

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

@ -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
}
}
};

27
navigation/DrawerNavigator.js
View file

@ -12,25 +12,12 @@ import BibScreen from "../screens/Websites/BibScreen";
import DebugScreen from '../screens/DebugScreen'; import DebugScreen from '../screens/DebugScreen';
import Sidebar from "../components/Sidebar"; import Sidebar from "../components/Sidebar";
import {createStackNavigator, TransitionPresets} from "@react-navigation/stack"; import {createStackNavigator, TransitionPresets} from "@react-navigation/stack";
import PerfHomeScreen from '../screens/PerfHomeScreen'; import {View} from "react-native";
import {Platform, StyleSheet, View} from "react-native";
import ThemeManager from "../utils/ThemeManager";
import Touchable from "react-native-platform-touchable"; import Touchable from "react-native-platform-touchable";
import {MaterialCommunityIcons} from "@expo/vector-icons"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import ThemeManager from "../utils/ThemeManager";
const styles = StyleSheet.create({
header: {
backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
},
headerTitle: {
color: "#ffffff",
},
});
const defaultScreenOptions = { const defaultScreenOptions = {
headerTintColor: 'white',
headerStyle: styles.header,
gestureEnabled: true, gestureEnabled: true,
cardOverlayEnabled: true, cardOverlayEnabled: true,
...TransitionPresets.SlideFromRightIOS, ...TransitionPresets.SlideFromRightIOS,
@ -49,7 +36,7 @@ function getDrawerButton(navigation: Object) {
<MaterialCommunityIcons <MaterialCommunityIcons
name="menu" name="menu"
size={26} size={26}
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/> color={ThemeManager.getCurrentThemeVariables().text}/>
</Touchable> </Touchable>
</View> </View>
); );
@ -191,8 +178,8 @@ function BibStackComponent() {
const Drawer = createDrawerNavigator(); const Drawer = createDrawerNavigator();
function getDrawerContent(nav) { function getDrawerContent(props) {
return <Sidebar navigation={nav}/> return <Sidebar {...props}/>
} }
export default function DrawerNavigator() { export default function DrawerNavigator() {
@ -201,8 +188,8 @@ export default function DrawerNavigator() {
initialRouteName={'Main'} initialRouteName={'Main'}
headerMode={'float'} headerMode={'float'}
backBehavior={'initialRoute'} backBehavior={'initialRoute'}
drawerType={'back'} drawerType={'front'}
drawerContent={props => getDrawerContent(props.navigation)} drawerContent={(props) => getDrawerContent(props)}
screenOptions={defaultScreenOptions} screenOptions={defaultScreenOptions}
> >
<Drawer.Screen <Drawer.Screen

17
navigation/MainTabNavigator.js
View file

@ -14,7 +14,7 @@ import PlanexScreen from '../screens/Websites/PlanexScreen';
import {MaterialCommunityIcons} from "@expo/vector-icons"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import ThemeManager from "../utils/ThemeManager"; import ThemeManager from "../utils/ThemeManager";
import AsyncStorageManager from "../utils/AsyncStorageManager"; import AsyncStorageManager from "../utils/AsyncStorageManager";
import {Platform, StyleSheet, View} from "react-native"; import {View} from "react-native";
import Touchable from "react-native-platform-touchable"; import Touchable from "react-native-platform-touchable";
const TAB_ICONS = { const TAB_ICONS = {
@ -25,18 +25,7 @@ const TAB_ICONS = {
Planex: 'timetable', Planex: 'timetable',
}; };
const styles = StyleSheet.create({
header: {
backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary,
},
headerTitle: {
color: "#ffffff",
},
});
const defaultScreenOptions = { const defaultScreenOptions = {
headerTintColor: 'white',
headerStyle: styles.header,
gestureEnabled: true, gestureEnabled: true,
cardOverlayEnabled: true, cardOverlayEnabled: true,
...TransitionPresets.SlideFromRightIOS, ...TransitionPresets.SlideFromRightIOS,
@ -55,7 +44,7 @@ function getDrawerButton(navigation: Object) {
<MaterialCommunityIcons <MaterialCommunityIcons
name="menu" name="menu"
size={26} size={26}
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/> color={ThemeManager.getCurrentThemeVariables().text}/>
</Touchable> </Touchable>
</View> </View>
); );
@ -226,7 +215,7 @@ export default function TabNavigator() {
return ( return (
<Tab.Navigator <Tab.Navigator
initialRouteName={AsyncStorageManager.getInstance().preferences.defaultStartScreen.current} initialRouteName={AsyncStorageManager.getInstance().preferences.defaultStartScreen.current}
barStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary}} barStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().primary}}
screenOptions={({route}) => ({ screenOptions={({route}) => ({
tabBarIcon: ({focused, color, size}) => { tabBarIcon: ({focused, color, size}) => {
let icon = TAB_ICONS[route.name]; let icon = TAB_ICONS[route.name];

5
package.json
View file

@ -22,8 +22,6 @@
"expo-permissions": "~8.0.0", "expo-permissions": "~8.0.0",
"expo-web-browser": "~8.0.0", "expo-web-browser": "~8.0.0",
"i18n-js": "^3.3.0", "i18n-js": "^3.3.0",
"native-base": "^2.12.1",
"native-base-shoutem-theme": "^0.3.1",
"react": "16.9.0", "react": "16.9.0",
"react-dom": "16.9.0", "react-dom": "16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz", "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-autolink": "^1.8.1",
"react-native-calendars": "^1.260.0", "react-native-calendars": "^1.260.0",
"react-native-gesture-handler": "~1.5.0", "react-native-gesture-handler": "~1.5.0",
"react-native-material-menu": "^1.0.0",
"react-native-modalize": "^1.3.6", "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-platform-touchable": "^1.1.1",
"react-native-reanimated": "~1.4.0", "react-native-reanimated": "~1.4.0",
"react-native-render-html": "^4.1.2", "react-native-render-html": "^4.1.2",

16
screens/About/AboutDependenciesScreen.js
View file

@ -1,9 +1,9 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Body, ListItem, Text} from 'native-base';
import {FlatList} from "react-native"; import {FlatList} from "react-native";
import packageJson from '../../package'; import packageJson from '../../package';
import {List} from 'react-native-paper';
function generateListFromObject(object) { function generateListFromObject(object) {
let list = []; let list = [];
@ -33,16 +33,10 @@ export default class AboutDependenciesScreen extends React.Component<Props> {
keyExtractor={(item) => item.name} keyExtractor={(item) => item.name}
style={{minHeight: 300, width: '100%'}} style={{minHeight: 300, width: '100%'}}
renderItem={({item}) => renderItem={({item}) =>
<ListItem> <List.Item
<Body> title={item.name}
<Text> description={item.version.replace('^', '').replace('~', '')}
{item.name} />}
</Text>
<Text note>
{item.version.replace('^', '')}
</Text>
</Body>
</ListItem>}
/> />
); );
} }

180
screens/About/AboutScreen.js
View file

@ -2,13 +2,12 @@
import * as React from 'react'; import * as React from 'react';
import {FlatList, Linking, Platform, View} from 'react-native'; 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 i18n from "i18n-js";
import appJson from '../../app'; import appJson from '../../app';
import {MaterialCommunityIcons} from "@expo/vector-icons";
import AsyncStorageManager from "../../utils/AsyncStorageManager"; import AsyncStorageManager from "../../utils/AsyncStorageManager";
import {Modalize} from "react-native-modalize"; import {Modalize} from "react-native-modalize";
import ThemeManager from "../../utils/ThemeManager"; import ThemeManager from "../../utils/ThemeManager";
import {Avatar, Card, Text, Title, List, Button} from 'react-native-paper';
const links = { const links = {
appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148', appstore: 'https://apps.apple.com/us/app/campus-amicale-insat/id1477722148',
@ -197,80 +196,65 @@ export default class AboutScreen extends React.Component<Props, State> {
getAppCard() { getAppCard() {
return ( return (
<Card> <Card style={{marginBottom: 10}}>
<CardItem> <Card.Title
<Left> title={appJson.expo.name}
<Thumbnail square source={require('../../assets/android.icon.png')}/> subtitle={appJson.expo.version}
<Body> left={(props) => <Avatar.Image {...props} source={require('../../assets/android.icon.png')}/>}/>
<H1>{appJson.expo.name}</H1> <Card.Content>
<Text note> <FlatList
v.{appJson.expo.version} data={this.appData}
</Text> extraData={this.state}
</Body> keyExtractor={(item) => item.icon}
</Left> listKey={"app"}
</CardItem> renderItem={this.getCardItem}
<FlatList />
data={this.appData} </Card.Content>
extraData={this.state}
keyExtractor={(item) => item.icon}
listKey={"app"}
renderItem={this.getCardItem}
/>
</Card> </Card>
); );
} }
getTeamCard() { getTeamCard() {
return ( return (
<Card> <Card style={{marginBottom: 10}}>
<CardItem> <Card.Title
<Left> title={i18n.t('aboutScreen.team')}
<MaterialCommunityIcons left={(props) => <Avatar.Icon {...props} icon={'account-multiple'}/>}/>
name='account-multiple' <Card.Content>
size={40} <Title>{i18n.t('aboutScreen.author')}</Title>
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/> <FlatList
<Body> data={this.authorData}
<H1>{i18n.t('aboutScreen.team')}</H1> extraData={this.state}
</Body> keyExtractor={(item) => item.icon}
</Left> listKey={"team1"}
</CardItem> renderItem={this.getCardItem}
<CardItem header> />
<Text>{i18n.t('aboutScreen.author')}</Text> <Title>{i18n.t('aboutScreen.additionalDev')}</Title>
</CardItem> <FlatList
<FlatList data={this.additionalDevData}
data={this.authorData} extraData={this.state}
extraData={this.state} keyExtractor={(item) => item.icon}
keyExtractor={(item) => item.icon} listKey={"team2"}
listKey={"team1"} renderItem={this.getCardItem}
renderItem={this.getCardItem} />
/> </Card.Content>
<CardItem header>
<Text>{i18n.t('aboutScreen.additionalDev')}</Text>
</CardItem>
<FlatList
data={this.additionalDevData}
extraData={this.state}
keyExtractor={(item) => item.icon}
listKey={"team2"}
renderItem={this.getCardItem}
/>
</Card> </Card>
); );
} }
getTechnoCard() { getTechnoCard() {
return ( return (
<Card> <Card style={{marginBottom: 10}}>
<CardItem header> <Card.Content>
<Text>{i18n.t('aboutScreen.technologies')}</Text> <Title>{i18n.t('aboutScreen.technologies')}</Title>
</CardItem> <FlatList
<FlatList data={this.technoData}
data={this.technoData} extraData={this.state}
extraData={this.state} keyExtractor={(item) => item.icon}
keyExtractor={(item) => item.icon} listKey={"techno"}
listKey={"techno"} renderItem={this.getCardItem}
renderItem={this.getCardItem} />
/> </Card.Content>
</Card> </Card>
); );
} }
@ -282,31 +266,29 @@ export default class AboutScreen extends React.Component<Props, State> {
*/ */
getCardItem({item}: Object) { getCardItem({item}: Object) {
let shouldShow = !item.showOnlyInDebug || (item.showOnlyInDebug && this.state.isDebugUnlocked); let shouldShow = !item.showOnlyInDebug || (item.showOnlyInDebug && this.state.isDebugUnlocked);
console.log(item.text);
if (shouldShow) { if (shouldShow) {
return ( if (item.showChevron) {
<CardItem button return (
onPress={item.onPressCallback}> <List.Item
<Left> title={item.text}
<MaterialCommunityIcons left={props => <List.Icon {...props} icon={item.icon} />}
name={item.icon} right={props => <List.Icon {...props} icon={'chevron-right'} />}
size={26} onPress={item.onPressCallback}
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/> />
<Text>{item.text}</Text> );
</Left> } else {
{item.showChevron ? return (
<Right> <List.Item
<MaterialCommunityIcons title={item.text}
name={'chevron-right'} left={props => <List.Icon {...props} icon={item.icon} />}
size={26} onPress={item.onPressCallback}
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/> />
</Right> );
: }
<Right/>
}
</CardItem>)
;
} else { } else {
return <View/> return null;
} }
} }
@ -330,39 +312,39 @@ export default class AboutScreen extends React.Component<Props, State> {
return ( return (
<Modalize ref={this.modalRef} <Modalize ref={this.modalRef}
adjustToContentHeight adjustToContentHeight
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}>
<View style={{ <View style={{
flex: 1, flex: 1,
padding: 20 padding: 20
}}> }}>
<H1>{i18n.t('aboutScreen.bugs')}</H1> <Title>{i18n.t('aboutScreen.bugs')}</Title>
<Text> <Text>
{i18n.t('aboutScreen.bugsDescription')} {i18n.t('aboutScreen.bugsDescription')}
</Text> </Text>
<Button <Button
icon="email"
mode="contained"
dark={true}
color={ThemeManager.getCurrentThemeVariables().primary}
style={{ style={{
marginTop: 20, marginTop: 20,
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
}} }}
onPress={onPressMail}> onPress={onPressMail}>
<MaterialCommunityIcons
name={'email'}
size={26}
color={'#fff'}/>
<Text>{i18n.t('aboutScreen.bugsMail')}</Text> <Text>{i18n.t('aboutScreen.bugsMail')}</Text>
</Button> </Button>
<Button <Button
icon="git"
mode="contained"
dark={true}
color={ThemeManager.getCurrentThemeVariables().primary}
style={{ style={{
marginTop: 20, marginTop: 20,
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
}} }}
onPress={onPressGit}> onPress={onPressGit}>
<MaterialCommunityIcons
name={'git'}
size={26}
color={'#fff'}/>
<Text>{i18n.t('aboutScreen.bugsGit')}</Text> <Text>{i18n.t('aboutScreen.bugsGit')}</Text>
</Button> </Button>
</View> </View>
@ -390,7 +372,7 @@ export default class AboutScreen extends React.Component<Props, State> {
render() { render() {
return ( return (
<Content padder> <View style={{padding: 5}}>
{this.getBugReportModal()} {this.getBugReportModal()}
<FlatList <FlatList
style={{padding: 5}} style={{padding: 5}}
@ -399,7 +381,7 @@ export default class AboutScreen extends React.Component<Props, State> {
keyExtractor={(item) => item.id} keyExtractor={(item) => item.id}
renderItem={this.getMainCard} renderItem={this.getMainCard}
/> />
</Content> </View>
); );
} }
} }

133
screens/DebugScreen.js
View file

@ -1,31 +1,12 @@
// @flow // @flow
import * as React from 'react'; 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 ThemeManager from '../utils/ThemeManager';
import {MaterialCommunityIcons} from "@expo/vector-icons"; import {Alert, Clipboard, ScrollView, View} from "react-native";
import {Alert, Clipboard, View} from "react-native";
import AsyncStorageManager from "../utils/AsyncStorageManager"; import AsyncStorageManager from "../utils/AsyncStorageManager";
import NotificationsManager from "../utils/NotificationsManager"; import NotificationsManager from "../utils/NotificationsManager";
import {Modalize} from "react-native-modalize"; import {Modalize} from "react-native-modalize";
import {Button, Card, List, Subheading, TextInput, Title} from 'react-native-paper';
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -54,29 +35,24 @@ export default class DebugScreen extends React.Component<Props, State> {
} }
static getGeneralItem(onPressCallback: Function, icon: ?string, title: string, subtitle: string) { static getGeneralItem(onPressCallback: Function, icon: ?string, title: string, subtitle: string) {
return ( if (icon !== undefined) {
<ListItem return (
button <List.Item
thumbnail title={title}
onPress={onPressCallback} description={subtitle}
> left={() => <List.Icon icon={icon}/>}
{icon !== undefined ? onPress={onPressCallback}
<Left> />
<MaterialCommunityIcons name={icon} size={26}/> );
</Left> } else {
: <View/> return (
} <List.Item
<Body> title={title}
<Text> description={subtitle}
{title} onPress={onPressCallback}
</Text> />
<Text note> );
{subtitle} }
</Text>
</Body>
<Right/>
</ListItem>
);
} }
alertCurrentExpoToken() { alertCurrentExpoToken() {
@ -111,26 +87,30 @@ export default class DebugScreen extends React.Component<Props, State> {
flex: 1, flex: 1,
padding: 20 padding: 20
}}> }}>
<H1>{this.state.modalCurrentDisplayItem.key}</H1> <Title>{this.state.modalCurrentDisplayItem.key}</Title>
<H3>Default: {this.state.modalCurrentDisplayItem.default}</H3> <Subheading>Default: {this.state.modalCurrentDisplayItem.default}</Subheading>
<H3>Current: {this.state.modalCurrentDisplayItem.current}</H3> <Subheading>Current: {this.state.modalCurrentDisplayItem.current}</Subheading>
<Form> <TextInput
<Item floatingLabel> label='New Value'
<Label>New Value</Label> onChangeText={(text) => this.modalInputValue = text}
<Input onChangeText={(text) => this.modalInputValue = text}/> />
</Item>
</Form>
<View style={{ <View style={{
flexDirection: 'row', flexDirection: 'row',
marginTop: 10, marginTop: 10,
}}> }}>
<Button success <Button
onPress={() => this.saveNewPrefs(this.state.modalCurrentDisplayItem.key, this.modalInputValue)}> mode="contained"
<Text>Save new value</Text> dark={true}
color={ThemeManager.getCurrentThemeVariables().success}
onPress={() => this.saveNewPrefs(this.state.modalCurrentDisplayItem.key, this.modalInputValue)}>
Save new value
</Button> </Button>
<Button <Button
mode="contained"
dark={true}
color={ThemeManager.getCurrentThemeVariables().danger}
onPress={() => this.saveNewPrefs(this.state.modalCurrentDisplayItem.key, this.state.modalCurrentDisplayItem.default)}> onPress={() => this.saveNewPrefs(this.state.modalCurrentDisplayItem.key, this.state.modalCurrentDisplayItem.default)}>
<Text>Reset to default</Text> Reset to default
</Button> </Button>
</View> </View>
@ -149,42 +129,37 @@ export default class DebugScreen extends React.Component<Props, State> {
render() { render() {
return ( return (
<Container> <View>
<Modalize <Modalize
ref={this.modalRef} ref={this.modalRef}
adjustToContentHeight adjustToContentHeight
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().surface}}>
{this.getModalContent()} {this.getModalContent()}
</Modalize> </Modalize>
<Content padder> <ScrollView style={{padding: 5}}>
<Card> <Card style={{margin: 5}}>
<CardItem header> <Card.Title
<Text> title={'Notifications'}
Notifications />
</Text> <Card.Content>
</CardItem>
<List>
{DebugScreen.getGeneralItem(() => this.alertCurrentExpoToken(), 'bell', 'Get current Expo Token', '')} {DebugScreen.getGeneralItem(() => this.alertCurrentExpoToken(), 'bell', 'Get current Expo Token', '')}
{DebugScreen.getGeneralItem(() => this.forceExpoTokenUpdate(), 'bell-ring', 'Force Expo token update', '')} {DebugScreen.getGeneralItem(() => this.forceExpoTokenUpdate(), 'bell-ring', 'Force Expo token update', '')}
</List> </Card.Content>
</Card> </Card>
<Card> <Card style={{margin: 5}}>
<CardItem header> <Card.Title
<Text> title={'Preferences'}
Preferences />
</Text> <Card.Content>
</CardItem>
<List>
{Object.values(this.state.currentPreferences).map((object) => {Object.values(this.state.currentPreferences).map((object) =>
<View> <View>
{DebugScreen.getGeneralItem(() => this.showEditModal(object), undefined, object.key, 'Click to edit')} {DebugScreen.getGeneralItem(() => this.showEditModal(object), undefined, object.key, 'Click to edit')}
</View> </View>
)} )}
</List> </Card.Content>
</Card> </Card>
</Content> </ScrollView>
</Container> </View>
); );
} }
} }

87
screens/HomeScreen.js
View file

@ -1,8 +1,7 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Image, TouchableOpacity, View} from 'react-native'; import {TouchableOpacity, View} from 'react-native';
import {Body, Button, Card, CardItem, Left, Text, Thumbnail} from 'native-base';
import i18n from "i18n-js"; import i18n from "i18n-js";
import {MaterialCommunityIcons} from "@expo/vector-icons"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import Autolink from 'react-native-autolink'; import Autolink from 'react-native-autolink';
@ -10,6 +9,8 @@ import ThemeManager from "../utils/ThemeManager";
import DashboardItem from "../components/DashboardItem"; import DashboardItem from "../components/DashboardItem";
import * as WebBrowser from 'expo-web-browser'; import * as WebBrowser from 'expo-web-browser';
import WebSectionList from "../components/WebSectionList"; 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"; // import DATA from "../dashboard_data.json";
@ -405,11 +406,11 @@ export default class HomeScreen extends React.Component<Props> {
let proxiwashIsAvailable = parseInt(proxiwashData['dryers']) > 0 || parseInt(proxiwashData['washers']) > 0; let proxiwashIsAvailable = parseInt(proxiwashData['dryers']) > 0 || parseInt(proxiwashData['washers']) > 0;
let proxiwashSubtitle; let proxiwashSubtitle;
let dryerColor = parseInt(proxiwashData['dryers']) > 0 ? let dryerColor = parseInt(proxiwashData['dryers']) > 0 ?
ThemeManager.getCurrentThemeVariables().textColor : ThemeManager.getCurrentThemeVariables().text :
ThemeManager.getCurrentThemeVariables().listNoteColor; ThemeManager.getCurrentThemeVariables().textDisabled;
let washerColor = parseInt(proxiwashData['washers']) > 0 ? let washerColor = parseInt(proxiwashData['washers']) > 0 ?
ThemeManager.getCurrentThemeVariables().textColor : ThemeManager.getCurrentThemeVariables().text :
ThemeManager.getCurrentThemeVariables().listNoteColor; ThemeManager.getCurrentThemeVariables().textDisabled;
let availableDryers = proxiwashData['dryers']; let availableDryers = proxiwashData['dryers'];
let availableWashers = proxiwashData['washers']; let availableWashers = proxiwashData['washers'];
if (proxiwashIsAvailable) { if (proxiwashIsAvailable) {
@ -505,59 +506,35 @@ export default class HomeScreen extends React.Component<Props> {
const onImagePress = this.openLink.bind(this, item.full_picture); const onImagePress = this.openLink.bind(this, item.full_picture);
const onOutLinkPress = this.openLink.bind(this, item.permalink_url); const onOutLinkPress = this.openLink.bind(this, item.permalink_url);
return ( return (
<Card style={{ <Card style={{margin: 5}}>
flex: 0, <Card.Title
marginLeft: 10, title={NAME_AMICALE}
marginRight: 10, subtitle={HomeScreen.getFormattedDate(item.created_time)}
borderRadius: CARD_BORDER_RADIUS, left={props => <Avatar.Image size={48} source={ICON_AMICALE}
}}> style={{backgroundColor: 'transparent'}}/>}
<CardItem style={{ />
backgroundColor: 'transparent' {item.full_picture !== '' && item.full_picture !== undefined ?
}}> <TouchableOpacity onPress={onImagePress}>
<Left> <Card.Cover source={{uri: item.full_picture}}/>
<Thumbnail source={ICON_AMICALE} square/> </TouchableOpacity> : <View/>}
<Body> <Card.Content>
<Text>{NAME_AMICALE}</Text> {item.message !== undefined ?
<Text note>{HomeScreen.getFormattedDate(item.created_time)}</Text> <Autolink
</Body> text={item.message}
</Left> hashtag="facebook"
</CardItem> style={{color: ThemeManager.getCurrentThemeVariables().text}}
<CardItem style={{ /> : <View/>
backgroundColor: 'transparent' }
}}> <PlatformTouchable onPress={onOutLinkPress}>
<Body> <View style={{flexDirection: 'row', marginTop: 5}}>
{item.full_picture !== '' && item.full_picture !== undefined ?
<TouchableOpacity onPress={onImagePress}
style={{width: '100%', height: 250, marginBottom: 5}}>
<Image source={{uri: item.full_picture}}
style={{flex: 1, resizeMode: "contain"}}
resizeMode="contain"
/>
</TouchableOpacity>
: <View/>}
{item.message !== undefined ?
<Autolink
text={item.message}
hashtag="facebook"
style={{color: ThemeManager.getCurrentThemeVariables().textColor}}
/> : <View/>
}
</Body>
</CardItem>
<CardItem style={{
backgroundColor: 'transparent'
}}>
<Left>
<Button transparent
onPress={onOutLinkPress}>
<MaterialCommunityIcons <MaterialCommunityIcons
name="facebook" name="facebook"
color="#57aeff" color="#57aeff"
size={26}/> size={26}/>
<Text>En savoir plus</Text> <Text style={{color: "#57aeff"}}>En savoir plus</Text>
</Button> </View>
</Left> </PlatformTouchable>
</CardItem> </Card.Content>
</Card> </Card>
); );
} }

60
screens/PlanningDisplayScreen.js
View file

@ -1,12 +1,12 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Image} from 'react-native'; import {Image, ScrollView, View} from 'react-native';
import {Container, Content, H1, H3, View} from 'native-base';
import ThemeManager from "../utils/ThemeManager"; import ThemeManager from "../utils/ThemeManager";
import HTML from "react-native-render-html"; import HTML from "react-native-render-html";
import {Linking} from "expo"; import {Linking} from "expo";
import PlanningEventManager from '../utils/PlanningEventManager'; import PlanningEventManager from '../utils/PlanningEventManager';
import {Subheading, Title} from 'react-native-paper';
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -27,38 +27,32 @@ export default class PlanningDisplayScreen extends React.Component<Props> {
render() { render() {
// console.log("rendering planningDisplayScreen"); // console.log("rendering planningDisplayScreen");
return ( return (
<Container> <ScrollView style={{padding: 5}}>
<Content padder> <Title>
<H1> {this.displayData.title}
{this.displayData.title} </Title>
</H1> <Subheading style={{marginTop: 10,}}>
<H3 style={{ {PlanningEventManager.getFormattedTime(this.displayData)}
marginTop: 10, </Subheading>
color: ThemeManager.getCurrentThemeVariables().listNoteColor {this.displayData.logo !== null ?
}}> <View style={{width: '100%', height: 300, marginTop: 20, marginBottom: 20}}>
{PlanningEventManager.getFormattedTime(this.displayData)} <Image style={{flex: 1, resizeMode: "contain"}}
</H3> source={{uri: this.displayData.logo}}/>
{this.displayData.logo !== null ? </View>
<View style={{width: '100%', height: 300, marginTop: 20, marginBottom: 20}}> : <View/>}
<Image style={{flex: 1, resizeMode: "contain"}}
source={{uri: this.displayData.logo}}/>
</View>
: <View/>}
{this.displayData.description !== null ? {this.displayData.description !== null ?
// Surround description with div to allow text styling if the description is not html // Surround description with div to allow text styling if the description is not html
<HTML html={"<div>" + this.displayData.description + "</div>"} <HTML html={"<div>" + this.displayData.description + "</div>"}
tagsStyles={{ tagsStyles={{
p: { p: {
color: ThemeManager.getCurrentThemeVariables().textColor, color: ThemeManager.getCurrentThemeVariables().text,
fontSize: ThemeManager.getCurrentThemeVariables().fontSizeBase },
}, div: {color: ThemeManager.getCurrentThemeVariables().text}
div: {color: ThemeManager.getCurrentThemeVariables().textColor} }}
}} onLinkPress={openWebLink}/>
onLinkPress={openWebLink}/> : <View/>}
: <View/>} </ScrollView>
</Content>
</Container>
); );
} }
} }

119
screens/PlanningScreen.js
View file

@ -1,14 +1,13 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {BackHandler, Image} from 'react-native'; import {BackHandler, Image, View} from 'react-native';
import {H3, Text, View} from 'native-base';
import i18n from "i18n-js"; import i18n from "i18n-js";
import ThemeManager from "../utils/ThemeManager"; import ThemeManager from "../utils/ThemeManager";
import {Agenda, LocaleConfig} from 'react-native-calendars'; import {Agenda, LocaleConfig} from 'react-native-calendars';
import Touchable from 'react-native-platform-touchable';
import WebDataManager from "../utils/WebDataManager"; import WebDataManager from "../utils/WebDataManager";
import PlanningEventManager from '../utils/PlanningEventManager'; import PlanningEventManager from '../utils/PlanningEventManager';
import {Text, Title, List, Avatar, Divider} from 'react-native-paper';
LocaleConfig.locales['fr'] = { LocaleConfig.locales['fr'] = {
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'], 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<Props, State> {
this.onBackButtonPressAndroid = this.onBackButtonPressAndroid.bind(this); 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() { componentDidMount() {
this.onRefresh(); this.onRefresh();
this.willBlurSubscription = this.props.navigation.addListener( this.willBlurSubscription = this.props.navigation.addListener(
@ -114,11 +107,6 @@ export default class PlanningScreen extends React.Component<Props, State> {
} }
}; };
componentWillUnmount() {
this.didFocusSubscription && this.didFocusSubscription.remove();
this.willBlurSubscription && this.willBlurSubscription.remove();
}
getCurrentDate() { getCurrentDate() {
let today = new Date(); let today = new Date();
return this.getFormattedDate(today); return this.getFormattedDate(today);
@ -141,63 +129,36 @@ export default class PlanningScreen extends React.Component<Props, State> {
} }
getRenderItem(item: Object) { getRenderItem(item: Object) {
return ( const onPress = this.props.navigation.navigate.bind(this, 'PlanningDisplayScreen', {data: item});
<Touchable if (item.logo !== null) {
style={{ return (
backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor, <View>
borderRadius: 10, <Divider/>
marginRight: 10, <List.Item
marginTop: 17, title={item.title}
}} description={PlanningEventManager.getFormattedTime(item)}
onPress={() => this.props.navigation.navigate('PlanningDisplayScreen', {data: item})}> left={props => <Avatar.Image source={{uri: item.logo}} />}
<View style={{ onPress={onPress}
padding: 10, />
flex: 1,
flexDirection: 'row'
}}>
<View style={{
width: item.logo !== null ? '70%' : '100%',
}}>
<Text style={{
color: ThemeManager.getCurrentThemeVariables().listNoteColor,
marginTop: 5,
marginBottom: 10
}}>
{PlanningEventManager.getFormattedTime(item)}
</Text>
<H3 style={{marginBottom: 10}}>{item.title}</H3>
</View>
<View style={{
width: item.logo !== null ? '30%' : 0,
height: 80
}}>
{item.logo !== null ?
<Image source={{uri: item.logo}}
style={{
flex: 1,
resizeMode: "contain"
}}/>
: <View/>}
</View>
</View> </View>
</Touchable> );
); } else {
return (
<View>
<Divider/>
<List.Item
title={item.title}
description={PlanningEventManager.getFormattedTime(item)}
onPress={onPress}
/>
</View>
);
}
} }
getRenderEmptyDate() { getRenderEmptyDate() {
return ( return (
<View style={{ <Divider/>
padding: 10,
flex: 1,
}}>
<View style={{
width: '100%',
height: 1,
backgroundColor: ThemeManager.getCurrentThemeVariables().agendaEmptyLine,
marginTop: 'auto',
marginBottom: 'auto',
}}/>
</View>
); );
} }
@ -303,28 +264,28 @@ export default class PlanningScreen extends React.Component<Props, State> {
// agenda theme // agenda theme
theme={{ theme={{
backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor, backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor,
calendarBackground: ThemeManager.getCurrentThemeVariables().containerBgColor, calendarBackground: ThemeManager.getCurrentThemeVariables().background,
textSectionTitleColor: ThemeManager.getCurrentThemeVariables().listNoteColor, textSectionTitleColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor,
selectedDayBackgroundColor: ThemeManager.getCurrentThemeVariables().brandPrimary, selectedDayBackgroundColor: ThemeManager.getCurrentThemeVariables().primary,
selectedDayTextColor: '#ffffff', selectedDayTextColor: '#ffffff',
todayTextColor: ThemeManager.getCurrentThemeVariables().brandPrimary, todayTextColor: ThemeManager.getCurrentThemeVariables().primary,
dayTextColor: ThemeManager.getCurrentThemeVariables().textColor, dayTextColor: ThemeManager.getCurrentThemeVariables().text,
textDisabledColor: ThemeManager.getCurrentThemeVariables().textDisabledColor, textDisabledColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor,
dotColor: ThemeManager.getCurrentThemeVariables().brandPrimary, dotColor: ThemeManager.getCurrentThemeVariables().primary,
selectedDotColor: '#ffffff', selectedDotColor: '#ffffff',
arrowColor: 'orange', arrowColor: 'orange',
monthTextColor: ThemeManager.getCurrentThemeVariables().brandPrimary, monthTextColor: ThemeManager.getCurrentThemeVariables().primary,
indicatorColor: ThemeManager.getCurrentThemeVariables().brandPrimary, indicatorColor: ThemeManager.getCurrentThemeVariables().primary,
textDayFontWeight: '300', textDayFontWeight: '300',
textMonthFontWeight: 'bold', textMonthFontWeight: 'bold',
textDayHeaderFontWeight: '300', textDayHeaderFontWeight: '300',
textDayFontSize: 16, textDayFontSize: 16,
textMonthFontSize: 16, textMonthFontSize: 16,
textDayHeaderFontSize: 16, textDayHeaderFontSize: 16,
agendaDayTextColor: ThemeManager.getCurrentThemeVariables().listNoteColor, agendaDayTextColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor,
agendaDayNumColor: ThemeManager.getCurrentThemeVariables().listNoteColor, agendaDayNumColor: ThemeManager.getCurrentThemeVariables().agendaDayTextColor,
agendaTodayColor: ThemeManager.getCurrentThemeVariables().brandPrimary, agendaTodayColor: ThemeManager.getCurrentThemeVariables().primary,
agendaKnobColor: ThemeManager.getCurrentThemeVariables().brandPrimary, agendaKnobColor: ThemeManager.getCurrentThemeVariables().primary,
}} }}
/> />
); );

84
screens/Proximo/ProximoAboutScreen.js
View file

@ -1,10 +1,9 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Image, View} from 'react-native'; import {Image, ScrollView, View} from 'react-native';
import {Card, CardItem, Container, Content, H2, Left, Text} from 'native-base';
import i18n from "i18n-js"; import i18n from "i18n-js";
import {MaterialCommunityIcons} from "@expo/vector-icons"; import {Text, Card, List, Paragraph} from 'react-native-paper';
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -16,52 +15,41 @@ type Props = {
export default class ProximoAboutScreen extends React.Component<Props> { export default class ProximoAboutScreen extends React.Component<Props> {
render() { render() {
const nav = this.props.navigation;
return ( return (
<Container> <ScrollView style={{padding: 5}}>
<Content padder> <View style={{
<View style={{ width: '100%',
width: '100%', height: 100,
height: 100, marginTop: 20,
marginTop: 20, marginBottom: 20,
marginBottom: 20, justifyContent: 'center',
justifyContent: 'center', alignItems: 'center'
alignItems: 'center' }}>
}}> <Image
<Image source={require('../../assets/proximo-logo.png')}
source={require('../../assets/proximo-logo.png')} style={{flex: 1, resizeMode: "contain"}}
style={{flex: 1, resizeMode: "contain"}} resizeMode="contain"/>
resizeMode="contain"/> </View>
</View> <Text>{i18n.t('proximoScreen.description')}</Text>
<Text>{i18n.t('proximoScreen.description')}</Text> <Card style={{margin: 5}}>
<Card> <Card.Title
<CardItem> title={i18n.t('proximoScreen.openingHours')}
<Left> left={props => <List.Icon {...props} icon={'clock-outline'}/>}
<MaterialCommunityIcons />
name={'clock-outline'} <Card.Content>
size={30}/> <Paragraph>18h30 - 19h30</Paragraph>
<H2>{i18n.t('proximoScreen.openingHours')}</H2> </Card.Content>
</Left> </Card>
</CardItem> <Card style={{margin: 5}}>
<CardItem> <Card.Title
<Text>18h30 - 19h30</Text> title={i18n.t('proximoScreen.paymentMethods')}
</CardItem> left={props => <List.Icon {...props} icon={'cash'}/>}
</Card> />
<Card> <Card.Content>
<CardItem> <Paragraph>18{i18n.t('proximoScreen.paymentMethodsDescription')}</Paragraph>
<Left> </Card.Content>
<MaterialCommunityIcons </Card>
name={'cash'} </ScrollView>
size={30}/>
<H2>{i18n.t('proximoScreen.paymentMethods')}</H2>
</Left>
</CardItem>
<CardItem>
<Text>{i18n.t('proximoScreen.paymentMethodsDescription')}</Text>
</CardItem>
</Card>
</Content>
</Container>
); );
} }
} }

145
screens/Proximo/ProximoListScreen.js
View file

@ -1,14 +1,12 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Body, Content, H1, H3, Input, Item, Left, ListItem, Right, Text, Thumbnail} from 'native-base'; import {FlatList, Image, ScrollView, View} from "react-native";
import {FlatList, Image, Platform, View} from "react-native";
import Touchable from 'react-native-platform-touchable';
import Menu, {MenuItem} from 'react-native-material-menu';
import i18n from "i18n-js"; import i18n from "i18n-js";
import {MaterialCommunityIcons} from "@expo/vector-icons"; import {MaterialCommunityIcons} from "@expo/vector-icons";
import ThemeManager from "../../utils/ThemeManager"; import ThemeManager from "../../utils/ThemeManager";
import {Modalize} from 'react-native-modalize'; import {Modalize} from 'react-native-modalize';
import {Avatar, Divider, IconButton, List, Menu, Searchbar, Subheading, Text, Title} from "react-native-paper";
const sortMode = { const sortMode = {
price: "0", price: "0",
@ -51,6 +49,7 @@ type State = {
sortNameIcon: React.Node, sortNameIcon: React.Node,
modalCurrentDisplayItem: Object, modalCurrentDisplayItem: Object,
currentlyDisplayedData: Array<Object>, currentlyDisplayedData: Array<Object>,
menuVisible: boolean,
}; };
/** /**
@ -62,13 +61,11 @@ export default class ProximoListScreen extends React.Component<Props, State> {
originalData: Array<Object>; originalData: Array<Object>;
shouldFocusSearchBar: boolean; shouldFocusSearchBar: boolean;
sortMenuRef: Menu;
onMenuRef: Function;
onSearchStringChange: Function; onSearchStringChange: Function;
onSelectSortModeName: Function; onSelectSortModeName: Function;
onSelectSortModePrice: Function; onSelectSortModePrice: Function;
onSortMenuPress: Function; onSortMenuPress: Function;
onSortMenuDismiss: Function;
renderItem: Function; renderItem: Function;
constructor(props: any) { constructor(props: any) {
@ -83,24 +80,17 @@ export default class ProximoListScreen extends React.Component<Props, State> {
sortPriceIcon: '', sortPriceIcon: '',
sortNameIcon: '', sortNameIcon: '',
modalCurrentDisplayItem: {}, modalCurrentDisplayItem: {},
menuVisible: false,
}; };
this.onMenuRef = this.onMenuRef.bind(this);
this.onSearchStringChange = this.onSearchStringChange.bind(this); this.onSearchStringChange = this.onSearchStringChange.bind(this);
this.onSelectSortModeName = this.onSelectSortModeName.bind(this); this.onSelectSortModeName = this.onSelectSortModeName.bind(this);
this.onSelectSortModePrice = this.onSelectSortModePrice.bind(this); this.onSelectSortModePrice = this.onSelectSortModePrice.bind(this);
this.onSortMenuPress = this.onSortMenuPress.bind(this); this.onSortMenuPress = this.onSortMenuPress.bind(this);
this.onSortMenuDismiss = this.onSortMenuPress.bind(this);
this.renderItem = this.renderItem.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. * Sets the sort mode based on the one selected.
@ -146,8 +136,6 @@ export default class ProximoListScreen extends React.Component<Props, State> {
break; break;
} }
this.setupSortIcons(mode, isReverse); this.setupSortIcons(mode, isReverse);
if (this.sortMenuRef !== undefined)
this.sortMenuRef.hide();
} }
/** /**
@ -165,23 +153,10 @@ export default class ProximoListScreen extends React.Component<Props, State> {
getSearchBar() { getSearchBar() {
return ( return (
<Body style={{width: '100%'}}> <Searchbar
<Item placeholder={i18n.t('proximoScreen.search')}
style={{ onChangeText={this.onSearchStringChange}
width: '100%', />
marginBottom: 7
}}>
<MaterialCommunityIcons
name={'magnify'}
size={26}
color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
<Input
ref="searchInput"
placeholder={i18n.t('proximoScreen.search')}
placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
onChangeText={this.onSearchStringChange}/>
</Item>
</Body>
); );
} }
@ -194,11 +169,11 @@ export default class ProximoListScreen extends React.Component<Props, State> {
getStockColor(availableStock: number) { getStockColor(availableStock: number) {
let color: string; let color: string;
if (availableStock > 3) if (availableStock > 3)
color = ThemeManager.getCurrentThemeVariables().brandSuccess; color = ThemeManager.getCurrentThemeVariables().success;
else if (availableStock > 0) else if (availableStock > 0)
color = ThemeManager.getCurrentThemeVariables().brandWarning; color = ThemeManager.getCurrentThemeVariables().warning;
else else
color = ThemeManager.getCurrentThemeVariables().brandDanger; color = ThemeManager.getCurrentThemeVariables().danger;
return color; return color;
} }
@ -212,12 +187,10 @@ export default class ProximoListScreen extends React.Component<Props, State> {
const downSortIcon = const downSortIcon =
<MaterialCommunityIcons <MaterialCommunityIcons
name={'sort-descending'} name={'sort-descending'}
color={'#000'}
size={26}/>; size={26}/>;
const upSortIcon = const upSortIcon =
<MaterialCommunityIcons <MaterialCommunityIcons
name={'sort-ascending'} name={'sort-ascending'}
color={'#000'}
size={26}/>; size={26}/>;
switch (mode) { switch (mode) {
case sortMode.price: case sortMode.price:
@ -274,27 +247,27 @@ export default class ProximoListScreen extends React.Component<Props, State> {
flex: 1, flex: 1,
padding: 20 padding: 20
}}> }}>
<H1>{this.state.modalCurrentDisplayItem.name}</H1> <Title>{this.state.modalCurrentDisplayItem.name}</Title>
<View style={{ <View style={{
flexDirection: 'row', flexDirection: 'row',
width: '100%', width: '100%',
marginTop: 10, marginTop: 10,
}}> }}>
<H3 style={{ <Subheading style={{
color: this.getStockColor(parseInt(this.state.modalCurrentDisplayItem.quantity)), color: this.getStockColor(parseInt(this.state.modalCurrentDisplayItem.quantity)),
}}> }}>
{this.state.modalCurrentDisplayItem.quantity + ' ' + i18n.t('proximoScreen.inStock')} {this.state.modalCurrentDisplayItem.quantity + ' ' + i18n.t('proximoScreen.inStock')}
</H3> </Subheading>
<H3 style={{marginLeft: 'auto'}}>{this.state.modalCurrentDisplayItem.price}€</H3> <Subheading style={{marginLeft: 'auto'}}>{this.state.modalCurrentDisplayItem.price}€</Subheading>
</View> </View>
<Content> <ScrollView>
<View style={{width: '100%', height: 150, marginTop: 20, marginBottom: 20}}> <View style={{width: '100%', height: 150, marginTop: 20, marginBottom: 20}}>
<Image style={{flex: 1, resizeMode: "contain"}} <Image style={{flex: 1, resizeMode: "contain"}}
source={{uri: this.state.modalCurrentDisplayItem.image}}/> source={{uri: this.state.modalCurrentDisplayItem.image}}/>
</View> </View>
<Text>{this.state.modalCurrentDisplayItem.description}</Text> <Text>{this.state.modalCurrentDisplayItem.description}</Text>
</Content> </ScrollView>
</View> </View>
); );
} }
@ -317,65 +290,50 @@ export default class ProximoListScreen extends React.Component<Props, State> {
} }
onSortMenuPress() { onSortMenuPress() {
this.sortMenuRef.show(); this.setState({menuVisible: true});
console.log('pressed');
} }
onSortMenuDismiss() {
this.setState({menuVisible: false});
}
getSortMenu() { getSortMenu() {
return ( return (
<Menu <Menu
ref={this.onMenuRef} visible={this.state.menuVisible}
button={ onDismiss={this.onSortMenuDismiss}
<Touchable anchor={
style={{padding: 6, marginRight: 10}} <IconButton
onPress={this.onSortMenuPress}> icon="sort"
<MaterialCommunityIcons color={ThemeManager.getCurrentThemeVariables().text}
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"} size={26}
name={'sort'} onPress={this.onSortMenuPress}
size={26}/> />
</Touchable>
} }
> >
<MenuItem <Menu.Item onPress={this.onSelectSortModeName} title={i18n.t('proximoScreen.sortName')}/>
onPress={this.onSelectSortModeName}> <Divider/>
{this.state.sortNameIcon} <Menu.Item onPress={this.onSelectSortModePrice} title={i18n.t('proximoScreen.sortPrice')}/>
{i18n.t('proximoScreen.sortName')}
</MenuItem>
<MenuItem
onPress={this.onSelectSortModePrice}>
{this.state.sortPriceIcon}
{i18n.t('proximoScreen.sortPrice')}
</MenuItem>
</Menu> </Menu>
); );
} }
renderItem({item}: Object) { renderItem({item}: Object) {
const onListItemPress = this.onListItemPress.bind(this, item); const onPress = this.onListItemPress.bind(this, item);
return (<ListItem return (
thumbnail <List.Item
onPress={onListItemPress} title={item.name}
> description={item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
<Left> descriptionStyle={{color: this.getStockColor(parseInt(item.quantity))}}
<Thumbnail square source={{uri: item.image}}/> onPress={onPress}
</Left> left={props => <Avatar.Image size={64} source={{uri: item.image}}/>}
<Body> right={props =>
<Text style={{marginLeft: 20}}> <Text style={{fontWeight: "bold"}}>
{item.name} {item.price}€
</Text> </Text>}
<Text note style={{ />
marginLeft: 20, );
color: this.getStockColor(parseInt(item.quantity))
}}>
{item.quantity + ' ' + i18n.t('proximoScreen.inStock')}
</Text>
</Body>
<Right>
<Text style={{fontWeight: "bold"}}>
{item.price}€
</Text>
</Right>
</ListItem>);
} }
keyExtractor(item: Object) { keyExtractor(item: Object) {
@ -384,12 +342,11 @@ export default class ProximoListScreen extends React.Component<Props, State> {
render() { render() {
// console.log("rendering ProximoListScreen"); // console.log("rendering ProximoListScreen");
const nav = this.props.navigation;
return ( return (
<View> <View>
<Modalize ref={this.modalRef} <Modalize ref={this.modalRef}
adjustToContentHeight adjustToContentHeight
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().card}}>
{this.getModalContent()} {this.getModalContent()}
</Modalize> </Modalize>
<FlatList <FlatList

71
screens/Proximo/ProximoMainScreen.js
View file

@ -1,13 +1,11 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Platform, View} from 'react-native' import {View} from 'react-native'
import {Body, Left, ListItem, Right, Text} from 'native-base';
import i18n from "i18n-js"; import i18n from "i18n-js";
import {MaterialCommunityIcons} from "@expo/vector-icons";
import ThemeManager from "../../utils/ThemeManager"; import ThemeManager from "../../utils/ThemeManager";
import Touchable from "react-native-platform-touchable";
import WebSectionList from "../../components/WebSectionList"; import WebSectionList from "../../components/WebSectionList";
import {IconButton, List} from 'react-native-paper';
const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json"; const DATA_URL = "https://etud.insa-toulouse.fr/~proximo/data/stock-v2.json";
@ -157,24 +155,19 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
<View <View
style={{ style={{
flexDirection: 'row', flexDirection: 'row',
marginRight: 10,
}}> }}>
<Touchable <IconButton
style={{padding: 6}} icon="magnify"
onPress={this.onPressSearchBtn}> size={26}
<MaterialCommunityIcons color={ThemeManager.getCurrentThemeVariables().text}
name="magnify" onPress={this.onPressSearchBtn}
size={26} />
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/> <IconButton
</Touchable> icon="information"
<Touchable size={26}
style={{padding: 6}} color={ThemeManager.getCurrentThemeVariables().text}
onPress={this.onPressAboutBtn}> onPress={this.onPressAboutBtn}
<MaterialCommunityIcons />
name="information"
size={26}
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}/>
</Touchable>
</View> </View>
); );
} }
@ -185,36 +178,20 @@ export default class ProximoMainScreen extends React.Component<Props, State> {
shouldFocusSearchBar: false, shouldFocusSearchBar: false,
data: item, 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); const onPress = this.props.navigation.navigate.bind(this, 'ProximoListScreen', dataToSend);
if (item.data.length > 0) { if (item.data.length > 0) {
return ( return (
<ListItem <List.Item
button title={item.type.name}
thumbnail description={subtitle}
onPress={onPress} onPress={onPress}
> left={props => <List.Icon
<Left> {...props}
<MaterialCommunityIcons icon={item.type.icon}
name={item.type.icon} color={ThemeManager.getCurrentThemeVariables().primary}/>}
size={30} right={props => <List.Icon {...props} icon={'chevron-right'}/>}
color={ThemeManager.getCurrentThemeVariables().brandPrimary} />
/>
</Left>
<Body>
<Text>
{item.type.name}
</Text>
<Text note>
{item.data.length} {item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article')}
</Text>
</Body>
<Right>
<MaterialCommunityIcons
icon="chevron-right"
size={26}
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/>
</Right>
</ListItem>
); );
} else } else
return <View/>; return <View/>;

190
screens/Proxiwash/ProxiwashAboutScreen.js
View file

@ -1,11 +1,9 @@
// @flow // @flow
import * as React from 'react'; import * as React from 'react';
import {Image, View} from 'react-native'; import {Image, View, ScrollView} from 'react-native';
import {Body, Card, CardItem, Content, H2, H3, Left, Tab, TabHeading, Tabs, Text} from 'native-base';
import i18n from "i18n-js"; import i18n from "i18n-js";
import {MaterialCommunityIcons} from "@expo/vector-icons"; import {Card, List, Paragraph, Text, Title} from 'react-native-paper';
import ThemeManager from "../../utils/ThemeManager";
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -18,129 +16,67 @@ export default class ProxiwashAboutScreen extends React.Component<Props> {
render() { render() {
return ( return (
<Tabs> <ScrollView style={{padding: 5}}>
<Tab <View style={{
heading={ width: '100%',
<TabHeading> height: 100,
<MaterialCommunityIcons marginTop: 20,
name={'information'} marginBottom: 20,
color={ThemeManager.getCurrentThemeVariables().tabIconColor} justifyContent: 'center',
size={20} alignItems: 'center'
/> }}>
<Text>{i18n.t('proxiwashScreen.informationTab')}</Text> <Image
</TabHeading> source={require('../../assets/proxiwash-logo.png')}
} style={{flex: 1, resizeMode: "contain"}}
key={1} resizeMode="contain"/>
style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}> </View>
<Content padder> <Text>{i18n.t('proxiwashScreen.description')}</Text>
<View style={{ <Card style={{margin: 5}}>
width: '100%', <Card.Title
height: 100, title={i18n.t('proxiwashScreen.dryer')}
marginTop: 20, left={props => <List.Icon {...props} icon={'tumble-dryer'}/>}
marginBottom: 20, />
justifyContent: 'center', <Card.Content>
alignItems: 'center' <Title>{i18n.t('proxiwashScreen.procedure')}</Title>
}}> <Paragraph>{i18n.t('proxiwashScreen.dryerProcedure')}</Paragraph>
<Image <Title>{i18n.t('proxiwashScreen.tips')}</Title>
source={require('../../assets/proxiwash-logo.png')} <Paragraph>{i18n.t('proxiwashScreen.dryerTips')}</Paragraph>
style={{flex: 1, resizeMode: "contain"}} </Card.Content>
resizeMode="contain"/> </Card>
</View>
<Text>{i18n.t('proxiwashScreen.description')}</Text> <Card style={{margin: 5}}>
<Card> <Card.Title
<CardItem> title={i18n.t('proxiwashScreen.washer')}
<Left> left={props => <List.Icon {...props} icon={'washing-machine'}/>}
<MaterialCommunityIcons />
name={'tumble-dryer'} <Card.Content>
size={26}/> <Title>{i18n.t('proxiwashScreen.procedure')}</Title>
<H2>{i18n.t('proxiwashScreen.dryer')}</H2> <Paragraph>{i18n.t('proxiwashScreen.washerProcedure')}</Paragraph>
</Left> <Title>{i18n.t('proxiwashScreen.tips')}</Title>
</CardItem> <Paragraph>{i18n.t('proxiwashScreen.washerTips')}</Paragraph>
<CardItem> </Card.Content>
<Body> </Card>
<H3>{i18n.t('proxiwashScreen.procedure')}</H3>
<Text>{i18n.t('proxiwashScreen.dryerProcedure')}</Text> <Card style={{margin: 5}}>
</Body> <Card.Title
</CardItem> title={i18n.t('proxiwashScreen.tariffs')}
<CardItem> left={props => <List.Icon {...props} icon={'coins'}/>}
<Body> />
<H3>{i18n.t('proxiwashScreen.tips')}</H3> <Card.Content>
<Text>{i18n.t('proxiwashScreen.dryerTips')}</Text> <Paragraph>{i18n.t('proxiwashScreen.washersTariff')}</Paragraph>
</Body> <Paragraph>{i18n.t('proxiwashScreen.dryersTariff')}</Paragraph>
</CardItem> </Card.Content>
</Card> </Card>
<Card> <Card style={{margin: 5}}>
<CardItem> <Card.Title
<Left> title={i18n.t('proxiwashScreen.paymentMethods')}
<MaterialCommunityIcons left={props => <List.Icon {...props} icon={'cash'}/>}
name={'washing-machine'} />
size={26}/> <Card.Content>
<H2>{i18n.t('proxiwashScreen.washer')}</H2> <Paragraph>{i18n.t('proxiwashScreen.paymentMethodsDescription')}</Paragraph>
</Left> </Card.Content>
</CardItem> </Card>
<CardItem> </ScrollView>
<Body>
<H3>{i18n.t('proxiwashScreen.procedure')}</H3>
<Text>{i18n.t('proxiwashScreen.washerProcedure')}</Text>
</Body>
</CardItem>
<CardItem>
<Body>
<H3>{i18n.t('proxiwashScreen.tips')}</H3>
<Text>{i18n.t('proxiwashScreen.washerTips')}</Text>
</Body>
</CardItem>
</Card>
</Content>
</Tab>
<Tab
heading={
<TabHeading>
<MaterialCommunityIcons
name={'cash'}
color={ThemeManager.getCurrentThemeVariables().tabIconColor}
size={20}
/>
<Text>{i18n.t('proxiwashScreen.paymentTab')}</Text>
</TabHeading>
}
key={2}
style={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
<Content padder>
<Card>
<CardItem>
<Left>
<MaterialCommunityIcons
name={'coins'}
size={26}/>
<H2>{i18n.t('proxiwashScreen.tariffs')}</H2>
</Left>
</CardItem>
<CardItem>
<Body>
<Text>{i18n.t('proxiwashScreen.washersTariff')}</Text>
<Text>{i18n.t('proxiwashScreen.dryersTariff')}</Text>
</Body>
</CardItem>
</Card>
<Card>
<CardItem>
<Left>
<MaterialCommunityIcons
name={'cash'}
size={26}/>
<H2>{i18n.t('proxiwashScreen.paymentMethods')}</H2>
</Left>
</CardItem>
<CardItem>
<Body>
<Text>{i18n.t('proxiwashScreen.paymentMethodsDescription')}</Text>
</Body>
</CardItem>
</Card>
</Content>
</Tab>
</Tabs>
); );
} }
} }

133
screens/Proxiwash/ProxiwashScreen.js
View file

@ -2,16 +2,13 @@
import * as React from 'react'; import * as React from 'react';
import {Alert, Platform, View} from 'react-native'; import {Alert, Platform, View} from 'react-native';
import {Body, Card, CardItem, Left, Right, Text} from 'native-base';
import ThemeManager from '../../utils/ThemeManager'; import ThemeManager from '../../utils/ThemeManager';
import i18n from "i18n-js"; import i18n from "i18n-js";
import {MaterialCommunityIcons} from "@expo/vector-icons";
import WebSectionList from "../../components/WebSectionList"; import WebSectionList from "../../components/WebSectionList";
import NotificationsManager from "../../utils/NotificationsManager"; 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 AsyncStorageManager from "../../utils/AsyncStorageManager";
import * as Expo from "expo"; 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"; const DATA_URL = "https://etud.insa-toulouse.fr/~amicale_app/washinsa/washinsa.json";
@ -288,17 +285,12 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
getRightButton() { getRightButton() {
return ( return (
<Touchable <IconButton
style={{ icon="information"
padding: 6, size={26}
marginRight: 10 color={ThemeManager.getCurrentThemeVariables().text}
}} onPress={this.onAboutPress}
onPress={this.onAboutPress}> />
<MaterialCommunityIcons
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
name="information"
size={26}/>
</Touchable>
); );
} }
@ -327,75 +319,52 @@ export default class ProxiwashScreen extends React.Component<Props, State> {
let machineName = (section.title === i18n.t('proxiwashScreen.dryers') ? i18n.t('proxiwashScreen.dryer') : i18n.t('proxiwashScreen.washer')) + ' n°' + item.number; 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'); let isDryer = section.title === i18n.t('proxiwashScreen.dryers');
const onPress = this.showAlert.bind(this, machineName, item, isDryer); 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 ( return (
<Card style={{ <View>
flex: 0, <View style={{
height: 64, height: '100%',
marginLeft: 10, position: 'absolute',
marginRight: 10 left: 0,
}}> width: width,
backgroundColor: stateColors[MACHINE_STATES[item.state]]
<CardItem }}/>
<List.Item
title={machineName}
description={isMachineRunning ? item.startTime + '/' + item.endTime : ''}
onPress={onPress}
style={{ style={{
backgroundColor: stateColors[MACHINE_STATES[item.state]], backgroundColor: 'transparent',
paddingRight: 0, height: 64
paddingLeft: 0,
height: '100%',
}} }}
> left={props => this.isMachineWatched(item.number) ?
<View style={{ <List.Icon {...props} icon={'bell-ring'}
height: 64, color={ThemeManager.getCurrentThemeVariables().primary}/> :
position: 'absolute', <List.Icon {...props} icon={isDryer ? 'tumble-dryer' : 'washing-machine'}/>}
right: 0, right={props => (
width: item.donePercent !== '' ? (100 - parseInt(item.donePercent)).toString() + '%' : 0, <View style={{flexDirection: 'row'}}>
backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor <View style={{
}}/> justifyContent: 'center',
<PlatformTouchable }}>
onPress={onPress} <Text style={
style={{ MACHINE_STATES[item.state] === MACHINE_STATES.TERMINE ?
height: 64, {fontWeight: 'bold',} : {}}
position: 'absolute', >
zIndex: 10, // Make sure the button is above the text {stateStrings[MACHINE_STATES[item.state]]}
right: 0, </Text>
width: '100%' </View>
}}
> <List.Icon
<View/> {...props}
</PlatformTouchable> color={ThemeManager.getCurrentThemeVariables().text}
<Left style={{marginLeft: 10}}> icon={stateIcons[MACHINE_STATES[item.state]]}
<MaterialCommunityIcons />
name={isDryer ? 'tumble-dryer' : 'washing-machine'} </View>)}
size={30} />
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor} <Divider/>
/> </View>
<Body> );
<Text>
{machineName + ' '}
{this.isMachineWatched(item.number) ?
<MaterialCommunityIcons
name='bell-ring'
color={ThemeManager.getCurrentThemeVariables().brandPrimary}
size={20}
/> : ''}
</Text>
<Text note>
{isMachineRunning ? item.startTime + '/' + item.endTime : ''}
</Text>
</Body>
</Left>
<Right style={{marginRight: 10}}>
<Text style={MACHINE_STATES[item.state] === MACHINE_STATES.TERMINE ?
{fontWeight: 'bold'} : {}}
>
{stateStrings[MACHINE_STATES[item.state]]}
</Text>
<MaterialCommunityIcons
name={stateIcons[MACHINE_STATES[item.state]]}
size={25}
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}
/>
</Right>
</CardItem>
</Card>);
} }
} }

34
screens/SelfMenuScreen.js
View file

@ -2,10 +2,10 @@
import * as React from 'react'; import * as React from 'react';
import {View} from 'react-native'; import {View} from 'react-native';
import {Card, CardItem, H2, H3, Text} from 'native-base';
import ThemeManager from "../utils/ThemeManager"; import ThemeManager from "../utils/ThemeManager";
import i18n from "i18n-js"; import i18n from "i18n-js";
import WebSectionList from "../components/WebSectionList"; 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"; 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<Props> {
marginBottom: 10, marginBottom: 10,
borderRadius: 50 borderRadius: 50
}}> }}>
<H2 style={{ <Title style={{
textAlign: 'center', textAlign: 'center',
marginTop: 10, marginTop: 10,
marginBottom: 10 marginBottom: 10
}}>{section.title}</H2> }}>{section.title}</Title>
</Card> </Card>
); );
} }
@ -115,42 +115,32 @@ export default class SelfMenuScreen extends React.Component<Props> {
return ( return (
<Card style={{ <Card style={{
flex: 0, flex: 0,
marginLeft: 20, margin: 10,
marginRight: 20
}}> }}>
<CardItem style={{ <Card.Title
paddingBottom: 0, title={item.name}
flexDirection: 'column' titleStyle={{textAlign: 'center'}}/>
}}>
<H3 style={{
marginTop: 10,
marginBottom: 0,
color: ThemeManager.getCurrentThemeVariables().listNoteColor
}}>{item.name}</H3>
<View style={{ <View style={{
width: '80%', width: '80%',
marginLeft: 'auto', marginLeft: 'auto',
marginRight: 'auto', marginRight: 'auto',
borderBottomWidth: 1, borderBottomWidth: 1,
borderBottomColor: ThemeManager.getCurrentThemeVariables().listBorderColor, borderBottomColor: ThemeManager.getCurrentThemeVariables().primary,
marginTop: 10, marginTop: 10,
marginBottom: 5, marginBottom: 5,
}}/> }}/>
</CardItem> <Card.Content>
<CardItem style={{
flexDirection: 'column',
paddingTop: 0,
}}>
{item.dishes.map((object) => {item.dishes.map((object) =>
<View> <View>
{object.name !== "" ? {object.name !== "" ?
<Text style={{ <Text style={{
marginTop: 5, marginTop: 5,
marginBottom: 5 marginBottom: 5,
textAlign: 'center'
}}>{this.formatName(object.name)}</Text> }}>{this.formatName(object.name)}</Text>
: <View/>} : <View/>}
</View>)} </View>)}
</CardItem> </Card.Content>
</Card> </Card>
); );
} }

169
screens/SettingsScreen.js
View file

@ -1,13 +1,12 @@
// @flow // @flow
import * as React from 'react'; 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 ThemeManager from '../utils/ThemeManager';
import i18n from "i18n-js"; import i18n from "i18n-js";
import {NavigationActions, StackActions} from "@react-navigation/native";
import {MaterialCommunityIcons} from "@expo/vector-icons";
import AsyncStorageManager from "../utils/AsyncStorageManager"; import AsyncStorageManager from "../utils/AsyncStorageManager";
import NotificationsManager from "../utils/NotificationsManager"; import NotificationsManager from "../utils/NotificationsManager";
import {Card, List, Switch, RadioButton, Text, TouchableRipple} from 'react-native-paper';
type Props = { type Props = {
navigation: Object, navigation: Object,
@ -51,28 +50,25 @@ export default class SettingsScreen extends React.Component<Props, State> {
*/ */
static getGeneralItem(control: React.Node, icon: string, title: string, subtitle: string) { static getGeneralItem(control: React.Node, icon: string, title: string, subtitle: string) {
return ( return (
<ListItem <List.Item
thumbnail title={title}
> description={subtitle}
<Left> left={props => <List.Icon {...props} icon={icon}/>}
<MaterialCommunityIcons right={props => control}
name={icon} />
size={26} );
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/> }
</Left>
<Body>
<Text>
{title}
</Text>
<Text note>
{subtitle}
</Text>
</Body>
<Right> getRadioButton(onPress: Function, value: string, label: string) {
{control} return (
</Right> <TouchableRipple
</ListItem> onPress={onPress}
>
<View pointerEvents="none">
<Text>{label}</Text>
<RadioButton value={value} />
</View>
</TouchableRipple>
); );
} }
@ -113,19 +109,16 @@ export default class SettingsScreen extends React.Component<Props, State> {
*/ */
getProxiwashNotifPicker() { getProxiwashNotifPicker() {
return ( return (
<Picker <RadioButton.Group
note
mode="dropdown"
style={{width: 120}}
selectedValue={this.state.proxiwashNotifPickerSelected}
onValueChange={this.onProxiwashNotifPickerValueChange} onValueChange={this.onProxiwashNotifPickerValueChange}
value={this.state.proxiwashNotifPickerSelected}
> >
<Picker.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.never')} value="never"/> <RadioButton.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.never')} value="never"/>
<Picker.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.5')} value="5"/> <RadioButton.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.5')} value="5"/>
<Picker.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.10')} value="10"/> <RadioButton.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.10')} value="10"/>
<Picker.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.20')} value="20"/> <RadioButton.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.20')} value="20"/>
<Picker.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.30')} value="30"/> <RadioButton.Item label={i18n.t('settingsScreen.proxiwashNotifReminderPicker.30')} value="30"/>
</Picker> </RadioButton.Group>
); );
} }
@ -136,19 +129,16 @@ export default class SettingsScreen extends React.Component<Props, State> {
*/ */
getStartScreenPicker() { getStartScreenPicker() {
return ( return (
<Picker <RadioButton.Group
note
mode="dropdown"
style={{width: 120}}
selectedValue={this.state.startScreenPickerSelected}
onValueChange={this.onStartScreenPickerValueChange} onValueChange={this.onStartScreenPickerValueChange}
value={this.state.startScreenPickerSelected}
> >
<Picker.Item label={i18n.t('screens.home')} value="Home"/> <RadioButton.Item label={i18n.t('screens.home')} value="Home" style={{color: "#fff"}}/>
<Picker.Item label={i18n.t('screens.planning')} value="Planning"/> <RadioButton.Item label={i18n.t('screens.planning')} value="Planning"/>
<Picker.Item label={i18n.t('screens.proxiwash')} value="Proxiwash"/> <RadioButton.Item label={i18n.t('screens.proxiwash')} value="Proxiwash"/>
<Picker.Item label={i18n.t('screens.proximo')} value="Proximo"/> <RadioButton.Item label={i18n.t('screens.proximo')} value="Proximo"/>
<Picker.Item label={'Planex'} value="Planex"/> <RadioButton.Item label={'Planex'} value="Planex"/>
</Picker> </RadioButton.Group>
); );
} }
@ -158,19 +148,6 @@ export default class SettingsScreen extends React.Component<Props, State> {
onToggleNightMode() { onToggleNightMode() {
ThemeManager.getInstance().setNightMode(!this.state.nightMode); ThemeManager.getInstance().setNightMode(!this.state.nightMode);
this.setState({nightMode: !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<Props, State> {
*/ */
getToggleItem(onPressCallback: Function, icon: string, title: string, subtitle: string) { getToggleItem(onPressCallback: Function, icon: string, title: string, subtitle: string) {
return ( return (
<ListItem <List.Item
button title={title}
thumbnail description={subtitle}
onPress={onPressCallback} left={props => <List.Icon {...props} icon={icon}/>}
> right={props =>
<Left> <Switch
<MaterialCommunityIcons value={this.state.nightMode}
name={icon} onValueChange={onPressCallback}
size={26} />}
color={ThemeManager.getCurrentThemeVariables().customMaterialIconColor}/> />
</Left>
<Body>
<Text>
{title}
</Text>
<Text note>
{subtitle}
</Text>
</Body>
<Right>
<CheckBox
checked={this.state.nightMode}
onPress={onPressCallback}
style={{marginRight: 20}}/>
</Right>
</ListItem>
); );
} }
render() { render() {
return ( return (
<Content padder> <ScrollView>
<Card> <Card style={{margin: 5}}>
<CardItem header> <Card.Title title={i18n.t('settingsScreen.generalCard')}/>
<Text>{i18n.t('settingsScreen.generalCard')}</Text> <List.Section>
</CardItem>
<List>
{this.getToggleItem(this.onToggleNightMode, 'theme-light-dark', i18n.t('settingsScreen.nightMode'), i18n.t('settingsScreen.nightModeSub'))} {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'))} <List.Accordion
</List> title={i18n.t('settingsScreen.startScreen')}
description={i18n.t('settingsScreen.startScreenSub')}
left={props => <List.Icon {...props} icon="power" />}
>
{this.getStartScreenPicker()}
</List.Accordion>
</List.Section>
</Card> </Card>
<Card> <Card style={{margin: 5}}>
<CardItem header> <Card.Title title="Proxiwash"/>
<Text>Proxiwash</Text> <List.Accordion
</CardItem> title={i18n.t('settingsScreen.proxiwashNotifReminder')}
<List> description={i18n.t('settingsScreen.proxiwashNotifReminderSub')}
{SettingsScreen.getGeneralItem(this.getProxiwashNotifPicker(), 'washing-machine', i18n.t('settingsScreen.proxiwashNotifReminder'), i18n.t('settingsScreen.proxiwashNotifReminderSub'))} left={props => <List.Icon {...props} icon="washing-machine" />}
</List> >
{this.getProxiwashNotifPicker()}
</List.Accordion>
</Card> </Card>
</Content>
</ScrollView>
); );
} }
} }

130
utils/ThemeManager.js
View file

@ -1,10 +1,8 @@
// @flow // @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 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 * Singleton class used to manage themes
*/ */
@ -17,6 +15,78 @@ export default class ThemeManager {
this.updateThemeCallback = null; 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 * Get this class instance or create one if none is found
* @returns {ThemeManager} * @returns {ThemeManager}
@ -27,6 +97,32 @@ export default class ThemeManager {
ThemeManager.instance; 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) * 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 * @param callback Function to call after theme change
@ -47,30 +143,4 @@ export default class ThemeManager {
this.updateThemeCallback(); 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;
}
}; };

19
utils/WebDataManager.js
View file

@ -1,4 +1,3 @@
import {Toast} from "native-base";
/** /**
* Class used to get json data from the web * Class used to get json data from the web
@ -48,15 +47,15 @@ export default class WebDataManager {
* @param errorString * @param errorString
*/ */
showUpdateToast(errorString) { showUpdateToast(errorString) {
let isSuccess = this.isDataObjectValid(); // let isSuccess = this.isDataObjectValid();
if (!isSuccess) { // if (!isSuccess) {
Toast.show({ // Toast.show({
text: errorString, // text: errorString,
buttonText: 'OK', // buttonText: 'OK',
type: isSuccess ? "success" : "danger", // type: isSuccess ? "success" : "danger",
duration: 2000 // duration: 2000
}); // });
} // }
} }
} }