module Component.Input ( InputIn(..) , InputOut(..) , input ) where import qualified Data.Map as M import Data.Text (Text) import qualified Data.Text as T import Reflex.Dom (Dynamic, Event, MonadWidget, (&), (.~)) import qualified Reflex.Dom as R import Component.Button (ButtonIn (..), ButtonOut (..)) import qualified Component.Button as Button import qualified Icon data InputIn t a b = InputIn { _inputIn_reset :: Event t a , _inputIn_label :: Text } data InputOut t = InputOut { _inputOut_value :: Dynamic t Text , _inputOut_enter :: Event t () } input :: forall t m a b. MonadWidget t m => InputIn t a b -> m (InputOut t) input inputIn = R.divClass "textInput" $ do rec let resetValue = R.leftmost [ fmap (const "") (_inputIn_reset inputIn) , fmap (const "") (_buttonOut_clic reset) ] attributes = R.ffor value (\v -> if T.null v then M.empty else M.singleton "class" "filled") value = R._textInput_value textInput textInput <- R.textInput $ R.def & R.attributes .~ attributes & R.setValue .~ resetValue R.el "label" $ R.text (_inputIn_label inputIn) reset <- Button.button $ ButtonIn { _buttonIn_class = R.constDyn "reset" , _buttonIn_content = Icon.cross , _buttonIn_waiting = R.never } let enter = fmap (const ()) $ R.ffilter ((==) 13) . R._textInput_keypress $ textInput return $ InputOut { _inputOut_value = value , _inputOut_enter = enter }