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