mirror of
https://github.com/NoRedInk/noredink-ui.git
synced 2024-12-25 14:42:37 +03:00
Generalize the button
This commit is contained in:
parent
2f5825de20
commit
ccf793d5e1
@ -97,6 +97,7 @@ import Nri.Ui.AssetPath as AssetPath exposing (Asset)
|
||||
import Nri.Ui.Colors.Extra as ColorsExtra
|
||||
import Nri.Ui.Colors.V1 as Colors
|
||||
import Nri.Ui.Fonts.V1
|
||||
import Nri.Ui.Html.Attributes.V2 as AttributesExtra
|
||||
import Nri.Ui.Svg.V1 as NriSvg exposing (Svg)
|
||||
import Svg
|
||||
import Svg.Attributes
|
||||
@ -110,7 +111,7 @@ styledName suffix =
|
||||
{-| -}
|
||||
type ButtonOrLink msg
|
||||
= ButtonOrLink
|
||||
{ onClick : msg
|
||||
{ onClick : Maybe msg
|
||||
, url : String
|
||||
, linkType : Link
|
||||
, size : ButtonSize
|
||||
@ -124,10 +125,10 @@ type ButtonOrLink msg
|
||||
|
||||
|
||||
{-| -}
|
||||
build : ButtonOrLink ()
|
||||
build : ButtonOrLink msg
|
||||
build =
|
||||
ButtonOrLink
|
||||
{ onClick = ()
|
||||
{ onClick = Nothing
|
||||
, url = "#"
|
||||
, linkType = Default
|
||||
, size = Medium
|
||||
@ -141,10 +142,10 @@ build =
|
||||
|
||||
|
||||
{-| -}
|
||||
onClick : msg -> ButtonOrLink () -> ButtonOrLink msg
|
||||
onClick : msg -> ButtonOrLink msg -> ButtonOrLink msg
|
||||
onClick msg (ButtonOrLink config) =
|
||||
ButtonOrLink
|
||||
{ onClick = msg
|
||||
{ onClick = Just msg
|
||||
, url = config.url
|
||||
, linkType = config.linkType
|
||||
, size = config.size
|
||||
@ -153,12 +154,12 @@ onClick msg (ButtonOrLink config) =
|
||||
, label = config.label
|
||||
, state = config.state
|
||||
, icon = config.icon
|
||||
, customAttributes = []
|
||||
, customAttributes = config.customAttributes
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
href : String -> ButtonOrLink () -> ButtonOrLink ()
|
||||
href : String -> ButtonOrLink msg -> ButtonOrLink msg
|
||||
href url (ButtonOrLink config) =
|
||||
ButtonOrLink
|
||||
{ onClick = config.onClick
|
||||
@ -170,7 +171,7 @@ href url (ButtonOrLink config) =
|
||||
, label = config.label
|
||||
, state = config.state
|
||||
, icon = config.icon
|
||||
, customAttributes = []
|
||||
, customAttributes = config.customAttributes
|
||||
}
|
||||
|
||||
|
||||
@ -247,7 +248,9 @@ renderLink (ButtonOrLink config) =
|
||||
|
||||
SinglePageApp ->
|
||||
linkBase "linkSpa"
|
||||
(EventExtras.onClickPreventDefaultForLinkWithHref config.onClick
|
||||
((Maybe.map EventExtras.onClickPreventDefaultForLinkWithHref config.onClick
|
||||
|> Maybe.withDefault AttributesExtra.none
|
||||
)
|
||||
:: config.customAttributes
|
||||
)
|
||||
|
||||
@ -260,8 +263,14 @@ renderLink (ButtonOrLink config) =
|
||||
WithTracking ->
|
||||
linkBase
|
||||
"linkWithTracking"
|
||||
(Events.preventDefaultOn "click"
|
||||
(Json.Decode.succeed ( config.onClick, True ))
|
||||
((Maybe.map
|
||||
(\msg ->
|
||||
Events.preventDefaultOn "click"
|
||||
(Json.Decode.succeed ( msg, True ))
|
||||
)
|
||||
config.onClick
|
||||
|> Maybe.withDefault AttributesExtra.none
|
||||
)
|
||||
:: config.customAttributes
|
||||
)
|
||||
|
||||
@ -273,7 +282,8 @@ renderLink (ButtonOrLink config) =
|
||||
linkBase "linkExternalWithTracking"
|
||||
(List.append
|
||||
[ Attributes.target "_blank"
|
||||
, EventExtras.onClickForLinkWithHref config.onClick
|
||||
, Maybe.map EventExtras.onClickForLinkWithHref config.onClick
|
||||
|> Maybe.withDefault AttributesExtra.none
|
||||
]
|
||||
config.customAttributes
|
||||
)
|
||||
@ -286,7 +296,7 @@ withCustomAttributes customAttributes (ButtonOrLink config) =
|
||||
|
||||
|
||||
{-| -}
|
||||
withLabel : String -> ButtonOrLink () -> ButtonOrLink ()
|
||||
withLabel : String -> ButtonOrLink msg -> ButtonOrLink msg
|
||||
withLabel label (ButtonOrLink config) =
|
||||
ButtonOrLink { config | label = label }
|
||||
|
||||
@ -493,7 +503,9 @@ renderButton (ButtonOrLink config) =
|
||||
Nri.Ui.styled Html.button
|
||||
(styledName "customButton")
|
||||
[ buttonStyles config.size config.width buttonStyle_ ]
|
||||
(Events.onClick config.onClick
|
||||
((Maybe.map Events.onClick config.onClick
|
||||
|> Maybe.withDefault AttributesExtra.none
|
||||
)
|
||||
:: Attributes.disabled isDisabled
|
||||
:: Attributes.type_ "button"
|
||||
:: config.customAttributes
|
||||
|
@ -20,8 +20,8 @@ import Nri.Ui.Text.V3 as Text
|
||||
|
||||
|
||||
{-| -}
|
||||
type State
|
||||
= State (Control Model)
|
||||
type State parentMsg
|
||||
= State (Control (Model parentMsg))
|
||||
|
||||
|
||||
{-| -}
|
||||
@ -32,8 +32,8 @@ type ButtonType
|
||||
|
||||
{-| -}
|
||||
example :
|
||||
(String -> ModuleMessages Msg parentMsg)
|
||||
-> State
|
||||
(String -> ModuleMessages (Msg parentMsg) parentMsg)
|
||||
-> State parentMsg
|
||||
-> ModuleExample parentMsg
|
||||
example unnamedMessages state =
|
||||
let
|
||||
@ -47,13 +47,13 @@ example unnamedMessages state =
|
||||
|
||||
|
||||
{-| -}
|
||||
type Msg
|
||||
= SetState State
|
||||
type Msg parentMsg
|
||||
= SetState (State parentMsg)
|
||||
| NoOp
|
||||
|
||||
|
||||
{-| -}
|
||||
update : Msg -> State -> ( State, Cmd Msg )
|
||||
update : Msg msg -> State msg -> ( State msg, Cmd (Msg msg) )
|
||||
update msg state =
|
||||
case msg of
|
||||
SetState newState ->
|
||||
@ -67,21 +67,27 @@ update msg state =
|
||||
-- INTERNAL
|
||||
|
||||
|
||||
type alias Model =
|
||||
type alias Model msg =
|
||||
{ label : String
|
||||
, icon : Maybe Svg
|
||||
, width : ButtonOrLink () -> ButtonOrLink ()
|
||||
, buttonType : ButtonType
|
||||
, state : ButtonOrLink () -> ButtonOrLink ()
|
||||
, width : ButtonOrLink msg -> ButtonOrLink msg
|
||||
, state : ButtonOrLink msg -> ButtonOrLink msg
|
||||
}
|
||||
|
||||
|
||||
{-| -}
|
||||
init : { r | performance : String, lock : String } -> State
|
||||
init : { r | performance : String, lock : String } -> State msg
|
||||
init assets =
|
||||
Control.record Model
|
||||
|> Control.field "label" (Control.string "Label")
|
||||
|> Control.field "icon" (iconChoice assets)
|
||||
|> Control.field "button type"
|
||||
(Control.choice
|
||||
( "button", Control.value Button )
|
||||
[ ( "link", Control.value Link )
|
||||
]
|
||||
)
|
||||
|> Control.field "width"
|
||||
(Control.choice
|
||||
( "exactWidth 120", Control.value (Button.exactWidth 120) )
|
||||
@ -90,12 +96,6 @@ init assets =
|
||||
, ( "fillContainerWidth", Control.value Button.fillContainerWidth )
|
||||
]
|
||||
)
|
||||
|> Control.field "button type"
|
||||
(Control.choice
|
||||
( "button", Control.value Button )
|
||||
[ ( "link", Control.value Link )
|
||||
]
|
||||
)
|
||||
|> Control.field "state (button only)"
|
||||
(Control.choice
|
||||
( "enabled", Control.value Button.enabled )
|
||||
@ -131,8 +131,8 @@ iconChoice assets =
|
||||
|
||||
|
||||
viewButtonExamples :
|
||||
ModuleMessages Msg parentMsg
|
||||
-> State
|
||||
ModuleMessages (Msg parentMsg) parentMsg
|
||||
-> State parentMsg
|
||||
-> Html parentMsg
|
||||
viewButtonExamples messages (State control) =
|
||||
let
|
||||
@ -159,8 +159,8 @@ viewButtonExamples messages (State control) =
|
||||
|
||||
|
||||
buttons :
|
||||
ModuleMessages Msg parentMsg
|
||||
-> Model
|
||||
ModuleMessages (Msg parentMsg) parentMsg
|
||||
-> Model parentMsg
|
||||
-> Html parentMsg
|
||||
buttons messages model =
|
||||
let
|
||||
@ -232,7 +232,7 @@ buttons messages model =
|
||||
|> table []
|
||||
|
||||
|
||||
toggleButtons : ModuleMessages Msg parentMsg -> Html parentMsg
|
||||
toggleButtons : ModuleMessages (Msg parentMsg) parentMsg -> Html parentMsg
|
||||
toggleButtons messages =
|
||||
div []
|
||||
[ Headings.h3 [ text "Button toggle" ]
|
||||
|
@ -30,7 +30,7 @@ import Url exposing (Url)
|
||||
|
||||
|
||||
type alias ModuleStates =
|
||||
{ buttonExampleState : Examples.Button.State
|
||||
{ buttonExampleState : Examples.Button.State Msg
|
||||
, bannerAlertExampleState : Examples.BannerAlert.State
|
||||
, clickableTextExampleState : Examples.ClickableText.State
|
||||
, checkboxExampleState : Examples.Checkbox.State
|
||||
@ -69,7 +69,7 @@ init =
|
||||
|
||||
|
||||
type Msg
|
||||
= ButtonExampleMsg Examples.Button.Msg
|
||||
= ButtonExampleMsg (Examples.Button.Msg Msg)
|
||||
| BannerAlertExampleMsg Examples.BannerAlert.Msg
|
||||
| ClickableTextExampleMsg Examples.ClickableText.Msg
|
||||
| CheckboxExampleMsg Examples.Checkbox.Msg
|
||||
|
Loading…
Reference in New Issue
Block a user