Style changes and improvements in autocomplete

pull/21833/head
Aviral Dasgupta 2016-06-20 13:52:55 +05:30
parent b9d7743e5a
commit 4af983ed90
10 changed files with 135 additions and 93 deletions

View File

@ -5,12 +5,12 @@ import UserProvider from './UserProvider';
import EmojiProvider from './EmojiProvider';
const PROVIDERS = [
UserProvider,
CommandProvider,
DuckDuckGoProvider,
RoomProvider,
UserProvider,
EmojiProvider
].map(completer => new completer());
].map(completer => completer.getInstance());
export function getCompletions(query: String) {
return PROVIDERS.map(provider => {

View File

@ -39,6 +39,8 @@ const COMMANDS = [
}
];
let instance = null;
export default class CommandProvider extends AutocompleteProvider {
constructor() {
super();
@ -49,7 +51,7 @@ export default class CommandProvider extends AutocompleteProvider {
getCompletions(query: String) {
let completions = [];
const matches = query.match(/(^\/\w+)/);
const matches = query.match(/(^\/\w*)/);
if(!!matches) {
const command = matches[0];
completions = this.fuse.search(command).map(result => {
@ -66,4 +68,11 @@ export default class CommandProvider extends AutocompleteProvider {
getName() {
return 'Commands';
}
static getInstance(): CommandProvider {
if(instance == null)
instance = new CommandProvider();
return instance;
}
}

View File

@ -5,6 +5,8 @@ import 'whatwg-fetch';
const DDG_REGEX = /\/ddg\s+(.+)$/;
const REFERER = 'vector';
let instance = null;
export default class DuckDuckGoProvider extends AutocompleteProvider {
static getQueryUri(query: String) {
return `http://api.duckduckgo.com/?q=${encodeURIComponent(query)}`
@ -51,4 +53,11 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
getName() {
return 'Results from DuckDuckGo';
}
static getInstance(): DuckDuckGoProvider {
if(instance == null)
instance = new DuckDuckGoProvider();
return instance;
}
}

View File

@ -6,19 +6,19 @@ import Fuse from 'fuse.js';
const EMOJI_REGEX = /:\w*:?/g;
const EMOJI_SHORTNAMES = Object.keys(emojioneList);
let instance = null;
export default class EmojiProvider extends AutocompleteProvider {
constructor() {
super();
console.log(EMOJI_SHORTNAMES);
this.fuse = new Fuse(EMOJI_SHORTNAMES);
}
getCompletions(query: String) {
let completions = [];
const matches = query.match(EMOJI_REGEX);
console.log(matches);
if(!!matches) {
const command = matches[0];
let matches = query.match(EMOJI_REGEX);
let command = matches && matches[0];
if(command) {
completions = this.fuse.search(command).map(result => {
let shortname = EMOJI_SHORTNAMES[result];
let imageHTML = shortnameToImage(shortname);
@ -38,4 +38,10 @@ export default class EmojiProvider extends AutocompleteProvider {
getName() {
return 'Emoji';
}
static getInstance() {
if(instance == null)
instance = new EmojiProvider();
return instance;
}
}

View File

@ -1,9 +1,12 @@
import AutocompleteProvider from './AutocompleteProvider';
import Q from 'q';
import MatrixClientPeg from '../MatrixClientPeg';
import Fuse from 'fuse.js';
const ROOM_REGEX = /(?=#)[^\s]*/g;
let instance = null;
export default class RoomProvider extends AutocompleteProvider {
constructor() {
super();
@ -13,8 +16,8 @@ export default class RoomProvider extends AutocompleteProvider {
let client = MatrixClientPeg.get();
let completions = [];
const matches = query.match(ROOM_REGEX);
if(!!matches) {
const command = matches[0];
const command = matches && matches[0];
if(command) {
completions = client.getRooms().map(room => {
return {
title: room.name,
@ -28,4 +31,11 @@ export default class RoomProvider extends AutocompleteProvider {
getName() {
return 'Rooms';
}
static getInstance() {
if(instance == null)
instance = new RoomProvider();
return instance;
}
}

View File

@ -4,20 +4,22 @@ import MatrixClientPeg from '../MatrixClientPeg';
const ROOM_REGEX = /@[^\s]*/g;
let instance = null;
export default class UserProvider extends AutocompleteProvider {
constructor() {
super();
this.users = [];
}
getCompletions(query: String) {
let client = MatrixClientPeg.get();
let completions = [];
const matches = query.match(ROOM_REGEX);
if(!!matches) {
const command = matches[0];
completions = client.getUsers().map(user => {
completions = this.users.map(user => {
return {
title: user.displayName,
title: user.displayName || user.userId,
description: user.userId
};
});
@ -28,4 +30,15 @@ export default class UserProvider extends AutocompleteProvider {
getName() {
return 'Users';
}
setUserList(users) {
console.log('setUserList');
this.users = users;
}
static getInstance(): UserProvider {
if(instance == null)
instance = new UserProvider();
return instance;
}
}

View File

@ -41,6 +41,8 @@ var rate_limited_func = require('../../ratelimitedfunc');
var ObjectUtils = require('../../ObjectUtils');
var MatrixTools = require('../../MatrixTools');
import UserProvider from '../../autocomplete/UserProvider';
var DEBUG = false;
if (DEBUG) {
@ -495,21 +497,26 @@ module.exports = React.createClass({
}
},
_updateTabCompleteList: new rate_limited_func(function() {
_updateTabCompleteList: function() {
var cli = MatrixClientPeg.get();
console.log('_updateTabCompleteList');
console.log(this.state.room);
console.trace();
if (!this.state.room || !this.tabComplete) {
if (!this.state.room) {
return;
}
var members = this.state.room.getJoinedMembers().filter(function(member) {
if (member.userId !== cli.credentials.userId) return true;
});
UserProvider.getInstance().setUserList(members);
this.tabComplete.setCompletionList(
MemberEntry.fromMemberList(members).concat(
CommandEntry.fromCommands(SlashCommands.getCommandList())
)
);
}, 500),
},
componentDidUpdate: function() {
if (this.refs.roomView) {

View File

@ -16,14 +16,14 @@ export default class Autocomplete extends React.Component {
getCompletions(props.query).map(completionResult => {
try {
console.log(`${completionResult.provider.getName()}: ${JSON.stringify(completionResult.completions)}`);
// console.log(`${completionResult.provider.getName()}: ${JSON.stringify(completionResult.completions)}`);
completionResult.completions.then(completions => {
let i = this.state.completions.findIndex(
completion => completion.provider === completionResult.provider
);
i = i == -1 ? this.state.completions.length : i;
console.log(completionResult);
// console.log(completionResult);
let newCompletions = Object.assign([], this.state.completions);
completionResult.completions = completions;
newCompletions[i] = completionResult;
@ -42,13 +42,6 @@ export default class Autocomplete extends React.Component {
}
render() {
const pinElement = document.querySelector(this.props.pinSelector);
if(!pinElement) return null;
const position = pinElement.getBoundingClientRect();
const renderedCompletions = this.state.completions.map((completionResult, i) => {
// console.log(completionResult);
let completions = completionResult.completions.map((completion, i) => {
@ -58,10 +51,11 @@ export default class Autocomplete extends React.Component {
}
return (
<div key={i} className="mx_Autocomplete_Completion">
<span>{completion.title}</span>
<em>{completion.subtitle}</em>
<span style={{color: 'gray', float: 'right'}}>{completion.description}</span>
<div key={i} className="mx_Autocomplete_Completion" tabIndex={0}>
<span style={{fontWeight: 600}}>{completion.title}</span>
<span>{completion.subtitle}</span>
<span style={{flex: 1}} />
<span style={{color: 'gray'}}>{completion.description}</span>
</div>
);
});
@ -70,7 +64,7 @@ export default class Autocomplete extends React.Component {
return completions.length > 0 ? (
<div key={i} className="mx_Autocomplete_ProviderSection">
<span className="mx_Autocomplete_provider_name">{completionResult.provider.getName()}</span>
<ReactCSSTransitionGroup transitionName="autocomplete" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
<ReactCSSTransitionGroup component="div" transitionName="autocomplete" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
{completions}
</ReactCSSTransitionGroup>
</div>
@ -79,7 +73,7 @@ export default class Autocomplete extends React.Component {
return (
<div className="mx_Autocomplete">
<ReactCSSTransitionGroup transitionName="autocomplete" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
<ReactCSSTransitionGroup component="div" transitionName="autocomplete" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
{renderedCompletions}
</ReactCSSTransitionGroup>
</div>
@ -89,11 +83,5 @@ export default class Autocomplete extends React.Component {
Autocomplete.propTypes = {
// the query string for which to show autocomplete suggestions
query: React.PropTypes.string.isRequired,
// CSS selector indicating which element to pin the autocomplete to
pinSelector: React.PropTypes.string.isRequired,
// attributes on which the autocomplete should match the pinElement
pinTo: React.PropTypes.array.isRequired
query: React.PropTypes.string.isRequired
};

View File

@ -25,36 +25,22 @@ import Autocomplete from './Autocomplete';
import UserSettingsStore from '../../../UserSettingsStore';
module.exports = React.createClass({
displayName: 'MessageComposer',
export default class MessageComposer extends React.Component {
constructor(props, context) {
super(props, context);
this.onCallClick = this.onCallClick.bind(this);
this.onHangupClick = this.onHangupClick.bind(this);
this.onUploadClick = this.onUploadClick.bind(this);
this.onUploadFileSelected = this.onUploadFileSelected.bind(this);
this.onVoiceCallClick = this.onVoiceCallClick.bind(this);
this.onInputContentChanged = this.onInputContentChanged.bind(this);
propTypes: {
tabComplete: React.PropTypes.any,
// a callback which is called when the height of the composer is
// changed due to a change in content.
onResize: React.PropTypes.func,
// js-sdk Room object
room: React.PropTypes.object.isRequired,
// string representing the current voip call state
callState: React.PropTypes.string,
// callback when a file to upload is chosen
uploadFile: React.PropTypes.func.isRequired,
// opacity for dynamic UI fading effects
opacity: React.PropTypes.number,
},
getInitialState: function () {
return {
this.state = {
autocompleteQuery: ''
};
},
}
onUploadClick: function(ev) {
onUploadClick(ev) {
if (MatrixClientPeg.get().isGuest()) {
var NeedToRegisterDialog = sdk.getComponent("dialogs.NeedToRegisterDialog");
Modal.createDialog(NeedToRegisterDialog, {
@ -65,9 +51,9 @@ module.exports = React.createClass({
}
this.refs.uploadInput.click();
},
}
onUploadFileSelected: function(ev) {
onUploadFileSelected(ev) {
var files = ev.target.files;
var QuestionDialog = sdk.getComponent("dialogs.QuestionDialog");
@ -103,9 +89,9 @@ module.exports = React.createClass({
this.refs.uploadInput.value = null;
}
});
},
}
onHangupClick: function() {
onHangupClick() {
var call = CallHandler.getCallForRoom(this.props.room.roomId);
//var call = CallHandler.getAnyActiveCall();
if (!call) {
@ -117,31 +103,32 @@ module.exports = React.createClass({
// (e.g. conferences which will hangup the 1:1 room instead)
room_id: call.roomId
});
},
}
onCallClick: function(ev) {
onCallClick(ev) {
dis.dispatch({
action: 'place_call',
type: ev.shiftKey ? "screensharing" : "video",
room_id: this.props.room.roomId
});
},
}
onVoiceCallClick: function(ev) {
onVoiceCallClick(ev) {
dis.dispatch({
action: 'place_call',
type: 'voice',
room_id: this.props.room.roomId
});
},
}
onInputContentChanged(content: String) {
onInputContentChanged(content: string) {
this.setState({
autocompleteQuery: content
})
},
});
console.log(content);
}
render: function() {
render() {
var me = this.props.room.getMember(MatrixClientPeg.get().credentials.userId);
var uploadInputStyle = {display: 'none'};
var MemberAvatar = sdk.getComponent('avatars.MemberAvatar');
@ -196,7 +183,7 @@ module.exports = React.createClass({
controls.push(
<MessageComposerInput key="controls_input" tabComplete={this.props.tabComplete}
onResize={this.props.onResize} room={this.props.room}
onContentChanged={(content) => this.onInputContentChanged(content) } />,
onContentChanged={this.onInputContentChanged} />,
uploadButton,
hangupButton,
callButton,
@ -213,7 +200,7 @@ module.exports = React.createClass({
return (
<div className="mx_MessageComposer mx_fadable" style={{ opacity: this.props.opacity }}>
<div className="mx_MessageComposer_autocomplete_wrapper">
<Autocomplete query={this.state.autocompleteQuery} pinSelector=".mx_RoomView_statusArea" pinTo={['top', 'left', 'width']} />
<Autocomplete query={this.state.autocompleteQuery} />
</div>
<div className="mx_MessageComposer_wrapper">
<div className="mx_MessageComposer_row">
@ -223,5 +210,24 @@ module.exports = React.createClass({
</div>
);
}
});
};
MessageComposer.propTypes = {
tabComplete: React.PropTypes.any,
// a callback which is called when the height of the composer is
// changed due to a change in content.
onResize: React.PropTypes.func,
// js-sdk Room object
room: React.PropTypes.object.isRequired,
// string representing the current voip call state
callState: React.PropTypes.string,
// callback when a file to upload is chosen
uploadFile: React.PropTypes.func.isRequired,
// opacity for dynamic UI fading effects
opacity: React.PropTypes.number
};

View File

@ -72,7 +72,7 @@ export default class MessageComposerInput extends React.Component {
this.onInputClick = this.onInputClick.bind(this);
this.handleReturn = this.handleReturn.bind(this);
this.handleKeyCommand = this.handleKeyCommand.bind(this);
this.onChange = this.onChange.bind(this);
this.setEditorState = this.setEditorState.bind(this);
let isRichtextEnabled = window.localStorage.getItem('mx_editor_rte_enabled');
if(isRichtextEnabled == null) {
@ -207,9 +207,7 @@ export default class MessageComposerInput extends React.Component {
let contentJSON = window.sessionStorage.getItem("mx_messagecomposer_input_" + this.roomId);
if (contentJSON) {
let content = convertFromRaw(JSON.parse(contentJSON));
component.setState({
editorState: component.createEditorState(component.state.isRichtextEnabled, content)
});
component.setEditorState(component.createEditorState(component.state.isRichtextEnabled, content));
}
}
};
@ -344,7 +342,7 @@ export default class MessageComposerInput extends React.Component {
this.refs.editor.focus();
}
onChange(editorState: EditorState) {
setEditorState(editorState: EditorState) {
this.setState({editorState});
if(editorState.getCurrentContent().hasText()) {
@ -361,15 +359,11 @@ export default class MessageComposerInput extends React.Component {
enableRichtext(enabled: boolean) {
if (enabled) {
let html = mdownToHtml(this.state.editorState.getCurrentContent().getPlainText());
this.setState({
editorState: this.createEditorState(enabled, RichText.HTMLtoContentState(html))
});
this.setEditorState(this.createEditorState(enabled, RichText.HTMLtoContentState(html)));
} else {
let markdown = stateToMarkdown(this.state.editorState.getCurrentContent()),
contentState = ContentState.createFromText(markdown);
this.setState({
editorState: this.createEditorState(enabled, contentState)
});
this.setEditorState(this.createEditorState(enabled, contentState));
}
window.localStorage.setItem('mx_editor_rte_enabled', enabled);
@ -412,7 +406,7 @@ export default class MessageComposerInput extends React.Component {
newState = RichUtils.handleKeyCommand(this.state.editorState, command);
if (newState != null) {
this.onChange(newState);
this.setEditorState(newState);
return true;
}
return false;
@ -506,7 +500,7 @@ export default class MessageComposerInput extends React.Component {
<Editor ref="editor"
placeholder="Type a message…"
editorState={this.state.editorState}
onChange={this.onChange}
onChange={this.setEditorState}
keyBindingFn={MessageComposerInput.getKeyBinding}
handleKeyCommand={this.handleKeyCommand}
handleReturn={this.handleReturn}