@dhis2-ui/button 9.10.3 → 9.11.1-beta.1
Sign up to get free protection for your applications and to get access to all the features.
- package/build/cjs/button/__tests__/Button.test.js +1 -8
- package/build/cjs/button/button.e2e.stories.js +34 -0
- package/build/cjs/button/button.js +8 -47
- package/build/cjs/button/{button.stories.js → button.prod.stories.js} +36 -59
- package/build/cjs/button/button.styles.js +2 -5
- package/build/cjs/button/features/can_be_blurred/index.js +1 -2
- package/build/cjs/button/features/can_be_clicked/index.js +1 -2
- package/build/cjs/button/features/can_be_focused/index.js +1 -2
- package/build/cjs/button/index.js +0 -1
- package/build/cjs/button-strip/button-strip.e2e.stories.js +15 -0
- package/build/cjs/button-strip/button-strip.js +4 -17
- package/build/cjs/button-strip/{button-strip.stories.js → button-strip.prod.stories.js} +13 -21
- package/build/cjs/button-strip/features/accepts_children/index.js +0 -1
- package/build/cjs/button-strip/index.js +0 -1
- package/build/cjs/dropdown-button/__tests__/dropdown-button.test.js +1 -23
- package/build/cjs/dropdown-button/dropdown-button.e2e.stories.js +60 -0
- package/build/cjs/dropdown-button/dropdown-button.js +11 -48
- package/build/cjs/dropdown-button/{dropdown-button.stories.js → dropdown-button.prod.stories.js} +36 -60
- package/build/cjs/dropdown-button/features/accepts_children/index.js +0 -1
- package/build/cjs/dropdown-button/features/accepts_component/index.js +0 -1
- package/build/cjs/dropdown-button/features/accepts_icon/index.js +0 -1
- package/build/cjs/dropdown-button/features/accepts_initial_focus/index.js +1 -2
- package/build/cjs/dropdown-button/features/button_is_clickable/index.js +1 -2
- package/build/cjs/dropdown-button/features/can_be_disabled/index.js +1 -2
- package/build/cjs/dropdown-button/features/common/index.js +0 -1
- package/build/cjs/dropdown-button/features/opens_a_dropdown/index.js +0 -1
- package/build/cjs/dropdown-button/index.js +0 -1
- package/build/cjs/index.js +0 -4
- package/build/cjs/locales/index.js +3 -9
- package/build/cjs/split-button/features/accepts_children/index.js +0 -1
- package/build/cjs/split-button/features/accepts_icon/index.js +0 -1
- package/build/cjs/split-button/features/accepts_initial_focus/index.js +1 -2
- package/build/cjs/split-button/features/arrow_opens_menu/index.js +0 -1
- package/build/cjs/split-button/features/button_is_clickable/index.js +1 -2
- package/build/cjs/split-button/features/can_be_disabled/index.js +0 -1
- package/build/cjs/split-button/features/common/index.js +0 -1
- package/build/cjs/split-button/index.js +0 -1
- package/build/cjs/split-button/split-button.e2e.stories.js +53 -0
- package/build/cjs/split-button/split-button.js +13 -48
- package/build/cjs/split-button/{split-button.stories.js → split-button.prod.stories.js} +30 -42
- package/build/cjs/split-button/split-button.test.js +5 -22
- package/build/es/button/{button.stories.e2e.js → button.e2e.stories.js} +9 -5
- package/build/es/button/button.js +5 -33
- package/build/es/button/{button.stories.js → button.prod.stories.js} +23 -16
- package/build/es/button/button.styles.js +1 -1
- package/build/es/button/features/can_be_blurred/index.js +1 -1
- package/build/es/button/features/can_be_clicked/index.js +1 -1
- package/build/es/button/features/can_be_focused/index.js +1 -1
- package/build/es/button-strip/button-strip.e2e.stories.js +7 -0
- package/build/es/button-strip/button-strip.js +1 -5
- package/build/es/button-strip/{button-strip.stories.js → button-strip.prod.stories.js} +10 -4
- package/build/es/dropdown-button/{dropdown-button.stories.e2e.js → dropdown-button.e2e.stories.js} +17 -9
- package/build/es/dropdown-button/dropdown-button.js +8 -35
- package/build/es/dropdown-button/{dropdown-button.stories.js → dropdown-button.prod.stories.js} +21 -20
- package/build/es/dropdown-button/features/accepts_initial_focus/index.js +1 -1
- package/build/es/dropdown-button/features/button_is_clickable/index.js +1 -1
- package/build/es/dropdown-button/features/can_be_disabled/index.js +1 -1
- package/build/es/split-button/features/accepts_initial_focus/index.js +1 -1
- package/build/es/split-button/features/button_is_clickable/index.js +1 -1
- package/build/es/split-button/{split-button.stories.e2e.js → split-button.e2e.stories.js} +15 -8
- package/build/es/split-button/split-button.js +10 -32
- package/build/es/split-button/{split-button.stories.js → split-button.prod.stories.js} +19 -13
- package/build/es/split-button/split-button.test.js +4 -2
- package/package.json +9 -9
- package/build/cjs/button/button.stories.e2e.js +0 -27
- package/build/cjs/button-strip/button-strip.stories.e2e.js +0 -13
- package/build/cjs/dropdown-button/dropdown-button.stories.e2e.js +0 -45
- package/build/cjs/split-button/split-button.stories.e2e.js +0 -40
- package/build/es/button-strip/button-strip.stories.e2e.js +0 -5
@@ -4,25 +4,15 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.ButtonStrip = 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
|
-
function
|
21
|
-
|
22
|
-
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; }
|
23
|
-
|
24
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
25
|
-
|
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 }; }
|
26
16
|
const ButtonStrip = _ref => {
|
27
17
|
let {
|
28
18
|
className,
|
@@ -43,9 +33,8 @@ const ButtonStrip = _ref => {
|
|
43
33
|
}, child)), /*#__PURE__*/_react.default.createElement(_style.default, {
|
44
34
|
id: "3148822533",
|
45
35
|
dynamic: [_uiConstants.spacers.dp8]
|
46
|
-
}, ["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;}",
|
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;}"]));
|
47
37
|
};
|
48
|
-
|
49
38
|
exports.ButtonStrip = ButtonStrip;
|
50
39
|
const alignmentPropType = (0, _propTypes.mutuallyExclusive)(['middle', 'end'], _propTypes2.default.bool);
|
51
40
|
ButtonStrip.defaultProps = {
|
@@ -55,10 +44,8 @@ ButtonStrip.propTypes = {
|
|
55
44
|
children: _propTypes2.default.node,
|
56
45
|
className: _propTypes2.default.string,
|
57
46
|
dataTest: _propTypes2.default.string,
|
58
|
-
|
59
47
|
/** Horizontal alignment for buttons. Mutually exclusive with `middle` prop */
|
60
48
|
end: alignmentPropType,
|
61
|
-
|
62
49
|
/** Horizontal alignment. Mutually exclusive with `end` prop */
|
63
50
|
middle: alignmentPropType
|
64
51
|
};
|
@@ -4,17 +4,17 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.default = exports.DefaultRTL = exports.DefaultAlignedRight = exports.DefaultAlignedMiddle = exports.Default = void 0;
|
7
|
-
|
8
7
|
var _react = _interopRequireDefault(require("react"));
|
9
|
-
|
10
8
|
var _index = require("../index.js");
|
11
|
-
|
12
9
|
var _index2 = require("./index.js");
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
10
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
11
|
+
const description = `
|
12
|
+
A wrapper for buttons to add spacing and alignment.
|
13
|
+
|
14
|
+
\`\`\`js
|
15
|
+
import { ButtonStrip } from '@dhis2/ui'
|
16
|
+
\`\`\`
|
17
|
+
`;
|
18
18
|
const Wrapper = fn => /*#__PURE__*/_react.default.createElement("div", {
|
19
19
|
style: {
|
20
20
|
width: '100%',
|
@@ -22,7 +22,6 @@ const Wrapper = fn => /*#__PURE__*/_react.default.createElement("div", {
|
|
22
22
|
padding: 8
|
23
23
|
}
|
24
24
|
}, fn());
|
25
|
-
|
26
25
|
const alignmentArgType = {
|
27
26
|
table: {
|
28
27
|
type: {
|
@@ -34,7 +33,7 @@ const alignmentArgType = {
|
|
34
33
|
type: 'boolean'
|
35
34
|
}
|
36
35
|
};
|
37
|
-
var _default = {
|
36
|
+
var _default = exports.default = {
|
38
37
|
title: 'Button Strip',
|
39
38
|
component: _index2.ButtonStrip,
|
40
39
|
decorators: [Wrapper],
|
@@ -46,37 +45,30 @@ var _default = {
|
|
46
45
|
}
|
47
46
|
},
|
48
47
|
argTypes: {
|
49
|
-
middle: {
|
48
|
+
middle: {
|
49
|
+
...alignmentArgType
|
50
50
|
},
|
51
|
-
end: {
|
51
|
+
end: {
|
52
|
+
...alignmentArgType
|
52
53
|
}
|
53
54
|
}
|
54
55
|
};
|
55
|
-
exports.default = _default;
|
56
|
-
|
57
56
|
const Default = args => /*#__PURE__*/_react.default.createElement(_index2.ButtonStrip, args, /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"), /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"), /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"), /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"), /*#__PURE__*/_react.default.createElement(_index.SplitButton, null, "Label?"));
|
58
|
-
|
59
57
|
exports.Default = Default;
|
60
|
-
|
61
58
|
const DefaultAlignedMiddle = args => /*#__PURE__*/_react.default.createElement(_index2.ButtonStrip, args, /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"), /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"), /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"), /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"));
|
62
|
-
|
63
59
|
exports.DefaultAlignedMiddle = DefaultAlignedMiddle;
|
64
60
|
DefaultAlignedMiddle.args = {
|
65
61
|
middle: true
|
66
62
|
};
|
67
63
|
DefaultAlignedMiddle.storyName = 'Default - aligned middle';
|
68
|
-
|
69
64
|
const DefaultAlignedRight = args => /*#__PURE__*/_react.default.createElement(_index2.ButtonStrip, args, /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"), /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"), /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"), /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"));
|
70
|
-
|
71
65
|
exports.DefaultAlignedRight = DefaultAlignedRight;
|
72
66
|
DefaultAlignedRight.args = {
|
73
67
|
end: true
|
74
68
|
};
|
75
69
|
DefaultAlignedRight.storyName = 'Default - aligned right';
|
76
|
-
|
77
70
|
const DefaultRTL = args => /*#__PURE__*/_react.default.createElement("div", {
|
78
71
|
dir: "rtl"
|
79
72
|
}, /*#__PURE__*/_react.default.createElement(_index2.ButtonStrip, args, /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"), /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"), /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save"), /*#__PURE__*/_react.default.createElement(_index.Button, null, "Save")));
|
80
|
-
|
81
73
|
exports.DefaultRTL = DefaultRTL;
|
82
74
|
DefaultRTL.storyName = 'Default - RTL';
|
@@ -1,7 +1,6 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
var _cypressCucumberPreprocessor = require("@badeball/cypress-cucumber-preprocessor");
|
4
|
-
|
5
4
|
(0, _cypressCucumberPreprocessor.Given)('a ButtonStrip with children is rendered', () => {
|
6
5
|
cy.visitStory('ButtonStrip', 'With children');
|
7
6
|
cy.get('[data-test="dhis2-uicore-buttonstrip"]').should('be.visible');
|
@@ -1,36 +1,24 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
3
|
var _layer = require("@dhis2-ui/layer");
|
4
|
-
|
5
4
|
var _popper = require("@dhis2-ui/popper");
|
6
|
-
|
7
5
|
var _react = require("@testing-library/react");
|
8
|
-
|
9
6
|
var _enzyme = require("enzyme");
|
10
|
-
|
11
7
|
var _react2 = _interopRequireDefault(require("react"));
|
12
|
-
|
13
8
|
var _testUtils = require("react-dom/test-utils");
|
14
|
-
|
15
9
|
var _modal = require("../../../../modal/src/modal/modal.js");
|
16
|
-
|
17
10
|
var _index = require("../../index.js");
|
18
|
-
|
19
11
|
var _dropdownButton = require("../dropdown-button.js");
|
20
|
-
|
21
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
22
|
-
|
12
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
23
13
|
describe('<DropdownButton>', () => {
|
24
14
|
describe('controlled mode', () => {
|
25
15
|
describe('open state', () => {
|
26
16
|
const onClick = jest.fn();
|
27
|
-
|
28
17
|
const Component = /*#__PURE__*/_react2.default.createElement(_dropdownButton.DropdownButton, {
|
29
18
|
onClick: onClick,
|
30
19
|
open: true,
|
31
20
|
component: /*#__PURE__*/_react2.default.createElement("span", null, "test")
|
32
21
|
});
|
33
|
-
|
34
22
|
it('shows the Popper when open is true', async () => {
|
35
23
|
// TODO: https://github.com/popperjs/react-popper/issues/350
|
36
24
|
const wrapper = (0, _enzyme.mount)(Component);
|
@@ -60,17 +48,13 @@ describe('<DropdownButton>', () => {
|
|
60
48
|
component: componentText
|
61
49
|
}));
|
62
50
|
const toggleButton = getByTestId('dhis2-uicore-dropdownbutton-toggle');
|
63
|
-
|
64
51
|
_react.fireEvent.click(toggleButton);
|
65
|
-
|
66
52
|
await (0, _react.waitFor)(() => {
|
67
53
|
expect(queryByText(componentText)).toBeInTheDocument();
|
68
54
|
});
|
69
|
-
|
70
55
|
_react.fireEvent.keyDown(document, {
|
71
56
|
key: 'Escape'
|
72
57
|
});
|
73
|
-
|
74
58
|
await (0, _react.waitFor)(() => {
|
75
59
|
expect(queryByText(componentText)).not.toBeInTheDocument();
|
76
60
|
});
|
@@ -78,11 +62,9 @@ describe('<DropdownButton>', () => {
|
|
78
62
|
test('modal remains open when dropdown button is closed on escape click', async () => {
|
79
63
|
const dropdownButtonText = 'Dropdown Content';
|
80
64
|
const headingText = 'Heading Text';
|
81
|
-
|
82
65
|
const modalContent = /*#__PURE__*/_react2.default.createElement("div", null, /*#__PURE__*/_react2.default.createElement("h1", null, headingText), /*#__PURE__*/_react2.default.createElement(_dropdownButton.DropdownButton, {
|
83
66
|
component: dropdownButtonText
|
84
67
|
}));
|
85
|
-
|
86
68
|
const {
|
87
69
|
getByTestId,
|
88
70
|
queryByText
|
@@ -91,17 +73,13 @@ describe('<DropdownButton>', () => {
|
|
91
73
|
onClose: () => {}
|
92
74
|
}, modalContent));
|
93
75
|
const toggleButton = getByTestId('dhis2-uicore-dropdownbutton-toggle');
|
94
|
-
|
95
76
|
_react.fireEvent.click(toggleButton);
|
96
|
-
|
97
77
|
await (0, _react.waitFor)(() => {
|
98
78
|
expect(queryByText(dropdownButtonText)).toBeInTheDocument();
|
99
79
|
});
|
100
|
-
|
101
80
|
_react.fireEvent.keyDown(document, {
|
102
81
|
key: 'Escape'
|
103
82
|
});
|
104
|
-
|
105
83
|
await (0, _react.waitFor)(() => {
|
106
84
|
expect(queryByText(dropdownButtonText)).not.toBeInTheDocument();
|
107
85
|
expect(queryByText(headingText)).toBeInTheDocument();
|
@@ -0,0 +1,60 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
4
|
+
value: true
|
5
|
+
});
|
6
|
+
exports.default = exports.WithOnClick = exports.WithInitialFocus = exports.WithIcon = exports.WithComponent = exports.WithChildren = exports.DisabledWithOnClick = exports.Default = 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
|
+
var _default = exports.default = {
|
12
|
+
title: 'DropdownButton'
|
13
|
+
};
|
14
|
+
const Default = () => /*#__PURE__*/_react.default.createElement(_index.DropdownButton, {
|
15
|
+
name: "Button",
|
16
|
+
value: "default",
|
17
|
+
component: /*#__PURE__*/_react.default.createElement("div", null, "Content")
|
18
|
+
}, "Button");
|
19
|
+
exports.Default = Default;
|
20
|
+
const WithOnClick = () => /*#__PURE__*/_react.default.createElement(_index.DropdownButton, {
|
21
|
+
name: "Button",
|
22
|
+
value: "default",
|
23
|
+
onClick: window.onClick,
|
24
|
+
component: /*#__PURE__*/_react.default.createElement("div", null, "Content")
|
25
|
+
}, "Button");
|
26
|
+
exports.WithOnClick = WithOnClick;
|
27
|
+
const WithChildren = () => /*#__PURE__*/_react.default.createElement(_index.DropdownButton, {
|
28
|
+
name: "Button",
|
29
|
+
value: "default",
|
30
|
+
component: /*#__PURE__*/_react.default.createElement("div", null, "Component")
|
31
|
+
}, "I am a child");
|
32
|
+
exports.WithChildren = WithChildren;
|
33
|
+
const WithComponent = () => /*#__PURE__*/_react.default.createElement(_index.DropdownButton, {
|
34
|
+
name: "Button",
|
35
|
+
value: "default",
|
36
|
+
component: /*#__PURE__*/_react.default.createElement("div", null, "I am a component")
|
37
|
+
});
|
38
|
+
exports.WithComponent = WithComponent;
|
39
|
+
const WithIcon = () => /*#__PURE__*/_react.default.createElement(_index.DropdownButton, {
|
40
|
+
name: "Button",
|
41
|
+
value: "default",
|
42
|
+
component: /*#__PURE__*/_react.default.createElement("div", null, "I am a component"),
|
43
|
+
icon: 'Icon'
|
44
|
+
});
|
45
|
+
exports.WithIcon = WithIcon;
|
46
|
+
const WithInitialFocus = () => /*#__PURE__*/_react.default.createElement(_index.DropdownButton, {
|
47
|
+
name: "Button",
|
48
|
+
value: "default",
|
49
|
+
component: /*#__PURE__*/_react.default.createElement("div", null, "Content"),
|
50
|
+
initialFocus: true
|
51
|
+
});
|
52
|
+
exports.WithInitialFocus = WithInitialFocus;
|
53
|
+
const DisabledWithOnClick = () => /*#__PURE__*/_react.default.createElement(_index.DropdownButton, {
|
54
|
+
name: "Button",
|
55
|
+
value: "default",
|
56
|
+
component: /*#__PURE__*/_react.default.createElement("div", null, "Content"),
|
57
|
+
onClick: window.onClick,
|
58
|
+
disabled: true
|
59
|
+
});
|
60
|
+
exports.DisabledWithOnClick = DisabledWithOnClick;
|
@@ -4,31 +4,20 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.DropdownButton = void 0;
|
7
|
-
|
8
7
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
9
|
-
|
10
|
-
var _layer = require("@dhis2-ui/layer");
|
11
|
-
|
12
|
-
var _popper = require("@dhis2-ui/popper");
|
13
|
-
|
14
8
|
var _propTypes = require("@dhis2/prop-types");
|
15
|
-
|
16
9
|
var _uiConstants = require("@dhis2/ui-constants");
|
17
|
-
|
10
|
+
var _layer = require("@dhis2-ui/layer");
|
11
|
+
var _popper = require("@dhis2-ui/popper");
|
18
12
|
var _propTypes2 = _interopRequireDefault(require("prop-types"));
|
19
|
-
|
20
13
|
var _react = _interopRequireWildcard(require("react"));
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
function
|
25
|
-
|
26
|
-
function
|
27
|
-
|
28
|
-
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
29
|
-
|
30
|
-
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; }
|
31
|
-
|
14
|
+
var _index = require("../button/index.js");
|
15
|
+
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); }
|
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; }
|
17
|
+
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
18
|
+
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
|
+
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
|
20
|
+
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); }
|
32
21
|
function ArrowDown(_ref) {
|
33
22
|
let {
|
34
23
|
className
|
@@ -44,11 +33,9 @@ function ArrowDown(_ref) {
|
|
44
33
|
id: "2347926856"
|
45
34
|
}, ["svg.jsx-2347926856{fill:inherit;height:12px;width:12px;vertical-align:middle;pointer-events:none;}"]));
|
46
35
|
}
|
47
|
-
|
48
36
|
ArrowDown.propTypes = {
|
49
37
|
className: _propTypes2.default.string
|
50
38
|
};
|
51
|
-
|
52
39
|
function ArrowUp(_ref2) {
|
53
40
|
let {
|
54
41
|
className
|
@@ -65,27 +52,22 @@ function ArrowUp(_ref2) {
|
|
65
52
|
id: "2347926856"
|
66
53
|
}, ["svg.jsx-2347926856{fill:inherit;height:12px;width:12px;vertical-align:middle;pointer-events:none;}"]));
|
67
54
|
}
|
68
|
-
|
69
55
|
ArrowUp.propTypes = {
|
70
56
|
className: _propTypes2.default.string
|
71
57
|
};
|
72
58
|
const arrow = {
|
73
59
|
styles: /*#__PURE__*/_react.default.createElement(_style.default, {
|
74
60
|
id: "1035250400"
|
75
|
-
}, [
|
61
|
+
}, [`.jsx-1035250400{margin-inline-start:${_uiConstants.spacers.dp12};}`]),
|
76
62
|
className: "jsx-1035250400"
|
77
63
|
};
|
78
|
-
|
79
64
|
class DropdownButton extends _react.Component {
|
80
65
|
constructor() {
|
81
66
|
super(...arguments);
|
82
|
-
|
83
67
|
_defineProperty(this, "state", {
|
84
68
|
open: false
|
85
69
|
});
|
86
|
-
|
87
70
|
_defineProperty(this, "anchorRef", /*#__PURE__*/_react.default.createRef());
|
88
|
-
|
89
71
|
_defineProperty(this, "handleKeyDown", event => {
|
90
72
|
if (event.key === 'Escape' && this.state.open) {
|
91
73
|
event.preventDefault();
|
@@ -95,13 +77,11 @@ class DropdownButton extends _react.Component {
|
|
95
77
|
});
|
96
78
|
}
|
97
79
|
});
|
98
|
-
|
99
80
|
_defineProperty(this, "onClickHandler", (_ref3, event) => {
|
100
81
|
let {
|
101
82
|
name,
|
102
83
|
value
|
103
84
|
} = _ref3;
|
104
|
-
|
105
85
|
const handleClick = open => {
|
106
86
|
if (this.props.onClick) {
|
107
87
|
this.props.onClick({
|
@@ -111,7 +91,6 @@ class DropdownButton extends _react.Component {
|
|
111
91
|
}, event);
|
112
92
|
}
|
113
93
|
};
|
114
|
-
|
115
94
|
if (typeof this.props.open === 'boolean') {
|
116
95
|
handleClick(!this.props.open);
|
117
96
|
} else {
|
@@ -123,15 +102,12 @@ class DropdownButton extends _react.Component {
|
|
123
102
|
}
|
124
103
|
});
|
125
104
|
}
|
126
|
-
|
127
105
|
componentDidMount() {
|
128
106
|
document.addEventListener('keydown', this.handleKeyDown);
|
129
107
|
}
|
130
|
-
|
131
108
|
componentWillUnmount() {
|
132
109
|
document.removeEventListener('keydown', this.handleKeyDown);
|
133
110
|
}
|
134
|
-
|
135
111
|
render() {
|
136
112
|
const {
|
137
113
|
component,
|
@@ -179,16 +155,14 @@ class DropdownButton extends _react.Component {
|
|
179
155
|
onBackdropClick: this.onClickHandler,
|
180
156
|
transparent: true
|
181
157
|
}, /*#__PURE__*/_react.default.createElement(_popper.Popper, {
|
182
|
-
dataTest:
|
158
|
+
dataTest: `${dataTest}-popper`,
|
183
159
|
placement: "bottom-start",
|
184
160
|
reference: this.anchorRef
|
185
161
|
}, component)), arrow.styles, /*#__PURE__*/_react.default.createElement(_style.default, {
|
186
162
|
id: "3163060161"
|
187
163
|
}, ["div.jsx-3163060161{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;position:relative;color:inherit;white-space:nowrap;}"]));
|
188
164
|
}
|
189
|
-
|
190
165
|
}
|
191
|
-
|
192
166
|
exports.DropdownButton = DropdownButton;
|
193
167
|
DropdownButton.defaultProps = {
|
194
168
|
dataTest: 'dhis2-uicore-dropdownbutton'
|
@@ -197,48 +171,37 @@ DropdownButton.propTypes = {
|
|
197
171
|
/** Children to render inside the buton */
|
198
172
|
children: _propTypes2.default.node,
|
199
173
|
className: _propTypes2.default.string,
|
200
|
-
|
201
174
|
/** Component to show/hide when button is clicked */
|
202
175
|
component: _propTypes2.default.element,
|
203
176
|
dataTest: _propTypes2.default.string,
|
204
|
-
|
205
177
|
/**
|
206
178
|
* Applies 'destructive' button appearance, implying a dangerous action.
|
207
179
|
*/
|
208
180
|
destructive: _propTypes2.default.bool,
|
209
|
-
|
210
181
|
/** Make the button non-interactive */
|
211
182
|
disabled: _propTypes2.default.bool,
|
212
183
|
icon: _propTypes2.default.element,
|
213
|
-
|
214
184
|
/** Grants button initial focus on the page */
|
215
185
|
initialFocus: _propTypes2.default.bool,
|
216
|
-
|
217
186
|
/** Button size. Mutually exclusive with `small` prop */
|
218
187
|
large: _uiConstants.sharedPropTypes.sizePropType,
|
219
188
|
name: _propTypes2.default.string,
|
220
|
-
|
221
189
|
/** Controls popper visibility. When implementing this prop the component becomes a controlled component */
|
222
190
|
open: _propTypes2.default.bool,
|
223
|
-
|
224
191
|
/**
|
225
192
|
* Applies 'primary' button appearance, implying the most important action.
|
226
193
|
*/
|
227
194
|
primary: _propTypes2.default.bool,
|
228
|
-
|
229
195
|
/**
|
230
196
|
* Applies 'secondary' button appearance.
|
231
197
|
*/
|
232
198
|
secondary: _propTypes2.default.bool,
|
233
|
-
|
234
199
|
/** Button size. Mutually exclusive with `large` prop */
|
235
200
|
small: _uiConstants.sharedPropTypes.sizePropType,
|
236
201
|
tabIndex: _propTypes2.default.string,
|
237
|
-
|
238
202
|
/** Type of button. Can take advantage of different default behavior */
|
239
203
|
type: _propTypes2.default.oneOf(['submit', 'reset', 'button']),
|
240
204
|
value: _propTypes2.default.string,
|
241
|
-
|
242
205
|
/**
|
243
206
|
* Callback triggered on click.
|
244
207
|
* Called with signature `({ name: string, value: string, open: bool }, event)`
|