From 83486fbf2f97236c67de4d07266956c328283f4e Mon Sep 17 00:00:00 2001 From: Alex Perkins Date: Thu, 18 Nov 2021 18:14:44 -0500 Subject: [PATCH] move valueToString into the list API --- src/Nri/Ui/RadioButton/V3.elm | 30 ++++++++-------- styleguide-app/Examples/RadioButton.elm | 47 +++++++++++++++++-------- 2 files changed, 49 insertions(+), 28 deletions(-) diff --git a/src/Nri/Ui/RadioButton/V3.elm b/src/Nri/Ui/RadioButton/V3.elm index 61f0c387..7e4123c3 100644 --- a/src/Nri/Ui/RadioButton/V3.elm +++ b/src/Nri/Ui/RadioButton/V3.elm @@ -1,9 +1,9 @@ module Nri.Ui.RadioButton.V3 exposing ( view , disabled, enabled - , value, selectedValue - , name + , value, selectedValue, valueToString , onSelect + , name ) {-| Changes from V2: @@ -12,8 +12,8 @@ module Nri.Ui.RadioButton.V3 exposing @docs view @docs disabled, enabled -@docs value, selectedValue -@docs docs onSelect +@docs value, selectedValue, valueToString +@docs onSelect @docs name -} @@ -87,6 +87,11 @@ onSelect onSelect_ = Attribute { emptyEventsAndValues | onSelect = Just onSelect_ } identity +valueToString : (value -> String) -> Attribute value msg +valueToString valueToString_ = + Attribute { emptyEventsAndValues | valueToString = Just valueToString_ } identity + + {-| Customizations for the RadioButton. -} type Attribute value msg @@ -169,7 +174,6 @@ If used in a group, all radio buttons in the group should have the same name att -} view : { label : String - , valueToString : value -> String } -> List (Attribute value msg) -> Html msg @@ -178,21 +182,19 @@ view config = { label = config.label , isLocked = False , premiumMsg = Nothing - , valueToString = config.valueToString , showPennant = False } -type alias InternalConfig value msg = +type alias InternalConfig msg = { label : String , isLocked : Bool , premiumMsg : Maybe msg - , valueToString : value -> String , showPennant : Bool } -internalView : InternalConfig value msg -> List (Attribute value msg) -> Html msg +internalView : InternalConfig msg -> List (Attribute value msg) -> Html msg internalView config attributes = let isChecked = @@ -209,15 +211,15 @@ internalView config attributes = config_ = applyConfig attributes - unvalidatedRadioConfig : ( Maybe value, Maybe String ) + unvalidatedRadioConfig : ( Maybe value, Maybe String, Maybe (value -> String) ) unvalidatedRadioConfig = - ( eventsAndValues.value, config_.name ) + ( eventsAndValues.value, config_.name, eventsAndValues.valueToString ) in case unvalidatedRadioConfig of - ( Just value_, Just name_ ) -> + ( Just value_, Just name_, Just valueToString_ ) -> let id_ = - name_ ++ "-" ++ dasherize (toLower (config.valueToString value_)) + name_ ++ "-" ++ dasherize (toLower (valueToString_ value_)) in Html.span [ id (id_ ++ "-container") @@ -237,7 +239,7 @@ internalView config attributes = ] ] [ radio name_ - (config.valueToString value_) + (valueToString_ value_) isChecked [ id id_ , Widget.disabled (config.isLocked || config_.isDisabled) diff --git a/styleguide-app/Examples/RadioButton.elm b/styleguide-app/Examples/RadioButton.elm index b5a7f12c..9b33ca39 100644 --- a/styleguide-app/Examples/RadioButton.elm +++ b/styleguide-app/Examples/RadioButton.elm @@ -86,41 +86,60 @@ viewVanilla : State -> Html Msg viewVanilla state = div [] [ RadioButton.view - { label = "Cats" - , valueToString = identity + { label = selectionToString Dogs } [ RadioButton.enabled - , RadioButton.value "Felines" - , RadioButton.name "radio-button-examples" + , RadioButton.value Dogs + , RadioButton.name "pets" , RadioButton.selectedValue state.selectedValue , RadioButton.onSelect Select + , RadioButton.valueToString selectionToString ] , RadioButton.view - { label = "Dogs" - , valueToString = identity + { label = selectionToString Cats } [ RadioButton.enabled - , RadioButton.value "Canines" - , RadioButton.name "radio-button-examples" + , RadioButton.value Cats + , RadioButton.name "pets" , RadioButton.selectedValue state.selectedValue , RadioButton.onSelect Select + , RadioButton.valueToString selectionToString ] , RadioButton.view - { label = "Robots" - , valueToString = identity + { label = selectionToString Robots } [ RadioButton.disabled - , RadioButton.value "Robots" - , RadioButton.name "radio-button-examples" + , RadioButton.value Robots + , RadioButton.name "pets" , RadioButton.selectedValue state.selectedValue , RadioButton.onSelect Select + , RadioButton.valueToString selectionToString ] ] +type Selection + = Dogs + | Cats + | Robots + + +selectionToString : Selection -> String +selectionToString selection = + case selection of + Dogs -> + "Dogs" + + Cats -> + "Cats" + + Robots -> + "Robots" + + {-| -} type alias State = - { selectedValue : Maybe String + { selectedValue : Maybe Selection , modal : Modal.Model , premiumControl : Control PremiumConfig } @@ -157,7 +176,7 @@ type Msg = OpenModal String | ModalMsg Modal.Msg | CloseModal - | Select String + | Select Selection | SetPremiumControl (Control PremiumConfig) | Focus String | Focused (Result Dom.Error ())