react-native-gifted-chat - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

package.json

 {
   "name": "react-native-gifted-chat",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "description": "The most complete chat UI for React Native",
@@ -37,12 +37,12 @@ "main": "index.js",
     "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",
@@ -49,0 +49,0 @@ "react-native-invertible-scroll-view": "^1.0.0",

README.md

@@ -7,2 +7,4 @@ # Gifted Chat
 
+## Dependency
+React Native minimum version `0.29.0`
 
@@ -24,2 +26,8 @@ ## Installation
 
+## Changelog
+### 0.0.7
+- New prop `isLoadingEarlier`
+- `title` prop of `Send` component has been renamed to `label`
+- PropTypes checking
+
 ## Example
@@ -101,2 +109,3 @@ ```jsx
 - **`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
@@ -103,0 +112,0 @@ - **`renderLoadEarlier`** _(Function)_ - render the load earlier button

src/Actions.js

@@ -1,2 +0,2 @@
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import {
@@ -9,3 +9,3 @@ StyleSheet,
 
-export default class Actions extends Component {
+export default class Actions extends React.Component {
   constructor(props) {
@@ -89,3 +89,3 @@ super(props);
 Actions.contextTypes = {
-  actionSheet: PropTypes.func,
+  actionSheet: React.PropTypes.func,
 };
@@ -100,1 +100,9 @@
 };
+
+Actions.propTypes = {
+  onSend: React.PropTypes.func,
+  containerStyle: React.PropTypes.object,
+  iconStyle: React.PropTypes.object,
+  options: React.PropTypes.object,
+  icon: React.PropTypes.func,
+};

src/Avatar.js

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React from 'react';
 import {
@@ -9,3 +9,3 @@ StyleSheet,
 
-export default class Avatar extends Component {
+export default class Avatar extends React.Component {
   renderAvatar() {
@@ -75,1 +75,11 @@ if (this.props.renderAvatar) {
 };
+
+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,
+};

src/Bubble.js

@@ -1,2 +0,2 @@
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import {
@@ -13,3 +13,3 @@ Clipboard,
 
-export default class Bubble extends Component {
+export default class Bubble extends React.Component {
   constructor(props) {
@@ -154,3 +154,3 @@ super(props);
 Bubble.contextTypes = {
-  actionSheet: PropTypes.func,
+  actionSheet: React.PropTypes.func,
 };
@@ -163,3 +163,2 @@
   containerToPreviousStyle: {},
-
   renderMessageImage: null,
@@ -180,1 +179,18 @@ renderMessageText: null,
 };
+
+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,
+};

src/Composer.js

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React from 'react';
 import {
@@ -8,3 +8,3 @@ Platform,
 
-export default class Composer extends Component {
+export default class Composer extends React.Component {
   render() {
@@ -60,1 +60,11 @@ return (
 };
+
+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,
+};

src/Day.js

@@ -1,2 +0,2 @@
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import {
@@ -10,3 +10,3 @@ StyleSheet,
 
-export default class Day extends Component {
+export default class Day extends React.Component {
   render() {
@@ -52,3 +52,3 @@ if (!this.props.isSameDay(this.props.currentMessage, this.props.previousMessage)) {
 Day.contextTypes = {
-  getLocale: PropTypes.func,
+  getLocale: React.PropTypes.func,
 };
@@ -67,1 +67,10 @@
 };
+
+Day.propTypes = {
+  containerStyle: React.PropTypes.object,
+  wrapperStyle: React.PropTypes.object,
+  textStyle: React.PropTypes.object,
+  isSameDay: React.PropTypes.func,
+  currentMessage: React.PropTypes.object,
+  previousMessage: React.PropTypes.object,
+};

src/GiftedAvatar.js

 /*
 **  This component will be published in a separate package
 */
-import React, { Component } from 'react';
+import React from 'react';
 import {
@@ -16,3 +16,3 @@ Image,
 
-class GiftedAvatar extends Component {
+export default class GiftedAvatar extends React.Component {
   setAvatarColor() {
@@ -119,12 +119,2 @@ const userName = this.props.user.name || '';
 
-GiftedAvatar.defaultProps = {
-  user: {
-    name: null,
-    avatar: null,
-  },
-  onPress: null,
-  avatarStyle: {},
-  textStyle: {},
-};
-
 const defaultStyles = {
@@ -146,2 +136,17 @@ avatarStyle: {
 
-export default GiftedAvatar;
+GiftedAvatar.defaultProps = {
+  user: {
+    name: null,
+    avatar: null,
+  },
+  onPress: null,
+  avatarStyle: {},
+  textStyle: {},
+};
+
+GiftedAvatar.propTypes = {
+  user: React.PropTypes.object,
+  onPress: React.PropTypes.func,
+  avatarStyle: React.PropTypes.object,
+  textStyle: React.PropTypes.object,
+};

src/GiftedChat.js

@@ -1,2 +0,2 @@
-import React, {Component, PropTypes} from 'react';
+import React from 'react';
 import {
@@ -38,3 +38,3 @@ Animated,
 
-class GiftedChat extends Component {
+class GiftedChat extends React.Component {
   constructor(props) {
@@ -48,2 +48,3 @@ super(props);
     this._touchStarted = false;
+    this._isFirstLayout = true;
     this._isTypingDisabled = false;
@@ -160,2 +161,10 @@ this._locale = 'en';
 
+  setIsFirstLayout(value) {
+    this._isFirstLayout = value;
+  }
+
+  getIsFirstLayout() {
+    return this._isFirstLayout;
+  }
+
   setIsTypingDisabled(value) {
@@ -387,3 +396,20 @@ this._isTypingDisabled = value;
         <ActionSheet ref={component => this._actionSheetRef = component}>
-          <View style={styles.container}>
+          <View
+            style={styles.container}
+            onLayout={(e) => {
+              if (Platform.OS === 'android') {
+                // fix an issue when keyboard is dismissing during the initialization
+                const layout = e.nativeEvent.layout;
+                if (this.getMaxHeight() !== layout.height && this.getIsFirstLayout() === true) {
+                  this.setMaxHeight(layout.height);
+                  this.setState({
+                    messagesContainerHeight: this.prepareMessagesContainerHeight(this.getMaxHeight() - this.getMinInputToolbarHeight()),
+                  });
+                }
+              }
+              if (this.getIsFirstLayout() === true) {
+                this.setIsFirstLayout(false);
+              }
+            }}
+          >
             {this.renderMessages()}
@@ -424,4 +450,4 @@ {this.renderInputToolbar()}
 GiftedChat.childContextTypes = {
-  actionSheet: PropTypes.func,
-  getLocale: PropTypes.func,
+  actionSheet: React.PropTypes.func,
+  getLocale: React.PropTypes.func,
 };
@@ -460,4 +486,34 @@
   bottomOffset: 0,
+  isLoadingEarlier: false,
 };
 
+GiftedChat.propTypes = {
+  messages: React.PropTypes.array,
+  onSend: React.PropTypes.func,
+  loadEarlier: React.PropTypes.bool,
+  onLoadEarlier: React.PropTypes.func,
+  locale: React.PropTypes.string,
+  isAnimated: React.PropTypes.bool,
+  renderAccessory: React.PropTypes.func,
+  renderActions: React.PropTypes.func,
+  renderAvatar: React.PropTypes.func,
+  renderBubble: React.PropTypes.func,
+  renderFooter: React.PropTypes.func,
+  renderChatFooter: React.PropTypes.func,
+  renderMessageText: React.PropTypes.func,
+  renderMessageImage: React.PropTypes.func,
+  renderComposer: React.PropTypes.func,
+  renderCustomView: React.PropTypes.func,
+  renderDay: React.PropTypes.func,
+  renderInputToolbar: React.PropTypes.func,
+  renderLoadEarlier: React.PropTypes.func,
+  renderLoading: React.PropTypes.func,
+  renderMessage: React.PropTypes.func,
+  renderSend: React.PropTypes.func,
+  renderTime: React.PropTypes.func,
+  user: React.PropTypes.object,
+  bottomOffset: React.PropTypes.number,
+  isLoadingEarlier: React.PropTypes.bool,
+};
+
 export {
@@ -464,0 +520,0 @@ GiftedChat,

src/InputToolbar.js

@@ -1,2 +0,2 @@
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import {
@@ -10,3 +10,3 @@ StyleSheet,
 
-export default class InputToolbar extends Component {
+export default class InputToolbar extends React.Component {
   renderActions() {
@@ -87,1 +87,11 @@ if (this.props.renderActions) {
 };
+
+InputToolbar.propTypes = {
+  containerStyle: React.PropTypes.object,
+  primaryStyle: React.PropTypes.object,
+  accessoryStyle: React.PropTypes.object,
+  renderAccessory: React.PropTypes.func,
+  renderActions: React.PropTypes.func,
+  renderSend: React.PropTypes.func,
+  renderComposer: React.PropTypes.func,
+};

src/LoadEarlier.js

@@ -1,3 +0,5 @@
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import {
+  ActivityIndicator,
+  Platform,
   StyleSheet,
@@ -9,3 +11,26 @@ Text,
 
-export default class LoadEarlier extends Component {
+export default class LoadEarlier extends React.Component {
+  renderLoading() {
+    if (this.props.isLoadingEarlier === false) {
+      return (
+        <Text style={[styles.text, this.props.textStyle]}>
+          {this.props.label}
+        </Text>
+      );
+    }
+    return (
+      <View>
+        <Text style={[styles.text, this.props.textStyle, {
+            opacity: 0,
+          }]}>
+          {this.props.label}
+        </Text>
+        <ActivityIndicator
+          color='white'
+          size='small'
+          style={[styles.activityIndicator, this.props.activityIndicatorStyle]}
+        />
+      </View>
+    );
+  }
   render() {
@@ -20,7 +45,6 @@ return (
         }}
+        disabled={this.props.isLoadingEarlier === true}
       >
         <View style={[styles.wrapper, this.props.wrapperStyle]}>
-          <Text style={[styles.text, this.props.textStyle]}>
-            Load earlier messages
-          </Text>
+          {this.renderLoading()}
         </View>
@@ -52,2 +76,8 @@ </TouchableOpacity>
   },
+  activityIndicator: {
+    marginTop: Platform.select({
+      ios: -14,
+      android: -16,
+    }),
+  }
 });
@@ -60,2 +90,13 @@
   onLoadEarlier: () => {},
+  isLoadingEarlier: false,
+  label: 'Load earlier messages',
 };
+
+LoadEarlier.propTypes = {
+  containerStyle: React.PropTypes.object,
+  wrapperStyle: React.PropTypes.object,
+  textStyle: React.PropTypes.object,
+  onLoadEarlier: React.PropTypes.func,
+  isLoadingEarlier: React.PropTypes.bool,
+  label: React.PropTypes.string,
+};

src/Message.js

@@ -1,2 +0,2 @@
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import {
@@ -13,3 +13,3 @@ View,
 
-export default class Message extends Component {
+export default class Message extends React.Component {
 
@@ -78,6 +78,2 @@ isSameDay(currentMessage = {}, diffMessage = {}) {
   render() {
-    // if (!this.props.currentMessage.text && !this.props.currentMessage.image && !this.props.renderCustomView) {
-    //   return null;
-    // }
-
     return (
@@ -130,1 +126,13 @@ <View>
 };
+
+Message.propTypes = {
+  containerStyle: React.PropTypes.object,
+  renderAvatar: React.PropTypes.func,
+  renderBubble: React.PropTypes.func,
+  renderDay: React.PropTypes.func,
+  position: React.PropTypes.oneOf(['left', 'right']),
+  currentMessage: React.PropTypes.object,
+  nextMessage: React.PropTypes.object,
+  previousMessage: React.PropTypes.object,
+  user: React.PropTypes.object,
+};

src/MessageContainer.js

@@ -1,6 +0,6 @@
-import React, {Component, PropTypes} from 'react';
+import React from 'react';
 
-import ReactNative, {
+import {
+  ListView,
   View,
-  ListView
 } from 'react-native';
@@ -10,9 +10,7 @@
 import InvertibleScrollView from 'react-native-invertible-scroll-view';
-
+import md5 from 'md5';
 import LoadEarlier from './LoadEarlier';
 import Message from './Message';
 
-import md5 from 'md5';
-
-export default class MessageContainer extends Component {
+export default class MessageContainer extends React.Component {
   constructor(props) {
@@ -171,1 +169,9 @@ super(props);
 };
+
+MessageContainer.propTypes = {
+  messages: React.PropTypes.array,
+  user: React.PropTypes.object,
+  renderFooter: React.PropTypes.func,
+  renderMessage: React.PropTypes.func,
+  onLoadEarlier: React.PropTypes.func,
+};

src/MessageImage.js

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React from 'react';
 import {
@@ -8,3 +8,3 @@ Image,
 
-export default class MessageImage extends Component {
+export default class MessageImage extends React.Component {
   render() {
@@ -41,1 +41,7 @@ return (
 };
+
+MessageImage.propTypes = {
+  containerStyle: React.PropTypes.object,
+  imageStyle: React.PropTypes.object,
+  currentMessage: React.PropTypes.object,
+};

src/MessageText.js

@@ -1,2 +0,2 @@
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import {
@@ -11,3 +11,3 @@ Linking,
 
-export default class MessageText extends Component {
+export default class MessageText extends React.Component {
   constructor(props) {
@@ -106,3 +106,3 @@ super(props);
 MessageText.contextTypes = {
-  actionSheet: PropTypes.func,
+  actionSheet: React.PropTypes.func,
 };
@@ -119,1 +119,9 @@
 };
+
+MessageText.propTypes = {
+  containerStyle: React.PropTypes.object,
+  position: React.PropTypes.oneOf(['left', 'right']),
+  textStyle: React.PropTypes.object,
+  linkStyle: React.PropTypes.object,
+  currentMessage: React.PropTypes.object,
+};

src/Send.js

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React from 'react';
 import {
@@ -9,3 +9,3 @@ StyleSheet,
 
-export default class Send extends Component {
+export default class Send extends React.Component {
   // shouldComponentUpdate(nextProps, nextState) {
@@ -26,3 +26,3 @@ //   if (this.props.text.trim().length === 0 && nextProps.text.trim().length > 0 || this.props.text.trim().length > 0 && nextProps.text.trim().length === 0) {
         >
-          <Text style={[styles.text, this.props.textStyle]}>{this.props.title}</Text>
+          <Text style={[styles.text, this.props.textStyle]}>{this.props.label}</Text>
         </TouchableOpacity>
@@ -56,3 +56,11 @@ );
   onSend: () => {},
-  title: 'Send',
+  label: 'Send',
 };
+
+Send.propTypes = {
+  containerStyle: React.PropTypes.object,
+  textStyle: React.PropTypes.object,
+  text: React.PropTypes.string,
+  onSend: React.PropTypes.func,
+  label: React.PropTypes.string,
+};

src/Time.js

@@ -1,2 +0,2 @@
-import React, { Component, PropTypes } from 'react';
+import React from 'react';
 import {
@@ -10,3 +10,3 @@ StyleSheet,
 
-export default class Time extends Component {
+export default class Time extends React.Component {
   render() {
@@ -57,3 +57,3 @@ return (
 Time.contextTypes = {
-  getLocale: PropTypes.func,
+  getLocale: React.PropTypes.func,
 };
@@ -69,1 +69,8 @@
 };
+
+Time.propTypes = {
+  position: React.PropTypes.oneOf(['left', 'right']),
+  containerStyle: React.PropTypes.object,
+  textStyle: React.PropTypes.object,
+  currentMessage: React.PropTypes.object,
+};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Git dependency

Supply chain risk

Contains a dependency which resolves to a remote git URL. Dependencies fetched from git URLs are not immutable can be used to inject untrusted code or reduce the likelihood of a reproducible install.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

55789

increased by12.96%

Lines of code

1819

increased by12.08%

Number of lines in readme file

142

increased by6.77%

Number of high supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Added@exponent/react-native-action-sheet@0.2.3(transitive)

• Updated@exponent/react-native-action-sheet@^0.2.1

• Updatedreact-native-communications@^2.1.0