mirror of
https://github.com/mastodon/mastodon.git
synced 2024-08-20 21:08:15 -07:00
refactor drag'n'drop on search input
current default behavior is to insert additional drag & drop content into pre-existing content: e.g. first `alpha` is dropped, then `beta`; and the search-string becomes `alpbetaha`. This change causes additional dropped content to overwrite pre-existing content entirely, such that `alpha` becomes `beta`. Currently, drag-and-drop content in Chrome consists of the URL of the item being dragged; but in Firefox, using the `x-moz-url-desc`, if a tag or an account is dragged, then the display-text (e.g. `#somehashtag` or `@user`) will be dropped instead. This enables the content-specific search drop-down to work on the more specific data-types (so, search for hashtag, or profile). This functionality currently only works with Firefox, though: hence the `TODO` annotation
This commit is contained in:
parent
69d00e2721
commit
c724d7b09c
1 changed files with 21 additions and 0 deletions
|
@ -165,6 +165,25 @@ class Search extends PureComponent {
|
||||||
this.setState({ expanded: false, selectedOption: -1 });
|
this.setState({ expanded: false, selectedOption: -1 });
|
||||||
};
|
};
|
||||||
|
|
||||||
|
handleDragOver = (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
};
|
||||||
|
handleDrop = (e) => {
|
||||||
|
const { onChange } = this.props;
|
||||||
|
|
||||||
|
e.preventDefault();
|
||||||
|
|
||||||
|
this.setState({ expanded: true, selectedOption: -1 });
|
||||||
|
|
||||||
|
// TODO: update the type parameter if/when `url-desc` is standardized
|
||||||
|
let query = e.dataTransfer.getData('text/x-moz-url-desc') ||
|
||||||
|
e.dataTransfer.getData('text/uri-list') ||
|
||||||
|
e.dataTransfer.getData('text/plain');
|
||||||
|
onChange(query);
|
||||||
|
this._calculateOptions(query);
|
||||||
|
e.target.focus();
|
||||||
|
};
|
||||||
|
|
||||||
handleHashtagClick = () => {
|
handleHashtagClick = () => {
|
||||||
const { value, onClickSearchResult, history } = this.props;
|
const { value, onClickSearchResult, history } = this.props;
|
||||||
|
|
||||||
|
@ -333,6 +352,8 @@ class Search extends PureComponent {
|
||||||
onKeyDown={this.handleKeyDown}
|
onKeyDown={this.handleKeyDown}
|
||||||
onFocus={this.handleFocus}
|
onFocus={this.handleFocus}
|
||||||
onBlur={this.handleBlur}
|
onBlur={this.handleBlur}
|
||||||
|
onDragOver={this.handleDragOver}
|
||||||
|
onDrop={this.handleDrop}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<div role='button' tabIndex={0} className='search__icon' onClick={this.handleClear}>
|
<div role='button' tabIndex={0} className='search__icon' onClick={this.handleClear}>
|
||||||
|
|
Loading…
Reference in a new issue