|
|
@@ -1,6 +1,6 @@
|
|
|
import React, {
|
|
|
FC, ForwardRefRenderFunction, forwardRef, useImperativeHandle,
|
|
|
- KeyboardEvent, useCallback, useRef, useState,
|
|
|
+ KeyboardEvent, useCallback, useRef, useState, MouseEventHandler,
|
|
|
} from 'react';
|
|
|
// eslint-disable-next-line no-restricted-imports
|
|
|
import { AxiosResponse } from 'axios';
|
|
|
@@ -17,15 +17,12 @@ import { IPage } from '~/interfaces/page';
|
|
|
|
|
|
type ResetFormButtonProps = {
|
|
|
keywordOnInit: string,
|
|
|
- behaviorOfResetBtn: 'restore' | 'clear',
|
|
|
input: string,
|
|
|
- onReset: () => void,
|
|
|
+ onReset: MouseEventHandler,
|
|
|
}
|
|
|
|
|
|
const ResetFormButton: FC<ResetFormButtonProps> = (props: ResetFormButtonProps) => {
|
|
|
- const isClearBtn = props.behaviorOfResetBtn === 'clear';
|
|
|
- const initialKeyword = isClearBtn ? '' : props.keywordOnInit;
|
|
|
- const isHidden = props.input === initialKeyword;
|
|
|
+ const isHidden = props.input.length === 0;
|
|
|
|
|
|
return isHidden ? (
|
|
|
<span />
|
|
|
@@ -45,7 +42,6 @@ type Props = TypeaheadProps & {
|
|
|
keywordOnInit?: string,
|
|
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
|
helpElement?: any,
|
|
|
- behaviorOfResetBtn?: 'restore' | 'clear',
|
|
|
};
|
|
|
|
|
|
// see https://github.com/ericgio/react-bootstrap-typeahead/issues/266#issuecomment-414987723
|
|
|
@@ -60,7 +56,6 @@ type TypeaheadInstanceFactory = {
|
|
|
|
|
|
const SearchTypeahead: ForwardRefRenderFunction<IFocusable, Props> = (props: Props, ref) => {
|
|
|
const {
|
|
|
- keywordOnInit,
|
|
|
onSearchSuccess, onSearchError, onInputChange, onSubmit,
|
|
|
emptyLabel, helpElement,
|
|
|
} = props;
|
|
|
@@ -74,18 +69,18 @@ const SearchTypeahead: ForwardRefRenderFunction<IFocusable, Props> = (props: Pro
|
|
|
|
|
|
const typeaheadRef = useRef<TypeaheadInstanceFactory>(null);
|
|
|
|
|
|
+ const focusToTypeahead = () => {
|
|
|
+ const instance = typeaheadRef.current?.getInstance();
|
|
|
+ if (instance != null) {
|
|
|
+ instance.focus();
|
|
|
+ }
|
|
|
+ };
|
|
|
|
|
|
// publish focus()
|
|
|
useImperativeHandle(ref, () => ({
|
|
|
- focus() {
|
|
|
- const instance = typeaheadRef.current?.getInstance();
|
|
|
- if (instance != null) {
|
|
|
- instance.focus();
|
|
|
- }
|
|
|
- },
|
|
|
+ focus: focusToTypeahead,
|
|
|
}));
|
|
|
|
|
|
-
|
|
|
const changeKeyword = (text: string | undefined) => {
|
|
|
const instance = typeaheadRef.current?.getInstance();
|
|
|
if (instance != null) {
|
|
|
@@ -94,12 +89,12 @@ const SearchTypeahead: ForwardRefRenderFunction<IFocusable, Props> = (props: Pro
|
|
|
}
|
|
|
};
|
|
|
|
|
|
- const restoreInitialData = () => {
|
|
|
- changeKeyword(keywordOnInit);
|
|
|
- };
|
|
|
+ const resetForm = (e: MouseEvent) => {
|
|
|
+ e.preventDefault();
|
|
|
|
|
|
- const clearKeyword = () => {
|
|
|
+ setInput('');
|
|
|
changeKeyword('');
|
|
|
+ focusToTypeahead();
|
|
|
};
|
|
|
|
|
|
/**
|
|
|
@@ -187,9 +182,6 @@ const SearchTypeahead: ForwardRefRenderFunction<IFocusable, Props> = (props: Pro
|
|
|
inputProps.name = props.inputName;
|
|
|
}
|
|
|
|
|
|
- const isClearBtn = props.behaviorOfResetBtn === 'clear';
|
|
|
- const resetForm = isClearBtn ? clearKeyword : restoreInitialData;
|
|
|
-
|
|
|
const renderMenuItemChildren = (page: IPage) => (
|
|
|
<span>
|
|
|
<UserPicture user={page.lastUpdateUser} size="sm" noLink />
|
|
|
@@ -226,7 +218,6 @@ const SearchTypeahead: ForwardRefRenderFunction<IFocusable, Props> = (props: Pro
|
|
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
|
keywordOnInit={props.keywordOnInit!}
|
|
|
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
|
|
- behaviorOfResetBtn={props.behaviorOfResetBtn!}
|
|
|
input={input}
|
|
|
onReset={resetForm}
|
|
|
/>
|
|
|
@@ -239,7 +230,6 @@ const ForwardedSearchTypeahead = forwardRef(SearchTypeahead);
|
|
|
ForwardedSearchTypeahead.defaultProps = {
|
|
|
placeholder: '',
|
|
|
keywordOnInit: '',
|
|
|
- behaviorOfResetBtn: 'restore',
|
|
|
autoFocus: false,
|
|
|
};
|
|
|
|