From 1e8bd50a81a47267a2f21a798e875c047a0c2d20 Mon Sep 17 00:00:00 2001
From: nader dabit <dabit3@gmail.com>
Date: Thu, 22 Dec 2016 11:48:31 -0600
Subject: [PATCH] added badge and label properties to ListItem

---
 .DS_Store            | Bin 0 -> 6148 bytes
 Readme.MD            |  23 +++++++++++++++++++++++
 src/badge/badge.js   |  32 ++++++++++++++++++++++++++++++++
 src/list/ListItem.js |  20 ++++++++++++++++++--
 4 files changed, 73 insertions(+), 2 deletions(-)
 create mode 100644 .DS_Store
 create mode 100644 src/badge/badge.js

diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..5172429f264de2441865cb4700216d4256da9242
GIT binary patch
literal 6148
zcmeH~J!%6%427R!7lt%jx}3%b$PET#pTHLgIFQEJ;E>dF^gR7ES*H$5cmnB-G%I%Z
zD|S`@Z2$T80!#olbXV*=%*>dt@PRwdU#I)^a=X5>;#J@&VrHyNnC;iLL<B@Y1Vlgt
zL|{P#@)XDBc|p&lM-c%LSOx+AJ~X;(FCD4z>0pQvfVyTmjO&;ssLc!1UOG})p;=82
zR;?Ceh}WZ?+UmMqI#RP8R>OzYoz15hnq@nzF`-!xQ4j$Um=RcIKKc27r2jVm&svm<
zfC&6E0=7P!4tu^-ovjbA=k?dB`g+i*aXG_}p8zI)6mRKa+;6_1_R^8c3Qa!(fk8n8
H{*=HsM+*^=

literal 0
HcmV?d00001

diff --git a/Readme.MD b/Readme.MD
index b31f0f4f69..cf05daf0cd 100644
--- a/Readme.MD
+++ b/Readme.MD
@@ -440,6 +440,29 @@ render () {
 | rightTitle | none | string | provide a rightTitle to have a title show up on the right side of the button, will override any icon on the right |
 | rightTitleContainerStyle | flex: 1, alignItems: 'flex-end', justifyContent: 'center' | object (style) | style the outer container of the rightTitle text |
 | rightTitleStyle | marginRight: 5, color: '#bdc6cf' | object (style) | style the text of the rightTitle text |
+| label | none | react native component | add a label with your own styling by providing a label={<SomeComponent />} prop to ListItem |
+
+#### Badges 
+
+You can now easily add a badge to your List Item    
+
+| prop | default | type | description |
+| ---- | ---- | ----| ---- |
+| badge | none | object, accepts the following properties: value (string), badgeContainerStyle (object), badgeTextStyle (object). You can override the default badge by providing your own component with it's own styling by providing badge={{ element: <YourCustomElement /> }} | add a badge to the ListItem by using this prop |     
+
+Example badge usage
+```
+<ListItem
+  ...
+  badge={{ value: 3, badgeTextStyle: { color: 'orange' }, badgeContainerStyle: { marginTop: -20 } }}
+/>      
+
+<ListItem 
+  ...
+  badge={{ element: <MyCustomElement /> }}
+/>
+
+```
 
 
 ## SideMenu
diff --git a/src/badge/badge.js b/src/badge/badge.js
new file mode 100644
index 0000000000..f5b629ea90
--- /dev/null
+++ b/src/badge/badge.js
@@ -0,0 +1,32 @@
+import React from 'react'
+import { Text, View, StyleSheet } from 'react-native'
+
+let styles = {}
+
+const Badge = ({ badge }) => {
+  if (badge.element) return badge.element
+  return (
+    <View style={[ styles.badge, badge.badgeContainerStyle ]}>
+      <Text style={[ styles.text, badge.badgeTextStyle ]}>{badge.value}</Text>
+    </View>
+  )
+}
+
+styles = StyleSheet.create({
+  badge: {
+    top: 2,
+    padding: 12,
+    paddingTop: 3,
+    paddingBottom: 3,
+    backgroundColor: '#444',
+    borderRadius: 20,
+    position: 'absolute',
+    right: 30
+  },
+  text: {
+    fontSize: 14,
+    color: 'white'
+  }
+})
+
+export default Badge
diff --git a/src/list/ListItem.js b/src/list/ListItem.js
index 5281146dc3..693ec53ffd 100644
--- a/src/list/ListItem.js
+++ b/src/list/ListItem.js
@@ -1,5 +1,6 @@
 import React, { PropTypes } from 'react'
 import { View, StyleSheet, TouchableHighlight, Image, Platform } from 'react-native'
+import Badge from '../badge/badge'
 import Icon from '../icons/Icon'
 import Text from '../text/Text'
 import colors from '../config/colors'
@@ -30,6 +31,10 @@ const ListItem = ({
   rightTitleContainerStyle,
   rightTitleStyle,
   subtitleContainerStyle,
+  badge,
+  badgeContainerStyle,
+  badgeTextStyle,
+  label,
 }) => {
   let Component = onPress ? TouchableHighlight : View
   if (component) {
@@ -93,10 +98,20 @@ const ListItem = ({
                 style={styles.chevron}
                 size={28}
                 name={rightIcon.name}
-                color={rightIcon.color || chevronColor} />
+                color={rightIcon.color || chevronColor}
+              />
             </View>
           )
         }
+        {
+          badge && (
+            <Badge
+              badge={badge}
+            />)
+        }
+        {
+          label && label
+        }
         {
           rightTitle && (
             <View style={[styles.rightTitleContainer, rightTitleContainerStyle]}>
@@ -131,7 +146,8 @@ ListItem.propTypes = {
   titleStyle: PropTypes.any,
   hideChevron: PropTypes.bool,
   chevronColor: PropTypes.string,
-  roundAvatar: PropTypes.bool
+  roundAvatar: PropTypes.bool,
+  badge: PropTypes.any,
 }
 
 styles = StyleSheet.create({