Style changes and improvements in autocomplete
This commit is contained in:
Aviral Dasgupta
parent
b9d7743e5a
commit
4af983ed90
10 changed files with 135 additions and 93 deletions
|
|
@ -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 => {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
Loading…
Reference in a new issue