Skip to content

Commit 1a78e4e

Browse files
kimispencerkimispencer
committed
add ButtonState; remove disabled & loading props
1 parent dff1da0 commit 1a78e4e

File tree

7 files changed

+55
-35
lines changed

7 files changed

+55
-35
lines changed

‎docs/Examples/Button.example.purs‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Data.Array (intercalate)
66
import Data.Maybe (Maybe(..))
77
import Data.Nullable (toNullable)
88
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)
1010
import Lumi.Components.Color (colorNames)
1111
import Lumi.Components.Column (column_)
1212
import Lumi.Components.Icon (IconType(..))
@@ -27,7 +27,7 @@ docs =
2727

2828
, [ h2_ "Disabled"
2929
, example
30-
$ button defaults { title = "Button", disabled = true }
30+
$ button defaults { title = "Button", buttonState = Just $ Disabled }
3131
]
3232

3333
, [ h2_ "Size"
@@ -56,7 +56,7 @@ docs =
5656
]
5757
, [ h4_ "Primary + Disabled"
5858
, example
59-
$ button primary { title = "Button", disabled = true }
59+
$ button primary { title = "Button", buttonState = Just $ Disabled }
6060
]
6161
, [ h4_ "Secondary Medium (default)"
6262
, example
@@ -76,7 +76,7 @@ docs =
7676
]
7777
, [ h4_ "Secondary + Disabled"
7878
, example
79-
$ button secondary { title = "Button", disabled = true }
79+
$ button secondary { title = "Button", buttonState = Just $ Disabled }
8080
]
8181
, [ h4_ "Icon button"
8282
, example
@@ -100,19 +100,19 @@ docs =
100100
]
101101
, [ h4_ "Loading (Medium/default)"
102102
, example
103-
$ button primary { loading = true }
103+
$ button primary { buttonState = Just $ Loading }
104104
]
105105
, [ h4_ "Loading (Small) "
106106
, example
107-
$ button primary { loading = true, size = Small }
107+
$ button primary { buttonState = Just $ Loading, size = Small }
108108
]
109109
, [ h4_ "Loading (Large) "
110110
, example
111-
$ button primary { loading = true, size = Large }
111+
$ button primary { buttonState = Just $ Loading, size = Large }
112112
]
113113
, [ h4_ "Loading (ExtraLarge) "
114114
, example
115-
$ button primary { loading = true, size = ExtraLarge }
115+
$ button primary { buttonState = Just $ Loading, size = ExtraLarge }
116116
]
117117
]
118118

‎docs/Examples/InputGroup.example.purs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import Prelude
44

