git.iko.soy/rowtype-yoga/ry-blocks
on main help sign in
swap
b097d444 ahead, 0 behind
src/Yoga/Block.purs+7
since splitsnapshots
unifiedsplit
@@ -10,6 +10,7 @@ import Yoga.Block.Atom.Icon as Icon
10import Yoga.Block.Atom.Image as Image
10import Yoga.Block.Atom.Image as Image
11import Yoga.Block.Atom.Input as Input
11import Yoga.Block.Atom.Input as Input
12import Yoga.Block.Atom.Range as Range
12import Yoga.Block.Atom.Range as Range
13+import Yoga.Block.Atom.Select as Select
13import Yoga.Block.Atom.Segmented as Segmented
14import Yoga.Block.Atom.Segmented as Segmented
14import Yoga.Block.Atom.Toggle as Toggle
15import Yoga.Block.Atom.Toggle as Toggle
15import Yoga.Block.Container as Container
16import Yoga.Block.Container as Container
@@ -152,6 +153,12 @@ layer = React.element layer'
152range ∷ ∀ p q. Union p q Range.Props ⇒ ReactComponent { | p }
153range ∷ ∀ p q. Union p q Range.Props ⇒ ReactComponent { | p }
153range = Range.component
154range = Range.component
154
155
156+select' ∷ ∀ a. ReactComponent (Select.Props a)
157+select' = Select.component
158+
159+select ∷ ∀ a. (Select.Props a) → JSX
160+select = React.element select'
161+
155segmented' ∷ ReactComponent Segmented.Props
162segmented' ∷ ReactComponent Segmented.Props
156segmented' = Segmented.component
163segmented' = Segmented.component
157
164
src/Yoga/Block/Atom/Select/View.purs+31−25
@@ -2,33 +2,39 @@ module Yoga.Block.Atom.Select.View where
2
2
3import Yoga.Prelude.View
3import Yoga.Prelude.View
4
4
5+import Data.Array as Array
5import Effect.Unsafe (unsafePerformEffect)
6import Effect.Unsafe (unsafePerformEffect)
6−import Yoga.Block.Atom.Select.Style as Style
7import React.Basic.DOM as R
7import React.Basic.DOM as R
8import React.Basic.Hooks as React
8import React.Basic.Hooks as React
9+import Yoga.Block.Atom.Select.Style as Style
9
10
10−component ∷
11+type Props a =
11− ∀ a.
12− ReactComponent
13− ( { choice ∷ a
12+ { choice ∷ a
14− , choices ∷ Array a
13+ , choices ∷ Array a
15− , onChange ∷ Array a → Effect Unit
14+ , onChange ∷ a → Effect Unit
16− , toString ∷ a → String
15+ , toString ∷ a → String
17− , toValue ∷ a → String
16+ , toValue ∷ a → String
18− }
17+ }
19− )
18+
19+component ∷ ∀ a. ReactComponent (Props a)
20component = unsafePerformEffect do
20component = unsafePerformEffect do
21− React.reactComponent "Select" \{ toString, toValue, choices } → React.do
21+ React.reactComponent "Select" \{ toString, toValue, choices, onChange } →
22− pure $
22+ React.do
23+ pure $
23− div "input-container" Style.container
24+ div "input-container" Style.container
24− [ R.select'
25+ [ R.select'
25− </*
26+ </*
26− { className: "select"
27+ { className: "select"
27− , role: "listbox"
28+ , role: "listbox"
28− , css: Style.select
29+ , css: Style.select
30+ , onChange: handler targetValue
31+ \maybeVal → traverse_ onChange do
32+ val ← maybeVal
33+ choices # Array.find (toString >>> (_ == val))
34+
29− }
35+ }
30− />
36+ />
31− ( choices <#> \c → R.option' </ { value: toValue c } />
37+ ( choices <#> \c → R.option' </ { value: toValue c } />
32− [ R.text $ toString c ]
38+ [ R.text $ toString c ]
33− )
39+ )
34− ]
40+ ]