Skip to content

add option to enable / disable autofocus of input when a button is clicked #456

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
macrozone wants to merge 1 commit into from
Closed

add option to enable / disable autofocus of input when a button is clicked #456

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions src/Chat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,8 @@ export interface ChatProps {
selectedActivity?: BehaviorSubject<ActivityOrID>,
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) => ({
Expand Down Expand Up @@ -54,7 +55,9 @@ import { MessagePane } from './MessagePane';
import { Shell } from './Shell';

export class Chat extends React.Component<ChatProps, {}> {

public static defaultProps: Partial<ChatProps> = {
setFocusOnCardActionClick: true
};
private store = createStore();

private botConnection: IBotConnection;
Expand Down Expand Up @@ -176,10 +179,14 @@ export class Chat extends React.Component<ChatProps, {}> {

return (
<Provider store={ this.store }>

<div className="wc-chatview-panel" ref={ div => this.chatviewPanel = div }>
{ header }
<MessagePane setFocus={ () => this.setFocus() }>
<History setFocus={ () => this.setFocus() }/>
<History
setFocusOnCardActionClick={this.props.setFocusOnCardActionClick}
Copy link
Copy Markdown
Contributor

@danmarshall danmarshall May 10, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we add the conditional here, we won't need the additional property on History

Copy link
Copy Markdown
Contributor Author

@macrozone macrozone May 12, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I also thought about that, but from looking at this piece of code, you don't know whether History might need this.setFocus for someting else. That's why I dediced to use a rather verbose property that does exactly what it says.

setFocus={ () => this.setFocus() }
/>
</MessagePane>
<Shell />
{ resize }
Expand Down
18 changes: 11 additions & 7 deletions src/History.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ export interface HistoryProps {
onClickRetry: (activity: Activity) => void,

setFocus: () => void,
setFocusOnCardActionClick: boolean,

isFromMe: (activity: Activity) => boolean,
isSelected: (activity: Activity) => boolean,
Expand Down Expand Up @@ -46,11 +47,11 @@ export class HistoryView extends React.Component<HistoryProps, {}> {

// 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
Expand All @@ -71,10 +72,10 @@ export class HistoryView extends React.Component<HistoryProps, {}> {
}

// 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
<WrappedActivity
<WrappedActivity
ref={ x => this.carouselActivity = x }
activity={ {
type: 'message',
Expand All @@ -98,7 +99,9 @@ export class HistoryView extends React.Component<HistoryProps, {}> {
// 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) {
Copy link
Copy Markdown
Contributor

@danmarshall danmarshall May 10, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perhaps this conditional can be moved above

this.props.setFocus();
}
return this.props.doCardAction(type, value);
}

Expand Down Expand Up @@ -156,15 +159,15 @@ 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,
user: state.connection.user
}), {
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
Expand All @@ -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,
Expand Down
8 changes: 4 additions & 4 deletions src/MessagePane.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ class SuggestedActions extends React.Component<MessagePaneProps, {}> {

//"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();
Expand All @@ -50,7 +50,7 @@ class SuggestedActions extends React.Component<MessagePaneProps, {}> {

return (
<HScroll
prevSvgPathData="M 16.5 22 L 19 19.5 L 13.5 14 L 19 8.5 L 16.5 6 L 8.5 14 L 16.5 22 Z"
prevSvgPathData="M 16.5 22 L 19 19.5 L 13.5 14 L 19 8.5 L 16.5 6 L 8.5 14 L 16.5 22 Z"
nextSvgPathData="M 12.5 22 L 10 19.5 L 15.5 14 L 10 8.5 L 12.5 6 L 20.5 14 L 12.5 22 Z"
scrollUnit="page"
>
Expand Down Expand Up @@ -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
Expand Down