55
import Data.Maybe (Maybe(..))
66
import Data.Nullable (toNullable)
7-
import Lumi.Components.Button (button, defaults, secondary)
7+
import Lumi.Components.Button (ButtonState(..), button, defaults, secondary)
88
import Lumi.Components.Column (column_)
99
import Lumi.Components.Input (input, text_)
1010
import Lumi.Components.InputGroup (inputGroup)
@@ -23,13 +23,13 @@ docs =
2323
, addOnLeft:
2424
toNullable $ Just $ R.div
2525
{ children:
26-
[ button defaults { title = "Button", disabled = false }
26+
[ button defaults { title = "Button", buttonState = Just $ Enabled }
2727
]
2828
}
2929
, addOnRight:
3030
toNullable $ Just $ R.div
3131
{ children:
32-
[ button defaults { title = "Button", disabled = false }
32+
[ button defaults { title = "Button", buttonState = Just $ Enabled }
3333
]
3434
}
3535
, inputContent: toNullable $ Just $ input text_ { placeholder = "Placeholder..." }

‎docs/Examples/Modal.example.purs‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import Prelude
55
import Data.Maybe (Maybe(..))
66
import Data.Monoid (guard)
77
import Data.Nullable (notNull, null)
8-
import Lumi.Components.Button (button, secondary)
8+
import Lumi.Components.Button as Button
9+
import Lumi.Components.Button (ButtonState(..), button, secondary)
910
import Lumi.Components.Column (column_)
1011
import Lumi.Components.Modal (dialog, errorModal, modal)
1112
import Lumi.Components.Size (Size(..))
@@ -53,7 +54,7 @@ docs = unit # make component
5354
, onRequestClose: self.setState _ { modalId = Nothing }
5455
, onActionButtonClick: notNull $ self.setState \state -> state { clicks = state.clicks + 1 }
5556
, actionButtonTitle: "Add clicks"
56-
, actionButtonDisabled: false
57+
, actionButtonDisabled: Button.Enabled
5758
, size: Small
5859
, title: "Modal title -- Small"
5960
, variant: ""
@@ -78,7 +79,7 @@ docs = unit # make component
7879
, onRequestClose: self.setState _ { modalId = Nothing }
7980
, onActionButtonClick: notNull $ self.setState \state -> state { clicks = state.clicks + 1 }
8081
, actionButtonTitle: "Add clicks"
81-
, actionButtonDisabled: true
82+
, actionButtonDisabled: Button.Disabled
8283
, size: Medium
8384
, title: "Modal title -- Medium"
8485
, variant: ""
@@ -100,7 +101,7 @@ docs = unit # make component
100101
, onRequestClose: self.setState _ { modalId = Nothing }
101102
, onActionButtonClick: notNull $ self.setState \state -> state { clicks = state.clicks + 1 }
102103
, actionButtonTitle: "Add clicks"
103-
, actionButtonDisabled: false
104+
, actionButtonDisabled: Button.Enabled
104105
, size: Large
105106
, title: "Modal title -- Large"
106107
, variant: ""
@@ -129,7 +130,7 @@ docs = unit # make component
129130
, onRequestClose: self.setState _ { modalId = Nothing }
130131
, onActionButtonClick: notNull $ self.setState \state -> state { clicks = state.clicks + 1 }
131132
, actionButtonTitle: "Add clicks"
132-
, actionButtonDisabled: false
133+
, actionButtonDisabled: Button.Enabled
133134
, size: ExtraLarge
134135
, title: "Modal title -- Extra Large"
135136
, variant: ""
@@ -175,7 +176,7 @@ docs = unit # make component
175176
, onRequestClose: self.setState _ { modalId = Nothing }
176177
, onActionButtonClick: notNull $ self.setState \state -> state { clicks = state.clicks + 1 }
177178
, actionButtonTitle: "Add clicks"
178-
, actionButtonDisabled: false
179+
, actionButtonDisabled: Button.Enabled
179180
, size: Small
180181
, title: "Modal title -- Small"
181182
, variant: ""
@@ -200,7 +201,7 @@ docs = unit # make component
200201
, onRequestClose: self.setState _ { modalId = Nothing }
201202
, onActionButtonClick: notNull $ self.setState \state -> state { clicks = state.clicks + 1 }
202203
, actionButtonTitle: "Add clicks"
203-
, actionButtonDisabled: false
204+
, actionButtonDisabled: Button.Enabled
204205
, size: Large
205206
, title: "Modal title -- Internall scrolling content"
206207
, variant: "internal-scrolling"

‎docs/Examples/Wizard.example.purs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ docs = unit # make (createComponent "WizardExample") { initialState, render }
8787
in
8888
[ Button.button Button.secondary
8989
{ title = "Back"
90-
, disabled = isNothing previousStepM
90+
, buttonState = Just $ if isNothing previousStepM then Button.Disabled else Button.Enabled
9191
, onPress = maybe (mkEffectFn1 mempty) (capture identity <<< const <<< send self <<< SetWizardStep) previousStepM
9292
}
9393
, Button.button Button.primary

‎src/Lumi/Components/Button.purs‎

Lines changed: 29 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,17 +22,18 @@ import React.Basic.DOM (CSS, css, unsafeCreateDOMComponent)
2222
import React.Basic.DOM as R
2323
import React.Basic.Events (EventHandler)
2424

25+
data ButtonState = Enabled | Disabled | Loading
26+
2527
type CommonButtonProps rest =
2628
{ accessibilityLabel :: Nullable String
2729
, color :: Nullable ColorName
28-
, disabled :: Boolean
2930
, onPress :: EventHandler
3031
, size :: Size
3132
, style :: CSS
3233
, testId :: Nullable String
3334
, title :: String
3435
, type :: String
35-
, loading :: Boolean
36+
, buttonState :: Maybe ButtonState
3637
| rest
3738
}
3839

@@ -66,11 +67,21 @@ button = makeStateless component render
6667
, "data-color": props.color
6768
, "data-size": show props.size
6869
, "data-testid": props.testId
69-
, disabled: props.disabled
70+
, disabled:
71+
case props.buttonState of
72+
Just Enabled -> false
73+
Just Disabled -> true
74+
Just Loading -> false
75+
Nothing -> false
76+
, "data-loading":
77+
case props.buttonState of
78+
Just Enabled -> false
79+
Just Disabled -> false
80+
Just Loading -> true
81+
Nothing -> false
7082
, onClick: props.onPress
7183
, style: props.style
7284
, type: props.type
73-
, "data-loading": props.loading
7485
}
7586
where
7687
children =
@@ -82,14 +93,13 @@ defaults :: ButtonProps
8293
defaults =
8394
{ accessibilityLabel: toNullable Nothing
8495
, color: toNullable Nothing
85-
, disabled: false
8696
, onPress: mkEffectFn1 (const $ pure unit)
8797
, size: Medium
8898
, style: css {}
8999
, testId: toNullable Nothing
90100
, title: invisibleSpace
91101
, type: ""
92-
, loading: false
102+
, buttonState: Nothing
93103
}
94104

95105
primary :: ButtonProps
@@ -130,11 +140,21 @@ iconButton = makeStateless iconComponent render
130140
, "data-color": props.color
131141
, "data-size": show props.size
132142
, "data-testid": props.testId
133-
, disabled: props.disabled
134143
, onClick: props.onPress
135144
, style: props.style
136145
, type: props.type
137-
, "data-loading": props.loading
146+
, disabled:
147+
case props.buttonState of
148+
Just Enabled -> false
149+
Just Disabled -> true
150+
Just Loading -> true
151+
Nothing -> false
152+
, "data-loading":
153+
case props.buttonState of
154+
Just Enabled -> false
155+
Just Disabled -> true
156+
Just Loading -> true
157+
Nothing -> false
138158
}
139159
where
140160
children =
@@ -156,16 +176,15 @@ iconButtonDefaults :: IconButtonProps
156176
iconButtonDefaults =
157177
{ accessibilityLabel: toNullable Nothing
158178
, color: toNullable Nothing
159-
, disabled: false
160179
, onPress: mkEffectFn1 (const $ pure unit)
161180
, size: Medium
162181
, style: css {}
163182
, testId: toNullable Nothing
164183
, title: invisibleSpace
165184
, type: ""
166-
, loading: false
167185
, iconLeft: Nothing
168186
, iconRight: Nothing
187+
, buttonState: Nothing
169188
}
170189

171190
styles :: JSS

‎src/Lumi/Components/Modal.purs‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -99,7 +99,7 @@ modalLink = make modalLinkComponent { initialState, didMount, render }
9999
self.setState _ { modalOpen = false }
100100
props.onChange value_
101101
, actionButtonTitle: props.actionButtonTitle
102-
, actionButtonDisabled: false
102+
, actionButtonDisabled: Button.Enabled
103103
, size: Medium
104104
, variant: ""
105105
, closeButton: true
@@ -124,7 +124,7 @@ type CommonProps rest =
124124
{ modalOpen :: Boolean
125125
, onActionButtonClick :: Nullable (Effect Unit)
126126
, actionButtonTitle :: String
127-
, actionButtonDisabled :: Boolean
127+
, actionButtonDisabled :: Button.ButtonState
128128
, size :: Size
129129
, variant :: String
130130
, children :: JSX
@@ -166,7 +166,7 @@ dialog = makeStateless dialogComponent render
166166
, onRequestClose: props.onRequestClose
167167
, onActionButtonClick: props.onActionButtonClick
168168
, actionButtonTitle: props.actionButtonTitle
169-
, actionButtonDisabled: false
169+
, actionButtonDisabled: Button.Enabled
170170
, size: props.size
171171
, variant: "dialog"
172172
, children:
@@ -199,7 +199,7 @@ errorModal = makeStateless errorModalComponent render
199199
, onRequestClose: props.onRequestClose
200200
, onActionButtonClick: props.onActionButtonClick
201201
, actionButtonTitle: props.actionButtonTitle
202-
, actionButtonDisabled: false
202+
, actionButtonDisabled: Button.Enabled
203203
, size: Small
204204
, variant: ""
205205
, children: props.children
@@ -279,7 +279,7 @@ modalPortal = toReactComponent identity modalPortalComponent
279279
, toMaybe props.onActionButtonClick # foldMap \actionFn ->
280280
Button.button Button.primary
281281
{ title = props.actionButtonTitle
282-
, disabled = props.actionButtonDisabled
282+
, buttonState = Just $ props.actionButtonDisabled
283283
, onPress = mkEffectFn1 \_ -> actionFn
284284
, style = R.css { marginLeft: "1.2rem" }
285285
}

‎src/Lumi/Components/Pagination.purs‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ pagination = makeStateless (createComponent "Pagination") render
6161
[ Button.button Button.secondary
6262
{ title = show (i + 1)
6363
, onPress = handler_ $ props.onChange i
64-
, disabled = i == props.currentPage
64+
, buttonState = Just $ if i == props.currentPage then Button.Disabled else Button.Enabled
6565
}
6666
]
6767

0 commit comments

Comments
 (0)