Chats: fix search results position on main pane

dnd
Alex Gleason 2022-06-04 17:23:25 -05:00
rodzic 8dbee455f1
commit a261e02329
Nie znaleziono w bazie danych klucza dla tego podpisu
ID klucza GPG: 7211D1F99744FBB7
3 zmienionych plików z 9 dodań i 2 usunięć

Wyświetl plik

@ -14,6 +14,8 @@ interface IAccountSearch {
onSelected: (accountId: string) => void,
/** Override the default placeholder of the input. */
placeholder?: string,
/** Position of results relative to the input. */
resultsPosition?: 'above' | 'below',
}
/** Input to search for accounts. */

Wyświetl plik

@ -57,12 +57,14 @@ export default class AutosuggestInput extends ImmutablePureComponent {
searchTokens: PropTypes.arrayOf(PropTypes.string),
maxLength: PropTypes.number,
menu: PropTypes.arrayOf(PropTypes.object),
resultsPosition: PropTypes.string,
};
static defaultProps = {
autoFocus: false,
autoSelect: true,
searchTokens: ImmutableList(['@', ':', '#']),
resultsPosition: 'below',
};
getFirstIndex = () => {
@ -255,7 +257,7 @@ export default class AutosuggestInput extends ImmutablePureComponent {
};
render() {
const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu } = this.props;
const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu, resultsPosition } = this.props;
const { suggestionsHidden } = this.state;
const style = { direction: 'ltr' };
@ -293,7 +295,9 @@ export default class AutosuggestInput extends ImmutablePureComponent {
/>
<div className={classNames({
'absolute top-full w-full z-50 shadow bg-white dark:bg-slate-800 rounded-lg py-1': true,
'absolute w-full z-50 shadow bg-white dark:bg-slate-800 rounded-lg py-1': true,
'top-full': resultsPosition === 'below',
'bottom-full': resultsPosition === 'above',
hidden: !visible,
block: visible,
})}

Wyświetl plik

@ -102,6 +102,7 @@ class ChatPanes extends ImmutablePureComponent {
<AccountSearch
placeholder={intl.formatMessage(messages.searchPlaceholder)}
onSelected={this.handleSuggestion}
resultsPosition='above'
/>
</>
)}