mirrors/element-web
1
0
Fork 0
mirror of https://github.com/element-hq/element-web synced 2024-10-25 20:26:51 +03:00
Code Issues Projects Releases Packages Wiki Activity

Cleanup autocomplete

Browse source
This commit is contained in:
Aviral Dasgupta 2016-08-23 00:36:31 +05:30
parent e173900808
commit 884abbd7e9
8 changed files with 28 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/autocomplete/AutocompleteProvider.js
View file

@ -54,10 +54,7 @@ export default class AutocompleteProvider {
}
renderCompletions(completions: [React.Component]): ?React.Component {
return (
<div>
{completions}
</div>
);
console.error('stub; should be implemented in subclasses');
return null;
}
}

6
src/autocomplete/CommandProvider.js
View file

@ -85,8 +85,8 @@ export default class CommandProvider extends AutocompleteProvider {
}
renderCompletions(completions: [React.Component]): ?React.Component {
return React.cloneElement(super.renderCompletions(completions), {
className: 'mx_Autocomplete_Completion_container_block',
});
return <div className="mx_Autocomplete_Completion_container_block">
{completions}
</div>;
}
}

12
src/autocomplete/Components.js
View file

@ -19,9 +19,9 @@ export class TextualCompletion extends React.Component {
} = this.props;
return (
<div className={classNames('mx_Autocomplete_Completion_block', className)} {...restProps}>
<span>{title}</span>
<em style={{flex: 1}}>{subtitle}</em>
<span style={{color: 'gray', float: 'right'}}>{description}</span>
<span className="mx_Autocomplete_Completion_title">{title}</span>
<span className="mx_Autocomplete_Completion_subtitle">{subtitle}</span>
<span className="mx_Autocomplete_Completion_description">{description}</span>
</div>
);
}
@ -46,9 +46,9 @@ export class PillCompletion extends React.Component {
return (
<div className={classNames('mx_Autocomplete_Completion_pill', className)} {...restProps}>
{initialComponent}
<span>{title}</span>
<em>{subtitle}</em>
<span style={{color: 'gray'}}>{description}</span>
<span className="mx_Autocomplete_Completion_title">{title}</span>
<span className="mx_Autocomplete_Completion_subtitle">{subtitle}</span>
<span className="mx_Autocomplete_Completion_description">{description}</span>
</div>
);
}

6
src/autocomplete/DuckDuckGoProvider.js
View file

@ -87,4 +87,10 @@ export default class DuckDuckGoProvider extends AutocompleteProvider {
}
return instance;
}
renderCompletions(completions: [React.Component]): ?React.Component {
return <div className="mx_Autocomplete_Completion_container_block">
{completions}
</div>;
}
}

6
src/autocomplete/EmojiProvider.js
View file

@ -49,8 +49,8 @@ export default class EmojiProvider extends AutocompleteProvider {
}
renderCompletions(completions: [React.Component]): ?React.Component {
return React.cloneElement(super.renderCompletions(completions), {
className: 'mx_Autocomplete_Completion_container_pill',
});
return <div className="mx_Autocomplete_Completion_container_pill">
{completions}
</div>;
}
}

6
src/autocomplete/RoomProvider.js
View file

@ -64,8 +64,8 @@ export default class RoomProvider extends AutocompleteProvider {
}
renderCompletions(completions: [React.Component]): ?React.Component {
return React.cloneElement(super.renderCompletions(completions), {
className: 'mx_Autocomplete_Completion_container_pill',
});
return <div className="mx_Autocomplete_Completion_container_pill">
{completions}
</div>;
}
}

6
src/autocomplete/UserProvider.js
View file

@ -60,8 +60,8 @@ export default class UserProvider extends AutocompleteProvider {
}
renderCompletions(completions: [React.Component]): ?React.Component {
return React.cloneElement(super.renderCompletions(completions), {
className: 'mx_Autocomplete_Completion_container_pill',
});
return <div className="mx_Autocomplete_Completion_container_pill">
{completions}
</div>;
}
}

3
src/components/views/rooms/Autocomplete.js
View file

@ -105,7 +105,8 @@ export default class Autocomplete extends React.Component {
// this is the selected completion, so scroll it into view if needed
const selectedCompletion = this.refs[`completion${this.state.selectionOffset}`];
if (selectedCompletion && this.container) {
const {offsetTop} = ReactDOM.findDOMNode(selectedCompletion);
const domNode = ReactDOM.findDOMNode(selectedCompletion);
const offsetTop = domNode && domNode.offsetTop;
if (offsetTop > this.container.scrollTop + this.container.offsetHeight ||
offsetTop < this.container.scrollTop) {
this.container.scrollTop = offsetTop - this.container.offsetTop;