Added support for native-base-shoutem-theme to native-base-web components

Components/Base/NativeBaseComponent.js

@@ -5,6 +5,8 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import lightTheme from '../Themes/light';
 
+const THEME_STYLE = "@@shoutem.theme/themeStyle";
+
 export default class NativeBaseComponent extends Component {
 	static contextTypes = {
 		theme: PropTypes.object,
@@ -23,23 +25,23 @@ export default class NativeBaseComponent extends Component {
 
 	getChildContext() {
 		return {
-			theme: this.props.theme ? this.props.theme : this.getTheme(),
-			foregroundColor: this.props.foregroundColor ?
-			this.props.foregroundColor : this.getTheme().textColor
+			theme: this.props.theme ? this.props.theme : this.context.theme,
+			foregroundColor: this.props.foregroundColor ? this.props.foregroundColor : this.getTheme().textColor
 		};
 	}
 
 	getContextForegroundColor() {
-		return this.context.foregroundColor
+		return this.context.foregroundColor || this.getTheme().textColor
 	}
 
 	getTheme() {
 		let theme = this.props.theme ? this.props.theme :
-		      this.context.theme || lightTheme;
-        if (typeof theme == 'function') {
-            return theme();
-        } else {
-            return theme;
-        }
+							this.context.theme ? this.context.theme[THEME_STYLE].variables :
+																	 lightTheme;
+		if (typeof theme == 'function') {
+				return theme();
+		} else {
+				return theme;
+		}
 	}
 }

Components/Widgets/Badge.js

@@ -3,13 +3,14 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connectStyle } from 'native-base-shoutem-theme';
 import {View} from 'react-native';
 import NativeBaseComponent from '../Base/NativeBaseComponent';
 import computeProps from '../../Utils/computeProps';
+import mapPropsToStyleNames from '../../Utils/mapPropsToStyleNames';
 import Text from './Text';
 
-
-export default class BadgeNB extends NativeBaseComponent {
+class BadgeNB extends NativeBaseComponent {
 
     propTypes: {
         style : PropTypes.object
@@ -58,3 +59,5 @@ export default class BadgeNB extends NativeBaseComponent {
     }
 
 }
+
+export default connectStyle("NativeBase.Badge", {}, mapPropsToStyleNames)(BadgeNB);

Components/Widgets/Button.js

@@ -3,17 +3,18 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connectStyle } from 'native-base-shoutem-theme';
 import { TouchableOpacity } from 'react-native';
 import Platform from '../../Utils/platform';
 import NativeBaseComponent from '../Base/NativeBaseComponent';
+import mapPropsToStyleNames from '../../Utils/mapPropsToStyleNames';
 import computeProps from '../../Utils/computeProps';
 import IconNB from './Icon';
 import Icon from './Icon';
 import Text from './Text';
 import _ from 'lodash';
 
-
-export default class Button extends NativeBaseComponent {
+class Button extends NativeBaseComponent {
 
     propTypes: {
         style : PropTypes.object,
@@ -196,3 +197,9 @@ export default class Button extends NativeBaseComponent {
         );
     }
 }
+
+export default connectStyle(
+    "NativeBase.Button",
+    {},
+    mapPropsToStyleNames
+)(Button);

Components/Widgets/Card.js

@@ -3,11 +3,13 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connectStyle } from 'native-base-shoutem-theme';
 import {View} from 'react-native';
 import NativeBaseComponent from '../Base/NativeBaseComponent';
 import computeProps from '../../Utils/computeProps';
+import mapPropsToStyleNames from '../../Utils/mapPropsToStyleNames';
 
-export default class CardNB extends NativeBaseComponent {
+class CardNB extends NativeBaseComponent {
 
     propTypes: {
         style : PropTypes.object
@@ -59,3 +61,5 @@ export default class CardNB extends NativeBaseComponent {
     }
 
 }
+
+export default connectStyle("NativeBase.Card", {}, mapPropsToStyleNames)(CardNB);

Components/Widgets/CardItem.js

@@ -4,16 +4,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Image} from 'react-native';
+import { connectStyle } from 'native-base-shoutem-theme';
 import NativeBaseComponent from '../Base/NativeBaseComponent';
 import computeProps from '../../Utils/computeProps';
+import mapPropsToStyleNames from '../../Utils/mapPropsToStyleNames';
 import Icon from './Icon';
 import Text from './Text';
 import View from './View';
 import Button from './Button';
 import Thumbnail from './Thumbnail';
 import _ from 'lodash';
 
-export default class CardItemNB extends NativeBaseComponent {
+class CardItemNB extends NativeBaseComponent {
 
     propTypes: {
         style : PropTypes.object,
@@ -298,3 +300,6 @@ export default class CardItemNB extends NativeBaseComponent {
         );
     }
 }
+
+export default connectStyle("NativeBase.CardItem", {}, mapPropsToStyleNames)(CardItemNB);
+

Components/Widgets/CardSwiper.js

@@ -3,14 +3,15 @@
 
 import React from 'react';
 import clamp from 'clamp';
+import { connectStyle } from 'native-base-shoutem-theme';
 import {Animated, PanResponder} from 'react-native';
 import NativeBaseComponent from '../Base/NativeBaseComponent';
 import View from './View';
-
+import mapPropsToStyleNames from '../../Utils/mapPropsToStyleNames';
 
 var SWIPE_THRESHOLD = 120;
 
-export default class CardSwiper extends NativeBaseComponent {
+class CardSwiper extends NativeBaseComponent {
 
     constructor(props) {
         super(props);
@@ -105,3 +106,10 @@ export default class CardSwiper extends NativeBaseComponent {
     }
 
 }
+
+export default connectStyle(
+    "NativeBase.CardSwiper",
+    {},
+    mapPropsToStyleNames
+  )(CardSwiper);
+

Components/Widgets/Checkbox.js

@@ -3,11 +3,13 @@
 
 import React from 'react';
 import {View} from 'react-native';
+import { connectStyle } from 'native-base-shoutem-theme';
 import NativeBaseComponent from '../Base/NativeBaseComponent';
 import Icon from './Icon';
 import Platform from '../../Utils/platform';
+import mapPropsToStyleNames from '../../Utils/mapPropsToStyleNames';
 
-export default class CheckBox extends NativeBaseComponent {
+class CheckBox extends NativeBaseComponent {
 
     getInitialStyle() {
         return {
@@ -39,3 +41,9 @@ export default class CheckBox extends NativeBaseComponent {
         );
     }
 }
+
+export default connectStyle(
+    "NativeBase.CheckBox",
+    {},
+    mapPropsToStyleNames
+  )(CheckBox);

Components/Widgets/Container.js

@@ -3,6 +3,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connectStyle } from 'native-base-shoutem-theme';
 import {View, Image, Dimensions} from 'react-native';
 import ViewNB from './View';
 import Header from './Header';
@@ -11,8 +12,9 @@ import Footer from './Footer';
 import NativeBaseComponent from '../Base/NativeBaseComponent';
 import _ from 'lodash';
 import computeProps from '../../Utils/computeProps';
+import mapPropsToStyleNames from '../../Utils/mapPropsToStyleNames';
 
-export default class Container extends NativeBaseComponent {
+class Container extends NativeBaseComponent {
 
   propTypes: {
     style : PropTypes.object
@@ -140,3 +142,9 @@ export default class Container extends NativeBaseComponent {
   }
 
 }
+
+export default connectStyle(
+  "NativeBase.Container",
+  {},
+  mapPropsToStyleNames
+)(Container);

Components/Widgets/Content.js

@@ -3,11 +3,13 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connectStyle } from 'native-base-shoutem-theme';
 import NativeBaseComponent from '../Base/NativeBaseComponent';
 import computeProps from '../../Utils/computeProps';
+import mapPropsToStyleNames from '../../Utils/mapPropsToStyleNames';
 import { ScrollView } from 'react-native';
 
-export default class Content extends NativeBaseComponent {
+class Content extends NativeBaseComponent {
 
 	propTypes: {
         padder : PropTypes.bool,
@@ -36,3 +38,9 @@ export default class Content extends NativeBaseComponent {
 		);
 	}
 }
+
+export default connectStyle(
+  "NativeBase.Content",
+  {},
+  mapPropsToStyleNames
+)(Content);

Components/Widgets/DeckSwiper.js

@@ -3,13 +3,15 @@
 
 import React from 'react';
 import clamp from 'clamp';
+import { connectStyle } from 'native-base-shoutem-theme';
 import {Animated, PanResponder} from 'react-native';
 import NativeBaseComponent from '../Base/NativeBaseComponent';
 import View from './View';
+import mapPropsToStyleNames from '../../Utils/mapPropsToStyleNames';
 
 var SWIPE_THRESHOLD = 70;
 
-export default class CardSwiper extends NativeBaseComponent {
+class DeckSwiper extends NativeBaseComponent {
 
     constructor(props) {
         super(props);
@@ -137,3 +139,9 @@ export default class CardSwiper extends NativeBaseComponent {
     }
 
 }
+
+export default connectStyle(
+    "NativeBase.DeckSwiper",
+    {},
+    mapPropsToStyleNames
+  )(DeckSwiper);

Components/Widgets/Footer.js

@@ -3,11 +3,13 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connectStyle } from 'native-base-shoutem-theme';
 import {View} from 'react-native';
 import NativeBaseComponent from '../Base/NativeBaseComponent';
 import computeProps from '../../Utils/computeProps';
+import mapPropsToStyleNames from '../../Utils/mapPropsToStyleNames';
 
-export default class Footer extends NativeBaseComponent {
+class Footer extends NativeBaseComponent {
 
     propTypes: {
         style : PropTypes.object
@@ -66,3 +68,9 @@ export default class Footer extends NativeBaseComponent {
         );
     }
 }
+
+export default connectStyle(
+    "NativeBase.Footer",
+    {},
+    mapPropsToStyleNames
+  )(Footer);

Components/Widgets/H1.js

@@ -3,12 +3,13 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connectStyle } from 'native-base-shoutem-theme';
 import Text from './Text';
 import NativeBaseComponent from '../Base/NativeBaseComponent';
 import computeProps from '../../Utils/computeProps';
+import mapPropsToStyleNames from '../../Utils/mapPropsToStyleNames';
 
-
-export default class H1NB extends NativeBaseComponent {
+class H1NB extends NativeBaseComponent {
 
     propTypes: {
         style : PropTypes.object
@@ -33,3 +34,9 @@ export default class H1NB extends NativeBaseComponent {
         );
     }
 }
+
+export default connectStyle(
+    "NativeBase.H1",
+    {},
+    mapPropsToStyleNames
+  )(H1NB);

Components/Widgets/H2.js

@@ -3,12 +3,14 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connectStyle } from 'native-base-shoutem-theme';
 import Text from './Text';
 import NativeBaseComponent from '../Base/NativeBaseComponent';
 import computeProps from '../../Utils/computeProps';
+import mapPropsToStyleNames from '../../Utils/mapPropsToStyleNames';
 
 
-export default class H2NB extends NativeBaseComponent {
+class H2NB extends NativeBaseComponent {
 
     propTypes: {
         style : PropTypes.object
@@ -34,3 +36,9 @@ export default class H2NB extends NativeBaseComponent {
     }
 
 }
+
+export default connectStyle(
+    "NativeBase.H2",
+    {},
+    mapPropsToStyleNames
+  )(H2NB);

Components/Widgets/H3.js

@@ -3,12 +3,14 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
+import { connectStyle } from 'native-base-shoutem-theme';
 import Text from './Text';
 import NativeBaseComponent from '../Base/NativeBaseComponent';
 import computeProps from '../../Utils/computeProps';
+import mapPropsToStyleNames from '../../Utils/mapPropsToStyleNames';
 
 
-export default class H3NB extends NativeBaseComponent {
+class H3NB extends NativeBaseComponent {
 
     propTypes: {
         style : PropTypes.object
@@ -34,3 +36,9 @@ export default class H3NB extends NativeBaseComponent {
     }
 
 }
+
+export default connectStyle(
+    "NativeBase.H3",
+    {},
+    mapPropsToStyleNames
+  )(H3NB);