Zaid-Ajaj / Feliz

A fresh retake of the React API in Fable and a collection of high-quality components to build React applications in F#, optimized for happiness
https://zaid-ajaj.github.io/Feliz/
MIT License
540 stars 78 forks source link

Add getOptions and debounce #487

Closed AlbertoDePena closed 2 years ago

AlbertoDePena commented 2 years ago

I tested it with this little module...

module Main

open Browser.Dom
open Elmish
open Elmish.React
open Feliz
open Feliz.Recharts
open Feliz.Markdown
open Feliz.PigeonMaps
open Feliz.Router
open Fable.Core.JsInterop
open Fable.SimpleHttp
open Zanaptak.TypedCssClasses
open Feliz.UseElmish
open Feliz.SelectSearch
open Fable.Core

type State = {
    Message: string
}

let init () =
    { Message = "Hello" }, Cmd.none

let update msg state =
    state, Cmd.none

let render (state: State) dispatch = 
    Html.div [
        prop.style [ style.width 400; style.padding 10 ]
        prop.children [
            SelectSearch.selectSearch [
                selectSearch.placeholder "Select an item"                
                selectSearch.search true     
                selectSearch.debounce 3000
                selectSearch.options (Seq.empty<SelectItem>)
                selectSearch.getOptions (fun query -> async {
                    console.log query

                    let items =
                        Seq.init 100 (fun index -> { value = index.ToString(); name = "Item " + index.ToString(); disabled = false })
                        |> Seq.filter (fun x -> x.name.Contains query)

                    return items 
                })
            ]
        ]
    ]

Program.mkProgram init update render
|> Program.withReactSynchronous "root"
|> Program.withConsoleTrace
|> Program.run
Zaid-Ajaj commented 2 years ago

Thank you @AlbertoDePena the feature has been merged and published as of Feliz.SelectSearch v1.7.0 🚀