-----------------------------------------------------------------------------
{-# LANGUAGE OverloadedStrings #-}
{-# LANGUAGE MultilineStrings  #-}
{-# LANGUAGE RecordWildCards   #-}
-----------------------------------------------------------------------------
module Miso.UI.AlertDialog
  ( -- ** Props
    AlertDialogProps (..)
  , defaultAlertDialogProps
    -- ** Component
  , alertDialogComponent
    -- ** Sample
  , alertDialogCodeSample
  , alertDialogPropsApi
  ) where
-----------------------------------------------------------------------------
import           Control.Monad
-----------------------------------------------------------------------------
import           Miso
import qualified Miso.Html.Element as H
import qualified Miso.Html.Event as E
import qualified Miso.Html.Property as P
-----------------------------------------------------------------------------
import           Miso.UI.Button
import           Miso.UI.Types
-----------------------------------------------------------------------------
-- | Props for 'alertDialogComponent'. These live in the @props@ slot of the
-- miso 'Component' and are supplied at mount time via 'mountWithProps_'.
data AlertDialogProps
  = AlertDialogProps
  { AlertDialogProps -> MisoString
alertDialogId :: MisoString
  , AlertDialogProps -> MisoString
alertDialogTrigger :: MisoString
    -- ^ Label of the trigger button
  , AlertDialogProps -> MisoString
alertDialogTitle :: MisoString
  , AlertDialogProps -> MisoString
alertDialogDescription :: MisoString
  , AlertDialogProps -> MisoString
alertDialogCancelLabel :: MisoString
  , AlertDialogProps -> MisoString
alertDialogActionLabel :: MisoString
  } deriving (Int -> AlertDialogProps -> ShowS
[AlertDialogProps] -> ShowS
AlertDialogProps -> String
(Int -> AlertDialogProps -> ShowS)
-> (AlertDialogProps -> String)
-> ([AlertDialogProps] -> ShowS)
-> Show AlertDialogProps
forall a.
(Int -> a -> ShowS) -> (a -> String) -> ([a] -> ShowS) -> Show a
$cshowsPrec :: Int -> AlertDialogProps -> ShowS
showsPrec :: Int -> AlertDialogProps -> ShowS
$cshow :: AlertDialogProps -> String
show :: AlertDialogProps -> String
$cshowList :: [AlertDialogProps] -> ShowS
showList :: [AlertDialogProps] -> ShowS
Show, AlertDialogProps -> AlertDialogProps -> Bool
(AlertDialogProps -> AlertDialogProps -> Bool)
-> (AlertDialogProps -> AlertDialogProps -> Bool)
-> Eq AlertDialogProps
forall a. (a -> a -> Bool) -> (a -> a -> Bool) -> Eq a
$c== :: AlertDialogProps -> AlertDialogProps -> Bool
== :: AlertDialogProps -> AlertDialogProps -> Bool
$c/= :: AlertDialogProps -> AlertDialogProps -> Bool
/= :: AlertDialogProps -> AlertDialogProps -> Bool
Eq)
-----------------------------------------------------------------------------
-- | Smart constructor: destructive-action confirmation
defaultAlertDialogProps :: AlertDialogProps
defaultAlertDialogProps :: AlertDialogProps
defaultAlertDialogProps
  = AlertDialogProps
  { alertDialogId :: MisoString
alertDialogId = MisoString
"alert-dialog-demo"
  , alertDialogTrigger :: MisoString
alertDialogTrigger = MisoString
"Open alert dialog"
  , alertDialogTitle :: MisoString
alertDialogTitle = MisoString
"Are you absolutely sure?"
  , alertDialogDescription :: MisoString
alertDialogDescription =
      MisoString
"This action cannot be undone. This will permanently delete your \
      \account and remove your data from our servers."
  , alertDialogCancelLabel :: MisoString
alertDialogCancelLabel = MisoString
"Cancel"
  , alertDialogActionLabel :: MisoString
alertDialogActionLabel = MisoString
"Continue"
  }
-----------------------------------------------------------------------------
data Action
  = ShowModal DOMRef
  | CloseDialog MisoString
-----------------------------------------------------------------------------
-- | <https://basecoatui.com/components/alert-dialog/ Alert Dialog> as a miso
-- 'Component'; 'AlertDialogProps' is its @props@ type parameter. Mount with
--
-- @
-- mountWithProps_ "alert-dialog" defaultAlertDialogProps alertDialogComponent
-- @
alertDialogComponent :: Component parent AlertDialogProps () Action
alertDialogComponent :: forall parent. Component parent AlertDialogProps () Action
alertDialogComponent = ()
-> (Action -> Effect parent AlertDialogProps () Action)
-> (AlertDialogProps -> () -> View () Action)
-> Component parent AlertDialogProps () Action
forall model action parent props.
model
-> (action -> Effect parent props model action)
-> (props -> model -> View model action)
-> Component parent props model action
component () Action -> Effect parent AlertDialogProps () Action
forall {parent} {props} {model} {action}.
Action -> Effect parent props model action
update_ AlertDialogProps -> () -> View () Action
forall {model}. AlertDialogProps -> () -> View model Action
view_
  where
    update_ :: Action -> Effect parent props model action
update_ (ShowModal JSVal
domRef) = IO () -> Effect parent props model action
forall parent props model action.
IO () -> Effect parent props model action
io_ (IO () -> Effect parent props model action)
-> IO () -> Effect parent props model action
forall a b. (a -> b) -> a -> b
$ do
      dialogRef <- JSVal -> IO JSVal
nextSibling JSVal
domRef
      void $ dialogRef # ("showModal" :: MisoString) $ ()

    update_ (CloseDialog MisoString
did) = IO () -> Effect parent props model action
forall parent props model action.
IO () -> Effect parent props model action
io_ (IO () -> Effect parent props model action)
-> IO () -> Effect parent props model action
forall a b. (a -> b) -> a -> b
$ do
      dialog <- MisoString -> IO JSVal
jsg MisoString
"document"
        # ("getElementById" :: MisoString)
        ([MisoString] -> IO JSVal) -> [MisoString] -> IO JSVal
forall a b. (a -> b) -> a -> b
$ [MisoString
did]
      void $ dialog # ("close" :: MisoString) $ ()

    view_ :: AlertDialogProps -> () -> View model Action
view_ AlertDialogProps {MisoString
alertDialogId :: AlertDialogProps -> MisoString
alertDialogTrigger :: AlertDialogProps -> MisoString
alertDialogTitle :: AlertDialogProps -> MisoString
alertDialogDescription :: AlertDialogProps -> MisoString
alertDialogCancelLabel :: AlertDialogProps -> MisoString
alertDialogActionLabel :: AlertDialogProps -> MisoString
alertDialogId :: MisoString
alertDialogTrigger :: MisoString
alertDialogTitle :: MisoString
alertDialogDescription :: MisoString
alertDialogCancelLabel :: MisoString
alertDialogActionLabel :: MisoString
..} () =
      [Attribute Action] -> [View model Action] -> View model Action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.div_
      []
      [ ButtonProps Action -> [View model Action] -> View model Action
forall action model.
ButtonProps action -> [View model action] -> View model action
button_ ButtonProps (ZonkAny 0)
forall action. ButtonProps action
defaultButtonProps
        { buttonVariant = Outline
        , buttonAttrs = [ P.type_ "button", E.onClickWith ShowModal ]
        }
        [ MisoString -> View model Action
forall model action. MisoString -> View model action
text MisoString
alertDialogTrigger ]
      , [Attribute Action] -> [View model Action] -> View model Action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.dialog_
          [ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
P.id_ MisoString
alertDialogId
          , MisoString -> Attribute Action
forall action. MisoString -> Attribute action
P.class_ MisoString
"dialog"
          , MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"labelledby" (MisoString
alertDialogId MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"-title")
          , MisoString -> MisoString -> Attribute Action
forall action. MisoString -> MisoString -> Attribute action
P.aria_ MisoString
"describedby" (MisoString
alertDialogId MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"-description")
          ]
          [ [Attribute Action] -> [View model Action] -> View model Action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.article_ []
            [ [Attribute Action] -> [View model Action] -> View model Action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.header_ []
              [ [Attribute Action] -> [View model Action] -> View model Action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.h2_
                [ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
P.id_ (MisoString
alertDialogId MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"-title") ]
                [ MisoString -> View model Action
forall model action. MisoString -> View model action
text MisoString
alertDialogTitle ]
              , [Attribute Action] -> [View model Action] -> View model Action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.p_
                [ MisoString -> Attribute Action
forall action. MisoString -> Attribute action
P.id_ (MisoString
alertDialogId MisoString -> MisoString -> MisoString
forall a. Semigroup a => a -> a -> a
<> MisoString
"-description") ]
                [ MisoString -> View model Action
forall model action. MisoString -> View model action
text MisoString
alertDialogDescription ]
              ]
            , [Attribute Action] -> [View model Action] -> View model Action
forall action model.
[Attribute action] -> [View model action] -> View model action
H.footer_ []
              [ ButtonProps Action -> [View model Action] -> View model Action
forall action model.
ButtonProps action -> [View model action] -> View model action
button_ ButtonProps (ZonkAny 1)
forall action. ButtonProps action
defaultButtonProps
                { buttonVariant = Outline
                , buttonAttrs = [ E.onClick (CloseDialog alertDialogId) ]
                }
                [ MisoString -> View model Action
forall model action. MisoString -> View model action
text MisoString
alertDialogCancelLabel ]
              , ButtonProps Action -> [View model Action] -> View model Action
forall action model.
ButtonProps action -> [View model action] -> View model action
button_ ButtonProps (ZonkAny 2)
forall action. ButtonProps action
defaultButtonProps
                { buttonAttrs = [ E.onClick (CloseDialog alertDialogId) ] }
                [ MisoString -> View model Action
forall model action. MisoString -> View model action
text MisoString
alertDialogActionLabel ]
              ]
            ]
          ]
        ]
-----------------------------------------------------------------------------
alertDialogCodeSample :: View model action
alertDialogCodeSample :: forall model action. View model action
alertDialogCodeSample =
  View model action
"""
  -----------------------------------------------------------------------------
  module MyAlertDialog (myView) where
  -----------------------------------------------------------------------------
  import           Miso
  -----------------------------------------------------------------------------
  import           Miso.UI.AlertDialog
  -----------------------------------------------------------------------------
  -- 'AlertDialogProps' lives in the props slot of the miso 'Component' and is
  -- supplied at the mount site:
  myView :: View model action
  myView = mountWithProps_ "alert-dialog"
    defaultAlertDialogProps
      { alertDialogTitle = "Are you absolutely sure?"
      , alertDialogDescription = "This action cannot be undone."
      , alertDialogActionLabel = "Continue"
      }
    alertDialogComponent
  """
-----------------------------------------------------------------------------
alertDialogPropsApi :: View model action
alertDialogPropsApi :: forall model action. View model action
alertDialogPropsApi =
  View model action
"""
  -- | Props for 'alertDialogComponent'. These live in the @props@ slot of the
  -- miso 'Component' and are supplied at mount time via 'mountWithProps_'.
  data AlertDialogProps
    = AlertDialogProps
    { alertDialogId :: MisoString
    , alertDialogTrigger :: MisoString
      -- ^ Label of the trigger button
    , alertDialogTitle :: MisoString
    , alertDialogDescription :: MisoString
    , alertDialogCancelLabel :: MisoString
    , alertDialogActionLabel :: MisoString
    } deriving (Show, Eq)
  -----------------------------------------------------------------------------
  -- | Smart constructor: destructive-action confirmation
  defaultAlertDialogProps :: AlertDialogProps
  defaultAlertDialogProps
    = AlertDialogProps
    { alertDialogId = "alert-dialog-demo"
    , alertDialogTrigger = "Open alert dialog"
    , alertDialogTitle = "Are you absolutely sure?"
    , alertDialogDescription =
        "This action cannot be undone. This will permanently delete your \\
        \\account and remove your data from our servers."
    , alertDialogCancelLabel = "Cancel"
    , alertDialogActionLabel = "Continue"
    }
  """
-----------------------------------------------------------------------------