From 0d28b2f2e1739c4f3a8a348497730c74568b49f9 Mon Sep 17 00:00:00 2001 From: Marco Date: Wed, 10 May 2017 13:47:10 +0200 Subject: [PATCH] implement --- src/Chat.tsx | 13 ++++++++++--- src/History.tsx | 18 +++++++++++------- src/MessagePane.tsx | 8 ++++---- 3 files changed, 25 insertions(+), 14 deletions(-) diff --git a/src/Chat.tsx b/src/Chat.tsx index a760258b8c..10edae95cc 100644 --- a/src/Chat.tsx +++ b/src/Chat.tsx @@ -26,7 +26,8 @@ export interface ChatProps { selectedActivity?: BehaviorSubject, sendTyping?: boolean, formatOptions?: FormatOptions, - resize?: 'none' | 'window' | 'detect' + resize?: 'none' | 'window' | 'detect', + setFocusOnCardActionClick?: boolean, // defaults to true } export const sendMessage = (text: string, from: User, locale: string) => ({ @@ -54,7 +55,9 @@ import { MessagePane } from './MessagePane'; import { Shell } from './Shell'; export class Chat extends React.Component { - + public static defaultProps: Partial = { + setFocusOnCardActionClick: true + }; private store = createStore(); private botConnection: IBotConnection; @@ -176,10 +179,14 @@ export class Chat extends React.Component { return ( +
this.chatviewPanel = div }> { header } this.setFocus() }> - this.setFocus() }/> + this.setFocus() } + /> { resize } diff --git a/src/History.tsx b/src/History.tsx index 30af9d2f7e..fe9aa1e9ae 100644 --- a/src/History.tsx +++ b/src/History.tsx @@ -14,6 +14,7 @@ export interface HistoryProps { onClickRetry: (activity: Activity) => void, setFocus: () => void, + setFocusOnCardActionClick: boolean, isFromMe: (activity: Activity) => boolean, isSelected: (activity: Activity) => boolean, @@ -46,11 +47,11 @@ export class HistoryView extends React.Component { // Subtract the padding from the offsetParent's width to get the width of the content const maxContentWidth = (this.carouselActivity.messageDiv.offsetParent as HTMLElement).offsetWidth - paddedWidth; - + // Subtract the content width from the chat width to get the margin. // Next time we need to get the content width (on a resize) we can use this margin to get the maximum content width const carouselMargin = this.props.size.width - maxContentWidth; - + konsole.log('history measureMessage ' + carouselMargin); // Finally, save it away in the Store, which will force another re-render @@ -71,10 +72,10 @@ export class HistoryView extends React.Component { } // In order to do their cool horizontal scrolling thing, Carousels need to know how wide they can be. - // So, at startup, we create this mock Carousel activity and measure it. + // So, at startup, we create this mock Carousel activity and measure it. private measurableCarousel = () => // find the largest possible message size by forcing a width larger than the chat itself - this.carouselActivity = x } activity={ { type: 'message', @@ -98,7 +99,9 @@ export class HistoryView extends React.Component { // 3. (this is also the normal re-render case) To render without the mock activity private doCardAction(type: CardActionTypes, value: string) { - this.props.setFocus(); + if(this.props.setFocusOnCardActionClick) { + this.props.setFocus(); + } return this.props.doCardAction(type, value); } @@ -156,7 +159,7 @@ export const History = connect( format: state.format, size: state.size, activities: state.history.activities, - // only used to create helper functions below + // only used to create helper functions below connectionSelectedActivity: state.connection.selectedActivity, selectedActivity: state.history.selectedActivity, botConnection: state.connection.botConnection, @@ -164,7 +167,7 @@ export const History = connect( }), { setMeasurements: (carouselMargin: number) => ({ type: 'Set_Measurements', carouselMargin }), onClickRetry: (activity: Activity) => ({ type: 'Send_Message_Retry', clientActivityId: activity.channelData.clientActivityId }), - // only used to create helper functions below + // only used to create helper functions below sendMessage }, (stateProps: any, dispatchProps: any, ownProps: any): HistoryProps => ({ // from stateProps @@ -176,6 +179,7 @@ export const History = connect( onClickRetry: dispatchProps.onClickRetry, // from ownProps setFocus: ownProps.setFocus, + setFocusOnCardActionClick: ownProps.setFocusOnCardActionClick, // helper functions doCardAction: doCardAction(stateProps.botConnection, stateProps.user, stateProps.format.locale, dispatchProps.sendMessage), isFromMe: (activity: Activity) => activity.from.id === stateProps.user.id, diff --git a/src/MessagePane.tsx b/src/MessagePane.tsx index 165483880c..b4599b31dc 100644 --- a/src/MessagePane.tsx +++ b/src/MessagePane.tsx @@ -33,7 +33,7 @@ class SuggestedActions extends React.Component { //"stale" actions may be displayed (see shouldComponentUpdate), do not respond to click events if there aren't actual actions if (!this.props.activityWithSuggestedActions) return; - + this.props.takeSuggestedAction(this.props.activityWithSuggestedActions); this.props.doCardAction(cardAction.type, cardAction.value); this.props.setFocus(); @@ -50,7 +50,7 @@ class SuggestedActions extends React.Component { return ( @@ -82,13 +82,13 @@ export const MessagePane = connect( (state: ChatState) => ({ // passed down to MessagePaneView activityWithSuggestedActions: activityWithSuggestedActions(state.history.activities), - // only used to create helper functions below + // only used to create helper functions below botConnection: state.connection.botConnection, user: state.connection.user, locale: state.format.locale }), { takeSuggestedAction: (message: Message) => ({ type: 'Take_SuggestedAction', message } as ChatActions), - // only used to create helper functions below + // only used to create helper functions below sendMessage }, (stateProps: any, dispatchProps: any, ownProps: any): MessagePaneProps => ({ // from stateProps