add additional proptypes, update readme

Author: Peter Piekarczyk

README.md

@@ -38,8 +38,20 @@ const FACES = [
 
 // ...
 
-<FacePile faces={FACES} additionalFaces={10} />
+<FacePile faces={FACES} overflow={10} />
 
 ```
 
 ## Proptypes
+
+```es6
+faces: PropTypes.shape({
+  imageUrl: PropTypes.string
+}),
+overflow: PropTypes.number,
+circleHeight: PropTypes.number,
+circleWidth: PropTypes.number,
+containerStyle: PropTypes.style,
+circleStyle: PropTypes.style,
+overflowStyle: PropTypes.styles
+```

package.json

@@ -5,6 +5,9 @@
   "main": "src/index.js",
   "repository": "git@github.com:peterpme/react-native-face-pile.git",
   "author": "Peter Piekarczyk <peterpiekarczyk@gmail.com>",
+  "scripts": {
+    "release": "npm version patch && npm publish && git push --tags"
+  },
   "keywords": [
     "facepile",
     "face-pile",
@@ -17,5 +20,8 @@
   "peerDependencies": {
     "react": "^15.6.1",
     "react-native": "^0.46.4"
+  },
+  "devDependencies": {
+    "prop-types": "^15.5.10"
   }
 }

src/index.js

@@ -1,7 +1,9 @@
 // @flow
-import React from 'react'
-import type { StyleObj } from 'react-native/Libraries/StyleSheet/StyleSheetTypes'
-import { View, Text, Image, StyleSheet } from 'react-native'
+
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import type { StyleObj } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
+import { View, Text, Image, StyleSheet } from 'react-native';
 
 const styles = StyleSheet.create({
   container: {
@@ -28,7 +30,7 @@ const styles = StyleSheet.create({
   avatar: {
     width: 40,
     height: 40,
-    borderRadius: 20,
+    borderRadius: 20
   },
   extra: {
     backgroundColor: '#b6c0ca',
@@ -40,67 +42,88 @@ const styles = StyleSheet.create({
     color: '#333',
     fontSize: 12
   }
-})
-
-function renderFace (face, index) {
-  return (
-    <View key={face.id || index} style={styles.circle}>
-      <View style={styles.avatarContainer}>
-        <Image
-          style={styles.avatar}
-          source={{ uri: face.imageUrl }}
-          resizeMode='contain'
-        />
-      </View>
-    </View>
-  )
-}
-
-function renderoverflow (overflow) {
-  return (
-    <View style={styles.circle}>
-      <View style={[styles.avatar, styles.extra]}>
-        <Text style={styles.extraLabel}>
-          +{overflow}
-        </Text>
-      </View>
-    </View>
-  )
-}
+});
 
 type Face = {
   imageUrl: string,
   id?: string
-}
+};
 
 type FacePileType = {
   faces: Array<Face>,
   overflow: number,
   containerStyle?: StyleObj
-}
+};
+
+class FacePile extends PureComponent {
+  static propTypes = {
+    faces: PropTypes.shape({
+      imageUrl: PropTypes.string
+    }),
+    overflow: PropTypes.number,
+    circleHeight: PropTypes.number,
+    circleWidth: PropTypes.number,
+    containerStyle: PropTypes.style,
+    circleStyle: PropTypes.style,
+    overflowStyle: PropTypes.styles
+  };
+
+  static defaultProps = {
+    faces: [
+      {
+        imageUrl: 'https://lorempixel.com/200/200/people'
+      },
+      {
+        imageUrl: 'https://lorempixel.com/200/203/people'
+      },
+      {
+        imageUrl: 'https://lorempixel.com/200/201/people'
+      },
+      {
+        imageUrl: 'https://lorempixel.com/200/202/people'
+      }
+    ],
+    overflow: 8
+  };
+
+  _renderOverflowCircle = overflow => {
+    const { overflowStyle } = this.props;
+    return (
+      <View style={styles.circle}>
+        <View style={[styles.avatar, styles.extra, overflowStyle]}>
+          <Text style={styles.extraLabel}>
+            +{overflow}
+          </Text>
+        </View>
+      </View>
+    );
+  };
 
-const FacePile = ({ faces, overflow, containerStyle }: FacePileType) =>
-  <View style={[styles.container, containerStyle]}>
-    {renderoverflow(overflow)}
-    {faces.map(renderFace)}
-  </View>
+  _renderFace = face => {
+    const { circleStyle, circleHeight, circleWidth } = this.props
+    if (!face.imageUrl) return null;
+    return (
+      <View key={face.id || index} style={styles.circle}>
+        <View style={[styles.avatarContainer, circleStyle, { width: circleWidth, height: circleHeight }]}>
+          <Image
+            style={[styles.avatar, { width: circleWidth / 2, height: circleHeight / 2}]}
+            source={{ uri: face.imageUrl }}
+            resizeMode="contain"
+          />
+        </View>
+      </View>
+    );
+  };
 
-FacePile.defaultProps = {
-  faces: [
-    {
-      imageUrl: 'https://lorempixel.com/200/200/people'
-    },
-    {
-      imageUrl: 'https://lorempixel.com/200/203/people'
-    },
-    {
-      imageUrl: 'https://lorempixel.com/200/201/people'
-    },
-    {
-      imageUrl: 'https://lorempixel.com/200/202/people'
-    }
-  ],
-  overflow: 8
+  render() {
+    const { faces, overflow, containerStyle } = this.props;
+    return (
+      <View style={[styles.container, containerStyle]}>
+        {this._renderOverflowCircle(overflow)}
+        {faces.map(this._renderFace)}
+      </View>
+    );
+  }
 }
 
-export default FacePile
+export default FacePile;