diff --git a/app/javascript/gabsocial/components/autosuggest_account.js b/app/javascript/gabsocial/components/autosuggest_account.js
index 1b98b039..6d124f1b 100644
--- a/app/javascript/gabsocial/components/autosuggest_account.js
+++ b/app/javascript/gabsocial/components/autosuggest_account.js
@@ -27,7 +27,7 @@ class AutosuggestAccount extends ImmutablePureComponent {
return (
diff --git a/app/javascript/gabsocial/components/autosuggest_emoji.js b/app/javascript/gabsocial/components/autosuggest_emoji.js
index ae6b2f85..38b60101 100644
--- a/app/javascript/gabsocial/components/autosuggest_emoji.js
+++ b/app/javascript/gabsocial/components/autosuggest_emoji.js
@@ -24,7 +24,7 @@ export default class AutosuggestEmoji extends PureComponent {
}
return (
-
+
{emoji.colons}
diff --git a/app/javascript/gabsocial/components/autosuggest_textbox.js b/app/javascript/gabsocial/components/autosuggest_textbox.js
index dd8d4bf4..0576c7d1 100644
--- a/app/javascript/gabsocial/components/autosuggest_textbox.js
+++ b/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 = ;
key = suggestion.id;
- } else if (suggestion[0] === '#') {
- inner = suggestion;
- key = suggestion;
} else {
inner = ;
key = suggestion;
}
- const classes = classNames('autosuggest-textarea__suggestions__item', {
- selected: i === selectedSuggestion,
- });
+ const isSelected = i === selectedSuggestion
+ const classes = CX({
+ bgPrimary: !isSelected,
+ bgSubtle: isSelected,
+ })
return (
- { /* : todo : put in popover */ }
-
-
+ {
+ !small && !suggestionsHidden && !suggestions.isEmpty() &&
+
{suggestions.map(this.renderSuggestion)}
-
+ }
)
}