Remove unneeded code from AccountSearch
This commit is contained in:
parent
5a30509fa6
commit
9657598d33
|
@ -5,7 +5,6 @@ import { defineMessages, useIntl } from 'react-intl';
|
||||||
import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input';
|
import AutosuggestAccountInput from 'soapbox/components/autosuggest-account-input';
|
||||||
|
|
||||||
import SvgIcon from './ui/icon/svg-icon';
|
import SvgIcon from './ui/icon/svg-icon';
|
||||||
import { InputThemes } from './ui/input/input';
|
|
||||||
|
|
||||||
const messages = defineMessages({
|
const messages = defineMessages({
|
||||||
placeholder: { id: 'account_search.placeholder', defaultMessage: 'Search for an account' },
|
placeholder: { id: 'account_search.placeholder', defaultMessage: 'Search for an account' },
|
||||||
|
@ -16,20 +15,10 @@ interface IAccountSearch {
|
||||||
onSelected: (accountId: string) => void,
|
onSelected: (accountId: string) => void,
|
||||||
/** Override the default placeholder of the input. */
|
/** Override the default placeholder of the input. */
|
||||||
placeholder?: string,
|
placeholder?: string,
|
||||||
/** Position of results relative to the input. */
|
|
||||||
resultsPosition?: 'above' | 'below',
|
|
||||||
/** Optional class for the input */
|
|
||||||
className?: string,
|
|
||||||
autoFocus?: boolean,
|
|
||||||
hidePortal?: boolean,
|
|
||||||
theme?: InputThemes,
|
|
||||||
showButtons?: boolean,
|
|
||||||
/** Search only among people who follow you (TruthSocial). */
|
|
||||||
followers?: boolean,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Input to search for accounts. */
|
/** Input to search for accounts. */
|
||||||
const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, className, showButtons = true, ...rest }) => {
|
const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
|
||||||
const intl = useIntl();
|
const intl = useIntl();
|
||||||
|
|
||||||
const [value, setValue] = useState('');
|
const [value, setValue] = useState('');
|
||||||
|
@ -71,7 +60,7 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, className, showBu
|
||||||
|
|
||||||
<div className='relative'>
|
<div className='relative'>
|
||||||
<AutosuggestAccountInput
|
<AutosuggestAccountInput
|
||||||
className={classNames('rounded-full', className)}
|
className='rounded-full'
|
||||||
placeholder={intl.formatMessage(messages.placeholder)}
|
placeholder={intl.formatMessage(messages.placeholder)}
|
||||||
value={value}
|
value={value}
|
||||||
onChange={handleChange}
|
onChange={handleChange}
|
||||||
|
@ -80,7 +69,6 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, className, showBu
|
||||||
{...rest}
|
{...rest}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{showButtons && (
|
|
||||||
<div
|
<div
|
||||||
role='button'
|
role='button'
|
||||||
tabIndex={0}
|
tabIndex={0}
|
||||||
|
@ -98,7 +86,6 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, className, showBu
|
||||||
aria-label={intl.formatMessage(messages.placeholder)}
|
aria-label={intl.formatMessage(messages.placeholder)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -22,8 +22,6 @@ interface IAutosuggestAccountInput {
|
||||||
menu?: Menu,
|
menu?: Menu,
|
||||||
onKeyDown?: React.KeyboardEventHandler,
|
onKeyDown?: React.KeyboardEventHandler,
|
||||||
theme?: InputThemes,
|
theme?: InputThemes,
|
||||||
/** Search only among people who follow you (TruthSocial). */
|
|
||||||
followers?: boolean,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
|
const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
|
||||||
|
@ -31,7 +29,6 @@ const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
|
||||||
onSelected,
|
onSelected,
|
||||||
value = '',
|
value = '',
|
||||||
limit = 4,
|
limit = 4,
|
||||||
followers = false,
|
|
||||||
...rest
|
...rest
|
||||||
}) => {
|
}) => {
|
||||||
const dispatch = useAppDispatch();
|
const dispatch = useAppDispatch();
|
||||||
|
@ -48,7 +45,7 @@ const AutosuggestAccountInput: React.FC<IAutosuggestAccountInput> = ({
|
||||||
};
|
};
|
||||||
|
|
||||||
const handleAccountSearch = useCallback(throttle(q => {
|
const handleAccountSearch = useCallback(throttle(q => {
|
||||||
const params = { q, limit, followers, resolve: false };
|
const params = { q, limit, resolve: false };
|
||||||
|
|
||||||
dispatch(accountSearch(params, controller.current.signal))
|
dispatch(accountSearch(params, controller.current.signal))
|
||||||
.then((accounts: { id: string }[]) => {
|
.then((accounts: { id: string }[]) => {
|
||||||
|
|
|
@ -31,7 +31,6 @@ export interface IAutosuggestInput extends Pick<React.HTMLAttributes<HTMLInputEl
|
||||||
searchTokens: string[],
|
searchTokens: string[],
|
||||||
maxLength?: number,
|
maxLength?: number,
|
||||||
menu?: Menu,
|
menu?: Menu,
|
||||||
resultsPosition: string,
|
|
||||||
renderSuggestion?: React.FC<{ id: string }>,
|
renderSuggestion?: React.FC<{ id: string }>,
|
||||||
hidePortal?: boolean,
|
hidePortal?: boolean,
|
||||||
theme?: InputThemes,
|
theme?: InputThemes,
|
||||||
|
@ -43,7 +42,6 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
|
||||||
autoFocus: false,
|
autoFocus: false,
|
||||||
autoSelect: true,
|
autoSelect: true,
|
||||||
searchTokens: ImmutableList(['@', ':', '#']),
|
searchTokens: ImmutableList(['@', ':', '#']),
|
||||||
resultsPosition: 'below',
|
|
||||||
};
|
};
|
||||||
|
|
||||||
getFirstIndex = () => {
|
getFirstIndex = () => {
|
||||||
|
@ -260,19 +258,15 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
|
||||||
|
|
||||||
const { top, height, left, width } = this.input.getBoundingClientRect();
|
const { top, height, left, width } = this.input.getBoundingClientRect();
|
||||||
|
|
||||||
if (this.props.resultsPosition === 'below') {
|
|
||||||
return { left, width, top: top + height };
|
return { left, width, top: top + height };
|
||||||
}
|
}
|
||||||
|
|
||||||
return { left, width, top, transform: 'translate(0, -100%)' };
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { hidePortal, value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu, theme } = this.props;
|
const { value, suggestions, disabled, placeholder, onKeyUp, autoFocus, className, id, maxLength, menu, theme } = this.props;
|
||||||
const { suggestionsHidden } = this.state;
|
const { suggestionsHidden } = this.state;
|
||||||
const style: React.CSSProperties = { direction: 'ltr' };
|
const style: React.CSSProperties = { direction: 'ltr' };
|
||||||
|
|
||||||
const visible = !hidePortal && !suggestionsHidden && (!suggestions.isEmpty() || (menu && value));
|
const visible = !suggestionsHidden && (!suggestions.isEmpty() || (menu && value));
|
||||||
|
|
||||||
if (isRtl(value)) {
|
if (isRtl(value)) {
|
||||||
style.direction = 'rtl';
|
style.direction = 'rtl';
|
||||||
|
|
Loading…
Reference in New Issue