Comments (1)
here's the code I wrote to avoid this
`-- | TODO: take an element config for the options elements as well
-- | TODO: clean up and upstream to reflex-dom-contrib
dropdown'
:: ( MonadFix m
, DomBuilder t m
, Ord a
)
=> Map.Map a T.Text -- TODO: use NonEmpty
-> SelectElementConfig er t (DomBuilderSpace m)
-> m (Dynamic t a)
dropdown' options cfg' = mdo
let class' = "w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-[#00B9DA] font-[Sarabun] text-lg mb-5 bg-white"
let safeInitial = (snd . head $ Map.toList options)
-- if options == mempty
-- then ""
-- else
-- if _selectElementConfig_initialValue cfg == ""
-- then _selectElementConfig_initialValue cfg
-- else (snd . head $ Map.toList options)
let cfg = cfg'
& selectElementConfig_initialValue .~ safeInitial
& selectElementConfig_setValue .~ optionsEvent
& selectElementConfig_elementConfig . elementConfig_initialAttributes .~ ("class" =: class')
(selectEl, optionsEvent) <- selectElement cfg $ do
optionsEv <- mapM makeOpt $ fmap snd $ Map.toList options
pure $ leftmost optionsEv
let options' = Map.fromList $ fmap flipTup $ Map.toList options
pure $ fmap (\v -> fromJust $ Map.lookup v options') $ _selectElement_value selectEl
where
flipTup (a,b) = (b,a)
makeOpt optText = do
(e, _) <- elAttr' "option" ("value" =: optText) $ text optText
pure $ optText <$ domEvent Click e
dropdownWithDefault
:: ( MonadFix m
, DomBuilder t m
, Ord a
)
=> Map.Map a T.Text
-> T.Text
-> SelectElementConfig er t (DomBuilderSpace m)
-> m (Dynamic t a)
dropdownWithDefault options start cfg' = mdo
let class' = "w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:border-[#00B9DA] font-[Sarabun] text-lg mb-5 bg-white"
let safeInitial = start -- (snd . head $ Map.toList options)
let cfg = cfg'
& selectElementConfig_initialValue .~ safeInitial
& selectElementConfig_setValue .~ optionsEvent
& selectElementConfig_elementConfig . elementConfig_initialAttributes .~ ("class" =: class')
(selectEl, optionsEvent) <- selectElement cfg $ do
optionsEv <- mapM makeOpt $ fmap snd $ Map.toList options
pure $ leftmost optionsEv
let options' = Map.fromList $ fmap flipTup $ Map.toList options
pure $ fmap (\v -> fromJust $ Map.lookup v options') $ _selectElement_value selectEl
where
flipTup (a,b) = (b,a)
makeOpt optText = do
(e, _) <- elAttr' "option" ("value" =: optText) $ text optText
pure $ optText <$ domEvent Click e
`
from reflex-dom.
Related Issues (20)
- Is MountableDomBuilder a deadcode
- Checked property doesn't work correctly for radio inputs
- `inputElement` initial value does not show and `setValue` does not work for custom event HOT 2
- Building on Windows.
- Support multiple form data values to be associated with the same name
- Error building release.nix: bitbucket.org/wuzzeb/webdriver-utils/get/a8b1552... returns 404 HOT 3
- sortableList.hs example outdated
- How to set focus of an element HOT 6
- reflex-dom-core is not compatible with patch >= 0.0.5.0 HOT 2
- implement _*ElementConfig_setFocus HOT 1
- How to debug: jsaddle requests: 101 pending
- Support GHC 9.2.3
- play method of audio element HOT 2
- Missing HTTP headers get reported as the empty string
- reflex-dom 0.6.3.1 uses unreleasead reflex-dom-core function HOT 1
- No link between an XHR response and its request HOT 2
- Integrating reflex-dom with Yesod
- support for ghc-9.4/9.6? HOT 3
- Getting raw element question HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from reflex-dom.