-----------------------------------------------------------------------------
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE MultilineStrings  #-}
{-# LANGUAGE RecordWildCards   #-}
-----------------------------------------------------------------------------
module Miso.UI.Slider
  ( -- ** Props
    SliderProps (..)
  , defaultSliderProps
    -- ** Views
  , slider_
    -- ** Samples
  , sliderSample
  , sliderCodeSample
  , sliderPropsApi
  ) where
-----------------------------------------------------------------------------
import           Miso
import qualified Miso.CSS as CSS
import qualified Miso.Html.Element as H
import qualified Miso.Html.Property as P
-----------------------------------------------------------------------------
-- | Props for 'slider_'
data SliderProps action
  = SliderProps
  { forall action. SliderProps action -> MisoString
sliderMin :: MisoString
  , forall action. SliderProps action -> MisoString
sliderMax :: MisoString
  , forall action. SliderProps action -> MisoString
sliderStep :: MisoString
  , forall action. SliderProps action -> MisoString
sliderValue :: MisoString
  , forall action. SliderProps action -> MisoString
sliderPercent :: MisoString
    -- ^ Initial track fill, sets the @--slider-value@ CSS variable (e.g. @\"75%\"@)
  , forall action. SliderProps action -> [MisoString]
sliderClasses :: [MisoString]
    -- ^ Extra classes appended to the @input@
  , forall action. SliderProps action -> [Attribute action]
sliderAttrs :: [Attribute action]
    -- ^ Extra attributes; basecoat's slider JS needs
    -- @onCreatedWith@ \/ @onBeforeDestroyedWith@ hooks passed here
  }
-----------------------------------------------------------------------------
-- | Smart constructor: 0-100, starts at 50
defaultSliderProps :: SliderProps action
defaultSliderProps :: forall action. SliderProps action
defaultSliderProps
  = SliderProps
  { sliderMin :: MisoString
sliderMin = MisoString
"0"
  , sliderMax :: MisoString
sliderMax = MisoString
"100"
  , sliderStep :: MisoString
sliderStep = MisoString
"1"
  , sliderValue :: MisoString
sliderValue = MisoString
"50"
  , sliderPercent :: MisoString
sliderPercent = MisoString
"50%"
  , sliderClasses :: [MisoString]
sliderClasses = [ MisoString
"w-full" ]
  , sliderAttrs :: [Attribute action]
sliderAttrs = []
  }
-----------------------------------------------------------------------------
-- | <https://basecoatui.com/components/slider/ Slider>, driven by 'SliderProps'
slider_ :: SliderProps action -> View model action
slider_ :: forall action model. SliderProps action -> View model action
slider_ SliderProps {[MisoString]
[Attribute action]
MisoString
sliderMin :: forall action. SliderProps action -> MisoString
sliderMax :: forall action. SliderProps action -> MisoString
sliderStep :: forall action. SliderProps action -> MisoString
sliderValue :: forall action. SliderProps action -> MisoString
sliderPercent :: forall action. SliderProps action -> MisoString
sliderClasses :: forall action. SliderProps action -> [MisoString]
sliderAttrs :: forall action. SliderProps action -> [Attribute action]
sliderMin :: MisoString
sliderMax :: MisoString
sliderStep :: MisoString
sliderValue :: MisoString
sliderPercent :: MisoString
sliderClasses :: [MisoString]
sliderAttrs :: [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
  [ [ [Style] -> Attribute action
forall action. [Style] -> Attribute action
CSS.style_ [ MisoString
"--slider-value" MisoString -> MisoString -> Style
forall k v. k -> v -> (k, v)
=: MisoString
sliderPercent ]
    , [MisoString] -> Attribute action
forall action. [MisoString] -> Attribute action
P.classes_ (MisoString
"input" MisoString -> [MisoString] -> [MisoString]
forall a. a -> [a] -> [a]
: [MisoString]
sliderClasses)
    , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.type_ MisoString
"range"
    , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.min_ MisoString
sliderMin
    , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.max_ MisoString
sliderMax
    , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.step_ MisoString
sliderStep
    , MisoString -> Attribute action
forall action. MisoString -> Attribute action
P.value_ MisoString
sliderValue
    ]
  , [Attribute action]
sliderAttrs
  ]
-----------------------------------------------------------------------------
-- | Takes the app's slider init\/destroy hooks (basecoat's JS keeps the
-- track fill in sync while dragging)
sliderSample
  :: (DOMRef -> action)
  -> (DOMRef -> action)
  -> View model action
sliderSample :: forall action model.
(DOMRef -> action) -> (DOMRef -> action) -> View model action
sliderSample DOMRef -> action
initSlider DOMRef -> action
destroySlider =
  [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
"max-w-sm" ]
  [ SliderProps action -> View model action
forall action model. SliderProps action -> View model action
slider_ SliderProps (ZonkAny 0)
forall action. SliderProps action
defaultSliderProps
    { sliderMax = "200"
    , sliderValue = "150"
    , sliderPercent = "75%"
    , sliderAttrs =
      [ onCreatedWith initSlider
      , onBeforeDestroyedWith destroySlider
      ]
    }
  ]
-----------------------------------------------------------------------------
sliderCodeSample :: View model action
sliderCodeSample :: forall model action. View model action
sliderCodeSample =
  View model action
"""
  -----------------------------------------------------------------------------
  module MySlider (sliderSample) where
  -----------------------------------------------------------------------------
  import           Miso
  import qualified Miso.CSS as CSS
  import qualified Miso.Html.Element as H
  import qualified Miso.Html.Property as P
  import           Miso.UI.Slider
  -----------------------------------------------------------------------------
  sliderSample
    :: (DOMRef -> action)
    -> (DOMRef -> action)
    -> View model action
  sliderSample initSlider destroySlider =
    H.div_
    [ P.class_ "max-w-sm" ]
    [ slider_ defaultSliderProps
      { sliderMax = "200"
      , sliderValue = "150"
      , sliderPercent = "75%"
      , sliderAttrs =
        [ onCreatedWith initSlider
        , onBeforeDestroyedWith destroySlider
        ]
      }
    ]
  """
-----------------------------------------------------------------------------
sliderPropsApi :: View model action
sliderPropsApi :: forall model action. View model action
sliderPropsApi =
  View model action
"""
  -- | Props for 'slider_'
  data SliderProps action
    = SliderProps
    { sliderMin :: MisoString
    , sliderMax :: MisoString
    , sliderStep :: MisoString
    , sliderValue :: MisoString
    , sliderPercent :: MisoString
      -- ^ Initial track fill, sets the @--slider-value@ CSS variable (e.g. @\\"75%\\"@)
    , sliderClasses :: [MisoString]
      -- ^ Extra classes appended to the @input@
    , sliderAttrs :: [Attribute action]
      -- ^ Extra attributes; basecoat's slider JS needs
      -- @onCreatedWith@ \\/ @onBeforeDestroyedWith@ hooks passed here
    }
  -----------------------------------------------------------------------------
  -- | Smart constructor: 0-100, starts at 50
  defaultSliderProps :: SliderProps action
  defaultSliderProps
    = SliderProps
    { sliderMin = "0"
    , sliderMax = "100"
    , sliderStep = "1"
    , sliderValue = "50"
    , sliderPercent = "50%"
    , sliderClasses = [ "w-full" ]
    , sliderAttrs = []
    }
  """
-----------------------------------------------------------------------------