|
@@ -1,13 +1,7 @@
|
|
import { IconButton } from '@mui/material';
|
|
import { IconButton } from '@mui/material';
|
|
import pDebounce from 'p-debounce';
|
|
import pDebounce from 'p-debounce';
|
|
import { AppContext } from 'pages/_app';
|
|
import { AppContext } from 'pages/_app';
|
|
-import React, {
|
|
|
|
- useCallback,
|
|
|
|
- useContext,
|
|
|
|
- useEffect,
|
|
|
|
- useRef,
|
|
|
|
- useState,
|
|
|
|
-} from 'react';
|
|
|
|
|
|
+import { useCallback, useContext, useEffect, useRef, useState } from 'react';
|
|
import {
|
|
import {
|
|
getAutoCompleteSuggestions,
|
|
getAutoCompleteSuggestions,
|
|
getDefaultOptions,
|
|
getDefaultOptions,
|
|
@@ -34,6 +28,8 @@ import { t } from 'i18next';
|
|
import memoize from 'memoize-one';
|
|
import memoize from 'memoize-one';
|
|
import { LocationTagData } from 'types/entity';
|
|
import { LocationTagData } from 'types/entity';
|
|
import { FILE_TYPE } from 'constants/file';
|
|
import { FILE_TYPE } from 'constants/file';
|
|
|
|
+import { InputActionMeta } from 'react-select/src/types';
|
|
|
|
+import { components } from 'react-select';
|
|
|
|
|
|
interface Iprops {
|
|
interface Iprops {
|
|
isOpen: boolean;
|
|
isOpen: boolean;
|
|
@@ -43,20 +39,33 @@ interface Iprops {
|
|
collections: Collection[];
|
|
collections: Collection[];
|
|
}
|
|
}
|
|
|
|
|
|
-const createComponents = memoize((Option, ValueContainer, Menu) => ({
|
|
|
|
|
|
+const createComponents = memoize((Option, ValueContainer, Menu, Input) => ({
|
|
Option,
|
|
Option,
|
|
ValueContainer,
|
|
ValueContainer,
|
|
Menu,
|
|
Menu,
|
|
|
|
+ Input,
|
|
}));
|
|
}));
|
|
|
|
|
|
|
|
+const VisibleInput = (props) => (
|
|
|
|
+ <components.Input {...props} isHidden={false} />
|
|
|
|
+);
|
|
|
|
+
|
|
export default function SearchInput(props: Iprops) {
|
|
export default function SearchInput(props: Iprops) {
|
|
const selectRef = useRef(null);
|
|
const selectRef = useRef(null);
|
|
const [value, setValue] = useState<SearchOption>(null);
|
|
const [value, setValue] = useState<SearchOption>(null);
|
|
const appContext = useContext(AppContext);
|
|
const appContext = useContext(AppContext);
|
|
const handleChange = (value: SearchOption) => {
|
|
const handleChange = (value: SearchOption) => {
|
|
setValue(value);
|
|
setValue(value);
|
|
|
|
+ setQuery(value.label);
|
|
|
|
+ blur();
|
|
|
|
+ };
|
|
|
|
+ const handleInputChange = (value: string, actionMeta: InputActionMeta) => {
|
|
|
|
+ if (actionMeta.action === 'input-change') {
|
|
|
|
+ setQuery(value);
|
|
|
|
+ }
|
|
};
|
|
};
|
|
const [defaultOptions, setDefaultOptions] = useState([]);
|
|
const [defaultOptions, setDefaultOptions] = useState([]);
|
|
|
|
+ const [query, setQuery] = useState('');
|
|
|
|
|
|
useEffect(() => {
|
|
useEffect(() => {
|
|
search(value);
|
|
search(value);
|
|
@@ -82,6 +91,7 @@ export default function SearchInput(props: Iprops) {
|
|
}, 10);
|
|
}, 10);
|
|
props.setIsOpen(false);
|
|
props.setIsOpen(false);
|
|
setValue(null);
|
|
setValue(null);
|
|
|
|
+ setQuery('');
|
|
}
|
|
}
|
|
};
|
|
};
|
|
|
|
|
|
@@ -90,6 +100,10 @@ export default function SearchInput(props: Iprops) {
|
|
250
|
|
250
|
|
);
|
|
);
|
|
|
|
|
|
|
|
+ const blur = () => {
|
|
|
|
+ selectRef.current?.blur();
|
|
|
|
+ };
|
|
|
|
+
|
|
const search = (selectedOption: SearchOption) => {
|
|
const search = (selectedOption: SearchOption) => {
|
|
if (!selectedOption) {
|
|
if (!selectedOption) {
|
|
return;
|
|
return;
|
|
@@ -111,6 +125,7 @@ export default function SearchInput(props: Iprops) {
|
|
case SuggestionType.COLLECTION:
|
|
case SuggestionType.COLLECTION:
|
|
search = { collection: selectedOption.value as number };
|
|
search = { collection: selectedOption.value as number };
|
|
setValue(null);
|
|
setValue(null);
|
|
|
|
+ setQuery('');
|
|
break;
|
|
break;
|
|
case SuggestionType.FILE_NAME:
|
|
case SuggestionType.FILE_NAME:
|
|
search = { files: selectedOption.value as number[] };
|
|
search = { files: selectedOption.value as number[] };
|
|
@@ -161,7 +176,8 @@ export default function SearchInput(props: Iprops) {
|
|
const components = createComponents(
|
|
const components = createComponents(
|
|
OptionWithInfo,
|
|
OptionWithInfo,
|
|
ValueContainerWithIcon,
|
|
ValueContainerWithIcon,
|
|
- MemoizedMenuWithPeople
|
|
|
|
|
|
+ MemoizedMenuWithPeople,
|
|
|
|
+ VisibleInput
|
|
);
|
|
);
|
|
|
|
|
|
return (
|
|
return (
|
|
@@ -175,6 +191,8 @@ export default function SearchInput(props: Iprops) {
|
|
onChange={handleChange}
|
|
onChange={handleChange}
|
|
onFocus={handleOnFocus}
|
|
onFocus={handleOnFocus}
|
|
isClearable
|
|
isClearable
|
|
|
|
+ inputValue={query}
|
|
|
|
+ onInputChange={handleInputChange}
|
|
escapeClearsValue
|
|
escapeClearsValue
|
|
styles={SelectStyles}
|
|
styles={SelectStyles}
|
|
defaultOptions={
|
|
defaultOptions={
|