diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000..5172429f26 Binary files /dev/null and b/.DS_Store differ 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={} 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: }} | add a badge to the ListItem by using this prop | + +Example badge usage +``` + + + }} +/> + +``` ## 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 ( + + {badge.value} + + ) +} + +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} + /> ) } + { + badge && ( + ) + } + { + label && label + } { rightTitle && ( @@ -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({