2018-04-30 14:14:20 +03:00
|
|
|
module Examples.Button exposing (Msg, State, example, init, update)
|
|
|
|
|
|
|
|
{- \
|
|
|
|
@docs Msg, State, example, init, update,
|
|
|
|
-}
|
|
|
|
|
2018-08-18 02:06:31 +03:00
|
|
|
import Css exposing (middle, verticalAlign)
|
2018-04-30 14:14:20 +03:00
|
|
|
import Debug.Control as Control exposing (Control)
|
2018-06-22 12:41:38 +03:00
|
|
|
import Headings
|
2018-08-18 00:37:26 +03:00
|
|
|
import Html.Styled exposing (..)
|
2018-12-13 23:59:35 +03:00
|
|
|
import Html.Styled.Attributes exposing (css, id)
|
2018-04-30 14:14:20 +03:00
|
|
|
import ModuleExample as ModuleExample exposing (Category(..), ModuleExample, ModuleMessages)
|
2018-04-30 14:24:03 +03:00
|
|
|
import Nri.Ui.AssetPath exposing (Asset)
|
2019-07-03 19:39:06 +03:00
|
|
|
import Nri.Ui.Button.V9 as Button exposing (ButtonOrLink)
|
2019-05-29 20:20:30 +03:00
|
|
|
import Nri.Ui.Icon.V5 as Icon
|
2019-03-28 02:56:54 +03:00
|
|
|
import Nri.Ui.Svg.V1 as NriSvg exposing (Svg)
|
2019-06-28 01:35:06 +03:00
|
|
|
import Nri.Ui.Text.V3 as Text
|
2018-04-30 14:14:20 +03:00
|
|
|
|
|
|
|
|
|
|
|
{-| -}
|
|
|
|
type State
|
|
|
|
= State (Control Model)
|
|
|
|
|
|
|
|
|
|
|
|
{-| -}
|
|
|
|
type ButtonType
|
|
|
|
= Button
|
|
|
|
| Link
|
|
|
|
|
|
|
|
|
|
|
|
{-| -}
|
|
|
|
example :
|
2019-03-28 02:56:54 +03:00
|
|
|
(String -> ModuleMessages Msg parentMsg)
|
2018-04-30 14:14:20 +03:00
|
|
|
-> State
|
|
|
|
-> ModuleExample parentMsg
|
2019-03-28 02:56:54 +03:00
|
|
|
example unnamedMessages state =
|
2018-04-30 14:14:20 +03:00
|
|
|
let
|
|
|
|
messages =
|
|
|
|
unnamedMessages "ButtonExample"
|
|
|
|
in
|
2019-07-03 15:36:57 +03:00
|
|
|
{ name = "Nri.Ui.Button.V9"
|
2018-04-30 14:24:03 +03:00
|
|
|
, category = Buttons
|
2019-07-03 15:51:23 +03:00
|
|
|
, content = [ viewButtonExamples messages state ]
|
2018-04-30 14:24:03 +03:00
|
|
|
}
|
2018-04-30 14:14:20 +03:00
|
|
|
|
|
|
|
|
2019-07-03 19:39:06 +03:00
|
|
|
{-| -}
|
|
|
|
type Msg
|
|
|
|
= SetState State
|
|
|
|
| NoOp
|
|
|
|
|
|
|
|
|
|
|
|
{-| -}
|
|
|
|
update : Msg -> State -> ( State, Cmd Msg )
|
|
|
|
update msg state =
|
|
|
|
case msg of
|
|
|
|
SetState newState ->
|
|
|
|
( newState, Cmd.none )
|
|
|
|
|
|
|
|
NoOp ->
|
|
|
|
( state, Cmd.none )
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
-- INTERNAL
|
|
|
|
|
|
|
|
|
|
|
|
type alias Model =
|
|
|
|
{ label : String
|
|
|
|
, icon : Maybe Svg
|
|
|
|
, width : ButtonOrLink () -> ButtonOrLink ()
|
|
|
|
, buttonType : ButtonType
|
|
|
|
, state : Button.ButtonState
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2018-04-30 14:14:20 +03:00
|
|
|
{-| -}
|
|
|
|
init : { r | performance : String, lock : String } -> State
|
|
|
|
init assets =
|
|
|
|
Control.record Model
|
2019-07-03 19:39:06 +03:00
|
|
|
|> Control.field "label" (Control.string "Label")
|
|
|
|
|> Control.field "icon" (iconChoice assets)
|
2018-04-30 14:14:20 +03:00
|
|
|
|> Control.field "width"
|
2018-10-02 15:06:29 +03:00
|
|
|
(Control.choice
|
2019-07-03 19:39:06 +03:00
|
|
|
( "exactWidth 120", Control.value (Button.exactWidth 120) )
|
|
|
|
[ ( "exactWidth 70", Control.value (Button.exactWidth 70) )
|
|
|
|
, ( "unboundedWidth", Control.value Button.unboundedWidth )
|
|
|
|
, ( "fillContainerWidth", Control.value Button.fillContainerWidth )
|
2018-10-02 15:06:29 +03:00
|
|
|
]
|
2018-04-30 14:14:20 +03:00
|
|
|
)
|
|
|
|
|> Control.field "button type"
|
|
|
|
(Control.choice
|
2019-07-03 19:39:06 +03:00
|
|
|
( "button", Control.value Button )
|
|
|
|
[ ( "link", Control.value Link )
|
2018-04-30 14:14:20 +03:00
|
|
|
]
|
|
|
|
)
|
2018-10-01 17:12:21 +03:00
|
|
|
|> Control.field "state (button only)"
|
2018-12-05 01:36:15 +03:00
|
|
|
(Control.choice
|
|
|
|
( Debug.toString Button.Enabled, Control.value Button.Enabled )
|
|
|
|
(List.map (\x -> ( Debug.toString x, Control.value x ))
|
|
|
|
[ Button.Disabled
|
2018-04-30 14:14:20 +03:00
|
|
|
, Button.Error
|
|
|
|
, Button.Unfulfilled
|
|
|
|
, Button.Loading
|
|
|
|
, Button.Success
|
|
|
|
]
|
2018-12-05 01:36:15 +03:00
|
|
|
)
|
2018-04-30 14:14:20 +03:00
|
|
|
)
|
|
|
|
|> State
|
|
|
|
|
|
|
|
|
2019-07-03 19:39:06 +03:00
|
|
|
iconChoice : { r | performance : String, lock : String } -> Control.Control (Maybe Svg)
|
|
|
|
iconChoice assets =
|
|
|
|
Control.choice
|
|
|
|
( "Nothing", Control.value Nothing )
|
|
|
|
[ ( "Just Performance"
|
|
|
|
, Icon.performance assets
|
|
|
|
|> Icon.decorativeIcon
|
|
|
|
|> NriSvg.fromHtml
|
|
|
|
|> Just
|
|
|
|
|> Control.value
|
|
|
|
)
|
|
|
|
, ( "Just Lock"
|
|
|
|
, Icon.lock assets
|
|
|
|
|> Icon.decorativeIcon
|
|
|
|
|> NriSvg.fromHtml
|
|
|
|
|> Just
|
|
|
|
|> Control.value
|
|
|
|
)
|
|
|
|
]
|
2018-04-30 14:14:20 +03:00
|
|
|
|
|
|
|
|
2018-10-01 17:12:21 +03:00
|
|
|
viewButtonExamples :
|
2019-03-28 02:56:54 +03:00
|
|
|
ModuleMessages Msg parentMsg
|
2018-10-01 17:12:21 +03:00
|
|
|
-> State
|
|
|
|
-> Html parentMsg
|
2019-03-28 02:56:54 +03:00
|
|
|
viewButtonExamples messages (State control) =
|
2018-04-30 14:14:20 +03:00
|
|
|
let
|
|
|
|
model =
|
|
|
|
Control.currentValue control
|
|
|
|
in
|
2018-04-30 14:24:03 +03:00
|
|
|
[ Control.view (State >> SetState >> messages.wrapper) control
|
2018-08-18 00:37:26 +03:00
|
|
|
|> fromUnstyled
|
2019-03-28 02:56:54 +03:00
|
|
|
, buttons messages model
|
2018-04-30 14:24:03 +03:00
|
|
|
, toggleButtons messages
|
2019-03-28 02:49:07 +03:00
|
|
|
, Button.delete
|
2018-04-30 14:24:03 +03:00
|
|
|
{ label = "Delete Something"
|
|
|
|
, onClick = messages.showItWorked "delete"
|
|
|
|
}
|
2018-08-29 03:18:17 +03:00
|
|
|
, Button.linkExternalWithTracking
|
|
|
|
(messages.showItWorked "linkExternalWithTracking clicked")
|
|
|
|
{ size = Button.Medium
|
|
|
|
, style = Button.Secondary
|
2018-10-02 15:06:29 +03:00
|
|
|
, width = Button.WidthUnbounded
|
2018-08-29 03:18:17 +03:00
|
|
|
, label = "linkExternalWithTracking"
|
|
|
|
, icon = Nothing
|
|
|
|
, url = "#"
|
|
|
|
}
|
2018-04-30 14:24:03 +03:00
|
|
|
]
|
|
|
|
|> div []
|
2018-04-30 14:14:20 +03:00
|
|
|
|
|
|
|
|
2018-10-01 17:12:21 +03:00
|
|
|
buttons :
|
2019-03-28 02:56:54 +03:00
|
|
|
ModuleMessages Msg parentMsg
|
2018-10-01 17:12:21 +03:00
|
|
|
-> Model
|
|
|
|
-> Html parentMsg
|
2019-03-28 02:56:54 +03:00
|
|
|
buttons messages model =
|
2018-04-30 14:14:20 +03:00
|
|
|
let
|
2019-07-03 19:39:06 +03:00
|
|
|
sizes =
|
|
|
|
[ ( Button.small, "Button.small" )
|
|
|
|
, ( Button.medium, "Button.medium" )
|
|
|
|
, ( Button.large, "Button.large" )
|
|
|
|
]
|
|
|
|
|
|
|
|
styles =
|
|
|
|
[ ( Button.primary, "Button.primary" )
|
|
|
|
, ( Button.secondary, "Button.secondary" )
|
|
|
|
, ( Button.danger, "Button.danger" )
|
|
|
|
, ( Button.premium, "Button.premium" )
|
|
|
|
]
|
|
|
|
|
|
|
|
exampleRow ( style, styleName ) =
|
2018-04-30 14:14:20 +03:00
|
|
|
List.concat
|
2018-08-18 02:06:31 +03:00
|
|
|
[ [ td
|
|
|
|
[ css
|
|
|
|
[ verticalAlign middle
|
|
|
|
]
|
|
|
|
]
|
2019-07-03 19:39:06 +03:00
|
|
|
[ text styleName ]
|
2018-04-30 14:14:20 +03:00
|
|
|
]
|
2019-07-03 19:39:06 +03:00
|
|
|
, List.map (Tuple.first >> exampleCell style) sizes
|
2018-04-30 14:14:20 +03:00
|
|
|
]
|
|
|
|
|> tr []
|
|
|
|
|
2019-07-03 19:39:06 +03:00
|
|
|
addAttributes button =
|
|
|
|
[ Maybe.map Button.withIcon model.icon
|
|
|
|
, Just (Button.withLabel model.label)
|
|
|
|
, Just model.width
|
|
|
|
, Just (Button.setButtonState model.state)
|
|
|
|
]
|
|
|
|
|> List.filterMap identity
|
|
|
|
|> List.foldl (\addAttr b -> addAttr b) button
|
|
|
|
|
|
|
|
exampleCell setStyle setSize =
|
2018-04-30 14:14:20 +03:00
|
|
|
(case model.buttonType of
|
|
|
|
Link ->
|
2019-07-03 19:39:06 +03:00
|
|
|
Button.buildLink
|
|
|
|
|> addAttributes
|
|
|
|
|> setSize
|
|
|
|
|> setStyle
|
|
|
|
|> Button.href ""
|
|
|
|
|> Maybe.map Button.render
|
|
|
|
|> Maybe.withDefault (Html.Styled.text "")
|
2018-04-30 14:14:20 +03:00
|
|
|
|
|
|
|
Button ->
|
2019-07-03 19:39:06 +03:00
|
|
|
Button.buildButton
|
|
|
|
|> addAttributes
|
|
|
|
|> setSize
|
|
|
|
|> setStyle
|
|
|
|
|> Button.onClick (messages.showItWorked "Button clicked!")
|
|
|
|
|> Button.render
|
2018-04-30 14:14:20 +03:00
|
|
|
)
|
|
|
|
|> List.singleton
|
2018-12-20 21:53:09 +03:00
|
|
|
|> td
|
|
|
|
[ css
|
|
|
|
[ verticalAlign middle
|
|
|
|
, Css.width (Css.px 200)
|
|
|
|
]
|
|
|
|
]
|
2018-04-30 14:14:20 +03:00
|
|
|
in
|
2018-04-30 14:24:03 +03:00
|
|
|
List.concat
|
|
|
|
[ [ sizes
|
2019-07-03 19:39:06 +03:00
|
|
|
|> List.map (\( _, sizeName ) -> th [] [ text sizeName ])
|
2018-04-30 14:24:03 +03:00
|
|
|
|> (\cells -> tr [] (th [] [] :: cells))
|
|
|
|
]
|
2019-07-03 19:39:06 +03:00
|
|
|
, List.map exampleRow styles
|
2018-04-30 14:24:03 +03:00
|
|
|
]
|
|
|
|
|> table []
|
2018-04-30 14:14:20 +03:00
|
|
|
|
|
|
|
|
|
|
|
toggleButtons : ModuleMessages Msg parentMsg -> Html parentMsg
|
|
|
|
toggleButtons messages =
|
|
|
|
div []
|
2018-10-23 19:55:30 +03:00
|
|
|
[ Headings.h3 [ text "Button toggle" ]
|
2018-04-30 14:14:20 +03:00
|
|
|
, Button.toggleButton
|
|
|
|
{ onDeselect = messages.showItWorked "onDeselect"
|
|
|
|
, onSelect = messages.showItWorked "onSelect"
|
|
|
|
, label = "5"
|
|
|
|
, pressed = False
|
|
|
|
}
|
|
|
|
, Button.toggleButton
|
|
|
|
{ onDeselect = messages.showItWorked "onDeselect"
|
|
|
|
, onSelect = messages.showItWorked "onSelect"
|
|
|
|
, label = "5"
|
|
|
|
, pressed = True
|
|
|
|
}
|
|
|
|
]
|