moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'better-search' into 'develop' 

Search: autosuggest accounts from TabsBar on desktop

See merge request soapbox-pub/soapbox-fe!837
This commit is contained in:
Alex Gleason 2021-11-01 22:00:09 +00:00
parent 0f66b5ef8e 10233bfef9
commit 4968854b9c
10 changed files with 160 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
app/soapbox/components/autosuggest_input.js
View File

@ -7,6 +7,7 @@ import { isRtl } from '../rtl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import classNames from 'classnames';
import { List as ImmutableList } from 'immutable';
import Icon from 'soapbox/components/icon';
const textAtCursorMatchesToken = (str, caretPosition, searchTokens) => {
let word;
@ -47,21 +48,28 @@ export default class AutosuggestInput extends ImmutablePureComponent {
onKeyUp: PropTypes.func,
onKeyDown: PropTypes.func,
autoFocus: PropTypes.bool,
autoSelect: PropTypes.bool,
className: PropTypes.string,
id: PropTypes.string,
searchTokens: PropTypes.arrayOf(PropTypes.string),
maxLength: PropTypes.number,
menu: PropTypes.arrayOf(PropTypes.object),
};
static defaultProps = {
autoFocus: false,
autoSelect: true,
searchTokens: ImmutableList(['@', ':', '#']),
};
getFirstIndex = () => {
return this.props.autoSelect ? 0 : -1;
}
state = {
suggestionsHidden: true,
focused: false,
selectedSuggestion: 0,
selectedSuggestion: this.getFirstIndex(),
lastToken: null,
tokenStart: 0,
};
@ -81,8 +89,10 @@ export default class AutosuggestInput extends ImmutablePureComponent {
}
onKeyDown = (e) => {
const { suggestions, disabled } = this.props;
const { suggestions, menu, disabled } = this.props;
const { selectedSuggestion, suggestionsHidden } = this.state;
const firstIndex = this.getFirstIndex();
const lastIndex = suggestions.size + (menu || []).length - 1;
if (disabled) {
e.preventDefault();
@ -106,26 +116,33 @@ export default class AutosuggestInput extends ImmutablePureComponent {
break;
case 'ArrowDown':
if (suggestions.size > 0 && !suggestionsHidden) {
if (!suggestionsHidden && (suggestions.size > 0 || menu)) {
e.preventDefault();
this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, suggestions.size - 1) });
this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, lastIndex) });
}
break;
case 'ArrowUp':
if (suggestions.size > 0 && !suggestionsHidden) {
if (!suggestionsHidden && (suggestions.size > 0 || menu)) {
e.preventDefault();
this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, 0) });
this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, firstIndex) });
}
break;
case 'Enter':
case 'Tab':
// Select suggestion
if (suggestions.size > 0 && !suggestionsHidden) {
if (!suggestionsHidden && selectedSuggestion > -1 && (suggestions.size > 0 || menu)) {
e.preventDefault();
e.stopPropagation();
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestions.get(selectedSuggestion));
this.setState({ selectedSuggestion: firstIndex });
if (selectedSuggestion < suggestions.size) {
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestions.get(selectedSuggestion));
} else {
const item = menu[selectedSuggestion - suggestions.size];
this.handleMenuItemAction(item);
}
}
break;
@ -186,11 +203,51 @@ export default class AutosuggestInput extends ImmutablePureComponent {
);
}
handleMenuItemAction = item => {
this.onBlur();
item.action();
}
handleMenuItemClick = item => {
return e => {
e.preventDefault();
this.handleMenuItemAction(item);
};
}
renderMenu = () => {
const { menu, suggestions } = this.props;
const { selectedSuggestion } = this.state;
if (!menu) {
return null;
}
return menu.map((item, i) => (
<a
className={classNames('autosuggest-input__action', { selected: suggestions.size - selectedSuggestion === i })}
href='#'
role='button'
tabIndex='0'
onMouseDown={this.handleMenuItemClick(item)}
key={i}
>
{item.icon && (
<Icon src={item.icon} />
)}
<span>{item.text}</span>
</a>
));
};
render() {
const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength } = this.props;
const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu } = this.props;
const { suggestionsHidden } = this.state;
const style = { direction: 'ltr' };
const visible = !suggestionsHidden && (!suggestions.isEmpty() || (menu && value));
if (isRtl(value)) {
style.direction = 'rtl';
}
@ -220,8 +277,9 @@ export default class AutosuggestInput extends ImmutablePureComponent {
/>
</label>
<div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
<div className={classNames('autosuggest-textarea__suggestions', { 'autosuggest-textarea__suggestions--visible': visible })}>
{suggestions.map(this.renderSuggestion)}
{this.renderMenu()}
</div>
</div>
);

