open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

expand search bar when typing on mobile

Browse Source
This commit is contained in:
mantikoros 2022-07-09 17:27:36 -04:00
parent 67a05c2f1b
commit 43b1096313
1 changed files with 34 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
web/components/contract-search.tsx
View File

@ -22,6 +22,7 @@ import { Spacer } from './layout/spacer'
import { ENV, IS_PRIVATE_MANIFOLD } from 'common/envs/constants' import { ENV, IS_PRIVATE_MANIFOLD } from 'common/envs/constants'
import { trackCallback } from 'web/lib/service/analytics' import { trackCallback } from 'web/lib/service/analytics'
import ContractSearchFirestore from 'web/pages/contract-search-firestore' import ContractSearchFirestore from 'web/pages/contract-search-firestore'
import { useWindowSize } from 'web/hooks/use-window-size'
const searchClient = algoliasearch( const searchClient = algoliasearch(
'GJQPAYENIF', 'GJQPAYENIF',
@ -104,6 +105,10 @@ export function ContractSearch(props: {
const indexName = `${indexPrefix}contracts-${sort}` const indexName = `${indexPrefix}contracts-${sort}`
const [isSearching, setIsSearching] = useState(false)
const { width } = useWindowSize()
const showOptions = !isSearching || (width ?? 0) >= 500
if (IS_PRIVATE_MANIFOLD || process.env.NEXT_PUBLIC_FIREBASE_EMULATE) { if (IS_PRIVATE_MANIFOLD || process.env.NEXT_PUBLIC_FIREBASE_EMULATE) {
return ( return (
<ContractSearchFirestore <ContractSearchFirestore
@ -122,29 +127,38 @@ export function ContractSearch(props: {
classNames={{ classNames={{
form: 'before:top-6', form: 'before:top-6',
input: '!pl-10 !input !input-bordered shadow-none w-[100px]', input: '!pl-10 !input !input-bordered shadow-none w-[100px]',
resetIcon: 'mt-2 hidden sm:flex', resetIcon: 'mt-2 sm:flex',
}} }}
onFocus={() => setIsSearching(true)}
onBlur={() => setIsSearching(false)}
/> />
<select
className="!select !select-bordered" {showOptions && (
value={filter} <>
onChange={(e) => setFilter(e.target.value as filter)} <select
onBlur={trackCallback('select search filter')} className="!select !select-bordered"
> value={filter}
<option value="open">Open</option> onChange={(e) => setFilter(e.target.value as filter)}
<option value="closed">Closed</option> onBlur={trackCallback('select search filter')}
<option value="resolved">Resolved</option> >
<option value="all">All</option> <option value="open">Open</option>
</select> <option value="closed">Closed</option>
{!hideOrderSelector && ( <option value="resolved">Resolved</option>
<SortBy <option value="all">All</option>
items={sortIndexes} </select>
classNames={{
select: '!select !select-bordered', {!hideOrderSelector && (
}} <SortBy
onBlur={trackCallback('select search sort')} items={sortIndexes}
/> classNames={{
select: '!select !select-bordered',
}}
onBlur={trackCallback('select search sort')}
/>
)}
</>
)} )}
<Configure <Configure
facetFilters={filters} facetFilters={filters}
numericFilters={numericFilters} numericFilters={numericFilters}