made search bar always present and remove search button
This commit is contained in:
parent
dc21741704
commit
d2f4e1adc5
|
@ -19,9 +19,9 @@ import {
|
|||
import constants from 'utils/strings/constants';
|
||||
import LocationIcon from './LocationIcon';
|
||||
import DateIcon from './DateIcon';
|
||||
import CrossIcon from './CrossIcon';
|
||||
import SearchIcon from './SearchIcon';
|
||||
|
||||
const Wrapper = styled.div<{ open: boolean }>`
|
||||
const Wrapper = styled.div`
|
||||
background-color: #111;
|
||||
color: #fff;
|
||||
min-height: 64px;
|
||||
|
@ -36,7 +36,6 @@ const Wrapper = styled.div<{ open: boolean }>`
|
|||
justify-content: center;
|
||||
z-index: 200;
|
||||
padding: 0 20%;
|
||||
display: ${(props) => (props.open ? 'flex' : 'none')};
|
||||
`;
|
||||
|
||||
enum SuggestionType {
|
||||
|
@ -67,15 +66,6 @@ export default function SearchBar(props: Props) {
|
|||
main();
|
||||
}, [props.isOpen]);
|
||||
|
||||
const searchBarRef = useRef(null);
|
||||
useEffect(() => {
|
||||
if (props.isOpen) {
|
||||
setTimeout(() => {
|
||||
searchBarRef.current?.focus();
|
||||
}, 200);
|
||||
}
|
||||
}, [props.isOpen]);
|
||||
|
||||
const getAutoCompleteSuggestion = async (searchPhrase: string) => {
|
||||
let option = new Array<Suggestion>();
|
||||
if (!searchPhrase?.length) {
|
||||
|
@ -107,6 +97,7 @@ export default function SearchBar(props: Props) {
|
|||
|
||||
const filterFiles = (selectedOption: Suggestion) => {
|
||||
if (!selectedOption) {
|
||||
resetSearch();
|
||||
return;
|
||||
}
|
||||
let resultFiles: File[] = [];
|
||||
|
@ -126,17 +117,16 @@ export default function SearchBar(props: Props) {
|
|||
const filesTakenAtLocation = getFilesInsideBbox(allFiles, bbox);
|
||||
resultFiles = filesTakenAtLocation;
|
||||
}
|
||||
|
||||
props.setOpen(true);
|
||||
props.setFiles(resultFiles);
|
||||
props.setCollections(
|
||||
getNonEmptyCollections(allCollections, resultFiles)
|
||||
);
|
||||
};
|
||||
const closeSearchBar = ({ resetForm }) => {
|
||||
const resetSearch = () => {
|
||||
props.setOpen(false);
|
||||
props.setFiles(allFiles);
|
||||
props.setCollections(allCollections);
|
||||
resetForm();
|
||||
};
|
||||
|
||||
const getIconByType = (type: SuggestionType) =>
|
||||
|
@ -150,7 +140,7 @@ export default function SearchBar(props: Props) {
|
|||
<span>{props.label}</span>
|
||||
</div>
|
||||
);
|
||||
const { Option, SingleValue } = components;
|
||||
const { Option, SingleValue, Control } = components;
|
||||
const SingleValueWithIcon = (props) => (
|
||||
<SingleValue {...props}>
|
||||
<LabelWithIcon type={props.data.type} label={props.data.label} />
|
||||
|
@ -161,13 +151,21 @@ export default function SearchBar(props: Props) {
|
|||
<LabelWithIcon type={props.data.type} label={props.data.label} />
|
||||
</Option>
|
||||
);
|
||||
const ControlWithIcon = (props) => (
|
||||
<Control {...props}>
|
||||
<span style={{ paddingLeft: '10px' }}>
|
||||
<SearchIcon />
|
||||
</span>
|
||||
{props.children}
|
||||
</Control>
|
||||
);
|
||||
|
||||
const customStyles = {
|
||||
control: (provided, { isFocused }) => ({
|
||||
...provided,
|
||||
backgroundColor: '#282828',
|
||||
color: '#d1d1d1',
|
||||
borderColor: isFocused && '#2dc262',
|
||||
borderColor: isFocused ? '#2dc262' : '#444',
|
||||
boxShadow: isFocused && '0 0 3px #2dc262',
|
||||
':hover': {
|
||||
borderColor: '#2dc262',
|
||||
|
@ -206,7 +204,7 @@ export default function SearchBar(props: Props) {
|
|||
};
|
||||
|
||||
return (
|
||||
<Wrapper open={props.isOpen}>
|
||||
<Wrapper>
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
|
@ -219,8 +217,8 @@ export default function SearchBar(props: Props) {
|
|||
components={{
|
||||
Option: OptionWithIcon,
|
||||
SingleValue: SingleValueWithIcon,
|
||||
Control: ControlWithIcon,
|
||||
}}
|
||||
ref={searchBarRef}
|
||||
placeholder={constants.SEARCH_HINT}
|
||||
loadOptions={getOptions}
|
||||
onChange={filterFiles}
|
||||
|
@ -230,17 +228,6 @@ export default function SearchBar(props: Props) {
|
|||
noOptionsMessage={() => null}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
margin: '0',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
cursor: 'pointer',
|
||||
}}
|
||||
onClick={() => closeSearchBar({ resetForm: () => null })}
|
||||
>
|
||||
<CrossIcon />
|
||||
</div>
|
||||
</>
|
||||
</Wrapper>
|
||||
);
|
||||
|
|
|
@ -53,7 +53,6 @@ import { getSelectedFileIds } from 'utils/file';
|
|||
import { addFilesToCollection } from 'utils/collection';
|
||||
import SelectedFileOptions from './components/SelectedFileOptions';
|
||||
import { errorCodes } from 'utils/common/errorUtil';
|
||||
import SearchButton from 'components/SearchButton';
|
||||
import SearchBar from 'components/SearchBar';
|
||||
|
||||
export enum FILE_TYPE {
|
||||
|
@ -364,7 +363,7 @@ export default function Gallery() {
|
|||
loadingBar={loadingBar}
|
||||
searchMode={searchMode}
|
||||
/>
|
||||
{selected.count > 0 ? (
|
||||
{selected.count > 0 && (
|
||||
<SelectedFileOptions
|
||||
addToCollectionHelper={addToCollectionHelper}
|
||||
showCreateCollectionModal={showCreateCollectionModal}
|
||||
|
@ -374,11 +373,6 @@ export default function Gallery() {
|
|||
}
|
||||
deleteFileHelper={deleteFileHelper}
|
||||
/>
|
||||
) : (
|
||||
<SearchButton
|
||||
isOpen={searchMode}
|
||||
onClick={() => setSearchMode(true)}
|
||||
/>
|
||||
)}
|
||||
</FullScreenDropZone>
|
||||
);
|
||||
|
|
Loading…
Reference in a new issue