SolidOS/profile-pane#422 Implement async combobox options provider

Author: NoelDeMartin

src/components/combobox/Combobox.stories.ts

@@ -1,5 +1,6 @@
 import { html } from 'lit'
 import { defineStoryRender } from '@/storybook'
+import { defineAsyncComboboxOptionsProvider } from './Combobox'
 
 import '@/components/combobox-option'
 
@@ -10,45 +11,96 @@ const meta = {
   args: {
     label: 'What is the best food?',
     options: 'Pizza, Ramen, Tacos',
-    asyncOptions: false
+    asyncJSOptions: false,
+    asyncHtmlOptions: false,
   },
   argTypes: {
     label: { control: 'text' },
     options: { control: 'text' },
-    asyncOptions: { control: 'boolean' },
+    asyncJSOptions: { control: 'boolean' },
+    asyncHtmlOptions: { control: 'boolean' },
   },
 } as const
 
-const render = defineStoryRender<typeof meta.argTypes>(({ label, options, asyncOptions }) => {
-  const parsedOptions = options.split(',').map(option => option.trim())
+const pokemonProvider = defineAsyncComboboxOptionsProvider(async (query) => {
+  const response = await fetch('https://beta.pokeapi.co/graphql/v1beta', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      query: `
+        query searchPokemon($search: String!) {
+          pokemon_v2_pokemon(where: {name: {_ilike: $search}}, limit: 20) {
+            id
+            name
+          }
+        }
+      `,
+      variables: { search: `%${query}%` },
+    }),
+  })
+
+  const { data } = await response.json()
+
+  return data.pokemon_v2_pokemon.map(pokemon => ({
+    value: pokemon.id.toString(),
+    label: pokemon.name.charAt(0).toUpperCase() + pokemon.name.slice(1),
+  }))
+})
+
+const render = defineStoryRender<typeof meta.argTypes>(
+  ({ label, options, asyncJSOptions, asyncHtmlOptions }) => {
+    if (asyncJSOptions) {
+      return html`
+        <solid-ui-combobox
+          label="${label}"
+          .asyncOptionsProvider=${pokemonProvider}
+        ></solid-ui-combobox>
+      `
+    }
+
+    if (asyncHtmlOptions) {
+      return html`
+        <solid-ui-combobox
+          label="${label}"
+          async-options-url="https://api.disneyapi.dev/character?name=%search%"
+          async-options-results-field="data"
+          async-options-label-field="name"
+          async-options-value-field="_id"
+        ></solid-ui-combobox>
+      `
+    }
+
+    const parsedOptions = options.split(',').map((option) => option.trim())
 
-  if (asyncOptions) {
     return html`
-      <solid-ui-combobox
-        label="${label}"
-        async-options-url="https://api.disneyapi.dev/character?name=%search%"
-        async-options-results-field="data"
-        async-options-label-field="name"
-        async-options-value-field="_id"
-      ></solid-ui-combobox>
+      <solid-ui-combobox label="${label}">
+        ${parsedOptions.map(
+          (option) =>
+            html`<solid-ui-combobox-option value="${option}"
+              >${option}</solid-ui-combobox-option
+            >`
+        )}
+      </solid-ui-combobox>
     `
   }
-
-  return html`
-    <solid-ui-combobox label="${label}">
-      ${parsedOptions.map(option => html`<solid-ui-combobox-option value="${option}">${option}</solid-ui-combobox-option>`)}
-    </solid-ui-combobox>
-  `
-})
+)
 
 export default meta
 
 export const Primary = { render }
 
-export const Async = {
+export const AsyncWithJS = {
+  args: {
+    label: 'Who is the best Pokemon?',
+    asyncJSOptions: true,
+  },
+  render,
+}
+
+export const AsyncWithHtml = {
   args: {
     label: 'Who is the best Disney character?',
-    asyncOptions: true
+    asyncHtmlOptions: true,
   },
-  render
+  render,
 }

src/components/combobox/Combobox.ts

@@ -14,10 +14,16 @@ import styles from './Combobox.styles.css'
 
 class AsyncOptionsInfo extends Error {}
 
-type ComboboxOptionData = {
+export type ComboboxOptionData = {
   value: string;
   label: string | TemplateResult;
-  selectable: boolean;
+  selectable?: boolean;
+}
+
+export type AsyncComboboxOptionsProvider = (query: string) => Promise<ComboboxOptionData[]>
+
+export function defineAsyncComboboxOptionsProvider<T extends AsyncComboboxOptionsProvider> (provider: T): T {
+  return provider
 }
 
 @customElement('solid-ui-combobox')
@@ -52,6 +58,9 @@ export default class Combobox extends WebComponent {
   @property({ type: String, attribute: 'async-options-value-field' })
   accessor asyncOptionsValueField = ''
 
+  @property({ type: Function })
+  accessor asyncOptionsProvider: AsyncComboboxOptionsProvider | null = null
+
   @query('input')
   private accessor inputElement: HTMLInputElement | null = null
 
@@ -123,7 +132,7 @@ export default class Combobox extends WebComponent {
       this.displayValue = this.value
     }
 
-    if (changedProperties.has('asyncOptionsUrl')) {
+    if (changedProperties.has('asyncOptionsUrl') || changedProperties.has('asyncOptionsProvider')) {
       this.updateAsyncOptionsTask()
     }
   }
@@ -183,7 +192,7 @@ export default class Combobox extends WebComponent {
           @mousedown=${this.onListboxMouseDown}
         >
           ${options.map((option, index) => {
-            return option.selectable
+            return option.selectable !== false
               ? html`<div
                   id=${this.getOptionId(index)}
                   role="option"
@@ -243,7 +252,6 @@ export default class Combobox extends WebComponent {
     return Array.from(options).map((option) => ({
       value: option.value,
       label: option.textContent ?? '',
-      selectable: true,
     }))
   }
 
@@ -278,7 +286,7 @@ export default class Combobox extends WebComponent {
   }
 
   private updateAsyncOptionsTask () {
-    if (!this.asyncOptionsUrl) {
+    if (!this.asyncOptionsUrl && !this.asyncOptionsProvider) {
       this.asyncOptionsTask = undefined
 
       return
@@ -287,6 +295,16 @@ export default class Combobox extends WebComponent {
     this.asyncOptionsTask ??= new Task(
       this,
       async ([filter]) => {
+        if (this.asyncOptionsProvider) {
+          const results = await this.asyncOptionsProvider(filter)
+
+          if (results.length === 0) {
+            throw new AsyncOptionsInfo('No results found')
+          }
+
+          return results
+        }
+
         const response = await fetch(
           this.asyncOptionsUrl.replace('%search%', filter)
         )
@@ -307,7 +325,6 @@ export default class Combobox extends WebComponent {
         return results.map((result) => ({
           label: String(Object(result)[labelField]),
           value: String(Object(result)[valueField]),
-          selectable: true,
         }))
       },
       () => [this.debouncedFilter]

src/components/combobox/index.ts

@@ -1,4 +1,6 @@
-import Combobox from './Combobox'
+import Combobox, { defineAsyncComboboxOptionsProvider } from './Combobox'
+import type { AsyncComboboxOptionsProvider, ComboboxOptionData } from './Combobox'
 
-export { Combobox }
+export { Combobox, defineAsyncComboboxOptionsProvider }
+export type { AsyncComboboxOptionsProvider, ComboboxOptionData }
 export default Combobox