{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE MultilineStrings #-}
{-# LANGUAGE RecordWildCards #-}
module Miso.UI.Progress
(
ProgressProps (..)
, defaultProgressProps
, progress_
, progressSample
, progressCodeSample
, progressPropsApi
) where
import Miso
import qualified Miso.CSS as CSS
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
import qualified Miso.String as MS
data ProgressProps action
= ProgressProps
{ forall action. ProgressProps action -> Int
progressValue :: Int
, forall action. ProgressProps action -> [MisoString]
progressClasses :: [MisoString]
, forall action. ProgressProps action -> [Attribute action]
progressAttrs :: [Attribute action]
}
defaultProgressProps :: ProgressProps action
defaultProgressProps :: forall action. ProgressProps action
defaultProgressProps
= ProgressProps
{ progressValue :: Int
progressValue = Int
0
, progressClasses :: [MisoString]
progressClasses = []
, progressAttrs :: [Attribute action]
progressAttrs = []
}
progress_ :: ProgressProps action -> View model action
progress_ :: forall action model. ProgressProps action -> View model action
progress_ ProgressProps {Int
[MisoString]
[Attribute action]
progressValue :: forall action. ProgressProps action -> Int
progressClasses :: forall action. ProgressProps action -> [MisoString]
progressAttrs :: forall action. ProgressProps action -> [Attribute action]
progressValue :: Int
progressClasses :: [MisoString]
progressAttrs :: [Attribute action]
..} =
[Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
( [[Attribute action]] -> [Attribute action]
forall (t :: * -> *) a. Foldable t => t [a] -> [a]
concat
[ [ [MisoString] -> Attribute action
forall action. [MisoString] -> Attribute action
P.classes_
( [ MisoString
"bg-primary/20", MisoString
"relative", MisoString
"h-2", MisoString
"w-full", MisoString
"overflow-hidden", MisoString
"rounded-full" ]
[MisoString] -> [MisoString] -> [MisoString]
forall a. [a] -> [a] -> [a]
++ [MisoString]
progressClasses
)
, MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.role_ MisoString
"progressbar"
, MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"valuemin" MisoString
"0"
, MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"valuemax" MisoString
"100"
, MisoString -> MisoString -> Attribute action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"valuenow" (Int -> MisoString
forall str. ToMisoString str => str -> MisoString
MS.ms Int
progressValue)
]
, [Attribute action]
progressAttrs
]
)
[ [Attribute action] -> [View model action] -> View model action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
[ [Style] -> Attribute action
forall action. [Style] -> Attribute action
CSS.style_ [ MisoString
"width" MisoString -> MisoString -> Style
forall k v. k -> v -> (k, v)
=: (Int -> MisoString
forall str. ToMisoString str => str -> MisoString
MS.ms Int
progressValue MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"%") ]
, MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.class_ MisoString
"bg-primary h-full w-full flex-1 transition-all"
]
[]
]
progressSample :: View model action
progressSample :: forall model action. View model action
progressSample =
[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-4 max-w-sm" ]
[ ProgressProps action -> View model action
forall action model. ProgressProps action -> View model action
progress_ ProgressProps action
forall action. ProgressProps action
defaultProgressProps { progressValue = 13 }
, ProgressProps action -> View model action
forall action model. ProgressProps action -> View model action
progress_ ProgressProps action
forall action. ProgressProps action
defaultProgressProps { progressValue = 66 }
]
progressCodeSample :: View model action
progressCodeSample :: forall model action. View model action
progressCodeSample =
View model action
"""
-----------------------------------------------------------------------------
module MyProgress (progressSample) where
-----------------------------------------------------------------------------
import Miso
import qualified Miso.CSS as CSS
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
import qualified Miso.String as MS
import Miso.UI.Progress
-----------------------------------------------------------------------------
progressSample :: View model action
progressSample =
H.div_
[ P.class_ "flex flex-col gap-4 max-w-sm" ]
[ progress_ defaultProgressProps { progressValue = 13 }
, progress_ defaultProgressProps { progressValue = 66 }
]
"""
progressPropsApi :: View model action
progressPropsApi :: forall model action. View model action
progressPropsApi =
View model action
"""
-- | Props for 'progress_'
data ProgressProps action
= ProgressProps
{ progressValue :: Int
-- ^ Percentage complete (0-100)
, progressClasses :: [MisoString]
-- ^ Extra classes appended to the track
, progressAttrs :: [Attribute action]
}
-----------------------------------------------------------------------------
-- | Smart constructor: empty bar
defaultProgressProps :: ProgressProps action
defaultProgressProps
= ProgressProps
{ progressValue = 0
, progressClasses = []
, progressAttrs = []
}
"""