Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
C
coopwire-hypothesis
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
孙灵跃 Leon Sun
coopwire-hypothesis
Commits
0ac00386
Commit
0ac00386
authored
Jan 05, 2023
by
Lyza Danger Gardner
Committed by
Lyza Gardner
Jan 09, 2023
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Convert `AutocompleteList` to TS
parent
c9a34e59
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
40 additions
and
28 deletions
+40
-28
AutocompleteList.tsx
src/sidebar/components/AutocompleteList.tsx
+40
-28
No files found.
src/sidebar/components/AutocompleteList.
js
→
src/sidebar/components/AutocompleteList.
tsx
View file @
0ac00386
...
...
@@ -4,30 +4,45 @@ import { useMemo } from 'preact/hooks';
import
MenuArrow
from
'./MenuArrow'
;
/**
* @template T
* @param {T} item
*/
const
defaultListFormatter
=
item
=>
item
;
const
defaultListFormatter
=
<
Item
,
>
(item: Item) =
>
item;
/**
* @template T
* @typedef AutocompleteListProps
* @prop {number} [activeItem] - The index of the highlighted item.
* @prop {string} [id] - Optional unique HTML attribute id. This can be used
* for parent `aria-controls` coupling.
* @prop {string} [itemPrefixId] - Optional unique HTML attribute id prefix
* for each item in the list. The final value of each items' id is
* `{itemPrefixId}{activeItem}`
* @prop {T[]} list - The list of items to render. This can be a simple
* list of strings or a list of objects when used with listFormatter.
* @prop {(item: T, index?: number) => any} [listFormatter] - An optional formatter
* to render each item inside an <li> tag This is useful if the list is an array of
* objects rather than just strings.
* @prop {(item: T) => void} onSelectItem - Callback when an item is clicked with
* the mouse.
* @prop {boolean} [open] - Is the list open or closed?
*/
export type AutocompleteListProps
<
Item
>
=
{
/**
* The index of the highlighted item in the `list` of items. Defaults to `-1`
* (no item selected)
*/
activeItem
?:
number
;
/**
* Optional unique HTML attribute id. This can be used for parent
* `aria-controls` coupling.
*/
id
?:
string
;
/**
* Optional unique HTML attribute id prefix for each item in the list. The
* final value of each items' id is `{itemPrefixId}{activeItem}`
*/
itemPrefixId
?:
string
;
/**
* The list of items to render. This can be a simple list of strings or a list
* of objects when used with listFormatter.
*/
list
:
Item
[];
/**
* An optional formatter to render each item inside an <li> tag This is useful
* if the list is an array of objects rather than just strings.
*/
listFormatter
?:
(
item
:
Item
,
index
?:
number
)
=>
any
;
/** Callback when an item is clicked */
onSelectItem
:
(
item
:
Item
)
=>
void
;
/** Is the AutocompleteList currently open (visible)? */
open
?:
boolean
;
}
;
/**
* Custom autocomplete component. Use this in conjunction with an
<
input
>
field.
...
...
@@ -36,11 +51,8 @@ const defaultListFormatter = item => item;
* used by itself.
*
* Modeled after the "ARIA 1.1 Combobox with Listbox Popup"
*
* @template T
* @param {AutocompleteListProps<T>} props
*/
export
default
function
AutocompleteList
({
export default function AutocompleteList
<
Item
>
(
{
activeItem
=
-
1
,
id
,
itemPrefixId
,
...
...
@@ -48,7 +60,7 @@ export default function AutocompleteList({
listFormatter
=
defaultListFormatter
,
onSelectItem
,
open
=
false
,
})
{
}
: AutocompleteListProps
<
Item
>
)
{
const
items
=
useMemo
(()
=>
{
return
list
.
map
((
item
,
index
)
=>
{
// only add an id if itemPrefixId is passed
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment