diff --git a/Components/Widgets/CardItem.js b/Components/Widgets/CardItem.js index 0373bb5c1..748bef6ae 100644 --- a/Components/Widgets/CardItem.js +++ b/Components/Widgets/CardItem.js @@ -10,6 +10,7 @@ import Text from './Text'; import View from './View'; import Button from './Button'; import Thumbnail from './Thumbnail'; +import Gravatar from './Gravatar'; export default class CardItemNB extends NativeBaseComponent { @@ -26,7 +27,7 @@ export default class CardItemNB extends NativeBaseComponent { padding: (this.imagePresent() && !this.ifShowCase()) ? 0 : this.getTheme().listItemPadding, backgroundColor: this.getTheme().listBg, justifyContent: (this.buttonPresent()) ? 'space-between' : 'flex-start', - flexDirection: (this.thumbnailPresent() || this.iconPresent() || (this.notePresent() && this.ifShowCase())) ? 'row' : 'column', + flexDirection: (this.thumbnailPresent() || this.gravatarPresent() || this.iconPresent() || (this.notePresent() && this.ifShowCase())) ? 'row' : 'column', borderColor: this.getTheme().listBorderColor }, listItemDivider: { @@ -67,6 +68,9 @@ export default class CardItemNB extends NativeBaseComponent { thumbnail: { alignSelf: 'center' }, + gravatar: { + alignSelf: 'center' + }, fullImage: { alignSelf: 'stretch', height: this.ifShowCase() ? 120 : 300 @@ -108,6 +112,16 @@ export default class CardItemNB extends NativeBaseComponent { return thumbnailComponentPresent; } + gravatarPresent() { + var gravatarComponentPresent = false; + React.Children.forEach(this.props.children, function (child) { + if(child.type == Gravatar) + gravatarComponentPresent = true; + }) + + return gravatarComponentPresent; + } + imagePresent() { var imagePresent = false; React.Children.forEach(this.props.children, function (child) { @@ -162,7 +176,7 @@ export default class CardItemNB extends NativeBaseComponent { squareThumbs() { var squareThumbs = false; - if (this.thumbnailPresent()) { + if (this.thumbnailPresent() || this.gravatarPresent()) { React.Children.forEach(this.props.children, function (child) { if(child.props.square) squareThumbs = true; @@ -192,7 +206,7 @@ export default class CardItemNB extends NativeBaseComponent { } } else { - if(child.props.note && this.thumbnailPresent()) { + if(child.props.note && (this.thumbnailPresent() || this.gravatarPresent())) { defaultProps = { style: this.getInitialStyle().itemSubNote } @@ -219,6 +233,11 @@ export default class CardItemNB extends NativeBaseComponent { style: this.getInitialStyle().thumbnail } } + else if(child.type == Gravatar) { + defaultProps = { + style: this.getInitialStyle().gravatar + } + } else if(child.type == Image ) { defaultProps = { style: this.getInitialStyle().fullImage @@ -258,7 +277,7 @@ export default class CardItemNB extends NativeBaseComponent { renderChildren() { var newChildren = []; - if(!this.thumbnailPresent() && !this.iconPresent()) { + if((!this.thumbnailPresent() || !this.thumbnailPresent()) && !this.iconPresent()) { newChildren = React.Children.map(this.props.children, (child, i) => { return React.cloneElement(child, {...this.getChildProps(child), key: i}); }); diff --git a/Components/Widgets/Gravatar.js b/Components/Widgets/Gravatar.js new file mode 100644 index 000000000..1a5a06a98 --- /dev/null +++ b/Components/Widgets/Gravatar.js @@ -0,0 +1,62 @@ +/* @flow */ +'use strict'; + +import React from 'react'; +import {Image} from 'react-native'; +import NativeBaseComponent from '../Base/NativeBaseComponent'; +import computeProps from '../../Utils/computeProps'; +import _ from 'lodash'; +import md5 from 'blueimp-md5'; + +const GRAVATAR_URI = 'https://www.gravatar.com/avatar/'; + +export default class GravatarNB extends NativeBaseComponent { + + propTypes: { + email: React.PropTypes.string.isRequired, + style : React.PropTypes.object, + size : React.PropTypes.number, + circular : React.PropTypes.bool, + square : React.PropTypes.bool + } + + getInitialStyle() { + return { + gravatar: { + borderRadius: this.props.size ? this.props.size/2 : 15, + width: this.props.size ? this.props.size : 30, + height: this.props.size ? this.props.size : 30, + resizeMode: this.props.contain ? 'contain' : undefined + } + } + } + + prepareRootProps() { + var gravatarStyle = {}; + if(this.props.circular) { + gravatarStyle.width = this.props.size; + gravatarStyle.height = this.props.size; + gravatarStyle.borderRadius = this.props.size/2; + } + else if(this.props.square) { + gravatarStyle.width = this.props.size; + gravatarStyle.height = this.props.size; + gravatarStyle.borderRadius = 0; + } + + var defaultProps = { + style: _.merge(this.getInitialStyle().gravatar, gravatarStyle) + }; + + return computeProps(this.props, defaultProps); + } + + render() { + const props = this.prepareRootProps(); + + const uri = GRAVATAR_URI + md5(this.props.email) + '?s='+props.style.height; + return( + this._root = c} {...props} source={{uri:uri}}/> + ); + } +} diff --git a/Components/Widgets/ListItem.js b/Components/Widgets/ListItem.js index 5f35fb416..4100d8d27 100644 --- a/Components/Widgets/ListItem.js +++ b/Components/Widgets/ListItem.js @@ -11,6 +11,7 @@ import View from './View'; import Button from './Button'; import Badge from './Badge'; import Thumbnail from './Thumbnail'; +import Gravatar from './Gravatar'; import CheckBox from './Checkbox'; import Picker from './Picker'; import Radio from './Radio'; @@ -82,6 +83,9 @@ export default class ListItemNB extends NativeBaseComponent { thumbnail: { alignSelf: 'center' }, + Gravatar: { + alignSelf: 'center' + }, fullImage: { width: 300, height: 300 @@ -126,6 +130,16 @@ export default class ListItemNB extends NativeBaseComponent { return thumbnailComponentPresent; } + gravatarPresent() { + var gravatarComponentPresent = false; + React.Children.forEach(this.props.children, function (child) { + if(child && child.type == Gravatar) + gravatarComponentPresent = true; + }) + + return gravatarComponentPresent; + } + checkBoxPresent() { var checkBoxComponentPresent = false; React.Children.forEach(this.props.children, function (child) { @@ -228,7 +242,7 @@ export default class ListItemNB extends NativeBaseComponent { style: this.getInitialStyle().dividerItemText } } else { - if(child.props.note && this.thumbnailPresent()) { + if(child.props.note && (this.thumbnailPresent() || this.gravatarPresent())) { defaultProps = { style: this.getInitialStyle().itemSubNote } @@ -269,6 +283,11 @@ export default class ListItemNB extends NativeBaseComponent { style: this.getInitialStyle().thumbnail } } + else if(child && child.type == Gravatar) { + defaultProps = { + style: this.getInitialStyle().gravatar + } + } else { defaultProps = { foregroundColor: this.getContextForegroundColor() @@ -347,13 +366,14 @@ export default class ListItemNB extends NativeBaseComponent { squareThumbs() { var squareThumbs = false; - if (this.thumbnailPresent()) { + if (this.thumbnailPresent() || this.gravatarPresent()) { React.Children.forEach(this.props.children, function (child) { if(child.props.square) squareThumbs = true; }) } + return squareThumbs; } @@ -466,6 +486,20 @@ export default class ListItemNB extends NativeBaseComponent { })} ); } + else if (this.gravatarPresent()) { + + iconElement = _.remove(childrenArray, function(item) { + if(item.type == Gravatar) { + return true; + } + }); + newChildren.push(React.cloneElement(iconElement[0], {...this.getChildProps(iconElement[0]), key: 'listItem0'})); + newChildren.push( + {childrenArray.map((child, i) => { + return React.cloneElement(child, {...this.getChildProps(child), key: i}); + })} + ); + } else if (this.checkBoxPresent()) { iconElement = _.remove(childrenArray, function(item) { diff --git a/index.js b/index.js index e3a256712..31a2d3e6f 100644 --- a/index.js +++ b/index.js @@ -28,6 +28,7 @@ import FooterTab from './Components/Widgets/FooterTab'; import Tab from './Components/Widgets/Tab'; import Fab from './Components/Widgets/Fab'; import Thumbnail from './Components/Widgets/Thumbnail'; +import Gravatar from './Components/Widgets/Gravatar'; import CheckBox from './Components/Widgets/Checkbox'; import Radio from './Components/Widgets/Radio'; import Card from './Components/Widgets/Card'; @@ -63,6 +64,7 @@ module.exports = { Textarea: Textarea, Icon: Icon, Thumbnail: Thumbnail, + Gravatar: Gravatar, Card: Card, CardSwiper: CardSwiper, DeckSwiper: DeckSwiper, diff --git a/package.json b/package.json index 7d39a4658..e38bffebc 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "version": "0.5.12", "private": false, "dependencies": { + "blueimp-md5": "^2.5.0", "clamp": "^1.0.1", "color": "~0.11.1", "lodash": "~4.11.1",