app/javascript/mastodon/components/autosuggest_textarea.js

   1 import React from 'react';
   2 import AutosuggestAccountContainer from '../features/compose/containers/autosuggest_account_container';
   3 import ImmutablePropTypes from 'react-immutable-proptypes';
   4 import PropTypes from 'prop-types';
   5 import { isRtl } from '../rtl';
   6 import ImmutablePureComponent from 'react-immutable-pure-component';
   7 import Textarea from 'react-textarea-autosize';
   8
   9 const textAtCursorMatchesToken = (str, caretPosition) => {
  10   let word;
  11
  12   let left  = str.slice(0, caretPosition).search(/\S+$/);
  13   let right = str.slice(caretPosition).search(/\s/);
  14
  15   if (right < 0) {
  16     word = str.slice(left);
  17   } else {
  18     word = str.slice(left, right + caretPosition);
  19   }
  20
  21   if (!word || word.trim().length < 2 || word[0] !== '@') {
  22     return [null, null];
  23   }
  24
  25   word = word.trim().toLowerCase().slice(1);
  26
  27   if (word.length > 0) {
  28     return [left + 1, word];
  29   } else {
  30     return [null, null];
  31   }
  32 };
  33
  34 class AutosuggestTextarea extends ImmutablePureComponent {
  35
  36   static propTypes = {
  37     value: PropTypes.string,
  38     suggestions: ImmutablePropTypes.list,
  39     disabled: PropTypes.bool,
  40     placeholder: PropTypes.string,
  41     onSuggestionSelected: PropTypes.func.isRequired,
  42     onSuggestionsClearRequested: PropTypes.func.isRequired,
  43     onSuggestionsFetchRequested: PropTypes.func.isRequired,
  44     onChange: PropTypes.func.isRequired,
  45     onKeyUp: PropTypes.func,
  46     onKeyDown: PropTypes.func,
  47     onPaste: PropTypes.func.isRequired,
  48     autoFocus: PropTypes.bool,
  49   };
  50
  51   static defaultProps = {
  52     autoFocus: true,
  53   };
  54
  55   state = {
  56     suggestionsHidden: false,
  57     selectedSuggestion: 0,
  58     lastToken: null,
  59     tokenStart: 0,
  60   };
  61
  62   onChange = (e) => {
  63     const [ tokenStart, token ] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart);
  64
  65     if (token !== null && this.state.lastToken !== token) {
  66       this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart });
  67       this.props.onSuggestionsFetchRequested(token);
  68     } else if (token === null) {
  69       this.setState({ lastToken: null });
  70       this.props.onSuggestionsClearRequested();
  71     }
  72
  73     this.props.onChange(e);
  74   }
  75
  76   onKeyDown = (e) => {
  77     const { suggestions, disabled } = this.props;
  78     const { selectedSuggestion, suggestionsHidden } = this.state;
  79
  80     if (disabled) {
  81       e.preventDefault();
  82       return;
  83     }
  84
  85     switch(e.key) {
  86     case 'Escape':
  87       if (!suggestionsHidden) {
  88         e.preventDefault();
  89         this.setState({ suggestionsHidden: true });
  90       }
  91
  92       break;
  93     case 'ArrowDown':
  94       if (suggestions.size > 0 && !suggestionsHidden) {
  95         e.preventDefault();
  96         this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, suggestions.size - 1) });
  97       }
  98
  99       break;
 100     case 'ArrowUp':
 101       if (suggestions.size > 0 && !suggestionsHidden) {
 102         e.preventDefault();
 103         this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, 0) });
 104       }
 105
 106       break;
 107     case 'Enter':
 108     case 'Tab':
 109       // Select suggestion
 110       if (this.state.lastToken !== null && suggestions.size > 0 && !suggestionsHidden) {
 111         e.preventDefault();
 112         e.stopPropagation();
 113         this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestions.get(selectedSuggestion));
 114       }
 115
 116       break;
 117     }
 118
 119     if (e.defaultPrevented || !this.props.onKeyDown) {
 120       return;
 121     }
 122
 123     this.props.onKeyDown(e);
 124   }
 125
 126   onBlur = () => {
 127     this.setState({ suggestionsHidden: true });
 128   }
 129
 130   onSuggestionClick = (e) => {
 131     const suggestion = Number(e.currentTarget.getAttribute('data-index'));
 132     e.preventDefault();
 133     this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion);
 134     this.textarea.focus();
 135   }
 136
 137   componentWillReceiveProps (nextProps) {
 138     if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden) {
 139       this.setState({ suggestionsHidden: false });
 140     }
 141   }
 142
 143   setTextarea = (c) => {
 144     this.textarea = c;
 145   }
 146
 147   onPaste = (e) => {
 148     if (e.clipboardData && e.clipboardData.files.length === 1) {
 149       this.props.onPaste(e.clipboardData.files);
 150       e.preventDefault();
 151     }
 152   }
 153
 154   render () {
 155     const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus } = this.props;
 156     const { suggestionsHidden, selectedSuggestion } = this.state;
 157     const style = { direction: 'ltr' };
 158
 159     if (isRtl(value)) {
 160       style.direction = 'rtl';
 161     }
 162
 163     return (
 164       <div className='autosuggest-textarea'>
 165         <Textarea
 166           inputRef={this.setTextarea}
 167           className='autosuggest-textarea__textarea'
 168           disabled={disabled}
 169           placeholder={placeholder}
 170           autoFocus={autoFocus}
 171           value={value}
 172           onChange={this.onChange}
 173           onKeyDown={this.onKeyDown}
 174           onKeyUp={onKeyUp}
 175           onBlur={this.onBlur}
 176           onPaste={this.onPaste}
 177           style={style}
 178         />
 179
 180         <div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
 181           {suggestions.map((suggestion, i) => (
 182             <div
 183               role='button'
 184               tabIndex='0'
 185               key={suggestion}
 186               data-index={suggestion}
 187               className={`autosuggest-textarea__suggestions__item ${i === selectedSuggestion ? 'selected' : ''}`}
 188               onMouseDown={this.onSuggestionClick}
 189             >
 190               <AutosuggestAccountContainer id={suggestion} />
 191             </div>
 192           ))}
 193         </div>
 194       </div>
 195     );
 196   }
 197
 198 }
 199
 200 export default AutosuggestTextarea;