@@ -2,39 +2,33 @@ module Yoga.Block.Atom.Select.View where
22
33import Yoga.Prelude.View
44
5−import Data.Array as Array
65import 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
109
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)
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+ )
2020component = unsafePerformEffect do
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− ]
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+ ]