mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-11-24 08:53:33 +03:00
Merge pull request #785 from NoRedInk/dansby/slide-away
Remove slide example
This commit is contained in:
Tessa
GitHub
commit
9bdc97b7c6
@ -26,7 +26,6 @@ import Examples.Pennant as Pennant
|
||||
import Examples.RadioButton as RadioButton
|
||||
import Examples.SegmentedControl as SegmentedControl
|
||||
import Examples.Select as Select
|
||||
import Examples.Slide as Slide
|
||||
import Examples.SlideModal as SlideModal
|
||||
import Examples.SortableTable as SortableTable
|
||||
import Examples.Svg as Svg
|
||||
@ -515,25 +514,6 @@ all =
|
||||
SelectState childState ->
|
||||
Just childState
|
||||
|
||||
_ ->
|
||||
Nothing
|
||||
)
|
||||
, Slide.example
|
||||
|> Example.wrapMsg SlideMsg
|
||||
(\msg ->
|
||||
case msg of
|
||||
SlideMsg childMsg ->
|
||||
Just childMsg
|
||||
|
||||
_ ->
|
||||
Nothing
|
||||
)
|
||||
|> Example.wrapState SlideState
|
||||
(\msg ->
|
||||
case msg of
|
||||
SlideState childState ->
|
||||
Just childState
|
||||
|
||||
_ ->
|
||||
Nothing
|
||||
)
|
||||
@ -794,7 +774,6 @@ type State
|
||||
| RadioButtonState RadioButton.State
|
||||
| SegmentedControlState SegmentedControl.State
|
||||
| SelectState Select.State
|
||||
| SlideState Slide.State
|
||||
| SlideModalState SlideModal.State
|
||||
| SortableTableState SortableTable.State
|
||||
| SvgState Svg.State
|
||||
@ -835,7 +814,6 @@ type Msg
|
||||
| RadioButtonMsg RadioButton.Msg
|
||||
| SegmentedControlMsg SegmentedControl.Msg
|
||||
| SelectMsg Select.Msg
|
||||
| SlideMsg Slide.Msg
|
||||
| SlideModalMsg SlideModal.Msg
|
||||
| SortableTableMsg SortableTable.Msg
|
||||
| SvgMsg Svg.Msg
|
||||
|
||||
@ -1,155 +0,0 @@
|
||||
module Examples.Slide exposing (Msg, State, example)
|
||||
|
||||
{-|
|
||||
|
||||
@docs Msg, State, example
|
||||
|
||||
-}
|
||||
|
||||
import Accessibility.Styled as Html
|
||||
import Category exposing (Category(..))
|
||||
import Css
|
||||
import Example exposing (Example)
|
||||
import Html.Styled.Attributes exposing (css)
|
||||
import Html.Styled.Keyed as Keyed
|
||||
import KeyboardSupport exposing (Direction(..), Key(..))
|
||||
import List.Zipper as Zipper exposing (Zipper)
|
||||
import Nri.Ui.Button.V10 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
|
||||
, panels : Zipper Panel
|
||||
, previous : Maybe Panel
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
example : Example State Msg
|
||||
example =
|
||||
{ name = "Slide"
|
||||
, version = 1
|
||||
, categories = [ Animations ]
|
||||
, keyboardSupport = []
|
||||
, state = init
|
||||
, update = update
|
||||
, subscriptions = \_ -> Sub.none
|
||||
, preview = []
|
||||
, view =
|
||||
\state ->
|
||||
[ 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)
|
||||
, viewPanel (Zipper.current state.panels) (Slide.animateIn state.direction)
|
||||
]
|
||||
|
||||
Nothing ->
|
||||
[ viewPanel (Zipper.current state.panels) (Css.batch [])
|
||||
]
|
||||
)
|
||||
, 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"
|
||||
]
|
||||
]
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
init : State
|
||||
init =
|
||||
{ direction = Slide.FromRTL
|
||||
, panels = Zipper.from [] One [ Two, Three ]
|
||||
, previous = Nothing
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
update : Msg -> State -> ( State, Cmd Msg )
|
||||
update msg state =
|
||||
case msg of
|
||||
TriggerAnimation direction ->
|
||||
( { state
|
||||
| direction = direction
|
||||
, 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)
|
||||
}
|
||||
, 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.redDark, "Panel One", "panel-1" )
|
||||
|
||||
Two ->
|
||||
( Colors.ochre, "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 label
|
||||
[ Button.onClick (TriggerAnimation direction), Button.small, Button.secondary ]
|
||||
Loading…
Reference in New Issue
Block a user