diff --git a/example-expo/data/messages.js b/example-expo/data/messages.js index ee04b60fd..2c2aa99ea 100644 --- a/example-expo/data/messages.js +++ b/example-expo/data/messages.js @@ -76,10 +76,11 @@ export default [ // }, { _id: 1, - text: 'This is a quick reply. Do you love Gifted Chat? (radio)', + text: 'This is a quick reply. Do you love Gifted Chat? (radio) KEEP IT', createdAt: new Date(), quickReplies: { type: 'radio', // or 'checkbox', + keepIt: true, values: [ { title: '😋 Yes', diff --git a/src/Bubble.tsx b/src/Bubble.tsx index 4804ffba8..d88e30c4c 100644 --- a/src/Bubble.tsx +++ b/src/Bubble.tsx @@ -281,15 +281,12 @@ export default class Bubble extends React.Component { renderQuickReplies() { const { currentMessage, onQuickReply, nextMessage } = this.props - if (nextMessage && nextMessage._id) { - return null - } if (currentMessage && currentMessage.quickReplies) { const { containerStyle, wrapperStyle, ...quickReplyProps } = this.props if (this.props.renderQuickReplies) { return this.props.renderQuickReplies(quickReplyProps) } - return + return } return null } diff --git a/src/GiftedChat.tsx b/src/GiftedChat.tsx index 0a3d7afd9..b44b2e48c 100644 --- a/src/GiftedChat.tsx +++ b/src/GiftedChat.tsx @@ -31,6 +31,7 @@ import { DATE_FORMAT, } from './Constant' import { IMessage, User, Reply } from './types' +import QuickReplies from './QuickReplies' const GiftedActionSheet = ActionSheet as any @@ -147,6 +148,7 @@ export interface GiftedChatProps { /* Custom parse patterns for react-native-parsed-text used to linking message content (like URLs and phone numbers) */ parsePatterns?(): React.ReactNode onQuickReply?(replies: Reply[]): void + renderQuickReplies?(quickReplies: QuickReplies['props']): React.ReactNode } interface GiftedChatState { diff --git a/src/QuickReplies.tsx b/src/QuickReplies.tsx index c8dd06dee..12e4bb174 100644 --- a/src/QuickReplies.tsx +++ b/src/QuickReplies.tsx @@ -31,6 +31,7 @@ const styles = StyleSheet.create({ }) interface QuickRepliesProps { + nextMessage?: IMessage currentMessage?: IMessage color?: string sendText?: string @@ -58,6 +59,7 @@ export default class QuickReplies extends Component< onQuickReply: () => {}, color: Color.peterRiver, sendText: 'Send', + keepReplies: false, } static propTypes = { @@ -101,18 +103,41 @@ export default class QuickReplies extends Component< } handleSend = (replies: Reply[]) => () => { + const { currentMessage } = this.props if (this.props.onQuickReply) { - this.props.onQuickReply(replies) + this.props.onQuickReply( + replies.map((reply: Reply) => ({ + ...reply, + messageId: currentMessage!._id, + })), + ) } } + shouldComponentDisplay = () => { + const { currentMessage, nextMessage } = this.props + const hasReplies = !!currentMessage && !!currentMessage!.quickReplies + const hasNext = !!nextMessage && !!nextMessage!._id + + if (hasReplies && !hasNext) { + return true + } + if (hasReplies && hasNext && currentMessage!.quickReplies!.keepIt) { + return true + } + return false + } + render() { const { currentMessage, color, sendText } = this.props const { replies } = this.state - if (!currentMessage && !currentMessage!.quickReplies) { + + if (!this.shouldComponentDisplay()) { return null } + const { type } = currentMessage!.quickReplies! + return ( {currentMessage!.quickReplies!.values.map((reply: Reply) => { diff --git a/src/types.ts b/src/types.ts index 5fdebd8a6..6d9a7770f 100644 --- a/src/types.ts +++ b/src/types.ts @@ -16,11 +16,13 @@ export interface User { export interface Reply { title: string value: string + messageId?: string } export interface QuickReplies { type: 'radio' | 'checkbox' values: Reply[] + keepIt?: boolean } export interface IMessage {