@dhis2-ui/checkbox 8.3.0 → 8.4.1
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.
- package/build/cjs/checkbox/__tests__/checkbox.test.js +34 -0
- package/build/cjs/checkbox/checkbox.js +9 -1
- package/build/cjs/checkbox-field/__tests__/checkbox-field.test.js +35 -0
- package/build/cjs/checkbox-field/checkbox-field.js +6 -1
- package/build/es/checkbox/__tests__/checkbox.test.js +25 -0
- package/build/es/checkbox/checkbox.js +9 -1
- package/build/es/checkbox-field/__tests__/checkbox-field.test.js +26 -0
- package/build/es/checkbox-field/checkbox-field.js +6 -1
- package/package.json +4 -4
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _react = require("@testing-library/react");
|
|
4
|
+
|
|
5
|
+
var _react2 = _interopRequireDefault(require("react"));
|
|
6
|
+
|
|
7
|
+
var _checkbox = require("../checkbox.js");
|
|
8
|
+
|
|
9
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
+
|
|
11
|
+
describe('<Checkbox />', () => {
|
|
12
|
+
it('should call the onKeyDown callback when provided', () => {
|
|
13
|
+
const onKeyDown = jest.fn();
|
|
14
|
+
(0, _react.render)( /*#__PURE__*/_react2.default.createElement(_checkbox.Checkbox, {
|
|
15
|
+
name: "foo",
|
|
16
|
+
value: "bar",
|
|
17
|
+
checked: false,
|
|
18
|
+
onKeyDown: onKeyDown
|
|
19
|
+
}));
|
|
20
|
+
|
|
21
|
+
_react.fireEvent.keyDown(_react.screen.getByRole('checkbox'), {
|
|
22
|
+
key: 'Enter',
|
|
23
|
+
code: 'Enter',
|
|
24
|
+
charCode: 13
|
|
25
|
+
});
|
|
26
|
+
|
|
27
|
+
expect(onKeyDown).toHaveBeenCalledWith({
|
|
28
|
+
name: 'foo',
|
|
29
|
+
value: 'bar',
|
|
30
|
+
checked: true
|
|
31
|
+
}, expect.objectContaining({}));
|
|
32
|
+
expect(onKeyDown).toHaveBeenCalledTimes(1);
|
|
33
|
+
});
|
|
34
|
+
});
|
|
@@ -50,6 +50,12 @@ class Checkbox extends _react.Component {
|
|
|
50
50
|
this.props.onFocus(this.createHandlerPayload(), e);
|
|
51
51
|
}
|
|
52
52
|
});
|
|
53
|
+
|
|
54
|
+
_defineProperty(this, "handleKeyDown", e => {
|
|
55
|
+
if (this.props.onKeyDown) {
|
|
56
|
+
this.props.onKeyDown(this.createHandlerPayload(), e);
|
|
57
|
+
}
|
|
58
|
+
});
|
|
53
59
|
}
|
|
54
60
|
|
|
55
61
|
componentDidMount() {
|
|
@@ -118,6 +124,7 @@ class Checkbox extends _react.Component {
|
|
|
118
124
|
tabIndex: tabIndex,
|
|
119
125
|
onChange: this.handleChange,
|
|
120
126
|
onFocus: this.handleFocus,
|
|
127
|
+
onKeyDown: this.handleKeyDown,
|
|
121
128
|
onBlur: this.handleBlur,
|
|
122
129
|
className: _style.default.dynamic([["2774859264", [_uiConstants.colors.grey900, _uiConstants.theme.disabled, _uiConstants.theme.focus]]])
|
|
123
130
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -162,5 +169,6 @@ Checkbox.propTypes = {
|
|
|
162
169
|
|
|
163
170
|
/** Called with signature `(object, event)` */
|
|
164
171
|
onChange: _propTypes2.default.func,
|
|
165
|
-
onFocus: _propTypes2.default.func
|
|
172
|
+
onFocus: _propTypes2.default.func,
|
|
173
|
+
onKeyDown: _propTypes2.default.func
|
|
166
174
|
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _react = require("@testing-library/react");
|
|
4
|
+
|
|
5
|
+
var _react2 = _interopRequireDefault(require("react"));
|
|
6
|
+
|
|
7
|
+
var _checkboxField = require("../checkbox-field.js");
|
|
8
|
+
|
|
9
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
+
|
|
11
|
+
describe('<CheckboxField />', () => {
|
|
12
|
+
it('should call the onKeyDown callback when provided', () => {
|
|
13
|
+
const onKeyDown = jest.fn();
|
|
14
|
+
(0, _react.render)( /*#__PURE__*/_react2.default.createElement(_checkboxField.CheckboxField, {
|
|
15
|
+
label: "Label",
|
|
16
|
+
name: "foo",
|
|
17
|
+
value: "bar",
|
|
18
|
+
checked: false,
|
|
19
|
+
onKeyDown: onKeyDown
|
|
20
|
+
}));
|
|
21
|
+
|
|
22
|
+
_react.fireEvent.keyDown(_react.screen.getByRole('checkbox'), {
|
|
23
|
+
key: 'Enter',
|
|
24
|
+
code: 'Enter',
|
|
25
|
+
charCode: 13
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
expect(onKeyDown).toHaveBeenCalledWith({
|
|
29
|
+
name: 'foo',
|
|
30
|
+
value: 'bar',
|
|
31
|
+
checked: true
|
|
32
|
+
}, expect.objectContaining({}));
|
|
33
|
+
expect(onKeyDown).toHaveBeenCalledTimes(1);
|
|
34
|
+
});
|
|
35
|
+
});
|
|
@@ -45,6 +45,7 @@ const CheckboxField = _ref2 => {
|
|
|
45
45
|
tabIndex,
|
|
46
46
|
onChange,
|
|
47
47
|
onFocus,
|
|
48
|
+
onKeyDown,
|
|
48
49
|
onBlur,
|
|
49
50
|
checked,
|
|
50
51
|
disabled,
|
|
@@ -78,6 +79,7 @@ const CheckboxField = _ref2 => {
|
|
|
78
79
|
tabIndex: tabIndex,
|
|
79
80
|
onChange: onChange,
|
|
80
81
|
onFocus: onFocus,
|
|
82
|
+
onKeyDown: onKeyDown,
|
|
81
83
|
onBlur: onBlur,
|
|
82
84
|
checked: checked,
|
|
83
85
|
disabled: disabled,
|
|
@@ -140,5 +142,8 @@ CheckboxField.propTypes = {
|
|
|
140
142
|
onChange: _propTypes.default.func,
|
|
141
143
|
|
|
142
144
|
/** Called with signature `({ name: string, value: string, checked: bool }, event)` */
|
|
143
|
-
onFocus: _propTypes.default.func
|
|
145
|
+
onFocus: _propTypes.default.func,
|
|
146
|
+
|
|
147
|
+
/** Called with signature `({ name: string, value: string, checked: bool }, event)` */
|
|
148
|
+
onKeyDown: _propTypes.default.func
|
|
144
149
|
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { render, fireEvent, screen } from '@testing-library/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { Checkbox } from '../checkbox.js';
|
|
4
|
+
describe('<Checkbox />', () => {
|
|
5
|
+
it('should call the onKeyDown callback when provided', () => {
|
|
6
|
+
const onKeyDown = jest.fn();
|
|
7
|
+
render( /*#__PURE__*/React.createElement(Checkbox, {
|
|
8
|
+
name: "foo",
|
|
9
|
+
value: "bar",
|
|
10
|
+
checked: false,
|
|
11
|
+
onKeyDown: onKeyDown
|
|
12
|
+
}));
|
|
13
|
+
fireEvent.keyDown(screen.getByRole('checkbox'), {
|
|
14
|
+
key: 'Enter',
|
|
15
|
+
code: 'Enter',
|
|
16
|
+
charCode: 13
|
|
17
|
+
});
|
|
18
|
+
expect(onKeyDown).toHaveBeenCalledWith({
|
|
19
|
+
name: 'foo',
|
|
20
|
+
value: 'bar',
|
|
21
|
+
checked: true
|
|
22
|
+
}, expect.objectContaining({}));
|
|
23
|
+
expect(onKeyDown).toHaveBeenCalledTimes(1);
|
|
24
|
+
});
|
|
25
|
+
});
|
|
@@ -32,6 +32,12 @@ class Checkbox extends Component {
|
|
|
32
32
|
this.props.onFocus(this.createHandlerPayload(), e);
|
|
33
33
|
}
|
|
34
34
|
});
|
|
35
|
+
|
|
36
|
+
_defineProperty(this, "handleKeyDown", e => {
|
|
37
|
+
if (this.props.onKeyDown) {
|
|
38
|
+
this.props.onKeyDown(this.createHandlerPayload(), e);
|
|
39
|
+
}
|
|
40
|
+
});
|
|
35
41
|
}
|
|
36
42
|
|
|
37
43
|
componentDidMount() {
|
|
@@ -100,6 +106,7 @@ class Checkbox extends Component {
|
|
|
100
106
|
tabIndex: tabIndex,
|
|
101
107
|
onChange: this.handleChange,
|
|
102
108
|
onFocus: this.handleFocus,
|
|
109
|
+
onKeyDown: this.handleKeyDown,
|
|
103
110
|
onBlur: this.handleBlur,
|
|
104
111
|
className: _JSXStyle.dynamic([["2774859264", [colors.grey900, theme.disabled, theme.focus]]])
|
|
105
112
|
}), /*#__PURE__*/React.createElement("div", {
|
|
@@ -143,6 +150,7 @@ Checkbox.propTypes = {
|
|
|
143
150
|
|
|
144
151
|
/** Called with signature `(object, event)` */
|
|
145
152
|
onChange: PropTypes.func,
|
|
146
|
-
onFocus: PropTypes.func
|
|
153
|
+
onFocus: PropTypes.func,
|
|
154
|
+
onKeyDown: PropTypes.func
|
|
147
155
|
};
|
|
148
156
|
export { Checkbox };
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { render, fireEvent, screen } from '@testing-library/react';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import { CheckboxField } from '../checkbox-field.js';
|
|
4
|
+
describe('<CheckboxField />', () => {
|
|
5
|
+
it('should call the onKeyDown callback when provided', () => {
|
|
6
|
+
const onKeyDown = jest.fn();
|
|
7
|
+
render( /*#__PURE__*/React.createElement(CheckboxField, {
|
|
8
|
+
label: "Label",
|
|
9
|
+
name: "foo",
|
|
10
|
+
value: "bar",
|
|
11
|
+
checked: false,
|
|
12
|
+
onKeyDown: onKeyDown
|
|
13
|
+
}));
|
|
14
|
+
fireEvent.keyDown(screen.getByRole('checkbox'), {
|
|
15
|
+
key: 'Enter',
|
|
16
|
+
code: 'Enter',
|
|
17
|
+
charCode: 13
|
|
18
|
+
});
|
|
19
|
+
expect(onKeyDown).toHaveBeenCalledWith({
|
|
20
|
+
name: 'foo',
|
|
21
|
+
value: 'bar',
|
|
22
|
+
checked: true
|
|
23
|
+
}, expect.objectContaining({}));
|
|
24
|
+
expect(onKeyDown).toHaveBeenCalledTimes(1);
|
|
25
|
+
});
|
|
26
|
+
});
|
|
@@ -31,6 +31,7 @@ const CheckboxField = _ref2 => {
|
|
|
31
31
|
tabIndex,
|
|
32
32
|
onChange,
|
|
33
33
|
onFocus,
|
|
34
|
+
onKeyDown,
|
|
34
35
|
onBlur,
|
|
35
36
|
checked,
|
|
36
37
|
disabled,
|
|
@@ -64,6 +65,7 @@ const CheckboxField = _ref2 => {
|
|
|
64
65
|
tabIndex: tabIndex,
|
|
65
66
|
onChange: onChange,
|
|
66
67
|
onFocus: onFocus,
|
|
68
|
+
onKeyDown: onKeyDown,
|
|
67
69
|
onBlur: onBlur,
|
|
68
70
|
checked: checked,
|
|
69
71
|
disabled: disabled,
|
|
@@ -125,6 +127,9 @@ CheckboxField.propTypes = {
|
|
|
125
127
|
onChange: PropTypes.func,
|
|
126
128
|
|
|
127
129
|
/** Called with signature `({ name: string, value: string, checked: bool }, event)` */
|
|
128
|
-
onFocus: PropTypes.func
|
|
130
|
+
onFocus: PropTypes.func,
|
|
131
|
+
|
|
132
|
+
/** Called with signature `({ name: string, value: string, checked: bool }, event)` */
|
|
133
|
+
onKeyDown: PropTypes.func
|
|
129
134
|
};
|
|
130
135
|
export { CheckboxField };
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/checkbox",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.4.1",
|
|
4
4
|
"description": "UI Checkbox",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -32,9 +32,9 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@dhis2/prop-types": "^3.1.2",
|
|
35
|
-
"@dhis2-ui/field": "8.
|
|
36
|
-
"@dhis2-ui/required": "8.
|
|
37
|
-
"@dhis2/ui-constants": "8.
|
|
35
|
+
"@dhis2-ui/field": "8.4.1",
|
|
36
|
+
"@dhis2-ui/required": "8.4.1",
|
|
37
|
+
"@dhis2/ui-constants": "8.4.1",
|
|
38
38
|
"classnames": "^2.3.1",
|
|
39
39
|
"prop-types": "^15.7.2"
|
|
40
40
|
},
|