@dhis2-ui/button 8.16.0-alpha.2 → 8.16.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -183,8 +183,10 @@ DropdownButton.propTypes = {
|
|
|
183
183
|
component: _propTypes2.default.element,
|
|
184
184
|
dataTest: _propTypes2.default.string,
|
|
185
185
|
|
|
186
|
-
/**
|
|
187
|
-
|
|
186
|
+
/**
|
|
187
|
+
* Applies 'destructive' button appearance, implying a dangerous action.
|
|
188
|
+
*/
|
|
189
|
+
destructive: _propTypes2.default.bool,
|
|
188
190
|
|
|
189
191
|
/** Make the button non-interactive */
|
|
190
192
|
disabled: _propTypes2.default.bool,
|
|
@@ -200,11 +202,15 @@ DropdownButton.propTypes = {
|
|
|
200
202
|
/** Controls popper visibility. When implementing this prop the component becomes a controlled component */
|
|
201
203
|
open: _propTypes2.default.bool,
|
|
202
204
|
|
|
203
|
-
/**
|
|
204
|
-
|
|
205
|
+
/**
|
|
206
|
+
* Applies 'primary' button appearance, implying the most important action.
|
|
207
|
+
*/
|
|
208
|
+
primary: _propTypes2.default.bool,
|
|
205
209
|
|
|
206
|
-
/**
|
|
207
|
-
|
|
210
|
+
/**
|
|
211
|
+
* Applies 'secondary' button appearance.
|
|
212
|
+
*/
|
|
213
|
+
secondary: _propTypes2.default.bool,
|
|
208
214
|
|
|
209
215
|
/** Button size. Mutually exclusive with `large` prop */
|
|
210
216
|
small: _uiConstants.sharedPropTypes.sizePropType,
|
|
@@ -146,8 +146,10 @@ SplitButton.propTypes = {
|
|
|
146
146
|
component: _propTypes.default.element,
|
|
147
147
|
dataTest: _propTypes.default.string,
|
|
148
148
|
|
|
149
|
-
/**
|
|
150
|
-
|
|
149
|
+
/**
|
|
150
|
+
* Applies 'destructive' button appearance, implying a dangerous action.
|
|
151
|
+
*/
|
|
152
|
+
destructive: _propTypes.default.bool,
|
|
151
153
|
|
|
152
154
|
/** Disables the button and makes it uninteractive */
|
|
153
155
|
disabled: _propTypes.default.bool,
|
|
@@ -162,11 +164,15 @@ SplitButton.propTypes = {
|
|
|
162
164
|
large: _uiConstants.sharedPropTypes.sizePropType,
|
|
163
165
|
name: _propTypes.default.string,
|
|
164
166
|
|
|
165
|
-
/**
|
|
166
|
-
|
|
167
|
+
/**
|
|
168
|
+
* Applies 'primary' button appearance, implying the most important action.
|
|
169
|
+
*/
|
|
170
|
+
primary: _propTypes.default.bool,
|
|
167
171
|
|
|
168
|
-
/**
|
|
169
|
-
|
|
172
|
+
/**
|
|
173
|
+
* Applies 'secondary' button appearance.
|
|
174
|
+
*/
|
|
175
|
+
secondary: _propTypes.default.bool,
|
|
170
176
|
|
|
171
177
|
/** Changes button size. Mutually exclusive with `large` prop */
|
|
172
178
|
small: _uiConstants.sharedPropTypes.sizePropType,
|
|
@@ -163,8 +163,10 @@ DropdownButton.propTypes = {
|
|
|
163
163
|
component: PropTypes.element,
|
|
164
164
|
dataTest: PropTypes.string,
|
|
165
165
|
|
|
166
|
-
/**
|
|
167
|
-
|
|
166
|
+
/**
|
|
167
|
+
* Applies 'destructive' button appearance, implying a dangerous action.
|
|
168
|
+
*/
|
|
169
|
+
destructive: PropTypes.bool,
|
|
168
170
|
|
|
169
171
|
/** Make the button non-interactive */
|
|
170
172
|
disabled: PropTypes.bool,
|
|
@@ -180,11 +182,15 @@ DropdownButton.propTypes = {
|
|
|
180
182
|
/** Controls popper visibility. When implementing this prop the component becomes a controlled component */
|
|
181
183
|
open: PropTypes.bool,
|
|
182
184
|
|
|
183
|
-
/**
|
|
184
|
-
|
|
185
|
+
/**
|
|
186
|
+
* Applies 'primary' button appearance, implying the most important action.
|
|
187
|
+
*/
|
|
188
|
+
primary: PropTypes.bool,
|
|
185
189
|
|
|
186
|
-
/**
|
|
187
|
-
|
|
190
|
+
/**
|
|
191
|
+
* Applies 'secondary' button appearance.
|
|
192
|
+
*/
|
|
193
|
+
secondary: PropTypes.bool,
|
|
188
194
|
|
|
189
195
|
/** Button size. Mutually exclusive with `large` prop */
|
|
190
196
|
small: sharedPropTypes.sizePropType,
|
|
@@ -124,8 +124,10 @@ SplitButton.propTypes = {
|
|
|
124
124
|
component: PropTypes.element,
|
|
125
125
|
dataTest: PropTypes.string,
|
|
126
126
|
|
|
127
|
-
/**
|
|
128
|
-
|
|
127
|
+
/**
|
|
128
|
+
* Applies 'destructive' button appearance, implying a dangerous action.
|
|
129
|
+
*/
|
|
130
|
+
destructive: PropTypes.bool,
|
|
129
131
|
|
|
130
132
|
/** Disables the button and makes it uninteractive */
|
|
131
133
|
disabled: PropTypes.bool,
|
|
@@ -140,11 +142,15 @@ SplitButton.propTypes = {
|
|
|
140
142
|
large: sharedPropTypes.sizePropType,
|
|
141
143
|
name: PropTypes.string,
|
|
142
144
|
|
|
143
|
-
/**
|
|
144
|
-
|
|
145
|
+
/**
|
|
146
|
+
* Applies 'primary' button appearance, implying the most important action.
|
|
147
|
+
*/
|
|
148
|
+
primary: PropTypes.bool,
|
|
145
149
|
|
|
146
|
-
/**
|
|
147
|
-
|
|
150
|
+
/**
|
|
151
|
+
* Applies 'secondary' button appearance.
|
|
152
|
+
*/
|
|
153
|
+
secondary: PropTypes.bool,
|
|
148
154
|
|
|
149
155
|
/** Changes button size. Mutually exclusive with `large` prop */
|
|
150
156
|
small: sharedPropTypes.sizePropType,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/button",
|
|
3
|
-
"version": "8.16.0
|
|
3
|
+
"version": "8.16.0",
|
|
4
4
|
"description": "UI Button",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -13,7 +13,6 @@
|
|
|
13
13
|
"main": "./build/cjs/index.js",
|
|
14
14
|
"module": "./build/es/index.js",
|
|
15
15
|
"exports": {
|
|
16
|
-
"types": "./types/index.d.ts",
|
|
17
16
|
"import": "./build/es/index.js",
|
|
18
17
|
"require": "./build/cjs/index.js"
|
|
19
18
|
},
|
|
@@ -33,22 +32,20 @@
|
|
|
33
32
|
},
|
|
34
33
|
"dependencies": {
|
|
35
34
|
"@dhis2/prop-types": "^3.1.2",
|
|
36
|
-
"@dhis2-ui/layer": "8.16.0
|
|
37
|
-
"@dhis2-ui/loader": "8.16.0
|
|
38
|
-
"@dhis2-ui/popper": "8.16.0
|
|
39
|
-
"@dhis2/ui-constants": "8.16.0
|
|
40
|
-
"@dhis2/ui-icons": "8.16.0
|
|
35
|
+
"@dhis2-ui/layer": "8.16.0",
|
|
36
|
+
"@dhis2-ui/loader": "8.16.0",
|
|
37
|
+
"@dhis2-ui/popper": "8.16.0",
|
|
38
|
+
"@dhis2/ui-constants": "8.16.0",
|
|
39
|
+
"@dhis2/ui-icons": "8.16.0",
|
|
41
40
|
"classnames": "^2.3.1",
|
|
42
41
|
"prop-types": "^15.7.2"
|
|
43
42
|
},
|
|
44
43
|
"files": [
|
|
45
|
-
"build"
|
|
46
|
-
"types"
|
|
44
|
+
"build"
|
|
47
45
|
],
|
|
48
46
|
"devDependencies": {
|
|
49
47
|
"react": "16.13",
|
|
50
48
|
"react-dom": "16.13",
|
|
51
49
|
"styled-jsx": "^4.0.1"
|
|
52
|
-
}
|
|
53
|
-
"types": "types"
|
|
50
|
+
}
|
|
54
51
|
}
|
package/types/index.d.ts
DELETED
|
@@ -1,234 +0,0 @@
|
|
|
1
|
-
import * as React from 'react'
|
|
2
|
-
|
|
3
|
-
export type ButtonType = 'submit' | 'reset' | 'button'
|
|
4
|
-
|
|
5
|
-
export interface ButtonEventPayload {
|
|
6
|
-
value?: string
|
|
7
|
-
name?: string
|
|
8
|
-
}
|
|
9
|
-
|
|
10
|
-
type ButtonEventHandler<Event extends React.SyntheticEvent> = (
|
|
11
|
-
arg0: ButtonEventPayload,
|
|
12
|
-
event: Event
|
|
13
|
-
) => void
|
|
14
|
-
|
|
15
|
-
type ButtonOpenEventHandler<
|
|
16
|
-
Event extends React.SyntheticEvent = React.MouseEvent<HTMLButtonElement>
|
|
17
|
-
> = (arg0: ButtonEventPayload & { open: boolean }, event: Event) => void
|
|
18
|
-
|
|
19
|
-
export interface ButtonProps {
|
|
20
|
-
/**
|
|
21
|
-
* Component to render inside the button
|
|
22
|
-
*/
|
|
23
|
-
children?: React.ReactNode
|
|
24
|
-
/**
|
|
25
|
-
* A className that will be passed to the `<button>` element
|
|
26
|
-
*/
|
|
27
|
-
className?: string
|
|
28
|
-
/**
|
|
29
|
-
* A string that will be applied as a `data-test` attribute on the button element
|
|
30
|
-
* for identification during testing
|
|
31
|
-
*/
|
|
32
|
-
dataTest?: string
|
|
33
|
-
/** Applies 'destructive' button appearance, implying a dangerous action */
|
|
34
|
-
destructive?: boolean
|
|
35
|
-
/**
|
|
36
|
-
* Applies a greyed-out appearance and makes the button non-interactive
|
|
37
|
-
*/
|
|
38
|
-
disabled?: boolean
|
|
39
|
-
/**
|
|
40
|
-
* An icon element to display inside the button
|
|
41
|
-
*/
|
|
42
|
-
icon?: React.ReactElement
|
|
43
|
-
/**
|
|
44
|
-
* Use this variant to capture the initial focus on the page.
|
|
45
|
-
*/
|
|
46
|
-
initialFocus?: boolean
|
|
47
|
-
/**
|
|
48
|
-
* Makes the button large. Mutually exclusive with `small`
|
|
49
|
-
*/
|
|
50
|
-
large?: boolean
|
|
51
|
-
/**
|
|
52
|
-
* Sets the button into a loading state
|
|
53
|
-
*/
|
|
54
|
-
loading?: boolean
|
|
55
|
-
/**
|
|
56
|
-
* Sets `name` attribute on button element.
|
|
57
|
-
* Gets passed as part of the first argument to callbacks (see `onClick`).
|
|
58
|
-
*/
|
|
59
|
-
name?: string
|
|
60
|
-
/** Applies 'primary' button appearance, implying the most important action */
|
|
61
|
-
primary?: boolean
|
|
62
|
-
/** Applies 'secondary' button appearance */
|
|
63
|
-
secondary?: boolean
|
|
64
|
-
/**
|
|
65
|
-
* Makes the button small. Mutually exclusive with `large` prop
|
|
66
|
-
*/
|
|
67
|
-
small?: boolean
|
|
68
|
-
/**
|
|
69
|
-
* Tab index for focusing the button with a keyboard
|
|
70
|
-
*/
|
|
71
|
-
tabIndex?: string
|
|
72
|
-
/**
|
|
73
|
-
* Changes appearance of button to an on/off state
|
|
74
|
-
*/
|
|
75
|
-
toggled?: boolean
|
|
76
|
-
/**
|
|
77
|
-
* Sets `type` attribute on `<button>` element
|
|
78
|
-
*/
|
|
79
|
-
type?: ButtonType
|
|
80
|
-
/**
|
|
81
|
-
* Value associated with the button.
|
|
82
|
-
* Gets passed as part of the first argument to callbacks (see `onClick`).
|
|
83
|
-
*/
|
|
84
|
-
value?: string
|
|
85
|
-
/**
|
|
86
|
-
* Callback to trigger on de-focus (blur).
|
|
87
|
-
* Called with same args as `onClick`
|
|
88
|
-
*/
|
|
89
|
-
onBlur?: ButtonEventHandler<React.FocusEvent<HTMLButtonElement>>
|
|
90
|
-
/**
|
|
91
|
-
* Callback to trigger on click.
|
|
92
|
-
* Called with args `({ value, name }, event)`
|
|
93
|
-
*/
|
|
94
|
-
onClick?: ButtonEventHandler<React.MouseEvent<HTMLButtonElement>>
|
|
95
|
-
/**
|
|
96
|
-
* Callback to trigger on focus. Called with same args as `onClick`
|
|
97
|
-
*/
|
|
98
|
-
onFocus?: ButtonEventHandler<React.FocusEvent<HTMLButtonElement>>
|
|
99
|
-
/**
|
|
100
|
-
* Callback to trigger on key-down. Called with same args as `onClick`
|
|
101
|
-
*/
|
|
102
|
-
onKeyDown?: ButtonEventHandler<React.KeyboardEvent<HTMLButtonElement>>
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
export const Button: React.FC<ButtonProps>
|
|
106
|
-
|
|
107
|
-
export interface ButtonStripProps {
|
|
108
|
-
children?: React.ReactNode
|
|
109
|
-
className?: string
|
|
110
|
-
dataTest?: string
|
|
111
|
-
/**
|
|
112
|
-
* Horizontal alignment for buttons. Mutually exclusive with `middle` prop
|
|
113
|
-
*/
|
|
114
|
-
end?: boolean
|
|
115
|
-
/**
|
|
116
|
-
* Horizontal alignment. Mutually exclusive with `end` prop
|
|
117
|
-
*/
|
|
118
|
-
middle?: boolean
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
export const ButtonStrip: React.FC<ButtonStripProps>
|
|
122
|
-
|
|
123
|
-
export type DropdownButtonType = 'submit' | 'reset' | 'button'
|
|
124
|
-
|
|
125
|
-
export interface DropdownButtonProps {
|
|
126
|
-
/**
|
|
127
|
-
* Children to render inside the buton
|
|
128
|
-
*/
|
|
129
|
-
children?: React.ReactNode
|
|
130
|
-
className?: string
|
|
131
|
-
/**
|
|
132
|
-
* Component to show/hide when button is clicked
|
|
133
|
-
*/
|
|
134
|
-
component?: React.ReactElement<any>
|
|
135
|
-
dataTest?: string
|
|
136
|
-
/** Applies 'destructive' button appearance, implying a dangerous action. */
|
|
137
|
-
destructive?: boolean
|
|
138
|
-
/**
|
|
139
|
-
* Make the button non-interactive
|
|
140
|
-
*/
|
|
141
|
-
disabled?: boolean
|
|
142
|
-
icon?: React.ReactElement<any>
|
|
143
|
-
/**
|
|
144
|
-
* Grants button initial focus on the page
|
|
145
|
-
*/
|
|
146
|
-
initialFocus?: boolean
|
|
147
|
-
/**
|
|
148
|
-
* Button size. Mutually exclusive with `small` prop
|
|
149
|
-
*/
|
|
150
|
-
large?: boolean
|
|
151
|
-
name?: string
|
|
152
|
-
/**
|
|
153
|
-
* Controls popper visibility. When implementing this prop the component becomes a controlled component
|
|
154
|
-
*/
|
|
155
|
-
open?: boolean
|
|
156
|
-
/** Applies 'primary' button appearance, implying the most important action */
|
|
157
|
-
primary?: boolean
|
|
158
|
-
/** Applies 'secondary' button appearance */
|
|
159
|
-
secondary?: boolean
|
|
160
|
-
/**
|
|
161
|
-
* Changes button size. Mutually exclusive with `large` prop
|
|
162
|
-
*/
|
|
163
|
-
small?: boolean
|
|
164
|
-
tabIndex?: string
|
|
165
|
-
/**
|
|
166
|
-
* Type of button. Can take advantage of different default behavior
|
|
167
|
-
*/
|
|
168
|
-
type?: DropdownButtonType
|
|
169
|
-
value?: string
|
|
170
|
-
/**
|
|
171
|
-
* Callback triggered on click.
|
|
172
|
-
* Called with signature `({ name: string, value: string, open: bool }, event)`
|
|
173
|
-
* Is required when using the `open` prop to override the internal
|
|
174
|
-
* state.
|
|
175
|
-
*/
|
|
176
|
-
onClick?: ButtonOpenEventHandler
|
|
177
|
-
}
|
|
178
|
-
|
|
179
|
-
export class DropdownButton extends React.Component<DropdownButtonProps, any> {
|
|
180
|
-
render(): JSX.Element
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
export type SplitButtonType = 'submit' | 'reset' | 'button'
|
|
184
|
-
|
|
185
|
-
export interface SplitButtonProps {
|
|
186
|
-
children?: string
|
|
187
|
-
className?: string
|
|
188
|
-
/**
|
|
189
|
-
* Component to render when the dropdown is opened
|
|
190
|
-
*/
|
|
191
|
-
component?: React.ReactElement<any>
|
|
192
|
-
dataTest?: string
|
|
193
|
-
/** Applies 'destructive' button appearance, implying a dangerous action. */
|
|
194
|
-
destructive?: boolean
|
|
195
|
-
/**
|
|
196
|
-
* Disables the button and makes it uninteractive
|
|
197
|
-
*/
|
|
198
|
-
disabled?: boolean
|
|
199
|
-
/**
|
|
200
|
-
* An icon to add inside the button
|
|
201
|
-
*/
|
|
202
|
-
icon?: React.ReactElement<any>
|
|
203
|
-
/**
|
|
204
|
-
* Grants the button the initial focus
|
|
205
|
-
*/
|
|
206
|
-
initialFocus?: boolean
|
|
207
|
-
/**
|
|
208
|
-
* Changes button size. Mutually exclusive with `small` prop
|
|
209
|
-
*/
|
|
210
|
-
large?: boolean
|
|
211
|
-
name?: string
|
|
212
|
-
/** Applies 'primary' button appearance, implying the most important action */
|
|
213
|
-
primary?: boolean
|
|
214
|
-
/** Applies 'secondary' button appearance */
|
|
215
|
-
secondary?: boolean
|
|
216
|
-
/**
|
|
217
|
-
* Changes button size. Mutually exclusive with `large` prop
|
|
218
|
-
*/
|
|
219
|
-
small?: boolean
|
|
220
|
-
tabIndex?: string
|
|
221
|
-
/**
|
|
222
|
-
* Type of button. Applied to html `button` element
|
|
223
|
-
*/
|
|
224
|
-
type?: SplitButtonType
|
|
225
|
-
/**
|
|
226
|
-
* Value associated with the button. Passed in object to onClick handler
|
|
227
|
-
*/
|
|
228
|
-
value?: string
|
|
229
|
-
onClick?: ButtonOpenEventHandler
|
|
230
|
-
}
|
|
231
|
-
|
|
232
|
-
export class SplitButton extends React.Component<SplitButtonProps, any> {
|
|
233
|
-
render(): JSX.Element
|
|
234
|
-
}
|