@dhis2-ui/switch 9.2.0 → 9.3.0-alpha.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.
|
@@ -15,16 +15,19 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
15
15
|
|
|
16
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
17
17
|
|
|
18
|
-
const styles = ["svg.jsx-
|
|
19
|
-
styles.__hash = "
|
|
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, ";}")];
|
|
19
|
+
styles.__hash = "4217794981";
|
|
20
20
|
|
|
21
21
|
function SwitchRegular(_ref) {
|
|
22
|
+
var _document$documentEle, _document$documentEle2;
|
|
23
|
+
|
|
22
24
|
let {
|
|
23
25
|
className
|
|
24
26
|
} = _ref;
|
|
25
27
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
26
28
|
viewBox: "0 0 42 22",
|
|
27
29
|
xmlns: "http://www.w3.org/2000/svg",
|
|
30
|
+
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',
|
|
28
31
|
className: "jsx-".concat(styles.__hash) + " " + (className || "")
|
|
29
32
|
}, /*#__PURE__*/_react.default.createElement("path", {
|
|
30
33
|
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",
|
|
@@ -3,15 +3,17 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.WarningDense = exports.Warning = exports.ValidDense = exports.Valid = exports.ImageLabelDense = exports.ImageLabel = exports.FocusedUncheckedDense = exports.FocusedUnchecked = exports.FocusedCheckedDense = exports.FocusedChecked = exports.ErrorDense = exports.Error = exports.DisabledDense = exports.Disabled = exports.DefaultDense = exports.Default = exports.CheckedDense = exports.Checked = void 0;
|
|
6
|
+
exports.default = exports.WarningDense = exports.Warning = exports.ValidDense = exports.Valid = exports.RTL = exports.ImageLabelDense = exports.ImageLabel = exports.FocusedUncheckedDense = exports.FocusedUnchecked = exports.FocusedCheckedDense = exports.FocusedChecked = exports.ErrorDense = exports.Error = exports.DisabledDense = exports.Disabled = exports.DefaultDense = exports.Default = exports.CheckedDense = exports.Checked = void 0;
|
|
7
7
|
|
|
8
8
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
9
9
|
|
|
10
|
-
var _react =
|
|
10
|
+
var _react = _interopRequireWildcard(require("react"));
|
|
11
11
|
|
|
12
12
|
var _index = require("./index.js");
|
|
13
13
|
|
|
14
|
-
function
|
|
14
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
15
|
+
|
|
16
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
15
17
|
|
|
16
18
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
17
19
|
|
|
@@ -209,4 +211,25 @@ exports.ImageLabelDense = ImageLabelDense;
|
|
|
209
211
|
ImageLabelDense.args = { ...ImageLabel.args,
|
|
210
212
|
...DefaultDense.args
|
|
211
213
|
};
|
|
212
|
-
ImageLabelDense.storyName = 'Image label - Dense';
|
|
214
|
+
ImageLabelDense.storyName = 'Image label - Dense';
|
|
215
|
+
|
|
216
|
+
const RTL = args => {
|
|
217
|
+
(0, _react.useEffect)(() => {
|
|
218
|
+
document.documentElement.setAttribute('dir', 'rtl');
|
|
219
|
+
return () => {
|
|
220
|
+
document.documentElement.setAttribute('dir', 'ltr');
|
|
221
|
+
};
|
|
222
|
+
}, []);
|
|
223
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
224
|
+
dir: "rtl"
|
|
225
|
+
}, /*#__PURE__*/_react.default.createElement(Template, args), /*#__PURE__*/_react.default.createElement(Template, {
|
|
226
|
+
checked: true,
|
|
227
|
+
value: "checked"
|
|
228
|
+
}), /*#__PURE__*/_react.default.createElement(Template, {
|
|
229
|
+
error: true,
|
|
230
|
+
checked: true,
|
|
231
|
+
value: "error"
|
|
232
|
+
}));
|
|
233
|
+
};
|
|
234
|
+
|
|
235
|
+
exports.RTL = RTL;
|
|
@@ -2,15 +2,18 @@ import _JSXStyle from "styled-jsx/style";
|
|
|
2
2
|
import { colors } from '@dhis2/ui-constants';
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
4
|
import React from 'react';
|
|
5
|
-
const styles = ["svg.jsx-
|
|
6
|
-
styles.__hash = "
|
|
5
|
+
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(colors.grey600, ";}"), "svg.jsx-4217794981 .checkmark.jsx-4217794981,svg.jsx-4217794981 .cross.jsx-4217794981,svg.jsx-4217794981 .handle.jsx-4217794981{fill:".concat(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(colors.teal400, ";}"), "svg.valid.jsx-4217794981 .background.jsx-4217794981{fill:".concat(colors.blue600, ";}"), "svg.warning.jsx-4217794981 .background.jsx-4217794981{fill:".concat(colors.yellow700, ";}"), "svg.error.jsx-4217794981 .background.jsx-4217794981{fill:".concat(colors.red500, ";}"), "svg.checked.jsx-4217794981 .border.jsx-4217794981{fill:".concat(colors.teal700, ";}"), "svg.disabled.jsx-4217794981 .background.jsx-4217794981{fill:".concat(colors.grey300, ";}"), "svg.disabled.jsx-4217794981 .border.jsx-4217794981{fill:".concat(colors.grey400, ";}"), "svg.valid.jsx-4217794981 .border.jsx-4217794981{fill:".concat(colors.blue600, ";}"), "svg.valid.checked.jsx-4217794981 .border.jsx-4217794981,svg.valid.indeterminate.jsx-4217794981 .border.jsx-4217794981{fill:".concat(colors.blue700, ";}"), "svg.warning.jsx-4217794981 .border.jsx-4217794981{fill:".concat(colors.yellow700, ";}"), "svg.warning.checked.jsx-4217794981 .border.jsx-4217794981{fill:".concat(colors.yellow800, ";}"), "svg.error.jsx-4217794981 .border.jsx-4217794981{fill:".concat(colors.red500, ";}"), "svg.error.checked.jsx-4217794981 .border.jsx-4217794981{fill:".concat(colors.red700, ";}")];
|
|
6
|
+
styles.__hash = "4217794981";
|
|
7
7
|
export function SwitchRegular(_ref) {
|
|
8
|
+
var _document$documentEle, _document$documentEle2;
|
|
9
|
+
|
|
8
10
|
let {
|
|
9
11
|
className
|
|
10
12
|
} = _ref;
|
|
11
13
|
return /*#__PURE__*/React.createElement("svg", {
|
|
12
14
|
viewBox: "0 0 42 22",
|
|
13
15
|
xmlns: "http://www.w3.org/2000/svg",
|
|
16
|
+
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',
|
|
14
17
|
className: "jsx-".concat(styles.__hash) + " " + (className || "")
|
|
15
18
|
}, /*#__PURE__*/React.createElement("path", {
|
|
16
19
|
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",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
|
|
3
3
|
import { sharedPropTypes } from '@dhis2/ui-constants';
|
|
4
|
-
import React from 'react';
|
|
4
|
+
import React, { useEffect } from 'react';
|
|
5
5
|
import { Switch } from './index.js';
|
|
6
6
|
const subtitle = 'An input control that allows an on and an off state';
|
|
7
7
|
const description = "\n**Switches are used sparingly in DHIS2, as they are not yet an accepted input control on the web. Users are not always used to the concept of a switch, but understanding is growing with wide adoption on mobile platforms.**\n\nUse switches only when the user can toggle between on/off. Never use a switch for yes/no or any other states, use a checkbox instead. It is often safer to use a checkbox for things like turning options on/off, as users understand this pattern. Switches can be useful for ongoing or active processes, where turning them on/off makes more sense conceptually. An example of this may be toggling on/off 'Logging' or 'Update automatically', both processes that are ongoing.\n\n```js\nimport { Switch } from '@dhis2/ui'\n```\n";
|
|
@@ -176,4 +176,22 @@ export const ImageLabelDense = Template.bind({});
|
|
|
176
176
|
ImageLabelDense.args = { ...ImageLabel.args,
|
|
177
177
|
...DefaultDense.args
|
|
178
178
|
};
|
|
179
|
-
ImageLabelDense.storyName = 'Image label - Dense';
|
|
179
|
+
ImageLabelDense.storyName = 'Image label - Dense';
|
|
180
|
+
export const RTL = args => {
|
|
181
|
+
useEffect(() => {
|
|
182
|
+
document.documentElement.setAttribute('dir', 'rtl');
|
|
183
|
+
return () => {
|
|
184
|
+
document.documentElement.setAttribute('dir', 'ltr');
|
|
185
|
+
};
|
|
186
|
+
}, []);
|
|
187
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
188
|
+
dir: "rtl"
|
|
189
|
+
}, /*#__PURE__*/React.createElement(Template, args), /*#__PURE__*/React.createElement(Template, {
|
|
190
|
+
checked: true,
|
|
191
|
+
value: "checked"
|
|
192
|
+
}), /*#__PURE__*/React.createElement(Template, {
|
|
193
|
+
error: true,
|
|
194
|
+
checked: true,
|
|
195
|
+
value: "error"
|
|
196
|
+
}));
|
|
197
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/switch",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.3.0-alpha.2",
|
|
4
4
|
"description": "UI Switch",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -33,9 +33,9 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@dhis2/prop-types": "^3.1.2",
|
|
36
|
-
"@dhis2-ui/field": "9.
|
|
37
|
-
"@dhis2-ui/required": "9.
|
|
38
|
-
"@dhis2/ui-constants": "9.
|
|
36
|
+
"@dhis2-ui/field": "9.3.0-alpha.2",
|
|
37
|
+
"@dhis2-ui/required": "9.3.0-alpha.2",
|
|
38
|
+
"@dhis2/ui-constants": "9.3.0-alpha.2",
|
|
39
39
|
"classnames": "^2.3.1",
|
|
40
40
|
"prop-types": "^15.7.2"
|
|
41
41
|
},
|