mirror of
https://github.com/rowtype-yoga/ry-blocks.git
synced 2024-09-11 21:38:06 +03:00
Make select work I guess
This commit is contained in:
parent
30e091a2ae
commit
3d2ba60f96
@ -2,32 +2,39 @@ module Yoga.Block.Atom.Select.View where
|
||||
|
||||
import Yoga.Prelude.View
|
||||
|
||||
import Data.Array as Array
|
||||
import Effect.Unsafe (unsafePerformEffect)
|
||||
import Yoga.Block.Atom.Select.Style as Style
|
||||
import React.Basic.DOM as R
|
||||
import React.Basic.Hooks as React
|
||||
import Yoga.Block.Atom.Select.Style as Style
|
||||
|
||||
type Props a =
|
||||
{ choice ∷ a
|
||||
, choices ∷ Array a
|
||||
, onChange ∷ Array a → Effect Unit
|
||||
, onChange ∷ a → Effect Unit
|
||||
, toString ∷ a → String
|
||||
, toValue ∷ a → String
|
||||
}
|
||||
|
||||
component ∷ ∀ a. ReactComponent (Props a)
|
||||
component = unsafePerformEffect do
|
||||
React.reactComponent "Select" \{ toString, toValue, choices } → React.do
|
||||
pure $
|
||||
div "input-container" Style.container
|
||||
[ R.select'
|
||||
</*
|
||||
{ className: "select"
|
||||
, role: "listbox"
|
||||
, css: Style.select
|
||||
}
|
||||
/>
|
||||
( choices <#> \c → R.option' </ { value: toValue c } />
|
||||
[ R.text $ toString c ]
|
||||
)
|
||||
]
|
||||
React.reactComponent "Select" \{ toString, toValue, choices, onChange } →
|
||||
React.do
|
||||
pure $
|
||||
div "input-container" Style.container
|
||||
[ R.select'
|
||||
</*
|
||||
{ className: "select"
|
||||
, role: "listbox"
|
||||
, css: Style.select
|
||||
, onChange: handler targetValue
|
||||
\maybeVal → traverse_ onChange do
|
||||
val ← maybeVal
|
||||
choices # Array.find (toString >>> (_ == val))
|
||||
|
||||
}
|
||||
/>
|
||||
( choices <#> \c → R.option' </ { value: toValue c } />
|
||||
[ R.text $ toString c ]
|
||||
)
|
||||
]
|
||||
|
Loading…
Reference in New Issue
Block a user