@dhis2-ui/button 10.16.3 → 10.16.4
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/button/button.js +25 -27
- package/build/cjs/button/button.prod.stories.js +4 -7
- package/build/cjs/button-strip/button-strip.js +19 -23
- package/build/cjs/dropdown-button/dropdown-button.js +13 -17
- package/build/cjs/dropdown-button/dropdown-button.prod.stories.js +4 -8
- package/build/cjs/locales/index.js +6 -1
- package/build/cjs/split-button/split-button.js +3 -4
- package/build/cjs/split-button/split-button.prod.stories.js +1 -3
- package/build/es/button/button.js +24 -25
- package/build/es/button/button.prod.stories.js +4 -7
- package/build/es/button-strip/button-strip.js +18 -21
- package/build/es/dropdown-button/dropdown-button.js +12 -15
- package/build/es/dropdown-button/dropdown-button.prod.stories.js +3 -6
- package/build/es/locales/index.js +6 -1
- package/build/es/split-button/split-button.js +2 -2
- package/build/es/split-button/split-button.prod.stories.js +1 -3
- package/package.json +6 -6
- package/src/locales/index.js +6 -1
|
@@ -11,35 +11,33 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
|
11
11
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
13
|
var _buttonStyles = _interopRequireDefault(require("./button.styles.js"));
|
|
14
|
-
function
|
|
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; }
|
|
14
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
16
15
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
17
16
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
18
|
-
const Button =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
} = _ref;
|
|
17
|
+
const Button = ({
|
|
18
|
+
children,
|
|
19
|
+
className,
|
|
20
|
+
dataTest = 'dhis2-uicore-button',
|
|
21
|
+
destructive,
|
|
22
|
+
disabled,
|
|
23
|
+
icon,
|
|
24
|
+
initialFocus,
|
|
25
|
+
large,
|
|
26
|
+
name,
|
|
27
|
+
primary,
|
|
28
|
+
secondary,
|
|
29
|
+
small,
|
|
30
|
+
tabIndex,
|
|
31
|
+
toggled,
|
|
32
|
+
type = 'button',
|
|
33
|
+
value,
|
|
34
|
+
onBlur,
|
|
35
|
+
onClick,
|
|
36
|
+
onFocus,
|
|
37
|
+
onKeyDown,
|
|
38
|
+
loading,
|
|
39
|
+
...otherProps
|
|
40
|
+
}) => {
|
|
43
41
|
const ref = (0, _react.useRef)();
|
|
44
42
|
(0, _react.useEffect)(() => {
|
|
45
43
|
if (initialFocus && ref.current) {
|
|
@@ -21,13 +21,10 @@ const {
|
|
|
21
21
|
buttonVariantArgType,
|
|
22
22
|
sizeArgType
|
|
23
23
|
} = _uiConstants.sharedPropTypes;
|
|
24
|
-
const logger =
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
} = _ref;
|
|
29
|
-
return console.log(`${name}: ${value}`);
|
|
30
|
-
};
|
|
24
|
+
const logger = ({
|
|
25
|
+
name,
|
|
26
|
+
value
|
|
27
|
+
}) => console.log(`${name}: ${value}`);
|
|
31
28
|
var _default = exports.default = {
|
|
32
29
|
title: 'Button',
|
|
33
30
|
component: _button.Button,
|
|
@@ -10,31 +10,27 @@ var _uiConstants = require("@dhis2/ui-constants");
|
|
|
10
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
11
|
var _propTypes2 = _interopRequireDefault(require("prop-types"));
|
|
12
12
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
function
|
|
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; }
|
|
13
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
15
14
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
16
|
-
const ButtonStrip =
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
15
|
+
const ButtonStrip = ({
|
|
16
|
+
className,
|
|
17
|
+
children,
|
|
18
|
+
middle,
|
|
19
|
+
end,
|
|
20
|
+
dataTest = 'dhis2-uicore-buttonstrip'
|
|
21
|
+
}) => /*#__PURE__*/_react.default.createElement("div", {
|
|
22
|
+
"data-test": dataTest,
|
|
23
|
+
className: _style.default.dynamic([["3148822533", [_uiConstants.spacers.dp8]]]) + " " + ((0, _classnames.default)(className, {
|
|
24
|
+
start: !middle && !end,
|
|
20
25
|
middle,
|
|
21
|
-
end
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
end
|
|
30
|
-
}) || "")
|
|
31
|
-
}, _react.Children.map(children, child => /*#__PURE__*/_react.default.createElement("div", {
|
|
32
|
-
className: _style.default.dynamic([["3148822533", [_uiConstants.spacers.dp8]]]) + " " + "box"
|
|
33
|
-
}, child)), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
34
|
-
id: "3148822533",
|
|
35
|
-
dynamic: [_uiConstants.spacers.dp8]
|
|
36
|
-
}, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.middle.__jsx-style-dynamic-selector{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", "div.end.__jsx-style-dynamic-selector{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}", `.box.__jsx-style-dynamic-selector{margin-inline-start:${_uiConstants.spacers.dp8};}`, ".box.__jsx-style-dynamic-selector:first-child{margin-inline-start:0;}"]));
|
|
37
|
-
};
|
|
26
|
+
end
|
|
27
|
+
}) || "")
|
|
28
|
+
}, _react.Children.map(children, child => /*#__PURE__*/_react.default.createElement("div", {
|
|
29
|
+
className: _style.default.dynamic([["3148822533", [_uiConstants.spacers.dp8]]]) + " " + "box"
|
|
30
|
+
}, child)), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
31
|
+
id: "3148822533",
|
|
32
|
+
dynamic: [_uiConstants.spacers.dp8]
|
|
33
|
+
}, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.middle.__jsx-style-dynamic-selector{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", "div.end.__jsx-style-dynamic-selector{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}", `.box.__jsx-style-dynamic-selector{margin-inline-start:${_uiConstants.spacers.dp8};}`, ".box.__jsx-style-dynamic-selector:first-child{margin-inline-start:0;}"]));
|
|
38
34
|
exports.ButtonStrip = ButtonStrip;
|
|
39
35
|
const alignmentPropType = (0, _propTypes.mutuallyExclusive)(['middle', 'end'], _propTypes2.default.bool);
|
|
40
36
|
ButtonStrip.propTypes = {
|
|
@@ -12,16 +12,14 @@ var _popper = require("@dhis2-ui/popper");
|
|
|
12
12
|
var _propTypes2 = _interopRequireDefault(require("prop-types"));
|
|
13
13
|
var _react = _interopRequireWildcard(require("react"));
|
|
14
14
|
var _index = require("../button/index.js");
|
|
15
|
-
function
|
|
16
|
-
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 _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
17
16
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
18
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; }
|
|
19
18
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
20
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); }
|
|
21
|
-
function ArrowDown(
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
} = _ref;
|
|
20
|
+
function ArrowDown({
|
|
21
|
+
className
|
|
22
|
+
}) {
|
|
25
23
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
26
24
|
xmlns: "http://www.w3.org/2000/svg",
|
|
27
25
|
viewBox: "0 0 12 12",
|
|
@@ -36,10 +34,9 @@ function ArrowDown(_ref) {
|
|
|
36
34
|
ArrowDown.propTypes = {
|
|
37
35
|
className: _propTypes2.default.string
|
|
38
36
|
};
|
|
39
|
-
function ArrowUp(
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
} = _ref2;
|
|
37
|
+
function ArrowUp({
|
|
38
|
+
className
|
|
39
|
+
}) {
|
|
43
40
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
44
41
|
xmlns: "http://www.w3.org/2000/svg",
|
|
45
42
|
viewBox: "0 0 12 12",
|
|
@@ -56,8 +53,8 @@ ArrowUp.propTypes = {
|
|
|
56
53
|
className: _propTypes2.default.string
|
|
57
54
|
};
|
|
58
55
|
class DropdownButton extends _react.Component {
|
|
59
|
-
constructor() {
|
|
60
|
-
super(...
|
|
56
|
+
constructor(...args) {
|
|
57
|
+
super(...args);
|
|
61
58
|
_defineProperty(this, "state", {
|
|
62
59
|
open: false
|
|
63
60
|
});
|
|
@@ -71,11 +68,10 @@ class DropdownButton extends _react.Component {
|
|
|
71
68
|
});
|
|
72
69
|
}
|
|
73
70
|
});
|
|
74
|
-
_defineProperty(this, "onClickHandler", (
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
} = _ref3;
|
|
71
|
+
_defineProperty(this, "onClickHandler", ({
|
|
72
|
+
name,
|
|
73
|
+
value
|
|
74
|
+
}, event) => {
|
|
79
75
|
const handleClick = open => {
|
|
80
76
|
if (this.props.onClick) {
|
|
81
77
|
this.props.onClick({
|
|
@@ -8,8 +8,7 @@ var _uiConstants = require("@dhis2/ui-constants");
|
|
|
8
8
|
var _menu = require("@dhis2-ui/menu");
|
|
9
9
|
var _react = _interopRequireWildcard(require("react"));
|
|
10
10
|
var _index = require("./index.js");
|
|
11
|
-
function
|
|
12
|
-
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; }
|
|
11
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
13
12
|
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
|
|
14
13
|
const description = `
|
|
15
14
|
Presents several actions to a user in a small space. Can replace single, individual buttons. Should only be used for actions that are related to one another. Ensure the button has a useful level that communicates that actions are contained within. Dropdown buttons do not have an explicit action, only expanding the list of contained actions.
|
|
@@ -62,12 +61,9 @@ const Template = args => /*#__PURE__*/_react.default.createElement(_index.Dropdo
|
|
|
62
61
|
const Default = exports.Default = Template.bind({});
|
|
63
62
|
const WithClick = exports.WithClick = Template.bind({});
|
|
64
63
|
WithClick.args = {
|
|
65
|
-
onClick:
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
} = _ref;
|
|
69
|
-
return console.log('onClick: the dropdown is open: ', open);
|
|
70
|
-
}
|
|
64
|
+
onClick: ({
|
|
65
|
+
open
|
|
66
|
+
}) => console.log('onClick: the dropdown is open: ', open)
|
|
71
67
|
};
|
|
72
68
|
const Primary = exports.Primary = Template.bind({});
|
|
73
69
|
Primary.args = {
|
|
@@ -17,5 +17,10 @@ function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e
|
|
|
17
17
|
//------------------------------------------------------------------------------
|
|
18
18
|
|
|
19
19
|
const namespace = 'default';
|
|
20
|
-
|
|
20
|
+
|
|
21
|
+
// Use 'deep' = true and 'overwrite' = false to add to, but not overwrite,
|
|
22
|
+
// custom translations from the datastore (added by the app adapter)
|
|
23
|
+
|
|
24
|
+
_d2I18n.default.addResourceBundle('en', namespace, _translations.default, true, false);
|
|
25
|
+
_d2I18n.default.addResourceBundle('en', namespace, _translations.default, true, false);
|
|
21
26
|
var _default = exports.default = _d2I18n.default;
|
|
@@ -15,8 +15,7 @@ var _propTypes2 = _interopRequireDefault(require("prop-types"));
|
|
|
15
15
|
var _react = _interopRequireWildcard(require("react"));
|
|
16
16
|
var _index = require("../button/index.js");
|
|
17
17
|
var _index2 = _interopRequireDefault(require("../locales/index.js"));
|
|
18
|
-
function
|
|
19
|
-
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; }
|
|
18
|
+
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
|
|
20
19
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
21
20
|
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; }
|
|
22
21
|
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
|
@@ -28,8 +27,8 @@ const rightButton = {
|
|
|
28
27
|
className: "jsx-2502148942"
|
|
29
28
|
};
|
|
30
29
|
class SplitButton extends _react.Component {
|
|
31
|
-
constructor() {
|
|
32
|
-
super(...
|
|
30
|
+
constructor(...args) {
|
|
31
|
+
super(...args);
|
|
33
32
|
_defineProperty(this, "state", {
|
|
34
33
|
open: false
|
|
35
34
|
});
|
|
@@ -24,9 +24,7 @@ window.onClick = (payload, event) => {
|
|
|
24
24
|
console.log('onClick payload', payload);
|
|
25
25
|
console.log('onClick event', event);
|
|
26
26
|
};
|
|
27
|
-
const onClick =
|
|
28
|
-
return window.onClick(...arguments);
|
|
29
|
-
};
|
|
27
|
+
const onClick = (...args) => window.onClick(...args);
|
|
30
28
|
const DropdownComponent = /*#__PURE__*/_react.default.createElement("span", null, "Dropdown component");
|
|
31
29
|
var _default = exports.default = {
|
|
32
30
|
title: 'Split Button',
|
|
@@ -6,31 +6,30 @@ import cx from 'classnames';
|
|
|
6
6
|
import PropTypes from 'prop-types';
|
|
7
7
|
import React, { useEffect, useRef } from 'react';
|
|
8
8
|
import styles from './button.styles.js';
|
|
9
|
-
export const Button =
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
} = _ref;
|
|
9
|
+
export const Button = ({
|
|
10
|
+
children,
|
|
11
|
+
className,
|
|
12
|
+
dataTest = 'dhis2-uicore-button',
|
|
13
|
+
destructive,
|
|
14
|
+
disabled,
|
|
15
|
+
icon,
|
|
16
|
+
initialFocus,
|
|
17
|
+
large,
|
|
18
|
+
name,
|
|
19
|
+
primary,
|
|
20
|
+
secondary,
|
|
21
|
+
small,
|
|
22
|
+
tabIndex,
|
|
23
|
+
toggled,
|
|
24
|
+
type = 'button',
|
|
25
|
+
value,
|
|
26
|
+
onBlur,
|
|
27
|
+
onClick,
|
|
28
|
+
onFocus,
|
|
29
|
+
onKeyDown,
|
|
30
|
+
loading,
|
|
31
|
+
...otherProps
|
|
32
|
+
}) => {
|
|
34
33
|
const ref = useRef();
|
|
35
34
|
useEffect(() => {
|
|
36
35
|
if (initialFocus && ref.current) {
|
|
@@ -15,13 +15,10 @@ const {
|
|
|
15
15
|
buttonVariantArgType,
|
|
16
16
|
sizeArgType
|
|
17
17
|
} = sharedPropTypes;
|
|
18
|
-
const logger =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
} = _ref;
|
|
23
|
-
return console.log(`${name}: ${value}`);
|
|
24
|
-
};
|
|
18
|
+
const logger = ({
|
|
19
|
+
name,
|
|
20
|
+
value
|
|
21
|
+
}) => console.log(`${name}: ${value}`);
|
|
25
22
|
export default {
|
|
26
23
|
title: 'Button',
|
|
27
24
|
component: Button,
|
|
@@ -4,28 +4,25 @@ import { spacers } from '@dhis2/ui-constants';
|
|
|
4
4
|
import cx from 'classnames';
|
|
5
5
|
import PropTypes from 'prop-types';
|
|
6
6
|
import React, { Children } from 'react';
|
|
7
|
-
const ButtonStrip =
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
7
|
+
const ButtonStrip = ({
|
|
8
|
+
className,
|
|
9
|
+
children,
|
|
10
|
+
middle,
|
|
11
|
+
end,
|
|
12
|
+
dataTest = 'dhis2-uicore-buttonstrip'
|
|
13
|
+
}) => /*#__PURE__*/React.createElement("div", {
|
|
14
|
+
"data-test": dataTest,
|
|
15
|
+
className: _JSXStyle.dynamic([["3148822533", [spacers.dp8]]]) + " " + (cx(className, {
|
|
16
|
+
start: !middle && !end,
|
|
11
17
|
middle,
|
|
12
|
-
end
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
end
|
|
21
|
-
}) || "")
|
|
22
|
-
}, Children.map(children, child => /*#__PURE__*/React.createElement("div", {
|
|
23
|
-
className: _JSXStyle.dynamic([["3148822533", [spacers.dp8]]]) + " " + "box"
|
|
24
|
-
}, child)), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
25
|
-
id: "3148822533",
|
|
26
|
-
dynamic: [spacers.dp8]
|
|
27
|
-
}, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.middle.__jsx-style-dynamic-selector{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", "div.end.__jsx-style-dynamic-selector{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}", `.box.__jsx-style-dynamic-selector{margin-inline-start:${spacers.dp8};}`, ".box.__jsx-style-dynamic-selector:first-child{margin-inline-start:0;}"]));
|
|
28
|
-
};
|
|
18
|
+
end
|
|
19
|
+
}) || "")
|
|
20
|
+
}, Children.map(children, child => /*#__PURE__*/React.createElement("div", {
|
|
21
|
+
className: _JSXStyle.dynamic([["3148822533", [spacers.dp8]]]) + " " + "box"
|
|
22
|
+
}, child)), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
23
|
+
id: "3148822533",
|
|
24
|
+
dynamic: [spacers.dp8]
|
|
25
|
+
}, ["div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", "div.middle.__jsx-style-dynamic-selector{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}", "div.end.__jsx-style-dynamic-selector{-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;}", `.box.__jsx-style-dynamic-selector{margin-inline-start:${spacers.dp8};}`, ".box.__jsx-style-dynamic-selector:first-child{margin-inline-start:0;}"]));
|
|
29
26
|
const alignmentPropType = mutuallyExclusive(['middle', 'end'], PropTypes.bool);
|
|
30
27
|
ButtonStrip.propTypes = {
|
|
31
28
|
children: PropTypes.node,
|
|
@@ -9,10 +9,9 @@ import { Popper } from '@dhis2-ui/popper';
|
|
|
9
9
|
import PropTypes from 'prop-types';
|
|
10
10
|
import React, { Component } from 'react';
|
|
11
11
|
import { Button } from '../button/index.js';
|
|
12
|
-
function ArrowDown(
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
} = _ref;
|
|
12
|
+
function ArrowDown({
|
|
13
|
+
className
|
|
14
|
+
}) {
|
|
16
15
|
return /*#__PURE__*/React.createElement("svg", {
|
|
17
16
|
xmlns: "http://www.w3.org/2000/svg",
|
|
18
17
|
viewBox: "0 0 12 12",
|
|
@@ -27,10 +26,9 @@ function ArrowDown(_ref) {
|
|
|
27
26
|
ArrowDown.propTypes = {
|
|
28
27
|
className: PropTypes.string
|
|
29
28
|
};
|
|
30
|
-
function ArrowUp(
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
} = _ref2;
|
|
29
|
+
function ArrowUp({
|
|
30
|
+
className
|
|
31
|
+
}) {
|
|
34
32
|
return /*#__PURE__*/React.createElement("svg", {
|
|
35
33
|
xmlns: "http://www.w3.org/2000/svg",
|
|
36
34
|
viewBox: "0 0 12 12",
|
|
@@ -47,8 +45,8 @@ ArrowUp.propTypes = {
|
|
|
47
45
|
className: PropTypes.string
|
|
48
46
|
};
|
|
49
47
|
class DropdownButton extends Component {
|
|
50
|
-
constructor() {
|
|
51
|
-
super(...
|
|
48
|
+
constructor(...args) {
|
|
49
|
+
super(...args);
|
|
52
50
|
_defineProperty(this, "state", {
|
|
53
51
|
open: false
|
|
54
52
|
});
|
|
@@ -62,11 +60,10 @@ class DropdownButton extends Component {
|
|
|
62
60
|
});
|
|
63
61
|
}
|
|
64
62
|
});
|
|
65
|
-
_defineProperty(this, "onClickHandler", (
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
} = _ref3;
|
|
63
|
+
_defineProperty(this, "onClickHandler", ({
|
|
64
|
+
name,
|
|
65
|
+
value
|
|
66
|
+
}, event) => {
|
|
70
67
|
const handleClick = open => {
|
|
71
68
|
if (this.props.onClick) {
|
|
72
69
|
this.props.onClick({
|
|
@@ -54,12 +54,9 @@ const Template = args => /*#__PURE__*/React.createElement(DropdownButton, args);
|
|
|
54
54
|
export const Default = Template.bind({});
|
|
55
55
|
export const WithClick = Template.bind({});
|
|
56
56
|
WithClick.args = {
|
|
57
|
-
onClick:
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
} = _ref;
|
|
61
|
-
return console.log('onClick: the dropdown is open: ', open);
|
|
62
|
-
}
|
|
57
|
+
onClick: ({
|
|
58
|
+
open
|
|
59
|
+
}) => console.log('onClick: the dropdown is open: ', open)
|
|
63
60
|
};
|
|
64
61
|
export const Primary = Template.bind({});
|
|
65
62
|
Primary.args = {
|
|
@@ -9,5 +9,10 @@
|
|
|
9
9
|
import i18n from '@dhis2/d2-i18n';
|
|
10
10
|
import enTranslations from './en/translations.json';
|
|
11
11
|
const namespace = 'default';
|
|
12
|
-
|
|
12
|
+
|
|
13
|
+
// Use 'deep' = true and 'overwrite' = false to add to, but not overwrite,
|
|
14
|
+
// custom translations from the datastore (added by the app adapter)
|
|
15
|
+
|
|
16
|
+
i18n.addResourceBundle('en', namespace, enTranslations, true, false);
|
|
17
|
+
i18n.addResourceBundle('en', namespace, enTranslations, true, false);
|
|
13
18
|
export default i18n;
|
|
@@ -17,9 +17,7 @@ window.onClick = (payload, event) => {
|
|
|
17
17
|
console.log('onClick payload', payload);
|
|
18
18
|
console.log('onClick event', event);
|
|
19
19
|
};
|
|
20
|
-
const onClick =
|
|
21
|
-
return window.onClick(...arguments);
|
|
22
|
-
};
|
|
20
|
+
const onClick = (...args) => window.onClick(...args);
|
|
23
21
|
const DropdownComponent = /*#__PURE__*/React.createElement("span", null, "Dropdown component");
|
|
24
22
|
export default {
|
|
25
23
|
title: 'Split Button',
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/button",
|
|
3
|
-
"version": "10.16.
|
|
3
|
+
"version": "10.16.4",
|
|
4
4
|
"description": "UI Button",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@dhis2/prop-types": "^3.1.2",
|
|
36
|
-
"@dhis2-ui/layer": "10.16.
|
|
37
|
-
"@dhis2-ui/loader": "10.16.
|
|
38
|
-
"@dhis2-ui/popper": "10.16.
|
|
39
|
-
"@dhis2/ui-constants": "10.16.
|
|
40
|
-
"@dhis2/ui-icons": "10.16.
|
|
36
|
+
"@dhis2-ui/layer": "10.16.4",
|
|
37
|
+
"@dhis2-ui/loader": "10.16.4",
|
|
38
|
+
"@dhis2-ui/popper": "10.16.4",
|
|
39
|
+
"@dhis2/ui-constants": "10.16.4",
|
|
40
|
+
"@dhis2/ui-icons": "10.16.4",
|
|
41
41
|
"classnames": "^2.3.1",
|
|
42
42
|
"prop-types": "^15.7.2"
|
|
43
43
|
},
|
package/src/locales/index.js
CHANGED
|
@@ -11,6 +11,11 @@ import i18n from '@dhis2/d2-i18n'
|
|
|
11
11
|
import enTranslations from './en/translations.json'
|
|
12
12
|
|
|
13
13
|
const namespace = 'default'
|
|
14
|
-
|
|
14
|
+
|
|
15
|
+
// Use 'deep' = true and 'overwrite' = false to add to, but not overwrite,
|
|
16
|
+
// custom translations from the datastore (added by the app adapter)
|
|
17
|
+
|
|
18
|
+
i18n.addResourceBundle('en', namespace, enTranslations, true, false)
|
|
19
|
+
i18n.addResourceBundle('en', namespace, enTranslations, true, false)
|
|
15
20
|
|
|
16
21
|
export default i18n
|