@dhis2-ui/switch 9.10.3 → 9.11.1-beta.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/index.js +0 -2
- package/build/cjs/switch/__tests__/switch.test.js +1 -7
- package/build/cjs/switch/features/accepts_initial_focus/index.js +1 -2
- package/build/cjs/switch/features/accepts_label/index.js +0 -1
- package/build/cjs/switch/features/can_be_blurred/index.js +1 -2
- package/build/cjs/switch/features/can_be_changed/index.js +1 -2
- package/build/cjs/switch/features/can_be_disabled/index.js +0 -1
- package/build/cjs/switch/features/can_be_focused/index.js +1 -2
- package/build/cjs/switch/index.js +0 -1
- package/build/cjs/switch/switch-icons.js +21 -22
- package/build/cjs/switch/switch.e2e.stories.js +57 -0
- package/build/cjs/switch/switch.js +7 -40
- package/build/cjs/switch/{switch.stories.js → switch.prod.stories.js} +53 -73
- package/build/cjs/switch-field/__tests__/switch-field.test.js +1 -7
- package/build/cjs/switch-field/features/can_be_required/index.js +0 -1
- package/build/cjs/switch-field/index.js +0 -1
- package/build/cjs/switch-field/switch-field.e2e.stories.js +19 -0
- package/build/cjs/switch-field/switch-field.js +4 -30
- package/build/cjs/switch-field/{switch-field.stories.js → switch-field.prod.stories.js} +59 -72
- package/build/es/switch/features/accepts_initial_focus/index.js +1 -1
- package/build/es/switch/features/can_be_blurred/index.js +1 -1
- package/build/es/switch/features/can_be_changed/index.js +1 -1
- package/build/es/switch/features/can_be_focused/index.js +1 -1
- package/build/es/switch/switch-icons.js +20 -13
- package/build/es/switch/{switch.stories.e2e.js → switch.e2e.stories.js} +15 -8
- package/build/es/switch/switch.js +4 -29
- package/build/es/switch/{switch.stories.js → switch.prod.stories.js} +33 -25
- package/build/es/switch-field/switch-field.e2e.stories.js +11 -0
- package/build/es/switch-field/switch-field.js +3 -22
- package/build/es/switch-field/{switch-field.stories.js → switch-field.prod.stories.js} +38 -23
- package/package.json +7 -7
- package/build/cjs/switch/switch.stories.e2e.js +0 -44
- package/build/cjs/switch-field/switch-field.stories.e2e.js +0 -16
- package/build/es/switch-field/switch-field.stories.e2e.js +0 -9
package/build/cjs/index.js
CHANGED
|
@@ -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 _switch = require("../switch.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('<Switch />', () => {
|
|
12
8
|
it('should call the onKeyDown callback when provided', () => {
|
|
13
9
|
const onKeyDown = jest.fn();
|
|
@@ -17,13 +13,11 @@ describe('<Switch />', () => {
|
|
|
17
13
|
checked: false,
|
|
18
14
|
onKeyDown: onKeyDown
|
|
19
15
|
}));
|
|
20
|
-
|
|
21
16
|
_react.fireEvent.keyDown(_react.screen.getByRole('switch'), {
|
|
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',
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a Switch with initialFocus is rendered', () => {
|
|
6
|
-
cy.visitStory('Switch', 'With
|
|
5
|
+
cy.visitStory('Switch', 'With initial focus');
|
|
7
6
|
});
|
|
8
7
|
(0, _cypressCucumberPreprocessor.Then)('the Switch is focused', () => {
|
|
9
8
|
cy.focused().parent('[data-test="dhis2-uicore-switch"]').should('exist');
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a Switch with initialFocus and onBlur handler is rendered', () => {
|
|
6
|
-
cy.visitStory('Switch', 'With
|
|
5
|
+
cy.visitStory('Switch', 'With initial focus and on blur');
|
|
7
6
|
});
|
|
8
7
|
(0, _cypressCucumberPreprocessor.When)('the Switch is blurred', () => {
|
|
9
8
|
cy.get('[data-test="dhis2-uicore-switch"] input').blur();
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a Switch with onChange handler is rendered', () => {
|
|
6
|
-
cy.visitStory('Switch', 'With
|
|
5
|
+
cy.visitStory('Switch', 'With on change');
|
|
7
6
|
});
|
|
8
7
|
(0, _cypressCucumberPreprocessor.When)('the Switch is clicked', () => {
|
|
9
8
|
cy.get('[data-test="dhis2-uicore-switch"]').click();
|
|
@@ -1,9 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
|
4
|
-
|
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a Switch with onFocus handler is rendered', () => {
|
|
6
|
-
cy.visitStory('Switch', 'With
|
|
5
|
+
cy.visitStory('Switch', 'With on focus');
|
|
7
6
|
});
|
|
8
7
|
(0, _cypressCucumberPreprocessor.When)('the Switch is focused', () => {
|
|
9
8
|
cy.get('[data-test="dhis2-uicore-switch"] input').focus();
|
|
@@ -4,23 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.SwitchRegular = SwitchRegular;
|
|
7
|
-
|
|
8
7
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
9
|
-
|
|
10
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
11
|
-
|
|
12
9
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
|
-
|
|
14
10
|
var _react = _interopRequireDefault(require("react"));
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const styles = ["svg.jsx-4217794981{display:block;pointer-events:none;height:18px;width:35px;}", "svg.jsx-4217794981:dir(rtl){-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1);}", "svg[dir='rtl'].jsx-4217794981{-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1);}", "svg.dense.jsx-4217794981{height:14px;width:27px;}", "svg.jsx-4217794981 .background.jsx-4217794981,svg.jsx-4217794981 .border.jsx-4217794981{fill:".concat(_uiConstants.colors.grey600, ";}"), "svg.jsx-4217794981 .checkmark.jsx-4217794981,svg.jsx-4217794981 .cross.jsx-4217794981,svg.jsx-4217794981 .handle.jsx-4217794981{fill:".concat(_uiConstants.colors.white, ";}"), "svg.jsx-4217794981 .checkmark.jsx-4217794981:dir(rtl){display:none;}", "svg[dir='rtl'].jsx-4217794981 .checkmark.jsx-4217794981{display:none;}", "svg.checked.jsx-4217794981 .handle-unchecked.jsx-4217794981,svg.jsx-4217794981:not(.checked) .handle-checked.jsx-4217794981{fill:none;}", "svg.checked.jsx-4217794981 .background.jsx-4217794981{fill:".concat(_uiConstants.colors.teal400, ";}"), "svg.valid.jsx-4217794981 .background.jsx-4217794981{fill:".concat(_uiConstants.colors.blue600, ";}"), "svg.warning.jsx-4217794981 .background.jsx-4217794981{fill:".concat(_uiConstants.colors.yellow700, ";}"), "svg.error.jsx-4217794981 .background.jsx-4217794981{fill:".concat(_uiConstants.colors.red500, ";}"), "svg.checked.jsx-4217794981 .border.jsx-4217794981{fill:".concat(_uiConstants.colors.teal700, ";}"), "svg.disabled.jsx-4217794981 .background.jsx-4217794981{fill:".concat(_uiConstants.colors.grey300, ";}"), "svg.disabled.jsx-4217794981 .border.jsx-4217794981{fill:".concat(_uiConstants.colors.grey400, ";}"), "svg.valid.jsx-4217794981 .border.jsx-4217794981{fill:".concat(_uiConstants.colors.blue600, ";}"), "svg.valid.checked.jsx-4217794981 .border.jsx-4217794981,svg.valid.indeterminate.jsx-4217794981 .border.jsx-4217794981{fill:".concat(_uiConstants.colors.blue700, ";}"), "svg.warning.jsx-4217794981 .border.jsx-4217794981{fill:".concat(_uiConstants.colors.yellow700, ";}"), "svg.warning.checked.jsx-4217794981 .border.jsx-4217794981{fill:".concat(_uiConstants.colors.yellow800, ";}"), "svg.error.jsx-4217794981 .border.jsx-4217794981{fill:".concat(_uiConstants.colors.red500, ";}"), "svg.error.checked.jsx-4217794981 .border.jsx-4217794981{fill:".concat(_uiConstants.colors.red700, ";}")];
|
|
11
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
12
|
+
const styles = ["svg.jsx-4217794981{display:block;pointer-events:none;height:18px;width:35px;}", "svg.jsx-4217794981:dir(rtl){-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1);}", "svg[dir='rtl'].jsx-4217794981{-webkit-transform:scale(-1,1);-ms-transform:scale(-1,1);transform:scale(-1,1);}", "svg.dense.jsx-4217794981{height:14px;width:27px;}", `svg.jsx-4217794981 .background.jsx-4217794981,svg.jsx-4217794981 .border.jsx-4217794981{fill:${_uiConstants.colors.grey600};}`, `svg.jsx-4217794981 .checkmark.jsx-4217794981,svg.jsx-4217794981 .cross.jsx-4217794981,svg.jsx-4217794981 .handle.jsx-4217794981{fill:${_uiConstants.colors.white};}`, "svg.jsx-4217794981 .checkmark.jsx-4217794981:dir(rtl){display:none;}", "svg[dir='rtl'].jsx-4217794981 .checkmark.jsx-4217794981{display:none;}", "svg.checked.jsx-4217794981 .handle-unchecked.jsx-4217794981,svg.jsx-4217794981:not(.checked) .handle-checked.jsx-4217794981{fill:none;}", `svg.checked.jsx-4217794981 .background.jsx-4217794981{fill:${_uiConstants.colors.teal400};}`, `svg.valid.jsx-4217794981 .background.jsx-4217794981{fill:${_uiConstants.colors.blue600};}`, `svg.warning.jsx-4217794981 .background.jsx-4217794981{fill:${_uiConstants.colors.yellow700};}`, `svg.error.jsx-4217794981 .background.jsx-4217794981{fill:${_uiConstants.colors.red500};}`, `svg.checked.jsx-4217794981 .border.jsx-4217794981{fill:${_uiConstants.colors.teal700};}`, `svg.disabled.jsx-4217794981 .background.jsx-4217794981{fill:${_uiConstants.colors.grey300};}`, `svg.disabled.jsx-4217794981 .border.jsx-4217794981{fill:${_uiConstants.colors.grey400};}`, `svg.valid.jsx-4217794981 .border.jsx-4217794981{fill:${_uiConstants.colors.blue600};}`, `svg.valid.checked.jsx-4217794981 .border.jsx-4217794981,svg.valid.indeterminate.jsx-4217794981 .border.jsx-4217794981{fill:${_uiConstants.colors.blue700};}`, `svg.warning.jsx-4217794981 .border.jsx-4217794981{fill:${_uiConstants.colors.yellow700};}`, `svg.warning.checked.jsx-4217794981 .border.jsx-4217794981{fill:${_uiConstants.colors.yellow800};}`, `svg.error.jsx-4217794981 .border.jsx-4217794981{fill:${_uiConstants.colors.red500};}`, `svg.error.checked.jsx-4217794981 .border.jsx-4217794981{fill:${_uiConstants.colors.red700};}`];
|
|
19
13
|
styles.__hash = "4217794981";
|
|
20
|
-
|
|
21
14
|
function SwitchRegular(_ref) {
|
|
22
15
|
var _document$documentEle, _document$documentEle2;
|
|
23
|
-
|
|
24
16
|
let {
|
|
25
17
|
className
|
|
26
18
|
} = _ref;
|
|
@@ -28,38 +20,45 @@ function SwitchRegular(_ref) {
|
|
|
28
20
|
viewBox: "0 0 42 22",
|
|
29
21
|
xmlns: "http://www.w3.org/2000/svg",
|
|
30
22
|
dir: (_document$documentEle = (_document$documentEle2 = document.documentElement) === null || _document$documentEle2 === void 0 ? void 0 : _document$documentEle2.dir) !== null && _document$documentEle !== void 0 ? _document$documentEle : 'ltr',
|
|
31
|
-
className:
|
|
23
|
+
className: `jsx-${styles.__hash}` + " " + (className || "")
|
|
32
24
|
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
33
25
|
d: "M0,11 L0,11 C0,4.92486775 4.92076837,0 11.0075657,0 L30.9924343,0 C37.071745,0 42,4.923532 42,11 L42,11 C42,17.0751322 37.0792316,22 30.9924343,22 L11.0075657,22 C4.92825504,22 0,17.0791222 0,11 L0,11 Z",
|
|
34
26
|
fill: "red",
|
|
35
|
-
className:
|
|
27
|
+
className: `jsx-${styles.__hash}` + " " + "background"
|
|
36
28
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
37
|
-
d: "M30.9924343,0 C36.975248,0 41.8432574,4.76846989 41.99629,10.7115309 L42,11 C42,17.0751322 37.0792316,22 30.9924343,22 L11.0075657,22 C5.02475203,22 0.156742552,17.2341007 0.00370995454,11.2885915 L0,11 C0,4.92486775 4.92076837,0 11.0075657,0 L30.9924343,0 Z M30.9924343,1 L11.0075657,1 C5.47559009,1 0.99991738,5.47461611 0.99991738,10.9871457 L1.00337887,11.2628608 C1.14271146,16.6761076 5.5768313,21 11.0075657,21 L30.9924343,21 C36.5244099,21 41.0000827,16.5253839 41.0000827,11.0128598 L40.9966214,10.7372722 C40.8572703,5.32553352 36.4222391,1 30.9924343,1 Z"
|
|
29
|
+
d: "M30.9924343,0 C36.975248,0 41.8432574,4.76846989 41.99629,10.7115309 L42,11 C42,17.0751322 37.0792316,22 30.9924343,22 L11.0075657,22 C5.02475203,22 0.156742552,17.2341007 0.00370995454,11.2885915 L0,11 C0,4.92486775 4.92076837,0 11.0075657,0 L30.9924343,0 Z M30.9924343,1 L11.0075657,1 C5.47559009,1 0.99991738,5.47461611 0.99991738,10.9871457 L1.00337887,11.2628608 C1.14271146,16.6761076 5.5768313,21 11.0075657,21 L30.9924343,21 C36.5244099,21 41.0000827,16.5253839 41.0000827,11.0128598 L40.9966214,10.7372722 C40.8572703,5.32553352 36.4222391,1 30.9924343,1 Z"
|
|
30
|
+
|
|
31
|
+
// fill="#00695C"
|
|
38
32
|
// fillRule="nonzero"
|
|
39
33
|
,
|
|
40
|
-
className:
|
|
34
|
+
className: `jsx-${styles.__hash}` + " " + "border"
|
|
41
35
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
42
36
|
d: "M27.7071068,7.29289322 L30,9.585 L32.2928932,7.29289322 C32.6533772,6.93240926 33.2206082,6.90467972 33.6128994,7.20970461 L33.7071068,7.29289322 C34.0976311,7.68341751 34.0976311,8.31658249 33.7071068,8.70710678 L33.7071068,8.70710678 L31.415,11 L33.7071068,13.2928932 C34.0976311,13.6834175 34.0976311,14.3165825 33.7071068,14.7071068 C33.3165825,15.0976311 32.6834175,15.0976311 32.2928932,14.7071068 L30,12.415 L27.7071068,14.7071068 C27.3466228,15.0675907 26.7793918,15.0953203 26.3871006,14.7902954 L26.2928932,14.7071068 C25.9023689,14.3165825 25.9023689,13.6834175 26.2928932,13.2928932 L26.2928932,13.2928932 L28.585,11 L26.2928932,8.70710678 C25.9023689,8.31658249 25.9023689,7.68341751 26.2928932,7.29289322 C26.6834175,6.90236893 27.3165825,6.90236893 27.7071068,7.29289322 Z",
|
|
43
37
|
fill: "#FFFFFF",
|
|
44
|
-
className:
|
|
38
|
+
className: `jsx-${styles.__hash}` + " " + "cross"
|
|
45
39
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
46
|
-
d: "M7.74451387,10.0285252 C7.39595738,10.1198564 7.12375034,10.3923519 7.03251575,10.7412777 C6.94128115,11.0902035 7.04521722,11.4612586 7.30437605,11.7118278 L10.2982384,14.7078028 C10.6875399,15.0973991 11.3185977,15.0973991 11.7078992,14.7078028 L16.695624,8.71585285 C16.9547828,8.46528367 17.0587189,8.09422851 16.9674843,7.74530271 C16.8762497,7.39637691 16.6040426,7.12388146 16.2554861,7.0325502 C15.9069296,6.94121893 15.5362672,7.04526513 15.2859632,7.30469855 L11.0030688,12.5910713 L8.71403676,10.3006735 C8.46373279,10.0412401 8.09307036,9.9371939 7.74451387,10.0285252 Z"
|
|
40
|
+
d: "M7.74451387,10.0285252 C7.39595738,10.1198564 7.12375034,10.3923519 7.03251575,10.7412777 C6.94128115,11.0902035 7.04521722,11.4612586 7.30437605,11.7118278 L10.2982384,14.7078028 C10.6875399,15.0973991 11.3185977,15.0973991 11.7078992,14.7078028 L16.695624,8.71585285 C16.9547828,8.46528367 17.0587189,8.09422851 16.9674843,7.74530271 C16.8762497,7.39637691 16.6040426,7.12388146 16.2554861,7.0325502 C15.9069296,6.94121893 15.5362672,7.04526513 15.2859632,7.30469855 L11.0030688,12.5910713 L8.71403676,10.3006735 C8.46373279,10.0412401 8.09307036,9.9371939 7.74451387,10.0285252 Z"
|
|
41
|
+
|
|
42
|
+
// fill="#FFFFFF"
|
|
47
43
|
// fillRule="nonzero"
|
|
48
44
|
,
|
|
49
|
-
className:
|
|
45
|
+
className: `jsx-${styles.__hash}` + " " + "checkmark"
|
|
50
46
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
51
|
-
d: "M11,20 C15.9705627,20 20,15.9705627 20,11 C20,6.02943725 15.9705627,2 11,2 C6.02943725,2 2,6.02943725 2,11 C2,15.9705627 6.02943725,20 11,20 Z"
|
|
47
|
+
d: "M11,20 C15.9705627,20 20,15.9705627 20,11 C20,6.02943725 15.9705627,2 11,2 C6.02943725,2 2,6.02943725 2,11 C2,15.9705627 6.02943725,20 11,20 Z"
|
|
48
|
+
|
|
49
|
+
// fill="#FFFFFF"
|
|
52
50
|
,
|
|
53
|
-
className:
|
|
51
|
+
className: `jsx-${styles.__hash}` + " " + "handle handle-unchecked"
|
|
54
52
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
|
55
|
-
d: "M31,20 C35.9705627,20 40,15.9705627 40,11 C40,6.02943725 35.9705627,2 31,2 C26.0294373,2 22,6.02943725 22,11 C22,15.9705627 26.0294373,20 31,20 Z"
|
|
53
|
+
d: "M31,20 C35.9705627,20 40,15.9705627 40,11 C40,6.02943725 35.9705627,2 31,2 C26.0294373,2 22,6.02943725 22,11 C22,15.9705627 26.0294373,20 31,20 Z"
|
|
54
|
+
|
|
55
|
+
// fill="#FFFFFF"
|
|
56
56
|
,
|
|
57
|
-
className:
|
|
57
|
+
className: `jsx-${styles.__hash}` + " " + "handle handle-checked"
|
|
58
58
|
}), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
59
59
|
id: styles.__hash
|
|
60
60
|
}, styles));
|
|
61
61
|
}
|
|
62
|
-
|
|
63
62
|
SwitchRegular.propTypes = {
|
|
64
63
|
className: _propTypes.default.string
|
|
65
64
|
};
|
|
@@ -0,0 +1,57 @@
|
|
|
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.WithDisabled = 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.onChange = window.Cypress && window.Cypress.cy.stub();
|
|
11
|
+
window.onBlur = window.Cypress && window.Cypress.cy.stub();
|
|
12
|
+
window.onFocus = window.Cypress && window.Cypress.cy.stub();
|
|
13
|
+
var _default = exports.default = {
|
|
14
|
+
title: 'Switch'
|
|
15
|
+
};
|
|
16
|
+
const WithOnChange = () => /*#__PURE__*/_react.default.createElement(_index.Switch, {
|
|
17
|
+
name: "Ex",
|
|
18
|
+
label: "Switch",
|
|
19
|
+
value: "default",
|
|
20
|
+
onChange: window.onChange
|
|
21
|
+
});
|
|
22
|
+
exports.WithOnChange = WithOnChange;
|
|
23
|
+
const WithInitialFocusAndOnBlur = () => /*#__PURE__*/_react.default.createElement(_index.Switch, {
|
|
24
|
+
initialFocus: true,
|
|
25
|
+
name: "Ex",
|
|
26
|
+
label: "Switch",
|
|
27
|
+
value: "default",
|
|
28
|
+
onBlur: window.onBlur
|
|
29
|
+
});
|
|
30
|
+
exports.WithInitialFocusAndOnBlur = WithInitialFocusAndOnBlur;
|
|
31
|
+
const WithOnFocus = () => /*#__PURE__*/_react.default.createElement(_index.Switch, {
|
|
32
|
+
name: "Ex",
|
|
33
|
+
label: "Switch",
|
|
34
|
+
value: "default",
|
|
35
|
+
onFocus: window.onFocus
|
|
36
|
+
});
|
|
37
|
+
exports.WithOnFocus = WithOnFocus;
|
|
38
|
+
const WithDisabled = () => /*#__PURE__*/_react.default.createElement(_index.Switch, {
|
|
39
|
+
name: "Ex",
|
|
40
|
+
label: "Switch",
|
|
41
|
+
value: "default",
|
|
42
|
+
disabled: true
|
|
43
|
+
});
|
|
44
|
+
exports.WithDisabled = WithDisabled;
|
|
45
|
+
const WithLabel = () => /*#__PURE__*/_react.default.createElement(_index.Switch, {
|
|
46
|
+
name: "Ex",
|
|
47
|
+
label: "The label",
|
|
48
|
+
value: "default"
|
|
49
|
+
});
|
|
50
|
+
exports.WithLabel = WithLabel;
|
|
51
|
+
const WithInitialFocus = () => /*#__PURE__*/_react.default.createElement(_index.Switch, {
|
|
52
|
+
name: "Ex",
|
|
53
|
+
label: "The label",
|
|
54
|
+
value: "default",
|
|
55
|
+
initialFocus: true
|
|
56
|
+
});
|
|
57
|
+
exports.WithInitialFocus = WithInitialFocus;
|
|
@@ -4,64 +4,48 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports.Switch = void 0;
|
|
7
|
-
|
|
8
7
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
9
|
-
|
|
10
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
11
|
-
|
|
12
9
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
13
|
-
|
|
14
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
15
|
-
|
|
16
11
|
var _react = _interopRequireWildcard(require("react"));
|
|
17
|
-
|
|
18
12
|
var _switchIcons = require("./switch-icons.js");
|
|
19
|
-
|
|
20
|
-
function
|
|
21
|
-
|
|
22
|
-
function
|
|
23
|
-
|
|
24
|
-
function
|
|
25
|
-
|
|
26
|
-
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; }
|
|
27
|
-
|
|
13
|
+
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); }
|
|
14
|
+
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; }
|
|
15
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
|
+
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; }
|
|
17
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
18
|
+
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); }
|
|
28
19
|
class Switch extends _react.Component {
|
|
29
20
|
constructor() {
|
|
30
21
|
super(...arguments);
|
|
31
|
-
|
|
32
22
|
_defineProperty(this, "ref", /*#__PURE__*/(0, _react.createRef)());
|
|
33
|
-
|
|
34
23
|
_defineProperty(this, "handleChange", e => {
|
|
35
24
|
if (this.props.onChange) {
|
|
36
25
|
this.props.onChange(this.createHandlerPayload(), e);
|
|
37
26
|
}
|
|
38
27
|
});
|
|
39
|
-
|
|
40
28
|
_defineProperty(this, "handleBlur", e => {
|
|
41
29
|
if (this.props.onBlur) {
|
|
42
30
|
this.props.onBlur(this.createHandlerPayload(), e);
|
|
43
31
|
}
|
|
44
32
|
});
|
|
45
|
-
|
|
46
33
|
_defineProperty(this, "handleFocus", e => {
|
|
47
34
|
if (this.props.onFocus) {
|
|
48
35
|
this.props.onFocus(this.createHandlerPayload(), e);
|
|
49
36
|
}
|
|
50
37
|
});
|
|
51
|
-
|
|
52
38
|
_defineProperty(this, "handleKeyDown", e => {
|
|
53
39
|
if (this.props.onKeyDown) {
|
|
54
40
|
this.props.onKeyDown(this.createHandlerPayload(), e);
|
|
55
41
|
}
|
|
56
42
|
});
|
|
57
43
|
}
|
|
58
|
-
|
|
59
44
|
componentDidMount() {
|
|
60
45
|
if (this.props.initialFocus) {
|
|
61
46
|
this.ref.current.focus();
|
|
62
47
|
}
|
|
63
48
|
}
|
|
64
|
-
|
|
65
49
|
createHandlerPayload() {
|
|
66
50
|
return {
|
|
67
51
|
value: this.props.value,
|
|
@@ -69,7 +53,6 @@ class Switch extends _react.Component {
|
|
|
69
53
|
checked: !this.props.checked
|
|
70
54
|
};
|
|
71
55
|
}
|
|
72
|
-
|
|
73
56
|
render() {
|
|
74
57
|
const {
|
|
75
58
|
'aria-label': ariaLabel,
|
|
@@ -125,11 +108,9 @@ class Switch extends _react.Component {
|
|
|
125
108
|
})), label, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
126
109
|
id: "3097670863",
|
|
127
110
|
dynamic: [_uiConstants.colors.grey900, _uiConstants.theme.disabled, _uiConstants.theme.focus]
|
|
128
|
-
}, [
|
|
111
|
+
}, [`label.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-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;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:35px;margin-left:3px;}", "label.dense.__jsx-style-dynamic-selector input.__jsx-style-dynamic-selector{height:14px;width:27px;}", ".icon.__jsx-style-dynamic-selector{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;margin-right:5px;border:2px solid transparent;padding:1px;border-radius:14px;}", "label.dense.__jsx-style-dynamic-selector .icon.__jsx-style-dynamic-selector{margin-right:3px;border-radius:12px;}", `input.__jsx-style-dynamic-selector:focus+.icon.__jsx-style-dynamic-selector{outline:3px solid ${_uiConstants.theme.focus};outline-offset:-3px;}`]));
|
|
129
112
|
}
|
|
130
|
-
|
|
131
113
|
}
|
|
132
|
-
|
|
133
114
|
exports.Switch = Switch;
|
|
134
115
|
Switch.defaultProps = {
|
|
135
116
|
checked: false,
|
|
@@ -142,47 +123,33 @@ Switch.propTypes = {
|
|
|
142
123
|
checked: _propTypes.default.bool,
|
|
143
124
|
className: _propTypes.default.string,
|
|
144
125
|
dataTest: _propTypes.default.string,
|
|
145
|
-
|
|
146
126
|
/** Makes the switch smaller for information-dense layouts */
|
|
147
127
|
dense: _propTypes.default.bool,
|
|
148
|
-
|
|
149
128
|
/** Disables the switch */
|
|
150
129
|
disabled: _propTypes.default.bool,
|
|
151
|
-
|
|
152
130
|
/** Applies 'error' styles for validation feedback. Mutually exclusive with `valid` and `warning` prop types */
|
|
153
131
|
error: _uiConstants.sharedPropTypes.statusPropType,
|
|
154
|
-
|
|
155
132
|
/** Grab initial focus on the page */
|
|
156
133
|
initialFocus: _propTypes.default.bool,
|
|
157
|
-
|
|
158
134
|
/** Label for the switch. Can be a string or an element, for example an image */
|
|
159
135
|
label: _propTypes.default.node,
|
|
160
|
-
|
|
161
136
|
/** Name associated with the switch. Passed to event handlers in object */
|
|
162
137
|
name: _propTypes.default.string,
|
|
163
|
-
|
|
164
138
|
/** Sets a role attribute on the input */
|
|
165
139
|
role: _propTypes.default.string,
|
|
166
140
|
tabIndex: _propTypes.default.string,
|
|
167
|
-
|
|
168
141
|
/** Applies 'valid' styles for validation feedback. Mutually exclusive with `error` and `warning` prop types */
|
|
169
142
|
valid: _uiConstants.sharedPropTypes.statusPropType,
|
|
170
|
-
|
|
171
143
|
/** Value associated with the switch. Passed to event handlers in object */
|
|
172
144
|
value: _propTypes.default.string,
|
|
173
|
-
|
|
174
145
|
/** Applies 'warning' styles for validation feedback. Mutually exclusive with `valid` and `error` prop types */
|
|
175
146
|
warning: _uiConstants.sharedPropTypes.statusPropType,
|
|
176
|
-
|
|
177
147
|
/** Called with signature `({ name: string, value: string, checked: bool }, event)` */
|
|
178
148
|
onBlur: _propTypes.default.func,
|
|
179
|
-
|
|
180
149
|
/** Called with signature `({ name: string, value: string, checked: bool }, event)` */
|
|
181
150
|
onChange: _propTypes.default.func,
|
|
182
|
-
|
|
183
151
|
/** Called with signature `({ name: string, value: string, checked: bool }, event)` */
|
|
184
152
|
onFocus: _propTypes.default.func,
|
|
185
|
-
|
|
186
153
|
/** Called with signature `({ name: string, value: string, checked: bool }, event)` */
|
|
187
154
|
onKeyDown: _propTypes.default.func
|
|
188
155
|
};
|