Merge pull request #112 from GetStream/vishal/props-fixes

CRNS-49: Docs for missing components

Author: tbarbugli

src/components/AutoCompleteInput.js

@@ -12,11 +12,17 @@ const InputBox = styled.TextInput`
 export class AutoCompleteInput extends React.PureComponent {
   static propTypes = {
     value: PropTypes.string,
+    /** @see See [suggestions context](https://getstream.github.io/stream-chat-react-native/#suggestionscontext) */
     openSuggestions: PropTypes.func,
+    /** @see See [suggestions context](https://getstream.github.io/stream-chat-react-native/#suggestionscontext) */
     closeSuggestions: PropTypes.func,
+    /** @see See [suggestions context](https://getstream.github.io/stream-chat-react-native/#suggestionscontext) */
     updateSuggestions: PropTypes.func,
     triggerSettings: PropTypes.object,
     setInputBoxRef: PropTypes.func,
+    /**
+     * @param text string
+     */
     onChange: PropTypes.func,
     /**
      * Additional props for underlying TextInput component. These props will be forwarded as it is to TextInput component.

src/components/CloseButton.js

@@ -27,3 +27,5 @@ export const CloseButton = themed(
     }
   },
 );
+
+CloseButton.propTypes = {};

src/components/CommandsItem.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Text } from 'react-native';
 import styled from '@stream-io/styled-components';
 import PropTypes from 'prop-types';
+import { themed } from '../styles/theme';
 
 const Container = styled.View`
   flex-direction: column;
@@ -20,26 +21,33 @@ const Title = styled.Text`
   ${({ theme }) => theme.messageInput.suggestions.command.title.css}
 `;
 
-export class CommandsItem extends React.Component {
-  static propTypes = {
-    name: PropTypes.string,
-    args: PropTypes.string,
-    description: PropTypes.string,
-  };
+/**
+ * @example ./docs/CommandsItem.md
+ * @extends PureComponent
+ */
+export const CommandsItem = themed(
+  class CommandsItem extends React.Component {
+    static themePath = 'messageInput.suggestions.command';
+    static propTypes = {
+      name: PropTypes.string,
+      args: PropTypes.string,
+      description: PropTypes.string,
+    };
 
-  render() {
-    const {
-      item: { name, args, description },
-    } = this.props;
+    render() {
+      const {
+        item: { name, args, description },
+      } = this.props;
 
-    return (
-      <Container>
-        <Top>
-          <Title>/{name} </Title>
-          <Text>{args}</Text>
-        </Top>
-        <Text>{description}</Text>
-      </Container>
-    );
-  }
-}
+      return (
+        <Container>
+          <Top>
+            <Title>/{name} </Title>
+            <Text>{args}</Text>
+          </Top>
+          <Text>{description}</Text>
+        </Container>
+      );
+    }
+  },
+);

src/components/FileIcon.js

@@ -201,9 +201,6 @@ function mimeTypeToIcon(mimeType) {
   return iconDOC;
 }
 
-/**
- * @example ./examples/FileIcon.md
- */
 export class FileIcon extends React.Component {
   render() {
     const { mimeType, size } = this.props;

src/components/Gallery.js

@@ -53,6 +53,11 @@ const ImageContainer = styled.TouchableOpacity`
     length !== 3 ? theme.message.gallery.size : theme.message.gallery.halfSize};
   ${({ theme }) => theme.message.gallery.imageContainer.css}
 `;
+/**
+ * UI component for card in attachments.
+ *
+ * @example ./docs/Gallery.md
+ */
 
 export const Gallery = withMessageContentContext(
   themed(

src/components/MessageNotification.js

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import { Animated } from 'react-native';
 import PropTypes from 'prop-types';
 import styled from '@stream-io/styled-components';
+import { themed } from '../styles/theme';
 
 const Container = styled.TouchableOpacity`
   display: flex;
@@ -14,69 +15,74 @@ const Container = styled.TouchableOpacity`
   margin-bottom: 0;
   border-radius: 13px;
   background-color: ${({ theme }) => theme.colors.primary};
-  color: white;
   transform: translateY(9px);
-  ${({ theme }) => theme.messageList.messageNotification.css}
+  ${({ theme }) => theme.messageList.messageNotification.container.css}
 `;
 
 const MessageNotificationText = styled.Text`
   color: white;
   font-size: 12px;
   font-weight: 600;
-  ${({ theme }) => theme.messageList.messageNotificationText.css}
+  ${({ theme }) => theme.messageList.messageNotification.text.css}
 `;
-
-export class MessageNotification extends PureComponent {
-  constructor(props) {
-    super(props);
-    this.state = {
-      notificationOpacity: new Animated.Value(0),
+/**
+ * @example ./docs/MessageNotification.md
+ * @extends PureComponent
+ */
+export const MessageNotification = themed(
+  class MessageNotification extends PureComponent {
+    static themePath = 'messageList.messageNotification';
+    constructor(props) {
+      super(props);
+      this.state = {
+        notificationOpacity: new Animated.Value(0),
+      };
+    }
+    static propTypes = {
+      /** If we should show the notification or not */
+      showNotification: PropTypes.bool,
+      /** Onclick handler */
+      onPress: PropTypes.func.isRequired,
     };
-  }
-  static propTypes = {
-    /** If we should show the notification or not */
-    showNotification: PropTypes.bool,
-    /** Onclick handler */
-    onPress: PropTypes.func.isRequired,
-  };
-
-  static defaultProps = {
-    showNotification: true,
-  };
 
-  componentDidMount() {
-    Animated.timing(this.state.notificationOpacity, {
-      toValue: this.props.showNotification ? 1 : 0,
-      duration: 500,
-    }).start();
-  }
+    static defaultProps = {
+      showNotification: true,
+    };
 
-  componentDidUpdate(prevProps) {
-    if (prevProps.showNotification !== this.props.showNotification) {
+    componentDidMount() {
       Animated.timing(this.state.notificationOpacity, {
         toValue: this.props.showNotification ? 1 : 0,
         duration: 500,
       }).start();
     }
-  }
 
-  render() {
-    if (!this.props.showNotification) {
-      return null;
-    } else {
-      return (
-        <Animated.View
-          style={{
-            position: 'absolute',
-            bottom: 0,
-            opacity: this.state.notificationOpacity,
-          }}
-        >
-          <Container onPress={this.props.onPress}>
-            <MessageNotificationText>New Messages</MessageNotificationText>
-          </Container>
-        </Animated.View>
-      );
+    componentDidUpdate(prevProps) {
+      if (prevProps.showNotification !== this.props.showNotification) {
+        Animated.timing(this.state.notificationOpacity, {
+          toValue: this.props.showNotification ? 1 : 0,
+          duration: 500,
+        }).start();
+      }
+    }
+
+    render() {
+      if (!this.props.showNotification) {
+        return null;
+      } else {
+        return (
+          <Animated.View
+            style={{
+              position: 'absolute',
+              bottom: 0,
+              opacity: this.state.notificationOpacity,
+            }}
+          >
+            <Container onPress={this.props.onPress}>
+              <MessageNotificationText>New Messages</MessageNotificationText>
+            </Container>
+          </Animated.View>
+        );
+      }
     }
-  }
-}
+  },
+);