Updated AutosuggestTextbox suggestions

• Updated:
- AutosuggestTextbox suggestions

• Removed:
- Hashtag auto suggestions
- BG Primary color on AutosuggestAccount, AutosuggestEmoji

app/javascript/gabsocial/components/autosuggest_account.js

@@ -27,7 +27,7 @@ class AutosuggestAccount extends ImmutablePureComponent {
 
     return (
       <div
-        className={[_s.default, _s.cursorPointer, _s.bgSubtle_onHover, _s.bgPrimary, _s.flexRow, _s.py10, _s.alignItemsCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}
+        className={[_s.default, _s.cursorPointer, _s.bgSubtle_onHover, _s.flexRow, _s.py10, _s.alignItemsCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}
         title={account.get('acct')}
       >
         <Avatar account={account} size={26} />

app/javascript/gabsocial/components/autosuggest_emoji.js

@@ -24,7 +24,7 @@ export default class AutosuggestEmoji extends PureComponent {
     }
 
     return (
-      <div className={[_s.default, _s.cursorPointer, _s.bgSubtle_onHover, _s.bgPrimary, _s.flexRow, _s.py10, _s.alignItemsCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
+      <div className={[_s.default, _s.cursorPointer, _s.bgSubtle_onHover, _s.flexRow, _s.py10, _s.alignItemsCenter, _s.px10, _s.borderBottom1PX, _s.borderColorSecondary].join(' ')}>
         <img className='emojione' src={url} alt={emoji.native || emoji.colons} />
         <Text className={_s.ml10}>
           {emoji.colons}

app/javascript/gabsocial/components/autosuggest_textbox.js

@@ -1,9 +1,9 @@
 import { Fragment } from 'react'
 import ImmutablePropTypes from 'react-immutable-proptypes'
 import isObject from 'lodash.isobject'
-import classNames from 'classnames/bind'
 import ImmutablePureComponent from 'react-immutable-pure-component'
 import Textarea from 'react-textarea-autosize'
+import { CX } from '../constants'
 import { isRtl } from '../utils/rtl'
 import { textAtCursorMatchesToken } from '../utils/cursor_token_match'
 import AutosuggestAccount from './autosuggest_account'
@@ -11,8 +11,6 @@ import AutosuggestEmoji from './autosuggest_emoji'
 import Input from './input'
 import Composer from './composer'
 
-const cx = classNames.bind(_s)
-
 export default class AutosuggestTextbox extends ImmutablePureComponent {
 
   static propTypes = {
@@ -26,23 +24,17 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
     onChange: PropTypes.func.isRequired,
     onKeyUp: PropTypes.func,
     onKeyDown: PropTypes.func,
-    autoFocus: PropTypes.bool,
-    className: PropTypes.string,
     id: PropTypes.string,
     searchTokens: PropTypes.arrayOf(PropTypes.string),
-    maxLength: PropTypes.number,
     onPaste: PropTypes.func,
     onFocus: PropTypes.func,
     onBlur: PropTypes.func,
     textarea: PropTypes.bool,
     small: PropTypes.bool,
-    prependIcon: PropTypes.string,
   }
 
   static defaultProps = {
-    autoFocus: true,
-    searchTokens: ['@', ':', '#'],
-    textarea: false,
+    searchTokens: ['@', ':'],
   }
 
   state = {
@@ -65,8 +57,6 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
 
     const [ tokenStart, token ] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart, this.props.searchTokens);
 
-    // console.log('onChange', e.target.value, e.target, this.textbox, tokenStart, token)
-
     if (token !== null && this.state.lastToken !== token) {
       this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart });
       this.props.onSuggestionsFetchRequested(token);
@@ -175,17 +165,16 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
     if (typeof suggestion === 'object') {
       inner = <AutosuggestEmoji emoji={suggestion} />;
       key = suggestion.id;
-    } else if (suggestion[0] === '#') {
-      inner = suggestion;
-      key = suggestion;
     } else {
       inner = <AutosuggestAccount id={suggestion} />;
       key = suggestion;
     }
 
-    const classes = classNames('autosuggest-textarea__suggestions__item', {
-      selected: i === selectedSuggestion,
-    });
+    const isSelected = i === selectedSuggestion
+    const classes = CX({
+      bgPrimary: !isSelected,
+      bgSubtle: isSelected,
+    })
 
     return (
       <div
@@ -213,13 +202,8 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
       disabled,
       placeholder,
       onKeyUp,
-      autoFocus,
       children,
-      className,
       id,
-      maxLength,
-      textarea,
-      prependIcon,
     } = this.props
 
     const { suggestionsHidden } = this.state
@@ -227,7 +211,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
       direction: isRtl(value) ? 'rtl' : 'ltr',
     }
 
-    const textareaClasses = cx({
+    const textareaClasses = CX({
       default: 1,
       font: 1,
       wrap: 1,
@@ -248,7 +232,7 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
       heightMin80PX: !small,
     })
 
-    const textareaContainerClasses = cx({
+    const textareaContainerClasses = CX({
       default: 1,
       maxWidth100PC: 1,
       flexGrow1: small,
@@ -297,12 +281,12 @@ export default class AutosuggestTextbox extends ImmutablePureComponent {
           {children}
         </div>
 
-        { /* : todo :  put in popover */ }
-        <div className='autosuggest-textarea__suggestions-wrapper'>
-          <div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
+        {
+          !small && !suggestionsHidden && !suggestions.isEmpty() &&
+          <div className={[_s.default].join(' ')}>
             {suggestions.map(this.renderSuggestion)}
           </div>
-        </div>
+        }
       </Fragment>
     )
   }