sforkowany z mirror/soapbox
Search: add menu to AutosuggestInput
rodzic
a5bf105ccd
commit
4ef9a88f72
|
@ -52,6 +52,7 @@ export default class AutosuggestInput extends ImmutablePureComponent {
|
||||||
id: PropTypes.string,
|
id: PropTypes.string,
|
||||||
searchTokens: PropTypes.arrayOf(PropTypes.string),
|
searchTokens: PropTypes.arrayOf(PropTypes.string),
|
||||||
maxLength: PropTypes.number,
|
maxLength: PropTypes.number,
|
||||||
|
menu: PropTypes.arrayOf(PropTypes.object),
|
||||||
};
|
};
|
||||||
|
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
|
@ -87,9 +88,10 @@ export default class AutosuggestInput extends ImmutablePureComponent {
|
||||||
}
|
}
|
||||||
|
|
||||||
onKeyDown = (e) => {
|
onKeyDown = (e) => {
|
||||||
const { suggestions, disabled } = this.props;
|
const { suggestions, menu, disabled } = this.props;
|
||||||
const { selectedSuggestion, suggestionsHidden } = this.state;
|
const { selectedSuggestion, suggestionsHidden } = this.state;
|
||||||
const firstIndex = this.getFirstIndex();
|
const firstIndex = this.getFirstIndex();
|
||||||
|
const lastIndex = suggestions.size + (menu || []).length - 1;
|
||||||
|
|
||||||
if (disabled) {
|
if (disabled) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
@ -113,14 +115,14 @@ export default class AutosuggestInput extends ImmutablePureComponent {
|
||||||
|
|
||||||
break;
|
break;
|
||||||
case 'ArrowDown':
|
case 'ArrowDown':
|
||||||
if (suggestions.size > 0 && !suggestionsHidden) {
|
if (!suggestionsHidden && (suggestions.size > 0 || menu)) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, suggestions.size - 1) });
|
this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, lastIndex) });
|
||||||
}
|
}
|
||||||
|
|
||||||
break;
|
break;
|
||||||
case 'ArrowUp':
|
case 'ArrowUp':
|
||||||
if (suggestions.size > 0 && !suggestionsHidden) {
|
if (!suggestionsHidden && (suggestions.size > 0 || menu)) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, firstIndex) });
|
this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, firstIndex) });
|
||||||
}
|
}
|
||||||
|
@ -129,11 +131,17 @@ export default class AutosuggestInput extends ImmutablePureComponent {
|
||||||
case 'Enter':
|
case 'Enter':
|
||||||
case 'Tab':
|
case 'Tab':
|
||||||
// Select suggestion
|
// Select suggestion
|
||||||
if (suggestions.size > 0 && !suggestionsHidden && selectedSuggestion > -1) {
|
if (!suggestionsHidden && selectedSuggestion > -1 && (suggestions.size > 0 || menu)) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
this.setState({ selectedSuggestion: firstIndex });
|
this.setState({ selectedSuggestion: firstIndex });
|
||||||
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestions.get(selectedSuggestion));
|
|
||||||
|
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;
|
break;
|
||||||
|
@ -194,11 +202,47 @@ 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.text}
|
||||||
|
</a>
|
||||||
|
));
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
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 { suggestionsHidden } = this.state;
|
||||||
const style = { direction: 'ltr' };
|
const style = { direction: 'ltr' };
|
||||||
|
|
||||||
|
const visible = !suggestionsHidden && (!suggestions.isEmpty() || (menu && value));
|
||||||
|
|
||||||
if (isRtl(value)) {
|
if (isRtl(value)) {
|
||||||
style.direction = 'rtl';
|
style.direction = 'rtl';
|
||||||
}
|
}
|
||||||
|
@ -228,8 +272,9 @@ export default class AutosuggestInput extends ImmutablePureComponent {
|
||||||
/>
|
/>
|
||||||
</label>
|
</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)}
|
{suggestions.map(this.renderSuggestion)}
|
||||||
|
{this.renderMenu()}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -7,6 +7,7 @@ import classNames from 'classnames';
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
|
placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
|
||||||
|
action: { id: 'search.action', defaultMessage: 'Search for “{query}”' },
|
||||||
});
|
});
|
||||||
|
|
||||||
export default @injectIntl
|
export default @injectIntl
|
||||||
|
@ -51,15 +52,18 @@ class Search extends React.PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
handleSubmit = () => {
|
||||||
|
this.props.onSubmit();
|
||||||
|
|
||||||
|
if (this.props.openInRoute) {
|
||||||
|
this.context.router.history.push('/search');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
handleKeyDown = (e) => {
|
handleKeyDown = (e) => {
|
||||||
if (e.key === 'Enter') {
|
if (e.key === 'Enter') {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
|
this.handleSubmit();
|
||||||
this.props.onSubmit();
|
|
||||||
|
|
||||||
if (this.props.openInRoute) {
|
|
||||||
this.context.router.history.push('/search');
|
|
||||||
}
|
|
||||||
} else if (e.key === 'Escape') {
|
} else if (e.key === 'Escape') {
|
||||||
document.querySelector('.ui').parentElement.focus();
|
document.querySelector('.ui').parentElement.focus();
|
||||||
}
|
}
|
||||||
|
@ -82,6 +86,14 @@ class Search extends React.PureComponent {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
makeMenu = () => {
|
||||||
|
const { intl, value } = this.props;
|
||||||
|
|
||||||
|
return [
|
||||||
|
{ text: intl.formatMessage(messages.action, { query: value }), action: this.handleSubmit },
|
||||||
|
];
|
||||||
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { intl, value, autoFocus, autosuggest, submitted } = this.props;
|
const { intl, value, autoFocus, autosuggest, submitted } = this.props;
|
||||||
const hasValue = value.length > 0 || submitted;
|
const hasValue = value.length > 0 || submitted;
|
||||||
|
@ -104,6 +116,7 @@ class Search extends React.PureComponent {
|
||||||
onSelected={this.handleSelected}
|
onSelected={this.handleSelected}
|
||||||
autoFocus={autoFocus}
|
autoFocus={autoFocus}
|
||||||
autoSelect={false}
|
autoSelect={false}
|
||||||
|
menu={this.makeMenu()}
|
||||||
/>
|
/>
|
||||||
</label>
|
</label>
|
||||||
<div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
|
<div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
|
||||||
|
|
|
@ -102,3 +102,17 @@
|
||||||
.autosuggest-account .display-name__account {
|
.autosuggest-account .display-name__account {
|
||||||
color: var(--primary-text-color--faint);
|
color: var(--primary-text-color--faint);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.autosuggest-input__action {
|
||||||
|
display: block;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Ładowanie…
Reference in New Issue