How to do Higher Order Components? about fable-react HOT 7 CLOSED

module App.Types

open Fable.Core
open Elmish

type Feature = {
    Id: string
    Name: string
    State: string
    Tags: string list
    Link: string
}

type Model = Feature list

type Msg =
| LoadFeatures
| FeaturesLoaded of Feature list
| Sync
| Reorder of (string * int)

// Types of https://github.com/clauderic/react-sortable-hoc/

type [<Pojo>] SortEnd = {
    oldIndex: int;
    newIndex: int;
}

type [<Pojo>] SortableContainerProp<'t> = {
    axis: string;
    lockAxis: string;
    helperClass: string;
    onSortEnd: SortEnd -> unit
    items: 't list
}

type [<Pojo>] SortableContainerInput<'t> = {
    items:'t list
}

type [<Pojo>] SortableElementProp<'t> = {
    index: int;
    key: obj;
    value: 't;
}

type [<Pojo>] SortableElementInput<'t> = {
    value: 't;
    index: int;
}

module App.View

open Fable.Core.JsInterop
open Fable.Helpers.React.Props
module R = Fable.Helpers.React
open Types
open Fable.Import
open Fable.Core

let SortableContainer<'t>(render: SortableContainerInput<'t> -> React.ReactElement): React.ComponentClass<SortableContainerProp<'t>> = import "SortableContainer" "react-sortable-hoc"
let SortableElement<'t>(render: SortableElementInput<'t> -> React.ReactElement): React.ComponentClass<SortableElementProp<'t>> = import "SortableElement" "react-sortable-hoc"

let getStateColor state =
  match state with
  | "Active" -> "has-text-info"
  | "Resolved" -> "has-text-warning"
  | "New" -> "has-text-grey"
  | _ -> "has-text-black"

let FeatureRow = SortableElement(fun (props:SortableElementInput<Feature>) -> 
  let feature = props.value
  let tags = 
    feature.Tags
    |> List.map (fun tag -> R.span [ClassName "tag"] [R.str tag])

  R.tr [] [
    R.td [] [R.ofInt props.index]
    R.td [] [R.span [getStateColor feature.State |> ClassName] [R.str feature.State]]
    R.td [] [R.str feature.Name]
    R.td [] [R.div [ClassName "tags"] tags ]
    R.td [] [R.a [Target "blank"; Href feature.Link] [feature.Id  |> R.str]]
  ]
)

let FeatureTable = SortableContainer(fun (props:SortableContainerInput<Feature>) ->
  let rows =
    props.items 
    |> List.mapi (fun idx feature ->
      R.from FeatureRow {key = idx; index = idx; value = feature} []
    )

  R.table [ClassName "table is-fullwidth is-hoverable"] [
    R.thead [] [
      R.tr [] [
        R.th [] [R.str "No."]
        R.th [] [R.str "State"]
        R.th [] [R.str "Name"]
        R.th [] [R.str "Tags"]
        R.th [] [R.str "Open"]
      ]
    ]
    R.tbody [] rows
  ]
)

let view model dispatch =
  let onSortEnd (input:SortEnd) =
    printfn "sort ended, %A" input

  R.div [] [
    R.div [ClassName "has-text-right"; Id "commandbar"] [
      R.button [ClassName "button is-primary"] [R.str "Refresh"]
      R.from FeatureTable { axis = "y"; lockAxis = "y"; helperClass = ""; onSortEnd = onSortEnd; items = model } []
    ]
  ]

[<Pojo>]
type SliderProps =
  { min: int
    max: int
    step: int
    defaultValue: int }

let inline slider (props : SliderProps) (elems : ReactElement list) : ReactElement =
  ofImport "default" "rc-slider" props elems

let createSliderWithTooltip (render: SliderProps -> ReactElement list -> ReactElement) : ComponentClass<SliderProps> =
  import "createSliderWithTooltip" "rc-slider"

let SliderWithTooltip = createSliderWithTooltip slider

let root model dispatch =
  ...
              div
                [ ClassName "column is-three-fifths"]
                [ from SliderWithTooltip { min = 1; max = 10; step = 1; defaultValue = 2; } [] ]

let createSliderWithTooltip : obj = importMember "rc-slider"

open Fable.Import.React
open Fable.Helpers.React

let SortableContainer<'Props>(render: 'Props -> ReactElement): ComponentClass<'Props> = import "SortableContainer" "react-sortable-hoc"

let SortableList = SortableContainer(fun props -> failwith "render element")

// Code to render the element
from SortableList myProps []

type SliderProps =
  | Min of int
  | Max of int
  | Step of int
  | DefaultValue of int

let inline slider (props : SliderProps list) (elems : ReactElement list) : ReactElement =
    ofImport "default" "rc-slider" (keyValueList CaseRules.LowerFirst props) elems

let root model dispatch =
  ...
              div
                [ ClassName "column is-three-fifths"]
                [ slider [ Min 1; Max 10; DefaultValue 1; ] [] ]
  ...

let inline slider (props : SliderProps list) (elems : ReactElement list) : ReactElement =
  ofImport "default" "rc-slider" (keyValueList CaseRules.LowerFirst props) elems

let createSliderWithTooltip (el : ReactElement) : ReactElement =
  importMember "rc-slider"

let root model dispatch =
  ...
              div
                [ ClassName "column is-three-fifths"]
                [ createSliderWithTooltip ( slider [ Min 1; Max 10; DefaultValue 1; ] [] ) ]