Add virtualized empty state example
This commit is contained in:
Jordan Pittman
@@ -0,0 +1,159 @@
|
||||
import { Combobox } from '@headlessui/react'
|
||||
import { useRef, useState } from 'react'
|
||||
import { classNames } from '../../utils/class-names'
|
||||
|
||||
import { Button } from '../../components/button'
|
||||
|
||||
type Option = {
|
||||
name: string
|
||||
disabled: boolean
|
||||
empty?: boolean
|
||||
}
|
||||
|
||||
export default function Home() {
|
||||
let [list, setList] = useState<Option[]>(() => [
|
||||
{name: 'Alice', disabled: false},
|
||||
{name: 'Bob', disabled: false},
|
||||
{name: 'Charlie', disabled: false},
|
||||
{name: 'David', disabled: false},
|
||||
{name: 'Eve', disabled: false},
|
||||
{name: 'Fred', disabled: false},
|
||||
{name: 'George', disabled: false},
|
||||
{name: 'Helen', disabled: false},
|
||||
{name: 'Iris', disabled: false},
|
||||
{name: 'John', disabled: false},
|
||||
{name: 'Kate', disabled: false},
|
||||
{name: 'Linda', disabled: false},
|
||||
{name: 'Michael', disabled: false},
|
||||
{name: 'Nancy', disabled: false},
|
||||
{name: 'Oscar', disabled: true},
|
||||
{name: 'Peter', disabled: false},
|
||||
{name: 'Quentin', disabled: false},
|
||||
{name: 'Robert', disabled: false},
|
||||
{name: 'Sarah', disabled: false},
|
||||
{name: 'Thomas', disabled: false},
|
||||
{name: 'Ursula', disabled: false},
|
||||
{name: 'Victor', disabled: false},
|
||||
{name: 'Wendy', disabled: false},
|
||||
{name: 'Xavier', disabled: false},
|
||||
{name: 'Yvonne', disabled: false},
|
||||
{name: 'Zachary', disabled: false},
|
||||
])
|
||||
|
||||
let emptyOption = useRef({ name: 'No results', disabled: true, empty: true })
|
||||
|
||||
let [query, setQuery] = useState('')
|
||||
let [selectedPerson, setSelectedPerson] = useState<Option | null>(list[0])
|
||||
let optionsRef = useRef<HTMLUListElement | null>(null)
|
||||
|
||||
let filtered =
|
||||
query === ''
|
||||
? list
|
||||
: list.filter((item) => item.name.toLowerCase().includes(query.toLowerCase()))
|
||||
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-fit">
|
||||
<div className="py-8 font-mono text-xs">Selected person: {selectedPerson?.name ?? "N/A"}</div>
|
||||
<Combobox
|
||||
virtual={{
|
||||
options: filtered.length > 0 ? filtered : [emptyOption.current],
|
||||
disabled: (option) => option.disabled || option.empty,
|
||||
}}
|
||||
value={selectedPerson}
|
||||
nullable
|
||||
onChange={(value) => {
|
||||
setSelectedPerson(value)
|
||||
setQuery('')
|
||||
}}
|
||||
as="div"
|
||||
>
|
||||
<Combobox.Label className="block text-sm font-medium leading-5 text-gray-700">
|
||||
Person
|
||||
</Combobox.Label>
|
||||
|
||||
<div className="relative">
|
||||
<span className="relative inline-flex flex-row overflow-hidden rounded-md border shadow-sm">
|
||||
<Combobox.Input
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
displayValue={(option: Option | null) => option?.name ?? ''}
|
||||
className="border-none px-3 py-1 outline-none"
|
||||
/>
|
||||
<Combobox.Button as={Button}>
|
||||
<span className="pointer-events-none flex items-center px-2">
|
||||
<svg
|
||||
className="h-5 w-5 text-gray-400"
|
||||
viewBox="0 0 20 20"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
>
|
||||
<path
|
||||
d="M7 7l3-3 3 3m0 6l-3 3-3-3"
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</Combobox.Button>
|
||||
</span>
|
||||
|
||||
<div className="absolute mt-1 w-full rounded-md bg-white shadow-lg">
|
||||
<Combobox.Options
|
||||
ref={optionsRef}
|
||||
className={classNames(
|
||||
"shadow-xs max-h-60 rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5",
|
||||
filtered.length === 0 ? 'overflow-hidden' : 'overflow-auto'
|
||||
)}
|
||||
>
|
||||
{
|
||||
({ option }: { option: Option }) => {
|
||||
if (option.empty) {
|
||||
return (
|
||||
<Combobox.Option
|
||||
// TODO: `disabled` being required is a bug
|
||||
disabled
|
||||
// Note: Do NOT use `null` for the `value`
|
||||
value={option}
|
||||
className="relative w-full cursor-default select-none py-2 px-3 focus:outline-none text-center"
|
||||
>
|
||||
<div className="grid grid-cols-1 grid-rows-1 h-full relative">
|
||||
<div className="absolute inset-0">
|
||||
<svg fill="none" viewBox="0 0 24 24" strokeWidth={0.5} stroke="currentColor" className="text-gray-500/5 -translate-y-1/4">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="z-20 col-start-1 row-start-1 col-span-full row-span-full p-8 flex flex-col justify-center items-center">
|
||||
<h3 className="mx-2 text-xl text-gray-400 font-semibold">No people found</h3>
|
||||
</div>
|
||||
</div>
|
||||
</Combobox.Option>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<Combobox.Option
|
||||
// TODO: `disabled` being required is a bug
|
||||
disabled={option.disabled}
|
||||
value={option}
|
||||
className={({ active }) => {
|
||||
return classNames(
|
||||
'relative w-full cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
|
||||
active ? 'bg-indigo-600 text-white' : 'text-gray-900'
|
||||
)
|
||||
}}
|
||||
>
|
||||
<span className='block truncate'>
|
||||
{option.name}
|
||||
</span>
|
||||
</Combobox.Option>
|
||||
)
|
||||
}
|
||||
}
|
||||
</Combobox.Options>
|
||||
</div>
|
||||
</div>
|
||||
</Combobox>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user