forked from vergnet/application-amicale
Merge branch 'dev'
This commit is contained in:
commit
ff0f8737a4
70 changed files with 2719 additions and 2252 deletions
7
App.js
7
App.js
|
@ -7,9 +7,6 @@ import {createAppContainerWithInitialRoute} from './navigation/AppNavigator';
|
||||||
import ThemeManager from './utils/ThemeManager';
|
import ThemeManager from './utils/ThemeManager';
|
||||||
import LocaleManager from './utils/LocaleManager';
|
import LocaleManager from './utils/LocaleManager';
|
||||||
import * as Font from 'expo-font';
|
import * as Font from 'expo-font';
|
||||||
// edited native-base-shoutem-theme according to
|
|
||||||
// https://github.com/GeekyAnts/theme/pull/5/files/91f67c55ca6e65fe3af779586b506950c9f331be#diff-4cfc2dd4d5dae7954012899f2268a422
|
|
||||||
// to allow for dynamic theme switching
|
|
||||||
import {clearThemeCache} from 'native-base-shoutem-theme';
|
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";
|
||||||
|
@ -81,6 +78,7 @@ export default class App extends React.Component<Props, State> {
|
||||||
await Font.loadAsync({
|
await Font.loadAsync({
|
||||||
'Roboto': require('native-base/Fonts/Roboto.ttf'),
|
'Roboto': require('native-base/Fonts/Roboto.ttf'),
|
||||||
'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
|
'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
|
||||||
|
'material-community': require('native-base/Fonts/MaterialCommunityIcons.ttf'),
|
||||||
});
|
});
|
||||||
await AsyncStorageManager.getInstance().loadPreferences();
|
await AsyncStorageManager.getInstance().loadPreferences();
|
||||||
ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme());
|
ThemeManager.getInstance().setUpdateThemeCallback(() => this.updateTheme());
|
||||||
|
@ -118,7 +116,8 @@ export default class App extends React.Component<Props, State> {
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (this.state.showIntro || this.state.showUpdate) {
|
if (this.state.showIntro || this.state.showUpdate) {
|
||||||
return <CustomIntroSlider onDone={() => this.onIntroDone()} isUpdate={this.state.showUpdate && !this.state.showIntro}/>;
|
return <CustomIntroSlider onDone={() => this.onIntroDone()}
|
||||||
|
isUpdate={this.state.showUpdate && !this.state.showIntro}/>;
|
||||||
} else {
|
} else {
|
||||||
const AppNavigator = createAppContainerWithInitialRoute(AsyncStorageManager.getInstance().preferences.defaultStartScreen.current);
|
const AppNavigator = createAppContainerWithInitialRoute(AsyncStorageManager.getInstance().preferences.defaultStartScreen.current);
|
||||||
return (
|
return (
|
||||||
|
|
4
app.json
4
app.json
|
@ -4,13 +4,13 @@
|
||||||
"description": "Application mobile compatible Android et iOS pour l'Amicale INSA Toulouse. Grâce à cette application, vous avez facilement accès aux news du campus, aux emplois du temps, à l'état de la laverie, et bien d'autres services ! Ceci est une version Beta, Toutes les fonctionnalités ne sont pas encore implémentées, et il est possible de rencontrer quelques bugs.",
|
"description": "Application mobile compatible Android et iOS pour l'Amicale INSA Toulouse. Grâce à cette application, vous avez facilement accès aux news du campus, aux emplois du temps, à l'état de la laverie, et bien d'autres services ! Ceci est une version Beta, Toutes les fonctionnalités ne sont pas encore implémentées, et il est possible de rencontrer quelques bugs.",
|
||||||
"slug": "application-amicale",
|
"slug": "application-amicale",
|
||||||
"privacy": "public",
|
"privacy": "public",
|
||||||
"sdkVersion": "33.0.0",
|
"sdkVersion": "36.0.0",
|
||||||
"platforms": [
|
"platforms": [
|
||||||
"ios",
|
"ios",
|
||||||
"android",
|
"android",
|
||||||
"web"
|
"web"
|
||||||
],
|
],
|
||||||
"version": "1.3.1",
|
"version": "1.3.3",
|
||||||
"orientation": "portrait",
|
"orientation": "portrait",
|
||||||
"primaryColor": "#be1522",
|
"primaryColor": "#be1522",
|
||||||
"icon": "./assets/android.icon.png",
|
"icon": "./assets/android.icon.png",
|
||||||
|
|
1
clear-node-cache.sh
Executable file
1
clear-node-cache.sh
Executable file
|
@ -0,0 +1 @@
|
||||||
|
rm -rf node_modules/ && rm -f package-lock.json && rm -f yarn.lock && npm cache verify && npm install && expo r -c
|
|
@ -1,13 +1,15 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import {Container, Right} from "native-base";
|
import {Container} from "native-base";
|
||||||
import CustomHeader from "./CustomHeader";
|
import CustomHeader from "./CustomHeader";
|
||||||
import CustomSideMenu from "./CustomSideMenu";
|
import CustomSideMenu from "./CustomSideMenu";
|
||||||
import CustomMaterialIcon from "./CustomMaterialIcon";
|
import CustomMaterialIcon from "./CustomMaterialIcon";
|
||||||
import {Platform, View} from "react-native";
|
import {Platform, View} from "react-native";
|
||||||
import ThemeManager from "../utils/ThemeManager";
|
import ThemeManager from "../utils/ThemeManager";
|
||||||
import Touchable from "react-native-platform-touchable";
|
import Touchable from "react-native-platform-touchable";
|
||||||
|
import {ScreenOrientation} from "expo";
|
||||||
|
import {NavigationActions} from "react-navigation";
|
||||||
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
@ -18,29 +20,34 @@ type Props = {
|
||||||
hasTabs: boolean,
|
hasTabs: boolean,
|
||||||
hasBackButton: boolean,
|
hasBackButton: boolean,
|
||||||
hasSideMenu: boolean,
|
hasSideMenu: boolean,
|
||||||
isHeaderVisible: boolean
|
enableRotation: boolean,
|
||||||
|
hideHeaderOnLandscape: boolean,
|
||||||
}
|
}
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
isOpen: boolean
|
isOpen: boolean,
|
||||||
|
isHeaderVisible: boolean
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export default class BaseContainer extends React.Component<Props, State> {
|
export default class BaseContainer extends React.Component<Props, State> {
|
||||||
|
|
||||||
willBlurSubscription: function;
|
willBlurSubscription: function;
|
||||||
|
willFocusSubscription: function;
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
headerRightButton: <View/>,
|
headerRightButton: <View/>,
|
||||||
hasTabs: false,
|
hasTabs: false,
|
||||||
hasBackButton: false,
|
hasBackButton: false,
|
||||||
hasSideMenu: true,
|
hasSideMenu: true,
|
||||||
isHeaderVisible: true,
|
enableRotation: false,
|
||||||
|
hideHeaderOnLandscape: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
isOpen: false,
|
isOpen: false,
|
||||||
|
isHeaderVisible: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
toggle() {
|
toggle() {
|
||||||
|
@ -57,9 +64,31 @@ export default class BaseContainer extends React.Component<Props, State> {
|
||||||
* Register for blur event to close side menu on screen change
|
* Register for blur event to close side menu on screen change
|
||||||
*/
|
*/
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
|
this.willFocusSubscription = this.props.navigation.addListener(
|
||||||
|
'willFocus',
|
||||||
|
payload => {
|
||||||
|
if (this.props.enableRotation) {
|
||||||
|
ScreenOrientation.unlockAsync();
|
||||||
|
ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => {
|
||||||
|
if (this.props.hideHeaderOnLandscape) {
|
||||||
|
let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
|
||||||
|
OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
|
||||||
|
OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
|
||||||
|
this.setState({isHeaderVisible: !isLandscape});
|
||||||
|
const setParamsAction = NavigationActions.setParams({
|
||||||
|
params: {showTabBar: !isLandscape},
|
||||||
|
key: this.props.navigation.state.key,
|
||||||
|
});
|
||||||
|
this.props.navigation.dispatch(setParamsAction);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
this.willBlurSubscription = this.props.navigation.addListener(
|
this.willBlurSubscription = this.props.navigation.addListener(
|
||||||
'willBlur',
|
'willBlur',
|
||||||
payload => {
|
payload => {
|
||||||
|
if (this.props.enableRotation)
|
||||||
|
ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
|
||||||
this.setState({isOpen: false});
|
this.setState({isOpen: false});
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
|
@ -71,11 +100,14 @@ export default class BaseContainer extends React.Component<Props, State> {
|
||||||
componentWillUnmount() {
|
componentWillUnmount() {
|
||||||
if (this.willBlurSubscription !== undefined)
|
if (this.willBlurSubscription !== undefined)
|
||||||
this.willBlurSubscription.remove();
|
this.willBlurSubscription.remove();
|
||||||
|
if (this.willFocusSubscription !== undefined)
|
||||||
|
this.willFocusSubscription.remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
getMainContainer() {
|
getMainContainer() {
|
||||||
return (
|
return (
|
||||||
<Container>
|
<Container>
|
||||||
|
{this.state.isHeaderVisible ?
|
||||||
<CustomHeader
|
<CustomHeader
|
||||||
navigation={this.props.navigation} title={this.props.headerTitle}
|
navigation={this.props.navigation} title={this.props.headerTitle}
|
||||||
leftButton={
|
leftButton={
|
||||||
|
@ -90,6 +122,7 @@ export default class BaseContainer extends React.Component<Props, State> {
|
||||||
rightButton={this.props.headerRightButton}
|
rightButton={this.props.headerRightButton}
|
||||||
hasTabs={this.props.hasTabs}
|
hasTabs={this.props.hasTabs}
|
||||||
hasBackButton={this.props.hasBackButton}/>
|
hasBackButton={this.props.hasBackButton}/>
|
||||||
|
: <View style={{paddingTop: 20}}/>}
|
||||||
{this.props.children}
|
{this.props.children}
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
|
@ -97,7 +130,6 @@ export default class BaseContainer extends React.Component<Props, State> {
|
||||||
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
if (this.props.isHeaderVisible) {
|
|
||||||
return (
|
return (
|
||||||
<View style={{
|
<View style={{
|
||||||
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
|
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
|
||||||
|
@ -113,17 +145,5 @@ export default class BaseContainer extends React.Component<Props, State> {
|
||||||
this.getMainContainer()}
|
this.getMainContainer()}
|
||||||
</View>
|
</View>
|
||||||
);
|
);
|
||||||
} else {
|
|
||||||
return (
|
|
||||||
<View style={{
|
|
||||||
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
|
|
||||||
width: '100%',
|
|
||||||
height: '100%'
|
|
||||||
}}>
|
|
||||||
{this.props.children}
|
|
||||||
</View>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,15 +1,19 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import * as React from "react";
|
import * as React from "react";
|
||||||
import {Body, Header, Left, Right, Title} from "native-base";
|
import {Body, Header, Input, Item, Left, Right, Title, Form} from "native-base";
|
||||||
import {Platform, StyleSheet, View} from "react-native";
|
import {Platform, StyleSheet, View} from "react-native";
|
||||||
import {getStatusBarHeight} from "react-native-status-bar-height";
|
import {getStatusBarHeight} from "react-native-status-bar-height";
|
||||||
import Touchable from 'react-native-platform-touchable';
|
import Touchable from 'react-native-platform-touchable';
|
||||||
import ThemeManager from "../utils/ThemeManager";
|
import ThemeManager from "../utils/ThemeManager";
|
||||||
import CustomMaterialIcon from "./CustomMaterialIcon";
|
import CustomMaterialIcon from "./CustomMaterialIcon";
|
||||||
|
import i18n from "i18n-js";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
hasBackButton: boolean,
|
hasBackButton: boolean,
|
||||||
|
hasSearchField: boolean,
|
||||||
|
searchCallback: Function,
|
||||||
|
shouldFocusSearchBar: boolean,
|
||||||
leftButton: React.Node,
|
leftButton: React.Node,
|
||||||
rightButton: React.Node,
|
rightButton: React.Node,
|
||||||
title: string,
|
title: string,
|
||||||
|
@ -29,11 +33,41 @@ export default class CustomHeader extends React.Component<Props> {
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
hasBackButton: false,
|
hasBackButton: false,
|
||||||
|
hasSearchField: false,
|
||||||
|
searchCallback: () => null,
|
||||||
|
shouldFocusSearchBar: false,
|
||||||
|
title: '',
|
||||||
leftButton: <View/>,
|
leftButton: <View/>,
|
||||||
rightButton: <View/>,
|
rightButton: <View/>,
|
||||||
hasTabs: false,
|
hasTabs: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
if (this.refs.searchInput !== undefined && this.refs.searchInput._root !== undefined && this.props.shouldFocusSearchBar) {
|
||||||
|
// does not work if called to early for some reason...
|
||||||
|
setTimeout(() => this.refs.searchInput._root.focus(), 500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
getSearchBar() {
|
||||||
|
return (
|
||||||
|
<Item
|
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
marginBottom: 7
|
||||||
|
}}>
|
||||||
|
<CustomMaterialIcon
|
||||||
|
icon={'magnify'}
|
||||||
|
color={ThemeManager.getCurrentThemeVariables().toolbarBtnColor}/>
|
||||||
|
<Input
|
||||||
|
ref="searchInput"
|
||||||
|
placeholder={i18n.t('proximoScreen.search')}
|
||||||
|
placeholderTextColor={ThemeManager.getCurrentThemeVariables().toolbarPlaceholderColor}
|
||||||
|
onChangeText={(text) => this.props.searchCallback(text)}/>
|
||||||
|
</Item>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let button;
|
let button;
|
||||||
// Does the app have a back button or a burger menu ?
|
// Does the app have a back button or a burger menu ?
|
||||||
|
@ -52,13 +86,17 @@ export default class CustomHeader extends React.Component<Props> {
|
||||||
return (
|
return (
|
||||||
<Header style={styles.header}
|
<Header style={styles.header}
|
||||||
hasTabs={this.props.hasTabs}>
|
hasTabs={this.props.hasTabs}>
|
||||||
<Left>
|
<Left style={{flex: 0}}>
|
||||||
{button}
|
{button}
|
||||||
</Left>
|
</Left>
|
||||||
<Body>
|
<Body>
|
||||||
<Title>{this.props.title}</Title>
|
{this.props.hasSearchField ?
|
||||||
|
this.getSearchBar() :
|
||||||
|
<Title style={{
|
||||||
|
paddingLeft: 10
|
||||||
|
}}>{this.props.title}</Title>}
|
||||||
</Body>
|
</Body>
|
||||||
<Right>
|
<Right style={{flex: this.props.hasSearchField ? 0 : 1}}>
|
||||||
{this.props.rightButton}
|
{this.props.rightButton}
|
||||||
{this.props.hasBackButton ? <View/> :
|
{this.props.hasBackButton ? <View/> :
|
||||||
<Touchable
|
<Touchable
|
||||||
|
|
|
@ -101,7 +101,7 @@ export default class DashboardItem extends React.Component<Props> {
|
||||||
div: {color: ThemeManager.getCurrentThemeVariables().textColor},
|
div: {color: ThemeManager.getCurrentThemeVariables().textColor},
|
||||||
}}/>
|
}}/>
|
||||||
<LinearGradient
|
<LinearGradient
|
||||||
colors={['transparent', ThemeManager.getCurrentThemeVariables().cardDefaultBg]}
|
colors={['rgba(255,255,255,0)', ThemeManager.getCurrentThemeVariables().cardDefaultBg]}
|
||||||
start={{x: 0, y: 0}}
|
start={{x: 0, y: 0}}
|
||||||
end={{x: 0, y: 0.6}}
|
end={{x: 0, y: 0.6}}
|
||||||
// end={[0, 0.6]}
|
// end={[0, 0.6]}
|
||||||
|
|
|
@ -8,6 +8,7 @@ import CustomMaterialIcon from '../components/CustomMaterialIcon';
|
||||||
import ThemeManager from "../utils/ThemeManager";
|
import ThemeManager from "../utils/ThemeManager";
|
||||||
|
|
||||||
const deviceHeight = Dimensions.get("window").height;
|
const deviceHeight = Dimensions.get("window").height;
|
||||||
|
const deviceWidth = Dimensions.get("window").width;
|
||||||
|
|
||||||
const drawerCover = require("../assets/drawer-cover.png");
|
const drawerCover = require("../assets/drawer-cover.png");
|
||||||
|
|
||||||
|
@ -45,6 +46,11 @@ export default class SideBar extends React.Component<Props, State> {
|
||||||
route: "AmicaleScreen",
|
route: "AmicaleScreen",
|
||||||
icon: "web",
|
icon: "web",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "Élus Étudiants",
|
||||||
|
route: "ElusEtudScreen",
|
||||||
|
icon: "alpha-e-box",
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "Wiketud",
|
name: "Wiketud",
|
||||||
route: "WiketudScreen",
|
route: "WiketudScreen",
|
||||||
|
@ -78,11 +84,9 @@ export default class SideBar extends React.Component<Props, State> {
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Container style={{backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor}}>
|
<Container style={{
|
||||||
<Content
|
backgroundColor: ThemeManager.getCurrentThemeVariables().sideMenuBgColor,
|
||||||
bounces={false}
|
}}>
|
||||||
style={{flex: 1, top: -1}}
|
|
||||||
>
|
|
||||||
<Image source={drawerCover} style={styles.drawerCover}/>
|
<Image source={drawerCover} style={styles.drawerCover}/>
|
||||||
<FlatList
|
<FlatList
|
||||||
data={this.dataSet}
|
data={this.dataSet}
|
||||||
|
@ -126,7 +130,6 @@ export default class SideBar extends React.Component<Props, State> {
|
||||||
</Right>}
|
</Right>}
|
||||||
</ListItem>}
|
</ListItem>}
|
||||||
/>
|
/>
|
||||||
</Content>
|
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -134,8 +137,8 @@ export default class SideBar extends React.Component<Props, State> {
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
const styles = StyleSheet.create({
|
||||||
drawerCover: {
|
drawerCover: {
|
||||||
height: deviceHeight / 5,
|
height: deviceWidth / 3,
|
||||||
width: null,
|
width: 2 * deviceWidth / 3,
|
||||||
position: "relative",
|
position: "relative",
|
||||||
marginBottom: 10,
|
marginBottom: 10,
|
||||||
marginTop: 20
|
marginTop: 20
|
||||||
|
|
|
@ -8,7 +8,6 @@ import Touchable from "react-native-platform-touchable";
|
||||||
import CustomMaterialIcon from "../components/CustomMaterialIcon";
|
import CustomMaterialIcon from "../components/CustomMaterialIcon";
|
||||||
import ThemeManager from "../utils/ThemeManager";
|
import ThemeManager from "../utils/ThemeManager";
|
||||||
import BaseContainer from "../components/BaseContainer";
|
import BaseContainer from "../components/BaseContainer";
|
||||||
import {ScreenOrientation} from 'expo';
|
|
||||||
import {NavigationActions} from 'react-navigation';
|
import {NavigationActions} from 'react-navigation';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
@ -25,67 +24,17 @@ type Props = {
|
||||||
hasFooter: boolean,
|
hasFooter: boolean,
|
||||||
}
|
}
|
||||||
|
|
||||||
type State = {
|
|
||||||
isLandscape: boolean,
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Class defining a webview screen.
|
* Class defining a webview screen.
|
||||||
*/
|
*/
|
||||||
export default class WebViewScreen extends React.Component<Props, State> {
|
export default class WebViewScreen extends React.Component<Props> {
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
hasBackButton: false,
|
hasBackButton: false,
|
||||||
hasSideMenu: true,
|
hasSideMenu: true,
|
||||||
hasFooter: true,
|
hasFooter: true,
|
||||||
};
|
};
|
||||||
|
|
||||||
state = {
|
|
||||||
isLandscape: false,
|
|
||||||
};
|
|
||||||
|
|
||||||
webviewArray: Array<WebView> = [];
|
webviewArray: Array<WebView> = [];
|
||||||
willFocusSubscription: function;
|
|
||||||
willBlurSubscription: function;
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Register for blur event to close side menu on screen change
|
|
||||||
*/
|
|
||||||
componentDidMount() {
|
|
||||||
this.willFocusSubscription = this.props.navigation.addListener(
|
|
||||||
'willFocus',
|
|
||||||
payload => {
|
|
||||||
ScreenOrientation.unlockAsync();
|
|
||||||
ScreenOrientation.addOrientationChangeListener((OrientationChangeEvent) => {
|
|
||||||
let isLandscape = OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE ||
|
|
||||||
OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_LEFT ||
|
|
||||||
OrientationChangeEvent.orientationInfo.orientation === ScreenOrientation.Orientation.LANDSCAPE_RIGHT;
|
|
||||||
this.setState({isLandscape: isLandscape});
|
|
||||||
const setParamsAction = NavigationActions.setParams({
|
|
||||||
params: {showTabBar: !isLandscape},
|
|
||||||
key: this.props.navigation.state.key,
|
|
||||||
});
|
|
||||||
this.props.navigation.dispatch(setParamsAction);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
);
|
|
||||||
this.willBlurSubscription = this.props.navigation.addListener(
|
|
||||||
'willBlur',
|
|
||||||
payload => {
|
|
||||||
ScreenOrientation.lockAsync(ScreenOrientation.Orientation.PORTRAIT);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
* Unregister from event when un-mounting components
|
|
||||||
*/
|
|
||||||
componentWillUnmount() {
|
|
||||||
if (this.willBlurSubscription !== undefined)
|
|
||||||
this.willBlurSubscription.remove();
|
|
||||||
if (this.willFocusSubscription !== undefined)
|
|
||||||
this.willFocusSubscription.remove();
|
|
||||||
}
|
|
||||||
|
|
||||||
openWebLink(url: string) {
|
openWebLink(url: string) {
|
||||||
Linking.openURL(url).catch((err) => console.error('Error opening link', err));
|
Linking.openURL(url).catch((err) => console.error('Error opening link', err));
|
||||||
|
@ -190,7 +139,8 @@ export default class WebViewScreen extends React.Component<Props, State> {
|
||||||
headerRightButton={this.getRefreshButton()}
|
headerRightButton={this.getRefreshButton()}
|
||||||
hasBackButton={this.props.hasHeaderBackButton}
|
hasBackButton={this.props.hasHeaderBackButton}
|
||||||
hasSideMenu={this.props.hasSideMenu}
|
hasSideMenu={this.props.hasSideMenu}
|
||||||
isHeaderVisible={!this.state.isLandscape}>
|
enableRotation={true}
|
||||||
|
hideHeaderOnLandscape={true}>
|
||||||
{this.props.data.length === 1 ?
|
{this.props.data.length === 1 ?
|
||||||
this.getWebview(this.props.data[0]) :
|
this.getWebview(this.props.data[0]) :
|
||||||
<Tabs
|
<Tabs
|
||||||
|
@ -199,7 +149,6 @@ export default class WebViewScreen extends React.Component<Props, State> {
|
||||||
}}
|
}}
|
||||||
locked={true}
|
locked={true}
|
||||||
style = {{
|
style = {{
|
||||||
paddingTop: this.state.isLandscape ? 20 : 0,
|
|
||||||
backgroundColor: Platform.OS === 'ios' ?
|
backgroundColor: Platform.OS === 'ios' ?
|
||||||
ThemeManager.getCurrentThemeVariables().tabDefaultBg :
|
ThemeManager.getCurrentThemeVariables().tabDefaultBg :
|
||||||
ThemeManager.getCurrentThemeVariables().brandPrimary
|
ThemeManager.getCurrentThemeVariables().brandPrimary
|
||||||
|
|
|
@ -1,36 +1,37 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
import { PLATFORM } from './../variables/commonColor';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const badgeTheme = {
|
const badgeTheme = {
|
||||||
".primary": {
|
'.primary': {
|
||||||
backgroundColor: variables.btnPrimaryBg
|
backgroundColor: variables.buttonPrimaryBg
|
||||||
},
|
},
|
||||||
".warning": {
|
'.warning': {
|
||||||
backgroundColor: variables.btnWarningBg
|
backgroundColor: variables.buttonWarningBg
|
||||||
},
|
},
|
||||||
".info": {
|
'.info': {
|
||||||
backgroundColor: variables.btnInfoBg
|
backgroundColor: variables.buttonInfoBg
|
||||||
},
|
},
|
||||||
".success": {
|
'.success': {
|
||||||
backgroundColor: variables.btnSuccessBg
|
backgroundColor: variables.buttonSuccessBg
|
||||||
},
|
},
|
||||||
".danger": {
|
'.danger': {
|
||||||
backgroundColor: variables.btnDangerBg
|
backgroundColor: variables.buttonDangerBg
|
||||||
},
|
},
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.badgeColor,
|
color: variables.badgeColor,
|
||||||
fontSize: variables.fontSizeBase,
|
fontSize: variables.fontSizeBase,
|
||||||
lineHeight: variables.lineHeight - 1,
|
lineHeight: variables.lineHeight - 1,
|
||||||
textAlign: "center",
|
textAlign: 'center',
|
||||||
paddingHorizontal: 3
|
paddingHorizontal: 3
|
||||||
},
|
},
|
||||||
backgroundColor: variables.badgeBg,
|
backgroundColor: variables.badgeBg,
|
||||||
padding: variables.badgePadding,
|
padding: variables.badgePadding,
|
||||||
paddingHorizontal: 6,
|
paddingHorizontal: 6,
|
||||||
alignSelf: "flex-start",
|
alignSelf: 'flex-start',
|
||||||
justifyContent: variables.platform === "ios" ? "center" : undefined,
|
justifyContent: variables.platform === PLATFORM.IOS ? 'center' : undefined,
|
||||||
borderRadius: 13.5,
|
borderRadius: 13.5,
|
||||||
height: 27
|
height: 27
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,12 +1,10 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from './../variables/platform';
|
export default () => {
|
||||||
|
|
||||||
export default (variables /*: * */ = variable) => {
|
|
||||||
const bodyTheme = {
|
const bodyTheme = {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
alignSelf: 'center',
|
alignSelf: 'center'
|
||||||
};
|
};
|
||||||
|
|
||||||
return bodyTheme;
|
return bodyTheme;
|
||||||
|
|
|
@ -1,158 +1,159 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
import { PLATFORM } from './../variables/commonColor';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const platformStyle = variables.platformStyle;
|
const platformStyle = variables.platformStyle;
|
||||||
const platform = variables.platform;
|
const platform = variables.platform;
|
||||||
const darkCommon = {
|
const darkCommon = {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.brandDark
|
color: variables.brandDark
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.brandDark
|
color: variables.brandDark
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.brandDark
|
color: variables.brandDark
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const lightCommon = {
|
const lightCommon = {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.brandLight
|
color: variables.brandLight
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.brandLight
|
color: variables.brandLight
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.brandLight
|
color: variables.brandLight
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const primaryCommon = {
|
const primaryCommon = {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.btnPrimaryBg
|
color: variables.buttonPrimaryBg
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.btnPrimaryBg
|
color: variables.buttonPrimaryBg
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.btnPrimaryBg
|
color: variables.buttonPrimaryBg
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const successCommon = {
|
const successCommon = {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.btnSuccessBg
|
color: variables.buttonSuccessBg
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.btnSuccessBg
|
color: variables.buttonSuccessBg
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.btnSuccessBg
|
color: variables.buttonSuccessBg
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const infoCommon = {
|
const infoCommon = {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.btnInfoBg
|
color: variables.buttonInfoBg
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.btnInfoBg
|
color: variables.buttonInfoBg
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.btnInfoBg
|
color: variables.buttonInfoBg
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const warningCommon = {
|
const warningCommon = {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.btnWarningBg
|
color: variables.buttonWarningBg
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.btnWarningBg
|
color: variables.buttonWarningBg
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.btnWarningBg
|
color: variables.buttonWarningBg
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const dangerCommon = {
|
const dangerCommon = {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.btnDangerBg
|
color: variables.buttonDangerBg
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.btnDangerBg
|
color: variables.buttonDangerBg
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.btnDangerBg
|
color: variables.buttonDangerBg
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const buttonTheme = {
|
const buttonTheme = {
|
||||||
".disabled": {
|
'.disabled': {
|
||||||
".transparent": {
|
'.transparent': {
|
||||||
backgroundColor: null,
|
backgroundColor: 'transparent',
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.btnDisabledBg
|
color: variables.buttonDisabledBg
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.btnDisabledBg
|
color: variables.buttonDisabledBg
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.btnDisabledBg
|
color: variables.buttonDisabledBg
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.brandLight
|
color: variables.brandLight
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.brandLight
|
color: variables.brandLight
|
||||||
},
|
},
|
||||||
backgroundColor: variables.btnDisabledBg
|
backgroundColor: variables.buttonDisabledBg
|
||||||
},
|
},
|
||||||
".bordered": {
|
'.bordered': {
|
||||||
".dark": {
|
'.dark': {
|
||||||
...darkCommon,
|
...darkCommon,
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
borderColor: variables.brandDark,
|
borderColor: variables.brandDark,
|
||||||
borderWidth: variables.borderWidth * 2
|
borderWidth: variables.borderWidth * 2
|
||||||
},
|
},
|
||||||
".light": {
|
'.light': {
|
||||||
...lightCommon,
|
...lightCommon,
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
borderColor: variables.brandLight,
|
borderColor: variables.brandLight,
|
||||||
borderWidth: variables.borderWidth * 2
|
borderWidth: variables.borderWidth * 2
|
||||||
},
|
},
|
||||||
".primary": {
|
'.primary': {
|
||||||
...primaryCommon,
|
...primaryCommon,
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
borderColor: variables.btnPrimaryBg,
|
borderColor: variables.buttonPrimaryBg,
|
||||||
borderWidth: variables.borderWidth * 2
|
borderWidth: variables.borderWidth * 2
|
||||||
},
|
},
|
||||||
".success": {
|
'.success': {
|
||||||
...successCommon,
|
...successCommon,
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
borderColor: variables.btnSuccessBg,
|
borderColor: variables.buttonSuccessBg,
|
||||||
borderWidth: variables.borderWidth * 2
|
borderWidth: variables.borderWidth * 2
|
||||||
},
|
},
|
||||||
".info": {
|
'.info': {
|
||||||
...infoCommon,
|
...infoCommon,
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
borderColor: variables.btnInfoBg,
|
borderColor: variables.buttonInfoBg,
|
||||||
borderWidth: variables.borderWidth * 2
|
borderWidth: variables.borderWidth * 2
|
||||||
},
|
},
|
||||||
".warning": {
|
'.warning': {
|
||||||
...warningCommon,
|
...warningCommon,
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
borderColor: variables.btnWarningBg,
|
borderColor: variables.buttonWarningBg,
|
||||||
borderWidth: variables.borderWidth * 2
|
borderWidth: variables.borderWidth * 2
|
||||||
},
|
},
|
||||||
".danger": {
|
'.danger': {
|
||||||
...dangerCommon,
|
...dangerCommon,
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
borderColor: variables.btnDangerBg,
|
borderColor: variables.buttonDangerBg,
|
||||||
borderWidth: variables.borderWidth * 2
|
borderWidth: variables.borderWidth * 2
|
||||||
},
|
},
|
||||||
".disabled": {
|
'.disabled': {
|
||||||
backgroundColor: null,
|
backgroundColor: 'transparent',
|
||||||
borderColor: variables.btnDisabledBg,
|
borderColor: variables.buttonDisabledBg,
|
||||||
borderWidth: variables.borderWidth * 2,
|
borderWidth: variables.borderWidth * 2,
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.btnDisabledBg
|
color: variables.buttonDisabledBg
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
...primaryCommon,
|
...primaryCommon,
|
||||||
|
@ -162,235 +163,224 @@ export default (variables /*: * */ = variable) => {
|
||||||
shadowOffset: null,
|
shadowOffset: null,
|
||||||
shadowOpacity: null,
|
shadowOpacity: null,
|
||||||
shadowRadius: null,
|
shadowRadius: null,
|
||||||
backgroundColor: "transparent"
|
backgroundColor: 'transparent'
|
||||||
},
|
},
|
||||||
|
|
||||||
".dark": {
|
'.dark': {
|
||||||
".bordered": {
|
'.bordered': {
|
||||||
...darkCommon
|
...darkCommon
|
||||||
},
|
},
|
||||||
backgroundColor: variables.brandDark
|
backgroundColor: variables.brandDark
|
||||||
},
|
},
|
||||||
".light": {
|
'.light': {
|
||||||
".transparent": {
|
'.transparent': {
|
||||||
...lightCommon,
|
...lightCommon,
|
||||||
backgroundColor: null
|
backgroundColor: 'transparent'
|
||||||
},
|
},
|
||||||
".bordered": {
|
'.bordered': {
|
||||||
...lightCommon
|
...lightCommon
|
||||||
},
|
},
|
||||||
...darkCommon,
|
...darkCommon,
|
||||||
backgroundColor: variables.brandLight
|
backgroundColor: variables.brandLight
|
||||||
},
|
},
|
||||||
|
|
||||||
".primary": {
|
'.primary': {
|
||||||
".bordered": {
|
'.bordered': {
|
||||||
...primaryCommon
|
...primaryCommon
|
||||||
},
|
},
|
||||||
backgroundColor: variables.btnPrimaryBg
|
backgroundColor: variables.buttonPrimaryBg
|
||||||
},
|
},
|
||||||
|
|
||||||
".success": {
|
'.success': {
|
||||||
".bordered": {
|
'.bordered': {
|
||||||
...successCommon
|
...successCommon
|
||||||
},
|
},
|
||||||
backgroundColor: variables.btnSuccessBg
|
backgroundColor: variables.buttonSuccessBg
|
||||||
},
|
},
|
||||||
|
|
||||||
".info": {
|
'.info': {
|
||||||
".bordered": {
|
'.bordered': {
|
||||||
...infoCommon
|
...infoCommon
|
||||||
},
|
},
|
||||||
backgroundColor: variables.btnInfoBg
|
backgroundColor: variables.buttonInfoBg
|
||||||
},
|
},
|
||||||
|
|
||||||
".warning": {
|
'.warning': {
|
||||||
".bordered": {
|
'.bordered': {
|
||||||
...warningCommon
|
...warningCommon
|
||||||
},
|
},
|
||||||
backgroundColor: variables.btnWarningBg
|
backgroundColor: variables.buttonWarningBg
|
||||||
},
|
},
|
||||||
|
|
||||||
".danger": {
|
'.danger': {
|
||||||
".bordered": {
|
'.bordered': {
|
||||||
...dangerCommon
|
...dangerCommon
|
||||||
},
|
},
|
||||||
backgroundColor: variables.btnDangerBg
|
backgroundColor: variables.buttonDangerBg
|
||||||
},
|
},
|
||||||
|
|
||||||
".block": {
|
'.block': {
|
||||||
justifyContent: "center",
|
justifyContent: 'center',
|
||||||
alignSelf: "stretch"
|
alignSelf: 'stretch'
|
||||||
},
|
},
|
||||||
|
|
||||||
".full": {
|
'.full': {
|
||||||
justifyContent: "center",
|
justifyContent: 'center',
|
||||||
alignSelf: "stretch",
|
alignSelf: 'stretch',
|
||||||
borderRadius: 0
|
borderRadius: 0
|
||||||
},
|
},
|
||||||
|
|
||||||
".rounded": {
|
'.rounded': {
|
||||||
// paddingHorizontal: variables.buttonPadding + 20,
|
|
||||||
borderRadius: variables.borderRadiusLarge
|
borderRadius: variables.borderRadiusLarge
|
||||||
},
|
},
|
||||||
|
|
||||||
".transparent": {
|
'.transparent': {
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
elevation: 0,
|
elevation: 0,
|
||||||
shadowColor: null,
|
shadowColor: null,
|
||||||
shadowOffset: null,
|
shadowOffset: null,
|
||||||
shadowRadius: null,
|
shadowRadius: null,
|
||||||
shadowOpacity: null,
|
shadowOpacity: null,
|
||||||
...primaryCommon,
|
...primaryCommon,
|
||||||
".dark": {
|
'.dark': {
|
||||||
...darkCommon,
|
...darkCommon,
|
||||||
backgroundColor: null
|
|
||||||
},
|
},
|
||||||
".danger": {
|
'.danger': {
|
||||||
...dangerCommon,
|
...dangerCommon,
|
||||||
backgroundColor: null
|
|
||||||
},
|
},
|
||||||
".warning": {
|
'.warning': {
|
||||||
...warningCommon,
|
...warningCommon,
|
||||||
backgroundColor: null
|
|
||||||
},
|
},
|
||||||
".info": {
|
'.info': {
|
||||||
...infoCommon,
|
...infoCommon,
|
||||||
backgroundColor: null
|
|
||||||
},
|
},
|
||||||
".primary": {
|
'.primary': {
|
||||||
...primaryCommon,
|
...primaryCommon,
|
||||||
backgroundColor: null
|
|
||||||
},
|
},
|
||||||
".success": {
|
'.success': {
|
||||||
...successCommon,
|
...successCommon,
|
||||||
backgroundColor: null
|
|
||||||
},
|
},
|
||||||
".light": {
|
'.light': {
|
||||||
...lightCommon,
|
...lightCommon,
|
||||||
backgroundColor: null
|
|
||||||
},
|
},
|
||||||
".disabled": {
|
'.disabled': {
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
borderColor: variables.btnDisabledBg,
|
borderColor: variables.buttonDisabledBg,
|
||||||
borderWidth: variables.borderWidth * 2,
|
borderWidth: variables.borderWidth * 2,
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.btnDisabledBg
|
color: variables.buttonDisabledBg
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.btnDisabledBg
|
color: variables.buttonDisabledBg
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.btnDisabledBg
|
color: variables.buttonDisabledBg
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
".small": {
|
'.small': {
|
||||||
height: 30,
|
height: 30,
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
fontSize: 14
|
fontSize: 14
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
fontSize: 20,
|
fontSize: 20,
|
||||||
paddingTop: 0
|
paddingTop: 0
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
fontSize: 20,
|
fontSize: 20,
|
||||||
paddingTop: 0
|
paddingTop: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
".large": {
|
'.large': {
|
||||||
height: 60,
|
height: 60,
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
fontSize: 22,
|
fontSize: 22
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
".capitalize": {},
|
'.capitalize': {},
|
||||||
|
|
||||||
".vertical": {
|
'.vertical': {
|
||||||
flexDirection: "column",
|
flexDirection: 'column',
|
||||||
height: null
|
height: null
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
fontFamily: variables.btnFontFamily,
|
fontFamily: variables.buttonFontFamily,
|
||||||
marginLeft: 0,
|
marginLeft: 0,
|
||||||
marginRight: 0,
|
marginRight: 0,
|
||||||
color: variables.btnTextColor,
|
color: variables.buttonTextColor,
|
||||||
fontSize: variables.btnTextSize,
|
fontSize: variables.buttonTextSize,
|
||||||
paddingHorizontal: 16,
|
paddingHorizontal: 16,
|
||||||
backgroundColor: "transparent"
|
backgroundColor: 'transparent'
|
||||||
// childPosition: 1
|
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.btnTextColor,
|
color: variables.buttonTextColor,
|
||||||
fontSize: 24,
|
fontSize: 24,
|
||||||
marginHorizontal: 16,
|
marginHorizontal: 16,
|
||||||
paddingTop: platform === "ios" ? 2 : undefined
|
paddingTop: platform === PLATFORM.IOS ? 2 : undefined
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.btnTextColor,
|
color: variables.buttonTextColor,
|
||||||
fontSize: 24,
|
fontSize: 24,
|
||||||
marginHorizontal: 16,
|
marginHorizontal: 16,
|
||||||
paddingTop: platform === "ios" ? 2 : undefined
|
paddingTop: platform === PLATFORM.IOS ? 2 : undefined
|
||||||
},
|
},
|
||||||
|
|
||||||
".iconLeft": {
|
'.iconLeft': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
marginLeft: 0
|
marginLeft: 0
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
marginRight: 0,
|
marginRight: 0,
|
||||||
marginLeft: 16
|
marginLeft: 16
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
marginRight: 0,
|
marginRight: 0,
|
||||||
marginLeft: 16
|
marginLeft: 16
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
".iconRight": {
|
'.iconRight': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
marginRight: 0
|
marginRight: 0
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
marginLeft: 0,
|
marginLeft: 0,
|
||||||
marginRight: 16
|
marginRight: 16
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
marginLeft: 0,
|
marginLeft: 0,
|
||||||
marginRight: 16
|
marginRight: 16
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
".picker": {
|
'.picker': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
".note": {
|
'.note': {
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
lineHeight: null
|
lineHeight: null
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
paddingVertical: variables.buttonPadding,
|
paddingVertical: variables.buttonPadding,
|
||||||
// paddingHorizontal: variables.buttonPadding + 10,
|
backgroundColor: variables.buttonPrimaryBg,
|
||||||
backgroundColor: variables.btnPrimaryBg,
|
|
||||||
borderRadius: variables.borderRadiusBase,
|
borderRadius: variables.borderRadiusBase,
|
||||||
borderColor: variables.btnPrimaryBg,
|
borderColor: variables.buttonPrimaryBg,
|
||||||
borderWidth: null,
|
borderWidth: null,
|
||||||
height: 45,
|
height: 45,
|
||||||
alignSelf: "flex-start",
|
flexDirection: 'row',
|
||||||
flexDirection: "row",
|
|
||||||
elevation: 2,
|
elevation: 2,
|
||||||
shadowColor: platformStyle === "material" ? variables.brandDark : undefined,
|
shadowColor:
|
||||||
|
platformStyle === PLATFORM.MATERIAL ? variables.brandDark : undefined,
|
||||||
shadowOffset:
|
shadowOffset:
|
||||||
platformStyle === "material" ? { width: 0, height: 2 } : undefined,
|
platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
|
||||||
shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
|
shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
|
||||||
shadowRadius: platformStyle === "material" ? 1.2 : undefined,
|
shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
justifyContent: "space-between"
|
justifyContent: 'space-between'
|
||||||
};
|
};
|
||||||
return buttonTheme;
|
return buttonTheme;
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,19 +1,19 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const cardTheme = {
|
const cardTheme = {
|
||||||
".transparent": {
|
'.transparent': {
|
||||||
shadowColor: null,
|
shadowColor: null,
|
||||||
shadowOffset: null,
|
shadowOffset: null,
|
||||||
shadowOpacity: null,
|
shadowOpacity: null,
|
||||||
shadowRadius: null,
|
shadowRadius: null,
|
||||||
elevation: null,
|
elevation: null,
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
borderWidth: 0
|
borderWidth: 0
|
||||||
},
|
},
|
||||||
".noShadow": {
|
'.noShadow': {
|
||||||
shadowColor: null,
|
shadowColor: null,
|
||||||
shadowOffset: null,
|
shadowOffset: null,
|
||||||
shadowOpacity: null,
|
shadowOpacity: null,
|
||||||
|
@ -24,9 +24,9 @@ export default (variables /*: * */ = variable) => {
|
||||||
borderWidth: variables.borderWidth,
|
borderWidth: variables.borderWidth,
|
||||||
borderRadius: variables.cardBorderRadius,
|
borderRadius: variables.cardBorderRadius,
|
||||||
borderColor: variables.cardBorderColor,
|
borderColor: variables.cardBorderColor,
|
||||||
flexWrap: "nowrap",
|
flexWrap: 'nowrap',
|
||||||
backgroundColor: variables.cardDefaultBg,
|
backgroundColor: variables.cardDefaultBg,
|
||||||
shadowColor: "#000",
|
shadowColor: '#000',
|
||||||
shadowOffset: { width: 0, height: 2 },
|
shadowOffset: { width: 0, height: 2 },
|
||||||
shadowOpacity: 0.1,
|
shadowOpacity: 0.1,
|
||||||
shadowRadius: 1.5,
|
shadowRadius: 1.5,
|
||||||
|
|
|
@ -1,21 +1,23 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import { StyleSheet } from "react-native";
|
import { StyleSheet } from 'react-native';
|
||||||
import variable from "./../variables/platform";
|
|
||||||
|
import variable from './../variables/platform';
|
||||||
|
import { PLATFORM } from './../variables/commonColor';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const platform = variables.platform;
|
const platform = variables.platform;
|
||||||
const transparentBtnCommon = {
|
const transparentBtnCommon = {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
fontSize: variables.DefaultFontSize - 3,
|
fontSize: variables.DefaultFontSize - 3,
|
||||||
color: variables.sTabBarActiveTextColor
|
color: variables.sTabBarActiveTextColor
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
fontSize: variables.iconFontSize - 10,
|
fontSize: variables.iconFontSize - 10,
|
||||||
color: variables.sTabBarActiveTextColor,
|
color: variables.sTabBarActiveTextColor,
|
||||||
marginHorizontal: null
|
marginHorizontal: null
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
fontSize: variables.iconFontSize - 10,
|
fontSize: variables.iconFontSize - 10,
|
||||||
color: variables.sTabBarActiveTextColor
|
color: variables.sTabBarActiveTextColor
|
||||||
},
|
},
|
||||||
|
@ -24,12 +26,12 @@ export default (variables /*: * */ = variable) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const cardItemTheme = {
|
const cardItemTheme = {
|
||||||
"NativeBase.Left": {
|
'NativeBase.Left': {
|
||||||
"NativeBase.Body": {
|
'NativeBase.Body': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
".note": {
|
'.note': {
|
||||||
color: variables.listNoteColor,
|
color: variables.listNoteColor,
|
||||||
fontWeight: "400",
|
fontWeight: '400',
|
||||||
marginRight: 20
|
marginRight: 20
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -37,155 +39,155 @@ export default (variables /*: * */ = variable) => {
|
||||||
marginLeft: 10,
|
marginLeft: 10,
|
||||||
alignItems: null
|
alignItems: null
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
fontSize: variables.iconFontSize
|
fontSize: variables.iconFontSize
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
fontSize: variables.iconFontSize
|
fontSize: variables.iconFontSize
|
||||||
},
|
},
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
marginLeft: 10,
|
marginLeft: 10,
|
||||||
alignSelf: "center"
|
alignSelf: 'center'
|
||||||
},
|
},
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
".transparent": {
|
'.transparent': {
|
||||||
...transparentBtnCommon,
|
...transparentBtnCommon,
|
||||||
paddingRight: variables.cardItemPadding + 5
|
paddingRight: variables.cardItemPadding + 5
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
flex: 1,
|
flex: 1,
|
||||||
flexDirection: "row",
|
flexDirection: 'row',
|
||||||
alignItems: "center"
|
alignItems: 'center'
|
||||||
},
|
},
|
||||||
".content": {
|
'.content': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: platform === "ios" ? "#555" : "#222",
|
color: platform === PLATFORM.IOS ? '#555' : '#222',
|
||||||
fontSize: variables.DefaultFontSize - 2
|
fontSize: variables.DefaultFontSize - 2
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
".cardBody": {
|
'.cardBody': {
|
||||||
padding: -5,
|
padding: -5,
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
marginTop: 5
|
marginTop: 5
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"NativeBase.Body": {
|
'NativeBase.Body': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
".note": {
|
'.note': {
|
||||||
color: variables.listNoteColor,
|
color: variables.listNoteColor,
|
||||||
fontWeight: "200",
|
fontWeight: '200',
|
||||||
marginRight: 20
|
marginRight: 20
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
".transparent": {
|
'.transparent': {
|
||||||
...transparentBtnCommon,
|
...transparentBtnCommon,
|
||||||
paddingRight: variables.cardItemPadding + 5,
|
paddingRight: variables.cardItemPadding + 5,
|
||||||
alignSelf: "stretch"
|
alignSelf: 'stretch'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
flex: 1,
|
flex: 1,
|
||||||
alignSelf: "stretch",
|
alignSelf: 'stretch',
|
||||||
alignItems: "flex-start"
|
alignItems: 'flex-start'
|
||||||
},
|
},
|
||||||
"NativeBase.Right": {
|
'NativeBase.Right': {
|
||||||
"NativeBase.Badge": {
|
'NativeBase.Badge': {
|
||||||
alignSelf: null
|
alignSelf: null
|
||||||
},
|
},
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
".transparent": {
|
'.transparent': {
|
||||||
...transparentBtnCommon
|
...transparentBtnCommon
|
||||||
},
|
},
|
||||||
alignSelf: null
|
alignSelf: null
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
alignSelf: null,
|
alignSelf: null,
|
||||||
fontSize: variables.iconFontSize - 8,
|
fontSize: variables.iconFontSize - 8,
|
||||||
color: variables.cardBorderColor
|
color: variables.cardBorderColor
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
alignSelf: null,
|
alignSelf: null,
|
||||||
fontSize: variables.iconFontSize - 8,
|
fontSize: variables.iconFontSize - 8,
|
||||||
color: variables.cardBorderColor
|
color: variables.cardBorderColor
|
||||||
},
|
},
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
fontSize: variables.DefaultFontSize - 1,
|
fontSize: variables.DefaultFontSize - 1,
|
||||||
alignSelf: null
|
alignSelf: null
|
||||||
},
|
},
|
||||||
"NativeBase.Thumbnail": {
|
'NativeBase.Thumbnail': {
|
||||||
alignSelf: null
|
alignSelf: null
|
||||||
},
|
},
|
||||||
"NativeBase.Image": {
|
'NativeBase.Image': {
|
||||||
alignSelf: null
|
alignSelf: null
|
||||||
},
|
},
|
||||||
"NativeBase.Radio": {
|
'NativeBase.Radio': {
|
||||||
alignSelf: null
|
alignSelf: null
|
||||||
},
|
},
|
||||||
"NativeBase.Checkbox": {
|
'NativeBase.Checkbox': {
|
||||||
alignSelf: null
|
alignSelf: null
|
||||||
},
|
},
|
||||||
"NativeBase.Switch": {
|
'NativeBase.Switch': {
|
||||||
alignSelf: null
|
alignSelf: null
|
||||||
},
|
},
|
||||||
flex: 0.8
|
flex: 0.8
|
||||||
},
|
},
|
||||||
".header": {
|
'.header': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
fontWeight: platform === "ios" ? "600" : "500"
|
fontWeight: platform === PLATFORM.IOS ? '600' : '500'
|
||||||
},
|
},
|
||||||
".bordered": {
|
'.bordered': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.brandPrimary,
|
color: variables.brandPrimary,
|
||||||
fontWeight: platform === "ios" ? "600" : "500"
|
fontWeight: platform === PLATFORM.IOS ? '600' : '500'
|
||||||
},
|
},
|
||||||
borderBottomWidth: variables.borderWidth
|
borderBottomWidth: variables.borderWidth
|
||||||
},
|
},
|
||||||
borderBottomWidth: null,
|
borderBottomWidth: null,
|
||||||
paddingVertical: variables.cardItemPadding + 5
|
paddingVertical: variables.cardItemPadding + 5
|
||||||
},
|
},
|
||||||
".footer": {
|
'.footer': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
fontWeight: platform === "ios" ? "600" : "500"
|
fontWeight: platform === PLATFORM.IOS ? '600' : '500'
|
||||||
},
|
},
|
||||||
".bordered": {
|
'.bordered': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.brandPrimary,
|
color: variables.brandPrimary,
|
||||||
fontWeight: platform === "ios" ? "600" : "500"
|
fontWeight: platform === PLATFORM.IOS ? '600' : '500'
|
||||||
},
|
},
|
||||||
borderTopWidth: variables.borderWidth
|
borderTopWidth: variables.borderWidth
|
||||||
},
|
},
|
||||||
borderBottomWidth: null
|
borderBottomWidth: null
|
||||||
},
|
},
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
".note": {
|
'.note': {
|
||||||
color: variables.listNoteColor,
|
color: variables.listNoteColor,
|
||||||
fontWeight: "200"
|
fontWeight: '200'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
width: variables.iconFontSize + 5,
|
width: variables.iconFontSize + 5,
|
||||||
fontSize: variables.iconFontSize - 2
|
fontSize: variables.iconFontSize - 2
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
width: variables.iconFontSize + 5,
|
width: variables.iconFontSize + 5,
|
||||||
fontSize: variables.iconFontSize - 2
|
fontSize: variables.iconFontSize - 2
|
||||||
},
|
},
|
||||||
".bordered": {
|
'.bordered': {
|
||||||
borderBottomWidth: StyleSheet.hairlineWidth,
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||||
borderColor: variables.cardBorderColor
|
borderColor: variables.cardBorderColor
|
||||||
},
|
},
|
||||||
".first": {
|
'.first': {
|
||||||
borderTopLeftRadius: variables.cardBorderRadius,
|
borderTopLeftRadius: variables.cardBorderRadius,
|
||||||
borderTopRightRadius: variables.cardBorderRadius
|
borderTopRightRadius: variables.cardBorderRadius
|
||||||
},
|
},
|
||||||
".last": {
|
'.last': {
|
||||||
borderBottomLeftRadius: variables.cardBorderRadius,
|
borderBottomLeftRadius: variables.cardBorderRadius,
|
||||||
borderBottomRightRadius: variables.cardBorderRadius
|
borderBottomRightRadius: variables.cardBorderRadius
|
||||||
},
|
},
|
||||||
flexDirection: "row",
|
flexDirection: 'row',
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
borderRadius: variables.cardBorderRadius,
|
borderRadius: variables.cardBorderRadius,
|
||||||
padding: variables.cardItemPadding + 5,
|
padding: variables.cardItemPadding + 5,
|
||||||
paddingVertical: variables.cardItemPadding,
|
paddingVertical: variables.cardItemPadding,
|
||||||
|
|
|
@ -1,31 +1,31 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const checkBoxTheme = {
|
const checkBoxTheme = {
|
||||||
".checked": {
|
'.checked': {
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.checkboxTickColor
|
color: variables.checkboxTickColor
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.checkboxTickColor
|
color: variables.checkboxTickColor
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: "transparent",
|
color: 'transparent',
|
||||||
lineHeight: variables.CheckboxIconSize,
|
lineHeight: variables.CheckboxIconSize,
|
||||||
marginTop: variables.CheckboxIconMarginTop,
|
marginTop: variables.CheckboxIconMarginTop,
|
||||||
fontSize: variables.CheckboxFontSize
|
fontSize: variables.CheckboxFontSize
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: "transparent",
|
color: 'transparent',
|
||||||
lineHeight: variables.CheckboxIconSize,
|
lineHeight: variables.CheckboxIconSize,
|
||||||
marginTop: variables.CheckboxIconMarginTop,
|
marginTop: variables.CheckboxIconMarginTop,
|
||||||
fontSize: variables.CheckboxFontSize
|
fontSize: variables.CheckboxFontSize
|
||||||
},
|
},
|
||||||
borderRadius: variables.CheckboxRadius,
|
borderRadius: variables.CheckboxRadius,
|
||||||
overflow: "hidden",
|
overflow: 'hidden',
|
||||||
width: variables.checkboxSize,
|
width: variables.checkboxSize,
|
||||||
height: variables.checkboxSize,
|
height: variables.checkboxSize,
|
||||||
borderWidth: variables.CheckboxBorderWidth,
|
borderWidth: variables.CheckboxBorderWidth,
|
||||||
|
|
|
@ -1,14 +1,15 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import { Platform, Dimensions } from "react-native";
|
import { Platform, Dimensions } from 'react-native';
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
import { PLATFORM } from './../variables/commonColor';
|
||||||
|
|
||||||
const deviceHeight = Dimensions.get("window").height;
|
const deviceHeight = Dimensions.get('window').height;
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const theme = {
|
const theme = {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
height: Platform.OS === "ios" ? deviceHeight : deviceHeight - 20,
|
height: Platform.OS === PLATFORM.IOS ? deviceHeight : deviceHeight - 20,
|
||||||
backgroundColor: variables.containerBgColor
|
backgroundColor: variables.containerBgColor
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,14 +1,12 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
export default () => {
|
||||||
|
|
||||||
export default (variables /*: * */ = variable) => {
|
|
||||||
const contentTheme = {
|
const contentTheme = {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
"NativeBase.Segment": {
|
'NativeBase.Segment': {
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
backgroundColor: "transparent"
|
backgroundColor: 'transparent'
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,28 +1,24 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
export default () => {
|
||||||
|
|
||||||
export default (variables /*: * */ = variable) => {
|
|
||||||
const platform = variables.platform;
|
|
||||||
|
|
||||||
const fabTheme = {
|
const fabTheme = {
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
padding: null,
|
padding: null,
|
||||||
justifyContent: "center",
|
justifyContent: 'center',
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
alignSelf: "center",
|
alignSelf: 'center',
|
||||||
fontSize: 20,
|
fontSize: 20,
|
||||||
marginLeft: 0,
|
marginLeft: 0,
|
||||||
marginRight: 0,
|
marginRight: 0
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
alignSelf: "center",
|
alignSelf: 'center',
|
||||||
fontSize: 20,
|
fontSize: 20,
|
||||||
marginLeft: 0,
|
marginLeft: 0,
|
||||||
marginRight: 0,
|
marginRight: 0
|
||||||
},
|
}
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return fabTheme;
|
return fabTheme;
|
||||||
|
|
|
@ -1,31 +1,32 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
import { PLATFORM } from './../variables/commonColor';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const platformStyle = variables.platformStyle;
|
const platformStyle = variables.platformStyle;
|
||||||
const platform = variables.platform;
|
const platform = variables.platform;
|
||||||
|
|
||||||
const iconCommon = {
|
const iconCommon = {
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.tabBarActiveTextColor
|
color: variables.tabBarActiveTextColor
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const iconNBCommon = {
|
const iconNBCommon = {
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.tabBarActiveTextColor
|
color: variables.tabBarActiveTextColor
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const textCommon = {
|
const textCommon = {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.tabBarActiveTextColor
|
color: variables.tabBarActiveTextColor
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
const footerTheme = {
|
const footerTheme = {
|
||||||
"NativeBase.Left": {
|
'NativeBase.Left': {
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
".transparent": {
|
'.transparent': {
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
borderColor: null,
|
borderColor: null,
|
||||||
elevation: 0,
|
elevation: 0,
|
||||||
shadowColor: null,
|
shadowColor: null,
|
||||||
|
@ -38,22 +39,22 @@ export default (variables /*: * */ = variable) => {
|
||||||
},
|
},
|
||||||
alignSelf: null,
|
alignSelf: null,
|
||||||
...iconCommon,
|
...iconCommon,
|
||||||
...iconNBCommon,
|
...iconNBCommon
|
||||||
// ...textCommon
|
// ...textCommon
|
||||||
},
|
},
|
||||||
flex: 1,
|
flex: 1,
|
||||||
alignSelf: "center",
|
alignSelf: 'center',
|
||||||
alignItems: "flex-start"
|
alignItems: 'flex-start'
|
||||||
},
|
},
|
||||||
"NativeBase.Body": {
|
'NativeBase.Body': {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
alignSelf: "center",
|
alignSelf: 'center',
|
||||||
flexDirection: "row",
|
flexDirection: 'row',
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
alignSelf: "center",
|
alignSelf: 'center',
|
||||||
".transparent": {
|
'.transparent': {
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
borderColor: null,
|
borderColor: null,
|
||||||
elevation: 0,
|
elevation: 0,
|
||||||
shadowColor: null,
|
shadowColor: null,
|
||||||
|
@ -64,20 +65,20 @@ export default (variables /*: * */ = variable) => {
|
||||||
...iconNBCommon,
|
...iconNBCommon,
|
||||||
...textCommon
|
...textCommon
|
||||||
},
|
},
|
||||||
".full": {
|
'.full': {
|
||||||
height: variables.footerHeight,
|
height: variables.footerHeight,
|
||||||
paddingBottom: variables.footerPaddingBottom,
|
paddingBottom: variables.footerPaddingBottom,
|
||||||
flex: 1
|
flex: 1
|
||||||
},
|
},
|
||||||
...iconCommon,
|
...iconCommon,
|
||||||
...iconNBCommon,
|
...iconNBCommon
|
||||||
// ...textCommon
|
// ...textCommon
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"NativeBase.Right": {
|
'NativeBase.Right': {
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
".transparent": {
|
'.transparent': {
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
borderColor: null,
|
borderColor: null,
|
||||||
elevation: 0,
|
elevation: 0,
|
||||||
shadowColor: null,
|
shadowColor: null,
|
||||||
|
@ -90,23 +91,23 @@ export default (variables /*: * */ = variable) => {
|
||||||
},
|
},
|
||||||
alignSelf: null,
|
alignSelf: null,
|
||||||
...iconCommon,
|
...iconCommon,
|
||||||
...iconNBCommon,
|
...iconNBCommon
|
||||||
// ...textCommon
|
// ...textCommon
|
||||||
},
|
},
|
||||||
flex: 1,
|
flex: 1,
|
||||||
alignSelf: "center",
|
alignSelf: 'center',
|
||||||
alignItems: "flex-end"
|
alignItems: 'flex-end'
|
||||||
},
|
},
|
||||||
backgroundColor: variables.footerDefaultBg,
|
backgroundColor: variables.footerDefaultBg,
|
||||||
flexDirection: "row",
|
flexDirection: 'row',
|
||||||
justifyContent: "center",
|
justifyContent: 'center',
|
||||||
borderTopWidth:
|
borderTopWidth:
|
||||||
platform === "ios" && platformStyle !== "material"
|
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
|
||||||
? variables.borderWidth
|
? variables.borderWidth
|
||||||
: undefined,
|
: undefined,
|
||||||
borderColor:
|
borderColor:
|
||||||
platform === "ios" && platformStyle !== "material"
|
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
|
||||||
? "#cbcbcb"
|
? '#cbcbcb'
|
||||||
: undefined,
|
: undefined,
|
||||||
height: variables.footerHeight,
|
height: variables.footerHeight,
|
||||||
paddingBottom: variables.footerPaddingBottom,
|
paddingBottom: variables.footerPaddingBottom,
|
||||||
|
|
|
@ -1,78 +1,78 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import { Platform } from "react-native";
|
import { Platform } from 'react-native';
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
import { PLATFORM } from './../variables/commonColor';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const platform = variables.platform;
|
const platform = variables.platform;
|
||||||
|
|
||||||
const footerTabTheme = {
|
const footerTabTheme = {
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
".active": {
|
'.active': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.tabBarActiveTextColor,
|
color: variables.tabBarActiveTextColor,
|
||||||
fontSize: variables.tabBarTextSize,
|
fontSize: variables.tabBarTextSize,
|
||||||
lineHeight: 16
|
lineHeight: 16
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.tabBarActiveTextColor
|
color: variables.tabBarActiveTextColor
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.tabBarActiveTextColor
|
color: variables.tabBarActiveTextColor
|
||||||
},
|
},
|
||||||
backgroundColor: variables.tabActiveBgColor
|
backgroundColor: variables.tabActiveBgColor
|
||||||
},
|
},
|
||||||
flexDirection: null,
|
flexDirection: null,
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
borderColor: null,
|
borderColor: null,
|
||||||
elevation: 0,
|
elevation: 0,
|
||||||
shadowColor: null,
|
shadowColor: null,
|
||||||
shadowOffset: null,
|
shadowOffset: null,
|
||||||
shadowRadius: null,
|
shadowRadius: null,
|
||||||
shadowOpacity: null,
|
shadowOpacity: null,
|
||||||
alignSelf: "center",
|
alignSelf: 'center',
|
||||||
flex: 1,
|
flex: 1,
|
||||||
height: variables.footerHeight,
|
height: variables.footerHeight,
|
||||||
justifyContent: "center",
|
justifyContent: 'center',
|
||||||
".badge": {
|
'.badge': {
|
||||||
"NativeBase.Badge": {
|
'NativeBase.Badge': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
fontSize: 11,
|
fontSize: 11,
|
||||||
fontWeight: platform === "ios" ? "600" : undefined,
|
fontWeight: platform === PLATFORM.IOS ? '600' : undefined,
|
||||||
lineHeight: 14
|
lineHeight: 14
|
||||||
},
|
},
|
||||||
top: -3,
|
top: -3,
|
||||||
alignSelf: "center",
|
alignSelf: 'center',
|
||||||
left: 10,
|
left: 10,
|
||||||
zIndex: 99,
|
zIndex: 99,
|
||||||
height: 18,
|
height: 18,
|
||||||
padding: 1.7,
|
padding: 1.7,
|
||||||
paddingHorizontal: 3
|
paddingHorizontal: 3
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
marginTop: -18
|
marginTop: -18
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.tabBarTextColor
|
color: variables.tabBarTextColor
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.tabBarTextColor
|
color: variables.tabBarTextColor
|
||||||
},
|
},
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.tabBarTextColor,
|
color: variables.tabBarTextColor,
|
||||||
fontSize: variables.tabBarTextSize,
|
fontSize: variables.tabBarTextSize,
|
||||||
lineHeight: 16
|
lineHeight: 16
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
backgroundColor: Platform.OS === "android"
|
backgroundColor:
|
||||||
? variables.footerDefaultBg
|
Platform.OS === PLATFORM.ANDROID ? variables.footerDefaultBg : undefined,
|
||||||
: undefined,
|
flexDirection: 'row',
|
||||||
flexDirection: "row",
|
justifyContent: 'space-between',
|
||||||
justifyContent: "space-between",
|
|
||||||
flex: 1,
|
flex: 1,
|
||||||
alignSelf: "stretch"
|
alignSelf: 'stretch'
|
||||||
};
|
};
|
||||||
|
|
||||||
return footerTabTheme;
|
return footerTabTheme;
|
||||||
|
|
|
@ -1,85 +1,81 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
export default () => {
|
||||||
|
|
||||||
export default (variables /*: * */ = variable) => {
|
|
||||||
const platform = variables.platform;
|
|
||||||
|
|
||||||
const theme = {
|
const theme = {
|
||||||
"NativeBase.Item": {
|
'NativeBase.Item': {
|
||||||
".fixedLabel": {
|
'.fixedLabel': {
|
||||||
"NativeBase.Label": {
|
'NativeBase.Label': {
|
||||||
paddingLeft: null
|
paddingLeft: null
|
||||||
},
|
},
|
||||||
marginLeft: 15
|
marginLeft: 15
|
||||||
},
|
},
|
||||||
".inlineLabel": {
|
'.inlineLabel': {
|
||||||
"NativeBase.Label": {
|
'NativeBase.Label': {
|
||||||
paddingLeft: null
|
paddingLeft: null
|
||||||
},
|
},
|
||||||
marginLeft: 15
|
marginLeft: 15
|
||||||
},
|
},
|
||||||
".placeholderLabel": {
|
'.placeholderLabel': {
|
||||||
"NativeBase.Input": {}
|
'NativeBase.Input': {}
|
||||||
},
|
},
|
||||||
".stackedLabel": {
|
'.stackedLabel': {
|
||||||
"NativeBase.Label": {
|
'NativeBase.Label': {
|
||||||
top: 5,
|
top: 5,
|
||||||
paddingLeft: null
|
paddingLeft: null
|
||||||
},
|
},
|
||||||
"NativeBase.Input": {
|
'NativeBase.Input': {
|
||||||
paddingLeft: null,
|
paddingLeft: null,
|
||||||
marginLeft: null
|
marginLeft: null
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
marginTop: 36
|
marginTop: 36
|
||||||
},
|
},
|
||||||
marginLeft: 15
|
marginLeft: 15
|
||||||
},
|
},
|
||||||
".floatingLabel": {
|
'.floatingLabel': {
|
||||||
"NativeBase.Input": {
|
'NativeBase.Input': {
|
||||||
paddingLeft: null,
|
paddingLeft: null,
|
||||||
top: 10,
|
top: 10,
|
||||||
marginLeft: null
|
marginLeft: null
|
||||||
},
|
},
|
||||||
"NativeBase.Label": {
|
'NativeBase.Label': {
|
||||||
left: 0,
|
left: 0,
|
||||||
top: 6
|
top: 6
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
top: 6
|
top: 6
|
||||||
},
|
},
|
||||||
marginTop: 15,
|
marginTop: 15,
|
||||||
marginLeft: 15
|
marginLeft: 15
|
||||||
},
|
},
|
||||||
".regular": {
|
'.regular': {
|
||||||
"NativeBase.Label": {
|
'NativeBase.Label': {
|
||||||
left: 0
|
left: 0
|
||||||
},
|
},
|
||||||
marginLeft: 0
|
marginLeft: 0
|
||||||
},
|
},
|
||||||
".rounded": {
|
'.rounded': {
|
||||||
"NativeBase.Label": {
|
'NativeBase.Label': {
|
||||||
left: 0
|
left: 0
|
||||||
},
|
},
|
||||||
marginLeft: 0
|
marginLeft: 0
|
||||||
},
|
},
|
||||||
".underline": {
|
'.underline': {
|
||||||
"NativeBase.Label": {
|
'NativeBase.Label': {
|
||||||
left: 0,
|
left: 0,
|
||||||
top: 0,
|
top: 0,
|
||||||
position: "relative"
|
position: 'relative'
|
||||||
},
|
},
|
||||||
"NativeBase.Input": {
|
'NativeBase.Input': {
|
||||||
left: -15
|
left: -15
|
||||||
},
|
},
|
||||||
marginLeft: 15
|
marginLeft: 15
|
||||||
},
|
},
|
||||||
".last": {
|
'.last': {
|
||||||
marginLeft: 0,
|
marginLeft: 0,
|
||||||
paddingLeft: 15
|
paddingLeft: 15
|
||||||
},
|
},
|
||||||
"NativeBase.Label": {
|
'NativeBase.Label': {
|
||||||
paddingRight: 5
|
paddingRight: 5
|
||||||
},
|
},
|
||||||
marginLeft: 15
|
marginLeft: 15
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const h1Theme = {
|
const h1Theme = {
|
||||||
color: variables.textColor,
|
color: variables.textColor,
|
||||||
fontSize: variables.fontSizeH1,
|
fontSize: variables.fontSizeH1,
|
||||||
lineHeight: variables.lineHeightH1,
|
lineHeight: variables.lineHeightH1
|
||||||
};
|
};
|
||||||
|
|
||||||
return h1Theme;
|
return h1Theme;
|
||||||
|
|
|
@ -1,12 +1,12 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const h2Theme = {
|
const h2Theme = {
|
||||||
color: variables.textColor,
|
color: variables.textColor,
|
||||||
fontSize: variables.fontSizeH2,
|
fontSize: variables.fontSizeH2,
|
||||||
lineHeight: variables.lineHeightH2,
|
lineHeight: variables.lineHeightH2
|
||||||
};
|
};
|
||||||
|
|
||||||
return h2Theme;
|
return h2Theme;
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const h3Theme = {
|
const h3Theme = {
|
||||||
|
|
|
@ -1,65 +1,70 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import { PixelRatio, StatusBar } from "react-native";
|
import { PixelRatio, StatusBar } from 'react-native';
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
import { PLATFORM } from './../variables/commonColor';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const platformStyle = variables.platformStyle;
|
const platformStyle = variables.platformStyle;
|
||||||
const platform = variables.platform;
|
const platform = variables.platform;
|
||||||
|
|
||||||
const headerTheme = {
|
const headerTheme = {
|
||||||
".span": {
|
'.span': {
|
||||||
height: 128,
|
height: 128,
|
||||||
"NativeBase.Left": {
|
'NativeBase.Left': {
|
||||||
alignSelf: "flex-start"
|
alignSelf: 'flex-start'
|
||||||
},
|
},
|
||||||
"NativeBase.Body": {
|
'NativeBase.Body': {
|
||||||
alignSelf: "flex-end",
|
alignSelf: 'flex-end',
|
||||||
alignItems: "flex-start",
|
alignItems: 'flex-start',
|
||||||
justifyContent: "center",
|
justifyContent: 'center',
|
||||||
paddingBottom: 26
|
paddingBottom: 26
|
||||||
},
|
},
|
||||||
"NativeBase.Right": {
|
'NativeBase.Right': {
|
||||||
alignSelf: "flex-start"
|
alignSelf: 'flex-start'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
".hasSubtitle": {
|
'.hasSubtitle': {
|
||||||
"NativeBase.Body": {
|
'NativeBase.Body': {
|
||||||
"NativeBase.Title": {
|
'NativeBase.Title': {
|
||||||
fontSize: variables.titleFontSize - 2,
|
fontSize: variables.titleFontSize - 2,
|
||||||
fontFamily: variables.titleFontfamily,
|
fontFamily: variables.titleFontfamily,
|
||||||
textAlign: "center",
|
textAlign: 'center',
|
||||||
fontWeight: "500",
|
fontWeight: '500',
|
||||||
paddingBottom: 3
|
paddingBottom: 3
|
||||||
},
|
},
|
||||||
"NativeBase.Subtitle": {
|
'NativeBase.Subtitle': {
|
||||||
fontSize: variables.subTitleFontSize,
|
fontSize: variables.subTitleFontSize,
|
||||||
fontFamily: variables.titleFontfamily,
|
fontFamily: variables.titleFontfamily,
|
||||||
color: variables.subtitleColor,
|
color: variables.subtitleColor,
|
||||||
textAlign: "center"
|
textAlign: 'center'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
".transparent": {
|
'.transparent': {
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
borderBottomColor: "transparent",
|
borderBottomColor: 'transparent',
|
||||||
elevation: 0,
|
elevation: 0,
|
||||||
shadowColor: null,
|
shadowColor: null,
|
||||||
shadowOffset: null,
|
shadowOffset: null,
|
||||||
shadowRadius: null,
|
shadowRadius: null,
|
||||||
shadowOpacity: null,
|
shadowOpacity: null,
|
||||||
paddingTop: platform === "android" ? StatusBar.currentHeight : undefined,
|
paddingTop:
|
||||||
height: platform === "android" ? variables.toolbarHeight + StatusBar.currentHeight : variables.toolbarHeight
|
platform === PLATFORM.ANDROID ? StatusBar.currentHeight : undefined,
|
||||||
|
height:
|
||||||
|
platform === PLATFORM.ANDROID
|
||||||
|
? variables.toolbarHeight + StatusBar.currentHeight
|
||||||
|
: variables.toolbarHeight
|
||||||
},
|
},
|
||||||
".noShadow": {
|
'.noShadow': {
|
||||||
elevation: 0,
|
elevation: 0,
|
||||||
shadowColor: null,
|
shadowColor: null,
|
||||||
shadowOffset: null,
|
shadowOffset: null,
|
||||||
shadowRadius: null,
|
shadowRadius: null,
|
||||||
shadowOpacity: null
|
shadowOpacity: null
|
||||||
},
|
},
|
||||||
".hasTabs": {
|
'.hasTabs': {
|
||||||
elevation: 0,
|
elevation: 0,
|
||||||
shadowColor: null,
|
shadowColor: null,
|
||||||
shadowOffset: null,
|
shadowOffset: null,
|
||||||
|
@ -67,131 +72,133 @@ export default (variables /*: * */ = variable) => {
|
||||||
shadowOpacity: null,
|
shadowOpacity: null,
|
||||||
borderBottomWidth: null
|
borderBottomWidth: null
|
||||||
},
|
},
|
||||||
".hasSegment": {
|
'.hasSegment': {
|
||||||
elevation: 0,
|
elevation: 0,
|
||||||
shadowColor: null,
|
shadowColor: null,
|
||||||
shadowOffset: null,
|
shadowOffset: null,
|
||||||
shadowRadius: null,
|
shadowRadius: null,
|
||||||
shadowOpacity: null,
|
shadowOpacity: null,
|
||||||
borderBottomWidth: null,
|
borderBottomWidth: null,
|
||||||
"NativeBase.Left": {
|
'NativeBase.Left': {
|
||||||
flex: 0.3
|
flex: 0.3
|
||||||
},
|
},
|
||||||
"NativeBase.Right": {
|
'NativeBase.Right': {
|
||||||
flex: 0.3
|
flex: 0.3
|
||||||
},
|
},
|
||||||
"NativeBase.Body": {
|
'NativeBase.Body': {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
"NativeBase.Segment": {
|
'NativeBase.Segment': {
|
||||||
marginRight: 0,
|
marginRight: 0,
|
||||||
alignSelf: "center",
|
alignSelf: 'center',
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
paddingLeft: 0,
|
paddingLeft: 0,
|
||||||
paddingRight: 0
|
paddingRight: 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
".noLeft": {
|
'.noLeft': {
|
||||||
"NativeBase.Left": {
|
'NativeBase.Left': {
|
||||||
width: platform === "ios" ? undefined : 0,
|
width: platform === PLATFORM.IOS ? undefined : 0,
|
||||||
flex: platform === "ios" ? 1 : 0
|
flex: platform === PLATFORM.IOS ? 1 : 0
|
||||||
},
|
},
|
||||||
"NativeBase.Body": {
|
'NativeBase.Body': {
|
||||||
"NativeBase.Title": {
|
'NativeBase.Title': {
|
||||||
paddingLeft: platform === "ios" ? undefined : 10
|
paddingLeft: platform === PLATFORM.IOS ? undefined : 10
|
||||||
},
|
},
|
||||||
"NativeBase.Subtitle": {
|
'NativeBase.Subtitle': {
|
||||||
paddingLeft: platform === "ios" ? undefined : 10
|
paddingLeft: platform === PLATFORM.IOS ? undefined : 10
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
justifyContent: "center",
|
justifyContent: 'center',
|
||||||
alignSelf: "center",
|
alignSelf: 'center',
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
".transparent": {
|
'.transparent': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.toolbarBtnTextColor,
|
color: variables.toolbarBtnTextColor,
|
||||||
fontWeight: "600"
|
fontWeight: '600'
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.toolbarBtnColor
|
color: variables.toolbarBtnColor
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.toolbarBtnColor
|
color: variables.toolbarBtnColor
|
||||||
},
|
},
|
||||||
paddingHorizontal: variables.buttonPadding
|
paddingHorizontal: variables.buttonPadding
|
||||||
},
|
},
|
||||||
paddingHorizontal: 15
|
paddingHorizontal: 15
|
||||||
},
|
},
|
||||||
".searchBar": {
|
'.searchBar': {
|
||||||
"NativeBase.Item": {
|
'NativeBase.Item': {
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
color: variables.dropdownLinkColor,
|
color: variables.dropdownLinkColor,
|
||||||
fontSize: variables.toolbarSearchIconSize,
|
fontSize: variables.toolbarSearchIconSize,
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
marginTop: 2,
|
marginTop: 2,
|
||||||
paddingRight: 10,
|
paddingRight: 10,
|
||||||
paddingLeft: 10
|
paddingLeft: 10
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
color: null,
|
color: null,
|
||||||
alignSelf: "center"
|
alignSelf: 'center'
|
||||||
},
|
},
|
||||||
"NativeBase.Input": {
|
'NativeBase.Input': {
|
||||||
alignSelf: "center",
|
alignSelf: 'center',
|
||||||
lineHeight: null,
|
lineHeight: null,
|
||||||
height: variables.searchBarInputHeight
|
height: variables.searchBarInputHeight
|
||||||
},
|
},
|
||||||
alignSelf: "center",
|
alignSelf: 'center',
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
justifyContent: "flex-start",
|
justifyContent: 'flex-start',
|
||||||
flex: 1,
|
flex: 1,
|
||||||
height: variables.searchBarHeight,
|
height: variables.searchBarHeight,
|
||||||
borderColor: "transparent",
|
borderColor: 'transparent',
|
||||||
backgroundColor: variables.toolbarInputColor
|
backgroundColor: variables.toolbarInputColor
|
||||||
},
|
},
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
".transparent": {
|
'.transparent': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
fontWeight: "500"
|
fontWeight: '500'
|
||||||
},
|
},
|
||||||
paddingHorizontal: null,
|
paddingHorizontal: null,
|
||||||
paddingLeft: platform === "ios" ? 10 : null
|
paddingLeft: platform === PLATFORM.IOS ? 10 : null
|
||||||
},
|
},
|
||||||
paddingHorizontal: platform === "ios" ? undefined : null,
|
paddingHorizontal: platform === PLATFORM.IOS ? undefined : null,
|
||||||
width: platform === "ios" ? undefined : 0,
|
width: platform === PLATFORM.IOS ? undefined : 0,
|
||||||
height: platform === "ios" ? undefined : 0
|
height: platform === PLATFORM.IOS ? undefined : 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
".rounded": {
|
'.rounded': {
|
||||||
"NativeBase.Item": {
|
'NativeBase.Item': {
|
||||||
borderRadius:
|
borderRadius:
|
||||||
platform === "ios" && platformStyle !== "material" ? 25 : 3
|
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
|
||||||
|
? 25
|
||||||
|
: 3
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"NativeBase.Left": {
|
'NativeBase.Left': {
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
".hasText": {
|
'.hasText': {
|
||||||
marginLeft: -10,
|
marginLeft: -10,
|
||||||
height: 30,
|
height: 30,
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.toolbarBtnColor,
|
color: variables.toolbarBtnColor,
|
||||||
fontSize: variables.iconHeaderSize,
|
fontSize: variables.iconHeaderSize,
|
||||||
marginTop: 2,
|
marginTop: 2,
|
||||||
marginRight: 5,
|
marginRight: 5,
|
||||||
marginLeft: 2
|
marginLeft: 2
|
||||||
},
|
},
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.toolbarBtnTextColor,
|
color: variables.toolbarBtnTextColor,
|
||||||
fontSize: platform === "ios" ? 17 : 0,
|
fontSize: platform === PLATFORM.IOS ? 17 : 0,
|
||||||
marginLeft: 7,
|
marginLeft: 7,
|
||||||
lineHeight: 19.5
|
lineHeight: 19.5
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.toolbarBtnColor,
|
color: variables.toolbarBtnColor,
|
||||||
fontSize: variables.iconHeaderSize,
|
fontSize: variables.iconHeaderSize,
|
||||||
marginTop: 2,
|
marginTop: 2,
|
||||||
|
@ -199,13 +206,16 @@ export default (variables /*: * */ = variable) => {
|
||||||
marginLeft: 2
|
marginLeft: 2
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
".transparent": {
|
'.transparent': {
|
||||||
marginLeft:
|
marginLeft:
|
||||||
platform === "ios" && platformStyle !== "material" ? -3 : 0,
|
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
|
||||||
"NativeBase.Icon": {
|
? -3
|
||||||
|
: 0,
|
||||||
|
'NativeBase.Icon': {
|
||||||
color: variables.toolbarBtnColor,
|
color: variables.toolbarBtnColor,
|
||||||
fontSize:
|
fontSize:
|
||||||
platform === "ios" && variables.platformStyle !== "material"
|
platform === PLATFORM.IOS &&
|
||||||
|
variables.platformStyle !== PLATFORM.MATERIAL
|
||||||
? variables.iconHeaderSize + 1
|
? variables.iconHeaderSize + 1
|
||||||
: variables.iconHeaderSize,
|
: variables.iconHeaderSize,
|
||||||
marginTop: 0,
|
marginTop: 0,
|
||||||
|
@ -213,10 +223,11 @@ export default (variables /*: * */ = variable) => {
|
||||||
marginLeft: 1,
|
marginLeft: 1,
|
||||||
paddingTop: 1
|
paddingTop: 1
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.toolbarBtnColor,
|
color: variables.toolbarBtnColor,
|
||||||
fontSize:
|
fontSize:
|
||||||
platform === "ios" && variables.platformStyle !== "material"
|
platform === PLATFORM.IOS &&
|
||||||
|
variables.platformStyle !== PLATFORM.MATERIAL
|
||||||
? variables.iconHeaderSize + 1
|
? variables.iconHeaderSize + 1
|
||||||
: variables.iconHeaderSize - 2,
|
: variables.iconHeaderSize - 2,
|
||||||
marginTop: 0,
|
marginTop: 0,
|
||||||
|
@ -224,18 +235,20 @@ export default (variables /*: * */ = variable) => {
|
||||||
marginLeft: 1,
|
marginLeft: 1,
|
||||||
paddingTop: 1
|
paddingTop: 1
|
||||||
},
|
},
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.toolbarBtnTextColor,
|
color: variables.toolbarBtnTextColor,
|
||||||
fontSize: platform === "ios" ? 17 : 0,
|
fontSize: platform === PLATFORM.IOS ? 17 : 0,
|
||||||
top: platform === "ios" ? 1 : -1.5,
|
top: platform === PLATFORM.IOS ? 1 : -1.5,
|
||||||
paddingLeft:
|
paddingLeft:
|
||||||
platform === "ios" && platformStyle !== "material" ? 2 : 5,
|
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
|
||||||
|
? 2
|
||||||
|
: 5,
|
||||||
paddingRight:
|
paddingRight:
|
||||||
platform === "ios" && platformStyle !== "material"
|
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
|
||||||
? undefined
|
? undefined
|
||||||
: 10
|
: 10
|
||||||
},
|
},
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
borderColor: null,
|
borderColor: null,
|
||||||
elevation: 0,
|
elevation: 0,
|
||||||
shadowColor: null,
|
shadowColor: null,
|
||||||
|
@ -243,66 +256,72 @@ export default (variables /*: * */ = variable) => {
|
||||||
shadowRadius: null,
|
shadowRadius: null,
|
||||||
shadowOpacity: null
|
shadowOpacity: null
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.toolbarBtnColor
|
color: variables.toolbarBtnColor
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.toolbarBtnColor
|
color: variables.toolbarBtnColor
|
||||||
},
|
},
|
||||||
alignSelf: null,
|
alignSelf: null,
|
||||||
paddingRight: variables.buttonPadding,
|
paddingRight: variables.buttonPadding,
|
||||||
paddingLeft: platform === "ios" && platformStyle !== "material" ? 4 : 8
|
paddingLeft:
|
||||||
|
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
|
||||||
|
? 4
|
||||||
|
: 8
|
||||||
},
|
},
|
||||||
flex: platform === "ios" && platformStyle !== "material" ? 1 : 0.4,
|
flex:
|
||||||
alignSelf: "center",
|
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
|
||||||
alignItems: "flex-start"
|
? 1
|
||||||
|
: 0.4,
|
||||||
|
alignSelf: 'center',
|
||||||
|
alignItems: 'flex-start'
|
||||||
},
|
},
|
||||||
"NativeBase.Body": {
|
'NativeBase.Body': {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
alignItems:
|
alignItems:
|
||||||
platform === "ios" && platformStyle !== "material"
|
platform === PLATFORM.IOS && platformStyle !== PLATFORM.MATERIAL
|
||||||
? "center"
|
? 'center'
|
||||||
: "flex-start",
|
: 'flex-start',
|
||||||
alignSelf: "center",
|
alignSelf: 'center',
|
||||||
"NativeBase.Segment": {
|
'NativeBase.Segment': {
|
||||||
borderWidth: 0,
|
borderWidth: 0,
|
||||||
alignSelf: "flex-end",
|
alignSelf: 'flex-end',
|
||||||
marginRight: platform === "ios" ? -40 : -55
|
marginRight: platform === PLATFORM.IOS ? -40 : -55
|
||||||
},
|
},
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
alignSelf: "center",
|
alignSelf: 'center',
|
||||||
".transparent": {
|
'.transparent': {
|
||||||
backgroundColor: "transparent"
|
backgroundColor: 'transparent'
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.toolbarBtnColor
|
color: variables.toolbarBtnColor
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.toolbarBtnColor
|
color: variables.toolbarBtnColor
|
||||||
},
|
},
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.inverseTextColor,
|
color: variables.inverseTextColor,
|
||||||
backgroundColor: "transparent"
|
backgroundColor: 'transparent'
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"NativeBase.Right": {
|
'NativeBase.Right': {
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
".hasText": {
|
'.hasText': {
|
||||||
height: 30,
|
height: 30,
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.toolbarBtnColor,
|
color: variables.toolbarBtnColor,
|
||||||
fontSize: variables.iconHeaderSize - 2,
|
fontSize: variables.iconHeaderSize - 2,
|
||||||
marginTop: 2,
|
marginTop: 2,
|
||||||
marginRight: 2,
|
marginRight: 2,
|
||||||
marginLeft: 5
|
marginLeft: 5
|
||||||
},
|
},
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.toolbarBtnTextColor,
|
color: variables.toolbarBtnTextColor,
|
||||||
fontSize: platform === "ios" ? 17 : 14,
|
fontSize: platform === PLATFORM.IOS ? 17 : 14,
|
||||||
lineHeight: 19.5
|
lineHeight: 19.5
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.toolbarBtnColor,
|
color: variables.toolbarBtnColor,
|
||||||
fontSize: variables.iconHeaderSize - 2,
|
fontSize: variables.iconHeaderSize - 2,
|
||||||
marginTop: 2,
|
marginTop: 2,
|
||||||
|
@ -310,13 +329,13 @@ export default (variables /*: * */ = variable) => {
|
||||||
marginLeft: 5
|
marginLeft: 5
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
".transparent": {
|
'.transparent': {
|
||||||
marginRight: platform === "ios" ? -9 : -5,
|
marginRight: platform === PLATFORM.IOS ? -9 : -5,
|
||||||
paddingLeft: 15,
|
paddingLeft: 15,
|
||||||
paddingRight: 12,
|
paddingRight: 12,
|
||||||
paddingHorizontal: 15,
|
paddingHorizontal: 15,
|
||||||
borderRadius: 50,
|
borderRadius: 50,
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.toolbarBtnColor,
|
color: variables.toolbarBtnColor,
|
||||||
fontSize: variables.iconHeaderSize - 2,
|
fontSize: variables.iconHeaderSize - 2,
|
||||||
marginTop: 0,
|
marginTop: 0,
|
||||||
|
@ -324,7 +343,7 @@ export default (variables /*: * */ = variable) => {
|
||||||
marginRight: 0
|
marginRight: 0
|
||||||
// paddingTop: 0
|
// paddingTop: 0
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.toolbarBtnColor,
|
color: variables.toolbarBtnColor,
|
||||||
fontSize: variables.iconHeaderSize - 2,
|
fontSize: variables.iconHeaderSize - 2,
|
||||||
marginTop: 0,
|
marginTop: 0,
|
||||||
|
@ -332,16 +351,17 @@ export default (variables /*: * */ = variable) => {
|
||||||
marginRight: 0
|
marginRight: 0
|
||||||
// paddingTop: 0
|
// paddingTop: 0
|
||||||
},
|
},
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.toolbarBtnTextColor,
|
color: variables.toolbarBtnTextColor,
|
||||||
fontSize: platform === "ios" ? 17 : 14,
|
fontSize: platform === PLATFORM.IOS ? 17 : 14,
|
||||||
top: platform === "ios" ? 1 : -1.5,
|
top: platform === PLATFORM.IOS ? 1 : -1.5,
|
||||||
paddingRight:
|
paddingRight:
|
||||||
platform === "ios" && variables.platformStyle !== "material"
|
platform === PLATFORM.IOS &&
|
||||||
|
variables.platformStyle !== PLATFORM.MATERIAL
|
||||||
? 0
|
? 0
|
||||||
: undefined
|
: undefined
|
||||||
},
|
},
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
borderColor: null,
|
borderColor: null,
|
||||||
elevation: 0,
|
elevation: 0,
|
||||||
shadowColor: null,
|
shadowColor: null,
|
||||||
|
@ -349,42 +369,47 @@ export default (variables /*: * */ = variable) => {
|
||||||
shadowRadius: null,
|
shadowRadius: null,
|
||||||
shadowOpacity: null
|
shadowOpacity: null
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.toolbarBtnColor
|
color: variables.toolbarBtnColor
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.toolbarBtnColor
|
color: variables.toolbarBtnColor
|
||||||
},
|
},
|
||||||
alignSelf: null,
|
alignSelf: null,
|
||||||
paddingHorizontal: variables.buttonPadding
|
paddingHorizontal: variables.buttonPadding
|
||||||
},
|
},
|
||||||
flex: 1,
|
flex: 1,
|
||||||
alignSelf: "center",
|
alignSelf: 'center',
|
||||||
alignItems: "flex-end",
|
alignItems: 'flex-end',
|
||||||
flexDirection: "row",
|
flexDirection: 'row',
|
||||||
justifyContent: "flex-end"
|
justifyContent: 'flex-end'
|
||||||
},
|
},
|
||||||
backgroundColor: variables.toolbarDefaultBg,
|
backgroundColor: variables.toolbarDefaultBg,
|
||||||
flexDirection: "row",
|
flexDirection: 'row',
|
||||||
// paddingHorizontal: 10,
|
// paddingHorizontal: 10,
|
||||||
paddingLeft:
|
paddingLeft:
|
||||||
platform === "ios" && variables.platformStyle !== "material" ? 6 : 10,
|
platform === PLATFORM.IOS && variables.platformStyle !== PLATFORM.MATERIAL
|
||||||
|
? 6
|
||||||
|
: 10,
|
||||||
paddingRight: 10,
|
paddingRight: 10,
|
||||||
justifyContent: "center",
|
justifyContent: 'center',
|
||||||
paddingTop: platform === "ios" ? 18 : 0,
|
paddingTop: platform === PLATFORM.IOS ? 18 : 0,
|
||||||
borderBottomWidth:
|
borderBottomWidth:
|
||||||
platform === "ios" ? 1 / PixelRatio.getPixelSizeForLayoutSize(1) : 0,
|
platform === PLATFORM.IOS
|
||||||
|
? 1 / PixelRatio.getPixelSizeForLayoutSize(1)
|
||||||
|
: 0,
|
||||||
borderBottomColor: variables.toolbarDefaultBorder,
|
borderBottomColor: variables.toolbarDefaultBorder,
|
||||||
height:
|
height:
|
||||||
variables.platform === "ios" && variables.platformStyle === "material"
|
variables.platform === PLATFORM.IOS &&
|
||||||
|
variables.platformStyle === PLATFORM.MATERIAL
|
||||||
? variables.toolbarHeight + 10
|
? variables.toolbarHeight + 10
|
||||||
: variables.toolbarHeight,
|
: variables.toolbarHeight,
|
||||||
elevation: 3,
|
elevation: 3,
|
||||||
shadowColor: platformStyle === "material" ? "#000" : undefined,
|
shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined,
|
||||||
shadowOffset:
|
shadowOffset:
|
||||||
platformStyle === "material" ? { width: 0, height: 2 } : undefined,
|
platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
|
||||||
shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
|
shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
|
||||||
shadowRadius: platformStyle === "material" ? 1.2 : undefined,
|
shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
|
||||||
top: 0,
|
top: 0,
|
||||||
left: 0,
|
left: 0,
|
||||||
right: 0
|
right: 0
|
||||||
|
|
|
@ -1,11 +1,11 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const iconTheme = {
|
const iconTheme = {
|
||||||
fontSize: variables.iconFontSize,
|
fontSize: variables.iconFontSize,
|
||||||
color: "#000"
|
color: variable.textColor
|
||||||
};
|
};
|
||||||
|
|
||||||
return iconTheme;
|
return iconTheme;
|
||||||
|
|
|
@ -5,7 +5,7 @@ import variable from './../variables/platform';
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const inputTheme = {
|
const inputTheme = {
|
||||||
'.multiline': {
|
'.multiline': {
|
||||||
height: null,
|
height: null
|
||||||
},
|
},
|
||||||
height: variables.inputHeightBase,
|
height: variables.inputHeightBase,
|
||||||
color: variables.inputColor,
|
color: variables.inputColor,
|
||||||
|
|
|
@ -1,20 +1,20 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const inputGroupTheme = {
|
const inputGroupTheme = {
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
fontSize: 24,
|
fontSize: 24,
|
||||||
color: variables.sTabBarActiveTextColor,
|
color: variables.sTabBarActiveTextColor,
|
||||||
paddingHorizontal: 5
|
paddingHorizontal: 5
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
fontSize: 24,
|
fontSize: 24,
|
||||||
color: variables.sTabBarActiveTextColor,
|
color: variables.sTabBarActiveTextColor,
|
||||||
paddingHorizontal: 5
|
paddingHorizontal: 5
|
||||||
},
|
},
|
||||||
"NativeBase.Input": {
|
'NativeBase.Input': {
|
||||||
height: variables.inputHeightBase,
|
height: variables.inputHeightBase,
|
||||||
color: variables.inputColor,
|
color: variables.inputColor,
|
||||||
paddingLeft: 5,
|
paddingLeft: 5,
|
||||||
|
@ -23,11 +23,11 @@ export default (variables /*: * */ = variable) => {
|
||||||
fontSize: variables.inputFontSize,
|
fontSize: variables.inputFontSize,
|
||||||
lineHeight: variables.inputLineHeight
|
lineHeight: variables.inputLineHeight
|
||||||
},
|
},
|
||||||
".underline": {
|
'.underline': {
|
||||||
".success": {
|
'.success': {
|
||||||
borderColor: variables.inputSuccessBorderColor
|
borderColor: variables.inputSuccessBorderColor
|
||||||
},
|
},
|
||||||
".error": {
|
'.error': {
|
||||||
borderColor: variables.inputErrorBorderColor
|
borderColor: variables.inputErrorBorderColor
|
||||||
},
|
},
|
||||||
paddingLeft: 5,
|
paddingLeft: 5,
|
||||||
|
@ -37,22 +37,22 @@ export default (variables /*: * */ = variable) => {
|
||||||
borderLeftWidth: 0,
|
borderLeftWidth: 0,
|
||||||
borderColor: variables.inputBorderColor
|
borderColor: variables.inputBorderColor
|
||||||
},
|
},
|
||||||
".regular": {
|
'.regular': {
|
||||||
".success": {
|
'.success': {
|
||||||
borderColor: variables.inputSuccessBorderColor
|
borderColor: variables.inputSuccessBorderColor
|
||||||
},
|
},
|
||||||
".error": {
|
'.error': {
|
||||||
borderColor: variables.inputErrorBorderColor
|
borderColor: variables.inputErrorBorderColor
|
||||||
},
|
},
|
||||||
paddingLeft: 5,
|
paddingLeft: 5,
|
||||||
borderWidth: variables.borderWidth,
|
borderWidth: variables.borderWidth,
|
||||||
borderColor: variables.inputBorderColor
|
borderColor: variables.inputBorderColor
|
||||||
},
|
},
|
||||||
".rounded": {
|
'.rounded': {
|
||||||
".success": {
|
'.success': {
|
||||||
borderColor: variables.inputSuccessBorderColor
|
borderColor: variables.inputSuccessBorderColor
|
||||||
},
|
},
|
||||||
".error": {
|
'.error': {
|
||||||
borderColor: variables.inputErrorBorderColor
|
borderColor: variables.inputErrorBorderColor
|
||||||
},
|
},
|
||||||
paddingLeft: 5,
|
paddingLeft: 5,
|
||||||
|
@ -61,21 +61,21 @@ export default (variables /*: * */ = variable) => {
|
||||||
borderColor: variables.inputBorderColor
|
borderColor: variables.inputBorderColor
|
||||||
},
|
},
|
||||||
|
|
||||||
".success": {
|
'.success': {
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.inputSuccessBorderColor
|
color: variables.inputSuccessBorderColor
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.inputSuccessBorderColor
|
color: variables.inputSuccessBorderColor
|
||||||
},
|
},
|
||||||
".rounded": {
|
'.rounded': {
|
||||||
borderRadius: 30,
|
borderRadius: 30,
|
||||||
borderColor: variables.inputSuccessBorderColor
|
borderColor: variables.inputSuccessBorderColor
|
||||||
},
|
},
|
||||||
".regular": {
|
'.regular': {
|
||||||
borderColor: variables.inputSuccessBorderColor
|
borderColor: variables.inputSuccessBorderColor
|
||||||
},
|
},
|
||||||
".underline": {
|
'.underline': {
|
||||||
borderWidth: variables.borderWidth,
|
borderWidth: variables.borderWidth,
|
||||||
borderTopWidth: 0,
|
borderTopWidth: 0,
|
||||||
borderRightWidth: 0,
|
borderRightWidth: 0,
|
||||||
|
@ -85,21 +85,21 @@ export default (variables /*: * */ = variable) => {
|
||||||
borderColor: variables.inputSuccessBorderColor
|
borderColor: variables.inputSuccessBorderColor
|
||||||
},
|
},
|
||||||
|
|
||||||
".error": {
|
'.error': {
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.inputErrorBorderColor
|
color: variables.inputErrorBorderColor
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.inputErrorBorderColor
|
color: variables.inputErrorBorderColor
|
||||||
},
|
},
|
||||||
".rounded": {
|
'.rounded': {
|
||||||
borderRadius: 30,
|
borderRadius: 30,
|
||||||
borderColor: variables.inputErrorBorderColor
|
borderColor: variables.inputErrorBorderColor
|
||||||
},
|
},
|
||||||
".regular": {
|
'.regular': {
|
||||||
borderColor: variables.inputErrorBorderColor
|
borderColor: variables.inputErrorBorderColor
|
||||||
},
|
},
|
||||||
".underline": {
|
'.underline': {
|
||||||
borderWidth: variables.borderWidth,
|
borderWidth: variables.borderWidth,
|
||||||
borderTopWidth: 0,
|
borderTopWidth: 0,
|
||||||
borderRightWidth: 0,
|
borderRightWidth: 0,
|
||||||
|
@ -108,12 +108,12 @@ export default (variables /*: * */ = variable) => {
|
||||||
},
|
},
|
||||||
borderColor: variables.inputErrorBorderColor
|
borderColor: variables.inputErrorBorderColor
|
||||||
},
|
},
|
||||||
".disabled": {
|
'.disabled': {
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: "#384850"
|
color: '#384850'
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: "#384850"
|
color: '#384850'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -123,9 +123,9 @@ export default (variables /*: * */ = variable) => {
|
||||||
borderRightWidth: 0,
|
borderRightWidth: 0,
|
||||||
borderLeftWidth: 0,
|
borderLeftWidth: 0,
|
||||||
borderColor: variables.inputBorderColor,
|
borderColor: variables.inputBorderColor,
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
flexDirection: "row",
|
flexDirection: 'row',
|
||||||
alignItems: "center"
|
alignItems: 'center'
|
||||||
};
|
};
|
||||||
|
|
||||||
return inputGroupTheme;
|
return inputGroupTheme;
|
||||||
|
|
|
@ -1,37 +1,38 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import { Platform } from "react-native";
|
import { Platform } from 'react-native';
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
import { PLATFORM } from './../variables/commonColor';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const itemTheme = {
|
const itemTheme = {
|
||||||
".floatingLabel": {
|
'.floatingLabel': {
|
||||||
"NativeBase.Input": {
|
'NativeBase.Input': {
|
||||||
height: 50,
|
height: 50,
|
||||||
top: 8,
|
top: 8,
|
||||||
paddingTop: 3,
|
paddingTop: 3,
|
||||||
paddingBottom: 7,
|
paddingBottom: 7,
|
||||||
".multiline": {
|
'.multiline': {
|
||||||
minHeight: variables.inputHeightBase,
|
minHeight: variables.inputHeightBase,
|
||||||
paddingTop: Platform.OS === "ios" ? 10 : 3,
|
paddingTop: Platform.OS === PLATFORM.IOS ? 10 : 3,
|
||||||
paddingBottom: Platform.OS === "ios" ? 14 : 10
|
paddingBottom: Platform.OS === PLATFORM.IOS ? 14 : 10
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"NativeBase.Label": {
|
'NativeBase.Label': {
|
||||||
paddingTop: 5
|
paddingTop: 5
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
top: 6,
|
top: 6,
|
||||||
paddingTop: 8
|
paddingTop: 8
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
top: 6,
|
top: 6,
|
||||||
paddingTop: 8
|
paddingTop: 8
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
".fixedLabel": {
|
'.fixedLabel': {
|
||||||
"NativeBase.Label": {
|
'NativeBase.Label': {
|
||||||
position: null,
|
position: null,
|
||||||
top: null,
|
top: null,
|
||||||
left: null,
|
left: null,
|
||||||
|
@ -41,43 +42,43 @@ export default (variables /*: * */ = variable) => {
|
||||||
width: null,
|
width: null,
|
||||||
fontSize: variables.inputFontSize
|
fontSize: variables.inputFontSize
|
||||||
},
|
},
|
||||||
"NativeBase.Input": {
|
'NativeBase.Input': {
|
||||||
flex: 2,
|
flex: 2,
|
||||||
fontSize: variables.inputFontSize
|
fontSize: variables.inputFontSize
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
".stackedLabel": {
|
'.stackedLabel': {
|
||||||
"NativeBase.Label": {
|
'NativeBase.Label': {
|
||||||
position: null,
|
position: null,
|
||||||
top: null,
|
top: null,
|
||||||
left: null,
|
left: null,
|
||||||
right: null,
|
right: null,
|
||||||
paddingTop: 5,
|
paddingTop: 5,
|
||||||
alignSelf: "flex-start",
|
alignSelf: 'flex-start',
|
||||||
fontSize: variables.inputFontSize - 2
|
fontSize: variables.inputFontSize - 2
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
marginTop: 36
|
marginTop: 36
|
||||||
},
|
},
|
||||||
"NativeBase.Input": {
|
'NativeBase.Input': {
|
||||||
alignSelf: Platform.OS === "ios" ? "stretch" : "flex-start",
|
alignSelf: Platform.OS === PLATFORM.IOS ? 'stretch' : 'flex-start',
|
||||||
flex: 1,
|
flex: 1,
|
||||||
width: Platform.OS === "ios" ? null : variables.deviceWidth - 25,
|
width: Platform.OS === PLATFORM.IOS ? null : variables.deviceWidth - 25,
|
||||||
fontSize: variables.inputFontSize,
|
fontSize: variables.inputFontSize,
|
||||||
lineHeight: variables.inputLineHeight - 6,
|
lineHeight: variables.inputLineHeight - 6,
|
||||||
".secureTextEntry": {
|
'.secureTextEntry': {
|
||||||
fontSize: variables.inputFontSize - 4
|
fontSize: variables.inputFontSize
|
||||||
},
|
},
|
||||||
".multiline": {
|
'.multiline': {
|
||||||
paddingTop: Platform.OS === "ios" ? 9 : undefined,
|
paddingTop: Platform.OS === PLATFORM.IOS ? 9 : undefined,
|
||||||
paddingBottom: Platform.OS === "ios" ? 9 : undefined
|
paddingBottom: Platform.OS === PLATFORM.IOS ? 9 : undefined
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
flexDirection: null,
|
flexDirection: null,
|
||||||
minHeight: variables.inputHeightBase + 15
|
minHeight: variables.inputHeightBase + 15
|
||||||
},
|
},
|
||||||
".inlineLabel": {
|
'.inlineLabel': {
|
||||||
"NativeBase.Label": {
|
'NativeBase.Label': {
|
||||||
position: null,
|
position: null,
|
||||||
top: null,
|
top: null,
|
||||||
left: null,
|
left: null,
|
||||||
|
@ -87,43 +88,43 @@ export default (variables /*: * */ = variable) => {
|
||||||
width: null,
|
width: null,
|
||||||
fontSize: variables.inputFontSize
|
fontSize: variables.inputFontSize
|
||||||
},
|
},
|
||||||
"NativeBase.Input": {
|
'NativeBase.Input': {
|
||||||
paddingLeft: 5,
|
paddingLeft: 5,
|
||||||
fontSize: variables.inputFontSize
|
fontSize: variables.inputFontSize
|
||||||
},
|
},
|
||||||
flexDirection: "row"
|
flexDirection: 'row'
|
||||||
},
|
},
|
||||||
"NativeBase.Label": {
|
'NativeBase.Label': {
|
||||||
fontSize: variables.inputFontSize,
|
fontSize: variables.inputFontSize,
|
||||||
color: variables.inputColorPlaceholder,
|
color: variables.inputColorPlaceholder,
|
||||||
paddingRight: 5
|
paddingRight: 5
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
fontSize: 24,
|
fontSize: 24,
|
||||||
paddingRight: 8
|
paddingRight: 8
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
fontSize: 24,
|
fontSize: 24,
|
||||||
paddingRight: 8
|
paddingRight: 8
|
||||||
},
|
},
|
||||||
"NativeBase.Input": {
|
'NativeBase.Input': {
|
||||||
".multiline": {
|
'.multiline': {
|
||||||
height: null
|
height: null
|
||||||
},
|
},
|
||||||
height: variables.inputHeightBase,
|
height: variables.inputHeightBase,
|
||||||
color: variables.inputColor,
|
color: variables.inputColor,
|
||||||
flex: 1,
|
flex: 1,
|
||||||
top: Platform.OS === "ios" ? 1.5 : undefined,
|
top: Platform.OS === PLATFORM.IOS ? 1.5 : undefined,
|
||||||
fontSize: variables.inputFontSize
|
fontSize: variables.inputFontSize
|
||||||
},
|
},
|
||||||
".underline": {
|
'.underline': {
|
||||||
"NativeBase.Input": {
|
'NativeBase.Input': {
|
||||||
paddingLeft: 15
|
paddingLeft: 15
|
||||||
},
|
},
|
||||||
".success": {
|
'.success': {
|
||||||
borderColor: variables.inputSuccessBorderColor
|
borderColor: variables.inputSuccessBorderColor
|
||||||
},
|
},
|
||||||
".error": {
|
'.error': {
|
||||||
borderColor: variables.inputErrorBorderColor
|
borderColor: variables.inputErrorBorderColor
|
||||||
},
|
},
|
||||||
borderWidth: variables.borderWidth * 2,
|
borderWidth: variables.borderWidth * 2,
|
||||||
|
@ -132,33 +133,33 @@ export default (variables /*: * */ = variable) => {
|
||||||
borderLeftWidth: 0,
|
borderLeftWidth: 0,
|
||||||
borderColor: variables.inputBorderColor
|
borderColor: variables.inputBorderColor
|
||||||
},
|
},
|
||||||
".regular": {
|
'.regular': {
|
||||||
"NativeBase.Input": {
|
'NativeBase.Input': {
|
||||||
paddingLeft: 8
|
paddingLeft: 8
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
paddingLeft: 10
|
paddingLeft: 10
|
||||||
},
|
},
|
||||||
".success": {
|
'.success': {
|
||||||
borderColor: variables.inputSuccessBorderColor
|
borderColor: variables.inputSuccessBorderColor
|
||||||
},
|
},
|
||||||
".error": {
|
'.error': {
|
||||||
borderColor: variables.inputErrorBorderColor
|
borderColor: variables.inputErrorBorderColor
|
||||||
},
|
},
|
||||||
borderWidth: variables.borderWidth * 2,
|
borderWidth: variables.borderWidth * 2,
|
||||||
borderColor: variables.inputBorderColor
|
borderColor: variables.inputBorderColor
|
||||||
},
|
},
|
||||||
".rounded": {
|
'.rounded': {
|
||||||
"NativeBase.Input": {
|
'NativeBase.Input': {
|
||||||
paddingLeft: 8
|
paddingLeft: 8
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
paddingLeft: 10
|
paddingLeft: 10
|
||||||
},
|
},
|
||||||
".success": {
|
'.success': {
|
||||||
borderColor: variables.inputSuccessBorderColor
|
borderColor: variables.inputSuccessBorderColor
|
||||||
},
|
},
|
||||||
".error": {
|
'.error': {
|
||||||
borderColor: variables.inputErrorBorderColor
|
borderColor: variables.inputErrorBorderColor
|
||||||
},
|
},
|
||||||
borderWidth: variables.borderWidth * 2,
|
borderWidth: variables.borderWidth * 2,
|
||||||
|
@ -166,21 +167,21 @@ export default (variables /*: * */ = variable) => {
|
||||||
borderColor: variables.inputBorderColor
|
borderColor: variables.inputBorderColor
|
||||||
},
|
},
|
||||||
|
|
||||||
".success": {
|
'.success': {
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.inputSuccessBorderColor
|
color: variables.inputSuccessBorderColor
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.inputSuccessBorderColor
|
color: variables.inputSuccessBorderColor
|
||||||
},
|
},
|
||||||
".rounded": {
|
'.rounded': {
|
||||||
borderRadius: 30,
|
borderRadius: 30,
|
||||||
borderColor: variables.inputSuccessBorderColor
|
borderColor: variables.inputSuccessBorderColor
|
||||||
},
|
},
|
||||||
".regular": {
|
'.regular': {
|
||||||
borderColor: variables.inputSuccessBorderColor
|
borderColor: variables.inputSuccessBorderColor
|
||||||
},
|
},
|
||||||
".underline": {
|
'.underline': {
|
||||||
borderWidth: variables.borderWidth * 2,
|
borderWidth: variables.borderWidth * 2,
|
||||||
borderTopWidth: 0,
|
borderTopWidth: 0,
|
||||||
borderRightWidth: 0,
|
borderRightWidth: 0,
|
||||||
|
@ -190,21 +191,21 @@ export default (variables /*: * */ = variable) => {
|
||||||
borderColor: variables.inputSuccessBorderColor
|
borderColor: variables.inputSuccessBorderColor
|
||||||
},
|
},
|
||||||
|
|
||||||
".error": {
|
'.error': {
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.inputErrorBorderColor
|
color: variables.inputErrorBorderColor
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.inputErrorBorderColor
|
color: variables.inputErrorBorderColor
|
||||||
},
|
},
|
||||||
".rounded": {
|
'.rounded': {
|
||||||
borderRadius: 30,
|
borderRadius: 30,
|
||||||
borderColor: variables.inputErrorBorderColor
|
borderColor: variables.inputErrorBorderColor
|
||||||
},
|
},
|
||||||
".regular": {
|
'.regular': {
|
||||||
borderColor: variables.inputErrorBorderColor
|
borderColor: variables.inputErrorBorderColor
|
||||||
},
|
},
|
||||||
".underline": {
|
'.underline': {
|
||||||
borderWidth: variables.borderWidth * 2,
|
borderWidth: variables.borderWidth * 2,
|
||||||
borderTopWidth: 0,
|
borderTopWidth: 0,
|
||||||
borderRightWidth: 0,
|
borderRightWidth: 0,
|
||||||
|
@ -213,15 +214,15 @@ export default (variables /*: * */ = variable) => {
|
||||||
},
|
},
|
||||||
borderColor: variables.inputErrorBorderColor
|
borderColor: variables.inputErrorBorderColor
|
||||||
},
|
},
|
||||||
".disabled": {
|
'.disabled': {
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: "#384850"
|
color: '#384850'
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: "#384850"
|
color: '#384850'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
".picker": {
|
'.picker': {
|
||||||
marginLeft: 0
|
marginLeft: 0
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -230,9 +231,9 @@ export default (variables /*: * */ = variable) => {
|
||||||
borderRightWidth: 0,
|
borderRightWidth: 0,
|
||||||
borderLeftWidth: 0,
|
borderLeftWidth: 0,
|
||||||
borderColor: variables.inputBorderColor,
|
borderColor: variables.inputBorderColor,
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
flexDirection: "row",
|
flexDirection: 'row',
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
marginLeft: 2
|
marginLeft: 2
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,10 +1,8 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
export default () => {
|
||||||
|
|
||||||
export default (variables /*: * */ = variable) => {
|
|
||||||
const labelTheme = {
|
const labelTheme = {
|
||||||
".focused": {
|
'.focused': {
|
||||||
width: 0
|
width: 0
|
||||||
},
|
},
|
||||||
fontSize: 17
|
fontSize: 17
|
||||||
|
|
|
@ -1,12 +1,10 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from './../variables/platform';
|
export default () => {
|
||||||
|
|
||||||
export default (variables /*: * */ = variable) => {
|
|
||||||
const leftTheme = {
|
const leftTheme = {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
alignSelf: 'center',
|
alignSelf: 'center',
|
||||||
alignItems: 'flex-start',
|
alignItems: 'flex-start'
|
||||||
};
|
};
|
||||||
|
|
||||||
return leftTheme;
|
return leftTheme;
|
||||||
|
|
|
@ -1,244 +1,246 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import { Platform, PixelRatio } from "react-native";
|
import { Platform, PixelRatio } from 'react-native';
|
||||||
|
|
||||||
import pickerTheme from "./Picker";
|
import pickerTheme from './Picker';
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
import { PLATFORM } from './../variables/commonColor';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const platform = variables.platform;
|
const platform = variables.platform;
|
||||||
const selectedStyle = {
|
const selectedStyle = {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.listItemSelected
|
color: variables.listItemSelected
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.listItemSelected
|
color: variables.listItemSelected
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const listItemTheme = {
|
const listItemTheme = {
|
||||||
"NativeBase.InputGroup": {
|
'NativeBase.InputGroup': {
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
paddingRight: 5
|
paddingRight: 5
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
paddingRight: 5
|
paddingRight: 5
|
||||||
},
|
},
|
||||||
"NativeBase.Input": {
|
'NativeBase.Input': {
|
||||||
paddingHorizontal: 5
|
paddingHorizontal: 5
|
||||||
},
|
},
|
||||||
flex: 1,
|
flex: 1,
|
||||||
borderWidth: null,
|
borderWidth: null,
|
||||||
margin: -10,
|
margin: -10,
|
||||||
borderBottomColor: "transparent"
|
borderBottomColor: 'transparent'
|
||||||
},
|
},
|
||||||
".searchBar": {
|
'.searchBar': {
|
||||||
"NativeBase.Item": {
|
'NativeBase.Item': {
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
color: variables.dropdownLinkColor,
|
color: variables.dropdownLinkColor,
|
||||||
fontSize:
|
fontSize:
|
||||||
platform === "ios"
|
platform === PLATFORM.IOS
|
||||||
? variables.iconFontSize - 10
|
? variables.iconFontSize - 10
|
||||||
: variables.iconFontSize - 5,
|
: variables.iconFontSize - 5,
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
marginTop: 2,
|
marginTop: 2,
|
||||||
paddingRight: 8
|
paddingRight: 8
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
color: null,
|
color: null,
|
||||||
alignSelf: "center"
|
alignSelf: 'center'
|
||||||
},
|
},
|
||||||
"NativeBase.Input": {
|
'NativeBase.Input': {
|
||||||
alignSelf: "center"
|
alignSelf: 'center'
|
||||||
},
|
},
|
||||||
alignSelf: "center",
|
alignSelf: 'center',
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
justifyContent: "flex-start",
|
justifyContent: 'flex-start',
|
||||||
flex: 1,
|
flex: 1,
|
||||||
height: platform === "ios" ? 30 : 40,
|
height: platform === PLATFORM.IOS ? 30 : 40,
|
||||||
borderColor: "transparent",
|
borderColor: 'transparent',
|
||||||
backgroundColor: "#fff",
|
backgroundColor: '#fff',
|
||||||
borderRadius: 5
|
borderRadius: 5
|
||||||
},
|
},
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
".transparent": {
|
'.transparent': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
fontWeight: "500"
|
fontWeight: '500'
|
||||||
},
|
},
|
||||||
paddingHorizontal: null,
|
paddingHorizontal: null,
|
||||||
paddingLeft: platform === "ios" ? 10 : null
|
paddingLeft: platform === PLATFORM.IOS ? 10 : null
|
||||||
},
|
},
|
||||||
paddingHorizontal: platform === "ios" ? undefined : null,
|
paddingHorizontal: platform === PLATFORM.IOS ? undefined : null,
|
||||||
width: platform === "ios" ? undefined : 0,
|
width: platform === PLATFORM.IOS ? undefined : 0,
|
||||||
height: platform === "ios" ? undefined : 0
|
height: platform === PLATFORM.IOS ? undefined : 0
|
||||||
},
|
},
|
||||||
backgroundColor: variables.toolbarInputColor,
|
backgroundColor: variables.toolbarInputColor,
|
||||||
padding: 10,
|
padding: 10,
|
||||||
marginLeft: null
|
marginLeft: null
|
||||||
},
|
},
|
||||||
"NativeBase.CheckBox": {
|
'NativeBase.CheckBox': {
|
||||||
marginLeft: -10,
|
marginLeft: -10,
|
||||||
marginRight: 10
|
marginRight: 10
|
||||||
},
|
},
|
||||||
".first": {
|
'.first': {
|
||||||
".itemHeader": {
|
'.itemHeader': {
|
||||||
paddingTop: variables.listItemPadding + 3
|
paddingTop: variables.listItemPadding + 3
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
".itemHeader": {
|
'.itemHeader': {
|
||||||
".first": {
|
'.first': {
|
||||||
paddingTop: variables.listItemPadding + 3
|
paddingTop: variables.listItemPadding + 3
|
||||||
},
|
},
|
||||||
borderBottomWidth: platform === "ios" ? variables.borderWidth : null,
|
borderBottomWidth:
|
||||||
|
platform === PLATFORM.IOS ? variables.borderWidth : null,
|
||||||
marginLeft: null,
|
marginLeft: null,
|
||||||
padding: variables.listItemPadding,
|
padding: variables.listItemPadding,
|
||||||
paddingLeft: variables.listItemPadding + 5,
|
paddingLeft: variables.listItemPadding + 5,
|
||||||
paddingTop:
|
paddingTop:
|
||||||
platform === "ios" ? variables.listItemPadding + 25 : undefined,
|
platform === PLATFORM.IOS ? variables.listItemPadding + 25 : undefined,
|
||||||
paddingBottom:
|
paddingBottom:
|
||||||
platform === "android" ? variables.listItemPadding + 20 : undefined,
|
platform === PLATFORM.ANDROID ? variables.listItemPadding + 20 : undefined,
|
||||||
flexDirection: "row",
|
flexDirection: 'row',
|
||||||
borderColor: variables.listBorderColor,
|
borderColor: variables.listBorderColor,
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
color: platform === "ios" ? undefined : variables.listNoteColor
|
color: platform === PLATFORM.IOS ? undefined : variables.listNoteColor
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
".itemDivider": {
|
'.itemDivider': {
|
||||||
borderBottomWidth: null,
|
borderBottomWidth: null,
|
||||||
marginLeft: null,
|
marginLeft: null,
|
||||||
padding: variables.listItemPadding,
|
padding: variables.listItemPadding,
|
||||||
paddingLeft: variables.listItemPadding + 5,
|
paddingLeft: variables.listItemPadding + 5,
|
||||||
backgroundColor: variables.listDividerBg,
|
backgroundColor: variables.listDividerBg,
|
||||||
flexDirection: "row",
|
flexDirection: 'row',
|
||||||
borderColor: variables.listBorderColor
|
borderColor: variables.listBorderColor
|
||||||
},
|
},
|
||||||
".selected": {
|
'.selected': {
|
||||||
"NativeBase.Left": {
|
'NativeBase.Left': {
|
||||||
...selectedStyle
|
...selectedStyle
|
||||||
},
|
},
|
||||||
"NativeBase.Body": {
|
'NativeBase.Body': {
|
||||||
...selectedStyle
|
...selectedStyle
|
||||||
},
|
},
|
||||||
"NativeBase.Right": {
|
'NativeBase.Right': {
|
||||||
...selectedStyle
|
...selectedStyle
|
||||||
},
|
},
|
||||||
...selectedStyle
|
...selectedStyle
|
||||||
},
|
},
|
||||||
"NativeBase.Left": {
|
'NativeBase.Left': {
|
||||||
"NativeBase.Body": {
|
'NativeBase.Body': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
".note": {
|
'.note': {
|
||||||
color: variables.listNoteColor,
|
color: variables.listNoteColor,
|
||||||
fontWeight: "200"
|
fontWeight: '200'
|
||||||
},
|
},
|
||||||
fontWeight: "600"
|
fontWeight: '600'
|
||||||
},
|
},
|
||||||
marginLeft: 10,
|
marginLeft: 10,
|
||||||
alignItems: null,
|
alignItems: null,
|
||||||
alignSelf: null
|
alignSelf: null
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
width: variables.iconFontSize - 10,
|
width: variables.iconFontSize - 10,
|
||||||
fontSize: variables.iconFontSize - 10
|
fontSize: variables.iconFontSize - 10
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
width: variables.iconFontSize - 10,
|
width: variables.iconFontSize - 10,
|
||||||
fontSize: variables.iconFontSize - 10
|
fontSize: variables.iconFontSize - 10
|
||||||
},
|
},
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
alignSelf: "center"
|
alignSelf: 'center'
|
||||||
},
|
},
|
||||||
flexDirection: "row"
|
flexDirection: 'row'
|
||||||
},
|
},
|
||||||
"NativeBase.Body": {
|
'NativeBase.Body': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
marginHorizontal: variables.listItemPadding,
|
marginHorizontal: variables.listItemPadding,
|
||||||
".note": {
|
'.note': {
|
||||||
color: variables.listNoteColor,
|
color: variables.listNoteColor,
|
||||||
fontWeight: "200"
|
fontWeight: '200'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
alignSelf: null,
|
alignSelf: null,
|
||||||
alignItems: null
|
alignItems: null
|
||||||
},
|
},
|
||||||
"NativeBase.Right": {
|
'NativeBase.Right': {
|
||||||
"NativeBase.Badge": {
|
'NativeBase.Badge': {
|
||||||
alignSelf: null
|
alignSelf: null
|
||||||
},
|
},
|
||||||
"NativeBase.PickerNB": {
|
'NativeBase.PickerNB': {
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
marginRight: -15,
|
marginRight: -15,
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.topTabBarActiveTextColor
|
color: variables.topTabBarActiveTextColor
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
alignSelf: null,
|
alignSelf: null,
|
||||||
".transparent": {
|
'.transparent': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.topTabBarActiveTextColor
|
color: variables.topTabBarActiveTextColor
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
alignSelf: null,
|
alignSelf: null,
|
||||||
fontSize: variables.iconFontSize - 8,
|
fontSize: variables.iconFontSize - 8,
|
||||||
color: "#c9c8cd"
|
color: '#c9c8cd'
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
alignSelf: null,
|
alignSelf: null,
|
||||||
fontSize: variables.iconFontSize - 8,
|
fontSize: variables.iconFontSize - 8,
|
||||||
color: "#c9c8cd"
|
color: '#c9c8cd'
|
||||||
},
|
},
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
".note": {
|
'.note': {
|
||||||
color: variables.listNoteColor,
|
color: variables.listNoteColor,
|
||||||
fontWeight: "200"
|
fontWeight: '200'
|
||||||
},
|
},
|
||||||
alignSelf: null
|
alignSelf: null
|
||||||
},
|
},
|
||||||
"NativeBase.Thumbnail": {
|
'NativeBase.Thumbnail': {
|
||||||
alignSelf: null
|
alignSelf: null
|
||||||
},
|
},
|
||||||
"NativeBase.Image": {
|
'NativeBase.Image': {
|
||||||
alignSelf: null
|
alignSelf: null
|
||||||
},
|
},
|
||||||
"NativeBase.Radio": {
|
'NativeBase.Radio': {
|
||||||
alignSelf: null
|
alignSelf: null
|
||||||
},
|
},
|
||||||
"NativeBase.Checkbox": {
|
'NativeBase.Checkbox': {
|
||||||
alignSelf: null
|
alignSelf: null
|
||||||
},
|
},
|
||||||
"NativeBase.Switch": {
|
'NativeBase.Switch': {
|
||||||
alignSelf: null
|
alignSelf: null
|
||||||
},
|
},
|
||||||
padding: null,
|
padding: null,
|
||||||
flex: 0.28
|
flex: 0.28
|
||||||
},
|
},
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
".note": {
|
'.note': {
|
||||||
color: variables.listNoteColor,
|
color: variables.listNoteColor,
|
||||||
fontWeight: "200"
|
fontWeight: '200'
|
||||||
},
|
},
|
||||||
alignSelf: "center"
|
alignSelf: 'center'
|
||||||
},
|
},
|
||||||
".last": {
|
'.last': {
|
||||||
marginLeft: -(variables.listItemPadding + 5),
|
marginLeft: -(variables.listItemPadding + 5),
|
||||||
paddingLeft: (variables.listItemPadding + 5) * 2,
|
paddingLeft: (variables.listItemPadding + 5) * 2,
|
||||||
top: 1
|
top: 1
|
||||||
},
|
},
|
||||||
".avatar": {
|
'.avatar': {
|
||||||
"NativeBase.Left": {
|
'NativeBase.Left': {
|
||||||
flex: 0,
|
flex: 0,
|
||||||
alignSelf: "flex-start",
|
alignSelf: 'flex-start',
|
||||||
paddingTop: 14
|
paddingTop: 14
|
||||||
},
|
},
|
||||||
"NativeBase.Body": {
|
'NativeBase.Body': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
marginLeft: null
|
marginLeft: null
|
||||||
},
|
},
|
||||||
flex: 1,
|
flex: 1,
|
||||||
|
@ -247,24 +249,24 @@ export default (variables /*: * */ = variable) => {
|
||||||
borderColor: variables.listBorderColor,
|
borderColor: variables.listBorderColor,
|
||||||
marginLeft: variables.listItemPadding + 5
|
marginLeft: variables.listItemPadding + 5
|
||||||
},
|
},
|
||||||
"NativeBase.Right": {
|
'NativeBase.Right': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
".note": {
|
'.note': {
|
||||||
fontSize: variables.noteFontSize - 2
|
fontSize: variables.noteFontSize - 2
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
flex: 0,
|
flex: 0,
|
||||||
paddingRight: variables.listItemPadding + 5,
|
paddingRight: variables.listItemPadding + 5,
|
||||||
alignSelf: "stretch",
|
alignSelf: 'stretch',
|
||||||
paddingVertical: variables.listItemPadding,
|
paddingVertical: variables.listItemPadding,
|
||||||
borderBottomWidth: variables.borderWidth,
|
borderBottomWidth: variables.borderWidth,
|
||||||
borderColor: variables.listBorderColor
|
borderColor: variables.listBorderColor
|
||||||
},
|
},
|
||||||
".noBorder": {
|
'.noBorder': {
|
||||||
"NativeBase.Body": {
|
'NativeBase.Body': {
|
||||||
borderBottomWidth: null
|
borderBottomWidth: null
|
||||||
},
|
},
|
||||||
"NativeBase.Right": {
|
'NativeBase.Right': {
|
||||||
borderBottomWidth: null
|
borderBottomWidth: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -272,12 +274,12 @@ export default (variables /*: * */ = variable) => {
|
||||||
paddingVertical: null,
|
paddingVertical: null,
|
||||||
paddingRight: null
|
paddingRight: null
|
||||||
},
|
},
|
||||||
".thumbnail": {
|
'.thumbnail': {
|
||||||
"NativeBase.Left": {
|
'NativeBase.Left': {
|
||||||
flex: 0
|
flex: 0
|
||||||
},
|
},
|
||||||
"NativeBase.Body": {
|
'NativeBase.Body': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
marginLeft: null
|
marginLeft: null
|
||||||
},
|
},
|
||||||
flex: 1,
|
flex: 1,
|
||||||
|
@ -286,10 +288,10 @@ export default (variables /*: * */ = variable) => {
|
||||||
borderColor: variables.listBorderColor,
|
borderColor: variables.listBorderColor,
|
||||||
marginLeft: variables.listItemPadding + 5
|
marginLeft: variables.listItemPadding + 5
|
||||||
},
|
},
|
||||||
"NativeBase.Right": {
|
'NativeBase.Right': {
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
".transparent": {
|
'.transparent': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
fontSize: variables.listNoteSize,
|
fontSize: variables.listNoteSize,
|
||||||
color: variables.sTabBarActiveTextColor
|
color: variables.sTabBarActiveTextColor
|
||||||
}
|
}
|
||||||
|
@ -297,18 +299,18 @@ export default (variables /*: * */ = variable) => {
|
||||||
height: null
|
height: null
|
||||||
},
|
},
|
||||||
flex: 0,
|
flex: 0,
|
||||||
justifyContent: "center",
|
justifyContent: 'center',
|
||||||
alignSelf: "stretch",
|
alignSelf: 'stretch',
|
||||||
paddingRight: variables.listItemPadding + 5,
|
paddingRight: variables.listItemPadding + 5,
|
||||||
paddingVertical: variables.listItemPadding + 5,
|
paddingVertical: variables.listItemPadding + 5,
|
||||||
borderBottomWidth: variables.borderWidth,
|
borderBottomWidth: variables.borderWidth,
|
||||||
borderColor: variables.listBorderColor
|
borderColor: variables.listBorderColor
|
||||||
},
|
},
|
||||||
".noBorder": {
|
'.noBorder': {
|
||||||
"NativeBase.Body": {
|
'NativeBase.Body': {
|
||||||
borderBottomWidth: null
|
borderBottomWidth: null
|
||||||
},
|
},
|
||||||
"NativeBase.Right": {
|
'NativeBase.Right': {
|
||||||
borderBottomWidth: null
|
borderBottomWidth: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -316,103 +318,103 @@ export default (variables /*: * */ = variable) => {
|
||||||
paddingVertical: null,
|
paddingVertical: null,
|
||||||
paddingRight: null
|
paddingRight: null
|
||||||
},
|
},
|
||||||
".icon": {
|
'.icon': {
|
||||||
".last": {
|
'.last': {
|
||||||
"NativeBase.Body": {
|
'NativeBase.Body': {
|
||||||
borderBottomWidth: null
|
borderBottomWidth: null
|
||||||
},
|
},
|
||||||
"NativeBase.Right": {
|
'NativeBase.Right': {
|
||||||
borderBottomWidth: null
|
borderBottomWidth: null
|
||||||
},
|
},
|
||||||
borderBottomWidth: variables.borderWidth,
|
borderBottomWidth: variables.borderWidth,
|
||||||
borderColor: variables.listBorderColor
|
borderColor: variables.listBorderColor
|
||||||
},
|
},
|
||||||
"NativeBase.Left": {
|
'NativeBase.Left': {
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
marginHorizontal: null,
|
marginHorizontal: null,
|
||||||
fontSize: variables.iconFontSize - 5
|
fontSize: variables.iconFontSize - 5
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
marginHorizontal: null,
|
marginHorizontal: null,
|
||||||
fontSize: variables.iconFontSize - 8
|
fontSize: variables.iconFontSize - 8
|
||||||
},
|
},
|
||||||
alignSelf: "center",
|
alignSelf: 'center',
|
||||||
height: 29,
|
height: 29,
|
||||||
width: 29,
|
width: 29,
|
||||||
borderRadius: 6,
|
borderRadius: 6,
|
||||||
paddingVertical: null,
|
paddingVertical: null,
|
||||||
paddingHorizontal: null,
|
paddingHorizontal: null,
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
justifyContent: "center"
|
justifyContent: 'center'
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
width: variables.iconFontSize - 5,
|
width: variables.iconFontSize - 5,
|
||||||
fontSize: variables.iconFontSize - 2
|
fontSize: variables.iconFontSize - 2
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
width: variables.iconFontSize - 5,
|
width: variables.iconFontSize - 5,
|
||||||
fontSize: variables.iconFontSize - 2
|
fontSize: variables.iconFontSize - 2
|
||||||
},
|
},
|
||||||
paddingRight: variables.listItemPadding + 5,
|
paddingRight: variables.listItemPadding + 5,
|
||||||
flex: 0,
|
flex: 0,
|
||||||
height: 44,
|
height: 44,
|
||||||
justifyContent: "center",
|
justifyContent: 'center',
|
||||||
alignItems: "center"
|
alignItems: 'center'
|
||||||
},
|
},
|
||||||
"NativeBase.Body": {
|
'NativeBase.Body': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
marginLeft: null,
|
marginLeft: null,
|
||||||
fontSize: 17
|
fontSize: 17
|
||||||
},
|
},
|
||||||
flex: 1,
|
flex: 1,
|
||||||
height: 44,
|
height: 44,
|
||||||
justifyContent: "center",
|
justifyContent: 'center',
|
||||||
borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
||||||
borderColor: variables.listBorderColor
|
borderColor: variables.listBorderColor
|
||||||
},
|
},
|
||||||
"NativeBase.Right": {
|
'NativeBase.Right': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
textAlign: "center",
|
textAlign: 'center',
|
||||||
color: "#8F8E95",
|
color: '#8F8E95',
|
||||||
fontSize: 17
|
fontSize: 17
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: "#C8C7CC",
|
color: '#C8C7CC',
|
||||||
fontSize: variables.iconFontSize - 10,
|
fontSize: variables.iconFontSize - 10,
|
||||||
alignSelf: "center",
|
alignSelf: 'center',
|
||||||
paddingLeft: 10,
|
paddingLeft: 10,
|
||||||
paddingTop: 3
|
paddingTop: 3
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: "#C8C7CC",
|
color: '#C8C7CC',
|
||||||
fontSize: variables.iconFontSize - 10,
|
fontSize: variables.iconFontSize - 10,
|
||||||
alignSelf: "center",
|
alignSelf: 'center',
|
||||||
paddingLeft: 10,
|
paddingLeft: 10,
|
||||||
paddingTop: 3
|
paddingTop: 3
|
||||||
},
|
},
|
||||||
"NativeBase.Switch": {
|
'NativeBase.Switch': {
|
||||||
marginRight: Platform.OS === "ios" ? undefined : -5,
|
marginRight: Platform.OS === PLATFORM.IOS ? undefined : -5,
|
||||||
alignSelf: null
|
alignSelf: null
|
||||||
},
|
},
|
||||||
"NativeBase.PickerNB": {
|
'NativeBase.PickerNB': {
|
||||||
...pickerTheme()
|
...pickerTheme()
|
||||||
},
|
},
|
||||||
flexDirection: "row",
|
flexDirection: 'row',
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
flex: 0,
|
flex: 0,
|
||||||
alignSelf: "stretch",
|
alignSelf: 'stretch',
|
||||||
height: 44,
|
height: 44,
|
||||||
justifyContent: "flex-end",
|
justifyContent: 'flex-end',
|
||||||
borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
borderBottomWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
||||||
borderColor: variables.listBorderColor,
|
borderColor: variables.listBorderColor,
|
||||||
paddingRight: variables.listItemPadding + 5
|
paddingRight: variables.listItemPadding + 5
|
||||||
},
|
},
|
||||||
".noBorder": {
|
'.noBorder': {
|
||||||
"NativeBase.Body": {
|
'NativeBase.Body': {
|
||||||
borderBottomWidth: null
|
borderBottomWidth: null
|
||||||
},
|
},
|
||||||
"NativeBase.Right": {
|
'NativeBase.Right': {
|
||||||
borderBottomWidth: null
|
borderBottomWidth: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -420,18 +422,18 @@ export default (variables /*: * */ = variable) => {
|
||||||
paddingVertical: null,
|
paddingVertical: null,
|
||||||
paddingRight: null,
|
paddingRight: null,
|
||||||
height: 44,
|
height: 44,
|
||||||
justifyContent: "center"
|
justifyContent: 'center'
|
||||||
},
|
},
|
||||||
".noBorder": {
|
'.noBorder': {
|
||||||
borderBottomWidth: null
|
borderBottomWidth: null
|
||||||
},
|
},
|
||||||
".noIndent": {
|
'.noIndent': {
|
||||||
marginLeft: null,
|
marginLeft: null,
|
||||||
padding: variables.listItemPadding,
|
padding: variables.listItemPadding,
|
||||||
paddingLeft: variables.listItemPadding + 6
|
paddingLeft: variables.listItemPadding + 6
|
||||||
},
|
},
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
flexDirection: "row",
|
flexDirection: 'row',
|
||||||
paddingRight: variables.listItemPadding + 6,
|
paddingRight: variables.listItemPadding + 6,
|
||||||
paddingVertical: variables.listItemPadding + 3,
|
paddingVertical: variables.listItemPadding + 3,
|
||||||
marginLeft: variables.listItemPadding + 6,
|
marginLeft: variables.listItemPadding + 6,
|
||||||
|
|
|
@ -1,11 +1,9 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
export default () => {
|
||||||
|
|
||||||
export default (variables /*: * */ = variable) => {
|
|
||||||
const pickerTheme = {
|
const pickerTheme = {
|
||||||
".note": {
|
'.note': {
|
||||||
color: "#8F8E95"
|
color: '#8F8E95'
|
||||||
},
|
},
|
||||||
// width: 90,
|
// width: 90,
|
||||||
marginRight: -4,
|
marginRight: -4,
|
||||||
|
|
|
@ -1,8 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
export default () => {
|
||||||
|
|
||||||
export default (variables /*: * */ = variable) => {
|
|
||||||
const pickerTheme = {};
|
const pickerTheme = {};
|
||||||
|
|
||||||
return pickerTheme;
|
return pickerTheme;
|
||||||
|
|
|
@ -1,11 +1,9 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
export default () => {
|
||||||
|
|
||||||
export default (variables /*: * */ = variable) => {
|
|
||||||
const pickerTheme = {
|
const pickerTheme = {
|
||||||
".note": {
|
'.note': {
|
||||||
color: "#8F8E95"
|
color: '#8F8E95'
|
||||||
},
|
},
|
||||||
// width: 90,
|
// width: 90,
|
||||||
marginRight: -4,
|
marginRight: -4,
|
||||||
|
|
|
@ -1,26 +1,29 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import { Platform } from "react-native";
|
import { Platform } from 'react-native';
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
import { PLATFORM } from './../variables/commonColor';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const radioTheme = {
|
const radioTheme = {
|
||||||
".selected": {
|
'.selected': {
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: Platform.OS === "ios"
|
color:
|
||||||
|
Platform.OS === PLATFORM.IOS
|
||||||
? variables.radioColor
|
? variables.radioColor
|
||||||
: variables.radioSelectedColorAndroid,
|
: variables.radioSelectedColorAndroid,
|
||||||
lineHeight: Platform.OS === "ios" ? 25 : variables.radioBtnLineHeight,
|
lineHeight:
|
||||||
height: Platform.OS === "ios" ? 20 : undefined
|
Platform.OS === PLATFORM.IOS ? 25 : variables.radioBtnLineHeight,
|
||||||
|
height: Platform.OS === PLATFORM.IOS ? 20 : undefined
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: Platform.OS === "ios" ? "transparent" : undefined,
|
color: Platform.OS === PLATFORM.IOS ? 'transparent' : undefined,
|
||||||
lineHeight: Platform.OS === "ios"
|
lineHeight:
|
||||||
? undefined
|
Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnLineHeight,
|
||||||
: variables.radioBtnLineHeight,
|
fontSize:
|
||||||
fontSize: Platform.OS === "ios" ? undefined : variables.radioBtnSize
|
Platform.OS === PLATFORM.IOS ? undefined : variables.radioBtnSize
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,15 +1,13 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from './../variables/platform';
|
export default () => {
|
||||||
|
|
||||||
export default (variables /*: * */ = variable) => {
|
|
||||||
const rightTheme = {
|
const rightTheme = {
|
||||||
'NativeBase.Button': {
|
'NativeBase.Button': {
|
||||||
alignSelf: null,
|
alignSelf: null
|
||||||
},
|
},
|
||||||
flex: 1,
|
flex: 1,
|
||||||
alignSelf: 'center',
|
alignSelf: 'center',
|
||||||
alignItems: 'flex-end',
|
alignItems: 'flex-end'
|
||||||
};
|
};
|
||||||
|
|
||||||
return rightTheme;
|
return rightTheme;
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
import { PLATFORM } from './../variables/commonColor';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const platform = variables.platform;
|
const platform = variables.platform;
|
||||||
|
@ -8,43 +9,43 @@ export default (variables /*: * */ = variable) => {
|
||||||
const segmentTheme = {
|
const segmentTheme = {
|
||||||
height: 45,
|
height: 45,
|
||||||
borderColor: variables.segmentBorderColorMain,
|
borderColor: variables.segmentBorderColorMain,
|
||||||
flexDirection: "row",
|
flexDirection: 'row',
|
||||||
justifyContent: "center",
|
justifyContent: 'center',
|
||||||
backgroundColor: variables.segmentBackgroundColor,
|
backgroundColor: variables.segmentBackgroundColor,
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
alignSelf: "center",
|
alignSelf: 'center',
|
||||||
borderRadius: 0,
|
borderRadius: 0,
|
||||||
paddingTop: 3,
|
paddingTop: 3,
|
||||||
paddingBottom: 3,
|
paddingBottom: 3,
|
||||||
height: 30,
|
height: 30,
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
borderLeftWidth: 0,
|
borderLeftWidth: 0,
|
||||||
borderColor: variables.segmentBorderColor,
|
borderColor: variables.segmentBorderColor,
|
||||||
elevation: 0,
|
elevation: 0,
|
||||||
".active": {
|
'.active': {
|
||||||
backgroundColor: variables.segmentActiveBackgroundColor,
|
backgroundColor: variables.segmentActiveBackgroundColor,
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.segmentActiveTextColor
|
color: variables.segmentActiveTextColor
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.segmentActiveTextColor
|
color: variables.segmentActiveTextColor
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
".first": {
|
'.first': {
|
||||||
borderTopLeftRadius: platform === "ios" ? 5 : undefined,
|
borderTopLeftRadius: platform === PLATFORM.IOS ? 5 : undefined,
|
||||||
borderBottomLeftRadius: platform === "ios" ? 5 : undefined,
|
borderBottomLeftRadius: platform === PLATFORM.IOS ? 5 : undefined,
|
||||||
borderLeftWidth: 1
|
borderLeftWidth: 1
|
||||||
},
|
},
|
||||||
".last": {
|
'.last': {
|
||||||
borderTopRightRadius: platform === "ios" ? 5 : undefined,
|
borderTopRightRadius: platform === PLATFORM.IOS ? 5 : undefined,
|
||||||
borderBottomRightRadius: platform === "ios" ? 5 : undefined
|
borderBottomRightRadius: platform === PLATFORM.IOS ? 5 : undefined
|
||||||
},
|
},
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.segmentTextColor,
|
color: variables.segmentTextColor,
|
||||||
fontSize: 14
|
fontSize: 14
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
fontSize: 22,
|
fontSize: 22,
|
||||||
paddingTop: 0,
|
paddingTop: 0,
|
||||||
color: variables.segmentTextColor
|
color: variables.segmentTextColor
|
||||||
|
|
|
@ -11,38 +11,38 @@ export default (variables /*: * */ = variable) => {
|
||||||
'.bordered': {
|
'.bordered': {
|
||||||
height: 50,
|
height: 50,
|
||||||
paddingVertical: variables.listItemPadding - 8,
|
paddingVertical: variables.listItemPadding - 8,
|
||||||
paddingTop: variables.listItemPadding + 12,
|
paddingTop: variables.listItemPadding + 12
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
'.bordered': {
|
'.bordered': {
|
||||||
'.noTopBorder': {
|
'.noTopBorder': {
|
||||||
borderTopWidth: 0,
|
borderTopWidth: 0
|
||||||
},
|
},
|
||||||
'.noBottomBorder': {
|
'.noBottomBorder': {
|
||||||
borderBottomWidth: 0,
|
borderBottomWidth: 0
|
||||||
},
|
},
|
||||||
height: 35,
|
height: 35,
|
||||||
paddingTop: variables.listItemPadding + 2,
|
paddingTop: variables.listItemPadding + 2,
|
||||||
paddingBottom: variables.listItemPadding,
|
paddingBottom: variables.listItemPadding,
|
||||||
borderBottomWidth: variables.borderWidth,
|
borderBottomWidth: variables.borderWidth,
|
||||||
borderTopWidth: variables.borderWidth,
|
borderTopWidth: variables.borderWidth,
|
||||||
borderColor: variables.listBorderColor,
|
borderColor: variables.listBorderColor
|
||||||
},
|
},
|
||||||
'NativeBase.Text': {
|
'NativeBase.Text': {
|
||||||
fontSize: variables.tabBarTextSize - 2,
|
fontSize: variables.tabBarTextSize - 2,
|
||||||
color: '#777',
|
color: '#777'
|
||||||
},
|
},
|
||||||
'.noTopBorder': {
|
'.noTopBorder': {
|
||||||
borderTopWidth: 0,
|
borderTopWidth: 0
|
||||||
},
|
},
|
||||||
'.noBottomBorder': {
|
'.noBottomBorder': {
|
||||||
borderBottomWidth: 0,
|
borderBottomWidth: 0
|
||||||
},
|
},
|
||||||
height: 38,
|
height: 38,
|
||||||
backgroundColor: '#F0EFF5',
|
backgroundColor: '#F0EFF5',
|
||||||
flex: 1,
|
flex: 1,
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
paddingLeft: variables.listItemPadding + 5,
|
paddingLeft: variables.listItemPadding + 5
|
||||||
};
|
};
|
||||||
|
|
||||||
return theme;
|
return theme;
|
||||||
|
|
|
@ -1,8 +1,6 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
export default () => {
|
||||||
|
|
||||||
export default (variables /*: * */ = variable) => {
|
|
||||||
const spinnerTheme = {
|
const spinnerTheme = {
|
||||||
height: 80
|
height: 80
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,17 +1,18 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import { Platform } from "react-native";
|
import { Platform } from 'react-native';
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
import { PLATFORM } from './../variables/commonColor';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const subtitleTheme = {
|
const subtitleTheme = {
|
||||||
fontSize: variables.subTitleFontSize,
|
fontSize: variables.subTitleFontSize,
|
||||||
fontFamily: variables.titleFontfamily,
|
fontFamily: variables.titleFontfamily,
|
||||||
color: variables.subtitleColor,
|
color: variables.subtitleColor,
|
||||||
textAlign: "center",
|
textAlign: 'center',
|
||||||
paddingLeft: Platform.OS === "ios" ? 4 : 0,
|
paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0,
|
||||||
marginLeft: Platform.OS === "ios" ? undefined : -3
|
marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3
|
||||||
};
|
};
|
||||||
|
|
||||||
return subtitleTheme;
|
return subtitleTheme;
|
||||||
|
|
|
@ -1,47 +1,45 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
export default () => {
|
||||||
|
|
||||||
export default (variables /*: * */ = variable) => {
|
|
||||||
const swipeRowTheme = {
|
const swipeRowTheme = {
|
||||||
"NativeBase.ListItem": {
|
'NativeBase.ListItem': {
|
||||||
".list": {
|
'.list': {
|
||||||
backgroundColor: "#FFF",
|
backgroundColor: '#FFF'
|
||||||
},
|
},
|
||||||
marginLeft: 0,
|
marginLeft: 0
|
||||||
},
|
},
|
||||||
"NativeBase.Left": {
|
'NativeBase.Left': {
|
||||||
flex: 0,
|
flex: 0,
|
||||||
alignSelf: null,
|
alignSelf: null,
|
||||||
alignItems: null,
|
alignItems: null,
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
justifyContent: "center",
|
justifyContent: 'center',
|
||||||
alignSelf: "stretch",
|
alignSelf: 'stretch',
|
||||||
borderRadius: 0,
|
borderRadius: 0
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
'NativeBase.Right': {
|
||||||
"NativeBase.Right": {
|
|
||||||
flex: 0,
|
flex: 0,
|
||||||
alignSelf: null,
|
alignSelf: null,
|
||||||
alignItems: null,
|
alignItems: null,
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
justifyContent: "center",
|
justifyContent: 'center',
|
||||||
alignSelf: "stretch",
|
alignSelf: 'stretch',
|
||||||
borderRadius: 0,
|
borderRadius: 0
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
'NativeBase.Button': {
|
||||||
"NativeBase.Button": {
|
|
||||||
flex: 1,
|
flex: 1,
|
||||||
height: null,
|
height: null,
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
justifyContent: "center",
|
justifyContent: 'center',
|
||||||
alignSelf: "stretch",
|
alignSelf: 'stretch',
|
||||||
borderRadius: 0,
|
borderRadius: 0
|
||||||
},
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return swipeRowTheme;
|
return swipeRowTheme;
|
||||||
|
|
|
@ -1,10 +1,8 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
export default () => {
|
||||||
|
|
||||||
export default (variables /*: * */ = variable) => {
|
|
||||||
const switchTheme = {
|
const switchTheme = {
|
||||||
marginVertical: -5,
|
marginVertical: -5
|
||||||
};
|
};
|
||||||
|
|
||||||
return switchTheme;
|
return switchTheme;
|
||||||
|
|
|
@ -1,11 +1,9 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
export default () => {
|
||||||
|
|
||||||
export default (variables /*: * */ = variable) => {
|
|
||||||
const tabTheme = {
|
const tabTheme = {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
backgroundColor: "#FFF"
|
backgroundColor: '#FFF'
|
||||||
};
|
};
|
||||||
|
|
||||||
return tabTheme;
|
return tabTheme;
|
||||||
|
|
|
@ -1,55 +1,55 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const tabBarTheme = {
|
const tabBarTheme = {
|
||||||
".tabIcon": {
|
'.tabIcon': {
|
||||||
height: undefined
|
height: undefined
|
||||||
},
|
},
|
||||||
".vertical": {
|
'.vertical': {
|
||||||
height: 60
|
height: 60
|
||||||
},
|
},
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
".transparent": {
|
'.transparent': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
fontSize: variables.tabFontSize,
|
fontSize: variables.tabFontSize,
|
||||||
color: variables.sTabBarActiveTextColor,
|
color: variables.sTabBarActiveTextColor,
|
||||||
fontWeight: "400"
|
fontWeight: '400'
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.sTabBarActiveTextColor
|
color: variables.sTabBarActiveTextColor
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
color: variables.sTabBarActiveTextColor
|
color: variables.sTabBarActiveTextColor
|
||||||
},
|
},
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
fontSize: variables.tabFontSize,
|
fontSize: variables.tabFontSize,
|
||||||
color: variables.sTabBarActiveTextColor,
|
color: variables.sTabBarActiveTextColor,
|
||||||
fontWeight: "400"
|
fontWeight: '400'
|
||||||
},
|
},
|
||||||
".isTabActive": {
|
'.isTabActive': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
fontWeight: "900"
|
fontWeight: '900'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
flex: 1,
|
flex: 1,
|
||||||
alignSelf: "stretch",
|
alignSelf: 'stretch',
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
justifyContent: "center",
|
justifyContent: 'center',
|
||||||
borderRadius: null,
|
borderRadius: null,
|
||||||
borderBottomColor: "transparent",
|
borderBottomColor: 'transparent',
|
||||||
backgroundColor: variables.tabBgColor
|
backgroundColor: variables.tabBgColor
|
||||||
},
|
},
|
||||||
height: 45,
|
height: 45,
|
||||||
flexDirection: "row",
|
flexDirection: 'row',
|
||||||
justifyContent: "space-around",
|
justifyContent: 'space-around',
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
borderTopWidth: 0,
|
borderTopWidth: 0,
|
||||||
borderLeftWidth: 0,
|
borderLeftWidth: 0,
|
||||||
borderRightWidth: 0,
|
borderRightWidth: 0,
|
||||||
borderBottomColor: "#ccc",
|
borderBottomColor: '#ccc',
|
||||||
backgroundColor: variables.tabBgColor
|
backgroundColor: variables.tabBgColor
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,24 +1,24 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import { Platform } from 'react-native';
|
||||||
import { Platform } from "react-native";
|
|
||||||
|
import variable from './../variables/platform';
|
||||||
|
import { PLATFORM } from './../variables/commonColor';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const platformStyle = variables.platformStyle;
|
const platformStyle = variables.platformStyle;
|
||||||
const platform = variables.platform;
|
|
||||||
|
|
||||||
const tabContainerTheme = {
|
const tabContainerTheme = {
|
||||||
elevation: 3,
|
elevation: 3,
|
||||||
height: 50,
|
height: 50,
|
||||||
flexDirection: "row",
|
flexDirection: 'row',
|
||||||
shadowColor: platformStyle === "material" ? "#000" : undefined,
|
shadowColor: platformStyle === PLATFORM.MATERIAL ? '#000' : undefined,
|
||||||
shadowOffset: platformStyle === "material"
|
shadowOffset:
|
||||||
? { width: 0, height: 2 }
|
platformStyle === PLATFORM.MATERIAL ? { width: 0, height: 2 } : undefined,
|
||||||
: undefined,
|
shadowOpacity: platformStyle === PLATFORM.MATERIAL ? 0.2 : undefined,
|
||||||
shadowOpacity: platformStyle === "material" ? 0.2 : undefined,
|
shadowRadius: platformStyle === PLATFORM.MATERIAL ? 1.2 : undefined,
|
||||||
shadowRadius: platformStyle === "material" ? 1.2 : undefined,
|
justifyContent: 'space-around',
|
||||||
justifyContent: "space-around",
|
borderBottomWidth: Platform.OS === PLATFORM.IOS ? variables.borderWidth : 0,
|
||||||
borderBottomWidth: Platform.OS === "ios" ? variables.borderWidth : 0,
|
|
||||||
borderColor: variables.topTabBarBorderColor
|
borderColor: variables.topTabBarBorderColor
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,35 +1,36 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
import { PLATFORM } from './../variables/commonColor';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const platform = variables.platform;
|
const platform = variables.platform;
|
||||||
|
|
||||||
const tabHeadingTheme = {
|
const tabHeadingTheme = {
|
||||||
flexDirection: "row",
|
flexDirection: 'row',
|
||||||
backgroundColor: variables.tabDefaultBg,
|
backgroundColor: variables.tabDefaultBg,
|
||||||
flex: 1,
|
flex: 1,
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
justifyContent: "center",
|
justifyContent: 'center',
|
||||||
".scrollable": {
|
'.scrollable': {
|
||||||
paddingHorizontal: 20,
|
paddingHorizontal: 20,
|
||||||
flex: platform === "android" ? 0 : 1,
|
flex: platform === PLATFORM.ANDROID ? 0 : 1,
|
||||||
minWidth: platform === "android" ? undefined : 60
|
minWidth: platform === PLATFORM.ANDROID ? undefined : 60
|
||||||
},
|
},
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.topTabBarTextColor,
|
color: variables.topTabBarTextColor,
|
||||||
marginHorizontal: 7
|
marginHorizontal: 7
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.topTabBarTextColor,
|
color: variables.topTabBarTextColor,
|
||||||
fontSize: platform === "ios" ? 26 : undefined
|
fontSize: platform === PLATFORM.IOS ? 26 : undefined
|
||||||
},
|
},
|
||||||
".active": {
|
'.active': {
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: variables.topTabBarActiveTextColor,
|
color: variables.topTabBarActiveTextColor,
|
||||||
fontWeight: "600"
|
fontWeight: '600'
|
||||||
},
|
},
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
color: variables.topTabBarActiveTextColor
|
color: variables.topTabBarActiveTextColor
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const textTheme = {
|
const textTheme = {
|
||||||
fontSize: variables.DefaultFontSize,
|
fontSize: variables.DefaultFontSize,
|
||||||
fontFamily: variables.fontFamily,
|
fontFamily: variables.fontFamily,
|
||||||
color: variables.textColor,
|
color: variables.textColor,
|
||||||
".note": {
|
'.note': {
|
||||||
color: "#a7a7a7",
|
color: '#a7a7a7',
|
||||||
fontSize: variables.noteFontSize
|
fontSize: variables.noteFontSize
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,15 +1,15 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const textAreaTheme = {
|
const textAreaTheme = {
|
||||||
".underline": {
|
'.underline': {
|
||||||
borderBottomWidth: variables.borderWidth,
|
borderBottomWidth: variables.borderWidth,
|
||||||
marginTop: 5,
|
marginTop: 5,
|
||||||
borderColor: variables.inputBorderColor
|
borderColor: variables.inputBorderColor
|
||||||
},
|
},
|
||||||
".bordered": {
|
'.bordered': {
|
||||||
borderWidth: 1,
|
borderWidth: 1,
|
||||||
marginTop: 5,
|
marginTop: 5,
|
||||||
borderColor: variables.inputBorderColor
|
borderColor: variables.inputBorderColor
|
||||||
|
@ -18,7 +18,7 @@ export default (variables /*: * */ = variable) => {
|
||||||
paddingLeft: 10,
|
paddingLeft: 10,
|
||||||
paddingRight: 5,
|
paddingRight: 5,
|
||||||
fontSize: 15,
|
fontSize: 15,
|
||||||
textAlignVertical: "top"
|
textAlignVertical: 'top'
|
||||||
};
|
};
|
||||||
|
|
||||||
return textAreaTheme;
|
return textAreaTheme;
|
||||||
|
|
|
@ -1,41 +1,39 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from './../variables/platform';
|
export default () => {
|
||||||
|
|
||||||
export default (variables /*: * */ = variable) => {
|
|
||||||
const thumbnailTheme = {
|
const thumbnailTheme = {
|
||||||
'.square': {
|
'.square': {
|
||||||
borderRadius: 0,
|
borderRadius: 0,
|
||||||
'.small': {
|
'.small': {
|
||||||
width: 36,
|
width: 36,
|
||||||
height: 36,
|
height: 36,
|
||||||
borderRadius: 0,
|
borderRadius: 0
|
||||||
},
|
},
|
||||||
'.large': {
|
'.large': {
|
||||||
width: 80,
|
width: 80,
|
||||||
height: 80,
|
height: 80,
|
||||||
borderRadius: 0,
|
borderRadius: 0
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
'.small': {
|
'.small': {
|
||||||
width: 36,
|
width: 36,
|
||||||
height: 36,
|
height: 36,
|
||||||
borderRadius: 18,
|
borderRadius: 18,
|
||||||
'.square': {
|
'.square': {
|
||||||
borderRadius: 0,
|
borderRadius: 0
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
'.large': {
|
'.large': {
|
||||||
width: 80,
|
width: 80,
|
||||||
height: 80,
|
height: 80,
|
||||||
borderRadius: 40,
|
borderRadius: 40,
|
||||||
'.square': {
|
'.square': {
|
||||||
borderRadius: 0,
|
borderRadius: 0
|
||||||
},
|
}
|
||||||
},
|
},
|
||||||
width: 56,
|
width: 56,
|
||||||
height: 56,
|
height: 56,
|
||||||
borderRadius: 28,
|
borderRadius: 28
|
||||||
};
|
};
|
||||||
|
|
||||||
return thumbnailTheme;
|
return thumbnailTheme;
|
||||||
|
|
|
@ -1,18 +1,19 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import { Platform } from "react-native";
|
import { Platform } from 'react-native';
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
import { PLATFORM } from './../variables/commonColor';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const titleTheme = {
|
const titleTheme = {
|
||||||
fontSize: variables.titleFontSize,
|
fontSize: variables.titleFontSize,
|
||||||
fontFamily: variables.titleFontfamily,
|
fontFamily: variables.titleFontfamily,
|
||||||
color: variables.titleFontColor,
|
color: variables.titleFontColor,
|
||||||
fontWeight: Platform.OS === "ios" ? "700" : undefined,
|
fontWeight: Platform.OS === PLATFORM.IOS ? '700' : undefined,
|
||||||
textAlign: "center",
|
textAlign: 'center',
|
||||||
paddingLeft: Platform.OS === "ios" ? 4 : 0,
|
paddingLeft: Platform.OS === PLATFORM.IOS ? 4 : 0,
|
||||||
marginLeft: Platform.OS === "ios" ? undefined : -3,
|
marginLeft: Platform.OS === PLATFORM.IOS ? undefined : -3,
|
||||||
paddingTop: 1
|
paddingTop: 1
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -1,36 +1,37 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
import { PLATFORM } from './../variables/commonColor';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const platform = variables.platform;
|
const platform = variables.platform;
|
||||||
|
|
||||||
const toastTheme = {
|
const toastTheme = {
|
||||||
".danger": {
|
'.danger': {
|
||||||
backgroundColor: variables.brandDanger
|
backgroundColor: variables.brandDanger
|
||||||
},
|
},
|
||||||
".warning": {
|
'.warning': {
|
||||||
backgroundColor: variables.brandWarning
|
backgroundColor: variables.brandWarning
|
||||||
},
|
},
|
||||||
".success": {
|
'.success': {
|
||||||
backgroundColor: variables.brandSuccess
|
backgroundColor: variables.brandSuccess
|
||||||
},
|
},
|
||||||
backgroundColor: "rgba(0,0,0,0.8)",
|
backgroundColor: 'rgba(0,0,0,0.8)',
|
||||||
borderRadius: platform === "ios" ? 5 : 0,
|
borderRadius: platform === PLATFORM.IOS ? 5 : 0,
|
||||||
flexDirection: "row",
|
flexDirection: 'row',
|
||||||
justifyContent: "space-between",
|
justifyContent: 'space-between',
|
||||||
alignItems: "center",
|
alignItems: 'center',
|
||||||
padding: 10,
|
padding: 10,
|
||||||
minHeight: 50,
|
minHeight: 50,
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
color: "#fff",
|
color: '#fff',
|
||||||
flex: 1
|
flex: 1
|
||||||
},
|
},
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
backgroundColor: "transparent",
|
backgroundColor: 'transparent',
|
||||||
height: 30,
|
height: 30,
|
||||||
elevation: 0,
|
elevation: 0,
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
fontSize: 14
|
fontSize: 14
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,10 +1,10 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import variable from "./../variables/platform";
|
import variable from './../variables/platform';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const viewTheme = {
|
const viewTheme = {
|
||||||
".padder": {
|
'.padder': {
|
||||||
padding: variables.contentPadding
|
padding: variables.contentPadding
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,216 +1,218 @@
|
||||||
|
/* eslint-disable no-param-reassign */
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import _ from "lodash";
|
import _ from 'lodash';
|
||||||
import bodyTheme from "./Body";
|
|
||||||
import leftTheme from "./Left";
|
import bodyTheme from './Body';
|
||||||
import rightTheme from "./Right";
|
import leftTheme from './Left';
|
||||||
import headerTheme from "./Header";
|
import rightTheme from './Right';
|
||||||
import switchTheme from "./Switch";
|
import headerTheme from './Header';
|
||||||
import thumbnailTheme from "./Thumbnail";
|
import switchTheme from './Switch';
|
||||||
import containerTheme from "./Container";
|
import thumbnailTheme from './Thumbnail';
|
||||||
import contentTheme from "./Content";
|
import containerTheme from './Container';
|
||||||
import buttonTheme from "./Button";
|
import contentTheme from './Content';
|
||||||
import titleTheme from "./Title";
|
import buttonTheme from './Button';
|
||||||
import subtitleTheme from "./Subtitle";
|
import titleTheme from './Title';
|
||||||
import inputGroupTheme from "./InputGroup";
|
import subtitleTheme from './Subtitle';
|
||||||
import badgeTheme from "./Badge";
|
import inputGroupTheme from './InputGroup';
|
||||||
import checkBoxTheme from "./CheckBox";
|
import badgeTheme from './Badge';
|
||||||
import cardTheme from "./Card";
|
import checkBoxTheme from './CheckBox';
|
||||||
import radioTheme from "./Radio";
|
import cardTheme from './Card';
|
||||||
import h3Theme from "./H3";
|
import radioTheme from './Radio';
|
||||||
import h2Theme from "./H2";
|
import h3Theme from './H3';
|
||||||
import h1Theme from "./H1";
|
import h2Theme from './H2';
|
||||||
import footerTheme from "./Footer";
|
import h1Theme from './H1';
|
||||||
import footerTabTheme from "./FooterTab";
|
import footerTheme from './Footer';
|
||||||
import fabTheme from "./Fab";
|
import footerTabTheme from './FooterTab';
|
||||||
import itemTheme from "./Item";
|
import fabTheme from './Fab';
|
||||||
import labelTheme from "./Label";
|
import itemTheme from './Item';
|
||||||
import textAreaTheme from "./Textarea";
|
import labelTheme from './Label';
|
||||||
import textTheme from "./Text";
|
import textAreaTheme from './Textarea';
|
||||||
import toastTheme from "./Toast";
|
import textTheme from './Text';
|
||||||
import tabTheme from "./Tab";
|
import toastTheme from './Toast';
|
||||||
import tabBarTheme from "./TabBar";
|
import tabTheme from './Tab';
|
||||||
import tabContainerTheme from "./TabContainer";
|
import tabBarTheme from './TabBar';
|
||||||
import viewTheme from "./View";
|
import tabContainerTheme from './TabContainer';
|
||||||
import tabHeadingTheme from "./TabHeading";
|
import viewTheme from './View';
|
||||||
import iconTheme from "./Icon";
|
import tabHeadingTheme from './TabHeading';
|
||||||
import inputTheme from "./Input";
|
import iconTheme from './Icon';
|
||||||
import swipeRowTheme from "./SwipeRow";
|
import inputTheme from './Input';
|
||||||
import segmentTheme from "./Segment";
|
import swipeRowTheme from './SwipeRow';
|
||||||
import spinnerTheme from "./Spinner";
|
import segmentTheme from './Segment';
|
||||||
import cardItemTheme from "./CardItem";
|
import spinnerTheme from './Spinner';
|
||||||
import listItemTheme from "./ListItem";
|
import cardItemTheme from './CardItem';
|
||||||
import formTheme from "./Form";
|
import listItemTheme from './ListItem';
|
||||||
import separatorTheme from "./Separator";
|
import formTheme from './Form';
|
||||||
import pickerTheme from "./Picker"
|
import separatorTheme from './Separator';
|
||||||
import variable from "./../variables/platform";
|
import pickerTheme from './Picker';
|
||||||
|
import variable from './../variables/platform';
|
||||||
|
|
||||||
export default (variables /* : * */ = variable) => {
|
export default (variables /* : * */ = variable) => {
|
||||||
const theme = {
|
const theme = {
|
||||||
variables,
|
variables,
|
||||||
"NativeBase.Left": {
|
'NativeBase.Left': {
|
||||||
...leftTheme(variables)
|
...leftTheme(variables)
|
||||||
},
|
},
|
||||||
"NativeBase.Right": {
|
'NativeBase.Right': {
|
||||||
...rightTheme(variables)
|
...rightTheme(variables)
|
||||||
},
|
},
|
||||||
"NativeBase.Body": {
|
'NativeBase.Body': {
|
||||||
...bodyTheme(variables)
|
...bodyTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.Header": {
|
'NativeBase.Header': {
|
||||||
...headerTheme(variables)
|
...headerTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
...buttonTheme(variables)
|
...buttonTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.Title": {
|
'NativeBase.Title': {
|
||||||
...titleTheme(variables)
|
...titleTheme(variables)
|
||||||
},
|
},
|
||||||
"NativeBase.Subtitle": {
|
'NativeBase.Subtitle': {
|
||||||
...subtitleTheme(variables)
|
...subtitleTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.InputGroup": {
|
'NativeBase.InputGroup': {
|
||||||
...inputGroupTheme(variables)
|
...inputGroupTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.Input": {
|
'NativeBase.Input': {
|
||||||
...inputTheme(variables)
|
...inputTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.Badge": {
|
'NativeBase.Badge': {
|
||||||
...badgeTheme(variables)
|
...badgeTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.CheckBox": {
|
'NativeBase.CheckBox': {
|
||||||
...checkBoxTheme(variables)
|
...checkBoxTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.Radio": {
|
'NativeBase.Radio': {
|
||||||
...radioTheme(variables)
|
...radioTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.Card": {
|
'NativeBase.Card': {
|
||||||
...cardTheme(variables)
|
...cardTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.CardItem": {
|
'NativeBase.CardItem': {
|
||||||
...cardItemTheme(variables)
|
...cardItemTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.Toast": {
|
'NativeBase.Toast': {
|
||||||
...toastTheme(variables)
|
...toastTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.H1": {
|
'NativeBase.H1': {
|
||||||
...h1Theme(variables)
|
...h1Theme(variables)
|
||||||
},
|
},
|
||||||
"NativeBase.H2": {
|
'NativeBase.H2': {
|
||||||
...h2Theme(variables)
|
...h2Theme(variables)
|
||||||
},
|
},
|
||||||
"NativeBase.H3": {
|
'NativeBase.H3': {
|
||||||
...h3Theme(variables)
|
...h3Theme(variables)
|
||||||
},
|
},
|
||||||
"NativeBase.Form": {
|
'NativeBase.Form': {
|
||||||
...formTheme(variables)
|
...formTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.Container": {
|
'NativeBase.Container': {
|
||||||
...containerTheme(variables)
|
...containerTheme(variables)
|
||||||
},
|
},
|
||||||
"NativeBase.Content": {
|
'NativeBase.Content': {
|
||||||
...contentTheme(variables)
|
...contentTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.Footer": {
|
'NativeBase.Footer': {
|
||||||
...footerTheme(variables)
|
...footerTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.Tabs": {
|
'NativeBase.Tabs': {
|
||||||
flex: 1
|
flex: 1
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.FooterTab": {
|
'NativeBase.FooterTab': {
|
||||||
...footerTabTheme(variables)
|
...footerTabTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.ListItem": {
|
'NativeBase.ListItem': {
|
||||||
...listItemTheme(variables)
|
...listItemTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.ListItem1": {
|
'NativeBase.ListItem1': {
|
||||||
...listItemTheme(variables)
|
...listItemTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.Icon": {
|
'NativeBase.Icon': {
|
||||||
...iconTheme(variables)
|
...iconTheme(variables)
|
||||||
},
|
},
|
||||||
"NativeBase.IconNB": {
|
'NativeBase.IconNB': {
|
||||||
...iconTheme(variables)
|
...iconTheme(variables)
|
||||||
},
|
},
|
||||||
"NativeBase.Text": {
|
'NativeBase.Text': {
|
||||||
...textTheme(variables)
|
...textTheme(variables)
|
||||||
},
|
},
|
||||||
"NativeBase.Spinner": {
|
'NativeBase.Spinner': {
|
||||||
...spinnerTheme(variables)
|
...spinnerTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.Fab": {
|
'NativeBase.Fab': {
|
||||||
...fabTheme(variables)
|
...fabTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.Item": {
|
'NativeBase.Item': {
|
||||||
...itemTheme(variables)
|
...itemTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.Label": {
|
'NativeBase.Label': {
|
||||||
...labelTheme(variables)
|
...labelTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.Textarea": {
|
'NativeBase.Textarea': {
|
||||||
...textAreaTheme(variables)
|
...textAreaTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.PickerNB": {
|
'NativeBase.PickerNB': {
|
||||||
...pickerTheme(variables),
|
...pickerTheme(variables),
|
||||||
"NativeBase.Button": {
|
'NativeBase.Button': {
|
||||||
"NativeBase.Text": {}
|
'NativeBase.Text': {}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.Tab": {
|
'NativeBase.Tab': {
|
||||||
...tabTheme(variables)
|
...tabTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.Segment": {
|
'NativeBase.Segment': {
|
||||||
...segmentTheme(variables)
|
...segmentTheme(variables)
|
||||||
},
|
},
|
||||||
|
|
||||||
"NativeBase.TabBar": {
|
'NativeBase.TabBar': {
|
||||||
...tabBarTheme(variables)
|
...tabBarTheme(variables)
|
||||||
},
|
},
|
||||||
"NativeBase.ViewNB": {
|
'NativeBase.ViewNB': {
|
||||||
...viewTheme(variables)
|
...viewTheme(variables)
|
||||||
},
|
},
|
||||||
"NativeBase.TabHeading": {
|
'NativeBase.TabHeading': {
|
||||||
...tabHeadingTheme(variables)
|
...tabHeadingTheme(variables)
|
||||||
},
|
},
|
||||||
"NativeBase.TabContainer": {
|
'NativeBase.TabContainer': {
|
||||||
...tabContainerTheme(variables)
|
...tabContainerTheme(variables)
|
||||||
},
|
},
|
||||||
"NativeBase.Switch": {
|
'NativeBase.Switch': {
|
||||||
...switchTheme(variables)
|
...switchTheme(variables)
|
||||||
},
|
},
|
||||||
"NativeBase.Separator": {
|
'NativeBase.Separator': {
|
||||||
...separatorTheme(variables)
|
...separatorTheme(variables)
|
||||||
},
|
},
|
||||||
"NativeBase.SwipeRow": {
|
'NativeBase.SwipeRow': {
|
||||||
...swipeRowTheme(variables)
|
...swipeRowTheme(variables)
|
||||||
},
|
},
|
||||||
"NativeBase.Thumbnail": {
|
'NativeBase.Thumbnail': {
|
||||||
...thumbnailTheme(variables)
|
...thumbnailTheme(variables)
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
@ -218,9 +220,9 @@ export default (variables /*: * */ = variable) => {
|
||||||
const cssifyTheme = (grandparent, parent, parentKey) => {
|
const cssifyTheme = (grandparent, parent, parentKey) => {
|
||||||
_.forEach(parent, (style, styleName) => {
|
_.forEach(parent, (style, styleName) => {
|
||||||
if (
|
if (
|
||||||
styleName.indexOf(".") === 0 &&
|
styleName.indexOf('.') === 0 &&
|
||||||
parentKey &&
|
parentKey &&
|
||||||
parentKey.indexOf(".") === 0
|
parentKey.indexOf('.') === 0
|
||||||
) {
|
) {
|
||||||
if (grandparent) {
|
if (grandparent) {
|
||||||
if (!grandparent[styleName]) {
|
if (!grandparent[styleName]) {
|
||||||
|
@ -230,7 +232,12 @@ export default (variables /*: * */ = variable) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (style && typeof style === "object" && styleName !== "fontVariant" && styleName !== "transform") {
|
if (
|
||||||
|
style &&
|
||||||
|
typeof style === 'object' &&
|
||||||
|
styleName !== 'fontVariant' &&
|
||||||
|
styleName !== 'transform'
|
||||||
|
) {
|
||||||
cssifyTheme(parent, style, styleName);
|
cssifyTheme(parent, style, styleName);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -1,79 +1,104 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import color from "color";
|
import color from 'color';
|
||||||
|
import { Platform, Dimensions, PixelRatio } from 'react-native';
|
||||||
|
|
||||||
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 deviceHeight = Dimensions.get('window').height;
|
||||||
const deviceWidth = Dimensions.get("window").width;
|
const deviceWidth = Dimensions.get('window').width;
|
||||||
const platform = Platform.OS;
|
const platform = Platform.OS;
|
||||||
const platformStyle = undefined;
|
const platformStyle = undefined;
|
||||||
const isIphoneX =
|
const isIphoneX =
|
||||||
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
|
platform === PLATFORM.IOS &&
|
||||||
|
(deviceHeight === 812 ||
|
||||||
|
deviceWidth === 812 ||
|
||||||
|
deviceHeight === 896 ||
|
||||||
|
deviceWidth === 896);
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
platformStyle,
|
platformStyle,
|
||||||
platform,
|
platform,
|
||||||
|
|
||||||
// Accordion
|
// Accordion
|
||||||
headerStyle: "#edebed",
|
headerStyle: '#edebed',
|
||||||
iconStyle: "#000",
|
iconStyle: '#000',
|
||||||
contentStyle: "#f5f4f5",
|
contentStyle: '#f5f4f5',
|
||||||
expandedIconStyle: "#000",
|
expandedIconStyle: '#000',
|
||||||
accordionBorderColor: "#d3d3d3",
|
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
|
// Android
|
||||||
androidRipple: true,
|
androidRipple: true,
|
||||||
androidRippleColor: "rgba(256, 256, 256, 0.3)",
|
androidRippleColor: 'rgba(256, 256, 256, 0.3)',
|
||||||
androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
|
androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
|
||||||
btnUppercaseAndroidText: true,
|
buttonUppercaseAndroidText: true,
|
||||||
|
|
||||||
// Badge
|
// Badge
|
||||||
badgeBg: "#ED1727",
|
badgeBg: '#ED1727',
|
||||||
badgeColor: "#fff",
|
badgeColor: '#fff',
|
||||||
badgePadding: platform === "ios" ? 3 : 0,
|
badgePadding: platform === PLATFORM.IOS ? 3 : 0,
|
||||||
|
|
||||||
// Button
|
// Button
|
||||||
btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
|
buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
|
||||||
btnDisabledBg: "#b5b5b5",
|
buttonDisabledBg: '#b5b5b5',
|
||||||
buttonPadding: 6,
|
buttonPadding: 6,
|
||||||
get btnPrimaryBg() {
|
get buttonPrimaryBg() {
|
||||||
return this.brandPrimary;
|
return this.brandPrimary;
|
||||||
},
|
},
|
||||||
get btnPrimaryColor() {
|
get buttonPrimaryColor() {
|
||||||
return this.inverseTextColor;
|
return this.inverseTextColor;
|
||||||
},
|
},
|
||||||
get btnInfoBg() {
|
get buttonInfoBg() {
|
||||||
return this.brandInfo;
|
return this.brandInfo;
|
||||||
},
|
},
|
||||||
get btnInfoColor() {
|
get buttonInfoColor() {
|
||||||
return this.inverseTextColor;
|
return this.inverseTextColor;
|
||||||
},
|
},
|
||||||
get btnSuccessBg() {
|
get buttonSuccessBg() {
|
||||||
return this.brandSuccess;
|
return this.brandSuccess;
|
||||||
},
|
},
|
||||||
get btnSuccessColor() {
|
get buttonSuccessColor() {
|
||||||
return this.inverseTextColor;
|
return this.inverseTextColor;
|
||||||
},
|
},
|
||||||
get btnDangerBg() {
|
get buttonDangerBg() {
|
||||||
return this.brandDanger;
|
return this.brandDanger;
|
||||||
},
|
},
|
||||||
get btnDangerColor() {
|
get buttonDangerColor() {
|
||||||
return this.inverseTextColor;
|
return this.inverseTextColor;
|
||||||
},
|
},
|
||||||
get btnWarningBg() {
|
get buttonWarningBg() {
|
||||||
return this.brandWarning;
|
return this.brandWarning;
|
||||||
},
|
},
|
||||||
get btnWarningColor() {
|
get buttonWarningColor() {
|
||||||
return this.inverseTextColor;
|
return this.inverseTextColor;
|
||||||
},
|
},
|
||||||
get btnTextSize() {
|
get buttonTextSize() {
|
||||||
return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
|
return platform === PLATFORM.IOS
|
||||||
|
? this.fontSizeBase * 1.1
|
||||||
|
: this.fontSizeBase - 1;
|
||||||
},
|
},
|
||||||
get btnTextSizeLarge() {
|
get buttonTextSizeLarge() {
|
||||||
return this.fontSizeBase * 1.5;
|
return this.fontSizeBase * 1.5;
|
||||||
},
|
},
|
||||||
get btnTextSizeSmall() {
|
get buttonTextSizeSmall() {
|
||||||
return this.fontSizeBase * 0.8;
|
return this.fontSizeBase * 0.8;
|
||||||
},
|
},
|
||||||
get borderRadiusLarge() {
|
get borderRadiusLarge() {
|
||||||
|
@ -87,42 +112,45 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
// Card
|
// Card
|
||||||
cardDefaultBg: "#fff",
|
cardDefaultBg: '#fff',
|
||||||
cardBorderColor: "#ccc",
|
cardBorderColor: '#ccc',
|
||||||
cardBorderRadius: 2,
|
cardBorderRadius: 2,
|
||||||
cardItemPadding: platform === "ios" ? 10 : 12,
|
cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
|
||||||
|
|
||||||
// CheckBox
|
// CheckBox
|
||||||
CheckboxRadius: platform === "ios" ? 13 : 0,
|
CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
|
||||||
CheckboxBorderWidth: platform === "ios" ? 1 : 2,
|
CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
|
||||||
CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
|
CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
|
||||||
CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
|
CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
|
||||||
CheckboxIconSize: platform === "ios" ? 21 : 16,
|
CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
|
||||||
CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
|
CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
|
||||||
CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
|
CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
|
||||||
checkboxBgColor: "#039BE5",
|
checkboxBgColor: '#039BE5',
|
||||||
checkboxSize: 20,
|
checkboxSize: 20,
|
||||||
checkboxTickColor: "#fff",
|
checkboxTickColor: '#fff',
|
||||||
|
|
||||||
// Color
|
// Color
|
||||||
brandPrimary: platform === "ios" ? "#007aff" : "#3F51B5",
|
brandPrimary: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
|
||||||
brandInfo: "#62B1F6",
|
brandInfo: '#62B1F6',
|
||||||
brandSuccess: "#5cb85c",
|
brandSuccess: '#5cb85c',
|
||||||
brandDanger: "#d9534f",
|
brandDanger: '#d9534f',
|
||||||
brandWarning: "#f0ad4e",
|
brandWarning: '#f0ad4e',
|
||||||
brandDark: "#000",
|
brandDark: '#000',
|
||||||
brandLight: "#f4f4f4",
|
brandLight: '#f4f4f4',
|
||||||
|
|
||||||
// Container
|
// Container
|
||||||
containerBgColor: "#fff",
|
containerBgColor: '#fff',
|
||||||
|
|
||||||
// Date Picker
|
// Date Picker
|
||||||
datePickerTextColor: "#000",
|
datePickerTextColor: '#000',
|
||||||
datePickerBg: "transparent",
|
datePickerBg: 'transparent',
|
||||||
|
|
||||||
|
// FAB
|
||||||
|
fabWidth: 56,
|
||||||
|
|
||||||
// Font
|
// Font
|
||||||
DefaultFontSize: 16,
|
DefaultFontSize: 16,
|
||||||
fontFamily: platform === "ios" ? "System" : "Roboto",
|
fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
|
||||||
fontSizeBase: 15,
|
fontSizeBase: 15,
|
||||||
get fontSizeH1() {
|
get fontSizeH1() {
|
||||||
return this.fontSizeBase * 1.8;
|
return this.fontSizeBase * 1.8;
|
||||||
|
@ -136,28 +164,28 @@ export default {
|
||||||
|
|
||||||
// Footer
|
// Footer
|
||||||
footerHeight: 55,
|
footerHeight: 55,
|
||||||
footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
|
footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
|
||||||
footerPaddingBottom: 0,
|
footerPaddingBottom: 0,
|
||||||
|
|
||||||
// FooterTab
|
// FooterTab
|
||||||
tabBarTextColor: platform === "ios" ? "#737373" : "#bfc6ea",
|
tabBarTextColor: platform === PLATFORM.IOS ? '#737373' : '#bfc6ea',
|
||||||
tabBarTextSize: platform === "ios" ? 14 : 11,
|
tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
|
||||||
activeTab: platform === "ios" ? "#007aff" : "#fff",
|
activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||||
sTabBarActiveTextColor: "#007aff",
|
sTabBarActiveTextColor: '#007aff',
|
||||||
tabBarActiveTextColor: platform === "ios" ? "#2874F0" : "#fff",
|
tabBarActiveTextColor: platform === PLATFORM.IOS ? '#2874F0' : '#fff',
|
||||||
tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
|
tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
|
||||||
|
|
||||||
// Header
|
// Header
|
||||||
toolbarBtnColor: platform === "ios" ? "#007aff" : "#fff",
|
toolbarBtnColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||||
toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
|
toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
|
||||||
toolbarHeight: platform === "ios" ? 64 : 56,
|
toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
|
||||||
toolbarSearchIconSize: platform === "ios" ? 20 : 23,
|
toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
|
||||||
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
|
toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
|
||||||
searchBarHeight: platform === "ios" ? 30 : 40,
|
searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
|
||||||
searchBarInputHeight: platform === "ios" ? 30 : 50,
|
searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
|
||||||
toolbarBtnTextColor: platform === "ios" ? "#007aff" : "#fff",
|
toolbarBtnTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||||
iosStatusbar: "dark-content",
|
iosStatusbar: 'dark-content',
|
||||||
toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#3F51B5",
|
toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
|
||||||
get statusBarColor() {
|
get statusBarColor() {
|
||||||
return color(this.toolbarDefaultBg)
|
return color(this.toolbarDefaultBg)
|
||||||
.darken(0.2)
|
.darken(0.2)
|
||||||
|
@ -170,95 +198,95 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
// Icon
|
// Icon
|
||||||
iconFamily: "Ionicons",
|
iconFamily: 'Ionicons',
|
||||||
iconFontSize: platform === "ios" ? 30 : 28,
|
iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
|
||||||
iconHeaderSize: platform === "ios" ? 33 : 24,
|
iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
|
||||||
|
|
||||||
// InputGroup
|
// InputGroup
|
||||||
inputFontSize: 17,
|
inputFontSize: 17,
|
||||||
inputBorderColor: "#D9D5DC",
|
inputBorderColor: '#D9D5DC',
|
||||||
inputSuccessBorderColor: "#2b8339",
|
inputSuccessBorderColor: '#2b8339',
|
||||||
inputErrorBorderColor: "#ed2f2f",
|
inputErrorBorderColor: '#ed2f2f',
|
||||||
inputHeightBase: 50,
|
inputHeightBase: 50,
|
||||||
get inputColor() {
|
get inputColor() {
|
||||||
return this.textColor;
|
return this.textColor;
|
||||||
},
|
},
|
||||||
get inputColorPlaceholder() {
|
get inputColorPlaceholder() {
|
||||||
return "#575757";
|
return '#575757';
|
||||||
},
|
},
|
||||||
|
|
||||||
// Line Height
|
// Line Height
|
||||||
btnLineHeight: 19,
|
buttonLineHeight: 19,
|
||||||
lineHeightH1: 32,
|
lineHeightH1: 32,
|
||||||
lineHeightH2: 27,
|
lineHeightH2: 27,
|
||||||
lineHeightH3: 22,
|
lineHeightH3: 22,
|
||||||
lineHeight: platform === "ios" ? 20 : 24,
|
lineHeight: platform === PLATFORM.IOS ? 20 : 24,
|
||||||
|
|
||||||
// List
|
// List
|
||||||
listBg: "transparent",
|
listBg: 'transparent',
|
||||||
listBorderColor: "#c9c9c9",
|
listBorderColor: '#c9c9c9',
|
||||||
listDividerBg: "#f4f4f4",
|
listDividerBg: '#f4f4f4',
|
||||||
listBtnUnderlayColor: "#DDD",
|
listBtnUnderlayColor: '#DDD',
|
||||||
listItemPadding: platform === "ios" ? 10 : 12,
|
listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
|
||||||
listNoteColor: "#808080",
|
listNoteColor: '#808080',
|
||||||
listNoteSize: 13,
|
listNoteSize: 13,
|
||||||
listItemSelected: platform === "ios" ? "#007aff" : "#3F51B5",
|
listItemSelected: platform === PLATFORM.IOS ? '#007aff' : '#3F51B5',
|
||||||
|
|
||||||
// Progress Bar
|
// Progress Bar
|
||||||
defaultProgressColor: "#E4202D",
|
defaultProgressColor: '#E4202D',
|
||||||
inverseProgressColor: "#1A191B",
|
inverseProgressColor: '#1A191B',
|
||||||
|
|
||||||
// Radio Button
|
// Radio Button
|
||||||
radioBtnSize: platform === "ios" ? 25 : 23,
|
radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
|
||||||
radioSelectedColorAndroid: "#3F51B5",
|
radioSelectedColorAndroid: '#3F51B5',
|
||||||
radioBtnLineHeight: platform === "ios" ? 29 : 24,
|
radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
|
||||||
get radioColor() {
|
get radioColor() {
|
||||||
return this.brandPrimary;
|
return this.brandPrimary;
|
||||||
},
|
},
|
||||||
|
|
||||||
// Segment
|
// Segment
|
||||||
segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
|
segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
|
||||||
segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
|
segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||||
segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
|
segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||||
segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
|
segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
|
||||||
segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
|
segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||||
segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
|
segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
|
||||||
|
|
||||||
// Spinner
|
// Spinner
|
||||||
defaultSpinnerColor: "#45D56E",
|
defaultSpinnerColor: '#45D56E',
|
||||||
inverseSpinnerColor: "#1A191B",
|
inverseSpinnerColor: '#1A191B',
|
||||||
|
|
||||||
// Tab
|
// Tab
|
||||||
tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#3F51B5",
|
tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
|
||||||
topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
|
topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
|
||||||
topTabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
|
topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||||
topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
|
topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff',
|
||||||
topTabBarActiveBorderColor: platform === "ios" ? "#007aff" : "#fff",
|
topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||||
|
|
||||||
// Tabs
|
// Tabs
|
||||||
tabBgColor: "#F8F8F8",
|
tabBgColor: '#F8F8F8',
|
||||||
tabFontSize: 15,
|
tabFontSize: 15,
|
||||||
|
|
||||||
// Text
|
// Text
|
||||||
textColor: "#000",
|
textColor: '#000',
|
||||||
inverseTextColor: "#fff",
|
inverseTextColor: '#fff',
|
||||||
noteFontSize: 14,
|
noteFontSize: 14,
|
||||||
get defaultTextColor() {
|
get defaultTextColor() {
|
||||||
return this.textColor;
|
return this.textColor;
|
||||||
},
|
},
|
||||||
|
|
||||||
// Title
|
// Title
|
||||||
titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
|
titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
|
||||||
titleFontSize: platform === "ios" ? 17 : 19,
|
titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
|
||||||
subTitleFontSize: platform === "ios" ? 11 : 14,
|
subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
|
||||||
subtitleColor: platform === "ios" ? "#000" : "#fff",
|
subtitleColor: platform === PLATFORM.IOS ? '#000' : '#fff',
|
||||||
titleFontColor: platform === "ios" ? "#000" : "#fff",
|
titleFontColor: platform === PLATFORM.IOS ? '#000' : '#fff',
|
||||||
|
|
||||||
// Other
|
// Other
|
||||||
borderRadiusBase: platform === "ios" ? 5 : 2,
|
borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
|
||||||
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
||||||
contentPadding: 10,
|
contentPadding: 10,
|
||||||
dropdownLinkColor: "#414142",
|
dropdownLinkColor: '#414142',
|
||||||
inputLineHeight: 24,
|
inputLineHeight: 24,
|
||||||
deviceWidth,
|
deviceWidth,
|
||||||
deviceHeight,
|
deviceHeight,
|
||||||
|
|
|
@ -1,79 +1,97 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import color from "color";
|
import color from 'color';
|
||||||
|
import { Platform, Dimensions, PixelRatio } from 'react-native';
|
||||||
|
|
||||||
import { Platform, Dimensions, PixelRatio } from "react-native";
|
import { PLATFORM } from './commonColor';
|
||||||
|
|
||||||
const deviceHeight = Dimensions.get("window").height;
|
const deviceHeight = Dimensions.get('window').height;
|
||||||
const deviceWidth = Dimensions.get("window").width;
|
const deviceWidth = Dimensions.get('window').width;
|
||||||
const platform = Platform.OS;
|
const platform = Platform.OS;
|
||||||
const platformStyle = "material";
|
const platformStyle = PLATFORM.MATERIAL;
|
||||||
const isIphoneX =
|
const isIphoneX =
|
||||||
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
|
platform === PLATFORM.IOS &&
|
||||||
|
(deviceHeight === 812 ||
|
||||||
|
deviceWidth === 812 ||
|
||||||
|
deviceHeight === 896 ||
|
||||||
|
deviceWidth === 896);
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
platformStyle,
|
platformStyle,
|
||||||
platform,
|
platform,
|
||||||
|
|
||||||
// Accordion
|
// Accordion
|
||||||
headerStyle: "#edebed",
|
headerStyle: '#edebed',
|
||||||
iconStyle: "#000",
|
iconStyle: '#000',
|
||||||
contentStyle: "#f5f4f5",
|
contentStyle: '#f5f4f5',
|
||||||
expandedIconStyle: "#000",
|
expandedIconStyle: '#000',
|
||||||
accordionBorderColor: "#d3d3d3",
|
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
|
// Android
|
||||||
androidRipple: true,
|
androidRipple: true,
|
||||||
androidRippleColor: "rgba(256, 256, 256, 0.3)",
|
androidRippleColor: 'rgba(256, 256, 256, 0.3)',
|
||||||
androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
|
androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
|
||||||
btnUppercaseAndroidText: true,
|
buttonUppercaseAndroidText: true,
|
||||||
|
|
||||||
// Badge
|
// Badge
|
||||||
badgeBg: "#ED1727",
|
badgeBg: '#ED1727',
|
||||||
badgeColor: "#fff",
|
badgeColor: '#fff',
|
||||||
badgePadding: 0,
|
badgePadding: 0,
|
||||||
|
|
||||||
// Button
|
// Button
|
||||||
btnFontFamily: "Roboto",
|
buttonFontFamily: 'Roboto',
|
||||||
btnDisabledBg: "#b5b5b5",
|
buttonDisabledBg: '#b5b5b5',
|
||||||
buttonPadding: 6,
|
buttonPadding: 6,
|
||||||
get btnPrimaryBg() {
|
get buttonPrimaryBg() {
|
||||||
return this.brandPrimary;
|
return this.brandPrimary;
|
||||||
},
|
},
|
||||||
get btnPrimaryColor() {
|
get buttonPrimaryColor() {
|
||||||
return this.inverseTextColor;
|
return this.inverseTextColor;
|
||||||
},
|
},
|
||||||
get btnInfoBg() {
|
get buttonInfoBg() {
|
||||||
return this.brandInfo;
|
return this.brandInfo;
|
||||||
},
|
},
|
||||||
get btnInfoColor() {
|
get buttonInfoColor() {
|
||||||
return this.inverseTextColor;
|
return this.inverseTextColor;
|
||||||
},
|
},
|
||||||
get btnSuccessBg() {
|
get buttonSuccessBg() {
|
||||||
return this.brandSuccess;
|
return this.brandSuccess;
|
||||||
},
|
},
|
||||||
get btnSuccessColor() {
|
get buttonSuccessColor() {
|
||||||
return this.inverseTextColor;
|
return this.inverseTextColor;
|
||||||
},
|
},
|
||||||
get btnDangerBg() {
|
get buttonDangerBg() {
|
||||||
return this.brandDanger;
|
return this.brandDanger;
|
||||||
},
|
},
|
||||||
get btnDangerColor() {
|
get buttonDangerColor() {
|
||||||
return this.inverseTextColor;
|
return this.inverseTextColor;
|
||||||
},
|
},
|
||||||
get btnWarningBg() {
|
get buttonWarningBg() {
|
||||||
return this.brandWarning;
|
return this.brandWarning;
|
||||||
},
|
},
|
||||||
get btnWarningColor() {
|
get buttonWarningColor() {
|
||||||
return this.inverseTextColor;
|
return this.inverseTextColor;
|
||||||
},
|
},
|
||||||
get btnTextSize() {
|
get buttonTextSize() {
|
||||||
return this.fontSizeBase - 1;
|
return this.fontSizeBase - 1;
|
||||||
},
|
},
|
||||||
get btnTextSizeLarge() {
|
get buttonTextSizeLarge() {
|
||||||
return this.fontSizeBase * 1.5;
|
return this.fontSizeBase * 1.5;
|
||||||
},
|
},
|
||||||
get btnTextSizeSmall() {
|
get buttonTextSizeSmall() {
|
||||||
return this.fontSizeBase * 0.8;
|
return this.fontSizeBase * 0.8;
|
||||||
},
|
},
|
||||||
get borderRadiusLarge() {
|
get borderRadiusLarge() {
|
||||||
|
@ -87,10 +105,10 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
// Card
|
// Card
|
||||||
cardDefaultBg: "#fff",
|
cardDefaultBg: '#fff',
|
||||||
cardBorderColor: "#ccc",
|
cardBorderColor: '#ccc',
|
||||||
cardBorderRadius: 2,
|
cardBorderRadius: 2,
|
||||||
cardItemPadding: platform === "ios" ? 10 : 12,
|
cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
|
||||||
|
|
||||||
// CheckBox
|
// CheckBox
|
||||||
CheckboxRadius: 0,
|
CheckboxRadius: 0,
|
||||||
|
@ -100,29 +118,32 @@ export default {
|
||||||
CheckboxIconSize: 16,
|
CheckboxIconSize: 16,
|
||||||
CheckboxIconMarginTop: 1,
|
CheckboxIconMarginTop: 1,
|
||||||
CheckboxFontSize: 17,
|
CheckboxFontSize: 17,
|
||||||
checkboxBgColor: "#039BE5",
|
checkboxBgColor: '#039BE5',
|
||||||
checkboxSize: 20,
|
checkboxSize: 20,
|
||||||
checkboxTickColor: "#fff",
|
checkboxTickColor: '#fff',
|
||||||
|
|
||||||
// Color
|
// Color
|
||||||
brandPrimary: "#3F51B5",
|
brandPrimary: '#3F51B5',
|
||||||
brandInfo: "#62B1F6",
|
brandInfo: '#62B1F6',
|
||||||
brandSuccess: "#5cb85c",
|
brandSuccess: '#5cb85c',
|
||||||
brandDanger: "#d9534f",
|
brandDanger: '#d9534f',
|
||||||
brandWarning: "#f0ad4e",
|
brandWarning: '#f0ad4e',
|
||||||
brandDark: "#000",
|
brandDark: '#000',
|
||||||
brandLight: "#f4f4f4",
|
brandLight: '#f4f4f4',
|
||||||
|
|
||||||
// Container
|
// Container
|
||||||
containerBgColor: "#fff",
|
containerBgColor: '#fff',
|
||||||
|
|
||||||
// Date Picker
|
// Date Picker
|
||||||
datePickerTextColor: "#000",
|
datePickerTextColor: '#000',
|
||||||
datePickerBg: "transparent",
|
datePickerBg: 'transparent',
|
||||||
|
|
||||||
|
// FAB
|
||||||
|
fabWidth: 56,
|
||||||
|
|
||||||
// Font
|
// Font
|
||||||
DefaultFontSize: 16,
|
DefaultFontSize: 16,
|
||||||
fontFamily: "Roboto",
|
fontFamily: 'Roboto',
|
||||||
fontSizeBase: 15,
|
fontSizeBase: 15,
|
||||||
get fontSizeH1() {
|
get fontSizeH1() {
|
||||||
return this.fontSizeBase * 1.8;
|
return this.fontSizeBase * 1.8;
|
||||||
|
@ -136,28 +157,28 @@ export default {
|
||||||
|
|
||||||
// Footer
|
// Footer
|
||||||
footerHeight: 55,
|
footerHeight: 55,
|
||||||
footerDefaultBg: "#3F51B5",
|
footerDefaultBg: '#3F51B5',
|
||||||
footerPaddingBottom: 0,
|
footerPaddingBottom: 0,
|
||||||
|
|
||||||
// FooterTab
|
// FooterTab
|
||||||
tabBarTextColor: "#bfc6ea",
|
tabBarTextColor: '#bfc6ea',
|
||||||
tabBarTextSize: 11,
|
tabBarTextSize: 11,
|
||||||
activeTab: "#fff",
|
activeTab: '#fff',
|
||||||
sTabBarActiveTextColor: "#007aff",
|
sTabBarActiveTextColor: '#007aff',
|
||||||
tabBarActiveTextColor: "#fff",
|
tabBarActiveTextColor: '#fff',
|
||||||
tabActiveBgColor: "#3F51B5",
|
tabActiveBgColor: '#3F51B5',
|
||||||
|
|
||||||
// Header
|
// Header
|
||||||
toolbarBtnColor: "#fff",
|
toolbarBtnColor: '#fff',
|
||||||
toolbarDefaultBg: "#3F51B5",
|
toolbarDefaultBg: '#3F51B5',
|
||||||
toolbarHeight: 56,
|
toolbarHeight: 56,
|
||||||
toolbarSearchIconSize: 23,
|
toolbarSearchIconSize: 23,
|
||||||
toolbarInputColor: "#fff",
|
toolbarInputColor: '#fff',
|
||||||
searchBarHeight: platform === "ios" ? 30 : 40,
|
searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
|
||||||
searchBarInputHeight: platform === "ios" ? 40 : 50,
|
searchBarInputHeight: platform === PLATFORM.IOS ? 40 : 50,
|
||||||
toolbarBtnTextColor: "#fff",
|
toolbarBtnTextColor: '#fff',
|
||||||
toolbarDefaultBorder: "#3F51B5",
|
toolbarDefaultBorder: '#3F51B5',
|
||||||
iosStatusbar: "light-content",
|
iosStatusbar: 'light-content',
|
||||||
get statusBarColor() {
|
get statusBarColor() {
|
||||||
return color(this.toolbarDefaultBg)
|
return color(this.toolbarDefaultBg)
|
||||||
.darken(0.2)
|
.darken(0.2)
|
||||||
|
@ -170,95 +191,95 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
// Icon
|
// Icon
|
||||||
iconFamily: "Ionicons",
|
iconFamily: 'Ionicons',
|
||||||
iconFontSize: 28,
|
iconFontSize: 28,
|
||||||
iconHeaderSize: 24,
|
iconHeaderSize: 24,
|
||||||
|
|
||||||
// InputGroup
|
// InputGroup
|
||||||
inputFontSize: 17,
|
inputFontSize: 17,
|
||||||
inputBorderColor: "#D9D5DC",
|
inputBorderColor: '#D9D5DC',
|
||||||
inputSuccessBorderColor: "#2b8339",
|
inputSuccessBorderColor: '#2b8339',
|
||||||
inputErrorBorderColor: "#ed2f2f",
|
inputErrorBorderColor: '#ed2f2f',
|
||||||
inputHeightBase: 50,
|
inputHeightBase: 50,
|
||||||
get inputColor() {
|
get inputColor() {
|
||||||
return this.textColor;
|
return this.textColor;
|
||||||
},
|
},
|
||||||
get inputColorPlaceholder() {
|
get inputColorPlaceholder() {
|
||||||
return "#575757";
|
return '#575757';
|
||||||
},
|
},
|
||||||
|
|
||||||
// Line Height
|
// Line Height
|
||||||
btnLineHeight: 19,
|
buttonLineHeight: 19,
|
||||||
lineHeightH1: 32,
|
lineHeightH1: 32,
|
||||||
lineHeightH2: 27,
|
lineHeightH2: 27,
|
||||||
lineHeightH3: 22,
|
lineHeightH3: 22,
|
||||||
lineHeight: 24,
|
lineHeight: 24,
|
||||||
|
|
||||||
// List
|
// List
|
||||||
listBg: "transparent",
|
listBg: 'transparent',
|
||||||
listBorderColor: "#c9c9c9",
|
listBorderColor: '#c9c9c9',
|
||||||
listDividerBg: "#f4f4f4",
|
listDividerBg: '#f4f4f4',
|
||||||
listBtnUnderlayColor: "#DDD",
|
listBtnUnderlayColor: '#DDD',
|
||||||
listItemPadding: 12,
|
listItemPadding: 12,
|
||||||
listNoteColor: "#808080",
|
listNoteColor: '#808080',
|
||||||
listNoteSize: 13,
|
listNoteSize: 13,
|
||||||
listItemSelected: "#3F51B5",
|
listItemSelected: '#3F51B5',
|
||||||
|
|
||||||
// Progress Bar
|
// Progress Bar
|
||||||
defaultProgressColor: "#E4202D",
|
defaultProgressColor: '#E4202D',
|
||||||
inverseProgressColor: "#1A191B",
|
inverseProgressColor: '#1A191B',
|
||||||
|
|
||||||
// Radio Button
|
// Radio Button
|
||||||
radioBtnSize: 23,
|
radioBtnSize: 23,
|
||||||
radioSelectedColorAndroid: "#3F51B5",
|
radioSelectedColorAndroid: '#3F51B5',
|
||||||
radioBtnLineHeight: 24,
|
radioBtnLineHeight: 24,
|
||||||
get radioColor() {
|
get radioColor() {
|
||||||
return this.brandPrimary;
|
return this.brandPrimary;
|
||||||
},
|
},
|
||||||
|
|
||||||
// Segment
|
// Segment
|
||||||
segmentBackgroundColor: "#3F51B5",
|
segmentBackgroundColor: '#3F51B5',
|
||||||
segmentActiveBackgroundColor: "#fff",
|
segmentActiveBackgroundColor: '#fff',
|
||||||
segmentTextColor: "#fff",
|
segmentTextColor: '#fff',
|
||||||
segmentActiveTextColor: "#3F51B5",
|
segmentActiveTextColor: '#3F51B5',
|
||||||
segmentBorderColor: "#fff",
|
segmentBorderColor: '#fff',
|
||||||
segmentBorderColorMain: "#3F51B5",
|
segmentBorderColorMain: '#3F51B5',
|
||||||
|
|
||||||
// Spinner
|
// Spinner
|
||||||
defaultSpinnerColor: "#45D56E",
|
defaultSpinnerColor: '#45D56E',
|
||||||
inverseSpinnerColor: "#1A191B",
|
inverseSpinnerColor: '#1A191B',
|
||||||
|
|
||||||
// Tab
|
// Tab
|
||||||
tabDefaultBg: "#3F51B5",
|
tabDefaultBg: '#3F51B5',
|
||||||
topTabBarTextColor: "#b3c7f9",
|
topTabBarTextColor: '#b3c7f9',
|
||||||
topTabBarActiveTextColor: "#fff",
|
topTabBarActiveTextColor: '#fff',
|
||||||
topTabBarBorderColor: "#fff",
|
topTabBarBorderColor: '#fff',
|
||||||
topTabBarActiveBorderColor: "#fff",
|
topTabBarActiveBorderColor: '#fff',
|
||||||
|
|
||||||
// Tabs
|
// Tabs
|
||||||
tabBgColor: "#F8F8F8",
|
tabBgColor: '#F8F8F8',
|
||||||
tabFontSize: 15,
|
tabFontSize: 15,
|
||||||
|
|
||||||
// Text
|
// Text
|
||||||
textColor: "#000",
|
textColor: '#000',
|
||||||
inverseTextColor: "#fff",
|
inverseTextColor: '#fff',
|
||||||
noteFontSize: 14,
|
noteFontSize: 14,
|
||||||
get defaultTextColor() {
|
get defaultTextColor() {
|
||||||
return this.textColor;
|
return this.textColor;
|
||||||
},
|
},
|
||||||
|
|
||||||
// Title
|
// Title
|
||||||
titleFontfamily: "Roboto",
|
titleFontfamily: 'Roboto',
|
||||||
titleFontSize: 19,
|
titleFontSize: 19,
|
||||||
subTitleFontSize: 14,
|
subTitleFontSize: 14,
|
||||||
subtitleColor: "#FFF",
|
subtitleColor: '#FFF',
|
||||||
titleFontColor: "#FFF",
|
titleFontColor: '#FFF',
|
||||||
|
|
||||||
// Other
|
// Other
|
||||||
borderRadiusBase: 2,
|
borderRadiusBase: 2,
|
||||||
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
||||||
contentPadding: 10,
|
contentPadding: 10,
|
||||||
dropdownLinkColor: "#414142",
|
dropdownLinkColor: '#414142',
|
||||||
inputLineHeight: 24,
|
inputLineHeight: 24,
|
||||||
deviceWidth,
|
deviceWidth,
|
||||||
deviceHeight,
|
deviceHeight,
|
||||||
|
|
|
@ -1,80 +1,106 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import color from "color";
|
import color from 'color';
|
||||||
|
import { Platform, Dimensions, PixelRatio } from 'react-native';
|
||||||
|
|
||||||
import {Dimensions, PixelRatio, Platform} from "react-native";
|
import { PLATFORM } from './commonColor';
|
||||||
|
|
||||||
const deviceHeight = Dimensions.get("window").height;
|
const deviceHeight = Dimensions.get('window').height;
|
||||||
const deviceWidth = Dimensions.get("window").width;
|
const deviceWidth = Dimensions.get('window').width;
|
||||||
const platform = Platform.OS;
|
const platform = Platform.OS;
|
||||||
const platformStyle = undefined;
|
const platformStyle = undefined;
|
||||||
const isIphoneX =
|
const isIphoneX =
|
||||||
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
|
platform === PLATFORM.IOS &&
|
||||||
|
(deviceHeight === 812 ||
|
||||||
|
deviceWidth === 812 ||
|
||||||
|
deviceHeight === 896 ||
|
||||||
|
deviceWidth === 896);
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
platformStyle,
|
platformStyle,
|
||||||
platform,
|
platform,
|
||||||
|
|
||||||
// Accordion
|
// Accordion
|
||||||
headerStyle: "#edebed",
|
accordionBorderColor: '#d3d3d3',
|
||||||
iconStyle: "#000",
|
accordionContentPadding: 10,
|
||||||
contentStyle: "#f5f4f5",
|
accordionIconFontSize: 18,
|
||||||
expandedIconStyle: "#000",
|
contentStyle: '#f5f4f5',
|
||||||
accordionBorderColor: "#d3d3d3",
|
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
|
// Android
|
||||||
androidRipple: true,
|
androidRipple: true,
|
||||||
androidRippleColor: "rgba(256, 256, 256, 0.3)",
|
androidRippleColor: 'rgba(256, 256, 256, 0.3)',
|
||||||
androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
|
androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
|
||||||
btnUppercaseAndroidText: true,
|
buttonUppercaseAndroidText: true,
|
||||||
|
|
||||||
// Badge
|
// Badge
|
||||||
badgeBg: "#ED1727",
|
badgeBg: '#ED1727',
|
||||||
badgeColor: "#fff",
|
badgeColor: '#fff',
|
||||||
badgePadding: platform === "ios" ? 3 : 0,
|
badgePadding: platform === PLATFORM.IOS ? 3 : 0,
|
||||||
|
|
||||||
// Button
|
// Button
|
||||||
btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
|
buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
|
||||||
btnTextColor: '#fff',
|
buttonTextColor: '#fff',
|
||||||
btnDisabledBg: "#b5b5b5",
|
buttonDisabledBg: '#b5b5b5',
|
||||||
buttonPadding: 6,
|
buttonPadding: 6,
|
||||||
get btnPrimaryBg() {
|
buttonDefaultActiveOpacity: 0.5,
|
||||||
|
buttonDefaultFlex: 1,
|
||||||
|
buttonDefaultBorderRadius: 2,
|
||||||
|
buttonDefaultBorderWidth: 1,
|
||||||
|
get buttonPrimaryBg() {
|
||||||
return this.brandPrimary;
|
return this.brandPrimary;
|
||||||
},
|
},
|
||||||
get btnPrimaryColor() {
|
get buttonPrimaryColor() {
|
||||||
return this.inverseTextColor;
|
return this.inverseTextColor;
|
||||||
},
|
},
|
||||||
get btnInfoBg() {
|
get buttonInfoBg() {
|
||||||
return this.brandInfo;
|
return this.brandInfo;
|
||||||
},
|
},
|
||||||
get btnInfoColor() {
|
get buttonInfoColor() {
|
||||||
return this.inverseTextColor;
|
return this.inverseTextColor;
|
||||||
},
|
},
|
||||||
get btnSuccessBg() {
|
get buttonSuccessBg() {
|
||||||
return this.brandSuccess;
|
return this.brandSuccess;
|
||||||
},
|
},
|
||||||
get btnSuccessColor() {
|
get buttonSuccessColor() {
|
||||||
return this.inverseTextColor;
|
return this.inverseTextColor;
|
||||||
},
|
},
|
||||||
get btnDangerBg() {
|
get buttonDangerBg() {
|
||||||
return this.brandDanger;
|
return this.brandDanger;
|
||||||
},
|
},
|
||||||
get btnDangerColor() {
|
get buttonDangerColor() {
|
||||||
return this.inverseTextColor;
|
return this.inverseTextColor;
|
||||||
},
|
},
|
||||||
get btnWarningBg() {
|
get buttonWarningBg() {
|
||||||
return this.brandWarning;
|
return this.brandWarning;
|
||||||
},
|
},
|
||||||
get btnWarningColor() {
|
get buttonWarningColor() {
|
||||||
return this.inverseTextColor;
|
return this.inverseTextColor;
|
||||||
},
|
},
|
||||||
get btnTextSize() {
|
get buttonTextSize() {
|
||||||
return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
|
return platform === PLATFORM.IOS
|
||||||
|
? this.fontSizeBase * 1.1
|
||||||
|
: this.fontSizeBase - 1;
|
||||||
},
|
},
|
||||||
get btnTextSizeLarge() {
|
get buttonTextSizeLarge() {
|
||||||
return this.fontSizeBase * 1.5;
|
return this.fontSizeBase * 1.5;
|
||||||
},
|
},
|
||||||
get btnTextSizeSmall() {
|
get buttonTextSizeSmall() {
|
||||||
return this.fontSizeBase * 0.8;
|
return this.fontSizeBase * 0.8;
|
||||||
},
|
},
|
||||||
get borderRadiusLarge() {
|
get borderRadiusLarge() {
|
||||||
|
@ -88,42 +114,67 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
// Card
|
// Card
|
||||||
cardDefaultBg: "#fff",
|
cardDefaultBg: '#fff',
|
||||||
cardBorderColor: "#ccc",
|
cardBorderColor: '#ccc',
|
||||||
cardBorderRadius: 2,
|
cardBorderRadius: 2,
|
||||||
cardItemPadding: platform === "ios" ? 10 : 12,
|
cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
|
||||||
|
|
||||||
// CheckBox
|
// CheckBox
|
||||||
CheckboxRadius: platform === "ios" ? 13 : 0,
|
CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
|
||||||
CheckboxBorderWidth: platform === "ios" ? 1 : 2,
|
CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
|
||||||
CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
|
CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
|
||||||
CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
|
CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
|
||||||
CheckboxIconSize: platform === "ios" ? 21 : 16,
|
CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
|
||||||
CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
|
CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
|
||||||
CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
|
CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
|
||||||
checkboxBgColor: "#be1522",
|
checkboxBgColor: '#be1522',
|
||||||
checkboxSize: 20,
|
checkboxSize: 20,
|
||||||
checkboxTickColor: "#fff",
|
checkboxTickColor: '#fff',
|
||||||
|
checkboxDefaultColor: 'transparent',
|
||||||
|
checkboxTextShadowRadius: 0,
|
||||||
|
|
||||||
// Color
|
// Color
|
||||||
brandPrimary: "#be1522",
|
brandPrimary: '#be1522',
|
||||||
brandInfo: "#62B1F6",
|
brandInfo: '#62B1F6',
|
||||||
brandSuccess: "#5cb85c",
|
brandSuccess: '#5cb85c',
|
||||||
brandDanger: "#d9534f",
|
brandDanger: '#d9534f',
|
||||||
brandWarning: "#f0ad4e",
|
brandWarning: '#f0ad4e',
|
||||||
brandDark: "#000",
|
brandDark: '#000',
|
||||||
brandLight: "#f4f4f4",
|
brandLight: '#f4f4f4',
|
||||||
|
|
||||||
// Container
|
// Container
|
||||||
containerBgColor: "#fff",
|
containerBgColor: '#fff',
|
||||||
sideMenuBgColor: "#f2f2f2",
|
sideMenuBgColor: "#f2f2f2",
|
||||||
|
|
||||||
// Date Picker
|
// Date Picker
|
||||||
datePickerTextColor: "#000",
|
datePickerFlex: 1,
|
||||||
datePickerBg: "transparent",
|
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
|
// Font
|
||||||
DefaultFontSize: 16,
|
DefaultFontSize: 16,
|
||||||
fontFamily: platform === "ios" ? "System" : "Roboto",
|
fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
|
||||||
fontSizeBase: 15,
|
fontSizeBase: 15,
|
||||||
get fontSizeH1() {
|
get fontSizeH1() {
|
||||||
return this.fontSizeBase * 1.8;
|
return this.fontSizeBase * 1.8;
|
||||||
|
@ -137,28 +188,28 @@ export default {
|
||||||
|
|
||||||
// Footer
|
// Footer
|
||||||
footerHeight: 55,
|
footerHeight: 55,
|
||||||
footerDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
|
footerDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
|
||||||
footerPaddingBottom: 0,
|
footerPaddingBottom: 0,
|
||||||
|
|
||||||
// FooterTab
|
// FooterTab
|
||||||
tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
|
tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
|
||||||
tabBarTextSize: platform === "ios" ? 14 : 11,
|
tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
|
||||||
activeTab: platform === "ios" ? "#007aff" : "#fff",
|
activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||||
sTabBarActiveTextColor: "#007aff",
|
sTabBarActiveTextColor: '#007aff',
|
||||||
tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
|
tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||||
tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
|
tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
|
||||||
|
|
||||||
// Header
|
// Header
|
||||||
toolbarBtnColor: platform === "ios" ? "#be1522" : "#fff",
|
toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
|
||||||
toolbarDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
|
toolbarDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
|
||||||
toolbarHeight: platform === "ios" ? 64 : 56,
|
toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
|
||||||
toolbarSearchIconSize: platform === "ios" ? 20 : 23,
|
toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
|
||||||
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
|
toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
|
||||||
searchBarHeight: platform === "ios" ? 30 : 40,
|
searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
|
||||||
searchBarInputHeight: platform === "ios" ? 30 : 50,
|
searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
|
||||||
toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff",
|
toolbarBtnTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
|
||||||
toolbarDefaultBorder: platform === "ios" ? "#a7a6ab" : "#ba1f0f",
|
toolbarDefaultBorder: platform === PLATFORM.IOS ? '#a7a6ab' : '#be1522',
|
||||||
iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
|
iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content',
|
||||||
get statusBarColor() {
|
get statusBarColor() {
|
||||||
return color(this.toolbarDefaultBg)
|
return color(this.toolbarDefaultBg)
|
||||||
.darken(0.2)
|
.darken(0.2)
|
||||||
|
@ -171,92 +222,92 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
// Icon
|
// Icon
|
||||||
iconFamily: "Ionicons",
|
iconFamily: 'Ionicons',
|
||||||
iconFontSize: platform === "ios" ? 30 : 28,
|
iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
|
||||||
iconHeaderSize: platform === "ios" ? 33 : 24,
|
iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
|
||||||
|
|
||||||
// InputGroup
|
// InputGroup
|
||||||
inputFontSize: 17,
|
inputFontSize: 17,
|
||||||
inputBorderColor: "#D9D5DC",
|
inputBorderColor: '#D9D5DC',
|
||||||
inputSuccessBorderColor: "#2b8339",
|
inputSuccessBorderColor: '#2b8339',
|
||||||
inputErrorBorderColor: "#ed2f2f",
|
inputErrorBorderColor: '#ed2f2f',
|
||||||
inputHeightBase: 50,
|
inputHeightBase: 50,
|
||||||
get inputColor() {
|
get inputColor() {
|
||||||
return this.textColor;
|
return this.textColor;
|
||||||
},
|
},
|
||||||
get inputColorPlaceholder() {
|
get inputColorPlaceholder() {
|
||||||
return "#575757";
|
return '#575757';
|
||||||
},
|
},
|
||||||
|
|
||||||
// Line Height
|
// Line Height
|
||||||
btnLineHeight: 19,
|
buttonLineHeight: 19,
|
||||||
lineHeightH1: 32,
|
lineHeightH1: 32,
|
||||||
lineHeightH2: 27,
|
lineHeightH2: 27,
|
||||||
lineHeightH3: 22,
|
lineHeightH3: 22,
|
||||||
lineHeight: platform === "ios" ? 20 : 24,
|
lineHeight: platform === PLATFORM.IOS ? 20 : 24,
|
||||||
listItemSelected: platform === "ios" ? "#be1522" : "#be1522",
|
listItemSelected: '#be1522',
|
||||||
|
|
||||||
// List
|
// List
|
||||||
listBg: "transparent",
|
listBg: 'transparent',
|
||||||
listBorderColor: "#c9c9c9",
|
listBorderColor: '#c9c9c9',
|
||||||
listDividerBg: "#f4f4f4",
|
listDividerBg: '#f4f4f4',
|
||||||
listBtnUnderlayColor: "#DDD",
|
listBtnUnderlayColor: '#DDD',
|
||||||
listItemPadding: platform === "ios" ? 10 : 12,
|
listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
|
||||||
listNoteColor: "#808080",
|
listNoteColor: '#808080',
|
||||||
listNoteSize: 13,
|
listNoteSize: 13,
|
||||||
|
|
||||||
// Progress Bar
|
// Progress Bar
|
||||||
defaultProgressColor: "#E4202D",
|
defaultProgressColor: '#E4202D',
|
||||||
inverseProgressColor: "#1A191B",
|
inverseProgressColor: '#1A191B',
|
||||||
|
|
||||||
// Radio Button
|
// Radio Button
|
||||||
radioBtnSize: platform === "ios" ? 25 : 23,
|
radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
|
||||||
radioSelectedColorAndroid: "#E4202D",
|
radioSelectedColorAndroid: '#be1522',
|
||||||
radioBtnLineHeight: platform === "ios" ? 29 : 24,
|
radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
|
||||||
get radioColor() {
|
get radioColor() {
|
||||||
return this.brandPrimary;
|
return this.brandPrimary;
|
||||||
},
|
},
|
||||||
|
|
||||||
// Segment
|
// Segment
|
||||||
segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
|
segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
|
||||||
segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
|
segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||||
segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
|
segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||||
segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
|
segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
|
||||||
segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
|
segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||||
segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
|
segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
|
||||||
|
|
||||||
// Spinner
|
// Spinner
|
||||||
defaultSpinnerColor: "#be1522",
|
defaultSpinnerColor: '#be1522',
|
||||||
inverseSpinnerColor: "#1A191B",
|
inverseSpinnerColor: '#1A191B',
|
||||||
|
|
||||||
// Tab
|
// Tab
|
||||||
tabDefaultBg: platform === "ios" ? "#F8F8F8" : "#be1522",
|
tabBarDisabledTextColor: '#BDBDBD',
|
||||||
topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
|
tabDefaultBg: platform === PLATFORM.IOS ? '#F8F8F8' : '#be1522',
|
||||||
topTabBarActiveTextColor: platform === "ios" ? "#be1522" : "#fff",
|
topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
|
||||||
topTabBarBorderColor: platform === "ios" ? "#a7a6ab" : "#fff",
|
topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
|
||||||
topTabBarActiveBorderColor: platform === "ios" ? "#be1522" : "#fff",
|
topTabBarBorderColor: platform === PLATFORM.IOS ? '#a7a6ab' : '#fff',
|
||||||
|
topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
|
||||||
|
|
||||||
// Tabs
|
// Tabs
|
||||||
tabBgColor: "#F8F8F8",
|
tabBgColor: '#F8F8F8',
|
||||||
tabIconColor: platform === "ios" ? "#5d5d5d" : "#fff",
|
tabIconColor: platform === "ios" ? "#5d5d5d" : "#fff",
|
||||||
tabFontSize: 15,
|
tabFontSize: 15,
|
||||||
|
|
||||||
// Text
|
// Text
|
||||||
textColor: "#000",
|
textColor: '#000',
|
||||||
textDisabledColor: "#c1c1c1",
|
textDisabledColor: "#c1c1c1",
|
||||||
inverseTextColor: "#fff",
|
inverseTextColor: '#fff',
|
||||||
noteFontSize: 14,
|
noteFontSize: 14,
|
||||||
get defaultTextColor() {
|
get defaultTextColor() {
|
||||||
return this.textColor;
|
return this.textColor;
|
||||||
},
|
},
|
||||||
|
|
||||||
// Title
|
// Title
|
||||||
titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
|
titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
|
||||||
titleFontSize: platform === "ios" ? 17 : 19,
|
titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
|
||||||
subTitleFontSize: platform === "ios" ? 11 : 14,
|
subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
|
||||||
subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
|
subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF',
|
||||||
titleFontColor: platform === "ios" ? "#000" : "#FFF",
|
titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF',
|
||||||
|
|
||||||
|
|
||||||
// CUSTOM
|
// CUSTOM
|
||||||
customMaterialIconColor: "#5d5d5d",
|
customMaterialIconColor: "#5d5d5d",
|
||||||
|
@ -282,10 +333,10 @@ export default {
|
||||||
|
|
||||||
|
|
||||||
// Other
|
// Other
|
||||||
borderRadiusBase: platform === "ios" ? 5 : 2,
|
borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
|
||||||
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
||||||
contentPadding: 10,
|
contentPadding: 10,
|
||||||
dropdownLinkColor: "#414142",
|
dropdownLinkColor: '#414142',
|
||||||
inputLineHeight: 24,
|
inputLineHeight: 24,
|
||||||
deviceWidth,
|
deviceWidth,
|
||||||
deviceHeight,
|
deviceHeight,
|
||||||
|
|
|
@ -1,80 +1,106 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import color from "color";
|
import color from 'color';
|
||||||
|
import { Platform, Dimensions, PixelRatio } from 'react-native';
|
||||||
|
|
||||||
import {Dimensions, PixelRatio, Platform} from "react-native";
|
import { PLATFORM } from './commonColor';
|
||||||
|
|
||||||
const deviceHeight = Dimensions.get("window").height;
|
const deviceHeight = Dimensions.get('window').height;
|
||||||
const deviceWidth = Dimensions.get("window").width;
|
const deviceWidth = Dimensions.get('window').width;
|
||||||
const platform = Platform.OS;
|
const platform = Platform.OS;
|
||||||
const platformStyle = undefined;
|
const platformStyle = undefined;
|
||||||
const isIphoneX =
|
const isIphoneX =
|
||||||
platform === "ios" && (deviceHeight === 812 || deviceWidth === 812 || deviceHeight === 896 || deviceWidth === 896);
|
platform === PLATFORM.IOS &&
|
||||||
|
(deviceHeight === 812 ||
|
||||||
|
deviceWidth === 812 ||
|
||||||
|
deviceHeight === 896 ||
|
||||||
|
deviceWidth === 896);
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
platformStyle,
|
platformStyle,
|
||||||
platform,
|
platform,
|
||||||
|
|
||||||
// Accordion
|
// Accordion
|
||||||
headerStyle: "#edebed",
|
accordionBorderColor: '#d3d3d3',
|
||||||
iconStyle: "#000",
|
accordionContentPadding: 10,
|
||||||
contentStyle: "#f5f4f5",
|
accordionIconFontSize: 18,
|
||||||
expandedIconStyle: "#000",
|
contentStyle: '#f5f4f5',
|
||||||
accordionBorderColor: "#d3d3d3",
|
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
|
// Android
|
||||||
androidRipple: true,
|
androidRipple: true,
|
||||||
androidRippleColor: "rgba(256, 256, 256, 0.3)",
|
androidRippleColor: 'rgba(256, 256, 256, 0.3)',
|
||||||
androidRippleColorDark: "rgba(0, 0, 0, 0.15)",
|
androidRippleColorDark: 'rgba(0, 0, 0, 0.15)',
|
||||||
btnUppercaseAndroidText: true,
|
buttonUppercaseAndroidText: true,
|
||||||
|
|
||||||
// Badge
|
// Badge
|
||||||
badgeBg: "#ED1727",
|
badgeBg: '#ED1727',
|
||||||
badgeColor: "#fff",
|
badgeColor: '#fff',
|
||||||
badgePadding: platform === "ios" ? 3 : 0,
|
badgePadding: platform === PLATFORM.IOS ? 3 : 0,
|
||||||
|
|
||||||
// Button
|
// Button
|
||||||
btnFontFamily: platform === "ios" ? "System" : "Roboto_medium",
|
buttonFontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
|
||||||
btnTextColor: '#fff',
|
buttonTextColor: '#fff',
|
||||||
btnDisabledBg: "#b5b5b5",
|
buttonDisabledBg: '#b5b5b5',
|
||||||
buttonPadding: 6,
|
buttonPadding: 6,
|
||||||
get btnPrimaryBg() {
|
buttonDefaultActiveOpacity: 0.5,
|
||||||
|
buttonDefaultFlex: 1,
|
||||||
|
buttonDefaultBorderRadius: 2,
|
||||||
|
buttonDefaultBorderWidth: 1,
|
||||||
|
get buttonPrimaryBg() {
|
||||||
return this.brandPrimary;
|
return this.brandPrimary;
|
||||||
},
|
},
|
||||||
get btnPrimaryColor() {
|
get buttonPrimaryColor() {
|
||||||
return this.textColor;
|
return this.textColor;
|
||||||
},
|
},
|
||||||
get btnInfoBg() {
|
get buttonInfoBg() {
|
||||||
return this.brandInfo;
|
return this.brandInfo;
|
||||||
},
|
},
|
||||||
get btnInfoColor() {
|
get buttonInfoColor() {
|
||||||
return this.textColor;
|
return this.textColor;
|
||||||
},
|
},
|
||||||
get btnSuccessBg() {
|
get buttonSuccessBg() {
|
||||||
return this.brandSuccess;
|
return this.brandSuccess;
|
||||||
},
|
},
|
||||||
get btnSuccessColor() {
|
get buttonSuccessColor() {
|
||||||
return this.textColor;
|
return this.textColor;
|
||||||
},
|
},
|
||||||
get btnDangerBg() {
|
get buttonDangerBg() {
|
||||||
return this.brandDanger;
|
return this.brandDanger;
|
||||||
},
|
},
|
||||||
get btnDangerColor() {
|
get buttonDangerColor() {
|
||||||
return this.textColor;
|
return this.textColor;
|
||||||
},
|
},
|
||||||
get btnWarningBg() {
|
get buttonWarningBg() {
|
||||||
return this.brandWarning;
|
return this.brandWarning;
|
||||||
},
|
},
|
||||||
get btnWarningColor() {
|
get buttonWarningColor() {
|
||||||
return this.textColor;
|
return this.textColor;
|
||||||
},
|
},
|
||||||
get btnTextSize() {
|
get buttonTextSize() {
|
||||||
return platform === "ios" ? this.fontSizeBase * 1.1 : this.fontSizeBase - 1;
|
return platform === PLATFORM.IOS
|
||||||
|
? this.fontSizeBase * 1.1
|
||||||
|
: this.fontSizeBase - 1;
|
||||||
},
|
},
|
||||||
get btnTextSizeLarge() {
|
get buttonTextSizeLarge() {
|
||||||
return this.fontSizeBase * 1.5;
|
return this.fontSizeBase * 1.5;
|
||||||
},
|
},
|
||||||
get btnTextSizeSmall() {
|
get buttonTextSizeSmall() {
|
||||||
return this.fontSizeBase * 0.8;
|
return this.fontSizeBase * 0.8;
|
||||||
},
|
},
|
||||||
get borderRadiusLarge() {
|
get borderRadiusLarge() {
|
||||||
|
@ -88,43 +114,67 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
// Card
|
// Card
|
||||||
cardDefaultBg: "#2A2A2A",
|
cardDefaultBg: '#2A2A2A',
|
||||||
cardBorderColor: "#1a1a1a",
|
cardBorderColor: '#1a1a1a',
|
||||||
cardBorderRadius: 2,
|
cardBorderRadius: 2,
|
||||||
cardItemPadding: platform === "ios" ? 10 : 12,
|
cardItemPadding: platform === PLATFORM.IOS ? 10 : 12,
|
||||||
|
|
||||||
// CheckBox
|
// CheckBox
|
||||||
CheckboxRadius: platform === "ios" ? 13 : 0,
|
CheckboxRadius: platform === PLATFORM.IOS ? 13 : 0,
|
||||||
CheckboxBorderWidth: platform === "ios" ? 1 : 2,
|
CheckboxBorderWidth: platform === PLATFORM.IOS ? 1 : 2,
|
||||||
CheckboxPaddingLeft: platform === "ios" ? 4 : 2,
|
CheckboxPaddingLeft: platform === PLATFORM.IOS ? 4 : 2,
|
||||||
CheckboxPaddingBottom: platform === "ios" ? 0 : 5,
|
CheckboxPaddingBottom: platform === PLATFORM.IOS ? 0 : 5,
|
||||||
CheckboxIconSize: platform === "ios" ? 21 : 16,
|
CheckboxIconSize: platform === PLATFORM.IOS ? 21 : 16,
|
||||||
CheckboxIconMarginTop: platform === "ios" ? undefined : 1,
|
CheckboxIconMarginTop: platform === PLATFORM.IOS ? undefined : 1,
|
||||||
CheckboxFontSize: platform === "ios" ? 23 / 0.9 : 17,
|
CheckboxFontSize: platform === PLATFORM.IOS ? 23 / 0.9 : 17,
|
||||||
checkboxBgColor: "#E4202D",
|
checkboxBgColor: '#be1522',
|
||||||
checkboxSize: 20,
|
checkboxSize: 20,
|
||||||
checkboxTickColor: "#fff",
|
checkboxTickColor: '#fff',
|
||||||
|
checkboxDefaultColor: 'transparent',
|
||||||
|
checkboxTextShadowRadius: 0,
|
||||||
|
|
||||||
// Color
|
// Color
|
||||||
brandPrimary: "#be1522",
|
brandPrimary: '#be1522',
|
||||||
brandInfo: "#62B1F6",
|
brandInfo: '#62B1F6',
|
||||||
brandSuccess: "#5cb85c",
|
brandSuccess: '#5cb85c',
|
||||||
brandDanger: "#d9534f",
|
brandDanger: '#d9534f',
|
||||||
brandWarning: "#f0ad4e",
|
brandWarning: '#f0ad4e',
|
||||||
brandDark: "#000",
|
brandDark: '#000',
|
||||||
brandLight: "#f4f4f4",
|
brandLight: '#f4f4f4',
|
||||||
|
|
||||||
// Container
|
// Container
|
||||||
containerBgColor: "#222222",
|
containerBgColor: '#222222',
|
||||||
sideMenuBgColor: "#1c1c1c",
|
sideMenuBgColor: "#1c1c1c",
|
||||||
|
|
||||||
// Date Picker
|
// Date Picker
|
||||||
datePickerTextColor: "#fff",
|
datePickerFlex: 1,
|
||||||
datePickerBg: "transparent",
|
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
|
// Font
|
||||||
DefaultFontSize: 16,
|
DefaultFontSize: 16,
|
||||||
fontFamily: platform === "ios" ? "System" : "Roboto",
|
fontFamily: platform === PLATFORM.IOS ? 'System' : 'Roboto',
|
||||||
fontSizeBase: 15,
|
fontSizeBase: 15,
|
||||||
get fontSizeH1() {
|
get fontSizeH1() {
|
||||||
return this.fontSizeBase * 1.8;
|
return this.fontSizeBase * 1.8;
|
||||||
|
@ -138,28 +188,28 @@ export default {
|
||||||
|
|
||||||
// Footer
|
// Footer
|
||||||
footerHeight: 55,
|
footerHeight: 55,
|
||||||
footerDefaultBg: platform === "ios" ? "#333333" : "#be1522",
|
footerDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
|
||||||
footerPaddingBottom: 0,
|
footerPaddingBottom: 0,
|
||||||
|
|
||||||
// FooterTab
|
// FooterTab
|
||||||
tabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
|
tabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
|
||||||
tabBarTextSize: platform === "ios" ? 14 : 11,
|
tabBarTextSize: platform === PLATFORM.IOS ? 14 : 11,
|
||||||
activeTab: platform === "ios" ? "#007aff" : "#fff",
|
activeTab: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||||
sTabBarActiveTextColor: "#007aff",
|
sTabBarActiveTextColor: '#007aff',
|
||||||
tabBarActiveTextColor: platform === "ios" ? "#007aff" : "#fff",
|
tabBarActiveTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||||
tabActiveBgColor: platform === "ios" ? "#cde1f9" : "#3F51B5",
|
tabActiveBgColor: platform === PLATFORM.IOS ? '#cde1f9' : '#3F51B5',
|
||||||
|
|
||||||
// Header
|
// Header
|
||||||
toolbarBtnColor: platform === "ios" ? "#be1522" : "#fff",
|
toolbarBtnColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
|
||||||
toolbarDefaultBg: platform === "ios" ? "#333333" : "#be1522",
|
toolbarDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
|
||||||
toolbarHeight: platform === "ios" ? 64 : 56,
|
toolbarHeight: platform === PLATFORM.IOS ? 64 : 56,
|
||||||
toolbarSearchIconSize: platform === "ios" ? 20 : 23,
|
toolbarSearchIconSize: platform === PLATFORM.IOS ? 20 : 23,
|
||||||
toolbarInputColor: platform === "ios" ? "#CECDD2" : "#fff",
|
toolbarInputColor: platform === PLATFORM.IOS ? '#CECDD2' : '#fff',
|
||||||
searchBarHeight: platform === "ios" ? 30 : 40,
|
searchBarHeight: platform === PLATFORM.IOS ? 30 : 40,
|
||||||
searchBarInputHeight: platform === "ios" ? 30 : 50,
|
searchBarInputHeight: platform === PLATFORM.IOS ? 30 : 50,
|
||||||
toolbarBtnTextColor: platform === "ios" ? "#be1522" : "#fff",
|
toolbarBtnTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
|
||||||
toolbarDefaultBorder: platform === "ios" ? "#3f3f3f" : "#ba1f0f",
|
toolbarDefaultBorder: platform === PLATFORM.IOS ? '#3f3f3f' : '#be1522',
|
||||||
iosStatusbar: platform === "ios" ? "dark-content" : "light-content",
|
iosStatusbar: platform === PLATFORM.IOS ? 'dark-content' : 'light-content',
|
||||||
get statusBarColor() {
|
get statusBarColor() {
|
||||||
return color(this.toolbarDefaultBg)
|
return color(this.toolbarDefaultBg)
|
||||||
.darken(0.2)
|
.darken(0.2)
|
||||||
|
@ -172,92 +222,92 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
// Icon
|
// Icon
|
||||||
iconFamily: "Ionicons",
|
iconFamily: 'Ionicons',
|
||||||
iconFontSize: platform === "ios" ? 30 : 28,
|
iconFontSize: platform === PLATFORM.IOS ? 30 : 28,
|
||||||
iconHeaderSize: platform === "ios" ? 33 : 24,
|
iconHeaderSize: platform === PLATFORM.IOS ? 33 : 24,
|
||||||
|
|
||||||
// InputGroup
|
// InputGroup
|
||||||
inputFontSize: 17,
|
inputFontSize: 17,
|
||||||
inputBorderColor: "#D9D5DC",
|
inputBorderColor: '#D9D5DC',
|
||||||
inputSuccessBorderColor: "#2b8339",
|
inputSuccessBorderColor: '#2b8339',
|
||||||
inputErrorBorderColor: "#ed2f2f",
|
inputErrorBorderColor: '#ed2f2f',
|
||||||
inputHeightBase: 50,
|
inputHeightBase: 50,
|
||||||
get inputColor() {
|
get inputColor() {
|
||||||
return this.textColor;
|
return this.textColor;
|
||||||
},
|
},
|
||||||
get inputColorPlaceholder() {
|
get inputColorPlaceholder() {
|
||||||
return "#575757";
|
return '#575757';
|
||||||
},
|
},
|
||||||
|
|
||||||
// Line Height
|
// Line Height
|
||||||
btnLineHeight: 19,
|
buttonLineHeight: 19,
|
||||||
lineHeightH1: 32,
|
lineHeightH1: 32,
|
||||||
lineHeightH2: 27,
|
lineHeightH2: 27,
|
||||||
lineHeightH3: 22,
|
lineHeightH3: 22,
|
||||||
lineHeight: platform === "ios" ? 20 : 24,
|
lineHeight: platform === PLATFORM.IOS ? 20 : 24,
|
||||||
listItemSelected: "#be1522",
|
listItemSelected: '#be1522',
|
||||||
|
|
||||||
// List
|
// List
|
||||||
listBg: "transparent",
|
listBg: 'transparent',
|
||||||
listBorderColor: "#3e3e3e",
|
listBorderColor: '#3e3e3e',
|
||||||
listDividerBg: "#f4f4f4",
|
listDividerBg: '#f4f4f4',
|
||||||
listBtnUnderlayColor: "#3a3a3a",
|
listBtnUnderlayColor: '#3a3a3a',
|
||||||
listItemPadding: platform === "ios" ? 10 : 12,
|
listItemPadding: platform === PLATFORM.IOS ? 10 : 12,
|
||||||
listNoteColor: "#acacac",
|
listNoteColor: '#acacac',
|
||||||
listNoteSize: 13,
|
listNoteSize: 13,
|
||||||
|
|
||||||
// Progress Bar
|
// Progress Bar
|
||||||
defaultProgressColor: "#E4202D",
|
defaultProgressColor: '#E4202D',
|
||||||
inverseProgressColor: "#1A191B",
|
inverseProgressColor: '#1A191B',
|
||||||
|
|
||||||
// Radio Button
|
// Radio Button
|
||||||
radioBtnSize: platform === "ios" ? 25 : 23,
|
radioBtnSize: platform === PLATFORM.IOS ? 25 : 23,
|
||||||
radioSelectedColorAndroid: "#E4202D",
|
radioSelectedColorAndroid: '#be1522',
|
||||||
radioBtnLineHeight: platform === "ios" ? 29 : 24,
|
radioBtnLineHeight: platform === PLATFORM.IOS ? 29 : 24,
|
||||||
get radioColor() {
|
get radioColor() {
|
||||||
return "#be1522";
|
return this.brandPrimary;
|
||||||
},
|
},
|
||||||
|
|
||||||
// Segment
|
// Segment
|
||||||
segmentBackgroundColor: platform === "ios" ? "#F8F8F8" : "#3F51B5",
|
segmentBackgroundColor: platform === PLATFORM.IOS ? '#F8F8F8' : '#3F51B5',
|
||||||
segmentActiveBackgroundColor: platform === "ios" ? "#007aff" : "#fff",
|
segmentActiveBackgroundColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||||
segmentTextColor: platform === "ios" ? "#007aff" : "#fff",
|
segmentTextColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||||
segmentActiveTextColor: platform === "ios" ? "#fff" : "#3F51B5",
|
segmentActiveTextColor: platform === PLATFORM.IOS ? '#fff' : '#3F51B5',
|
||||||
segmentBorderColor: platform === "ios" ? "#007aff" : "#fff",
|
segmentBorderColor: platform === PLATFORM.IOS ? '#007aff' : '#fff',
|
||||||
segmentBorderColorMain: platform === "ios" ? "#a7a6ab" : "#3F51B5",
|
segmentBorderColorMain: platform === PLATFORM.IOS ? '#a7a6ab' : '#3F51B5',
|
||||||
|
|
||||||
// Spinner
|
// Spinner
|
||||||
defaultSpinnerColor: "#be1522",
|
defaultSpinnerColor: '#be1522',
|
||||||
inverseSpinnerColor: "#1A191B",
|
inverseSpinnerColor: '#1A191B',
|
||||||
|
|
||||||
// Tab
|
// Tab
|
||||||
tabDefaultBg: platform === "ios" ? "#333333" : "#be1522",
|
tabBarDisabledTextColor: '#BDBDBD',
|
||||||
topTabBarTextColor: platform === "ios" ? "#6b6b6b" : "#b3c7f9",
|
tabDefaultBg: platform === PLATFORM.IOS ? '#333333' : '#be1522',
|
||||||
topTabBarActiveTextColor: platform === "ios" ? "#be1522" : "#fff",
|
topTabBarTextColor: platform === PLATFORM.IOS ? '#6b6b6b' : '#b3c7f9',
|
||||||
topTabBarBorderColor: platform === "ios" ? "#3f3f3f" : "#fff",
|
topTabBarActiveTextColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
|
||||||
topTabBarActiveBorderColor: platform === "ios" ? "#be1522" : "#fff",
|
topTabBarBorderColor: platform === PLATFORM.IOS ? '#3f3f3f' : '#fff',
|
||||||
|
topTabBarActiveBorderColor: platform === PLATFORM.IOS ? '#be1522' : '#fff',
|
||||||
|
|
||||||
// Tabs
|
// Tabs
|
||||||
tabBgColor: "#2b2b2b",
|
tabBgColor: '#2b2b2b',
|
||||||
tabIconColor: "#fff",
|
tabIconColor: "#fff",
|
||||||
tabFontSize: 15,
|
tabFontSize: 15,
|
||||||
|
|
||||||
// Text
|
// Text
|
||||||
textColor: "#ebebeb",
|
textColor: '#ebebeb',
|
||||||
textDisabledColor: "#5b5b5b",
|
textDisabledColor: "#5b5b5b",
|
||||||
inverseTextColor: "#000",
|
inverseTextColor: '#000',
|
||||||
noteFontSize: 14,
|
noteFontSize: 14,
|
||||||
get defaultTextColor() {
|
get defaultTextColor() {
|
||||||
return this.textColor;
|
return this.textColor;
|
||||||
},
|
},
|
||||||
|
|
||||||
// Title
|
// Title
|
||||||
titleFontfamily: platform === "ios" ? "System" : "Roboto_medium",
|
titleFontfamily: platform === PLATFORM.IOS ? 'System' : 'Roboto_medium',
|
||||||
titleFontSize: platform === "ios" ? 17 : 19,
|
titleFontSize: platform === PLATFORM.IOS ? 17 : 19,
|
||||||
subTitleFontSize: platform === "ios" ? 11 : 14,
|
subTitleFontSize: platform === PLATFORM.IOS ? 11 : 14,
|
||||||
subtitleColor: platform === "ios" ? "#8e8e93" : "#FFF",
|
subtitleColor: platform === PLATFORM.IOS ? '#8e8e93' : '#FFF',
|
||||||
titleFontColor: platform === "ios" ? "#FFF" : "#FFF",
|
titleFontColor: platform === PLATFORM.IOS ? '#000' : '#FFF',
|
||||||
|
|
||||||
|
|
||||||
// CUSTOM
|
// CUSTOM
|
||||||
customMaterialIconColor: "#b3b3b3",
|
customMaterialIconColor: "#b3b3b3",
|
||||||
|
@ -281,11 +331,12 @@ export default {
|
||||||
menuColor: '#b81213',
|
menuColor: '#b81213',
|
||||||
tutorinsaColor: '#f93943',
|
tutorinsaColor: '#f93943',
|
||||||
|
|
||||||
|
|
||||||
// Other
|
// Other
|
||||||
borderRadiusBase: platform === "ios" ? 5 : 2,
|
borderRadiusBase: platform === PLATFORM.IOS ? 5 : 2,
|
||||||
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
borderWidth: 1 / PixelRatio.getPixelSizeForLayoutSize(1),
|
||||||
contentPadding: 10,
|
contentPadding: 10,
|
||||||
dropdownLinkColor: "#414142",
|
dropdownLinkColor: '#414142',
|
||||||
inputLineHeight: 24,
|
inputLineHeight: 24,
|
||||||
deviceWidth,
|
deviceWidth,
|
||||||
deviceHeight,
|
deviceHeight,
|
||||||
|
|
|
@ -12,6 +12,7 @@ import SelfMenuScreen from '../screens/SelfMenuScreen';
|
||||||
import TutorInsaScreen from "../screens/TutorInsaScreen";
|
import TutorInsaScreen from "../screens/TutorInsaScreen";
|
||||||
import AmicaleScreen from "../screens/AmicaleScreen";
|
import AmicaleScreen from "../screens/AmicaleScreen";
|
||||||
import WiketudScreen from "../screens/WiketudScreen";
|
import WiketudScreen from "../screens/WiketudScreen";
|
||||||
|
import ElusEtudScreen from "../screens/ElusEtudScreen";
|
||||||
import AvailableRoomScreen from "../screens/AvailableRoomScreen";
|
import AvailableRoomScreen from "../screens/AvailableRoomScreen";
|
||||||
import DebugScreen from '../screens/DebugScreen';
|
import DebugScreen from '../screens/DebugScreen';
|
||||||
import {fromRight} from "react-navigation-transitions";
|
import {fromRight} from "react-navigation-transitions";
|
||||||
|
@ -33,6 +34,7 @@ function createAppContainerWithInitialRoute(initialRoute: string) {
|
||||||
TutorInsaScreen: {screen: TutorInsaScreen},
|
TutorInsaScreen: {screen: TutorInsaScreen},
|
||||||
AmicaleScreen: {screen: AmicaleScreen},
|
AmicaleScreen: {screen: AmicaleScreen},
|
||||||
WiketudScreen: {screen: WiketudScreen},
|
WiketudScreen: {screen: WiketudScreen},
|
||||||
|
ElusEtudScreen: {screen: ElusEtudScreen},
|
||||||
AvailableRoomScreen: {screen: AvailableRoomScreen},
|
AvailableRoomScreen: {screen: AvailableRoomScreen},
|
||||||
ProxiwashAboutScreen: {screen: ProxiwashAboutScreen},
|
ProxiwashAboutScreen: {screen: ProxiwashAboutScreen},
|
||||||
ProximoAboutScreen: {screen: ProximoAboutScreen},
|
ProximoAboutScreen: {screen: ProximoAboutScreen},
|
||||||
|
|
|
@ -31,13 +31,15 @@ function createMaterialBottomTabNavigatorWithInitialRoute(initialRoute: string)
|
||||||
return {
|
return {
|
||||||
tabBarVisible: showTabBar,
|
tabBarVisible: showTabBar,
|
||||||
};
|
};
|
||||||
},},
|
},
|
||||||
|
},
|
||||||
}, {
|
}, {
|
||||||
defaultNavigationOptions: ({navigation}) => ({
|
defaultNavigationOptions: ({navigation}) => ({
|
||||||
tabBarIcon: ({focused, horizontal, tintColor}) => {
|
tabBarIcon: ({focused, tintColor}) => {
|
||||||
let icon = TAB_ICONS[navigation.state.routeName];
|
let icon = TAB_ICONS[navigation.state.routeName];
|
||||||
|
// tintColor is ignoring activeColor et inactiveColor for some reason
|
||||||
return <CustomMaterialIcon icon={icon} color={tintColor}/>;
|
let color = focused ? "#f0edf6" : "#4e1108";
|
||||||
|
return <CustomMaterialIcon icon={icon} color={color}/>;
|
||||||
},
|
},
|
||||||
tabBarVisible: true,
|
tabBarVisible: true,
|
||||||
}),
|
}),
|
||||||
|
|
36
package.json
36
package.json
|
@ -8,38 +8,36 @@
|
||||||
"eject": "expo eject"
|
"eject": "expo eject"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@expo/vector-icons": "^10.0.2",
|
"@expo/vector-icons": "^10.0.0",
|
||||||
"@react-native-community/status-bar": "^1.0.3",
|
"@react-native-community/status-bar": "^1.0.3",
|
||||||
"@shoutem/theme": "^0.11.3",
|
"expo": "^36.0.0",
|
||||||
"expo": "^33.0.7",
|
"expo-font": "~8.0.0",
|
||||||
"expo-font": "^5.0.1",
|
"expo-linear-gradient": "~8.0.0",
|
||||||
"expo-linear-gradient": "^5.0.1",
|
"expo-localization": "~8.0.0",
|
||||||
"expo-localization": "^5.0.1",
|
"expo-permissions": "~8.0.0",
|
||||||
"expo-permissions": "^5.0.1",
|
|
||||||
"i18n-js": "^3.3.0",
|
"i18n-js": "^3.3.0",
|
||||||
"native-base": "^2.12.1",
|
"native-base": "^2.12.1",
|
||||||
"native-base-shoutem-theme": "^0.2.3",
|
"native-base-shoutem-theme": "^0.3.1",
|
||||||
"react": "^16.8.6",
|
"react": "16.9.0",
|
||||||
"react-dom": "^16.8.6",
|
"react-dom": "16.9.0",
|
||||||
"react-native": "^0.59.9",
|
"react-native": "https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz",
|
||||||
"react-native-app-intro-slider": "^3.0.0",
|
"react-native-app-intro-slider": "^3.0.0",
|
||||||
"react-native-autolink": "^1.8.1",
|
"react-native-autolink": "^1.8.1",
|
||||||
"react-native-calendars": "^1.212.0",
|
"react-native-calendars": "^1.212.0",
|
||||||
"react-native-modal": "^11.3.1",
|
"react-native-gesture-handler": "~1.5.0",
|
||||||
"react-native-modalize": "^1.2.1",
|
"react-native-material-menu": "^0.6.7",
|
||||||
"react-native-paper": "^2.16.0",
|
"react-native-modalize": "^1.3.6",
|
||||||
"react-native-platform-touchable": "^1.1.1",
|
"react-native-platform-touchable": "^1.1.1",
|
||||||
"react-native-render-html": "^4.1.2",
|
"react-native-render-html": "^4.1.2",
|
||||||
"react-native-side-menu": "^1.1.3",
|
"react-native-side-menu": "^1.1.3",
|
||||||
"react-native-status-bar-height": "^2.3.1",
|
"react-native-status-bar-height": "^2.3.1",
|
||||||
"react-native-webview": "^5.8.1",
|
"react-native-webview": "7.4.3",
|
||||||
"react-navigation": "^3.11.0",
|
"react-navigation": "^3.13.0",
|
||||||
"react-navigation-material-bottom-tabs": "^1.0.0",
|
"react-navigation-material-bottom-tabs": "^1.1.1",
|
||||||
"react-navigation-transitions": "^1.0.12"
|
"react-navigation-transitions": "^1.0.12"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babel-preset-expo": "^5.1.1",
|
"babel-preset-expo": "^8.0.0"
|
||||||
"react-native-material-menu": "^0.6.3"
|
|
||||||
},
|
},
|
||||||
"private": true
|
"private": true
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,7 +9,7 @@ import appJson from '../../app';
|
||||||
import packageJson from '../../package';
|
import packageJson from '../../package';
|
||||||
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
|
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
|
||||||
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";
|
||||||
|
|
||||||
const links = {
|
const links = {
|
||||||
|
@ -28,13 +28,18 @@ const links = {
|
||||||
bugsGit: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/issues',
|
bugsGit: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/issues',
|
||||||
changelog: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/Changelog.md',
|
changelog: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/Changelog.md',
|
||||||
license: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/LICENSE',
|
license: 'https://git.srv-falcon.etud.insa-toulouse.fr/vergnet/application-amicale/src/branch/master/LICENSE',
|
||||||
mail: "mailto:vergnet@etud.insa-toulouse.fr?" +
|
authorMail: "mailto:vergnet@etud.insa-toulouse.fr?" +
|
||||||
"subject=" +
|
"subject=" +
|
||||||
"Application Amicale INSA Toulouse" +
|
"Application Amicale INSA Toulouse" +
|
||||||
"&body=" +
|
"&body=" +
|
||||||
"Coucou !\n\n",
|
"Coucou !\n\n",
|
||||||
linkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
|
authorLinkedin: 'https://www.linkedin.com/in/arnaud-vergnet-434ba5179/',
|
||||||
facebook: 'https://www.facebook.com/arnaud.vergnet',
|
yohanMail: "mailto:ysimard@etud.insa-toulouse.fr?" +
|
||||||
|
"subject=" +
|
||||||
|
"Application Amicale INSA Toulouse" +
|
||||||
|
"&body=" +
|
||||||
|
"Coucou !\n\n",
|
||||||
|
yohanLinkedin: 'https://www.linkedin.com/in/yohan-simard', // TODO set real link
|
||||||
react: 'https://facebook.github.io/react-native/',
|
react: 'https://facebook.github.io/react-native/',
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -125,21 +130,39 @@ export default class AboutScreen extends React.Component<Props, State> {
|
||||||
showChevron: false
|
showChevron: false
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
onPressCallback: () => openWebLink(links.mail),
|
onPressCallback: () => openWebLink(links.authorMail),
|
||||||
icon: 'email',
|
icon: 'email',
|
||||||
text: i18n.t('aboutScreen.mail'),
|
text: i18n.t('aboutScreen.authorMail'),
|
||||||
showChevron: true
|
showChevron: true
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
onPressCallback: () => openWebLink(links.linkedin),
|
onPressCallback: () => openWebLink(links.authorLinkedin),
|
||||||
icon: 'linkedin',
|
icon: 'linkedin',
|
||||||
text: 'Linkedin',
|
text: 'Linkedin',
|
||||||
showChevron: true
|
showChevron: true
|
||||||
},
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Data to be displayed in the additional developer card
|
||||||
|
*/
|
||||||
|
additionalDevData: Array<Object> = [
|
||||||
{
|
{
|
||||||
onPressCallback: () => openWebLink(links.facebook),
|
onPressCallback: () => console.log('Meme this'),
|
||||||
icon: 'facebook',
|
icon: 'account',
|
||||||
text: 'Facebook',
|
text: 'Yohan SIMARD',
|
||||||
|
showChevron: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
onPressCallback: () => openWebLink(links.yohanMail),
|
||||||
|
icon: 'email',
|
||||||
|
text: i18n.t('aboutScreen.authorMail'),
|
||||||
|
showChevron: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
onPressCallback: () => openWebLink(links.yohanLinkedin),
|
||||||
|
icon: 'linkedin',
|
||||||
|
text: 'Linkedin',
|
||||||
showChevron: true
|
showChevron: true
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
@ -291,6 +314,18 @@ export default class AboutScreen extends React.Component<Props, State> {
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card>
|
<Card>
|
||||||
|
<CardItem>
|
||||||
|
<Left>
|
||||||
|
<CustomMaterialIcon
|
||||||
|
icon={'account-multiple'}
|
||||||
|
fontSize={40}
|
||||||
|
width={40}
|
||||||
|
color={ThemeManager.getCurrentThemeVariables().brandPrimary}/>
|
||||||
|
<Body>
|
||||||
|
<H1>{i18n.t('aboutScreen.team')}</H1>
|
||||||
|
</Body>
|
||||||
|
</Left>
|
||||||
|
</CardItem>
|
||||||
<CardItem header>
|
<CardItem header>
|
||||||
<Text>{i18n.t('aboutScreen.author')}</Text>
|
<Text>{i18n.t('aboutScreen.author')}</Text>
|
||||||
</CardItem>
|
</CardItem>
|
||||||
|
@ -302,6 +337,17 @@ export default class AboutScreen extends React.Component<Props, State> {
|
||||||
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
|
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
|
<CardItem header>
|
||||||
|
<Text>{i18n.t('aboutScreen.additionalDev')}</Text>
|
||||||
|
</CardItem>
|
||||||
|
<FlatList
|
||||||
|
data={this.additionalDevData}
|
||||||
|
extraData={this.state}
|
||||||
|
keyExtractor={(item) => item.icon}
|
||||||
|
renderItem={({item}) =>
|
||||||
|
this.getCardItem(item.onPressCallback, item.icon, item.text, item.showChevron, item.showOnlyDebug)
|
||||||
|
}
|
||||||
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
|
|
||||||
<Card>
|
<Card>
|
||||||
|
|
|
@ -28,7 +28,7 @@ import Touchable from "react-native-platform-touchable";
|
||||||
import {Alert, View, Clipboard, Image} from "react-native";
|
import {Alert, View, Clipboard, Image} 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";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
navigation: Object,
|
navigation: Object,
|
||||||
|
|
39
screens/ElusEtudScreen.js
Normal file
39
screens/ElusEtudScreen.js
Normal file
|
@ -0,0 +1,39 @@
|
||||||
|
// @flow
|
||||||
|
|
||||||
|
import * as React from 'react';
|
||||||
|
import ThemeManager from "../utils/ThemeManager";
|
||||||
|
import WebViewScreen from "../components/WebViewScreen";
|
||||||
|
|
||||||
|
type Props = {
|
||||||
|
navigation: Object,
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
const URL = 'https://srv-falcon.etud.insa-toulouse.fr/~eeinsat/';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Class defining the app's planex screen.
|
||||||
|
* This screen uses a webview to render the planex page
|
||||||
|
*/
|
||||||
|
export default class ElusEtudScreen extends React.Component<Props> {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const nav = this.props.navigation;
|
||||||
|
return (
|
||||||
|
<WebViewScreen
|
||||||
|
navigation={nav}
|
||||||
|
data={[
|
||||||
|
{
|
||||||
|
url: URL,
|
||||||
|
icon: '',
|
||||||
|
name: '',
|
||||||
|
customJS: ''
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
headerTitle={'Élus Étudiants'}
|
||||||
|
hasHeaderBackButton={true}
|
||||||
|
hasSideMenu={false}/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -15,6 +15,51 @@ const PLANEX_URL = 'http://planex.insa-toulouse.fr/';
|
||||||
const CUSTOM_CSS_GENERAL = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customMobile2.css';
|
const CUSTOM_CSS_GENERAL = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customMobile2.css';
|
||||||
const CUSTOM_CSS_NIGHTMODE = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customDark2.css';
|
const CUSTOM_CSS_NIGHTMODE = 'https://srv-falcon.etud.insa-toulouse.fr/~amicale_app/custom_css/planex/customDark2.css';
|
||||||
|
|
||||||
|
// // JS + JQuery functions used to remove alpha from events. Copy paste in browser console for quick testing
|
||||||
|
// // Remove alpha from given Jquery node
|
||||||
|
// function removeAlpha(node) {
|
||||||
|
// console.log(node);
|
||||||
|
// let bg = node.css("background-color");
|
||||||
|
// if (bg.match("^rgba")) {
|
||||||
|
// let a = bg.slice(5).split(',');
|
||||||
|
// let newBg ='rgb(' + a[0] + ',' + parseInt(a[1]) + ',' + parseInt(a[2]) + ')';
|
||||||
|
// node.css("background-color", newBg);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// // Observe for planning DOM changes
|
||||||
|
// let observer = new MutationObserver(function(mutations) {
|
||||||
|
// for (let i = 0; i < mutations.length; i++) {
|
||||||
|
// if (mutations[i]['addedNodes'].length > 0 && $(mutations[i]['addedNodes'][0]).hasClass("fc-event"))
|
||||||
|
// removeAlpha($(mutations[i]['addedNodes'][0]))
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});
|
||||||
|
// // Run remove alpha a first time on whole planning. Useful when code injected after planning fully loaded.
|
||||||
|
// $(".fc-event-container .fc-event").each(function(index) {
|
||||||
|
// removeAlpha($(this));
|
||||||
|
// });
|
||||||
|
|
||||||
|
// Watch for changes in the calendar and call the remove alpha function
|
||||||
|
const OBSERVE_MUTATIONS_INJECTED =
|
||||||
|
'function removeAlpha(node) {\n' +
|
||||||
|
' console.log(node);\n' +
|
||||||
|
' let bg = node.css("background-color");\n' +
|
||||||
|
' if (bg.match("^rgba")) {\n' +
|
||||||
|
' let a = bg.slice(5).split(\',\');\n' +
|
||||||
|
' let newBg =\'rgb(\' + a[0] + \',\' + parseInt(a[1]) + \',\' + parseInt(a[2]) + \')\';\n' +
|
||||||
|
' node.css("background-color", newBg);\n' +
|
||||||
|
' }\n' +
|
||||||
|
'}' +
|
||||||
|
'let observer = new MutationObserver(function(mutations) {\n' +
|
||||||
|
' for (let i = 0; i < mutations.length; i++) {\n' +
|
||||||
|
' if (mutations[i][\'addedNodes\'].length > 0 && $(mutations[i][\'addedNodes\'][0]).hasClass("fc-event"))\n' +
|
||||||
|
' removeAlpha($(mutations[i][\'addedNodes\'][0]))\n' +
|
||||||
|
' }\n' +
|
||||||
|
'});\n' +
|
||||||
|
'observer.observe(document.querySelector(".fc-body"), {attributes: false, childList: true, characterData: false, subtree:true});\n' +
|
||||||
|
'$(".fc-event-container .fc-event").each(function(index) {\n' +
|
||||||
|
' removeAlpha($(this));\n' +
|
||||||
|
'});';
|
||||||
/**
|
/**
|
||||||
* Class defining the app's planex screen.
|
* Class defining the app's planex screen.
|
||||||
* This screen uses a webview to render the planex page
|
* This screen uses a webview to render the planex page
|
||||||
|
@ -26,12 +71,22 @@ export default class PlanexScreen extends React.Component<Props> {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
this.customInjectedJS =
|
this.customInjectedJS =
|
||||||
'document.querySelector(\'head\').innerHTML += \'<meta name="viewport" content="width=device-width, initial-scale=1.0">\';' +
|
'$(document).ready(function() {' +
|
||||||
'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="' + CUSTOM_CSS_GENERAL + '" type="text/css"/>\';' +
|
OBSERVE_MUTATIONS_INJECTED +
|
||||||
'$(".fc-toolbar .fc-center").append(\'<p id="rotateToLandscape">' + i18n.t("planexScreen.rotateToLandscape") + '</p>\');' +
|
'$("head").append(\'<meta name="viewport" content="width=device-width, initial-scale=1.0">\');' +
|
||||||
'$(".fc-toolbar .fc-center").append(\'<p id="rotateToPortrait">' + i18n.t("planexScreen.rotateToPortrait") + '</p>\');true;';
|
'$("head").append(\'<link rel="stylesheet" href="' + CUSTOM_CSS_GENERAL + '" type="text/css"/>\');';
|
||||||
|
|
||||||
if (ThemeManager.getNightMode())
|
if (ThemeManager.getNightMode())
|
||||||
this.customInjectedJS += 'document.querySelector(\'head\').innerHTML += \'<link rel="stylesheet" href="' + CUSTOM_CSS_NIGHTMODE + '" type="text/css"/>\';';
|
this.customInjectedJS += '$("head").append(\'<link rel="stylesheet" href="' + CUSTOM_CSS_NIGHTMODE + '" type="text/css"/>\');';
|
||||||
|
|
||||||
|
this.customInjectedJS +=
|
||||||
|
'$(".fc-toolbar .fc-center").append(\'<p id="rotateToLandscape" style="color: ' + ThemeManager.getCurrentThemeVariables().brandPrimary + '">' +
|
||||||
|
i18n.t("planexScreen.rotateToLandscape") + '</p>\');' +
|
||||||
|
'$(".fc-toolbar .fc-center").append(\'<p id="rotateToPortrait" style="color: ' + ThemeManager.getCurrentThemeVariables().brandPrimary + '">' +
|
||||||
|
i18n.t("planexScreen.rotateToPortrait") + '</p>\');' +
|
||||||
|
'removeAlpha();' +
|
||||||
|
'});true;'; // Prevent crash on ios
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
|
@ -1,19 +1,28 @@
|
||||||
// @flow
|
// @flow
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import {Content, H1, H2, H3, Text, Button} from 'native-base';
|
import {BackHandler} from 'react-native';
|
||||||
|
import {Content, H1, H3, Text, Button} from 'native-base';
|
||||||
import i18n from "i18n-js";
|
import i18n from "i18n-js";
|
||||||
import {View, Image} from "react-native";
|
import {View, Image} from "react-native";
|
||||||
import ThemeManager from "../utils/ThemeManager";
|
import ThemeManager from "../utils/ThemeManager";
|
||||||
import {Linking} from "expo";
|
import {Linking} from "expo";
|
||||||
import BaseContainer from "../components/BaseContainer";
|
import BaseContainer from "../components/BaseContainer";
|
||||||
import {Agenda} from 'react-native-calendars';
|
import {Agenda, LocaleConfig} from 'react-native-calendars';
|
||||||
import HTML from 'react-native-render-html';
|
import HTML from 'react-native-render-html';
|
||||||
import Touchable from 'react-native-platform-touchable';
|
import Touchable from 'react-native-platform-touchable';
|
||||||
import Modalize from 'react-native-modalize';
|
import {Modalize} from 'react-native-modalize';
|
||||||
import WebDataManager from "../utils/WebDataManager";
|
import WebDataManager from "../utils/WebDataManager";
|
||||||
import CustomMaterialIcon from "../components/CustomMaterialIcon";
|
import CustomMaterialIcon from "../components/CustomMaterialIcon";
|
||||||
|
|
||||||
|
LocaleConfig.locales['fr'] = {
|
||||||
|
monthNames: ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Juillet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'],
|
||||||
|
monthNamesShort: ['Janv.', 'Févr.', 'Mars', 'Avril', 'Mai', 'Juin', 'Juil.', 'Août', 'Sept.', 'Oct.', 'Nov.', 'Déc.'],
|
||||||
|
dayNames: ['Dimanche', 'Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi'],
|
||||||
|
dayNamesShort: ['Dim', 'Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam'],
|
||||||
|
today: 'Aujourd\'hui'
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
navigation: Object,
|
navigation: Object,
|
||||||
|
@ -23,6 +32,7 @@ type State = {
|
||||||
modalCurrentDisplayItem: Object,
|
modalCurrentDisplayItem: Object,
|
||||||
refreshing: boolean,
|
refreshing: boolean,
|
||||||
agendaItems: Object,
|
agendaItems: Object,
|
||||||
|
calendarShowing: boolean,
|
||||||
};
|
};
|
||||||
|
|
||||||
const FETCH_URL = "https://amicale-insat.fr/event/json/list";
|
const FETCH_URL = "https://amicale-insat.fr/event/json/list";
|
||||||
|
@ -42,26 +52,64 @@ function openWebLink(link) {
|
||||||
*/
|
*/
|
||||||
export default class PlanningScreen extends React.Component<Props, State> {
|
export default class PlanningScreen extends React.Component<Props, State> {
|
||||||
|
|
||||||
modalRef: { current: null | Modalize };
|
modalRef: Modalize;
|
||||||
|
agendaRef: Agenda;
|
||||||
webDataManager: WebDataManager;
|
webDataManager: WebDataManager;
|
||||||
|
|
||||||
lastRefresh: Date;
|
lastRefresh: Date;
|
||||||
minTimeBetweenRefresh = 60;
|
minTimeBetweenRefresh = 60;
|
||||||
|
|
||||||
|
didFocusSubscription: Function;
|
||||||
|
willBlurSubscription: Function;
|
||||||
|
|
||||||
constructor(props: any) {
|
constructor(props: any) {
|
||||||
super(props);
|
super(props);
|
||||||
this.modalRef = React.createRef();
|
this.modalRef = React.createRef();
|
||||||
this.webDataManager = new WebDataManager(FETCH_URL);
|
this.webDataManager = new WebDataManager(FETCH_URL);
|
||||||
|
this.didFocusSubscription = props.navigation.addListener(
|
||||||
|
'didFocus',
|
||||||
|
payload =>
|
||||||
|
BackHandler.addEventListener(
|
||||||
|
'hardwareBackPress',
|
||||||
|
this.onBackButtonPressAndroid
|
||||||
|
)
|
||||||
|
);
|
||||||
|
if (i18n.currentLocale().startsWith("fr")) {
|
||||||
|
LocaleConfig.defaultLocale = 'fr';
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount() {
|
componentDidMount() {
|
||||||
this._onRefresh();
|
this._onRefresh();
|
||||||
|
this.willBlurSubscription = this.props.navigation.addListener(
|
||||||
|
'willBlur',
|
||||||
|
payload =>
|
||||||
|
BackHandler.removeEventListener(
|
||||||
|
'hardwareBackPress',
|
||||||
|
this.onBackButtonPressAndroid
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
onBackButtonPressAndroid = () => {
|
||||||
|
if (this.state.calendarShowing) {
|
||||||
|
this.agendaRef.chooseDay(this.agendaRef.state.selectedDay);
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
this.didFocusSubscription && this.didFocusSubscription.remove();
|
||||||
|
this.willBlurSubscription && this.willBlurSubscription.remove();
|
||||||
}
|
}
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
modalCurrentDisplayItem: {},
|
modalCurrentDisplayItem: {},
|
||||||
refreshing: false,
|
refreshing: false,
|
||||||
agendaItems: {},
|
agendaItems: {},
|
||||||
|
calendarShowing: false,
|
||||||
};
|
};
|
||||||
|
|
||||||
getCurrentDate() {
|
getCurrentDate() {
|
||||||
|
@ -165,7 +213,9 @@ export default class PlanningScreen extends React.Component<Props, State> {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
flexDirection: 'row'
|
flexDirection: 'row'
|
||||||
}}>
|
}}>
|
||||||
<View style={{width: '70%'}}>
|
<View style={{
|
||||||
|
width: item.logo !== null ? '70%' : '100%',
|
||||||
|
}}>
|
||||||
<Text style={{
|
<Text style={{
|
||||||
color: ThemeManager.getCurrentThemeVariables().listNoteColor,
|
color: ThemeManager.getCurrentThemeVariables().listNoteColor,
|
||||||
marginTop: 5,
|
marginTop: 5,
|
||||||
|
@ -176,7 +226,7 @@ export default class PlanningScreen extends React.Component<Props, State> {
|
||||||
<H3 style={{marginBottom: 10}}>{item.title}</H3>
|
<H3 style={{marginBottom: 10}}>{item.title}</H3>
|
||||||
</View>
|
</View>
|
||||||
<View style={{
|
<View style={{
|
||||||
width: '30%',
|
width: item.logo !== null ? '30%' : 0,
|
||||||
height: 80
|
height: 80
|
||||||
}}>
|
}}>
|
||||||
{item.logo !== null ?
|
{item.logo !== null ?
|
||||||
|
@ -345,11 +395,19 @@ export default class PlanningScreen extends React.Component<Props, State> {
|
||||||
futureScrollRange={AGENDA_MONTH_SPAN}
|
futureScrollRange={AGENDA_MONTH_SPAN}
|
||||||
// If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.
|
// If provided, a standard RefreshControl will be added for "Pull to Refresh" functionality. Make sure to also set the refreshing prop correctly.
|
||||||
onRefresh={() => this._onRefresh()}
|
onRefresh={() => this._onRefresh()}
|
||||||
|
// callback that fires when the calendar is opened or closed
|
||||||
|
onCalendarToggled={(calendarOpened) => {
|
||||||
|
this.setState({calendarShowing: calendarOpened})
|
||||||
|
}}
|
||||||
// Set this true while waiting for new data from a refresh
|
// Set this true while waiting for new data from a refresh
|
||||||
refreshing={this.state.refreshing}
|
refreshing={this.state.refreshing}
|
||||||
renderItem={(item) => this.getRenderItem(item)}
|
renderItem={(item) => this.getRenderItem(item)}
|
||||||
renderEmptyDate={() => this.getRenderEmptyDate()}
|
renderEmptyDate={() => this.getRenderEmptyDate()}
|
||||||
rowHasChanged={() => this.rowHasChanged()}
|
rowHasChanged={() => this.rowHasChanged()}
|
||||||
|
// If firstDay=1 week starts from Monday. Note that dayNames and dayNamesShort should still start from Sunday.
|
||||||
|
firstDay={1}
|
||||||
|
// ref to this agenda in order to handle back button event
|
||||||
|
ref={(ref) => this.agendaRef = ref}
|
||||||
// agenda theme
|
// agenda theme
|
||||||
theme={{
|
theme={{
|
||||||
backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor,
|
backgroundColor: ThemeManager.getCurrentThemeVariables().agendaBackgroundColor,
|
||||||
|
|
|
@ -9,7 +9,7 @@ import Menu, {MenuItem} from 'react-native-material-menu';
|
||||||
import i18n from "i18n-js";
|
import i18n from "i18n-js";
|
||||||
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
|
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
|
||||||
import ThemeManager from "../../utils/ThemeManager";
|
import ThemeManager from "../../utils/ThemeManager";
|
||||||
import Modalize from 'react-native-modalize';
|
import {Modalize} from 'react-native-modalize';
|
||||||
|
|
||||||
const sortMode = {
|
const sortMode = {
|
||||||
price: "0",
|
price: "0",
|
||||||
|
@ -45,12 +45,12 @@ type Props = {
|
||||||
}
|
}
|
||||||
|
|
||||||
type State = {
|
type State = {
|
||||||
navData: Array<Object>,
|
|
||||||
currentSortMode: string,
|
currentSortMode: string,
|
||||||
isSortReversed: boolean,
|
isSortReversed: boolean,
|
||||||
sortPriceIcon: React.Node,
|
sortPriceIcon: React.Node,
|
||||||
sortNameIcon: React.Node,
|
sortNameIcon: React.Node,
|
||||||
modalCurrentDisplayItem: Object,
|
modalCurrentDisplayItem: Object,
|
||||||
|
currentlyDisplayedData: Array<Object>,
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -59,19 +59,23 @@ type State = {
|
||||||
export default class ProximoListScreen extends React.Component<Props, State> {
|
export default class ProximoListScreen extends React.Component<Props, State> {
|
||||||
|
|
||||||
modalRef: { current: null | Modalize };
|
modalRef: { current: null | Modalize };
|
||||||
|
originalData: Array<Object>;
|
||||||
|
navData = this.props.navigation.getParam('data', []);
|
||||||
|
shouldFocusSearchBar = this.props.navigation.getParam('shouldFocusSearchBar', false);
|
||||||
|
|
||||||
constructor(props: any) {
|
constructor(props: any) {
|
||||||
super(props);
|
super(props);
|
||||||
this.modalRef = React.createRef();
|
this.modalRef = React.createRef();
|
||||||
|
this.originalData = this.navData['data'];
|
||||||
}
|
}
|
||||||
|
|
||||||
state = {
|
state = {
|
||||||
navData: this.props.navigation.getParam('data', []).sort(sortPrice),
|
currentlyDisplayedData: this.navData['data'].sort(sortPrice),
|
||||||
currentSortMode: sortMode.price,
|
currentSortMode: sortMode.price,
|
||||||
isSortReversed: false,
|
isSortReversed: false,
|
||||||
sortPriceIcon: '',
|
sortPriceIcon: '',
|
||||||
sortNameIcon: '',
|
sortNameIcon: '',
|
||||||
modalCurrentDisplayItem: {}
|
modalCurrentDisplayItem: {},
|
||||||
};
|
};
|
||||||
|
|
||||||
_menu: Menu;
|
_menu: Menu;
|
||||||
|
@ -111,7 +115,7 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
||||||
currentSortMode: mode,
|
currentSortMode: mode,
|
||||||
isSortReversed: isReverse
|
isSortReversed: isReverse
|
||||||
});
|
});
|
||||||
let data = this.state.navData;
|
let data = this.state.currentlyDisplayedData;
|
||||||
switch (mode) {
|
switch (mode) {
|
||||||
case sortMode.price:
|
case sortMode.price:
|
||||||
if (isReverse) {
|
if (isReverse) {
|
||||||
|
@ -192,6 +196,35 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
sanitizeString(str: string) {
|
||||||
|
return str.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "");
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Returns only the articles whose name contains str. Case and accents insensitive.
|
||||||
|
* @param str
|
||||||
|
* @returns {[]}
|
||||||
|
*/
|
||||||
|
filterData(str: string) {
|
||||||
|
let filteredData = [];
|
||||||
|
const testStr = this.sanitizeString(str);
|
||||||
|
const articles = this.originalData;
|
||||||
|
for (const article of articles) {
|
||||||
|
const name = this.sanitizeString(article.name);
|
||||||
|
if (name.includes(testStr)) {
|
||||||
|
filteredData.push(article)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return filteredData;
|
||||||
|
}
|
||||||
|
|
||||||
|
search(str: string) {
|
||||||
|
this.setState({
|
||||||
|
currentlyDisplayedData: this.filterData(str)
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
getModalContent() {
|
getModalContent() {
|
||||||
return (
|
return (
|
||||||
<View style={{
|
<View style={{
|
||||||
|
@ -232,18 +265,8 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
getSortMenu() {
|
||||||
const nav = this.props.navigation;
|
|
||||||
const navType = nav.getParam('type', '{name: "Error"}');
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container>
|
|
||||||
<Modalize ref={this.modalRef}
|
|
||||||
adjustToContentHeight
|
|
||||||
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
|
|
||||||
{this.getModalContent()}
|
|
||||||
</Modalize>
|
|
||||||
<CustomHeader hasBackButton={true} navigation={nav} title={navType.name} rightButton={
|
|
||||||
<Menu
|
<Menu
|
||||||
ref={this.setMenuRef}
|
ref={this.setMenuRef}
|
||||||
button={
|
button={
|
||||||
|
@ -269,12 +292,31 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
||||||
{i18n.t('proximoScreen.sortPrice')}
|
{i18n.t('proximoScreen.sortPrice')}
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
</Menu>
|
</Menu>
|
||||||
}/>
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const nav = this.props.navigation;
|
||||||
|
const navType = nav.getParam('type', '{name: "Error"}');
|
||||||
|
return (
|
||||||
|
<Container>
|
||||||
|
<Modalize ref={this.modalRef}
|
||||||
|
adjustToContentHeight
|
||||||
|
modalStyle={{backgroundColor: ThemeManager.getCurrentThemeVariables().containerBgColor}}>
|
||||||
|
{this.getModalContent()}
|
||||||
|
</Modalize>
|
||||||
|
<CustomHeader
|
||||||
|
hasBackButton={true}
|
||||||
|
navigation={nav}
|
||||||
|
hasSearchField={true}
|
||||||
|
searchCallback={(text) => this.search(text)}
|
||||||
|
shouldFocusSearchBar={this.shouldFocusSearchBar}
|
||||||
|
rightButton={this.getSortMenu()}
|
||||||
|
/>
|
||||||
|
|
||||||
<Content>
|
|
||||||
<FlatList
|
<FlatList
|
||||||
data={this.state.navData}
|
data={this.state.currentlyDisplayedData}
|
||||||
extraData={this.state.navData}
|
extraData={this.state.currentlyDisplayedData}
|
||||||
keyExtractor={(item) => item.name + item.code}
|
keyExtractor={(item) => item.name + item.code}
|
||||||
style={{minHeight: 300, width: '100%'}}
|
style={{minHeight: 300, width: '100%'}}
|
||||||
renderItem={({item}) =>
|
renderItem={({item}) =>
|
||||||
|
@ -305,7 +347,6 @@ export default class ProximoListScreen extends React.Component<Props, State> {
|
||||||
</Right>
|
</Right>
|
||||||
</ListItem>}
|
</ListItem>}
|
||||||
/>
|
/>
|
||||||
</Content>
|
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
|
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import {Platform, View} from 'react-native'
|
import {Platform, View} from 'react-native'
|
||||||
import {Badge, Body, H2, Left, ListItem, Right, Text} from 'native-base';
|
import {Badge, Body, Left, ListItem, Right, Text} from 'native-base';
|
||||||
import i18n from "i18n-js";
|
import i18n from "i18n-js";
|
||||||
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
|
import CustomMaterialIcon from "../../components/CustomMaterialIcon";
|
||||||
import FetchedDataSectionList from "../../components/FetchedDataSectionList";
|
import FetchedDataSectionList from "../../components/FetchedDataSectionList";
|
||||||
|
@ -38,7 +38,7 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
title: '',
|
title: '',
|
||||||
data: ProximoMainScreen.generateData(fetchedData),
|
data: this.generateData(fetchedData),
|
||||||
extraData: super.state,
|
extraData: super.state,
|
||||||
keyExtractor: this.getKeyExtractor
|
keyExtractor: this.getKeyExtractor
|
||||||
}
|
}
|
||||||
|
@ -52,33 +52,81 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
|
||||||
* @param fetchedData The array of articles represented by objects
|
* @param fetchedData The array of articles represented by objects
|
||||||
* @returns {Array} The formatted dataset
|
* @returns {Array} The formatted dataset
|
||||||
*/
|
*/
|
||||||
static generateData(fetchedData: Object) {
|
generateData(fetchedData: Object) {
|
||||||
let finalData = [];
|
let finalData = [];
|
||||||
if (fetchedData.types !== undefined && fetchedData.articles !== undefined) {
|
if (fetchedData.types !== undefined && fetchedData.articles !== undefined) {
|
||||||
let types = fetchedData.types;
|
let types = fetchedData.types;
|
||||||
let articles = fetchedData.articles;
|
let articles = fetchedData.articles;
|
||||||
|
finalData.push({
|
||||||
|
type: {
|
||||||
|
id: "0",
|
||||||
|
name: i18n.t('proximoScreen.all'),
|
||||||
|
icon: 'star'
|
||||||
|
},
|
||||||
|
data: this.getAvailableArticles(articles, undefined)
|
||||||
|
});
|
||||||
for (let i = 0; i < types.length; i++) {
|
for (let i = 0; i < types.length; i++) {
|
||||||
finalData.push({
|
finalData.push({
|
||||||
type: types[i],
|
type: types[i],
|
||||||
data: []
|
data: this.getAvailableArticles(articles, types[i])
|
||||||
});
|
});
|
||||||
for (let k = 0; k < articles.length; k++) {
|
|
||||||
if (articles[k]['type'].includes(types[i].id) && parseInt(articles[k]['quantity']) > 0) {
|
|
||||||
finalData[i].data.push(articles[k]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
finalData.sort(ProximoMainScreen.sortFinalData);
|
finalData.sort(ProximoMainScreen.sortFinalData);
|
||||||
return finalData;
|
return finalData;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Get an array of available articles (in stock) of the given type
|
||||||
|
*
|
||||||
|
* @param articles The list of all articles
|
||||||
|
* @param type The type of articles to find (undefined for any type)
|
||||||
|
* @return {Array} The array of available articles
|
||||||
|
*/
|
||||||
|
getAvailableArticles(articles: Array<Object>, type: ?Object) {
|
||||||
|
let availableArticles = [];
|
||||||
|
for (let k = 0; k < articles.length; k++) {
|
||||||
|
if ((type !== undefined && type !== null && articles[k]['type'].includes(type['id'])
|
||||||
|
|| type === undefined)
|
||||||
|
&& parseInt(articles[k]['quantity']) > 0) {
|
||||||
|
availableArticles.push(articles[k]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return availableArticles;
|
||||||
|
}
|
||||||
|
|
||||||
static sortFinalData(a: Object, b: Object) {
|
static sortFinalData(a: Object, b: Object) {
|
||||||
return a.type.id - b.type.id;
|
return a.type.id - b.type.id;
|
||||||
}
|
}
|
||||||
|
|
||||||
getRightButton() {
|
getRightButton() {
|
||||||
|
let searchScreenData = {
|
||||||
|
shouldFocusSearchBar: true,
|
||||||
|
data: {
|
||||||
|
type: {
|
||||||
|
id: "0",
|
||||||
|
name: i18n.t('proximoScreen.all'),
|
||||||
|
icon: 'star'
|
||||||
|
},
|
||||||
|
data: this.state.fetchedData.articles !== undefined ?
|
||||||
|
this.getAvailableArticles(this.state.fetchedData.articles, undefined) : []
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<View
|
||||||
|
style={{
|
||||||
|
flexDirection: 'row'
|
||||||
|
}}>
|
||||||
|
<Touchable
|
||||||
|
style={{padding: 6}}
|
||||||
|
onPress={() => this.props.navigation.navigate('ProximoListScreen', searchScreenData)}>
|
||||||
|
<CustomMaterialIcon
|
||||||
|
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
|
||||||
|
icon="magnify"/>
|
||||||
|
</Touchable>
|
||||||
<Touchable
|
<Touchable
|
||||||
style={{padding: 6}}
|
style={{padding: 6}}
|
||||||
onPress={() => this.props.navigation.navigate('ProximoAboutScreen')}>
|
onPress={() => this.props.navigation.navigate('ProximoAboutScreen')}>
|
||||||
|
@ -86,32 +134,38 @@ export default class ProximoMainScreen extends FetchedDataSectionList {
|
||||||
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
|
color={Platform.OS === 'ios' ? ThemeManager.getCurrentThemeVariables().brandPrimary : "#fff"}
|
||||||
icon="information"/>
|
icon="information"/>
|
||||||
</Touchable>
|
</Touchable>
|
||||||
|
</View>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
getRenderItem(item: Object, section: Object, data: Object) {
|
getRenderItem(item: Object, section: Object, data: Object) {
|
||||||
|
let dataToSend = {
|
||||||
|
shouldFocusSearchBar: false,
|
||||||
|
data: item,
|
||||||
|
};
|
||||||
if (item.data.length > 0) {
|
if (item.data.length > 0) {
|
||||||
return (
|
return (
|
||||||
<ListItem
|
<ListItem
|
||||||
button
|
button
|
||||||
thumbnail
|
thumbnail
|
||||||
onPress={() => {
|
onPress={() => {
|
||||||
this.props.navigation.navigate('ProximoListScreen', item);
|
this.props.navigation.navigate('ProximoListScreen', dataToSend);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Left>
|
<Left>
|
||||||
<CustomMaterialIcon
|
<CustomMaterialIcon
|
||||||
icon={item.type.icon}
|
icon={item.type.icon}
|
||||||
fontSize={30}
|
fontSize={30}
|
||||||
|
color={ThemeManager.getCurrentThemeVariables().brandPrimary}
|
||||||
/>
|
/>
|
||||||
</Left>
|
</Left>
|
||||||
<Body>
|
<Body>
|
||||||
<Text>
|
<Text>
|
||||||
{item.type.name}
|
{item.type.name}
|
||||||
</Text>
|
</Text>
|
||||||
<Badge><Text>
|
<Text note>
|
||||||
{item.data.length} {item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article')}
|
{item.data.length} {item.data.length > 1 ? i18n.t('proximoScreen.articles') : i18n.t('proximoScreen.article')}
|
||||||
</Text></Badge>
|
</Text>
|
||||||
</Body>
|
</Body>
|
||||||
<Right>
|
<Right>
|
||||||
<CustomMaterialIcon icon="chevron-right"/>
|
<CustomMaterialIcon icon="chevron-right"/>
|
||||||
|
|
|
@ -140,7 +140,6 @@ export default class SettingsScreen extends React.Component<Props, State> {
|
||||||
actions: [NavigationActions.navigate({routeName: 'Main'})],
|
actions: [NavigationActions.navigate({routeName: 'Main'})],
|
||||||
});
|
});
|
||||||
this.props.navigation.dispatch(resetAction);
|
this.props.navigation.dispatch(resetAction);
|
||||||
// this.props.navigation.navigate('SettingsScreen');
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -25,7 +25,7 @@
|
||||||
},
|
},
|
||||||
"slide4": {
|
"slide4": {
|
||||||
"title": "Proximo",
|
"title": "Proximo",
|
||||||
"text": "Are you short on pasta? Or you maybe you feel a little peckish, then look up your INSA shop's stock in real time"
|
"text": "Are you short on pasta? Or maybe you feel a little peckish, then look up your INSA shop's stock in real time"
|
||||||
},
|
},
|
||||||
"slide5": {
|
"slide5": {
|
||||||
"title": "Planex",
|
"title": "Planex",
|
||||||
|
@ -110,8 +110,10 @@
|
||||||
"changelog": "Changelog",
|
"changelog": "Changelog",
|
||||||
"license": "License",
|
"license": "License",
|
||||||
"debug": "Debug",
|
"debug": "Debug",
|
||||||
|
"team": "Team",
|
||||||
"author": "Author",
|
"author": "Author",
|
||||||
"mail": "Send an email",
|
"authorMail": "Send an email",
|
||||||
|
"additionalDev": "Additional developer",
|
||||||
"technologies": "Technologies",
|
"technologies": "Technologies",
|
||||||
"reactNative": "Made with React Native",
|
"reactNative": "Made with React Native",
|
||||||
"libs": "Libraries used"
|
"libs": "Libraries used"
|
||||||
|
@ -129,7 +131,9 @@
|
||||||
"description": "The Proximo is your small grocery store maintained by students directly on the campus. Open every day from 18h30 to 19h30, we welcome you when you are short on pastas or sodas ! Different products for different problems, everything at cost price. You can pay by Lydia or cash.",
|
"description": "The Proximo is your small grocery store maintained by students directly on the campus. Open every day from 18h30 to 19h30, we welcome you when you are short on pastas or sodas ! Different products for different problems, everything at cost price. You can pay by Lydia or cash.",
|
||||||
"openingHours": "Openning Hours",
|
"openingHours": "Openning Hours",
|
||||||
"paymentMethods": "Payment Methods",
|
"paymentMethods": "Payment Methods",
|
||||||
"paymentMethodsDescription": "Cash or Lydia"
|
"paymentMethodsDescription": "Cash or Lydia",
|
||||||
|
"search": "Search",
|
||||||
|
"all": "All"
|
||||||
},
|
},
|
||||||
"proxiwashScreen": {
|
"proxiwashScreen": {
|
||||||
"dryer": "Dryer",
|
"dryer": "Dryer",
|
||||||
|
@ -141,7 +145,7 @@
|
||||||
"listUpdateFail": "Error while updating machines state",
|
"listUpdateFail": "Error while updating machines state",
|
||||||
"error": "Could not update machines state. Pull down to retry.",
|
"error": "Could not update machines state. Pull down to retry.",
|
||||||
"loading": "Loading...",
|
"loading": "Loading...",
|
||||||
"description": "This is the washing service operated by Promologis for INSA's residences (We don't mind if you do not live on the campus and you do your laundry here). The room is right next to the R2, with 3 dryers and 9 washers, is open 7d/7 24h/24 ! Here you can check their availability ! You can bring your own detergent, use the one given on site or buy it at the Proximo (cheaper than the one given by the machines ). You can pay b credit card or cash.",
|
"description": "This is the washing service operated by Promologis for INSA's residences (We don't mind if you do not live on the campus and you do your laundry here). The room is right next to the R2, with 3 dryers and 9 washers, is open 7d/7 24h/24 ! Here you can check their availability ! You can bring your own detergent, use the one given on site or buy it at the Proximo (cheaper than the one given by the machines ). You can pay by credit card or cash.",
|
||||||
"informationTab": "Information",
|
"informationTab": "Information",
|
||||||
"paymentTab": "Payment",
|
"paymentTab": "Payment",
|
||||||
"tariffs": "Tariffs",
|
"tariffs": "Tariffs",
|
||||||
|
|
|
@ -21,11 +21,11 @@
|
||||||
},
|
},
|
||||||
"slide3": {
|
"slide3": {
|
||||||
"title": "N'oubliez plus votre linge !",
|
"title": "N'oubliez plus votre linge !",
|
||||||
"text": "CAMPUS vous informe de la disponibilité des machines et vous permet d'être notifiés lorsque la vôtre se termine bientôt !"
|
"text": "CAMPUS vous informe de la disponibilité des machines et vous permet d'être notifié lorsque la vôtre se termine bientôt !"
|
||||||
},
|
},
|
||||||
"slide4": {
|
"slide4": {
|
||||||
"title": "Proximo",
|
"title": "Proximo",
|
||||||
"text": "Il vous manque des pâtes ? Ou un petit creux au gouter, regardez les stocks de votre supérette insaienne en temps réel"
|
"text": "Il vous manque des pâtes ? Ou un petit creux au goûter, regardez les stocks de votre supérette insaienne en temps réel"
|
||||||
},
|
},
|
||||||
"slide5": {
|
"slide5": {
|
||||||
"title": "Planex",
|
"title": "Planex",
|
||||||
|
@ -75,7 +75,7 @@
|
||||||
"dashboard": {
|
"dashboard": {
|
||||||
"seeMore": "Cliquez pour plus d'infos",
|
"seeMore": "Cliquez pour plus d'infos",
|
||||||
"todayEventsTitle": "Événements aujourd'hui",
|
"todayEventsTitle": "Événements aujourd'hui",
|
||||||
"todayEventsSubtitleNA": "Pas d'événements",
|
"todayEventsSubtitleNA": "Pas d'événement",
|
||||||
"todayEventsSubtitle": " événement aujourd'hui",
|
"todayEventsSubtitle": " événement aujourd'hui",
|
||||||
"todayEventsSubtitlePlural": " événements aujourd'hui",
|
"todayEventsSubtitlePlural": " événements aujourd'hui",
|
||||||
"proximoTitle": "Proximo",
|
"proximoTitle": "Proximo",
|
||||||
|
@ -110,8 +110,10 @@
|
||||||
"changelog": "Historique des modifications",
|
"changelog": "Historique des modifications",
|
||||||
"license": "Licence",
|
"license": "Licence",
|
||||||
"debug": "Debug",
|
"debug": "Debug",
|
||||||
|
"team": "Équipe",
|
||||||
"author": "Auteur",
|
"author": "Auteur",
|
||||||
"mail": "Envoyer un mail",
|
"authorMail": "Envoyer un mail",
|
||||||
|
"additionalDev": "Développeur additionnel",
|
||||||
"technologies": "Technologies",
|
"technologies": "Technologies",
|
||||||
"reactNative": "Créé avec React Native",
|
"reactNative": "Créé avec React Native",
|
||||||
"libs": "Librairies utilisées"
|
"libs": "Librairies utilisées"
|
||||||
|
@ -126,10 +128,12 @@
|
||||||
"listUpdateFail": "Erreur lors de la mise à jour de la list d'articles",
|
"listUpdateFail": "Erreur lors de la mise à jour de la list d'articles",
|
||||||
"loading": "Chargement...",
|
"loading": "Chargement...",
|
||||||
"inStock": "en stock",
|
"inStock": "en stock",
|
||||||
"description": "Le Proximo c’est ta petite épicerie étudiante tenu par les étudiants directement sur le campus. Ouvert tous les jours de 18h30 à 19h30, nous t’accueillons et te souvent quand tu n’as plus de pâtes ou de diluant ! Différents produits pour différentes galère, le tout à prix coûtant. Tu peux payer par Lydia ou par espèce.",
|
"description": "Le Proximo c’est ta petite épicerie étudiante tenue par les étudiants directement sur le campus. Ouverte tous les jours de 18h30 à 19h30, nous t’accueillons et te sauvons quand tu n’as plus de pâtes ou de diluant ! Différents produits pour différentes galères, le tout à prix coûtant. Tu peux payer par Lydia ou par espèce.",
|
||||||
"openingHours": "Horaires d'ouverture",
|
"openingHours": "Horaires d'ouverture",
|
||||||
"paymentMethods" : "Moyens de Paiement",
|
"paymentMethods" : "Moyens de Paiement",
|
||||||
"paymentMethodsDescription" : "Espèce ou Lydia"
|
"paymentMethodsDescription" : "Espèce ou Lydia",
|
||||||
|
"search": "Rechercher",
|
||||||
|
"all": "Tout"
|
||||||
},
|
},
|
||||||
"proxiwashScreen": {
|
"proxiwashScreen": {
|
||||||
"dryer": "Sèche-Linge",
|
"dryer": "Sèche-Linge",
|
||||||
|
@ -137,9 +141,9 @@
|
||||||
"washer": "Lave-Linge",
|
"washer": "Lave-Linge",
|
||||||
"washers": "Lave-Linges",
|
"washers": "Lave-Linges",
|
||||||
"min": "min",
|
"min": "min",
|
||||||
"listUpdated": "Etat des machines mis à jour",
|
"listUpdated": "État des machines mis à jour",
|
||||||
"listUpdateFail": "Erreur lors de la mise à jour de l'état des machines",
|
"listUpdateFail": "Erreur lors de la mise à jour de l'état des machines",
|
||||||
"error": "Impossible de mettre a jour l'état des machines. Tirez vers le bas pour reessayer.",
|
"error": "Impossible de mettre a jour l'état des machines. Tirez vers le bas pour réessayer.",
|
||||||
"loading": "Chargement...",
|
"loading": "Chargement...",
|
||||||
"description": "C'est le service de laverie proposé par promologis pour les résidences INSA (On t'en voudra pas si tu loges pas sur le campus et que tu fais ta machine ici). Le local situé au pied du R2 avec ses 3 sèche-linges et 9 machines est ouvert 7J/7 24h/24 ! Ici tu peux vérifier leur disponibilité ! Tu peux amener ta lessive, la prendre sur place ou encore mieux l'acheter au Proximo (moins chère qu'à la laverie directement). Tu peux payer par CB ou espèces.",
|
"description": "C'est le service de laverie proposé par promologis pour les résidences INSA (On t'en voudra pas si tu loges pas sur le campus et que tu fais ta machine ici). Le local situé au pied du R2 avec ses 3 sèche-linges et 9 machines est ouvert 7J/7 24h/24 ! Ici tu peux vérifier leur disponibilité ! Tu peux amener ta lessive, la prendre sur place ou encore mieux l'acheter au Proximo (moins chère qu'à la laverie directement). Tu peux payer par CB ou espèces.",
|
||||||
"informationTab": "Informations",
|
"informationTab": "Informations",
|
||||||
|
@ -152,7 +156,7 @@
|
||||||
"washerProcedure": "Déposer le linge dans le tambour sans le tasser et en respectant les charges.\n\nFermer la porte de l'appareil.\n\nSélectionner un programme avec l'une des quatre touches de programme favori standard.\n\nAprès avoir payé à la centrale de commande, appuyer sur le bouton marqué START du lave-linge.\n\nDès que le programme est terminé, l’afficheur indique 'Programme terminé', appuyer sur le bouton jaune d’ouverture du hublot pour récupérer le linge.",
|
"washerProcedure": "Déposer le linge dans le tambour sans le tasser et en respectant les charges.\n\nFermer la porte de l'appareil.\n\nSélectionner un programme avec l'une des quatre touches de programme favori standard.\n\nAprès avoir payé à la centrale de commande, appuyer sur le bouton marqué START du lave-linge.\n\nDès que le programme est terminé, l’afficheur indique 'Programme terminé', appuyer sur le bouton jaune d’ouverture du hublot pour récupérer le linge.",
|
||||||
"washerTips": "Programme blanc/couleur : 6kg de linge sec (textiles en coton, lin, linge de corps, draps, jeans,serviettes de toilettes).\n\nProgramme nonrepassable : 3,5 kg de linge sec (textiles en fibres synthétiques, cotonet polyester mélangés).\n\nProgramme fin 30°C : 2,5 kg de linge sec (textiles délicats en fibres synthétiques, rayonne).\n\nProgramme laine 30°C : 2,5 kg de linge sec (textiles en laine et lainages lavables).",
|
"washerTips": "Programme blanc/couleur : 6kg de linge sec (textiles en coton, lin, linge de corps, draps, jeans,serviettes de toilettes).\n\nProgramme nonrepassable : 3,5 kg de linge sec (textiles en fibres synthétiques, cotonet polyester mélangés).\n\nProgramme fin 30°C : 2,5 kg de linge sec (textiles délicats en fibres synthétiques, rayonne).\n\nProgramme laine 30°C : 2,5 kg de linge sec (textiles en laine et lainages lavables).",
|
||||||
"dryerProcedure": "Déposer le linge dans le tambour sans le tasser et en respectant les charges.\n\nFermer la porte de l'appareil.\n\nSélectionner un programme avec l'une des quatre touches de programme favori standard.\n\nAprès avoir payé à la centrale de commande, appuyer sur le bouton marqué START du lave-linge.",
|
"dryerProcedure": "Déposer le linge dans le tambour sans le tasser et en respectant les charges.\n\nFermer la porte de l'appareil.\n\nSélectionner un programme avec l'une des quatre touches de programme favori standard.\n\nAprès avoir payé à la centrale de commande, appuyer sur le bouton marqué START du lave-linge.",
|
||||||
"dryerTips": "La durée conseillée est de 35 minutes pour 14kg de linge. Vous pouvez choisir une durée plus courte si le seche-linge n'est pas chargé.",
|
"dryerTips": "La durée conseillée est de 35 minutes pour 14kg de linge. Vous pouvez choisir une durée plus courte si le sèche-linge n'est pas chargé.",
|
||||||
"procedure": "Procédure",
|
"procedure": "Procédure",
|
||||||
"tips": "Conseils",
|
"tips": "Conseils",
|
||||||
|
|
||||||
|
@ -161,7 +165,7 @@
|
||||||
"disableNotifications": "Désactiver les notifications",
|
"disableNotifications": "Désactiver les notifications",
|
||||||
"ok": "OK",
|
"ok": "OK",
|
||||||
"cancel": "Annuler",
|
"cancel": "Annuler",
|
||||||
"finished": "Cette machine est terminée. Si vous l'avez l'avez démarée, vous pouvez récupérer votre linge.",
|
"finished": "Cette machine est terminée. Si vous l'avez démarrée, vous pouvez récupérer votre linge.",
|
||||||
"ready": "Cette machine est vide et prête à être utilisée.",
|
"ready": "Cette machine est vide et prête à être utilisée.",
|
||||||
"running": "Cette machine a démarré à %{start} et terminera à %{end}.\nTemps restant : %{remaining} min",
|
"running": "Cette machine a démarré à %{start} et terminera à %{end}.\nTemps restant : %{remaining} min",
|
||||||
"broken": "Cette machine est hors service. Merci pour votre compréhension.",
|
"broken": "Cette machine est hors service. Merci pour votre compréhension.",
|
||||||
|
@ -171,7 +175,7 @@
|
||||||
|
|
||||||
},
|
},
|
||||||
"states": {
|
"states": {
|
||||||
"finished": "TERMINE",
|
"finished": "TERMINÉ",
|
||||||
"ready": "DISPONIBLE",
|
"ready": "DISPONIBLE",
|
||||||
"running": "EN COURS",
|
"running": "EN COURS",
|
||||||
"broken": "HORS SERVICE",
|
"broken": "HORS SERVICE",
|
||||||
|
@ -195,7 +199,7 @@
|
||||||
},
|
},
|
||||||
"general": {
|
"general": {
|
||||||
"loading": "Chargement...",
|
"loading": "Chargement...",
|
||||||
"networkError": "Impossible de contacter les serveurs. Assurez vous d'être connecté à internet."
|
"networkError": "Impossible de contacter les serveurs. Assurez-vous d'être connecté à internet."
|
||||||
},
|
},
|
||||||
"date": {
|
"date": {
|
||||||
"daysOfWeek": {
|
"daysOfWeek": {
|
||||||
|
|
Loading…
Reference in a new issue