Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Style changes and improvements in autocomplete
  • Loading branch information
@aviraldg
aviraldg committed Jun 20, 2016
1 parent b9d7743 commit 4af983e
Show file tree
Hide file tree
Showing 10 changed files with 136 additions and 94 deletions.
4 changes: 2 additions & 2 deletions src/autocomplete/Autocompleter.js
View file
Expand Up @@ -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 => {
Expand Down
11 changes: 10 additions & 1 deletion src/autocomplete/CommandProvider.js
View file
Expand Up @@ -39,6 +39,8 @@ const COMMANDS = [
}
];

let instance = null;

export default class CommandProvider extends AutocompleteProvider {
constructor() {
super();
Expand All @@ -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 => {
Expand All @@ -66,4 +68,11 @@ export default class CommandProvider extends AutocompleteProvider {
getName() {
return 'Commands';
}

static getInstance(): CommandProvider {
if(instance == null)
instance = new CommandProvider();

return instance;
}
}
9 changes: 9 additions & 0 deletions src/autocomplete/DuckDuckGoProvider.js
View file
Expand Up @@ -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)}`
Expand Down Expand Up @@ -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;
}
}
16 changes: 11 additions & 5 deletions src/autocomplete/EmojiProvider.js
View file
Expand Up @@ -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);
Expand All @@ -38,4 +38,10 @@ export default class EmojiProvider extends AutocompleteProvider {
getName() {
return 'Emoji';
}

static getInstance() {
if(instance == null)
instance = new EmojiProvider();
return instance;
}
}
14 changes: 12 additions & 2 deletions src/autocomplete/RoomProvider.js
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();
Expand All @@ -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,
Expand All @@ -28,4 +31,11 @@ export default class RoomProvider extends AutocompleteProvider {
getName() {
return 'Rooms';
}

static getInstance() {
if(instance == null)
instance = new RoomProvider();

return instance;
}
}
19 changes: 16 additions & 3 deletions src/autocomplete/UserProvider.js
View file
Expand Up @@ -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
};
});
Expand All @@ -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;
}
}
13 changes: 10 additions & 3 deletions src/components/structures/RoomView.js
View file
Expand Up @@ -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) {
Expand Down Expand Up @@ -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) {
Expand Down
32 changes: 10 additions & 22 deletions src/components/views/rooms/Autocomplete.js
View file
Expand Up @@ -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;
Expand All @@ -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) => {
Expand All @@ -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>
);
});
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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
};

0 comments on commit 4af983e

Please sign in to comment.