CRNS-49 and CRNS-50: Adding types for reaction picket

Author: vishalnarkhede

src/components/ReactionList.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { Text } from 'react-native';
 import styled from '@stream-io/styled-components';
 import { emojiData } from '../utils';
+import PropTypes from 'prop-types';
 
 import leftTail from '../images/reactionlist/left-tail.png';
 import leftCenter from '../images/reactionlist/left-center.png';
@@ -85,6 +86,14 @@ export class ReactionList extends React.PureComponent {
     super(props);
   }
 
+  static propTypes = {
+    latestReactions: PropTypes.array,
+    openReactionSelector: PropTypes.func,
+    getTotalReactionCount: PropTypes.func,
+    visible: PropTypes.bool,
+    position: PropTypes.string,
+  };
+
   _renderReactions = (reactions) => {
     const reactionsByType = {};
     reactions.map((item) => {

src/components/ReactionPicker.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { View, Modal } from 'react-native';
 import { themed } from '../styles/theme';
+import PropTypes from 'prop-types';
 
 import styled from '@stream-io/styled-components';
 import { Avatar } from './Avatar';
@@ -46,6 +47,20 @@ const ReactionCount = styled.Text`
 export const ReactionPicker = themed(
   class ReactionPicker extends React.PureComponent {
     static themePath = 'message.reactionPicker';
+
+    static propTypes = {
+      hideReactionOwners: PropTypes.bool,
+      reactionPickerVisible: PropTypes.bool,
+      handleDismiss: PropTypes.func,
+      handleReaction: PropTypes.func,
+      latestReactions: PropTypes.array,
+      reactionCounts: PropTypes.object,
+      rpLeft: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      rpTop: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      rpRight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+      emojiData: PropTypes.array,
+    };
+
     constructor(props) {
       super(props);
     }

src/components/ReactionPickerWrapper.js

@@ -1,9 +1,20 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+
 import { TouchableOpacity, Dimensions } from 'react-native';
 
 import { ReactionPicker } from './ReactionPicker';
 
 export class ReactionPickerWrapper extends React.PureComponent {
+  static propTypes = {
+    isMyMessage: PropTypes.func,
+    message: PropTypes.object,
+    offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    handleReaction: PropTypes.func,
+    emojiData: PropTypes.array,
+    style: PropTypes.any,
+  };
+
   constructor(props) {
     super(props);
     this.state = { reactionPickerVisible: false };

types/index.d.ts

@@ -462,14 +462,14 @@ export interface AutoCompleteInputProps {
 }
 
 export interface CardProps {
-  title: string;
-  title_link: string;
-  og_scrape_url: string;
-  image_url: string;
-  thumb_url: string;
-  text: string;
-  type: string;
-  alignment: 'right' | 'left';
+  title?: string;
+  title_link?: string;
+  og_scrape_url?: string;
+  image_url?: string;
+  thumb_url?: string;
+  text?: string;
+  type?: string;
+  alignment?: 'right' | 'left';
   onLongPress?: (event: GestureResponderEvent) => void;
 }
 
@@ -484,7 +484,7 @@ export interface DateSeparatorProps {
   formatDate?(date: Date): string;
 }
 export interface EmptyStateIndicatorProps {
-  listType: 'string';
+  listType?: 'string';
 }
 export interface EventIndicatorProps {
   event: Client.Event;
@@ -547,13 +547,41 @@ export interface MessageSystemProps {
 }
 
 export interface ReactionListProps {
-  latestReactions: any;
+  latestReactions: Client.ReactionResponse[];
   openReactionSelector?(event: GestureResponderEvent): void;
   getTotalReactionCount?(): string | number;
   visible: boolean;
   position: string;
 }
 
+export interface ReactionPickerProps {
+  hideReactionOwners: boolean;
+  reactionPickerVisible: boolean;
+  handleDismiss?(): void;
+  handleReaction?(id: string): void;
+  latestReactions: Client.ReactionResponse[];
+  reactionCounts: { [key: string]: number };
+  rpLeft: string | number;
+  rpTop: string | number;
+  rpRight: string | number;
+  emojiData: Array<{
+    icon: string;
+    id: string;
+  }>;
+}
+
+export interface ReactionPickerWrapperProps {
+  isMyMessage?(message: Client.MessageResponse): boolean;
+  message: Client.MessageResponse;
+  offset: string | number;
+  handleReaction?(id: string): void;
+  emojiData: Array<{
+    icon: string;
+    id: string;
+  }>;
+  style: object;
+}
+
 export interface SpinnerProps {}
 
 export interface SuggestionsProviderProps {
@@ -639,6 +667,14 @@ export class MessageSystem extends React.PureComponent<
   any
 > {}
 export class ReactionList extends React.PureComponent<ReactionListProps, any> {}
+export class ReactionPicker extends React.PureComponent<
+  ReactionPickerProps,
+  any
+> {}
+export class ReactionPickerWrapper extends React.PureComponent<
+  ReactionPickerWrapperProps,
+  any
+> {}
 export class Spinner extends React.PureComponent<SpinnerProps, any> {}
 export class SuggestionsProvider extends React.PureComponent<
   SuggestionsProviderProps,