SpinButton

open FS.FluentUI.V8toV9

[<ReactComponent>]
let SpinButtonTest() =
    let id = Fui.useId(None, None)
    let value, setValue = 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.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
                    | Some v ->
                        if v % 9 = 0 then
                            setValue v
                    | None ->
                        if d.displayValue.ToCharArray() |> Array.forall Char.IsDigit then
                            if (d.displayValue |> int) % 9 = 0 then
                                (d.displayValue |> int) |> setValue
                )
            ]
        ]
    ]