revamp styles

kdastan · Jul 17, 2016 · ea24d88 · ea24d88
1 parent 80077c1
commit ea24d88
Show file tree

Hide file tree

Showing 15 changed files with 342 additions and 324 deletions.
diff --git a/example/data/messages.js b/example/data/messages.js
@@ -1,13 +1,23 @@
 module.exports = [
+  {
+    _id: 7,
+    text: 'Ok for me',
+    createdAt: new Date(Date.UTC(2016, 5, 11, 17, 50, 0)),
+    user: {
+      _id: 3,
+      name: 'Someone else',
+    },
+  },
   {
     _id: 6,
     text: 'In 10 minutes',
-    createdAt: new Date(Date.UTC(2016, 5, 11, 17, 30, 0)),
+    createdAt: new Date(Date.UTC(2016, 5, 11, 17, 40, 0)),
     user: {
       _id: 1,
       name: 'React Native developer',
     },
-  },  {
+  },
+  {
     _id: 5,
     text: 'Place Gambetta',
     createdAt: new Date(Date.UTC(2016, 5, 11, 17, 30, 0)),

diff --git a/example/react-native-gifted-messenger/src/DefaultStyles.js b/example/react-native-gifted-messenger/src/DefaultStyles.js
@@ -1,195 +1,3 @@
-import {
-  PixelRatio,
-} from 'react-native';
-
-/*
-** Message styles
-*/
-const messageStyles = {
-  LoadEarlier: {
-    container: {
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginTop: 5,
-      marginBottom: 10,
-    },
-    wrapper: {
-      alignItems: 'center',
-      backgroundColor: '#ccc',
-      borderRadius: 10,
-      paddingLeft: 10,
-      paddingRight: 10,
-      paddingTop: 5,
-      paddingBottom: 5,
-    },
-    text: {
-      backgroundColor: 'transparent',
-      color: '#fff',
-      fontSize: 12,
-    },
-  },
-  Message: {
-    left: {
-      container: {
-        flexDirection: 'row',
-        alignItems: 'flex-end',
-        justifyContent: 'flex-start',
-        marginLeft: 5,
-        marginRight: 0,
-      },
-    },
-    right: {
-      container: {
-        flexDirection: 'row',
-        alignItems: 'flex-end',
-        justifyContent: 'flex-end',
-        marginLeft: 0,
-        marginRight: 5,
-      },
-    },
-  },
-  Day: {
-    container: {
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginTop: 5,
-      marginBottom: 10,
-    },
-    wrapper: {
-      alignItems: 'center',
-      backgroundColor: '#ccc',
-      borderRadius: 10,
-      paddingLeft: 10,
-      paddingRight: 10,
-      paddingTop: 5,
-      paddingBottom: 5,
-    },
-    text: {
-      backgroundColor: 'transparent',
-      color: '#fff',
-      fontSize: 12,
-    },
-  },
-  Avatar: {
-    image: {
-      height: 40,
-      width: 40,
-    },
-    left: {
-      container: {
-        marginRight: 5,
-      },
-    },
-    right: {
-      container: {
-        marginLeft: 5,
-      },
-    },
-  },
-  Bubble: {
-    left: {
-      container: {
-        flex: 1,
-        alignItems: 'flex-start',
-      },
-      wrapper: {
-        borderRadius: 10,
-        backgroundColor: '#F1F0F0',
-        marginRight: 60,
-      },
-      containerToNext: {
-        borderBottomLeftRadius: 0,
-      },
-      containerToPrevious: {
-        borderTopLeftRadius: 0,
-      },
-    },
-    right: {
-      container: {
-        flex: 1,
-        alignItems: 'flex-end',
-      },
-      wrapper: {
-        borderRadius: 10,
-        backgroundColor: '#0084FF',
-        marginLeft: 60,
-      },
-      containerToNext: {
-        borderBottomRightRadius: 0,
-      },
-      containerToPrevious: {
-        borderTopRightRadius: 0,
-      },
-    },
-  },
-  BubbleImage: {
-    container: {
-    },
-    image: {
-      width: 150,
-      height: 100,
-      borderRadius: 8,
-      margin: 3,
-      resizeMode: 'cover',
-    },
-  },
-  ParsedText: {
-    left: {
-      container: {
-      },
-      text: {
-        color: 'black',
-        marginTop: 5,
-        marginBottom: 5,
-        marginLeft: 10,
-        marginRight: 10,
-      },
-      link: {
-        color: 'black',
-        textDecorationLine: 'underline',
-      },
-    },
-    right: {
-      container: {
-      },
-      text: {
-        color: 'white',
-        marginTop: 5,
-        marginBottom: 5,
-        marginLeft: 10,
-        marginRight: 10,
-      },
-      link: {
-        color: 'white',
-        textDecorationLine: 'underline',
-      },
-    },
-  },
-  Location: {
-    container: {
-    },
-    mapView: {
-      width: 150,
-      height: 100,
-      borderRadius: 8,
-      margin: 3,
-    },
-  },
-  Time: {
-    container: {
-      marginLeft: 10,
-      marginRight: 10,
-      marginBottom: 5,
-    },
-    text: {
-      fontSize: 11,
-      color: '#fff',
-      backgroundColor: 'transparent',
-      textAlign: 'right',
-    },
-  },
-};
-
 /*
 ** ToolbarInput styles
 */
@@ -201,55 +9,20 @@ const toolbarInputStyles = {
   minComposerHeight: 35,
   maxComposerHeight: 100,
 
-  InputToolbar: {
-    container: {
-      borderTopWidth: 1 / PixelRatio.get(),
-      borderTopColor: '#E6E6E6',
-      backgroundColor: '#FFFFFF',
-      flexDirection: 'row',
-      alignItems: 'flex-end',
-    },
-  },
-  Actions: {
-    container: {
-      justifyContent: 'center',
-      alignItems: 'center',
-      width: 30,
-      height: 27,
-      marginLeft: 10,
-      marginBottom: 12,
-    },
-    icon: {
-      width: 27,
-      height: 30,
-      tintColor: '#ccc',
-    },
-  },
   Composer: {
     textInput: {
       flex: 1,
       marginLeft: 10,
       fontSize: 17,
     },
   },
-  Send: {
-    container: {
-      paddingLeft: 10,
-      paddingRight: 10,
-      marginBottom: 17,
-    },
-    text: {
-      color: '#6699CC',
-      fontWeight: '600',
-      fontSize: 17,
-    },
-  },
 };
 
 
 /*
 ** Global styles
 */
+// TODO to deprecate?
 const globalStyles = {
   NavBar: {
     statusBar: {
@@ -268,4 +41,4 @@ const globalStyles = {
 };
 
 
-export default Object.assign({}, messageStyles, toolbarInputStyles, globalStyles);
+export default Object.assign({}, toolbarInputStyles, globalStyles);
diff --git a/example/react-native-gifted-messenger/src/components/Actions.js b/example/react-native-gifted-messenger/src/components/Actions.js
@@ -1,10 +1,11 @@
 import React, { Component, PropTypes } from 'react';
 import {
   Image,
+  StyleSheet,
   TouchableOpacity,
 } from 'react-native';
 
-class Actions extends Component {
+export default class Actions extends Component {
   constructor(props) {
     super(props);
     this.onActionsPress = this.onActionsPress.bind(this);
@@ -37,7 +38,7 @@ class Actions extends Component {
     }
     return (
       <Image
-        style={this.props.customStyles.Actions.icon}
+        style={[styles.icon, this.props.iconStyle]}
         resizeMode={'contain'}
         source={require('../../assets/paperclip.png')}
       />
@@ -47,7 +48,7 @@ class Actions extends Component {
   render() {
     return (
       <TouchableOpacity
-        style={this.props.customStyles.Actions.container}
+        style={[styles.container, this.props.containerStyle]}
         onPress={this.onActionsPress}
       >
         {this.renderIcon()}
@@ -56,16 +57,31 @@ class Actions extends Component {
   }
 }
 
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 30,
+    height: 27,
+    marginLeft: 10,
+    marginBottom: 12,
+  },
+  icon: {
+    width: 27,
+    height: 30,
+    tintColor: '#ccc',
+  },
+});
+
 // required by @exponent/react-native-action-sheet
 Actions.contextTypes = {
   actionSheet: PropTypes.func,
 };
 
 Actions.defaultProps = {
   onSend: () => {},
-  customStyles: {},
+  containerStyle: {},
+  iconStyle: {},
   options: {},
   icon: null,
 };
-
-export default Actions;