Permalink
Browse files

Get basic keyboard selection working

  • Loading branch information...
aviraldg committed Jun 21, 2016
1 parent fb6eec0 commit a74db3a815879558110fcaa4b2f6f322dc1af783
@@ -1,5 +1,6 @@
import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
import classNames from 'classnames';
import {getCompletions} from '../../../autocomplete/Autocompleter';
@@ -41,16 +42,34 @@ export default class Autocomplete extends React.Component {
});
}
onUpArrow() {
this.setState({selectionOffset: this.state.selectionOffset - 1});
return true;
}
onDownArrow() {
this.setState({selectionOffset: this.state.selectionOffset + 1});
return true;
}
render() {
let position = 0;
let renderedCompletions = this.state.completions.map((completionResult, i) => {
let completions = completionResult.completions.map((completion, i) => {
let Component = completion.component;
let className = classNames('mx_Autocomplete_Completion', {
'selected': position == this.state.selectionOffset
});
let componentPosition = position;
position++;
if(Component) {
return Component;
}
return (
<div key={i} className="mx_Autocomplete_Completion" tabIndex={0}>
<div key={i}
className={className}
onMouseOver={() => this.setState({selectionOffset: componentPosition})}>
<span style={{fontWeight: 600}}>{completion.title}</span>
<span>{completion.subtitle}</span>
<span style={{flex: 1}} />
@@ -34,6 +34,9 @@ export default class MessageComposer extends React.Component {
this.onUploadFileSelected = this.onUploadFileSelected.bind(this);
this.onVoiceCallClick = this.onVoiceCallClick.bind(this);
this.onInputContentChanged = this.onInputContentChanged.bind(this);
this.onUpArrow = this.onUpArrow.bind(this);
this.onDownArrow = this.onDownArrow.bind(this);
this.onTab = this.onTab.bind(this);
this.state = {
autocompleteQuery: '',
@@ -129,6 +132,18 @@ export default class MessageComposer extends React.Component {
});
}
onUpArrow() {
return this.refs.autocomplete.onUpArrow();
}
onDownArrow() {
return this.refs.autocomplete.onDownArrow();
}
onTab() {
return this.refs.autocomplete.onTab();
}
render() {
var me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId);
var uploadInputStyle = {display: 'none'};
@@ -182,9 +197,14 @@ export default class MessageComposer extends React.Component {
);
controls.push(
<MessageComposerInput key="controls_input" tabComplete={this.props.tabComplete}
onResize={this.props.onResize} room={this.props.room}
onContentChanged={this.onInputContentChanged} />,
<MessageComposerInput
key="controls_input"
onResize={this.props.onResize}
room={this.props.room}
onUpArrow={this.onUpArrow}
onDownArrow={this.onDownArrow}
onTab={this.onTab}
onContentChanged={this.onInputContentChanged} />,
uploadButton,
hangupButton,
callButton,
@@ -201,7 +221,10 @@ export default class MessageComposer extends React.Component {
return (
<div className="mx_MessageComposer mx_fadable" style={{ opacity: this.props.opacity }}>
<div className="mx_MessageComposer_autocomplete_wrapper">
<Autocomplete query={this.state.autocompleteQuery} selection={this.state.selection} />
<Autocomplete
ref="autocomplete"
query={this.state.autocompleteQuery}
selection={this.state.selection} />
</div>
<div className="mx_MessageComposer_wrapper">
<div className="mx_MessageComposer_row">
@@ -73,6 +73,9 @@ export default class MessageComposerInput extends React.Component {
this.handleReturn = this.handleReturn.bind(this);
this.handleKeyCommand = this.handleKeyCommand.bind(this);
this.setEditorState = this.setEditorState.bind(this);
this.onUpArrow = this.onUpArrow.bind(this);
this.onDownArrow = this.onDownArrow.bind(this);
this.onTab = this.onTab.bind(this);
let isRichtextEnabled = window.localStorage.getItem('mx_editor_rte_enabled');
if(isRichtextEnabled == null) {
@@ -489,6 +492,30 @@ export default class MessageComposerInput extends React.Component {
return true;
}
onUpArrow(e) {
if(this.props.onUpArrow) {
if(this.props.onUpArrow()) {
e.preventDefault();
}
}
}
onDownArrow(e) {
if(this.props.onDownArrow) {
if(this.props.onDownArrow()) {
e.preventDefault();
}
}
}
onTab(e) {
if(this.props.onTab) {
if(this.props.onTab()) {
e.preventDefault();
}
}
}
render() {
let className = "mx_MessageComposer_input";
@@ -507,6 +534,9 @@ export default class MessageComposerInput extends React.Component {
handleKeyCommand={this.handleKeyCommand}
handleReturn={this.handleReturn}
stripPastedStyles={!this.state.isRichtextEnabled}
onTab={this.onTab}
onUpArrow={this.onUpArrow}
onDownArrow={this.onDownArrow}
spellCheck={true} />
</div>
);
@@ -524,5 +554,11 @@ MessageComposerInput.propTypes = {
room: React.PropTypes.object.isRequired,
// called with current plaintext content (as a string) whenever it changes
onContentChanged: React.PropTypes.func
onContentChanged: React.PropTypes.func,
onUpArrow: React.PropTypes.func,
onDownArrow: React.PropTypes.func,
onTab: React.PropTypes.func
};

0 comments on commit a74db3a

Please sign in to comment.