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