KumaChan/support/examples/rx/computed.km

import window from '../ui/web/window';

do { window::mount Root };

function FloatInput:
    &(Reactive[Maybe[NormalFloat]]) => ui::Component
    &(value) =>
        \ buf := use { ui::State::[String] '' },
        \ use { ui::Effect
            \ content := connect buf,
            (value <- { parse-float content }) },
        { ui::Input buf };

const Root: ui::Component :=
    let container := { ui::StyledContainer ['container'] },
    let row := { ui::StyledContainer ['row'] },
    \ price := use { ui::State { Some 0.0 } },
    \ quantity := use { ui::State { Some 0.0 } },
    let total :=
        \ (p?, q?) := Computed (price.{watch}, quantity.{watch}),
        \ (p, q) := Maybe (p?, q?),
        (p * q),
    { container [
        { row [ { ui::Label 'Price:' }, { FloatInput price } ] },
        { row [ { ui::Label 'Quantity:' }, { FloatInput quantity } ] },
        { ui::Label
            \ total? := map total,
            \ total := consume (total?, 'invalid input'),
            { "Total = ?" total.{String} }
        }
    ] };