Merge branch 'release/0.0.7'

FaridSafi · Aug 14, 2016 · 70b95eb · 70b95eb
2 parents cbc7d71 + 3f367cf
commit 70b95eb
Show file tree

Hide file tree

Showing 20 changed files with 343 additions and 93 deletions.
diff --git a/README.md b/README.md
@@ -5,7 +5,7 @@ The most complete chat UI for React Native (formerly known as Gifted Messenger)
 ![](https://raw.githubusercontent.com/FaridSafi/react-native-gifted-chat/master/screenshots/gifted-chat-2.png)
 
 ## Dependency
-- React Native minimum version supported 0.29.0
+React Native minimum version `0.29.0`
 
 ## Installation
 `npm install react-native-gifted-chat --save`
@@ -22,6 +22,12 @@ Add `android:windowSoftInputMode="adjustResize"` to your Android Manifest `andro
 <!-- ... -->
 ```
 
+## Changelog
+### 0.0.7
+- New prop `isLoadingEarlier`
+- `title` prop of `Send` component has been renamed to `label`
+- PropTypes checking
+
 ## Example
 ```jsx
 import React, { Component } from 'react';
@@ -98,6 +104,7 @@ See [example/App.js](example/App.js)
 - **`isAnimated`** _(Bool)_ - animates the view when the keyboard appears
 - **`loadEarlier`** _(Bool)_ - enables the load earlier message button
 - **`onLoadEarlier`** _(Function)_ - function to call when loading earlier messages
+- **`isLoadingEarlier`** _(Bool)_ - display an ActivityIndicator when loading earlier messages
 - **`renderLoading`** _(Function)_ - render a loading view when initializing
 - **`renderLoadEarlier`** _(Function)_ - render the load earlier button
 - **`renderAvatar`** _(Function)_ - renders the message avatar

diff --git a/example/App.js b/example/App.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import {
   Platform,
   StyleSheet,
@@ -10,15 +10,17 @@ import { GiftedChat, Actions, Bubble } from 'react-native-gifted-chat';
 import CustomActions from './CustomActions';
 import CustomView from './CustomView';
 
-export default class Example extends Component {
+export default class Example extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
       messages: [],
       loadEarlier: true,
-      isTyping: null,
+      typingText: null,
+      isLoadingEarlier: false,
     };
 
+    this._isMounted = false;
     this.onSend = this.onSend.bind(this);
     this.onReceive = this.onReceive.bind(this);
     this.renderCustomActions = this.renderCustomActions.bind(this);
@@ -30,20 +32,36 @@ export default class Example extends Component {
   }
 
   componentWillMount() {
+    this._isMounted = true;
     this.setState(() => {
       return {
         messages: require('./data/messages.js'),
       };
     });
   }
 
+  componentWillUnmount() {
+    this._isMounted = false;
+  }
+
   onLoadEarlier() {
     this.setState((previousState) => {
       return {
-        messages: GiftedChat.prepend(previousState.messages, require('./data/old_messages.js')),
-        loadEarlier: false,
+        isLoadingEarlier: true,
       };
     });
+
+    setTimeout(() => {
+      if (this._isMounted === true) {
+        this.setState((previousState) => {
+          return {
+            messages: GiftedChat.prepend(previousState.messages, require('./data/old_messages.js')),
+            loadEarlier: false,
+            isLoadingEarlier: false,
+          };
+        });
+      }
+    }, 1000); // simulating network
   }
 
   onSend(messages = []) {
@@ -62,29 +80,31 @@ export default class Example extends Component {
       if ((messages[0].image || messages[0].location) || !this._isAlright) {
         this.setState((previousState) => {
           return {
-            isTyping: 'React Native is typing'
+            typingText: 'React Native is typing'
           };
         });
       }
     }
 
     setTimeout(() => {
-      if (messages.length > 0) {
-        if (messages[0].image) {
-          this.onReceive('Nice picture!');
-        } else if (messages[0].location) {
-          this.onReceive('My favorite place');
-        } else {
-          if (!this._isAlright) {
-            this._isAlright = true;
-            this.onReceive('Alright');
+      if (this._isMounted === true) {
+        if (messages.length > 0) {
+          if (messages[0].image) {
+            this.onReceive('Nice picture!');
+          } else if (messages[0].location) {
+            this.onReceive('My favorite place');
+          } else {
+            if (!this._isAlright) {
+              this._isAlright = true;
+              this.onReceive('Alright');
+            }
           }
         }
       }
 
       this.setState((previousState) => {
         return {
-          isTyping: null,
+          typingText: null,
         };
       });
     }, 1000);
@@ -154,11 +174,11 @@ export default class Example extends Component {
   }
 
   renderFooter(props) {
-    if (this.state.isTyping) {
+    if (this.state.typingText) {
       return (
         <View style={styles.footerContainer}>
           <Text style={styles.footerText}>
-            {this.state.isTyping}
+            {this.state.typingText}
           </Text>
         </View>
       );
@@ -173,6 +193,7 @@ export default class Example extends Component {
         onSend={this.onSend}
         loadEarlier={this.state.loadEarlier}
         onLoadEarlier={this.onLoadEarlier}
+        isLoadingEarlier={this.state.isLoadingEarlier}
 
         user={{
           _id: 1, // sent messages should have same user._id

diff --git a/example/CustomActions.js b/example/CustomActions.js
@@ -1,4 +1,4 @@
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import {
   Modal,
   StyleSheet,
@@ -10,7 +10,7 @@ import {
 import CameraRollPicker from 'react-native-camera-roll-picker';
 import NavBar, { NavButton, NavButtonText, NavTitle } from 'react-native-nav';
 
-export default class CustomActions extends Component {
+export default class CustomActions extends React.Component {
   constructor(props) {
     super(props);
     this._images = [];
@@ -181,7 +181,7 @@ const styles = StyleSheet.create({
 });
 
 CustomActions.contextTypes = {
-  actionSheet: PropTypes.func,
+  actionSheet: React.PropTypes.func,
 };
 
 CustomActions.defaultProps = {
@@ -191,3 +191,11 @@ CustomActions.defaultProps = {
   options: {},
   icon: null,
 };
+
+CustomActions.propTypes = {
+  onSend: React.PropTypes.func,
+  containerStyle: React.PropTypes.object,
+  iconStyle: React.PropTypes.object,
+  options: React.PropTypes.object,
+  icon: React.PropTypes.func,
+};
diff --git a/example/CustomView.js b/example/CustomView.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React from 'react';
 import {
   Linking,
   MapView,
@@ -7,7 +7,7 @@ import {
   TouchableOpacity,
 } from 'react-native';
 
-export default class CustomView extends Component {
+export default class CustomView extends React.Component {
   render() {
     if (this.props.currentMessage.location) {
       return (
@@ -60,3 +60,9 @@ CustomView.defaultProps = {
   mapViewStyle: {},
   currentMessage: {},
 };
+
+CustomView.propTypes = {
+  containerStyle: React.PropTypes.object,
+  mapViewStyle: React.PropTypes.object,
+  currentMessage: React.PropTypes.object,
+};
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-native-gifted-chat",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "The most complete chat UI for React Native",
   "main": "index.js",
   "scripts": {
@@ -34,16 +34,16 @@
     "babel-preset-react-native": "^1.9.0",
     "eslint": "^3.2.2",
     "eslint-plugin-react": "^6.0.0",
-    "eslint-plugin-react-native": "^1.1.0",
+    "eslint-plugin-react-native": "^2.0.0",
     "jest": "^14.1.0",
     "jest-cli": "^14.1.0",
-    "jest-react-native": "^14.1.1"
+    "jest-react-native": "^14.1.3"
   },
   "dependencies": {
-    "@exponent/react-native-action-sheet": "git+https://github.com/FaridSafi/react-native-action-sheet.git",
+    "@exponent/react-native-action-sheet": "^0.2.1",
     "md5": "^2.1.0",
     "moment": "^2.13.0",
-    "react-native-communications": "^2.0.0",
+    "react-native-communications": "^2.1.0",
     "react-native-dismiss-keyboard": "^1.0.0",
     "react-native-invertible-scroll-view": "^1.0.0",
     "react-native-parsed-text": "0.0.15",

diff --git a/src/Actions.js b/src/Actions.js
@@ -1,12 +1,12 @@
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import {
   StyleSheet,
   Text,
   TouchableOpacity,
   View,
 } from 'react-native';
 
-export default class Actions extends Component {
+export default class Actions extends React.Component {
   constructor(props) {
     super(props);
     this.onActionsPress = this.onActionsPress.bind(this);
@@ -85,7 +85,7 @@ const styles = StyleSheet.create({
 });
 
 Actions.contextTypes = {
-  actionSheet: PropTypes.func,
+  actionSheet: React.PropTypes.func,
 };
 
 Actions.defaultProps = {
@@ -95,3 +95,11 @@ Actions.defaultProps = {
   options: {},
   icon: null,
 };
+
+Actions.propTypes = {
+  onSend: React.PropTypes.func,
+  containerStyle: React.PropTypes.object,
+  iconStyle: React.PropTypes.object,
+  options: React.PropTypes.object,
+  icon: React.PropTypes.func,
+};
diff --git a/src/Avatar.js b/src/Avatar.js
@@ -1,12 +1,12 @@
-import React, { Component } from 'react';
+import React from 'react';
 import {
   StyleSheet,
   View,
 } from 'react-native';
 
 import GiftedAvatar from './GiftedAvatar';
 
-export default class Avatar extends Component {
+export default class Avatar extends React.Component {
   renderAvatar() {
     if (this.props.renderAvatar) {
       return this.props.renderAvatar(this.props);
@@ -71,3 +71,13 @@ Avatar.defaultProps = {
   },
   nextMessage: {},
 };
+
+Avatar.propTypes = {
+  containerStyle: React.PropTypes.object,
+  imageStyle: React.PropTypes.object,
+  isSameDay: React.PropTypes.func,
+  isSameUser: React.PropTypes.func,
+  position: React.PropTypes.oneOf(['left', 'right']),
+  currentMessage: React.PropTypes.object,
+  nextMessage: React.PropTypes.object,
+};
diff --git a/src/Bubble.js b/src/Bubble.js
@@ -1,4 +1,4 @@
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import {
   Clipboard,
   StyleSheet,
@@ -10,7 +10,7 @@ import MessageText from './MessageText';
 import MessageImage from './MessageImage';
 import Time from './Time';
 
-export default class Bubble extends Component {
+export default class Bubble extends React.Component {
   constructor(props) {
     super(props);
     this.onLongPress = this.onLongPress.bind(this);
@@ -150,15 +150,14 @@ const styles = {
 };
 
 Bubble.contextTypes = {
-  actionSheet: PropTypes.func,
+  actionSheet: React.PropTypes.func,
 };
 
 Bubble.defaultProps = {
   containerStyle: {},
   wrapperStyle: {},
   containerToNextStyle: {},
   containerToPreviousStyle: {},
-
   renderMessageImage: null,
   renderMessageText: null,
   renderCustomView: null,
@@ -174,3 +173,20 @@ Bubble.defaultProps = {
   nextMessage: {},
   previousMessage: {},
 };
+
+Bubble.propTypes = {
+  containerStyle: React.PropTypes.object,
+  wrapperStyle: React.PropTypes.object,
+  containerToNextStyle: React.PropTypes.object,
+  containerToPreviousStyle: React.PropTypes.object,
+  renderMessageImage: React.PropTypes.func,
+  renderMessageText: React.PropTypes.func,
+  renderCustomView: React.PropTypes.func,
+  renderTime: React.PropTypes.func,
+  isSameUser: React.PropTypes.func,
+  isSameDay: React.PropTypes.func,
+  position: React.PropTypes.oneOf(['left', 'right']),
+  currentMessage: React.PropTypes.object,
+  nextMessage: React.PropTypes.object,
+  previousMessage: React.PropTypes.object,
+};
diff --git a/src/Composer.js b/src/Composer.js
@@ -1,11 +1,11 @@
-import React, { Component } from 'react';
+import React from 'react';
 import {
   Platform,
   StyleSheet,
   TextInput,
 } from 'react-native';
 
-export default class Composer extends Component {
+export default class Composer extends React.Component {
   render() {
     return (
       <TextInput
@@ -56,3 +56,13 @@ Composer.defaultProps = {
   placeholderTextColor: '#b2b2b2',
   textInputProps: null,
 };
+
+Composer.propTypes = {
+  textInputStyle: React.PropTypes.object,
+  onChange: React.PropTypes.func,
+  composerHeight: React.PropTypes.number,
+  text: React.PropTypes.string,
+  placeholder: React.PropTypes.string,
+  placeholderTextColor: React.PropTypes.string,
+  textInputProps: React.PropTypes.object,
+};