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.native {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)}
-
+ } ) }