WIP Rewrite AutoComplete

[Zaid-Ajaj]

Starting to rewrite AutoComplete, the types are too complicated and using them becomes really messy

Solution: using static members that allow for overloading to define props of the element, this way for example, makes dataSource very flexible (see below) instead of using cluttered api

    type IDataSourceItem = interface end

    /// Defines a data source item by value 
    static member DataSourceItem(value: string) = unbox<IDataSourceItem> (value)
    /// Defines a data source item by value and display text
    static member DataSourceItem(value: string, text: string) = 
        let dataSourceItem = obj()
        Common.setProp "value" value dataSourceItem
        Common.setProp "text" text dataSourceItem
        unbox<IDataSourceItem> dataSourceItem 
    /// Specifies the data source for the auto-complete 
    static member DataSource([<ParamArray>] values: string array) = 
        unbox<IProp> ("dataSource", values) 
    /// Specifies the data source for the auto-complete 
    static member DataSource(values: string list) = 
        let valuesAsArray = Array.ofList values
        unbox<IProp> ("dataSource", valuesAsArray) 
    /// Data source for the auto complete as a list of elements
    static member DataSource(elements: ReactElement list) = 
        unbox<IProp>("dataSource", Array.ofList elements)

    /// Specifies the data source for the auto-complete 
    static member DataSource(values: IDataSourceItem list) = 
        let valuesAsArray = Seq.toArray values
        unbox<IProp> ("dataSource", valuesAsArray) 

I also started rewriting the demo's of AutoComplete because they don't show how the dataSource is being updated, for now, only Basic is included as a full demo:

type State = {
    TextInput: string
    Suggested: string list  
    Selected : string option
}

type Msg = 
    | UpdateInput of string
    | Selected of string 

let init() = 
    { TextInput = ""
      Suggested = [ ]
      Selected = None }, Cmd.none

let update msg state = 
    match msg with 
    | UpdateInput input -> 
        let concat = String.concat ""
        let suggested = 
          match input with
          | "" -> [ ]
          | _  -> [ input; 
                    concat [input; input]
                    concat [input; input; input] ] 

        { state with 
            TextInput = input;
            Suggested = suggested  }, Cmd.none

    | Selected value -> 
        { state with Selected = Some value }, Cmd.none

let view state (dispatch: Msg -> unit) = 
    AutoComplete.autoComplete [
        AutoComplete.DataSource state.Suggested
        Style [ Width  200 ]
        DefaultValue state.TextInput
        AutoComplete.OnSelect (Selected >> dispatch)
        AutoComplete.OnSearch (UpdateInput >> dispatch)
        Placeholder "input here"
    ] []

You can also help me out (if you have the time to) with building the complete set of demos with full example (state, update, view)

This is not ready to merge, still work in progress...

[evilz]

Thanks thanks thanks !!!

As you may understand I do not have Time for this actualy. But I Can take time merge test and publish.

Just tell me when you think it's ready.

I Can give you rights on my repo if you want.

[Zaid-Ajaj]

I understand what you mean, life is busy. If you would help me just with the publishing, that would be great, I am planning on putting more effort into this library and will probably ask more community users to help too

I Can give you rights on my repo if you want.

If you don't mind that, it would be really helpful! So I can merge when I finish with something and you publish :smile: