SpinButton

open FS.FluentUI.V8toV9

[<ReactComponent>]
let SpinButtonTest() =
    let id = Fui.useId(None, None)
    let value, setValue = React.useState(Some 0)
    let displayValue, setDisplayValue = React.useState("$0")
    Fui.stack [
        stack.horizontal true
        stack.children [
            Fui.label [
                label.htmlFor id
                label.text "Display Value"
            ]
            Fui.spinButton [
                spinButton.value value
                spinButton.displayValue displayValue
                spinButton.appearance.underline
                spinButton.incrementButton  [
                    button.icon (Fui.icon.arrowUpFilled [])
                    button.size.small
                ]
                spinButton.decrementButton [
                    button.icon (Fui.icon.arrowDownFilled [])
                    button.size.small
                ]
                spinButton.id id
                spinButton.step 9
                spinButton.onChange (fun (d: SpinButtonOnChangeData) ->
                    match d.value with
                    | None ->
                        setValue None
                        setDisplayValue "null"
                    | Some v ->
                        setValue (Some v)
                        setDisplayValue $"{v}"
                )
            ]
        ]
    ]