{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE MultilineStrings #-}
{-# LANGUAGE RecordWildCards #-}
module Miso.UI.Input
(
InputProps (..)
, defaultInputProps
, input_
, inputSample
, inputCodeSample
, inputPropsApi
) where
import Miso
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
data InputProps action
= InputProps
{ forall action. InputProps action -> MisoString
inputType :: MisoString
, forall action. InputProps action -> Maybe MisoString
inputId :: Maybe MisoString
, forall action. InputProps action -> Maybe MisoString
inputPlaceholder :: Maybe MisoString
, forall action. InputProps action -> Maybe MisoString
inputValue :: Maybe MisoString
, forall action. InputProps action -> Bool
inputDisabled :: Bool
, forall action. InputProps action -> Bool
inputInvalid :: Bool
, forall action. InputProps action -> [MisoString]
inputClasses :: [MisoString]
, forall action. InputProps action -> [Attribute action]
inputAttrs :: [Attribute action]
}
defaultInputProps :: InputProps action
defaultInputProps :: forall action. InputProps action
defaultInputProps
= InputProps
{ inputType :: MisoString
inputType = MisoString
"text"
, inputId :: Maybe MisoString
inputId = Maybe MisoString
forall a. Maybe a
Nothing
, inputPlaceholder :: Maybe MisoString
inputPlaceholder = Maybe MisoString
forall a. Maybe a
Nothing
, inputValue :: Maybe MisoString
inputValue = Maybe MisoString
forall a. Maybe a
Nothing
, inputDisabled :: Bool
inputDisabled = Bool
False
, inputInvalid :: Bool
inputInvalid = Bool
False
, inputClasses :: [MisoString]
inputClasses = []
, inputAttrs :: [Attribute action]
inputAttrs = []
}
input_ :: InputProps action -> View model action
input_ :: forall action model. InputProps action -> View model action
input_ InputProps {Bool
[MisoString]
[Attribute action]
Maybe MisoString
MisoString
inputType :: forall action. InputProps action -> MisoString
inputId :: forall action. InputProps action -> Maybe MisoString
inputPlaceholder :: forall action. InputProps action -> Maybe MisoString
inputValue :: forall action. InputProps action -> Maybe MisoString
inputDisabled :: forall action. InputProps action -> Bool
inputInvalid :: forall action. InputProps action -> Bool
inputClasses :: forall action. InputProps action -> [MisoString]
inputAttrs :: forall action. InputProps action -> [Attribute action]
inputType :: MisoString
inputId :: Maybe MisoString
inputPlaceholder :: Maybe MisoString
inputValue :: Maybe MisoString
inputDisabled :: Bool
inputInvalid :: Bool
inputClasses :: [MisoString]
inputAttrs :: [Attribute action]
..} = [Attribute action] -> View model action
forall action model. [Attribute action] -> View model action
H.input_ ([Attribute action] -> View model action)
-> [Attribute action] -> View model action
forall a b. (a -> b) -> a -> b
$ [[Attribute action]] -> [Attribute action]
forall (t :: * -> *) a. Foldable t => t [a] -> [a]
concat
[ [ [MisoString] -> Attribute action
forall action. [MisoString] -> Attribute action
P.classes_ (MisoString
"input" MisoString -> [MisoString] -> [MisoString]
forall a. a -> [a] -> [a]
: [MisoString]
inputClasses)
, MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.type_ MisoString
inputType
]
, [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.id_ MisoString
i | Just MisoString
i <- [Maybe MisoString
inputId] ]
, [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.placeholder_ MisoString
p | Just MisoString
p <- [Maybe MisoString
inputPlaceholder] ]
, [ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.value_ MisoString
v | Just MisoString
v <- [Maybe MisoString
inputValue] ]
, [ Attribute action
forall action. Attribute action
P.disabled_ | Bool
inputDisabled ]
, [ MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"invalid" MisoString
"true" | Bool
inputInvalid ]
, [Attribute action]
inputAttrs
]
inputSample :: View model action
inputSample :: forall model action. View model action
inputSample =
[Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
[ MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"flex flex-col gap-y-4" ]
([View model action] -> View model action)
-> [View model action] -> View model action
forall a b. (a -> b) -> a -> b
$ [ InputProps action -> View model action
forall action model. InputProps action -> View model action
input_ InputProps action
forall action. InputProps action
defaultInputProps { inputPlaceholder = Just "Text" }
, InputProps action -> View model action
forall action model. InputProps action -> View model action
input_ InputProps action
forall action. InputProps action
defaultInputProps { inputPlaceholder = Just "Disabled", inputDisabled = True }
, InputProps action -> View model action
forall action model. InputProps action -> View model action
input_ InputProps action
forall action. InputProps action
defaultInputProps { inputPlaceholder = Just "Error", inputInvalid = True }
, InputProps action -> View model action
forall action model. InputProps action -> View model action
input_ InputProps action
forall action. InputProps action
defaultInputProps { inputType = "email", inputPlaceholder = Just "Email" }
, InputProps action -> View model action
forall action model. InputProps action -> View model action
input_ InputProps action
forall action. InputProps action
defaultInputProps { inputType = "password", inputPlaceholder = Just "Password" }
, InputProps action -> View model action
forall action model. InputProps action -> View model action
input_ InputProps action
forall action. InputProps action
defaultInputProps { inputType = "number", inputPlaceholder = Just "Number" }
, InputProps action -> View model action
forall action model. InputProps action -> View model action
input_ InputProps action
forall action. InputProps action
defaultInputProps { inputType = "file" }
, InputProps action -> View model action
forall action model. InputProps action -> View model action
input_ InputProps action
forall action. InputProps action
defaultInputProps { inputType = "tel", inputPlaceholder = Just "Tel" }
, InputProps action -> View model action
forall action model. InputProps action -> View model action
input_ InputProps action
forall action. InputProps action
defaultInputProps { inputType = "url", inputPlaceholder = Just "URL" }
, InputProps action -> View model action
forall action model. InputProps action -> View model action
input_ InputProps action
forall action. InputProps action
defaultInputProps { inputType = "search", inputPlaceholder = Just "Search" }
] [View model action] -> [View model action] -> [View model action]
forall a. [a] -> [a] -> [a]
++
[ InputProps action -> View model action
forall action model. InputProps action -> View model action
input_ InputProps action
forall action. InputProps action
defaultInputProps { inputType = t }
| MisoString
t <- [ MisoString
"date", MisoString
"datetime-local", MisoString
"month", MisoString
"week", MisoString
"time" ]
]
inputCodeSample :: View model action
inputCodeSample :: forall model action. View model action
inputCodeSample =
View model action
"""
-----------------------------------------------------------------------------
module MyInput (inputSample) where
-----------------------------------------------------------------------------
import Miso
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
import Miso.UI.Input
-----------------------------------------------------------------------------
inputSample :: View model action
inputSample =
H.div_
[ P.class_ "flex flex-col gap-y-4" ]
$ [ input_ defaultInputProps { inputPlaceholder = Just "Text" }
, input_ defaultInputProps { inputPlaceholder = Just "Disabled", inputDisabled = True }
, input_ defaultInputProps { inputPlaceholder = Just "Error", inputInvalid = True }
, input_ defaultInputProps { inputType = "email", inputPlaceholder = Just "Email" }
, input_ defaultInputProps { inputType = "password", inputPlaceholder = Just "Password" }
, input_ defaultInputProps { inputType = "number", inputPlaceholder = Just "Number" }
, input_ defaultInputProps { inputType = "file" }
, input_ defaultInputProps { inputType = "tel", inputPlaceholder = Just "Tel" }
, input_ defaultInputProps { inputType = "url", inputPlaceholder = Just "URL" }
, input_ defaultInputProps { inputType = "search", inputPlaceholder = Just "Search" }
] ++
[ input_ defaultInputProps { inputType = t }
| t <- [ "date", "datetime-local", "month", "week", "time" ]
]
"""
inputPropsApi :: View model action
inputPropsApi :: forall model action. View model action
inputPropsApi =
View model action
"""
-- | Props for 'input_'
data InputProps action
= InputProps
{ inputType :: MisoString
-- ^ @type@ attribute (@text@, @email@, @password@, @date@, ...)
, inputId :: Maybe MisoString
, inputPlaceholder :: Maybe MisoString
, inputValue :: Maybe MisoString
, inputDisabled :: Bool
, inputInvalid :: Bool
-- ^ Renders with @aria-invalid@ (error styling)
, inputClasses :: [MisoString]
-- ^ Extra classes appended to @input@
, inputAttrs :: [Attribute action]
}
-----------------------------------------------------------------------------
-- | Smart constructor: text input, enabled, no placeholder
defaultInputProps :: InputProps action
defaultInputProps
= InputProps
{ inputType = "text"
, inputId = Nothing
, inputPlaceholder = Nothing
, inputValue = Nothing
, inputDisabled = False
, inputInvalid = False
, inputClasses = []
, inputAttrs = []
}
"""