[#45 ] add ButtonState; remove disabled & loading props (#66)

kimispencer · web-flow · commit c9cb598f6e49 · 2019-06-26T18:56:21.000+02:00
[#45 ] add ButtonState; remove disabled & loading props
diff --git a/docs/Examples/Button.example.purs b/docs/Examples/Button.example.purs
@@ -6,7 +6,7 @@ import Data.Array (intercalate)
 import Data.Maybe (Maybe(..))
 import Data.Nullable (toNullable)
 import Lumi.Components.Size (Size(..))
-import Lumi.Components.Button (button, defaults, primary, secondary, linkStyle, iconButton, iconButtonDefaults)
+import Lumi.Components.Button (ButtonState(..), button, defaults, primary, secondary, linkStyle, iconButton, iconButtonDefaults)
 import Lumi.Components.Color (colorNames)
 import Lumi.Components.Column (column_)
 import Lumi.Components.Icon (IconType(..))
@@ -27,7 +27,7 @@ docs =
 
       , [ h2_ "Disabled"
         , example
-            $ button defaults { title = "Button", disabled = true }
+            $ button defaults { title = "Button", buttonState = Disabled }
         ]
 
       , [ h2_ "Size"
@@ -56,7 +56,7 @@ docs =
         ]
       , [ h4_ "Primary + Disabled"
         , example
-            $ button primary { title = "Button", disabled = true }
+            $ button primary { title = "Button", buttonState = Disabled }
         ]
       , [ h4_ "Secondary Medium (default)"
         , example
@@ -76,7 +76,7 @@ docs =
         ]
       , [ h4_ "Secondary + Disabled"
         , example
-            $ button secondary { title = "Button", disabled = true }
+            $ button secondary { title = "Button", buttonState = Disabled }
         ]
       , [ h4_ "Icon button"
         , example
@@ -100,19 +100,19 @@ docs =
         ]
       , [ h4_ "Loading (Medium/default)"
         , example
-            $ button primary { loading = true }
+            $ button primary { buttonState = Loading }
         ]
       , [ h4_ "Loading (Small) "
         , example
-            $ button primary { loading = true, size = Small }
+            $ button primary { buttonState = Loading, size = Small }
         ]
       , [ h4_ "Loading (Large) "
         , example
-            $ button primary { loading = true, size = Large }
+            $ button primary { buttonState = Loading, size = Large }
         ]
       , [ h4_ "Loading (ExtraLarge) "
         , example
-            $ button primary { loading = true, size = ExtraLarge }
+            $ button primary { buttonState = Loading, size = ExtraLarge }
         ]
       ]
 
diff --git a/docs/Examples/InputGroup.example.purs b/docs/Examples/InputGroup.example.purs
@@ -4,7 +4,7 @@ import Prelude
 
 import Data.Maybe (Maybe(..))
 import Data.Nullable (toNullable)
-import Lumi.Components.Button (button, defaults, secondary)
+import Lumi.Components.Button (ButtonState(..), button, defaults, secondary)
 import Lumi.Components.Column (column_)
 import Lumi.Components.Input (input, text_)
 import Lumi.Components.InputGroup (inputGroup)
@@ -23,13 +23,13 @@ docs =
             , addOnLeft:
                 toNullable $ Just $ R.div
                   { children:
-                    [ button defaults { title = "Button", disabled = false }
+                    [ button defaults { title = "Button", buttonState = Enabled }
                     ]
                   }
             , addOnRight:
                 toNullable $ Just $ R.div
                   { children:
-                    [ button defaults { title = "Button", disabled = false }
+                    [ button defaults { title = "Button", buttonState = Enabled }
                     ]
                   }
             , inputContent: toNullable $ Just $ input text_ { placeholder = "Placeholder..." }
diff --git a/docs/Examples/Modal.example.purs b/docs/Examples/Modal.example.purs
@@ -5,7 +5,8 @@ import Prelude
 import Data.Maybe (Maybe(..))
 import Data.Monoid (guard)
 import Data.Nullable (notNull, null)
-import Lumi.Components.Button (button, secondary)
+import Lumi.Components.Button as Button
+import Lumi.Components.Button (ButtonState(..), button, secondary)
 import Lumi.Components.Column (column_)
 import Lumi.Components.Modal (dialog, errorModal, modal)
 import Lumi.Components.Size (Size(..))
@@ -53,7 +54,7 @@ docs = unit # make component
               , onRequestClose: self.setState _ { modalId = Nothing }
               , onActionButtonClick: notNull $ self.setState \state -> state { clicks = state.clicks + 1 }
               , actionButtonTitle: "Add clicks"
-              , actionButtonDisabled: false
+              , actionButtonState: Button.Enabled
               , size: Small
               , title: "Modal title -- Small"
               , variant: ""
@@ -78,7 +79,29 @@ docs = unit # make component
               , onRequestClose: self.setState _ { modalId = Nothing }
               , onActionButtonClick: notNull $ self.setState \state -> state { clicks = state.clicks + 1 }
               , actionButtonTitle: "Add clicks"
-              , actionButtonDisabled: true
+              , actionButtonState: Button.Disabled
+              , size: Medium
+              , title: "Modal title -- Medium"
+              , variant: ""
+              , internalBorders: false
+              , children:
+                  body_ "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam pretium nec tellus ornare tincidunt. Phasellus ultrices porta finibus. In id mollis diam. Praesent efficitur lectus quis odio convallis placerat. Suspendisse metus tortor, faucibus nec imperdiet quis, iaculis id risus. Pellentesque a auctor turpis, a lacinia nulla. Pellentesque malesuada suscipit ante, sed convallis est pharetra eu. In sed enim nec lacus dignissim malesuada. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In metus arcu, efficitur et magna a, fermentum lacinia nulla. Mauris ligula erat, posuere sed diam a, sodales vestibulum ante."
+              }
+
+        , example $
+            button secondary
+              { onPress = capture_ $ self.setState _ { modalId = Just MediumModal }
+              , title = "Open modal, medium, action button loading"
+              }
+
+        , guard (self.state.modalId == Just MediumModal) $
+            modal
+              { modalOpen: true
+              , closeButton: true
+              , onRequestClose: self.setState _ { modalId = Nothing }
+              , onActionButtonClick: notNull $ self.setState \state -> state { clicks = state.clicks + 1 }
+              , actionButtonTitle: ""
+              , actionButtonState: Button.Loading
               , size: Medium
               , title: "Modal title -- Medium"
               , variant: ""
@@ -100,7 +123,7 @@ docs = unit # make component
               , onRequestClose: self.setState _ { modalId = Nothing }
               , onActionButtonClick: notNull $ self.setState \state -> state { clicks = state.clicks + 1 }
               , actionButtonTitle: "Add clicks"
-              , actionButtonDisabled: false
+              , actionButtonState: Button.Enabled
               , size: Large
               , title: "Modal title -- Large"
               , variant: ""
@@ -129,7 +152,7 @@ docs = unit # make component
               , onRequestClose: self.setState _ { modalId = Nothing }
               , onActionButtonClick: notNull $ self.setState \state -> state { clicks = state.clicks + 1 }
               , actionButtonTitle: "Add clicks"
-              , actionButtonDisabled: false
+              , actionButtonState: Button.Enabled
               , size: ExtraLarge
               , title: "Modal title -- Extra Large"
               , variant: ""
@@ -175,7 +198,7 @@ docs = unit # make component
               , onRequestClose: self.setState _ { modalId = Nothing }
               , onActionButtonClick: notNull $ self.setState \state -> state { clicks = state.clicks + 1 }
               , actionButtonTitle: "Add clicks"
-              , actionButtonDisabled: false
+              , actionButtonState: Button.Enabled
               , size: Small
               , title: "Modal title -- Small"
               , variant: ""
@@ -200,7 +223,7 @@ docs = unit # make component
               , onRequestClose: self.setState _ { modalId = Nothing }
               , onActionButtonClick: notNull $ self.setState \state -> state { clicks = state.clicks + 1 }
               , actionButtonTitle: "Add clicks"
-              , actionButtonDisabled: false
+              , actionButtonState: Button.Enabled
               , size: Large
               , title: "Modal title -- Internall scrolling content"
               , variant: "internal-scrolling"
diff --git a/docs/Examples/Wizard.example.purs b/docs/Examples/Wizard.example.purs
@@ -87,7 +87,7 @@ docs = unit # make (createComponent "WizardExample") { initialState, render }
                             in
                               [ Button.button Button.secondary
                                   { title = "Back"
-                                  , disabled = isNothing previousStepM
+                                  , buttonState = if isNothing previousStepM then Button.Disabled else Button.Enabled
                                   , onPress = maybe (mkEffectFn1 mempty) (capture identity <<< const <<< send self <<< SetWizardStep) previousStepM
                                   }
                               , Button.button Button.primary
diff --git a/src/Lumi/Components/Button.purs b/src/Lumi/Components/Button.purs
@@ -22,17 +22,18 @@ import React.Basic.DOM (CSS, css, unsafeCreateDOMComponent)
 import React.Basic.DOM as R
 import React.Basic.Events (EventHandler)
 
+data ButtonState = Enabled | Disabled | Loading
+
 type CommonButtonProps rest =
   { accessibilityLabel :: Nullable String
   , color :: Nullable ColorName
-  , disabled :: Boolean
   , onPress :: EventHandler
   , size :: Size
   , style :: CSS
   , testId :: Nullable String
   , title :: String
   , type :: String
-  , loading :: Boolean
+  , buttonState :: ButtonState
   | rest
   }
 
@@ -66,11 +67,19 @@ button = makeStateless component render
             , "data-color": props.color
             , "data-size": show props.size
             , "data-testid": props.testId
-            , disabled: props.disabled
+            , disabled:
+                case props.buttonState of
+                  Enabled -> false
+                  Disabled -> true
+                  Loading -> false
+            , "data-loading":
+                case props.buttonState of
+                  Enabled -> false
+                  Disabled -> false
+                  Loading -> true
             , onClick: props.onPress
             , style: props.style
             , type: props.type
-            , "data-loading": props.loading
             }
       where
         children =
@@ -82,14 +91,13 @@ defaults :: ButtonProps
 defaults =
   { accessibilityLabel: toNullable Nothing
   , color: toNullable Nothing
-  , disabled: false
   , onPress: mkEffectFn1 (const $ pure unit)
   , size: Medium
   , style: css {}
   , testId: toNullable Nothing
   , title: invisibleSpace
   , type: ""
-  , loading: false
+  , buttonState: Enabled
   }
 
 primary :: ButtonProps
@@ -130,11 +138,19 @@ iconButton = makeStateless iconComponent render
         , "data-color": props.color
         , "data-size": show props.size
         , "data-testid": props.testId
-        , disabled: props.disabled
         , onClick: props.onPress
         , style: props.style
         , type: props.type
-        , "data-loading": props.loading
+        , disabled:
+            case props.buttonState of
+              Enabled -> false
+              Disabled -> true
+              Loading -> true
+        , "data-loading":
+            case props.buttonState of
+              Enabled -> false
+              Disabled -> true
+              Loading -> true
         }
       where
         children =
@@ -156,16 +172,15 @@ iconButtonDefaults :: IconButtonProps
 iconButtonDefaults =
   { accessibilityLabel: toNullable Nothing
   , color: toNullable Nothing
-  , disabled: false
   , onPress: mkEffectFn1 (const $ pure unit)
   , size: Medium
   , style: css {}
   , testId: toNullable Nothing
   , title: invisibleSpace
   , type: ""
-  , loading: false
   , iconLeft: Nothing
   , iconRight: Nothing
+  , buttonState: Enabled
   }
 
 styles :: JSS
diff --git a/src/Lumi/Components/Modal.purs b/src/Lumi/Components/Modal.purs
@@ -99,7 +99,7 @@ modalLink = make modalLinkComponent { initialState, didMount, render }
                       self.setState _ { modalOpen = false }
                       props.onChange value_
                   , actionButtonTitle: props.actionButtonTitle
-                  , actionButtonDisabled: false
+                  , actionButtonState: Button.Enabled
                   , size: Medium
                   , variant: ""
                   , closeButton: true
@@ -124,7 +124,7 @@ type CommonProps rest =
   { modalOpen :: Boolean
   , onActionButtonClick :: Nullable (Effect Unit)
   , actionButtonTitle :: String
-  , actionButtonDisabled :: Boolean
+  , actionButtonState :: Button.ButtonState
   , size :: Size
   , variant :: String
   , children :: JSX
@@ -166,7 +166,7 @@ dialog = makeStateless dialogComponent render
         , onRequestClose: props.onRequestClose
         , onActionButtonClick: props.onActionButtonClick
         , actionButtonTitle: props.actionButtonTitle
-        , actionButtonDisabled: false
+        , actionButtonState: Button.Enabled
         , size: props.size
         , variant: "dialog"
         , children:
@@ -199,7 +199,7 @@ errorModal = makeStateless errorModalComponent render
         , onRequestClose: props.onRequestClose
         , onActionButtonClick: props.onActionButtonClick
         , actionButtonTitle: props.actionButtonTitle
-        , actionButtonDisabled: false
+        , actionButtonState: Button.Enabled
         , size: Small
         , variant: ""
         , children: props.children
@@ -279,7 +279,7 @@ modalPortal = toReactComponent identity modalPortalComponent
                                     , toMaybe props.onActionButtonClick # foldMap \actionFn ->
                                         Button.button Button.primary
                                           { title = props.actionButtonTitle
-                                          , disabled = props.actionButtonDisabled
+                                          , buttonState = props.actionButtonState
                                           , onPress = mkEffectFn1 \_ -> actionFn
                                           , style = R.css { marginLeft: "1.2rem" }
                                           }
diff --git a/src/Lumi/Components/Pagination.purs b/src/Lumi/Components/Pagination.purs
@@ -61,7 +61,7 @@ pagination = makeStateless (createComponent "Pagination") render
                 [ Button.button Button.secondary
                     { title = show (i + 1)
                     , onPress = handler_ $ props.onChange i
-                    , disabled = i == props.currentPage
+                    , buttonState = if i == props.currentPage then Button.Disabled else Button.Enabled
                     }
                 ]
 

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@ import Data.Array (intercalate)`
`6`	`6`	`import Data.Maybe (Maybe(..))`
`7`	`7`	`import Data.Nullable (toNullable)`
`8`	`8`	`import Lumi.Components.Size (Size(..))`
`9`		`-import Lumi.Components.Button (button, defaults, primary, secondary, linkStyle, iconButton, iconButtonDefaults)`
	`9`	`+import Lumi.Components.Button (ButtonState(..), button, defaults, primary, secondary, linkStyle, iconButton, iconButtonDefaults)`
`10`	`10`	`import Lumi.Components.Color (colorNames)`
`11`	`11`	`import Lumi.Components.Column (column_)`
`12`	`12`	`import Lumi.Components.Icon (IconType(..))`
`@@ -27,7 +27,7 @@ docs =`
`27`	`27`
`28`	`28`	`, [ h2_ "Disabled"`
`29`	`29`	`, example`
`30`		`- $ button defaults { title = "Button", disabled = true }`
	`30`	`+ $ button defaults { title = "Button", buttonState = Disabled }`
`31`	`31`	`]`
`32`	`32`
`33`	`33`	`, [ h2_ "Size"`
`@@ -56,7 +56,7 @@ docs =`
`56`	`56`	`]`
`57`	`57`	`, [ h4_ "Primary + Disabled"`
`58`	`58`	`, example`
`59`		`- $ button primary { title = "Button", disabled = true }`
	`59`	`+ $ button primary { title = "Button", buttonState = Disabled }`
`60`	`60`	`]`
`61`	`61`	`, [ h4_ "Secondary Medium (default)"`
`62`	`62`	`, example`
`@@ -76,7 +76,7 @@ docs =`
`76`	`76`	`]`
`77`	`77`	`, [ h4_ "Secondary + Disabled"`
`78`	`78`	`, example`
`79`		`- $ button secondary { title = "Button", disabled = true }`
	`79`	`+ $ button secondary { title = "Button", buttonState = Disabled }`
`80`	`80`	`]`
`81`	`81`	`, [ h4_ "Icon button"`
`82`	`82`	`, example`
`@@ -100,19 +100,19 @@ docs =`
`100`	`100`	`]`
`101`	`101`	`, [ h4_ "Loading (Medium/default)"`
`102`	`102`	`, example`
`103`		`- $ button primary { loading = true }`
	`103`	`+ $ button primary { buttonState = Loading }`
`104`	`104`	`]`
`105`	`105`	`, [ h4_ "Loading (Small) "`
`106`	`106`	`, example`
`107`		`- $ button primary { loading = true, size = Small }`
	`107`	`+ $ button primary { buttonState = Loading, size = Small }`
`108`	`108`	`]`
`109`	`109`	`, [ h4_ "Loading (Large) "`
`110`	`110`	`, example`
`111`		`- $ button primary { loading = true, size = Large }`
	`111`	`+ $ button primary { buttonState = Loading, size = Large }`
`112`	`112`	`]`
`113`	`113`	`, [ h4_ "Loading (ExtraLarge) "`
`114`	`114`	`, example`
`115`		`- $ button primary { loading = true, size = ExtraLarge }`
	`115`	`+ $ button primary { buttonState = Loading, size = ExtraLarge }`
`116`	`116`	`]`
`117`	`117`	`]`
`118`	`118`
Original file line number	Diff line number	Diff line change
`@@ -4,7 +4,7 @@ import Prelude`
`4`	`4`
`5`	`5`	`import Data.Maybe (Maybe(..))`
`6`	`6`	`import Data.Nullable (toNullable)`
`7`		`-import Lumi.Components.Button (button, defaults, secondary)`
	`7`	`+import Lumi.Components.Button (ButtonState(..), button, defaults, secondary)`
`8`	`8`	`import Lumi.Components.Column (column_)`
`9`	`9`	`import Lumi.Components.Input (input, text_)`
`10`	`10`	`import Lumi.Components.InputGroup (inputGroup)`
`@@ -23,13 +23,13 @@ docs =`
`23`	`23`	`, addOnLeft:`
`24`	`24`	`toNullable $ Just $ R.div`
`25`	`25`	`{ children:`
`26`		`- [ button defaults { title = "Button", disabled = false }`
	`26`	`+ [ button defaults { title = "Button", buttonState = Enabled }`
`27`	`27`	`]`
`28`	`28`	`}`
`29`	`29`	`, addOnRight:`
`30`	`30`	`toNullable $ Just $ R.div`
`31`	`31`	`{ children:`
`32`		`- [ button defaults { title = "Button", disabled = false }`
	`32`	`+ [ button defaults { title = "Button", buttonState = Enabled }`
`33`	`33`	`]`
`34`	`34`	`}`
`35`	`35`	`, inputContent: toNullable $ Just $ input text_ { placeholder = "Placeholder..." }`
Original file line number	Diff line number	Diff line change
`@@ -87,7 +87,7 @@ docs = unit # make (createComponent "WizardExample") { initialState, render }`
`87`	`87`	`in`
`88`	`88`	`[ Button.button Button.secondary`
`89`	`89`	`{ title = "Back"`
`90`		`- , disabled = isNothing previousStepM`
	`90`	`+ , buttonState = if isNothing previousStepM then Button.Disabled else Button.Enabled`
`91`	`91`	`, onPress = maybe (mkEffectFn1 mempty) (capture identity <<< const <<< send self <<< SetWizardStep) previousStepM`
`92`	`92`	`}`
`93`	`93`	`, Button.button Button.primary`
Original file line number	Diff line number	Diff line change
`@@ -61,7 +61,7 @@ pagination = makeStateless (createComponent "Pagination") render`
`61`	`61`	`[ Button.button Button.secondary`
`62`	`62`	`{ title = show (i + 1)`
`63`	`63`	`, onPress = handler_ $ props.onChange i`
`64`		`- , disabled = i == props.currentPage`
	`64`	`+ , buttonState = if i == props.currentPage then Button.Disabled else Button.Enabled`
`65`	`65`	`}`
`66`	`66`	`]`
`67`	`67`