Skip to content

Commit c9cb598

Browse files
kimispencerkimispencer
authored
[#45 ] add ButtonState; remove disabled & loading props (#66)
[#45 ] add ButtonState; remove disabled & loading props
2 parents 0d380db + 79b87df commit c9cb598

File tree

7 files changed

+73
-35
lines changed

7 files changed

+73
-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 = 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 = 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 = 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 = Loading }
104104
]
105105
, [ h4_ "Loading (Small) "
106106
, example
107-
$ button primary { loading = true, size = Small }
107+
$ button primary { buttonState = Loading, size = Small }
108108
]
109109
, [ h4_ "Loading (Large) "
110110
, example
111-
$ button primary { loading = true, size = Large }
111+
$ button primary { buttonState = Loading, size = Large }
112112
]
113113
, [ h4_ "Loading (ExtraLarge) "
114114
, example
115-
$ button primary { loading = true, size = ExtraLarge }
115+
$ button primary { buttonState = 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 = 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 = Enabled }
3333
]
3434
}
3535
, inputContent: toNullable $ Just $ input text_ { placeholder = "Placeholder..." }

‎docs/Examples/Modal.example.purs‎

Lines changed: 30 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+
, actionButtonState: Button.Enabled
5758
, size: Small
5859
, title: "Modal title -- Small"
5960
, variant: ""
@@ -78,7 +79,29 @@ 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+
, actionButtonState: Button.Disabled
83+
, size: Medium
84+
, title: "Modal title -- Medium"
85+
, variant: ""
86+
, internalBorders: false
87+
, children:
88+
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."
89+
}
90+
91+
, example $
92+
button secondary
93+
{ onPress = capture_ $ self.setState _ { modalId = Just MediumModal }
94+
, title = "Open modal, medium, action button loading"
95+
}
96+
97+
, guard (self.state.modalId == Just MediumModal) $
98+
modal
99+
{ modalOpen: true
100+
, closeButton: true
101+
, onRequestClose: self.setState _ { modalId = Nothing }
102+
, onActionButtonClick: notNull $ self.setState \state -> state { clicks = state.clicks + 1 }
103+
, actionButtonTitle: ""
104+
, actionButtonState: Button.Loading
82105
, size: Medium
83106
, title: "Modal title -- Medium"
84107
, variant: ""
@@ -100,7 +123,7 @@ docs = unit # make component
100123
, onRequestClose: self.setState _ { modalId = Nothing }
101124
, onActionButtonClick: notNull $ self.setState \state -> state { clicks = state.clicks + 1 }
102125
, actionButtonTitle: "Add clicks"
103-
, actionButtonDisabled: false
126+
, actionButtonState: Button.Enabled
104127
, size: Large
105128
, title: "Modal title -- Large"
106129
, variant: ""
@@ -129,7 +152,7 @@ docs = unit # make component
129152
, onRequestClose: self.setState _ { modalId = Nothing }
130153
, onActionButtonClick: notNull $ self.setState \state -> state { clicks = state.clicks + 1 }
131154
, actionButtonTitle: "Add clicks"
132-
, actionButtonDisabled: false
155+
, actionButtonState: Button.Enabled
133156
, size: ExtraLarge
134157
, title: "Modal title -- Extra Large"
135158
, variant: ""
@@ -175,7 +198,7 @@ docs = unit # make component
175198
, onRequestClose: self.setState _ { modalId = Nothing }
176199
, onActionButtonClick: notNull $ self.setState \state -> state { clicks = state.clicks + 1 }
177200
, actionButtonTitle: "Add clicks"
178-
, actionButtonDisabled: false
201+
, actionButtonState: Button.Enabled
179202
, size: Small
180203
, title: "Modal title -- Small"
181204
, variant: ""
@@ -200,7 +223,7 @@ docs = unit # make component
200223
, onRequestClose: self.setState _ { modalId = Nothing }
201224
, onActionButtonClick: notNull $ self.setState \state -> state { clicks = state.clicks + 1 }
202225
, actionButtonTitle: "Add clicks"
203-
, actionButtonDisabled: false
226+
, actionButtonState: Button.Enabled
204227
, size: Large
205228
, title: "Modal title -- Internall scrolling content"
206229
, 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 = 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: 25 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 :: ButtonState
3637
| rest
3738
}
3839

@@ -66,11 +67,19 @@ 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+
Enabled -> false
73+
Disabled -> true
74+
Loading -> false
75+
, "data-loading":
76+
case props.buttonState of
77+
Enabled -> false
78+
Disabled -> false
79+
Loading -> true
7080
, onClick: props.onPress
7181
, style: props.style
7282
, type: props.type
73-
, "data-loading": props.loading
7483
}
7584
where
7685
children =
@@ -82,14 +91,13 @@ defaults :: ButtonProps
8291
defaults =
8392
{ accessibilityLabel: toNullable Nothing
8493
, color: toNullable Nothing
85-
, disabled: false
8694
, onPress: mkEffectFn1 (const $ pure unit)
8795
, size: Medium
8896
, style: css {}
8997
, testId: toNullable Nothing
9098
, title: invisibleSpace
9199
, type: ""
92-
, loading: false
100+
, buttonState: Enabled
93101
}
94102

95103
primary :: ButtonProps
@@ -130,11 +138,19 @@ iconButton = makeStateless iconComponent render
130138
, "data-color": props.color
131139
, "data-size": show props.size
132140
, "data-testid": props.testId
133-
, disabled: props.disabled
134141
, onClick: props.onPress
135142
, style: props.style
136143
, type: props.type
137-
, "data-loading": props.loading
144+
, disabled:
145+
case props.buttonState of
146+
Enabled -> false
147+
Disabled -> true
148+
Loading -> true
149+
, "data-loading":
150+
case props.buttonState of
151+
Enabled -> false
152+
Disabled -> true
153+
Loading -> true
138154
}
139155
where
140156
children =
@@ -156,16 +172,15 @@ iconButtonDefaults :: IconButtonProps
156172
iconButtonDefaults =
157173
{ accessibilityLabel: toNullable Nothing
158174
, color: toNullable Nothing
159-
, disabled: false
160175
, onPress: mkEffectFn1 (const $ pure unit)
161176
, size: Medium
162177
, style: css {}
163178
, testId: toNullable Nothing
164179
, title: invisibleSpace
165180
, type: ""
166-
, loading: false
167181
, iconLeft: Nothing
168182
, iconRight: Nothing
183+
, buttonState: Enabled
169184
}
170185

171186
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+
, actionButtonState: 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+
, actionButtonState :: 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+
, actionButtonState: 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+
, actionButtonState: 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 = props.actionButtonState
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 = if i == props.currentPage then Button.Disabled else Button.Enabled
6565
}
6666
]
6767

0 commit comments

Comments
 (0)