gab-social/app/javascript/gabsocial/components/autosuggest_textbox.js

312 lines
8.0 KiB
JavaScript
Raw Normal View History

import React from 'react'
import PropTypes from 'prop-types'
2020-03-07 04:53:28 +00:00
import ImmutablePropTypes from 'react-immutable-proptypes'
2020-04-16 07:00:43 +01:00
import isObject from 'lodash.isobject'
2020-03-07 04:53:28 +00:00
import ImmutablePureComponent from 'react-immutable-pure-component'
2020-05-02 07:25:55 +01:00
import Textarea from 'react-textarea-autosize'
import {
CX,
BREAKPOINT_EXTRA_SMALL,
} from '../constants'
2020-04-11 23:29:19 +01:00
import { isRtl } from '../utils/rtl'
import { textAtCursorMatchesToken } from '../utils/cursor_token_match'
import Responsive from '../features/ui/util/responsive_component'
2020-04-11 23:29:19 +01:00
import AutosuggestAccount from './autosuggest_account'
import AutosuggestEmoji from './autosuggest_emoji'
import Input from './input'
import Composer from './composer'
class AutosuggestTextbox extends ImmutablePureComponent {
state = {
suggestionsHidden: true,
focused: false,
selectedSuggestion: 0,
lastToken: null,
tokenStart: 0,
2020-03-14 17:31:29 +00:00
}
2020-06-12 17:01:54 +01:00
onChange = (e, value, markdown, selectionStart) => {
2020-04-16 07:00:43 +01:00
if (!isObject(e)) {
e = {
target: {
value,
2020-06-12 17:01:54 +01:00
markdown,
2020-04-16 07:00:43 +01:00
selectionStart,
},
}
}
const [ tokenStart, token ] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart, this.props.searchTokens);
if (token !== null && this.state.lastToken !== token) {
this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart });
this.props.onSuggestionsFetchRequested(token);
} else if (token === null) {
this.setState({ lastToken: null });
this.props.onSuggestionsClearRequested();
}
2020-06-18 17:05:24 +01:00
this.props.onChange(e, e.target.selectionStart);
}
onKeyDown = (e) => {
const { suggestions, disabled } = this.props;
const { selectedSuggestion, suggestionsHidden } = this.state;
if (disabled) {
e.preventDefault();
return;
}
// Ignore key events during text composition
// e.key may be a name of the physical key even in this case (e.x. Safari / Chrome on Mac)
if (e.which === 229 || e.isComposing) return;
2020-03-25 03:08:43 +00:00
switch (e.key) {
2020-04-08 02:06:59 +01:00
case 'Escape':
if (suggestions.size === 0 || suggestionsHidden) {
document.querySelector('#gabsocial').focus()
2020-04-08 02:06:59 +01:00
} else {
e.preventDefault();
this.setState({ suggestionsHidden: true });
}
break;
case 'ArrowDown':
if (suggestions.size > 0 && !suggestionsHidden) {
e.preventDefault();
this.setState({ selectedSuggestion: Math.min(selectedSuggestion + 1, suggestions.size - 1) });
}
break;
case 'ArrowUp':
if (suggestions.size > 0 && !suggestionsHidden) {
e.preventDefault();
this.setState({ selectedSuggestion: Math.max(selectedSuggestion - 1, 0) });
}
break;
case 'Enter':
case 'Tab':
// Select suggestion
if (this.state.lastToken !== null && suggestions.size > 0 && !suggestionsHidden) {
e.preventDefault();
e.stopPropagation();
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestions.get(selectedSuggestion));
}
break;
}
if (e.defaultPrevented || !this.props.onKeyDown) return;
this.props.onKeyDown(e);
}
onBlur = () => {
this.setState({ suggestionsHidden: true, focused: false });
if (this.props.onBlur) {
this.props.onBlur();
}
}
onFocus = () => {
this.setState({ focused: true });
if (this.props.onFocus) {
this.props.onFocus();
}
}
onPaste = (e) => {
if (this.props.onPaste && e.clipboardData && e.clipboardData.files.length === 1) {
this.props.onPaste(e.clipboardData.files);
e.preventDefault();
}
}
onSuggestionClick = (e) => {
const suggestion = this.props.suggestions.get(e.currentTarget.getAttribute('data-index'));
e.preventDefault();
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion);
this.textbox.focus();
}
2020-03-25 03:08:43 +00:00
componentWillReceiveProps(nextProps) {
if (nextProps.suggestions !== this.props.suggestions && nextProps.suggestions.size > 0 && this.state.suggestionsHidden && this.state.focused) {
this.setState({ suggestionsHidden: false });
}
}
renderSuggestion = (suggestion, i) => {
const { selectedSuggestion } = this.state;
let inner, key;
if (typeof suggestion === 'object') {
inner = <AutosuggestEmoji emoji={suggestion} />;
key = suggestion.id;
} else {
inner = <AutosuggestAccount id={suggestion} />;
key = suggestion;
}
const isSelected = i === selectedSuggestion
const classes = CX({
bgPrimary: !isSelected,
bgSubtle: isSelected,
})
return (
<div
role='button'
tabIndex='0'
key={key}
data-index={i}
className={classes}
onMouseDown={this.onSuggestionClick}
>
{inner}
</div>
);
}
2020-03-14 17:31:29 +00:00
setTextbox = (c) => {
2020-06-17 18:25:10 +01:00
this.textbox = c
2020-03-14 17:31:29 +00:00
}
2020-03-25 03:08:43 +00:00
render() {
2020-03-07 04:53:28 +00:00
const {
value,
small,
suggestions,
disabled,
placeholder,
onKeyUp,
children,
2020-06-17 21:27:58 +01:00
valueMarkdown,
2020-03-07 04:53:28 +00:00
id,
isPro,
isEdit,
2020-03-07 04:53:28 +00:00
} = this.props
const { suggestionsHidden } = this.state
2020-05-02 07:25:55 +01:00
const textareaContainerClasses = CX({
d: 1,
maxW100PC: 1,
2020-05-02 07:25:55 +01:00
flexGrow1: small,
jcCenter: small,
py5: small,
2020-02-28 15:20:47 +00:00
})
const textareaClasses = CX({
d: 1,
font: 1,
wrap: 1,
resizeNone: 1,
bgTransparent: 1,
outlineNone: 1,
lineHeight125: 1,
cPrimary: 1,
w100PC: !small,
pt15: !small,
px15: !small,
px10: small,
pb10: !small,
fs16PX: !small,
fs14PX: small,
maxH200PX: small,
maxH80VH: !small,
})
return (
<React.Fragment>
<div className={textareaContainerClasses}>
<label htmlFor={id} className={_s.visiblyHidden}>
{placeholder}
</label>
<Responsive max={BREAKPOINT_EXTRA_SMALL}>
<Textarea
id={id}
inputRef={this.setTextbox}
className={textareaClasses}
disabled={disabled}
placeholder={placeholder}
autoFocus={false}
value={value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
onKeyUp={onKeyUp}
onFocus={this.onFocus}
onBlur={this.onBlur}
onPaste={this.onPaste}
aria-autocomplete='list'
/>
</Responsive>
<Responsive min={BREAKPOINT_EXTRA_SMALL}>
<Composer
inputRef={this.setTextbox}
disabled={disabled}
placeholder={placeholder}
value={value}
valueMarkdown={valueMarkdown}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
onKeyUp={onKeyUp}
onFocus={this.onFocus}
onBlur={this.onBlur}
onPaste={this.onPaste}
small={small}
isEdit={isEdit}
isPro={isPro}
/>
</Responsive>
{children}
</div>
{
!small && !suggestionsHidden && !suggestions.isEmpty() &&
<div className={[_s.d].join(' ')}>
{suggestions.map(this.renderSuggestion)}
</div>
}
</React.Fragment>
)
}
}
AutosuggestTextbox.propTypes = {
value: PropTypes.string,
valueMarkdown: PropTypes.string,
suggestions: ImmutablePropTypes.list,
disabled: PropTypes.bool,
placeholder: PropTypes.string,
onSuggestionSelected: PropTypes.func.isRequired,
onSuggestionsClearRequested: PropTypes.func.isRequired,
onSuggestionsFetchRequested: PropTypes.func.isRequired,
onChange: PropTypes.func.isRequired,
onKeyUp: PropTypes.func,
onKeyDown: PropTypes.func,
id: PropTypes.string,
searchTokens: PropTypes.arrayOf(PropTypes.string),
onPaste: PropTypes.func,
onFocus: PropTypes.func,
onBlur: PropTypes.func,
textarea: PropTypes.bool,
small: PropTypes.bool,
isPro: PropTypes.bool,
isEdit: PropTypes.bool,
}
AutosuggestTextbox.defaultProps = {
searchTokens: ['@', ':'],
}
export default AutosuggestTextbox