Gravatar component added

GeekyAnts · Nov 21, 2016 · 659548f · 659548f
1 parent 04117da
commit 659548f
Show file tree

Hide file tree

Showing 5 changed files with 124 additions and 6 deletions.
diff --git 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
@@ -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(
+            <Image ref={c => this._root = c} {...props} source={{uri:uri}}/>
+            );
+    }
+}
diff --git 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 {
                     })}
                     </View>);
             }
+            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(<View key='listItem1' style={{flexDirection: 'column', paddingLeft: 15, alignSelf: (this.squareThumbs()) ? 'flex-start' : 'center', flex: 1 }} >
+                    {childrenArray.map((child, i) => {
+                        return React.cloneElement(child, {...this.getChildProps(child), key: i});
+                    })}
+                    </View>);
+            }
             else if (this.checkBoxPresent()) {
 
                 iconElement = _.remove(childrenArray, function(item) {

diff --git 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
@@ -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",