CS_learn/tech-interview-handbook
1
0
Fork 0
mirror of https://github.com/yangshun/tech-interview-handbook.git synced 2026-02-03 02:24:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

[ui][typeahead] add isLoading prop

Browse Source
This commit is contained in:
Yangshun Tay
2022-11-06 10:30:07 +08:00
parent c0e9b6c138
commit be52ecc51b
1 changed files with 38 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
packages/ui/src/Typeahead/Typeahead.tsx
View File

@@ -3,7 +3,9 @@ import type { InputHTMLAttributes } from 'react';
import { useId } from 'react';
import { Fragment, useState } from 'react';
import { Combobox, Transition } from '@headlessui/react';
import { ChevronDownIcon } from '@heroicons/react/20/solid';
import { CheckIcon, ChevronDownIcon } from '@heroicons/react/20/solid';
import { Spinner } from '..';
export type TypeaheadOption = Readonly<{
// String value to uniquely identify the option.
@@ -27,6 +29,7 @@ type Attributes = Pick<
type Props = Readonly<{
errorMessage?: React.ReactNode;
isLabelHidden?: boolean;
isLoading?: boolean;
label: string;
// Minimum query length before any results will be shown.
minQueryLength?: number;
@@ -81,6 +84,7 @@ export default function Typeahead({
disabled = false,
errorMessage,
isLabelHidden,
isLoading = false,
label,
minQueryLength = 0,
noResultsMessage = 'No results',
@@ -163,14 +167,20 @@ export default function Typeahead({
}}
{...props}
/>
<Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronDownIcon
aria-hidden="true"
className="h-5 w-5 text-slate-400"
/>
</Combobox.Button>
{isLoading ? (
<div className="absolute inset-y-0 right-0 flex items-center pr-2">
<Spinner size="xs" />
</div>
) : (
<Combobox.Button className="absolute inset-y-0 right-0 flex items-center pr-2">
<ChevronDownIcon
aria-hidden="true"
className="h-5 w-5 text-slate-400"
/>
</Combobox.Button>
)}
</div>
{query.length >= minQueryLength && (
{query.length >= minQueryLength && !isLoading && (
<Transition
afterLeave={() => setQuery('')}
as={Fragment}
@@ -198,13 +208,26 @@ export default function Typeahead({
}
value={option}>
{({ selected }) => (
<span
className={clsx(
'block truncate',
selected ? 'font-medium' : 'font-normal',
)}>
{option.label}
</span>
<>
<span
className={clsx(
'block truncate',
selected && 'font-medium',
)}>
{option.label}
</span>
{selected && (
<span
className={clsx(
'absolute inset-y-0 right-0 flex items-center pr-4',
)}>
<CheckIcon
aria-hidden="true"
className="h-5 w-5"
/>
</span>
)}
</>
)}
</Combobox.Option>
))