Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit 4af983e

Browse files
aviraldgaviraldg
committed
Style changes and improvements in autocomplete
1 parent b9d7743 commit 4af983e

10 files changed

Lines changed: 136 additions & 94 deletions

File tree

‎src/autocomplete/Autocompleter.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,12 @@ import UserProvider from './UserProvider';
55
import EmojiProvider from './EmojiProvider';
66

77
const PROVIDERS = [
8+
UserProvider,
89
CommandProvider,
910
DuckDuckGoProvider,
1011
RoomProvider,
11-
UserProvider,
1212
EmojiProvider
13-
].map(completer => new completer());
13+
].map(completer => completer.getInstance());
1414

1515
export function getCompletions(query: String) {
1616
return PROVIDERS.map(provider => {

‎src/autocomplete/CommandProvider.js‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,8 @@ const COMMANDS = [
3939
}
4040
];
4141

42+
let instance = null;
43+
4244
export default class CommandProvider extends AutocompleteProvider {
4345
constructor() {
4446
super();
@@ -49,7 +51,7 @@ export default class CommandProvider extends AutocompleteProvider {
4951

5052
getCompletions(query: String) {
5153
let completions = [];
52-
const matches = query.match(/(^\/\w+)/);
54+
const matches = query.match(/(^\/\w*)/);
5355
if(!!matches) {
5456
const command = matches[0];
5557
completions = this.fuse.search(command).map(result => {
@@ -66,4 +68,11 @@ export default class CommandProvider extends AutocompleteProvider {
6668
getName() {
6769
return 'Commands';
6870
}
71+
72+
static getInstance(): CommandProvider {
73+
if(instance == null)
74+
instance = new CommandProvider();
75+
76+
return instance;
77+
}
6978
}

‎src/autocomplete/DuckDuckGoProvider.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import 'whatwg-fetch';
55
const DDG_REGEX = /\/ddg\s+(.+)$/;
66
const REFERER = 'vector';
77

8+
let instance = null;
9+
810
export default class DuckDuckGoProvider extends AutocompleteProvider {
911
static getQueryUri(query: String) {
1012
return `http://api.duckduckgo.com/?q=${encodeURIComponent(query)}`
@@ -51,4 +53,11 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
5153
getName() {
5254
return 'Results from DuckDuckGo';
5355
}
56+
57+
static getInstance(): DuckDuckGoProvider {
58+
if(instance == null)
59+
instance = new DuckDuckGoProvider();
60+
61+
return instance;
62+
}
5463
}

‎src/autocomplete/EmojiProvider.js‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,19 +6,19 @@ import Fuse from 'fuse.js';
66
const EMOJI_REGEX = /:\w*:?/g;
77
const EMOJI_SHORTNAMES = Object.keys(emojioneList);
88

9+
let instance = null;
10+
911
export default class EmojiProvider extends AutocompleteProvider {
1012
constructor() {
1113
super();
12-
console.log(EMOJI_SHORTNAMES);
1314
this.fuse = new Fuse(EMOJI_SHORTNAMES);
1415
}
1516

1617
getCompletions(query: String) {
1718
let completions = [];
18-
const matches = query.match(EMOJI_REGEX);
19-
console.log(matches);
20-
if(!!matches) {
21-
const command = matches[0];
19+
let matches = query.match(EMOJI_REGEX);
20+
let command = matches && matches[0];
21+
if(command) {
2222
completions = this.fuse.search(command).map(result => {
2323
let shortname = EMOJI_SHORTNAMES[result];
2424
let imageHTML = shortnameToImage(shortname);
@@ -38,4 +38,10 @@ export default class EmojiProvider extends AutocompleteProvider {
3838
getName() {
3939
return 'Emoji';
4040
}
41+
42+
static getInstance() {
43+
if(instance == null)
44+
instance = new EmojiProvider();
45+
return instance;
46+
}
4147
}

‎src/autocomplete/RoomProvider.js‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,12 @@
11
import AutocompleteProvider from './AutocompleteProvider';
22
import Q from 'q';
33
import MatrixClientPeg from '../MatrixClientPeg';
4+
import Fuse from 'fuse.js';
45

56
const ROOM_REGEX = /(?=#)[^\s]*/g;
67

8+
let instance = null;
9+
710
export default class RoomProvider extends AutocompleteProvider {
811
constructor() {
912
super();
@@ -13,8 +16,8 @@ export default class RoomProvider extends AutocompleteProvider {
1316
let client = MatrixClientPeg.get();
1417
let completions = [];
1518
const matches = query.match(ROOM_REGEX);
16-
if(!!matches) {
17-
const command = matches[0];
19+
const command = matches && matches[0];
20+
if(command) {
1821
completions = client.getRooms().map(room => {
1922
return {
2023
title: room.name,
@@ -28,4 +31,11 @@ export default class RoomProvider extends AutocompleteProvider {
2831
getName() {
2932
return 'Rooms';
3033
}
34+
35+
static getInstance() {
36+
if(instance == null)
37+
instance = new RoomProvider();
38+
39+
return instance;
40+
}
3141
}

‎src/autocomplete/UserProvider.js‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,22 @@ import MatrixClientPeg from '../MatrixClientPeg';
44

55
const ROOM_REGEX = /@[^\s]*/g;
66

7+
let instance = null;
8+
79
export default class UserProvider extends AutocompleteProvider {
810
constructor() {
911
super();
12+
this.users = [];
1013
}
1114

1215
getCompletions(query: String) {
13-
let client = MatrixClientPeg.get();
1416
let completions = [];
1517
const matches = query.match(ROOM_REGEX);
1618
if(!!matches) {
1719
const command = matches[0];
18-
completions = client.getUsers().map(user => {
20+
completions = this.users.map(user => {
1921
return {
20-
title: user.displayName,
22+
title: user.displayName || user.userId,
2123
description: user.userId
2224
};
2325
});
@@ -28,4 +30,15 @@ export default class UserProvider extends AutocompleteProvider {
2830
getName() {
2931
return 'Users';
3032
}
33+
34+
setUserList(users) {
35+
console.log('setUserList');
36+
this.users = users;
37+
}
38+
39+
static getInstance(): UserProvider {
40+
if(instance == null)
41+
instance = new UserProvider();
42+
return instance;
43+
}
3144
}

‎src/components/structures/RoomView.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,8 @@ var rate_limited_func = require('../../ratelimitedfunc');
4141
var ObjectUtils = require('../../ObjectUtils');
4242
var MatrixTools = require('../../MatrixTools');
4343

44+
import UserProvider from '../../autocomplete/UserProvider';
45+
4446
var DEBUG = false;
4547

4648
if (DEBUG) {
@@ -495,21 +497,26 @@ module.exports = React.createClass({
495497
}
496498
},
497499

498-
_updateTabCompleteList: new rate_limited_func(function() {
500+
_updateTabCompleteList: function() {
499501
var cli = MatrixClientPeg.get();
502+
console.log('_updateTabCompleteList');
503+
console.log(this.state.room);
504+
console.trace();
500505

501-
if (!this.state.room || !this.tabComplete) {
506+
if (!this.state.room) {
502507
return;
503508
}
504509
var members = this.state.room.getJoinedMembers().filter(function(member) {
505510
if (member.userId !== cli.credentials.userId) return true;
506511
});
512+
513+
UserProvider.getInstance().setUserList(members);
507514
this.tabComplete.setCompletionList(
508515
MemberEntry.fromMemberList(members).concat(
509516
CommandEntry.fromCommands(SlashCommands.getCommandList())
510517
)
511518
);
512-
}, 500),
519+
},
513520

514521
componentDidUpdate: function() {
515522
if (this.refs.roomView) {

‎src/components/views/rooms/Autocomplete.js‎

Lines changed: 10 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,14 @@ export default class Autocomplete extends React.Component {
1616

1717
getCompletions(props.query).map(completionResult => {
1818
try {
19-
console.log(`${completionResult.provider.getName()}: ${JSON.stringify(completionResult.completions)}`);
19+
// console.log(`${completionResult.provider.getName()}: ${JSON.stringify(completionResult.completions)}`);
2020
completionResult.completions.then(completions => {
2121
let i = this.state.completions.findIndex(
2222
completion => completion.provider === completionResult.provider
2323
);
2424

2525
i = i == -1 ? this.state.completions.length : i;
26-
console.log(completionResult);
26+
// console.log(completionResult);
2727
let newCompletions = Object.assign([], this.state.completions);
2828
completionResult.completions = completions;
2929
newCompletions[i] = completionResult;
@@ -42,13 +42,6 @@ export default class Autocomplete extends React.Component {
4242
}
4343

4444
render() {
45-
const pinElement = document.querySelector(this.props.pinSelector);
46-
if(!pinElement) return null;
47-
48-
const position = pinElement.getBoundingClientRect();
49-
50-
51-
5245
const renderedCompletions = this.state.completions.map((completionResult, i) => {
5346
// console.log(completionResult);
5447
let completions = completionResult.completions.map((completion, i) => {
@@ -58,10 +51,11 @@ export default class Autocomplete extends React.Component {
5851
}
5952

6053
return (
61-
<div key={i} className="mx_Autocomplete_Completion">
62-
<span>{completion.title}</span>
63-
<em>{completion.subtitle}</em>
64-
<span style={{color: 'gray', float: 'right'}}>{completion.description}</span>
54+
<div key={i} className="mx_Autocomplete_Completion" tabIndex={0}>
55+
<span style={{fontWeight: 600}}>{completion.title}</span>
56+
<span>{completion.subtitle}</span>
57+
<span style={{flex: 1}} />
58+
<span style={{color: 'gray'}}>{completion.description}</span>
6559
</div>
6660
);
6761
});
@@ -70,7 +64,7 @@ export default class Autocomplete extends React.Component {
7064
return completions.length > 0 ? (
7165
<div key={i} className="mx_Autocomplete_ProviderSection">
7266
<span className="mx_Autocomplete_provider_name">{completionResult.provider.getName()}</span>
73-
<ReactCSSTransitionGroup transitionName="autocomplete" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
67+
<ReactCSSTransitionGroup component="div" transitionName="autocomplete" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
7468
{completions}
7569
</ReactCSSTransitionGroup>
7670
</div>
@@ -79,7 +73,7 @@ export default class Autocomplete extends React.Component {
7973

8074
return (
8175
<div className="mx_Autocomplete">
82-
<ReactCSSTransitionGroup transitionName="autocomplete" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
76+
<ReactCSSTransitionGroup component="div" transitionName="autocomplete" transitionEnterTimeout={300} transitionLeaveTimeout={300}>
8377
{renderedCompletions}
8478
</ReactCSSTransitionGroup>
8579
</div>
@@ -89,11 +83,5 @@ export default class Autocomplete extends React.Component {
8983

9084
Autocomplete.propTypes = {
9185
// the query string for which to show autocomplete suggestions
92-
query: React.PropTypes.string.isRequired,
93-
94-
// CSS selector indicating which element to pin the autocomplete to
95-
pinSelector: React.PropTypes.string.isRequired,
96-
97-
// attributes on which the autocomplete should match the pinElement
98-
pinTo: React.PropTypes.array.isRequired
86+
query: React.PropTypes.string.isRequired
9987
};

0 commit comments

Comments
 (0)