89
app/soapbox/features/compose/components/search.js
View File

@ -1,47 +1,15 @@
import React from 'react';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import Overlay from 'react-overlays/lib/Overlay';
import Motion from '../../ui/util/optional_motion';
import spring from 'react-motion/lib/spring';
import { defineMessages, injectIntl } from 'react-intl';
import Icon from 'soapbox/components/icon';
import AutosuggestAccountInput from 'soapbox/components/autosuggest_account_input';
import classNames from 'classnames';
const messages = defineMessages({
placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
action: { id: 'search.action', defaultMessage: 'Search for “{query}”' },
});
class SearchPopout extends React.PureComponent {
static propTypes = {
style: PropTypes.object,
};
render() {
const { style } = this.props;
const extraInformation = <FormattedMessage id='search_popout.tips.full_text' defaultMessage='Simple text returns posts you have written, favorited, reposted, or have been mentioned in, as well as matching usernames, display names, and hashtags.' />;
return (
<div className='search-popout-container' style={{ ...style, position: 'absolute', zIndex: 1000 }}>
<Motion defaultStyle={{ opacity: 0, scaleX: 1, scaleY: 1 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
{({ opacity, scaleX, scaleY }) => (
<div className='search-popout' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>
<h4><FormattedMessage id='search_popout.search_format' defaultMessage='Advanced search format' /></h4>
<ul>
<li><em>#example</em> <FormattedMessage id='search_popout.tips.hashtag' defaultMessage='hashtag' /></li>
<li><em>@username</em> <FormattedMessage id='search_popout.tips.user' defaultMessage='user' /></li>
<li><em>URL</em> <FormattedMessage id='search_popout.tips.user' defaultMessage='user' /></li>
<li><em>URL</em> <FormattedMessage id='search_popout.tips.status' defaultMessage='post' /></li>
</ul>
{extraInformation}
</div>
)}
</Motion>
</div>
);
}
}
export default @injectIntl
class Search extends React.PureComponent {
@ -56,13 +24,16 @@ class Search extends React.PureComponent {
onSubmit: PropTypes.func.isRequired,
onClear: PropTypes.func.isRequired,
onShow: PropTypes.func.isRequired,
onSelected: PropTypes.func,
openInRoute: PropTypes.bool,
autoFocus: PropTypes.bool,
autosuggest: PropTypes.bool,
intl: PropTypes.object.isRequired,
};
static defaultProps = {
autoFocus: false,
ausosuggest: false,
}
state = {
@ -81,15 +52,18 @@ class Search extends React.PureComponent {
}
}
handleKeyUp = (e) => {
handleSubmit = () => {
this.props.onSubmit();
if (this.props.openInRoute) {
this.context.router.history.push('/search');
}
}
handleKeyDown = (e) => {
if (e.key === 'Enter') {
e.preventDefault();
this.props.onSubmit();
if (this.props.openInRoute) {
this.context.router.history.push('/search');
}
this.handleSubmit();
} else if (e.key === 'Escape') {
document.querySelector('.ui').parentElement.focus();
}
@ -104,34 +78,51 @@ class Search extends React.PureComponent {
this.setState({ expanded: false });
}
handleSelected = accountId => {
const { onSelected } = this.props;
if (onSelected) {
onSelected(accountId, this.context.router.history);
}
}
makeMenu = () => {
const { intl, value } = this.props;
return [
{ text: intl.formatMessage(messages.action, { query: value }), icon: require('@tabler/icons/icons/search.svg'), action: this.handleSubmit },
];
}
render() {
const { intl, value, autoFocus, submitted } = this.props;
const { expanded } = this.state;
const { intl, value, autoFocus, autosuggest, submitted } = this.props;
const hasValue = value.length > 0 || submitted;
const Component = autosuggest ? AutosuggestAccountInput : 'input';
return (
<div className='search'>
<label>
<span style={{ display: 'none' }}>{intl.formatMessage(messages.placeholder)}</span>
<input
<Component
className='search__input'
type='text'
placeholder={intl.formatMessage(messages.placeholder)}
value={value}
onChange={this.handleChange}
onKeyUp={this.handleKeyUp}
onKeyDown={this.handleKeyDown}
onFocus={this.handleFocus}
onBlur={this.handleBlur}
onSelected={this.handleSelected}
autoFocus={autoFocus}
autoSelect={false}
menu={this.makeMenu()}
/>
</label>
<div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
<Icon src={require('@tabler/icons/icons/search.svg')} className={classNames('svg-icon--search', { active: !hasValue })} />
<Icon src={require('@tabler/icons/icons/backspace.svg')} className={classNames('svg-icon--backspace', { active: hasValue })} aria-label={intl.formatMessage(messages.placeholder)} />
</div>
<Overlay show={expanded && !hasValue} placement='bottom' target={this}>
<SearchPopout />
</Overlay>
</div>
);
}

23
app/soapbox/features/compose/components/search_results.js
View File

@ -7,8 +7,6 @@ import StatusContainer from '../../../containers/status_container';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Hashtag from '../../../components/hashtag';
import FilterBar from '../../search/components/filter_bar';
import BundleContainer from 'soapbox/features/ui/containers/bundle_container';
import { WhoToFollowPanel } from 'soapbox/features/ui/util/async-components';
import ScrollableList from 'soapbox/components/scrollable_list';
import PlaceholderAccount from 'soapbox/features/placeholder/components/placeholder_account';
import PlaceholderHashtag from 'soapbox/features/placeholder/components/placeholder_hashtag';
@ -24,6 +22,7 @@ export default class SearchResults extends ImmutablePureComponent {
selectedFilter: PropTypes.string.isRequired,
selectFilter: PropTypes.func.isRequired,
features: PropTypes.object.isRequired,
suggestions: ImmutablePropTypes.list,
};
handleLoadMore = () => this.props.expandSearch(this.props.selectedFilter);
@ -31,15 +30,7 @@ export default class SearchResults extends ImmutablePureComponent {
handleSelectFilter = newActiveFilter => this.props.selectFilter(newActiveFilter);
render() {
const { value, results, submitted, selectedFilter, features } = this.props;
if (!submitted && features.suggestions && results.isEmpty()) {
return (
<BundleContainer fetchComponent={WhoToFollowPanel}>
{Component => <Component limit={5} />}
</BundleContainer>
);
}
const { value, results, submitted, selectedFilter, suggestions } = this.props;
let searchResults;
let hasMore = false;
@ -47,14 +38,16 @@ export default class SearchResults extends ImmutablePureComponent {
let noResultsMessage;
let placeholderComponent = PlaceholderStatus;
if (selectedFilter === 'accounts' && results.get('accounts')) {
if (selectedFilter === 'accounts') {
hasMore = results.get('accountsHasMore');
loaded = results.get('accountsLoaded');
placeholderComponent = PlaceholderAccount;
if (results.get('accounts').size > 0) {
if (results.get('accounts') && results.get('accounts').size > 0) {
searchResults = results.get('accounts').map(accountId => <AccountContainer key={accountId} id={accountId} />);
} else {
} else if (!submitted && suggestions && !suggestions.isEmpty()) {
searchResults = suggestions.map(suggestion => <AccountContainer key={suggestion.get('account')} id={suggestion.get('account')} />);
} else if (loaded) {
noResultsMessage = (
<div className='empty-column-indicator'>
<FormattedMessage
@ -108,7 +101,7 @@ export default class SearchResults extends ImmutablePureComponent {
return (
<>
{submitted && <FilterBar selectedFilter={submitted ? selectedFilter : null} selectFilter={this.handleSelectFilter} />}
<FilterBar selectedFilter={selectedFilter} selectFilter={this.handleSelectFilter} />
{noResultsMessage || (
<ScrollableList

15
app/soapbox/features/compose/containers/search_container.js
View File

@ -13,6 +13,16 @@ const mapStateToProps = state => ({
submitted: state.getIn(['search', 'submitted']),
});
function redirectToAccount(accountId, routerHistory) {
return (dispatch, getState) => {
const acct = getState().getIn(['accounts', accountId, 'acct']);
if (acct && routerHistory) {
routerHistory.push(`/@${acct}`);
}
};
}
const mapDispatchToProps = (dispatch, { autoSubmit }) => {
const debouncedSubmit = debounce(() => {
@ -40,6 +50,11 @@ const mapDispatchToProps = (dispatch, { autoSubmit }) => {
dispatch(showSearch());
},
onSelected(accountId, routerHistory) {
dispatch(clearSearch());
dispatch(redirectToAccount(accountId, routerHistory));
},
};
};

2
app/soapbox/features/ui/components/tabs_bar.js
View File

@ -88,7 +88,7 @@ class TabsBar extends React.PureComponent {
)}
<div className='tabs-bar__search-container'>
<SearchContainer openInRoute />
<SearchContainer openInRoute autosuggest />
</div>
</div>
<div className='tabs-bar__split tabs-bar__split--right'>

20
app/styles/autosuggest.scss
View File

@ -102,3 +102,23 @@
.autosuggest-account .display-name__account {
color: var(--primary-text-color--faint);
}
.autosuggest-input__action {
display: flex;
align-items: center;
padding: 10px;
border-radius: 4px;
font-weight: bold;
text-decoration: none;
color: var(--primary-text-color--faint);
&:hover,
&.selected {
background-color: var(--brand-color--med);
}
.svg-icon {
margin-right: 8px;
transform: translateY(-1px);
}
}

2
app/styles/chats.scss
View File

@ -9,7 +9,7 @@
max-height: calc(100vh - 70px);
display: flex;
flex-direction: column;
z-index: 999;
z-index: 1000; // Above AccountHeader
transition: 0.05s;
&--main {

2
app/styles/components/buttons.scss
View File

@ -159,7 +159,7 @@ a.button {
justify-content: center;
.svg-icon {
margin-left: 6px;
margin: 0 0 0 6px;
width: 20px;
height: 20px;
}

13
app/styles/components/search.scss
View File

@ -2,7 +2,7 @@
position: relative;
}
.search__input {
input.search__input {
@include search-input;
display: block;
padding: 7px 30px 6px 10px;
@ -165,11 +165,6 @@
border-bottom: none;
}
.search-page {
height: 100%;
min-height: 140px;
}
.column {
.search {
padding: 10px 15px;
@ -177,7 +172,7 @@
border-bottom: 1px solid hsla(var(--primary-text-color_hsl), 0.2);
}
.search__input {
input.search__input {
background-color: var(--background-color);
border-radius: 8px;
padding: 12px 36px 12px 16px;
@ -202,3 +197,7 @@
}
}
}
.search .autosuggest-textarea__suggestions {
border-radius: 4px;
}

1
app/styles/components/tabs-bar.scss
View File

@ -3,7 +3,6 @@
box-sizing: border-box;
background: var(--brand-color);
flex: 0 0 auto;
overflow-y: auto;
height: 50px;
width: 100%;
position: sticky;