noredink-ui/styleguide-app/Examples/Confetti.elm

75 lines
1.6 KiB
Elm
Raw Normal View History

2020-05-15 20:15:35 +03:00
module Examples.Confetti exposing (example, State, Msg)
{-|
@docs example, State, Msg
-}
import Browser.Events
2020-05-15 20:15:35 +03:00
import Category exposing (Category(..))
import Css exposing (Color)
import Dict exposing (Dict)
2020-05-15 20:15:35 +03:00
import Example exposing (Example)
import Html.Styled as Html exposing (Html)
2020-05-15 20:15:35 +03:00
import Html.Styled.Attributes as Attributes exposing (css)
import KeyboardSupport exposing (Direction(..), Key(..))
2020-05-15 20:15:35 +03:00
import Nri.Ui.Button.V10 as Button
import Nri.Ui.Confetti.V2 as Confetti
2020-05-15 20:15:35 +03:00
{-| -}
example : Example State Msg
example =
2020-09-09 21:43:10 +03:00
{ name = "Confetti"
, version = 2
2020-05-15 20:15:35 +03:00
, categories = [ Animations ]
, keyboardSupport = []
, state = Confetti.init 700
2020-05-15 20:15:35 +03:00
, update = update
, subscriptions =
\state ->
Sub.batch
[ Browser.Events.onResize WindowResized
, Confetti.subscriptions ConfettiMsg state
]
2021-11-05 21:19:08 +03:00
, preview = []
2020-05-15 20:15:35 +03:00
, view =
\state ->
[ Button.button "Launch confetti!"
2020-05-15 20:15:35 +03:00
[ Button.onClick LaunchConfetti
, Button.small
, Button.secondary
]
, Confetti.view state
2020-05-15 20:15:35 +03:00
]
}
{-| -}
type alias State =
Confetti.Model
2020-05-15 20:15:35 +03:00
{-| -}
type Msg
= LaunchConfetti
| ConfettiMsg Confetti.Msg
| WindowResized Int Int
2020-05-15 20:15:35 +03:00
{-| -}
update : Msg -> State -> ( State, Cmd Msg )
update msg state =
( case msg of
2020-05-15 20:15:35 +03:00
LaunchConfetti ->
Confetti.burst state
2020-05-15 20:15:35 +03:00
ConfettiMsg confettiMsg ->
Confetti.update confettiMsg state
WindowResized width _ ->
Confetti.updatePageWidth width state
, Cmd.none
)