@dhis2-ui/checkbox 9.11.0 → 9.11.1-beta.2
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 +1 -7
- package/build/cjs/checkbox/checkbox-icon.js +14 -24
- package/build/cjs/checkbox/checkbox.e2e.stories.js +72 -0
- package/build/cjs/checkbox/checkbox.js +7 -31
- package/build/cjs/checkbox/{checkbox.stories.js → checkbox.prod.stories.js} +54 -74
- package/build/cjs/checkbox/features/accepts_initial_focus/index.js +1 -2
- package/build/cjs/checkbox/features/accepts_label/index.js +0 -1
- package/build/cjs/checkbox/features/can_be_blurred/index.js +1 -2
- package/build/cjs/checkbox/features/can_be_changed/index.js +1 -2
- package/build/cjs/checkbox/features/can_be_disabled/index.js +1 -2
- package/build/cjs/checkbox/features/can_be_focused/index.js +1 -2
- package/build/cjs/checkbox/features/has_indeterminate_prop/index.js +0 -1
- package/build/cjs/checkbox/index.js +0 -1
- package/build/cjs/checkbox-field/__tests__/checkbox-field.test.js +1 -7
- package/build/cjs/checkbox-field/checkbox-field.e2e.stories.js +39 -0
- package/build/cjs/checkbox-field/checkbox-field.js +4 -30
- package/build/cjs/checkbox-field/{checkbox-field.stories.js → checkbox-field.prod.stories.js} +59 -74
- package/build/cjs/checkbox-field/features/accepts_help_text/index.js +0 -1
- package/build/cjs/checkbox-field/features/accepts_label/index.js +0 -1
- package/build/cjs/checkbox-field/features/accepts_validation_text/index.js +0 -1
- package/build/cjs/checkbox-field/features/can_be_required/index.js +0 -1
- package/build/cjs/checkbox-field/index.js +0 -1
- package/build/cjs/index.js +0 -2
- package/build/es/checkbox/checkbox-icon.js +13 -13
- package/build/es/checkbox/{checkbox.stories.e2e.js → checkbox.e2e.stories.js} +19 -10
- package/build/es/checkbox/checkbox.js +4 -19
- package/build/es/checkbox/{checkbox.stories.js → checkbox.prod.stories.js} +35 -25
- package/build/es/checkbox/features/accepts_initial_focus/index.js +1 -1
- package/build/es/checkbox/features/can_be_blurred/index.js +1 -1
- package/build/es/checkbox/features/can_be_changed/index.js +1 -1
- package/build/es/checkbox/features/can_be_disabled/index.js +1 -1
- package/build/es/checkbox/features/can_be_focused/index.js +1 -1
- package/build/es/checkbox-field/checkbox-field.e2e.stories.js +28 -0
- package/build/es/checkbox-field/checkbox-field.js +3 -22
- package/build/es/checkbox-field/{checkbox-field.stories.js → checkbox-field.prod.stories.js} +38 -23
- package/package.json +7 -7
- package/build/cjs/checkbox/checkbox.stories.e2e.js +0 -55
- package/build/cjs/checkbox-field/checkbox-field.stories.e2e.js +0 -30
- package/build/es/checkbox-field/checkbox-field.stories.e2e.js +0 -23
|
@@ -1,13 +1,9 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _react = require("@testing-library/react");
|
|
4
|
-
|
|
5
4
|
var _react2 = _interopRequireDefault(require("react"));
|
|
6
|
-
|
|
7
5
|
var _checkbox = require("../checkbox.js");
|
|
8
|
-
|
|
9
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
10
|
-
|
|
6
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
11
7
|
describe('<Checkbox />', () => {
|
|
12
8
|
it('should call the onKeyDown callback when provided', () => {
|
|
13
9
|
const onKeyDown = jest.fn();
|
|
@@ -17,13 +13,11 @@ describe('<Checkbox />', () => {
|
|
|
17
13
|
checked: false,
|
|
18
14
|
onKeyDown: onKeyDown
|
|
19
15
|
}));
|
|
20
|
-
|
|
21
16
|
_react.fireEvent.keyDown(_react.screen.getByRole('checkbox'), {
|
|
22
17
|
key: 'Enter',
|
|
23
18
|
code: 'Enter',
|
|
24
19
|
charCode: 13
|
|
25
20
|
});
|
|
26
|
-
|
|
27
21
|
expect(onKeyDown).toHaveBeenCalledWith({
|
|
28
22
|
name: 'foo',
|
|
29
23
|
value: 'bar',
|
|
@@ -5,20 +5,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.CheckboxDense = CheckboxDense;
|
|
7
7
|
exports.CheckboxRegular = CheckboxRegular;
|
|
8
|
-
|
|
9
8
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
10
|
-
|
|
11
9
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
12
|
-
|
|
13
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
14
|
-
|
|
15
11
|
var _react = _interopRequireDefault(require("react"));
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
const commonStyles = ["svg.jsx-4069423049{display:block;pointer-events:none;}", "svg.jsx-4069423049 .border.jsx-4069423049{fill:".concat(_uiConstants.colors.grey800, ";}"), "svg.jsx-4069423049 .background.jsx-4069423049,svg.jsx-4069423049 .indeterminate.jsx-4069423049,svg.jsx-4069423049 .checkmark.jsx-4069423049{fill:".concat(_uiConstants.colors.white, ";}"), "svg.checked.jsx-4069423049 .background.jsx-4069423049,svg.indeterminate.jsx-4069423049 .background.jsx-4069423049{fill:".concat(_uiConstants.colors.teal500, ";}"), "svg.valid.jsx-4069423049 .background.jsx-4069423049{fill:".concat(_uiConstants.colors.blue600, ";}"), "svg.warning.jsx-4069423049 .background.jsx-4069423049{fill:".concat(_uiConstants.colors.yellow700, ";}"), "svg.error.jsx-4069423049 .background.jsx-4069423049{fill:".concat(_uiConstants.colors.red500, ";}"), "svg.checked.jsx-4069423049 .border.jsx-4069423049,svg.indeterminate.jsx-4069423049 .border.jsx-4069423049{fill:".concat(_uiConstants.colors.teal900, ";}"), "svg.jsx-4069423049:not(.checked) .checkmark.jsx-4069423049,svg.jsx-4069423049:not(.indeterminate) .indeterminate.jsx-4069423049{fill:none;}", "svg.jsx-4069423049:not(.checked):not(.indeterminate) .background.jsx-4069423049{fill:".concat(_uiConstants.colors.white, ";}")];
|
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
13
|
+
const commonStyles = ["svg.jsx-4069423049{display:block;pointer-events:none;}", `svg.jsx-4069423049 .border.jsx-4069423049{fill:${_uiConstants.colors.grey800};}`, `svg.jsx-4069423049 .background.jsx-4069423049,svg.jsx-4069423049 .indeterminate.jsx-4069423049,svg.jsx-4069423049 .checkmark.jsx-4069423049{fill:${_uiConstants.colors.white};}`, `svg.checked.jsx-4069423049 .background.jsx-4069423049,svg.indeterminate.jsx-4069423049 .background.jsx-4069423049{fill:${_uiConstants.colors.teal500};}`, `svg.valid.jsx-4069423049 .background.jsx-4069423049{fill:${_uiConstants.colors.blue600};}`, `svg.warning.jsx-4069423049 .background.jsx-4069423049{fill:${_uiConstants.colors.yellow700};}`, `svg.error.jsx-4069423049 .background.jsx-4069423049{fill:${_uiConstants.colors.red500};}`, `svg.checked.jsx-4069423049 .border.jsx-4069423049,svg.indeterminate.jsx-4069423049 .border.jsx-4069423049{fill:${_uiConstants.colors.teal900};}`, "svg.jsx-4069423049:not(.checked) .checkmark.jsx-4069423049,svg.jsx-4069423049:not(.indeterminate) .indeterminate.jsx-4069423049{fill:none;}", `svg.jsx-4069423049:not(.checked):not(.indeterminate) .background.jsx-4069423049{fill:${_uiConstants.colors.white};}`];
|
|
20
14
|
commonStyles.__hash = "4069423049";
|
|
21
|
-
|
|
22
15
|
function CheckboxRegular(_ref) {
|
|
23
16
|
let {
|
|
24
17
|
className
|
|
@@ -26,39 +19,37 @@ function CheckboxRegular(_ref) {
|
|
|
26
19
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
27
20
|
viewBox: "0 0 18 18",
|
|
28
21
|
xmlns: "http://www.w3.org/2000/svg",
|
|
29
|
-
className:
|
|
22
|
+
className: `jsx-${commonStyles.__hash}` + " " + _style.default.dynamic([["2753140462", [_uiConstants.colors.grey300, _uiConstants.colors.grey400, _uiConstants.colors.blue600, _uiConstants.colors.blue700, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red700]]]) + " " + (className || "")
|
|
30
23
|
}, /*#__PURE__*/_react.default.createElement("rect", {
|
|
31
24
|
x: "0",
|
|
32
25
|
y: "0",
|
|
33
26
|
width: "18",
|
|
34
27
|
height: "18",
|
|
35
28
|
rx: "3",
|
|
36
|
-
className:
|
|
29
|
+
className: `jsx-${commonStyles.__hash}` + " " + _style.default.dynamic([["2753140462", [_uiConstants.colors.grey300, _uiConstants.colors.grey400, _uiConstants.colors.blue600, _uiConstants.colors.blue700, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red700]]]) + " " + "background"
|
|
37
30
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
38
31
|
d: "M15,0 C16.6568542,0 18,1.34314575 18,3 L18,15 C18,16.6568542 16.6568542,18 15,18 L3,18 C1.34314575,18 0,16.6568542 0,15 L0,3 C0,1.34314575 1.34314575,0 3,0 L15,0 Z M15,1 L3,1 C1.9456382,1 1.08183488,1.81587779 1.00548574,2.85073766 L1,3 L1,15 C1,16.0543618 1.81587779,16.9181651 2.85073766,16.9945143 L3,17 L15,17 C16.0543618,17 16.9181651,16.1841222 16.9945143,15.1492623 L17,15 L17,3 C17,1.9456382 16.1841222,1.08183488 15.1492623,1.00548574 L15,1 Z",
|
|
39
|
-
className:
|
|
32
|
+
className: `jsx-${commonStyles.__hash}` + " " + _style.default.dynamic([["2753140462", [_uiConstants.colors.grey300, _uiConstants.colors.grey400, _uiConstants.colors.blue600, _uiConstants.colors.blue700, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red700]]]) + " " + "border"
|
|
40
33
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
41
34
|
d: "M4.74451387,8.02852516 C4.39595738,8.11985643 4.12375034,8.39235188 4.03251575,8.74127768 C3.94128115,9.09020348 4.04521722,9.46125864 4.30437605,9.71182782 L7.29823844,12.7078028 C7.68753993,13.0973991 8.31859767,13.0973991 8.70789916,12.7078028 L13.695624,6.71585285 C13.9547828,6.46528367 14.0587189,6.09422851 13.9674843,5.74530271 C13.8762497,5.39637691 13.6040426,5.12388146 13.2554861,5.0325502 C12.9069296,4.94121893 12.5362672,5.04526513 12.2859632,5.30469855 L8.0030688,10.5910713 L5.71403676,8.30067351 C5.46373279,8.0412401 5.09307036,7.9371939 4.74451387,8.02852516 Z",
|
|
42
|
-
className:
|
|
35
|
+
className: `jsx-${commonStyles.__hash}` + " " + _style.default.dynamic([["2753140462", [_uiConstants.colors.grey300, _uiConstants.colors.grey400, _uiConstants.colors.blue600, _uiConstants.colors.blue700, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red700]]]) + " " + "checkmark"
|
|
43
36
|
}), /*#__PURE__*/_react.default.createElement("rect", {
|
|
44
37
|
x: "4",
|
|
45
38
|
y: "8",
|
|
46
39
|
width: "10",
|
|
47
40
|
height: "2",
|
|
48
41
|
rx: "1",
|
|
49
|
-
className:
|
|
42
|
+
className: `jsx-${commonStyles.__hash}` + " " + _style.default.dynamic([["2753140462", [_uiConstants.colors.grey300, _uiConstants.colors.grey400, _uiConstants.colors.blue600, _uiConstants.colors.blue700, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red700]]]) + " " + "indeterminate"
|
|
50
43
|
}), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
51
44
|
id: commonStyles.__hash
|
|
52
45
|
}, commonStyles), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
53
46
|
id: "2753140462",
|
|
54
47
|
dynamic: [_uiConstants.colors.grey300, _uiConstants.colors.grey400, _uiConstants.colors.blue600, _uiConstants.colors.blue700, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red700]
|
|
55
|
-
}, ["svg.__jsx-style-dynamic-selector{width:18px;height:18px;}",
|
|
48
|
+
}, ["svg.__jsx-style-dynamic-selector{width:18px;height:18px;}", `svg.disabled.__jsx-style-dynamic-selector .background.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.grey300};}`, `svg.disabled.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.grey400};}`, `svg.valid.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.blue600};}`, `svg.valid.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.valid.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.blue700};}`, `svg.warning.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.yellow700};}`, `svg.warning.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.warning.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.yellow800};}`, `svg.error.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.red500};}`, `svg.error.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.error.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.red700};}`]));
|
|
56
49
|
}
|
|
57
|
-
|
|
58
50
|
CheckboxRegular.propTypes = {
|
|
59
51
|
className: _propTypes.default.string
|
|
60
52
|
};
|
|
61
|
-
|
|
62
53
|
function CheckboxDense(_ref2) {
|
|
63
54
|
let {
|
|
64
55
|
className
|
|
@@ -66,34 +57,33 @@ function CheckboxDense(_ref2) {
|
|
|
66
57
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
67
58
|
viewBox: "0 0 14 14",
|
|
68
59
|
xmlns: "http://www.w3.org/2000/svg",
|
|
69
|
-
className:
|
|
60
|
+
className: `jsx-${commonStyles.__hash}` + " " + _style.default.dynamic([["86695588", [_uiConstants.colors.grey400, _uiConstants.colors.grey400, _uiConstants.colors.grey500, _uiConstants.colors.blue600, _uiConstants.colors.blue800, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red800]]]) + " " + (className || "")
|
|
70
61
|
}, /*#__PURE__*/_react.default.createElement("rect", {
|
|
71
62
|
x: "0",
|
|
72
63
|
y: "0",
|
|
73
64
|
width: "14",
|
|
74
65
|
height: "14",
|
|
75
66
|
rx: "2",
|
|
76
|
-
className:
|
|
67
|
+
className: `jsx-${commonStyles.__hash}` + " " + _style.default.dynamic([["86695588", [_uiConstants.colors.grey400, _uiConstants.colors.grey400, _uiConstants.colors.grey500, _uiConstants.colors.blue600, _uiConstants.colors.blue800, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red800]]]) + " " + "background"
|
|
77
68
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
78
69
|
d: "M2,0 L12,0 C13.1045695,0 14,0.8954305 14,2 L14,12 C14,13.1045695 13.1045695,14 12,14 L2,14 C0.8954305,14 0,13.1045695 0,12 L0,2 C0,0.8954305 0.8954305,0 2,0 Z M2,1 C1.44771525,1 1,1.44771525 1,2 L1,12 C1,12.5522847 1.44771525,13 2,13 L12,13 C12.5522847,13 13,12.5522847 13,12 L13,2 C13,1.44771525 12.5522847,1 12,1 L2,1 Z",
|
|
79
|
-
className:
|
|
70
|
+
className: `jsx-${commonStyles.__hash}` + " " + _style.default.dynamic([["86695588", [_uiConstants.colors.grey400, _uiConstants.colors.grey400, _uiConstants.colors.grey500, _uiConstants.colors.blue600, _uiConstants.colors.blue800, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red800]]]) + " " + "border"
|
|
80
71
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
81
72
|
d: "M10.3520005,3.30015877 L5.54268293,8.03252726 L3.64634146,6.16652726 L2.28668615,7.5044281 L5.54310367,10.7010587 L11.7145993,4.628307 L10.3520005,3.30015877 Z M5.54268293,9.43547274 L5.61193184,9.36733181 L5.54226219,9.29894127 L5.47309681,9.367 L5.54268293,9.43547274 Z M10.6496329,4.41023392 L10.6495057,4.35652297 L10.5648412,4.35672356 L10.2854007,4.631693 L10.3553166,4.69984123 L10.6496329,4.41023392 Z M3.42891348,7.22439304 L3.35030905,7.22439304 L3.35034135,7.27820863 L3.64634146,7.56947274 L3.71331385,7.5035719 L3.42891348,7.22439304 Z",
|
|
82
|
-
className:
|
|
73
|
+
className: `jsx-${commonStyles.__hash}` + " " + _style.default.dynamic([["86695588", [_uiConstants.colors.grey400, _uiConstants.colors.grey400, _uiConstants.colors.grey500, _uiConstants.colors.blue600, _uiConstants.colors.blue800, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red800]]]) + " " + "checkmark"
|
|
83
74
|
}), /*#__PURE__*/_react.default.createElement("rect", {
|
|
84
75
|
x: "3",
|
|
85
76
|
y: "6",
|
|
86
77
|
width: "8",
|
|
87
78
|
height: "2",
|
|
88
|
-
className:
|
|
79
|
+
className: `jsx-${commonStyles.__hash}` + " " + _style.default.dynamic([["86695588", [_uiConstants.colors.grey400, _uiConstants.colors.grey400, _uiConstants.colors.grey500, _uiConstants.colors.blue600, _uiConstants.colors.blue800, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red800]]]) + " " + "indeterminate"
|
|
89
80
|
}), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
90
81
|
id: commonStyles.__hash
|
|
91
82
|
}, commonStyles), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
92
83
|
id: "86695588",
|
|
93
84
|
dynamic: [_uiConstants.colors.grey400, _uiConstants.colors.grey400, _uiConstants.colors.grey500, _uiConstants.colors.blue600, _uiConstants.colors.blue800, _uiConstants.colors.yellow700, _uiConstants.colors.yellow800, _uiConstants.colors.red500, _uiConstants.colors.red800]
|
|
94
|
-
}, ["svg.__jsx-style-dynamic-selector{width:14px;height:14px;}",
|
|
85
|
+
}, ["svg.__jsx-style-dynamic-selector{width:14px;height:14px;}", `svg.disabled.__jsx-style-dynamic-selector .background.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.grey400};}`, `svg.disabled.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.grey400};}`, `svg.disabled.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.disabled.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.grey500};}`, `svg.valid.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.blue600};}`, `svg.valid.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.valid.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.blue800};}`, `svg.warning.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.yellow700};}`, `svg.warning.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.warning.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.yellow800};}`, `svg.error.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.red500};}`, `svg.error.checked.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector,svg.error.indeterminate.__jsx-style-dynamic-selector .border.__jsx-style-dynamic-selector{fill:${_uiConstants.colors.red800};}`]));
|
|
95
86
|
}
|
|
96
|
-
|
|
97
87
|
CheckboxDense.propTypes = {
|
|
98
88
|
className: _propTypes.default.string
|
|
99
89
|
};
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = exports.WithOnFocus = exports.WithOnChange = exports.WithLabel = exports.WithInitialFocusAndOnBlur = exports.WithInitialFocus = exports.NoIndeterminateProp = exports.IndeterminateProp = exports.DisabledWithOnClick = void 0;
|
|
7
|
+
var _react = _interopRequireDefault(require("react"));
|
|
8
|
+
var _index = require("./index.js");
|
|
9
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
10
|
+
window.onClick = window.Cypress && window.Cypress.cy.stub();
|
|
11
|
+
window.onChange = window.Cypress && window.Cypress.cy.stub();
|
|
12
|
+
window.onBlur = window.Cypress && window.Cypress.cy.stub();
|
|
13
|
+
window.onFocus = window.Cypress && window.Cypress.cy.stub();
|
|
14
|
+
var _default = exports.default = {
|
|
15
|
+
title: 'Checkbox'
|
|
16
|
+
};
|
|
17
|
+
const WithOnChange = () => /*#__PURE__*/_react.default.createElement(_index.Checkbox, {
|
|
18
|
+
name: "Ex",
|
|
19
|
+
label: "Checkbox",
|
|
20
|
+
value: "default",
|
|
21
|
+
onChange: window.onChange
|
|
22
|
+
});
|
|
23
|
+
exports.WithOnChange = WithOnChange;
|
|
24
|
+
const WithInitialFocusAndOnBlur = () => /*#__PURE__*/_react.default.createElement(_index.Checkbox, {
|
|
25
|
+
initialFocus: true,
|
|
26
|
+
name: "Ex",
|
|
27
|
+
label: "Checkbox",
|
|
28
|
+
value: "default",
|
|
29
|
+
onBlur: window.onBlur
|
|
30
|
+
});
|
|
31
|
+
exports.WithInitialFocusAndOnBlur = WithInitialFocusAndOnBlur;
|
|
32
|
+
const WithOnFocus = () => /*#__PURE__*/_react.default.createElement(_index.Checkbox, {
|
|
33
|
+
name: "Ex",
|
|
34
|
+
label: "Checkbox",
|
|
35
|
+
value: "default",
|
|
36
|
+
onFocus: window.onFocus
|
|
37
|
+
});
|
|
38
|
+
exports.WithOnFocus = WithOnFocus;
|
|
39
|
+
const DisabledWithOnClick = () => /*#__PURE__*/_react.default.createElement(_index.Checkbox, {
|
|
40
|
+
name: "Ex",
|
|
41
|
+
label: "Checkbox",
|
|
42
|
+
value: "default",
|
|
43
|
+
disabled: true,
|
|
44
|
+
onClick: window.onClick
|
|
45
|
+
});
|
|
46
|
+
exports.DisabledWithOnClick = DisabledWithOnClick;
|
|
47
|
+
const WithLabel = () => /*#__PURE__*/_react.default.createElement(_index.Checkbox, {
|
|
48
|
+
name: "Ex",
|
|
49
|
+
label: "The label",
|
|
50
|
+
value: "default"
|
|
51
|
+
});
|
|
52
|
+
exports.WithLabel = WithLabel;
|
|
53
|
+
const WithInitialFocus = () => /*#__PURE__*/_react.default.createElement(_index.Checkbox, {
|
|
54
|
+
name: "Ex",
|
|
55
|
+
label: "The label",
|
|
56
|
+
value: "default",
|
|
57
|
+
initialFocus: true
|
|
58
|
+
});
|
|
59
|
+
exports.WithInitialFocus = WithInitialFocus;
|
|
60
|
+
const IndeterminateProp = () => /*#__PURE__*/_react.default.createElement(_index.Checkbox, {
|
|
61
|
+
name: "Ex",
|
|
62
|
+
label: "The label",
|
|
63
|
+
value: "default",
|
|
64
|
+
indeterminate: true
|
|
65
|
+
});
|
|
66
|
+
exports.IndeterminateProp = IndeterminateProp;
|
|
67
|
+
const NoIndeterminateProp = () => /*#__PURE__*/_react.default.createElement(_index.Checkbox, {
|
|
68
|
+
name: "Ex",
|
|
69
|
+
label: "The label",
|
|
70
|
+
value: "default"
|
|
71
|
+
});
|
|
72
|
+
exports.NoIndeterminateProp = NoIndeterminateProp;
|
|
@@ -4,78 +4,58 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.Checkbox = void 0;
|
|
7
|
-
|
|
8
7
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
9
|
-
|
|
10
8
|
var _propTypes = require("@dhis2/prop-types");
|
|
11
|
-
|
|
12
9
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
13
|
-
|
|
14
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
|
-
|
|
16
11
|
var _propTypes2 = _interopRequireDefault(require("prop-types"));
|
|
17
|
-
|
|
18
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
19
|
-
|
|
20
13
|
var _checkboxIcon = require("./checkbox-icon.js");
|
|
21
|
-
|
|
22
|
-
function
|
|
23
|
-
|
|
24
|
-
function
|
|
25
|
-
|
|
26
|
-
function
|
|
27
|
-
|
|
28
|
-
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
|
29
|
-
|
|
14
|
+
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
15
|
+
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
16
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
17
|
+
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
18
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
19
|
+
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
30
20
|
class Checkbox extends _react.Component {
|
|
31
21
|
constructor() {
|
|
32
22
|
super(...arguments);
|
|
33
|
-
|
|
34
23
|
_defineProperty(this, "ref", /*#__PURE__*/(0, _react.createRef)());
|
|
35
|
-
|
|
36
24
|
_defineProperty(this, "handleChange", e => {
|
|
37
25
|
if (this.props.onChange) {
|
|
38
26
|
this.props.onChange(this.createHandlerPayload(), e);
|
|
39
27
|
}
|
|
40
28
|
});
|
|
41
|
-
|
|
42
29
|
_defineProperty(this, "handleBlur", e => {
|
|
43
30
|
if (this.props.onBlur) {
|
|
44
31
|
this.props.onBlur(this.createHandlerPayload(), e);
|
|
45
32
|
}
|
|
46
33
|
});
|
|
47
|
-
|
|
48
34
|
_defineProperty(this, "handleFocus", e => {
|
|
49
35
|
if (this.props.onFocus) {
|
|
50
36
|
this.props.onFocus(this.createHandlerPayload(), e);
|
|
51
37
|
}
|
|
52
38
|
});
|
|
53
|
-
|
|
54
39
|
_defineProperty(this, "handleKeyDown", e => {
|
|
55
40
|
if (this.props.onKeyDown) {
|
|
56
41
|
this.props.onKeyDown(this.createHandlerPayload(), e);
|
|
57
42
|
}
|
|
58
43
|
});
|
|
59
44
|
}
|
|
60
|
-
|
|
61
45
|
componentDidMount() {
|
|
62
46
|
if (this.props.initialFocus) {
|
|
63
47
|
this.ref.current.focus();
|
|
64
48
|
}
|
|
65
|
-
|
|
66
49
|
this.setIndeterminate(this.props.indeterminate);
|
|
67
50
|
}
|
|
68
|
-
|
|
69
51
|
componentDidUpdate(prevProps) {
|
|
70
52
|
if (prevProps.indeterminate !== this.props.indeterminate) {
|
|
71
53
|
this.setIndeterminate(this.props.indeterminate);
|
|
72
54
|
}
|
|
73
55
|
}
|
|
74
|
-
|
|
75
56
|
setIndeterminate(indeterminate) {
|
|
76
57
|
this.ref.current.indeterminate = indeterminate;
|
|
77
58
|
}
|
|
78
|
-
|
|
79
59
|
createHandlerPayload() {
|
|
80
60
|
return {
|
|
81
61
|
value: this.props.value,
|
|
@@ -83,7 +63,6 @@ class Checkbox extends _react.Component {
|
|
|
83
63
|
checked: !this.props.checked
|
|
84
64
|
};
|
|
85
65
|
}
|
|
86
|
-
|
|
87
66
|
render() {
|
|
88
67
|
const {
|
|
89
68
|
checked,
|
|
@@ -138,11 +117,9 @@ class Checkbox extends _react.Component {
|
|
|
138
117
|
})), label, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
139
118
|
id: "1252368010",
|
|
140
119
|
dynamic: [_uiConstants.colors.grey900, _uiConstants.theme.disabled, _uiConstants.spacers.dp4, _uiConstants.theme.focus]
|
|
141
|
-
}, [
|
|
120
|
+
}, [`label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;position:relative;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;cursor:pointer;color:${_uiConstants.colors.grey900};font-size:14px;line-height:19px;}`, "label.dense.__jsx-style-dynamic-selector{font-size:14px;line-height:16px;}", `label.disabled.__jsx-style-dynamic-selector{cursor:not-allowed;color:${_uiConstants.theme.disabled};}`, "input.__jsx-style-dynamic-selector{opacity:0;position:absolute;height:18px;width:18px;inset-inline-start:3px;}", "label.dense.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{height:14px;width:14px;}", `.icon.__jsx-style-dynamic-selector{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-inline-end:${_uiConstants.spacers.dp4};border:2px solid transparent;padding:1px;border-radius:5px;}`, "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-inline-end:3px;border-radius:4px;}", `input.__jsx-style-dynamic-selector:focus+.icon.__jsx-style-dynamic-selector{outline:3px solid ${_uiConstants.theme.focus};outline-offset:-3px;}`]));
|
|
142
121
|
}
|
|
143
|
-
|
|
144
122
|
}
|
|
145
|
-
|
|
146
123
|
exports.Checkbox = Checkbox;
|
|
147
124
|
Checkbox.defaultProps = {
|
|
148
125
|
checked: false,
|
|
@@ -166,7 +143,6 @@ Checkbox.propTypes = {
|
|
|
166
143
|
value: _propTypes2.default.string,
|
|
167
144
|
warning: _uiConstants.sharedPropTypes.statusPropType,
|
|
168
145
|
onBlur: _propTypes2.default.func,
|
|
169
|
-
|
|
170
146
|
/** Called with signature `(object, event)` */
|
|
171
147
|
onChange: _propTypes2.default.func,
|
|
172
148
|
onFocus: _propTypes2.default.func,
|