@@ -2,32 +2,39 @@ module Yoga.Block.Atom.Select.View where
22
33import Yoga.Prelude.View
44
5+import Data.Array as Array
56import Effect.Unsafe (unsafePerformEffect)
6−import Yoga.Block.Atom.Select.Style as Style
77import React.Basic.DOM as R
88import React.Basic.Hooks as React
9+import Yoga.Block.Atom.Select.Style as Style
910
1011type Props a =
1112 { choice ∷ a
1213 , choices ∷ Array a
13− , onChange ∷ Array a → Effect Unit
14+ , onChange ∷ a → Effect Unit
1415 , toString ∷ a → String
1516 , toValue ∷ a → String
1617 }
1718
1819component ∷ ∀ a. ReactComponent (Props a)
1920component = unsafePerformEffect do
20− React.reactComponent "Select" \{ toString, toValue, choices } → React.do
21− pure $
22− div "input-container" Style.container
23− [ R.select'
24− </*
25− { className: "select"
26− , role: "listbox"
27− , css: Style.select
28− }
29− />
30− ( choices <#> \c → R.option' </ { value: toValue c } />
31− [ R.text $ toString c ]
32− )
33− ]
21+ React.reactComponent "Select" \{ toString, toValue, choices, onChange } →
22+ React.do
23+ pure $
24+ div "input-container" Style.container
25+ [ R.select'
26+ </*
27+ { className: "select"
28+ , role: "listbox"
29+ , css: Style.select
30+ , onChange: handler targetValue
31+ \maybeVal → traverse_ onChange do
32+ val ← maybeVal
33+ choices # Array.find (toString >>> (_ == val))
34+
35+ }
36+ />
37+ ( choices <#> \c → R.option' </ { value: toValue c } />
38+ [ R.text $ toString c ]
39+ )
40+ ]