Giter Site home page Giter Site logo

Comments (1)

augyg avatar augyg commented on June 2, 2024

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)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.