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

156 lines
3.9 KiB
Elm
Raw Normal View History

2019-04-11 22:54:14 +03:00
module Examples.Slide exposing (Msg, State, example, init, update)
{-|
@docs Msg, State, example, init, update
-}
import Accessibility.Styled as Html
import Css
import Html.Styled.Attributes exposing (css)
import Html.Styled.Keyed as Keyed
2019-04-12 20:43:49 +03:00
import List.Zipper as Zipper exposing (Zipper(..))
2019-04-11 22:54:14 +03:00
import ModuleExample exposing (Category(..), ModuleExample)
import Nri.Ui.Button.V8 as Button
import Nri.Ui.Colors.V1 as Colors
import Nri.Ui.Slide.V1 as Slide
{-| -}
type Msg
= TriggerAnimation Slide.AnimationDirection
{-| -}
type alias State =
{ direction : Slide.AnimationDirection
2019-04-12 20:43:49 +03:00
, panels : Zipper Panel
2019-04-11 22:54:14 +03:00
, previous : Maybe Panel
}
{-| -}
example : (Msg -> msg) -> State -> ModuleExample msg
example parentMessage state =
2019-05-03 19:56:43 +03:00
{ name = "Nri.Ui.Slide.V1"
2019-05-03 19:10:23 +03:00
, category = Animations
2019-04-11 22:54:14 +03:00
, content =
[ Keyed.node "div"
[ css
[ Slide.withSlidingContents
, Css.border3 (Css.px 3) Css.solid Colors.gray75
, Css.padding (Css.px 20)
, Css.width (Css.px 600)
]
]
(case state.previous of
Just previousPanel ->
[ viewPanel previousPanel (Slide.animateOut state.direction)
2019-04-12 20:43:49 +03:00
, viewPanel (Zipper.current state.panels) (Slide.animateIn state.direction)
2019-04-11 22:54:14 +03:00
]
Nothing ->
2019-04-12 20:43:49 +03:00
[ viewPanel (Zipper.current state.panels) (Css.batch [])
2019-04-11 22:54:14 +03:00
]
)
, Html.div
[ css
[ Css.displayFlex
, Css.justifyContent Css.spaceBetween
, Css.marginTop (Css.px 20)
, Css.width (Css.px 300)
]
]
[ triggerAnimation Slide.FromLTR "Left-to-right"
, triggerAnimation Slide.FromRTL "Right-to-left"
]
]
|> List.map (Html.map parentMessage)
}
{-| -}
init : State
init =
{ direction = Slide.FromRTL
2019-04-12 20:43:49 +03:00
, panels = Zipper [] One [ Two, Three ]
2019-04-11 22:54:14 +03:00
, previous = Nothing
}
{-| -}
update : Msg -> State -> ( State, Cmd Msg )
update msg state =
case msg of
TriggerAnimation direction ->
( { state
| direction = direction
2019-04-12 20:43:49 +03:00
, panels =
case direction of
Slide.FromRTL ->
Zipper.next state.panels
|> Maybe.withDefault (Zipper.first state.panels)
Slide.FromLTR ->
Zipper.previous state.panels
|> Maybe.withDefault (Zipper.last state.panels)
, previous = Just (Zipper.current state.panels)
2019-04-11 22:54:14 +03:00
}
, Cmd.none
)
-- INTERNAL
type Panel
= One
| Two
| Three
viewPanel : Panel -> Css.Style -> ( String, Html.Html msg )
viewPanel panel animation =
let
( color, text, key ) =
case panel of
One ->
( Colors.red, "Panel One", "panel-1" )
Two ->
( Colors.yellow, "Panel Two", "panel-2" )
Three ->
( Colors.green, "Panel Three", "panel-3" )
in
( key
, Html.div
[ css
[ Css.border3 (Css.px 2) Css.dashed color
, Css.color color
, Css.padding (Css.px 10)
, Css.width (Css.px 100)
, Css.textAlign Css.center
, animation
]
]
[ Html.text text
]
)
triggerAnimation : Slide.AnimationDirection -> String -> Html.Html Msg
triggerAnimation direction label =
Button.button
{ onClick = TriggerAnimation direction
, size = Button.Small
, style = Button.Secondary
, width = Button.WidthUnbounded
}
{ label = label
, state = Button.Enabled
, icon = Nothing
}