From d7b406efa97b545e0a07e645bbf904ab3de11538 Mon Sep 17 00:00:00 2001 From: Sankhadeep Roy Date: Wed, 27 Apr 2016 19:36:07 +0530 Subject: [PATCH] lists updated with badges and avatars --- Components/Themes/light.js | 13 ++++- Components/Widgets/Badge.js | 41 +++++++++++++++ Components/Widgets/ListItem.js | 91 +++++++++++++++++++++++++--------- index.js | 4 +- 4 files changed, 122 insertions(+), 27 deletions(-) create mode 100644 Components/Widgets/Badge.js diff --git a/Components/Themes/light.js b/Components/Themes/light.js index bfd1f0f64..95ea7f98e 100644 --- a/Components/Themes/light.js +++ b/Components/Themes/light.js @@ -81,6 +81,7 @@ module.exports = { return this.inverseTextColor; }, + borderWidth: 1, inputColor: "#000", inputBorderColor: "#000", @@ -99,6 +100,14 @@ module.exports = { jumbotronBg: "#C9C9CE", contentPadding: contentPadding, - - listBorderColor: "#ddd" + + listBorderColor: "#ddd", + listDividerBg: "#F5F5F5", + listItemPadding: 15, + listNoteColor: "#58575C", + + iconFontSize: 27, + + badgeColor: "#fff", + badgeBg: "#ED1727" } \ No newline at end of file diff --git a/Components/Widgets/Badge.js b/Components/Widgets/Badge.js new file mode 100644 index 000000000..b68effcb7 --- /dev/null +++ b/Components/Widgets/Badge.js @@ -0,0 +1,41 @@ +/* @flow */ +'use strict'; + +import React, {Text, View } from 'react-native'; +import NativeBaseComponent from '../Base/NativeBaseComponent'; +import _ from 'lodash'; +import computeProps from '../../Utils/computeProps'; + + +export default class BadgeNB extends NativeBaseComponent { + + prepareRootProps() { + + var type = { + color: this.getTheme().badgeColor, + fontSize: this.getTheme().fontSizeBase, + backgroundColor: this.getTheme().badgeBg, + padding: 4, + alignSelf: 'flex-start', + borderRadius: 13, + width: 27, + textAlign: 'center' + + } + + var defaultProps = { + style: type + } + + return computeProps(this.props, defaultProps); + + } + render() { + return( + + {this.props.children} + ); + } + +} + diff --git a/Components/Widgets/ListItem.js b/Components/Widgets/ListItem.js index 2f87b28bc..5040e2491 100644 --- a/Components/Widgets/ListItem.js +++ b/Components/Widgets/ListItem.js @@ -16,11 +16,9 @@ export default class ListItemNB extends NativeBaseComponent { getInitialStyle() { return { listItem: { - borderBottomWidth: 1, - padding: 8, + borderBottomWidth: this.getTheme().borderWidth, + padding: this.getTheme().listItemPadding, borderRadius: 1, - paddingRight: 10, - paddingLeft: 10, flex: 1, justifyContent: (this.buttonPresent()) ? 'space-between' : 'flex-start', flexDirection: 'row', @@ -28,24 +26,28 @@ export default class ListItemNB extends NativeBaseComponent { borderColor: this.getTheme().listBorderColor }, listItemDivider: { - borderBottomWidth: 1, - padding: 7, - backgroundColor: '#ddd', + borderBottomWidth: this.getTheme().borderWidth, + padding: this.getTheme().listItemPadding, + backgroundColor: this.getTheme().listDividerBg, flex: 1, justifyContent: (this.buttonPresent()) ? 'space-between' : 'flex-start', flexDirection: 'row', borderColor: this.getTheme().listBorderColor }, itemText: { - fontSize: 18, + fontSize: 16, + }, + dividerItemText: { + fontSize: 16, + fontWeight: '500' }, itemIcon: { - fontSize: 27, + fontSize: this.getTheme().iconFontSize, color: 'black' }, itemNote: { fontSize: 15, - color: '#58575C', + color: this.getTheme().listNoteColor, alignSelf: 'center', fontWeight: '100', flex: 1, @@ -71,6 +73,22 @@ export default class ListItemNB extends NativeBaseComponent { flex: 1, paddingLeft: 10 + }, + right2 : { + flex: 1, + flexDirection: 'row', + paddingLeft: 10, + alignItems: 'center', + justifyContent: 'space-between' + + }, + right3 : { + flex: 1, + flexDirection: 'row', + paddingLeft: 10, + alignItems: 'center', + justifyContent: 'space-between' + } } } @@ -120,20 +138,27 @@ export default class ListItemNB extends NativeBaseComponent { } } else if(child.type == Text) { - if(child.props.note && this.thumbnailPresent()) { - defaultProps = { - style: this.getInitialStyle().itemSubNote - } - } - else if(child.props.note) { - defaultProps = { - style: this.getInitialStyle().itemNote - } - } - else { - defaultProps = { - style: this.getInitialStyle().itemText + if (this.props.itemDivider) { + defaultProps = { + style: this.getInitialStyle().dividerItemText } + } else { + if(child.props.note && this.thumbnailPresent()) { + defaultProps = { + style: this.getInitialStyle().itemSubNote + } + } + else if(child.props.note) { + defaultProps = { + style: this.getInitialStyle().itemNote + } + } + else { + defaultProps = { + style: this.getInitialStyle().itemText + } + } + } } else if(child.type == Icon) { @@ -171,6 +196,23 @@ export default class ListItemNB extends NativeBaseComponent { } + + notePresent() { + + var notePresent = false; + if (this.thumbnailPresent()) { + React.Children.forEach(this.props.children, function (child) { + if(child.type == Text && child.props.note) + notePresent = true; + }) + + } + + return notePresent; + + + } + renderChildren() { if(!this.thumbnailPresent() && !this.iconPresent()) { var newChildren = React.Children.map(this.props.children, (child) => { @@ -189,7 +231,8 @@ export default class ListItemNB extends NativeBaseComponent { else { var childrenArray = React.Children.toArray(this.props.children); newChildren.push(React.cloneElement(childrenArray[0], this.getChildProps(childrenArray[0]))); - newChildren.push( + newChildren.push( {childrenArray.slice(1).map((child) => { return React.cloneElement(child, this.getChildProps(child)); })} diff --git a/index.js b/index.js index 46cd2a243..7ff64446f 100644 --- a/index.js +++ b/index.js @@ -22,6 +22,7 @@ import InputGroup from './Components/Widgets/InputGroup'; import Icon from './Components/Widgets/Icon'; import Thumbnail from './Components/Widgets/Thumbnail'; import Card from './Components/Widgets/Card'; +import Badge from './Components/Widgets/Badge'; module.exports = { Header: Header, @@ -43,5 +44,6 @@ module.exports = { InputGroup: InputGroup, Icon: Icon, Thumbnail: Thumbnail, - Card: Card + Card: Card, + Badge: Badge };