@@ -2,33 +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
10−component ∷
11− ∀ a.
12− ReactComponent
13− ( { choice ∷ a
14− , choices ∷ Array a
15− , onChange ∷ Array a → Effect Unit
16− , toString ∷ a → String
17− , toValue ∷ a → String
18− }
19− )
11+type Props a =
12+ { choice ∷ a
13+ , choices ∷ Array a
14+ , onChange ∷ a → Effect Unit
15+ , toString ∷ a → String
16+ , toValue ∷ a → String
17+ }
18+
19+component ∷ ∀ a. ReactComponent (Props a)
2020component = unsafePerformEffect do
21− React.reactComponent "Select" \{ toString, toValue, choices } → React.do
22− pure $
23− div "input-container" Style.container
24− [ R.select'
25− </*
26− { className: "select"
27− , role: "listbox"
28− , css: Style.select
29− }
30− />
31− ( choices <#> \c → R.option' </ { value: toValue c } />
32− [ R.text $ toString c ]
33− )
34− ]
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+ ]