Skip to content

Commit 8a8fb0e

Browse files
vishalnarkhedevishalnarkhede
authored
Merge pull request #111 from GetStream/vishal/props-fixes
CRNS-54: Typescript and prop types for message related inner components
2 parents 629fffb + cf28cf2 commit 8a8fb0e

File tree

12 files changed

+245
-31
lines changed

12 files changed

+245
-31
lines changed

‎README.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,8 @@ The React Native components are created using the stream-chat-js library. If you
7575
1. Navigation between different component is something we expect consumers to
7676
implement. You can checkout the example given in this repository
7777
78+
2. Minor releases may come with some breaking changes, so always check the release notes before upgrading minor version.
79+
7880
Library currently exposes following components:
7981
8082
1. Avatar

‎src/components/Chat.js‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,11 @@ export const Chat = themed(
2828
static propTypes = {
2929
/** The StreamChat client object */
3030
client: PropTypes.object.isRequired,
31-
/** Theme object */
31+
/**
32+
* Theme object
33+
*
34+
* @ref https://getstream.io/chat/react-native-chat/tutorial/#custom-styles
35+
* */
3236
style: PropTypes.object,
3337
logger: PropTypes.func,
3438
};

‎src/components/DateSeparator.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,12 @@ export const DateSeparator = themed(
4848
class DateSeparator extends React.PureComponent {
4949
static propTypes = {
5050
message: PropTypes.object.isRequired,
51+
/**
52+
* Formatter function for date object.
53+
*
54+
* @param date Date object of message
55+
* @returns string
56+
*/
5157
formatDate: PropTypes.func,
5258
};
5359

‎src/components/MessageInput.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -455,7 +455,7 @@ const MessageInput = withKeyboardContext(
455455
return;
456456

457457
const result = await pickDocument();
458-
if (result.type === 'cancel') {
458+
if (result.type === 'cancel' || result.cancelled) {
459459
return;
460460
}
461461
const mimeType = lookup(result.name);

‎src/components/MessageSimple/MessageAvatar.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22
import styled from '@stream-io/styled-components';
33
import { Avatar } from '../Avatar';
4+
import PropTypes from 'prop-types';
45

56
const Container = styled.View`
67
margin-right: ${({ alignment }) => (alignment === 'left' ? 8 : 0)};
@@ -33,3 +34,21 @@ export const MessageAvatar = ({ message, isMyMessage, groupStyles }) => {
3334
</Container>
3435
);
3536
};
37+
38+
MessageAvatar.propTypes = {
39+
/** Current [message object](https://getstream.io/chat/docs/#message_format) */
40+
message: PropTypes.object,
41+
/**
42+
* Returns true if message (param) belongs to current user, else false
43+
*
44+
* @param message
45+
* */
46+
isMyMessage: PropTypes.func,
47+
/**
48+
* Position of message in group - top, bottom, middle, single.
49+
*
50+
* Message group is a group of consecutive messages from same user. groupStyles can be used to style message as per their position in message group
51+
* e.g., user avatar (to which message belongs to) is only showed for last (bottom) message in group.
52+
*/
53+
groupStyles: PropTypes.array,
54+
};

‎src/components/MessageSimple/MessageContent.js‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -169,13 +169,16 @@ export const MessageContent = themed(
169169
* {...props}
170170
* onPress={(thisArg, message, e) => {
171171
* thisArg.openReactionSelector();
172-
* // Similarly, you can also call other methods available on MessageContent
173-
* // component such as handleEdit, handleDelete, showActionSheet
174-
* // Source - https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageContent.js
175172
* }}
176173
* )
177174
* }
178175
* ```
176+
*
177+
* Similarly, you can also call other methods available on MessageContent
178+
* component such as handleEdit, handleDelete, showActionSheet etc.
179+
*
180+
* Source - [MessageContent](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageContent.js)
181+
*
179182
* @param {Component} thisArg Reference to MessageContent component
180183
* @param message Message object which was pressed
181184
* @param e Event object for onPress event
@@ -194,12 +197,16 @@ export const MessageContent = themed(
194197
* {...props}
195198
* onLongPress={(thisArg, message, e) => {
196199
* thisArg.openReactionSelector();
197-
* // Similarly, you can also call other methods available on MessageContent
198-
* // component such as handleEdit, handleDelete, showActionSheet
199-
* // Source - https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageContent.js
200200
* }}
201201
* )
202202
* }
203+
*
204+
* Similarly, you can also call other methods available on MessageContent
205+
* component such as handleEdit, handleDelete, showActionSheet etc.
206+
*
207+
* Source - [MessageContent](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageContent.js)
208+
*
209+
* By default we show action sheet with all the message actions on long press.
203210
* ```
204211
*
205212
* @param {Component} thisArg Reference to MessageContent component
@@ -222,6 +229,13 @@ export const MessageContent = themed(
222229
handleAction: PropTypes.func,
223230
/** Position of message. 'right' | 'left' */
224231
alignment: PropTypes.string,
232+
/**
233+
* Position of message in group - top, bottom, middle, single.
234+
*
235+
* Message group is a group of consecutive messages from same user. groupStyles can be used to style message as per their position in message group
236+
* e.g., user avatar (to which message belongs to) is only showed for last (bottom) message in group.
237+
*/
238+
groupStyles: PropTypes.array,
225239
/**
226240
* Style object for actionsheet (used to message actions).
227241
* Supported styles: https://github.com/beefe/react-native-actionsheet/blob/master/lib/styles.js

‎src/components/MessageSimple/MessageReplies.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React from 'react';
22
import styled from '@stream-io/styled-components';
3+
import PropTypes from 'prop-types';
34

45
import iconPath from '../../images/icons/icon_path.png';
56

@@ -40,3 +41,14 @@ export const MessageReplies = ({ message, isThreadList, openThread, pos }) => {
4041
</Container>
4142
);
4243
};
44+
45+
MessageReplies.propTypes = {
46+
/** Current [message object](https://getstream.io/chat/docs/#message_format) */
47+
message: PropTypes.object,
48+
/** Boolean if current message is part of thread */
49+
isThreadList: PropTypes.bool,
50+
/** @see See [Channel Context](https://getstream.github.io/stream-chat-react-native/#channelcontext) */
51+
openThread: PropTypes.func,
52+
/** right | left */
53+
pos: PropTypes.string,
54+
};

‎src/components/MessageSimple/MessageStatus.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import styled from '@stream-io/styled-components';
33
import loadingGif from '../../images/loading.gif';
44
import iconDeliveredUnseen from '../../images/icons/delivered_unseen.png';
55
import { Avatar } from '../Avatar';
6+
import PropTypes from 'prop-types';
67

78
const Spacer = styled.View`
89
height: 10;
@@ -111,3 +112,16 @@ export const MessageStatus = ({
111112

112113
return <StatusContainer>{renderStatus()}</StatusContainer>;
113114
};
115+
116+
MessageStatus.propTypes = {
117+
/** @see See [Channel Context](https://getstream.github.io/stream-chat-react-native/#channelcontext) */
118+
client: PropTypes.object,
119+
/** A list of users who have read the message */
120+
readBy: PropTypes.array,
121+
/** Current [message object](https://getstream.io/chat/docs/#message_format) */
122+
message: PropTypes.object,
123+
/** Latest message id on current channel */
124+
lastReceivedId: PropTypes.string,
125+
/** Boolean if current message is part of thread */
126+
isThreadList: PropTypes.bool,
127+
};

‎src/components/MessageSimple/MessageTextContainer.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import styled, { withTheme } from '@stream-io/styled-components';
33

44
import { renderText, capitalize } from '../../utils';
5+
import PropTypes from 'prop-types';
56

67
const TextContainer = styled.View`
78
border-bottom-left-radius: ${({ theme, groupStyle }) =>
@@ -76,3 +77,25 @@ export const MessageTextContainer = withTheme((props) => {
7677
</React.Fragment>
7778
);
7879
});
80+
81+
MessageTextContainer.propTypes = {
82+
/** Current [message object](https://getstream.io/chat/docs/#message_format) */
83+
message: PropTypes.object,
84+
/**
85+
* Position of message in group - top, bottom, middle, single.
86+
*
87+
* Message group is a group of consecutive messages from same user. groupStyles can be used to style message as per their position in message group
88+
* e.g., user avatar (to which message belongs to) is only showed for last (bottom) message in group.
89+
*/
90+
groupStyles: PropTypes.array,
91+
/**
92+
* Returns true if message (param) belongs to current user, else false
93+
*
94+
* @param message
95+
* */
96+
isMyMessage: PropTypes.func,
97+
/** Custom UI component for message text */
98+
MessageText: PropTypes.oneOfType([PropTypes.node, PropTypes.elementType]),
99+
/** Complete theme object. Its a [defaultTheme](https://github.com/GetStream/stream-chat-react-native/blob/master/src/styles/theme.js#L22) merged with customized theme provided as prop to Chat component */
100+
theme: PropTypes.object,
101+
};

‎src/components/MessageSimple/index.js‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -65,13 +65,16 @@ export const MessageSimple = themed(
6565
* {...props}
6666
* onPress={(thisArg, message, e) => {
6767
* thisArg.openReactionSelector();
68-
* // Similarly, you can also call other methods available on MessageContent
69-
* // component such as handleEdit, handleDelete, showActionSheet
70-
* // Source - https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageContent.js
7168
* }}
7269
* )
7370
* }
7471
* ```
72+
*
73+
* Similarly, you can also call other methods available on MessageContent
74+
* component such as handleEdit, handleDelete, showActionSheet etc.
75+
*
76+
* Source - [MessageContent](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageContent.js)
77+
*
7578
* @param {Component} thisArg Reference to MessageContent component
7679
* @param message Message object which was pressed
7780
* @param e Event object for onPress event
@@ -90,14 +93,18 @@ export const MessageSimple = themed(
9093
* {...props}
9194
* onLongPress={(thisArg, message, e) => {
9295
* thisArg.openReactionSelector();
93-
* // Similarly, you can also call other methods available on MessageContent
94-
* // component such as handleEdit, handleDelete, showActionSheet
95-
* // Source - https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageContent.js
9696
* }}
9797
* )
9898
* }
99+
*
100+
* Similarly, you can also call other methods available on MessageContent
101+
* component such as handleEdit, handleDelete, showActionSheet etc.
102+
*
103+
* Source - [MessageContent](https://github.com/GetStream/stream-chat-react-native/blob/master/src/components/MessageSimple/MessageContent.js)
99104
* ```
100105
*
106+
* By default we show action sheet with all the message actions on long press.
107+
*
101108
* @param {Component} thisArg Reference to MessageContent component
102109
* @param message Message object which was long pressed
103110
* @param e Event object for onLongPress event

0 commit comments

Comments
 (0)