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

339 lines
9.2 KiB
JavaScript
Raw Normal View History

2020-02-08 06:12:01 +00:00
import { Fragment } from 'react'
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-02-28 15:20:47 +00:00
import classNames from 'classnames/bind'
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'
2020-04-11 23:29:19 +01:00
import { isRtl } from '../utils/rtl'
import { textAtCursorMatchesToken } from '../utils/cursor_token_match'
import AutosuggestAccount from './autosuggest_account'
import AutosuggestEmoji from './autosuggest_emoji'
import Input from './input'
import Composer from './composer'
2020-02-28 15:20:47 +00:00
const cx = classNames.bind(_s)
export default class AutosuggestTextbox extends ImmutablePureComponent {
static propTypes = {
value: 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,
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,
2020-02-28 15:20:47 +00:00
small: PropTypes.bool,
2020-04-02 04:17:21 +01:00
prependIcon: PropTypes.string,
2020-03-14 17:31:29 +00:00
}
static defaultProps = {
autoFocus: true,
searchTokens: ['@', ':', '#'],
textarea: false,
2020-03-14 17:31:29 +00:00
}
state = {
suggestionsHidden: true,
focused: false,
selectedSuggestion: 0,
lastToken: null,
tokenStart: 0,
2020-03-14 17:31:29 +00:00
}
2020-04-22 06:00:11 +01:00
onChange = (e, value, selectionStart, markdown) => {
2020-04-16 07:00:43 +01:00
if (!isObject(e)) {
e = {
target: {
value,
selectionStart,
},
}
}
const [ tokenStart, token ] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart, this.props.searchTokens);
2020-03-25 03:08:43 +00:00
// console.log('onChange', e.target.value, e.target, this.textbox, tokenStart, token)
2020-03-14 17:31:29 +00:00
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-04-22 06:00:11 +01:00
this.props.onChange(e, markdown);
}
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 if (suggestion[0] === '#') {
inner = suggestion;
key = suggestion;
} else {
inner = <AutosuggestAccount id={suggestion} />;
key = suggestion;
}
const classes = classNames('autosuggest-textarea__suggestions__item', {
selected: i === selectedSuggestion,
});
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) => {
this.textbox = c;
}
2020-03-25 03:08:43 +00:00
render() {
2020-03-07 04:53:28 +00:00
const {
value,
small,
suggestions,
disabled,
placeholder,
onKeyUp,
autoFocus,
children,
className,
id,
maxLength,
2020-04-02 04:17:21 +01:00
textarea,
2020-04-08 02:06:59 +01:00
prependIcon,
2020-03-07 04:53:28 +00:00
} = this.props
const { suggestionsHidden } = this.state
const style = {
direction: isRtl(value) ? 'rtl' : 'ltr',
}
2020-05-02 07:25:55 +01:00
const textareaClasses = cx({
2020-02-28 15:20:47 +00:00
default: 1,
2020-05-02 07:25:55 +01:00
font: 1,
wrap: 1,
2020-02-28 15:20:47 +00:00
resizeNone: 1,
2020-05-02 07:25:55 +01:00
bgTransparent: 1,
2020-02-28 15:20:47 +00:00
outlineNone: 1,
2020-05-02 07:25:55 +01:00
lineHeight125: 1,
2020-05-04 19:44:37 +01:00
colorPrimary: 1,
2020-05-02 07:25:55 +01:00
width100PC: !small,
pt15: !small,
px15: !small,
px10: small,
pb10: !small,
2020-04-29 23:32:49 +01:00
fs16PX: !small,
fs14PX: small,
2020-05-02 07:25:55 +01:00
heightMax200PX: small,
heightMax80VH: !small,
2020-05-07 05:03:34 +01:00
heightMin80PX: !small,
2020-05-02 07:25:55 +01:00
})
const textareaContainerClasses = cx({
default: 1,
maxWidth100PC: 1,
flexGrow1: small,
justifyContentCenter: small,
2020-02-28 15:20:47 +00:00
})
if (textarea) {
2020-02-08 06:12:01 +00:00
return (
2020-03-25 03:08:43 +00:00
<Fragment>
2020-05-02 07:25:55 +01:00
<div className={textareaContainerClasses}>
2020-05-15 03:31:24 +01:00
<Textarea
2020-05-02 07:25:55 +01:00
inputRef={this.setTextbox}
className={textareaClasses}
disabled={disabled}
placeholder={placeholder}
2020-05-04 19:44:37 +01:00
autoFocus={false}
2020-05-02 07:25:55 +01:00
value={value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
onKeyUp={onKeyUp}
onFocus={this.onFocus}
onBlur={this.onBlur}
onPaste={this.onPaste}
2020-05-02 07:25:55 +01:00
aria-autocomplete='list'
2020-05-15 03:31:24 +01:00
/>
2020-05-02 07:25:55 +01:00
2020-05-15 03:31:24 +01:00
{/*<Composer
2020-04-29 03:24:35 +01:00
inputRef={this.setTextbox}
disabled={disabled}
placeholder={placeholder}
autoFocus={autoFocus}
value={value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
onKeyUp={onKeyUp}
onFocus={this.onFocus}
onBlur={this.onBlur}
onPaste={this.onPaste}
small={small}
2020-05-15 03:31:24 +01:00
/>*/}
2020-03-27 22:57:03 +00:00
2020-02-08 06:12:01 +00:00
{children}
</div>
2020-04-16 07:00:43 +01:00
{ /* : todo : put in popover */ }
2020-02-08 06:12:01 +00:00
<div className='autosuggest-textarea__suggestions-wrapper'>
<div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
{suggestions.map(this.renderSuggestion)}
</div>
</div>
2020-02-08 06:12:01 +00:00
</Fragment>
)
}
return (
2020-03-07 04:53:28 +00:00
<div className={[_s.default, _s.flexGrow1].join(' ')}>
<label className={[_s.default].join(' ')}>
<span style={{ display: 'none' }}>{placeholder}</span>
2020-03-07 04:53:28 +00:00
<Input
type='text'
ref={this.setTextbox}
disabled={disabled}
placeholder={placeholder}
autoFocus={autoFocus}
value={value}
onChange={this.onChange}
onKeyDown={this.onKeyDown}
onKeyUp={onKeyUp}
onFocus={this.onFocus}
onBlur={this.onBlur}
style={style}
aria-autocomplete='list'
id={id}
className={className}
maxLength={maxLength}
2020-04-02 04:17:21 +01:00
prependIcon={prependIcon}
/>
</label>
<div className={`autosuggest-textarea__suggestions ${suggestionsHidden || suggestions.isEmpty() ? '' : 'autosuggest-textarea__suggestions--visible'}`}>
{suggestions.map(this.renderSuggestion)}
</div>
</div>
);
}
}