bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

AutosuggestInput: convert to TSX

Browse source
This commit is contained in:
Alex Gleason 2022-06-04 18:21:16 -05:00
parent e6c25a1887
commit ba803e200c
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
2 changed files with 67 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/components/autosuggest_account_input.tsx
View file

@ -59,7 +59,7 @@ const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
onChange(e);
};
const handleSelected = (_tokenStart: string, _lastToken: string, accountId: string) => {
const handleSelected = (_tokenStart: number, _lastToken: string | null, accountId: string) => {
onSelected(accountId);
};

124
app/soapbox/components/autosuggest_input.js → app/soapbox/components/autosuggest_input.tsx
View file

@ -1,22 +1,25 @@
import classNames from 'classnames';
import { List as ImmutableList } from 'immutable';
import PropTypes from 'prop-types';
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import ImmutablePureComponent from 'react-immutable-pure-component';
import AutosuggestEmoji from 'soapbox/components/autosuggest_emoji';
import Icon from 'soapbox/components/icon';
import AutosuggestAccount from 'soapbox/features/compose/components/autosuggest_account';
import { isRtl } from 'soapbox/rtl';
import AutosuggestAccount from '../features/compose/components/autosuggest_account';
import { isRtl } from '../rtl';
import type { Menu, MenuItem } from 'soapbox/components/dropdown_menu';
import AutosuggestEmoji from './autosuggest_emoji';
type CursorMatch = [
tokenStart: number | null,
token: string | null,
];
const textAtCursorMatchesToken = (str, caretPosition, searchTokens) => {
let word;
const textAtCursorMatchesToken = (str: string, caretPosition: number, searchTokens: string[]): CursorMatch => {
let word: string;
const left = str.slice(0, caretPosition).search(/\S+$/);
const right = str.slice(caretPosition).search(/\s/);
const left: number = str.slice(0, caretPosition).search(/\S+$/);
const right: number = str.slice(caretPosition).search(/\s/);
if (right < 0) {
word = str.slice(left);
@ -37,28 +40,25 @@ const textAtCursorMatchesToken = (str, caretPosition, searchTokens) => {
}
};
export default class AutosuggestInput extends ImmutablePureComponent {
interface IAutosuggestInput extends Pick<React.HTMLAttributes<HTMLInputElement>, 'onChange' | 'onKeyUp' | 'onKeyDown'> {
value: string,
suggestions: ImmutableList<any>,
disabled?: boolean,
placeholder?: string,
onSuggestionSelected: (tokenStart: number, lastToken: string | null, suggestion: any) => void,
onSuggestionsClearRequested: () => void,
onSuggestionsFetchRequested: (token: string) => void,
autoFocus: boolean,
autoSelect: boolean,
className?: string,
id?: string,
searchTokens: string[],
maxLength?: number,
menu?: Menu,
resultsPosition: string,
}
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,
autoSelect: PropTypes.bool,
className: PropTypes.string,
id: PropTypes.string,
searchTokens: PropTypes.arrayOf(PropTypes.string),
maxLength: PropTypes.number,
menu: PropTypes.arrayOf(PropTypes.object),
resultsPosition: PropTypes.string,
};
export default class AutosuggestInput extends ImmutablePureComponent<IAutosuggestInput> {
static defaultProps = {
autoFocus: false,
@ -79,8 +79,10 @@ export default class AutosuggestInput extends ImmutablePureComponent {
tokenStart: 0,
};
onChange = (e) => {
const [ tokenStart, token ] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart, this.props.searchTokens);
input: HTMLInputElement | null = null;
onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
const [tokenStart, token] = textAtCursorMatchesToken(e.target.value, e.target.selectionStart || 0, this.props.searchTokens);
if (token !== null && this.state.lastToken !== token) {
this.setState({ lastToken: token, selectedSuggestion: 0, tokenStart });
@ -90,10 +92,12 @@ export default class AutosuggestInput extends ImmutablePureComponent {
this.props.onSuggestionsClearRequested();
}
this.props.onChange(e);
if (this.props.onChange) {
this.props.onChange(e);
}
}
onKeyDown = (e) => {
onKeyDown: React.KeyboardEventHandler<HTMLInputElement> = (e) => {
const { suggestions, menu, disabled } = this.props;
const { selectedSuggestion, suggestionsHidden } = this.state;
const firstIndex = this.getFirstIndex();
@ -104,7 +108,7 @@ export default class AutosuggestInput extends ImmutablePureComponent {
return;
}
if (e.which === 229 || e.isComposing) {
if (e.which === 229) {
// 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)
return;
@ -113,7 +117,7 @@ export default class AutosuggestInput extends ImmutablePureComponent {
switch (e.key) {
case 'Escape':
if (suggestions.size === 0 || suggestionsHidden) {
document.querySelector('.ui').parentElement.focus();
document.querySelector('.ui')?.parentElement?.focus();
} else {
e.preventDefault();
this.setState({ suggestionsHidden: true });
@ -136,7 +140,7 @@ export default class AutosuggestInput extends ImmutablePureComponent {
break;
case 'Enter':
case 'Tab':
// Select suggestion
// Select suggestion
if (!suggestionsHidden && selectedSuggestion > -1 && (suggestions.size > 0 || menu)) {
e.preventDefault();
e.stopPropagation();
@ -144,9 +148,9 @@ export default class AutosuggestInput extends ImmutablePureComponent {
if (selectedSuggestion < suggestions.size) {
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestions.get(selectedSuggestion));
} else {
} else if (menu) {
const item = menu[selectedSuggestion - suggestions.size];
this.handleMenuItemAction(item);
this.handleMenuItemAction(item, e);
}
}
@ -157,7 +161,9 @@ export default class AutosuggestInput extends ImmutablePureComponent {
return;
}
this.props.onKeyDown(e);
if (this.props.onKeyDown) {
this.props.onKeyDown(e);
}
}
onBlur = () => {
@ -168,25 +174,26 @@ export default class AutosuggestInput extends ImmutablePureComponent {
this.setState({ focused: true });
}
onSuggestionClick = (e) => {
const suggestion = this.props.suggestions.get(e.currentTarget.getAttribute('data-index'));
e.preventDefault();
onSuggestionClick: React.MouseEventHandler = (e) => {
const index = Number(e.currentTarget?.getAttribute('data-index'));
const suggestion = this.props.suggestions.get(index);
this.props.onSuggestionSelected(this.state.tokenStart, this.state.lastToken, suggestion);
this.input.focus();
this.input?.focus();
e.preventDefault();
}
componentDidUpdate(prevProps, prevState) {
componentDidUpdate(prevProps: IAutosuggestInput, prevState: any) {
const { suggestions } = this.props;
if (suggestions !== prevProps.suggestions && suggestions.size > 0 && prevState.suggestionsHidden && prevState.focused) {
this.setState({ suggestionsHidden: false });
}
}
setInput = (c) => {
setInput = (c: HTMLInputElement) => {
this.input = c;
}
renderSuggestion = (suggestion, i) => {
renderSuggestion = (suggestion: any, i: number) => {
const { selectedSuggestion } = this.state;
let inner, key;
@ -204,7 +211,7 @@ export default class AutosuggestInput extends ImmutablePureComponent {
return (
<div
role='button'
tabIndex='0'
tabIndex={0}
key={key}
data-index={i}
className={classNames({
@ -218,15 +225,17 @@ export default class AutosuggestInput extends ImmutablePureComponent {
);
}
handleMenuItemAction = item => {
handleMenuItemAction = (item: MenuItem | null, e: React.MouseEvent | React.KeyboardEvent) => {
this.onBlur();
item.action();
if (item?.action) {
item.action(e);
}
}
handleMenuItemClick = item => {
handleMenuItemClick = (item: MenuItem | null): React.MouseEventHandler => {
return e => {
e.preventDefault();
this.handleMenuItemAction(item);
this.handleMenuItemAction(item, e);
};
}
@ -243,15 +252,15 @@ export default class AutosuggestInput extends ImmutablePureComponent {
className={classNames('flex items-center space-x-2 px-4 py-2.5 text-sm text-gray-700 dark:text-gray-400 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700', { selected: suggestions.size - selectedSuggestion === i })}
href='#'
role='button'
tabIndex='0'
tabIndex={0}
onMouseDown={this.handleMenuItemClick(item)}
key={i}
>
{item.icon && (
{item?.icon && (
<Icon src={item.icon} />
)}
<span>{item.text}</span>
<span>{item?.text}</span>
</a>
));
};
@ -259,7 +268,7 @@ export default class AutosuggestInput extends ImmutablePureComponent {
render() {
const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu, resultsPosition } = this.props;
const { suggestionsHidden } = this.state;
const style = { direction: 'ltr' };
const style: React.CSSProperties = { direction: 'ltr' };
const visible = !suggestionsHidden && (!suggestions.isEmpty() || (menu && value));
@ -275,8 +284,7 @@ export default class AutosuggestInput extends ImmutablePureComponent {
type='text'
className={classNames({
'block w-full sm:text-sm dark:bg-slate-800 dark:text-white dark:placeholder:text-gray-500 focus:ring-indigo-500 focus:border-indigo-500': true,
[className]: typeof className !== 'undefined',
})}
}, className)}
ref={this.setInput}
disabled={disabled}
placeholder={placeholder}