2017-05-02 20:04:16 -04:00
|
|
|
import React from 'react';
|
2016-12-14 12:21:31 -05:00
|
|
|
import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container';
|
2017-09-23 08:47:32 -04:00
|
|
|
import AutosuggestEmoji from './autosuggest_emoji';
|
2016-12-14 12:21:31 -05:00
|
|
|
import ImmutablePropTypes from 'react-immutable-proptypes';
|
2017-04-21 14:05:35 -04:00
|
|
|
import PropTypes from 'prop-types';
|
2017-02-27 19:52:31 -05:00
|
|
|
import { isRtl } from '../rtl';
|
2017-05-02 20:04:16 -04:00
|
|
|
import ImmutablePureComponent from 'react-immutable-pure-component';
|
2017-05-26 12:22:23 -04:00
|
|
|
import Textarea from 'react-textarea-autosize';
|
2017-09-23 08:47:32 -04:00
|
|
|
import classNames from 'classnames';
|
2016-12-14 12:21:31 -05:00
|
|
|
|
|
|
|
const textAtCursorMatchesToken = (str, caretPosition) => {
|
|
|
|
let word;
|
|
|
|
|
|
|
|
let left = str.slice(0, caretPosition).search(/\S+$/);
|
|
|
|
let right = str.slice(caretPosition).search(/\s/);
|
|
|
|
|
|
|
|
if (right < 0) {
|
|
|
|
word = str.slice(left);
|
|
|
|
} else {
|
|
|
|
word = str.slice(left, right + caretPosition);
|
|
|
|
}
|
|
|
|
|
2017-09-23 08:47:32 -04:00
|
|
|
if (!word || word.trim().length < 2 || ['@', ':'].indexOf(word[0]) === -1) {
|
2016-12-14 12:21:31 -05:00
|
|
|
return [null, null];
|
|
|
|
}
|
|
|
|
|
2017-09-23 08:47:32 -04:00
|
|
|
word = word.trim().toLowerCase();
|
2016-12-14 12:21:31 -05:00
|
|
|
|
|
|
|
if (word.length > 0) {
|
|
|
|
return [left + 1, word];
|
|
|
|
} else {
|
|
|
|
return [null, null];
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2017-06-23 13:36:54 -04:00
|
|
|
export default class AutosuggestTextarea extends ImmutablePureComponent {
|
2017-04-21 14:05:35 -04:00
|
|
|
|
2017-05-12 08:44:10 -04:00
|
|
|
static propTypes = {
|
|
|
|
value: PropTypes.string,
|
|
|
|
suggestions: ImmutablePropTypes.list,
|
|
|
|
disabled: PropTypes.bool,
|
|
|
|
placeholder: PropTypes.string,
|
|
|
|
onSuggestionSelected: PropTypes.func.isRequired,
|
|
|
|
onSuggestionsClearRequested: PropTypes.func.isRequired,
|
|
|
|
onSuggestionsFetchRequested: PropTypes.func.isRequired,
|
|
|
|
onChange: PropTypes.func.isRequired,
|
|
|
|
onKeyUp: PropTypes.func,
|
|
|
|
onKeyDown: PropTypes.func,
|
|
|
|
onPaste: PropTypes.func.isRequired,
|
2017-05-20 11:31:47 -04:00
|
|
|
autoFocus: PropTypes.bool,
|
2017-05-12 08:44:10 -04:00
|
|
|
};
|
|
|
|
|
|
|
|
static defaultProps = {
|
2017-05-20 11:31:47 -04:00
|
|
|
autoFocus: true,
|
2017-05-12 08:44:10 -04:00
|
|
|
};
|
|
|
|
|
2017-05-24 11:55:16 -04:00
|
|
|
state = {
|
|
|
|
suggestionsHidden: false,
|
|
|
|
selectedSuggestion: 0,
|
|
|
|
lastToken: null,
|
|
|
|
tokenStart: 0,
|
|
|
|
};
|
2016-12-14 12:21:31 -05:00
|
|
|
|
2017-05-24 11:55:16 -04:00
|
|
|
onChange = (e) => {
|
2016-12-14 12:21:31 -05:00
|
|
|
const [ tokenStart, token ] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart);
|
|
|
|
|
2017-01-30 15:40:55 -05:00
|
|
|
if (token !== null && this.state.lastToken !== token) {
|
2016-12-14 12:21:31 -05:00
|
|
|
this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart });
|
|
|
|
this.props.onSuggestionsFetchRequested(token);
|
2016-12-23 19:39:14 -05:00
|
|
|
} else if (token === null) {
|
2016-12-14 12:21:31 -05:00
|
|
|
this.setState({ lastToken: null });
|
|
|
|
this.props.onSuggestionsClearRequested();
|
|
|
|
}
|
|
|
|
|
|
|
|
this.props.onChange(e);
|
2017-04-21 14:05:35 -04:00
|
|
|
}
|
2016-12-14 12:21:31 -05:00
|
|
|
|
2017-05-24 11:55:16 -04:00
|
|
|
onKeyDown = (e) => {
|
2016-12-14 12:21:31 -05:00
|
|
|
const { suggestions, disabled } = this.props;
|
|
|
|
const { selectedSuggestion, suggestionsHidden } = this.state;
|
|
|
|
|
|
|
|
if (disabled) {
|
|
|
|
e.preventDefault();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
switch(e.key) {
|
2017-01-30 15:40:55 -05:00
|
|
|
case 'Escape':
|
|
|
|
if (!suggestionsHidden) {
|
|
|
|
e.preventDefault();
|
|
|
|
this.setState({ suggestionsHidden: true });
|
|
|
|
}
|
|
|
|
|
|
|
|
break;
|
|
|
|
case 'ArrowDown':
|
|
|
|
if (suggestions.size > 0 && !suggestionsHidden) {
|
|
|
|
e.preventDefault();
|
|
|
|
this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, suggestions.size - 1) });
|
|
|
|
}
|
|
|
|
|
|
|
|
break;
|
|
|
|
case 'ArrowUp':
|
|
|
|
if (suggestions.size > 0 && !suggestionsHidden) {
|
|
|
|
e.preventDefault();
|
|
|
|
this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, 0) });
|
|
|
|
}
|
|
|
|
|
|
|
|
break;
|
|
|
|
case 'Enter':
|
|
|
|
case 'Tab':
|
|
|
|
// Select suggestion
|
|
|
|
if (this.state.lastToken !== null && suggestions.size > 0 && !suggestionsHidden) {
|
|
|
|
e.preventDefault();
|
|
|
|
e.stopPropagation();
|
|
|
|
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestions.get(selectedSuggestion));
|
|
|
|
}
|
|
|
|
|
|
|
|
break;
|
2016-12-14 12:21:31 -05:00
|
|
|
}
|
2017-01-04 21:29:43 -05:00
|
|
|
|
|
|
|
if (e.defaultPrevented || !this.props.onKeyDown) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
this.props.onKeyDown(e);
|
2017-04-21 14:05:35 -04:00
|
|
|
}
|
2016-12-14 12:21:31 -05:00
|
|
|
|
2017-05-24 11:55:16 -04:00
|
|
|
onBlur = () => {
|
2017-06-07 14:05:53 -04:00
|
|
|
this.setState({ suggestionsHidden: true });
|
2017-04-21 14:05:35 -04:00
|
|
|
}
|
2016-12-23 19:39:14 -05:00
|
|
|
|
2017-05-24 11:55:16 -04:00
|
|
|
onSuggestionClick = (e) => {
|
2017-09-23 08:47:32 -04:00
|
|
|
const suggestion = this.props.suggestions.get(e.currentTarget.getAttribute('data-index'));
|
2016-12-14 12:21:31 -05:00
|
|
|
e.preventDefault();
|
|
|
|
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion);
|
2017-01-23 01:57:58 -05:00
|
|
|
this.textarea.focus();
|
2017-04-21 14:05:35 -04:00
|
|
|
}
|
2016-12-14 12:21:31 -05:00
|
|
|
|
|
|
|
componentWillReceiveProps (nextProps) {
|
|
|
|
if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden) {
|
|
|
|
this.setState({ suggestionsHidden: false });
|
|
|
|
}
|
2017-04-21 14:05:35 -04:00
|
|
|
}
|
2016-12-14 12:21:31 -05:00
|
|
|
|
2017-05-24 11:55:16 -04:00
|
|
|
setTextarea = (c) => {
|
2016-12-14 12:21:31 -05:00
|
|
|
this.textarea = c;
|
2017-04-21 14:05:35 -04:00
|
|
|
}
|
2016-12-14 12:21:31 -05:00
|
|
|
|
2017-05-24 11:55:16 -04:00
|
|
|
onPaste = (e) => {
|
2017-02-28 21:52:46 -05:00
|
|
|
if (e.clipboardData && e.clipboardData.files.length === 1) {
|
2017-05-20 11:31:47 -04:00
|
|
|
this.props.onPaste(e.clipboardData.files);
|
2017-02-28 21:52:46 -05:00
|
|
|
e.preventDefault();
|
|
|
|
}
|
2017-04-21 14:05:35 -04:00
|
|
|
}
|
2017-02-28 21:52:46 -05:00
|
|
|
|
2017-09-23 08:47:32 -04:00
|
|
|
renderSuggestion = (suggestion, i) => {
|
|
|
|
const { selectedSuggestion } = this.state;
|
|
|
|
let inner, key;
|
|
|
|
|
|
|
|
if (typeof suggestion === 'object') {
|
|
|
|
inner = <AutosuggestEmoji emoji={suggestion} />;
|
|
|
|
key = suggestion.id;
|
|
|
|
} else {
|
|
|
|
inner = <AutosuggestAccountContainer id={suggestion} />;
|
|
|
|
key = suggestion;
|
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div role='button' tabIndex='0' key={key} data-index={i} className={classNames('autosuggest-textarea__suggestions__item', { selected: i === selectedSuggestion })} onMouseDown={this.onSuggestionClick}>
|
|
|
|
{inner}
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2016-12-14 12:21:31 -05:00
|
|
|
render () {
|
2017-05-09 20:51:43 -04:00
|
|
|
const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus } = this.props;
|
2017-09-23 08:47:32 -04:00
|
|
|
const { suggestionsHidden } = this.state;
|
2017-04-22 22:26:55 -04:00
|
|
|
const style = { direction: 'ltr' };
|
2017-02-27 19:52:31 -05:00
|
|
|
|
|
|
|
if (isRtl(value)) {
|
|
|
|
style.direction = 'rtl';
|
|
|
|
}
|
2016-12-14 12:21:31 -05:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className='autosuggest-textarea'>
|
2017-07-27 18:54:48 -04:00
|
|
|
<label>
|
|
|
|
<span style={{ display: 'none' }}>{placeholder}</span>
|
2017-09-23 08:47:32 -04:00
|
|
|
|
2017-07-27 18:54:48 -04:00
|
|
|
<Textarea
|
|
|
|
inputRef={this.setTextarea}
|
|
|
|
className='autosuggest-textarea__textarea'
|
|
|
|
disabled={disabled}
|
|
|
|
placeholder={placeholder}
|
|
|
|
autoFocus={autoFocus}
|
|
|
|
value={value}
|
|
|
|
onChange={this.onChange}
|
|
|
|
onKeyDown={this.onKeyDown}
|
|
|
|
onKeyUp={onKeyUp}
|
|
|
|
onBlur={this.onBlur}
|
|
|
|
onPaste={this.onPaste}
|
|
|
|
style={style}
|
|
|
|
/>
|
|
|
|
</label>
|
2016-12-14 12:21:31 -05:00
|
|
|
|
2017-05-19 05:42:54 -04:00
|
|
|
<div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
|
2017-09-23 08:47:32 -04:00
|
|
|
{suggestions.map(this.renderSuggestion)}
|
2016-12-14 12:21:31 -05:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2017-05-12 08:44:10 -04:00
|
|
|
}
|