enable search mode when search input is opened on mobile
This commit is contained in:
parent
a5755a2185
commit
86cc6c6447
|
@ -1,5 +1,5 @@
|
|||
import { SearchButton } from './searchButton';
|
||||
import React, { useState } from 'react';
|
||||
import { SearchBarMobile } from './searchBarMobile';
|
||||
import React from 'react';
|
||||
import { Collection } from 'types/collection';
|
||||
|
||||
import { EnteFile } from 'types/file';
|
||||
|
@ -8,23 +8,31 @@ import SearchInput from './searchInput';
|
|||
import { UpdateSearch } from 'types/search';
|
||||
|
||||
interface Props {
|
||||
isFirstFetch: boolean;
|
||||
updateSearch: UpdateSearch;
|
||||
collections: Collection[];
|
||||
setActiveCollection: (id: number) => void;
|
||||
files: EnteFile[];
|
||||
isInSearchMode: boolean;
|
||||
setIsInSearchMode: (v: boolean) => void;
|
||||
}
|
||||
export default function SearchBar({ isFirstFetch, ...props }: Props) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const showSearchInput = () => setIsOpen(true);
|
||||
|
||||
export default function SearchBar({
|
||||
setIsInSearchMode,
|
||||
isInSearchMode,
|
||||
...props
|
||||
}: Props) {
|
||||
const showSearchInput = () => setIsInSearchMode(true);
|
||||
|
||||
return (
|
||||
<SearchBarWrapper>
|
||||
<SearchInput {...props} isOpen={isOpen} setOpen={setIsOpen} />
|
||||
<SearchButton
|
||||
isFirstFetch={isFirstFetch}
|
||||
show={!isOpen}
|
||||
openSearchInput={showSearchInput}
|
||||
<SearchInput
|
||||
{...props}
|
||||
isOpen={isInSearchMode}
|
||||
setIsOpen={setIsInSearchMode}
|
||||
/>
|
||||
<SearchBarMobile
|
||||
show={!isInSearchMode}
|
||||
showSearchInput={showSearchInput}
|
||||
/>
|
||||
</SearchBarWrapper>
|
||||
);
|
||||
|
|
22
src/components/Search/SearchBar/searchBarMobile.tsx
Normal file
22
src/components/Search/SearchBar/searchBarMobile.tsx
Normal file
|
@ -0,0 +1,22 @@
|
|||
import { IconButton } from '@mui/material';
|
||||
import { FluidContainer } from 'components/Container';
|
||||
import { EnteLogo } from 'components/EnteLogo';
|
||||
import React from 'react';
|
||||
import { SearchMobileBox } from './styledComponents';
|
||||
import SearchIcon from '@mui/icons-material/Search';
|
||||
|
||||
export function SearchBarMobile({ show, showSearchInput }) {
|
||||
if (!show) {
|
||||
return <></>;
|
||||
}
|
||||
return (
|
||||
<SearchMobileBox>
|
||||
<FluidContainer justifyContent="center" mr={1.5}>
|
||||
<EnteLogo />
|
||||
</FluidContainer>
|
||||
<IconButton onClick={showSearchInput}>
|
||||
<SearchIcon />
|
||||
</IconButton>
|
||||
</SearchMobileBox>
|
||||
);
|
||||
}
|
|
@ -1,17 +0,0 @@
|
|||
import SearchIcon from '@mui/icons-material/Search';
|
||||
import { IconButton } from '@mui/material';
|
||||
import React from 'react';
|
||||
import { SearchButtonWrapper } from './styledComponents';
|
||||
|
||||
export function SearchButton({ isFirstFetch, show, openSearchInput }) {
|
||||
if (!show) {
|
||||
return <></>;
|
||||
}
|
||||
return (
|
||||
<SearchButtonWrapper>
|
||||
<IconButton onClick={() => !isFirstFetch && openSearchInput()}>
|
||||
<SearchIcon />
|
||||
</IconButton>
|
||||
</SearchButtonWrapper>
|
||||
);
|
||||
}
|
|
@ -12,7 +12,6 @@ import {
|
|||
} from 'types/search';
|
||||
import constants from 'utils/strings/constants';
|
||||
import { ValueContainerWithIcon } from './valueContainerWithIcon';
|
||||
import { SearchInputWrapper } from './styledComponents';
|
||||
import { SelectStyles } from '../../../../styles/search';
|
||||
import AsyncSelect from 'react-select/async';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
|
@ -20,11 +19,12 @@ import { UpdateSearch } from 'types/search';
|
|||
import { EnteFile } from 'types/file';
|
||||
import { Collection } from 'types/collection';
|
||||
import { OptionWithInfo } from './optionWithInfo';
|
||||
import { SearchInputWrapper } from '../styledComponents';
|
||||
|
||||
interface Iprops {
|
||||
isOpen: boolean;
|
||||
updateSearch: UpdateSearch;
|
||||
setOpen: (value: boolean) => void;
|
||||
setIsOpen: (value: boolean) => void;
|
||||
files: EnteFile[];
|
||||
collections: Collection[];
|
||||
setActiveCollection: (id: number) => void;
|
||||
|
@ -46,7 +46,7 @@ export default function SearchInput(props: Iprops) {
|
|||
setTimeout(() => {
|
||||
appContext.finishLoading();
|
||||
}, 10);
|
||||
props.setOpen(false);
|
||||
props.setIsOpen(false);
|
||||
setValue(null);
|
||||
}
|
||||
};
|
||||
|
@ -66,13 +66,13 @@ export default function SearchInput(props: Iprops) {
|
|||
search = {
|
||||
date: selectedOption.value as DateValue,
|
||||
};
|
||||
props.setOpen(true);
|
||||
props.setIsOpen(true);
|
||||
break;
|
||||
case SuggestionType.LOCATION:
|
||||
search = {
|
||||
location: selectedOption.value as Bbox,
|
||||
};
|
||||
props.setOpen(true);
|
||||
props.setIsOpen(true);
|
||||
break;
|
||||
case SuggestionType.COLLECTION:
|
||||
search = { collection: selectedOption.value as number };
|
||||
|
|
|
@ -1,14 +0,0 @@
|
|||
import { CenteredFlex } from 'components/Container';
|
||||
import { css, styled } from '@mui/material';
|
||||
|
||||
export const SearchInputWrapper = styled(CenteredFlex)<{ isOpen: boolean }>`
|
||||
max-width: 484px;
|
||||
margin: auto;
|
||||
${(props) =>
|
||||
!props.isOpen &&
|
||||
css`
|
||||
@media (max-width: 624px) {
|
||||
display: none;
|
||||
}
|
||||
`}
|
||||
`;
|
|
@ -1,18 +1,33 @@
|
|||
import { FlexWrapper, FluidContainer } from 'components/Container';
|
||||
import { styled } from '@mui/material';
|
||||
import {
|
||||
CenteredFlex,
|
||||
FlexWrapper,
|
||||
FluidContainer,
|
||||
} from 'components/Container';
|
||||
import { css, styled } from '@mui/material';
|
||||
import { SpecialPadding } from 'styles/SpecialPadding';
|
||||
|
||||
export const SearchBarWrapper = styled(FlexWrapper)`
|
||||
${SpecialPadding}
|
||||
`;
|
||||
|
||||
export const SearchButtonWrapper = styled(FluidContainer)`
|
||||
export const SearchMobileBox = styled(FluidContainer)`
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-height: 64px;
|
||||
@media (min-width: 624px) {
|
||||
@media (min-width: 625px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
export const SearchInputWrapper = styled(CenteredFlex)<{ isOpen: boolean }>`
|
||||
max-width: 484px;
|
||||
margin: auto;
|
||||
${(props) =>
|
||||
!props.isOpen &&
|
||||
css`
|
||||
@media (max-width: 624px) {
|
||||
display: none;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
|
|
@ -15,6 +15,7 @@ interface Iprops {
|
|||
isFirstFetch: boolean;
|
||||
openUploader: () => void;
|
||||
isInSearchMode: boolean;
|
||||
setIsInSearchMode: (v: boolean) => void;
|
||||
collections: Collection[];
|
||||
files: EnteFile[];
|
||||
setActiveCollection: (id: number) => void;
|
||||
|
@ -29,6 +30,7 @@ export function GalleryNavbar({
|
|||
files,
|
||||
setActiveCollection,
|
||||
updateSearch,
|
||||
setIsInSearchMode,
|
||||
}: Iprops) {
|
||||
return (
|
||||
<NavbarBase>
|
||||
|
@ -40,7 +42,8 @@ export function GalleryNavbar({
|
|||
</FluidContainer>
|
||||
) : (
|
||||
<SearchBar
|
||||
isFirstFetch={isFirstFetch}
|
||||
isInSearchMode={isInSearchMode}
|
||||
setIsInSearchMode={setIsInSearchMode}
|
||||
collections={collections}
|
||||
files={getNonTrashedUniqueUserFiles(files)}
|
||||
setActiveCollection={setActiveCollection}
|
||||
|
|
|
@ -628,6 +628,7 @@ export default function Gallery() {
|
|||
<GalleryNavbar
|
||||
openSidebar={openSidebar}
|
||||
isFirstFetch={isFirstFetch}
|
||||
setIsInSearchMode={setIsInSearchMode}
|
||||
openUploader={openUploader}
|
||||
isInSearchMode={isInSearchMode}
|
||||
collections={collections}
|
||||
|
|
Loading…
Reference in a new issue