Combobox

NOTE: 'T in comboboxFilterConfig props must be a type or object that includes children and value properties. Using a type or object without these properties will cause Fui.useComboboxFilter to not filter correctly. children is the text/component that will appear for each option in the dropdown**, value is the text that will be used for the filtering based on user's input

open FS.FluentUI.V8toV9

type ComboboxOption<'U> = {
    children: 'U
    value: string
    disabled: bool
}

let mkOptionChild (s: string) =
    Fui.text [
        text.style [ style.color.orange ]
        text.text s
    ]

// `children` is the text that will appear for each option in the dropdown
// `value` is the text that will be used for the filtering based on user's input
let comboboxOptions = [
    {
        children = mkOptionChild "Alligator"
        value = "alligator"
        disabled = false
    }
    {
        children = mkOptionChild "Bee"
        value = "bee"
        disabled = false
    }
    {
        children = mkOptionChild "Bird"
        value = "bird"
        disabled = false
    }
    {
        children = mkOptionChild "Cheetah"
        value = "cheetah"
        disabled = false
    }
    {
        children = mkOptionChild "Dog"
        value = "dog"
        disabled = true
    }
    {
        children = mkOptionChild "Dolphin"
        value = "dolphin"
        disabled = false
    }
    {
        children = mkOptionChild "Ferret"
        value = "ferret"
        disabled = false
    }
    {
        children = mkOptionChild "Firefly"
        value = "firefly"
        disabled = false
    }
]

[<ReactComponent>]
let ComboBoxTest() =
    let selectedAnimals, setSelectedAnimals = React.useState [| |]
    let query, setQuery = React.useState ("")
    let children = Fui.useComboboxFilter(query, comboboxOptions, [
        comboboxFilterConfig.noOptionsMessage (
            Fui.text [
                text.style [ style.color "red"]
                text.text "No animals match your search"
            ]
        )
        // Always showing firefly when filtering
        comboboxFilterConfig.filter (fun value input -> value.Contains(input) || value = "text-firefly")
        comboboxFilterConfig.optionToText (fun (v: ComboboxOption<ReactElement>) -> $"text-{v.value}")
    ])

    Fui.stack [
        stack.horizontal false
        stack.children [
            Fui.label [
                label.id "comboBoxId"
                label.text "Best Pets"
            ]
            Fui.combobox [
                combobox.ariaLabelledBy "comboBoxId"
                combobox.selectedOptions selectedAnimals
                combobox.value (if query = "" then selectedAnimals |> String.concat ", " else query)
                combobox.placeholder "Select one or more animals"
                combobox.onTextChange (fun s -> setQuery s)
                combobox.onOptionSelect (fun (d: OptionOnSelectData ) ->
                    setSelectedAnimals d.selectedOptions
                    setQuery ""
                )
                combobox.children children
            ]
        ]
    ]