Merge branch 'pr/23'

index.js

@@ -8,6 +8,7 @@ import Input from './src/Input'
 import Label from './src/Label'
 import Select from './src/Select'
 import Switch from './src/Switch'
+import Theme from './src/Theme'
 
 export {
   ActionsContainer,
@@ -19,5 +20,6 @@ export {
   Input,
   Label,
   Select,
-  Switch
+  Switch,
+  Theme
 }

src/ActionsContainer.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { View } from 'react-native'
 import styled from 'styled-components/native'
-import defaultTheme from './theme'
+import defaultTheme from './Theme'
 
 const ButtonGroup = styled.View`
   height: ${props => props.theme.Button.height};

src/Button.js

@@ -9,7 +9,7 @@ import {
 } from 'react-native'
 import styled from 'styled-components/native'
 import Icon from 'react-native-vector-icons/Ionicons'
-import defaultTheme from './theme'
+import defaultTheme from './Theme'
 
 const ButtonWrapper = styled.View`
   flex:1;
@@ -80,10 +80,12 @@ const Button = props => {
   return (
     <ButtonWrapper>
       <Touchable {...rest}>
-        <ButtonStyle>
+        <ButtonStyle theme={theme}>
           <ButtonTextWrapper>
             {iconPlacement === 'left' && IconWrapped}
-            <ButtonText>{ children }</ButtonText>
+            <ButtonText theme={theme}>
+              { children }
+            </ButtonText>
             {iconPlacement === 'right' && IconWrapped}
           </ButtonTextWrapper>
         </ButtonStyle>

src/Fieldset.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Text, View } from 'react-native'
 import styled from 'styled-components/native'
-import defaultTheme from './theme'
+import defaultTheme from './Theme'
 
 const FieldsetLabelText = styled.Text`
   color: ${props => props.theme.Fieldset.labelColor };
@@ -18,7 +18,7 @@ const FieldsetLabel = props => <View><FieldsetLabelText>{ props.children }</Fiel
 
 const FieldsetWrapper = styled.View`
   borderBottomColor: ${props => props.theme.Fieldset.borderBottomColor };
-  borderBottomWidth: ${props => props.last ? 0 : 1 };
+  borderBottomWidth: ${props => props.last ? 0 : props.theme.Fieldset.borderBottomWidth };
   padding: ${props => props.theme.Fieldset.padding };
 `
 
@@ -31,10 +31,10 @@ const FieldsetFormWrapper = styled.View`
 `
 
 const Fieldset = props => {
-  const { children, label, last } = props
+  const { children, label, last, theme } = props
 
   return (
-    <FieldsetWrapper last={last}>
+    <FieldsetWrapper last={last} theme={theme}>
       { /* text-transform is for some reason not supported in react native https://github.com/facebook/react-native/issues/2088 */ }
       { label && <FieldsetLabel>{ label.toUpperCase() }</FieldsetLabel> }
       <FieldsetFormWrapper>

src/FormGroup.js

@@ -2,12 +2,12 @@ import React from 'react'
 import { View, TextInput } from 'react-native'
 import styled from 'styled-components/native'
 import _ from 'lodash'
-import defaultTheme from './theme'
+import defaultTheme from './Theme'
 
 /**
  * Calculate the height based on the given field properties.
  * The inline label and multiline properties affect the height.
- * 
+ *
  * @param {Object} props
  * @returns {int}
  */
@@ -43,7 +43,7 @@ FormGroupWrapper.defaultProps = {
 }
 
 const FormGroup = props => {
-  const { border, error, inlineLabel, multiline, numberOfLines, keyboardType, returnKeyType } = props
+  const { border, error, inlineLabel, theme, multiline, numberOfLines, keyboardType, returnKeyType } = props
   const children = React.Children.map(props.children, child => {
     let subsetOfProps = {}
     if (child.type.name === 'Input') {
@@ -52,7 +52,7 @@ const FormGroup = props => {
     }
 
     return React.cloneElement(child, Object.assign({}, child.props, {
-      inlineLabel, ...subsetOfProps
+      inlineLabel, theme, ...subsetOfProps
     }))
   })
 

src/Input.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import {TextInput, View} from 'react-native'
 import styled from 'styled-components/native'
-import defaultTheme from './theme'
+import defaultTheme from './Theme'
 
 /**
  * Calculate the height based on the given field properties.

src/Label.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Text, View, Platform } from 'react-native'
 import styled from 'styled-components/native'
-import defaultTheme from './theme'
+import defaultTheme from './Theme'
 
 const LabelWrapper = styled.View`
   flex: ${props => props.inlineLabel ? 0.5 : 1};
@@ -22,11 +22,11 @@ LabelText.defaultProps = {
 }
 
 const Label = props => {
-  const { children, inlineLabel } = props
+  const { children, inlineLabel, theme } = props
 
   return (
-    <LabelWrapper inlineLabel={inlineLabel}>
-      <LabelText inlineLabel={inlineLabel}>{ children }</LabelText>
+    <LabelWrapper inlineLabel={inlineLabel} theme={theme}>
+      <LabelText inlineLabel={inlineLabel} theme={theme} >{ children }</LabelText>
     </LabelWrapper>
   )
 }

src/Select.js

@@ -8,7 +8,7 @@ import {
 } from 'react-native'
 import styled from 'styled-components/native'
 import { default as BaseIcon } from 'react-native-vector-icons/Ionicons';
-import defaultTheme from './theme'
+import defaultTheme from './Theme'
 
 // TODO: FIXME
 const HaveNoIdeaWhyThisIsNeeded=3

src/Switch.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Switch as BaseSwitch, View } from 'react-native'
 import styled from 'styled-components'
-import defaultTheme from './theme'
+import defaultTheme from './Theme'
 
 const Switch = styled(BaseSwitch)`
 `

src/theme.js → src/Theme.js

@@ -1,4 +1,4 @@
-const theme = {
+const Theme = {
   Button: {
     backgroundColor: '#4286dd',
     color: '#fff',
@@ -7,9 +7,13 @@ const theme = {
     height: 45
   },
   ErrorMessage: {
-    color: 'red'
+    color: 'red',
+    fontSize: 10,
+    marginBottom: 15,
+    textAlign: 'right'
   },
   Fieldset: {
+    borderBottomWidth: 1,
     borderBottomColor: '#ddd',
     labelColor: '#909090',
     labelSize: 9,
@@ -45,4 +49,4 @@ const theme = {
   }
 }
 
-export default theme
+export default Theme

src/redux-form/createInputCreator.js

@@ -2,29 +2,29 @@ import React from 'react'
 import { View } from 'react-native'
 import { FormGroup, Label } from '../../index'
 import styled from 'styled-components/native'
-import defaultTheme from '../theme'
+import defaultTheme from '../Theme
 
 const ErrorMessage = styled.Text`
   color: ${props => props.theme.ErrorMessage.color};
-  fontSize:10;
-  marginBottom:15;
-  textAlign:right;
+  fontSize: ${props => props.theme.ErrorMessage.fontSize};
+  marginBottom: ${props => props.theme.ErrorMessage.marginBottom};
+  textAlign: ${props => props.theme.ErrorMessage.textAlign};
 `
 
 ErrorMessage.defaultProps = {
   theme: defaultTheme
 }
 
 const render = renderComponent => props => {
-  const { border, input : { onChange, ...restInput }, label, inlineLabel, meta: { touched, error } } = props
+  const { border, input : { onChange, ...restInput }, label, inlineLabel, theme, meta: { touched, error } } = props
 
   return (
     <View>
       <FormGroup border={border} inlineLabel={inlineLabel} error={touched && !!error} {...props} >
         <Label>{ label }</Label>
         { renderComponent(props) }
       </FormGroup>
-      { touched && error && <ErrorMessage>{ error }</ErrorMessage> }
+      { touched && error && <ErrorMessage theme={theme}>{ error }</ErrorMessage> }
     </View>
   )
 }