@dhis2-ui/modal 8.1.11 → 8.2.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/modal/close-button.js +13 -10
- package/build/cjs/modal/modal.js +18 -17
- package/build/cjs/modal/modal.stories.js +23 -47
- package/build/cjs/modal-actions/modal-actions.js +13 -10
- package/build/cjs/modal-content/modal-content.js +13 -10
- package/build/cjs/modal-title/modal-title.js +13 -10
- package/build/es/modal/close-button.js +13 -10
- package/build/es/modal/modal.js +18 -17
- package/build/es/modal/modal.stories.js +22 -46
- package/build/es/modal-actions/modal-actions.js +13 -10
- package/build/es/modal-content/modal-content.js +13 -10
- package/build/es/modal-title/modal-title.js +13 -10
- package/package.json +7 -7
|
@@ -21,16 +21,19 @@ const createClickHandler = onClick => event => {
|
|
|
21
21
|
onClick({}, event);
|
|
22
22
|
};
|
|
23
23
|
|
|
24
|
-
const CloseButton =
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
24
|
+
const CloseButton = _ref => {
|
|
25
|
+
let {
|
|
26
|
+
onClick
|
|
27
|
+
} = _ref;
|
|
28
|
+
return /*#__PURE__*/_react.default.createElement("button", {
|
|
29
|
+
"data-test": "dhis2-modal-close-button",
|
|
30
|
+
onClick: createClickHandler(onClick),
|
|
31
|
+
className: _style.default.dynamic([["3281559950", [_uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey200, _uiConstants.theme.focus, _uiConstants.colors.grey300]]])
|
|
32
|
+
}, /*#__PURE__*/_react.default.createElement(_uiIcons.IconCross16, null), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
33
|
+
id: "3281559950",
|
|
34
|
+
dynamic: [_uiConstants.colors.grey700, _uiConstants.colors.grey200, _uiConstants.colors.grey900, _uiConstants.colors.grey200, _uiConstants.theme.focus, _uiConstants.colors.grey300]
|
|
35
|
+
}, ["button.__jsx-style-dynamic-selector{background-color:transparent;color:".concat(_uiConstants.colors.grey700, ";border:none;outline:none;padding:4px 4px 0px;border-radius:3px;position:absolute;top:0px;right:0px;}"), "button.__jsx-style-dynamic-selector:hover{background-color:".concat(_uiConstants.colors.grey200, ";color:").concat(_uiConstants.colors.grey900, ";}"), "button.__jsx-style-dynamic-selector:focus{background-color:".concat(_uiConstants.colors.grey200, ";outline:3px solid ").concat(_uiConstants.theme.focus, ";}"), "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector:active{background-color:".concat(_uiConstants.colors.grey300, ";}")]));
|
|
36
|
+
};
|
|
34
37
|
|
|
35
38
|
exports.CloseButton = CloseButton;
|
|
36
39
|
CloseButton.propTypes = {
|
package/build/cjs/modal/modal.js
CHANGED
|
@@ -29,21 +29,22 @@ const resolveLayerStyles = hide => ({
|
|
|
29
29
|
styles: /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
30
30
|
id: "1884450060",
|
|
31
31
|
dynamic: [_uiConstants.spacers.dp64, hide ? 'none' : 'block']
|
|
32
|
-
}, [
|
|
32
|
+
}, ["div.__jsx-style-dynamic-selector{padding:".concat(_uiConstants.spacers.dp64, ";display:").concat(hide ? 'none' : 'block', ";}")]),
|
|
33
33
|
className: _style.default.dynamic([["1884450060", [_uiConstants.spacers.dp64, hide ? 'none' : 'block']]])
|
|
34
34
|
});
|
|
35
35
|
|
|
36
|
-
const Modal =
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
36
|
+
const Modal = _ref => {
|
|
37
|
+
let {
|
|
38
|
+
children,
|
|
39
|
+
className,
|
|
40
|
+
dataTest,
|
|
41
|
+
hide,
|
|
42
|
+
fluid,
|
|
43
|
+
large,
|
|
44
|
+
onClose,
|
|
45
|
+
position,
|
|
46
|
+
small
|
|
47
|
+
} = _ref;
|
|
47
48
|
const layerStyles = resolveLayerStyles(hide);
|
|
48
49
|
return /*#__PURE__*/_react.default.createElement(_layer.Layer, {
|
|
49
50
|
onClick: onClose,
|
|
@@ -55,7 +56,7 @@ const Modal = ({
|
|
|
55
56
|
role: "dialog",
|
|
56
57
|
"aria-modal": "true",
|
|
57
58
|
"data-test": dataTest,
|
|
58
|
-
className: _style.default.dynamic([["
|
|
59
|
+
className: _style.default.dynamic([["3655640549", [2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64]]]) + " " + ((0, _classnames.default)(className, {
|
|
59
60
|
small,
|
|
60
61
|
large,
|
|
61
62
|
fluid
|
|
@@ -63,11 +64,11 @@ const Modal = ({
|
|
|
63
64
|
}, /*#__PURE__*/_react.default.createElement(_card.Card, null, onClose && /*#__PURE__*/_react.default.createElement(_closeButton.CloseButton, {
|
|
64
65
|
onClick: onClose
|
|
65
66
|
}), /*#__PURE__*/_react.default.createElement("div", {
|
|
66
|
-
className: _style.default.dynamic([["
|
|
67
|
+
className: _style.default.dynamic([["3655640549", [2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64]]])
|
|
67
68
|
}, children))), layerStyles.styles), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
68
|
-
id: "
|
|
69
|
-
dynamic: [2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64]
|
|
70
|
-
}, [
|
|
69
|
+
id: "3655640549",
|
|
70
|
+
dynamic: [2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64, 2 * _uiConstants.spacersNum.dp64]
|
|
71
|
+
}, ["aside.__jsx-style-dynamic-selector{height:auto;width:600px;max-width:calc(100vw - ".concat(2 * _uiConstants.spacersNum.dp64, "px);max-height:calc(100vh - ").concat(2 * _uiConstants.spacersNum.dp64, "px);}"), "aside.small.__jsx-style-dynamic-selector{width:400px;}", "aside.large.__jsx-style-dynamic-selector{width:800px;}", "aside.fluid.__jsx-style-dynamic-selector{width:auto;}", "div.__jsx-style-dynamic-selector{padding:24px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;max-width:calc(100vw - ".concat(2 * _uiConstants.spacersNum.dp64, "px);max-height:calc(100vh - ").concat(2 * _uiConstants.spacersNum.dp64, "px);}")]));
|
|
71
72
|
};
|
|
72
73
|
|
|
73
74
|
exports.Modal = Modal;
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.default = exports.TopScrollable = exports.SmallTitleContentAction = exports.SmallLongTitle = exports.SmallDestructivePrimary = exports.SmallContentPrimary = exports.SmallClickableScreenCover = exports.ModalThatHidesWithStatefulComponens = exports.MiddleScrollable = exports.MediumTitleContentAction = exports.LargeWithSelectComponent = exports.LargeTitleContentPrimary = exports.LargeModalWithMoreNestedModals = exports.FluidTop = exports.FluidTitleContentPrimary = exports.FluidMiddle = exports.FluidBottom = exports.DefaultContent = exports.BottomScrollable = exports.AlignmentMiddle = exports.AlignmentBottom = void 0;
|
|
7
7
|
|
|
8
8
|
var _style = _interopRequireDefault(require("styled-jsx/style"));
|
|
9
9
|
|
|
@@ -31,36 +31,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
31
31
|
|
|
32
32
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
33
33
|
|
|
34
|
-
const description =
|
|
35
|
-
_**Note**: For performance reasons, only one representative example is shown here. For more (interactive) examples, see individual stories in the Canvas tab._
|
|
36
|
-
|
|
37
|
-
A modal focuses user attention on a single task or piece of information inside a container. A modal blocks the rest of the application until it is dismissed.
|
|
38
|
-
|
|
39
|
-
#### Usage
|
|
40
|
-
|
|
41
|
-
A modal should be used to focus user attention on a single task or piece of information. Modals take over the entire screen and should be used sparingly to avoid interrupting a user's flow too often.
|
|
42
|
-
|
|
43
|
-
Use a modal in the following cases:
|
|
44
|
-
|
|
45
|
-
- to collect short, focussed user input that is blocking progress
|
|
46
|
-
- to present critical information that a user needs to acknowledge before continuing
|
|
47
|
-
- to ask the user to confirm a destructive action that cannot be undone
|
|
48
|
-
|
|
49
|
-
Do not use a modal in the following cases:
|
|
50
|
-
|
|
51
|
-
- to display unrelated or non-critical information; use an alert bar or a notice box instead
|
|
52
|
-
- to display complex, workflows that span multiple screens; navigate to a new, full page in the app instead
|
|
53
|
-
|
|
54
|
-
#### Children
|
|
55
|
-
|
|
56
|
-
Modals should be used with children \`<ModalTitle>\` (optional), \`<ModalContent>\` (required), and \`<ModalActions>\` (recommended)
|
|
57
|
-
|
|
58
|
-
See more about modal usage, including alignment and sizing, at [Design System: Modals](https://github.com/dhis2/design-system/blob/master/molecules/modal.md#usage).
|
|
59
|
-
|
|
60
|
-
\`\`\`js
|
|
61
|
-
import { Modal } from '@dhis2/ui'
|
|
62
|
-
\`\`\`
|
|
63
|
-
`;
|
|
34
|
+
const description = "\n_**Note**: For performance reasons, only one representative example is shown here. For more (interactive) examples, see individual stories in the Canvas tab._\n\nA modal focuses user attention on a single task or piece of information inside a container. A modal blocks the rest of the application until it is dismissed.\n\n#### Usage\n\nA modal should be used to focus user attention on a single task or piece of information. Modals take over the entire screen and should be used sparingly to avoid interrupting a user's flow too often.\n\nUse a modal in the following cases:\n\n- to collect short, focussed user input that is blocking progress\n- to present critical information that a user needs to acknowledge before continuing\n- to ask the user to confirm a destructive action that cannot be undone\n\nDo not use a modal in the following cases:\n\n- to display unrelated or non-critical information; use an alert bar or a notice box instead\n- to display complex, workflows that span multiple screens; navigate to a new, full page in the app instead\n\n#### Children\n\nModals should be used with children `<ModalTitle>` (optional), `<ModalContent>` (required), and `<ModalActions>` (recommended)\n\nSee more about modal usage, including alignment and sizing, at [Design System: Modals](https://github.com/dhis2/design-system/blob/master/molecules/modal.md#usage).\n\n```js\nimport { Modal } from '@dhis2/ui'\n```\n";
|
|
64
35
|
|
|
65
36
|
const say = something => () => alert(something);
|
|
66
37
|
|
|
@@ -69,10 +40,12 @@ window.onClose = (payload, event) => {
|
|
|
69
40
|
console.log('onClose event', event);
|
|
70
41
|
};
|
|
71
42
|
|
|
72
|
-
const onClose = (
|
|
43
|
+
const onClose = function () {
|
|
44
|
+
return window.onClose(...arguments);
|
|
45
|
+
};
|
|
73
46
|
|
|
74
47
|
var _default = {
|
|
75
|
-
title: '
|
|
48
|
+
title: 'Modal',
|
|
76
49
|
component: _modal.Modal,
|
|
77
50
|
parameters: {
|
|
78
51
|
docs: {
|
|
@@ -525,20 +498,23 @@ const LargeModalWithMoreNestedModals = args => /*#__PURE__*/_react.default.creat
|
|
|
525
498
|
label: "ten"
|
|
526
499
|
})), /*#__PURE__*/_react.default.createElement(_tooltip.Tooltip, {
|
|
527
500
|
content: "Some extra info"
|
|
528
|
-
},
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
},
|
|
540
|
-
|
|
541
|
-
},
|
|
501
|
+
}, _ref => {
|
|
502
|
+
let {
|
|
503
|
+
ref,
|
|
504
|
+
onMouseOver,
|
|
505
|
+
onMouseOut
|
|
506
|
+
} = _ref;
|
|
507
|
+
return /*#__PURE__*/_react.default.createElement("span", {
|
|
508
|
+
ref: ref,
|
|
509
|
+
onMouseOver: onMouseOver,
|
|
510
|
+
onMouseOut: onMouseOut,
|
|
511
|
+
className: "jsx-2364308943"
|
|
512
|
+
}, /*#__PURE__*/_react.default.createElement("button", {
|
|
513
|
+
className: "jsx-2364308943"
|
|
514
|
+
}, "Tooltip on button"), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
515
|
+
id: "2364308943"
|
|
516
|
+
}, ["span.jsx-2364308943{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}"]));
|
|
517
|
+
}), /*#__PURE__*/_react.default.createElement(_menu.FlyoutMenu, null, /*#__PURE__*/_react.default.createElement(_menu.MenuSectionHeader, {
|
|
542
518
|
label: "Section with sub-menus"
|
|
543
519
|
}), /*#__PURE__*/_react.default.createElement(_menu.MenuItem, {
|
|
544
520
|
label: "Item 1"
|
|
@@ -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 ModalActions =
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
18
|
+
const ModalActions = _ref => {
|
|
19
|
+
let {
|
|
20
|
+
children,
|
|
21
|
+
dataTest
|
|
22
|
+
} = _ref;
|
|
23
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
24
|
+
"data-test": dataTest,
|
|
25
|
+
className: _style.default.dynamic([["2674552674", [_uiConstants.spacers.dp16]]])
|
|
26
|
+
}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
27
|
+
id: "2674552674",
|
|
28
|
+
dynamic: [_uiConstants.spacers.dp16]
|
|
29
|
+
}, ["div.__jsx-style-dynamic-selector{-webkit-order:3;-ms-flex-order:3;order:3;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;margin:".concat(_uiConstants.spacers.dp16, " 0 0;}")]));
|
|
30
|
+
};
|
|
28
31
|
|
|
29
32
|
exports.ModalActions = ModalActions;
|
|
30
33
|
ModalActions.defaultProps = {
|
|
@@ -13,16 +13,19 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
13
13
|
|
|
14
14
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
15
15
|
|
|
16
|
-
const ModalContent =
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
},
|
|
16
|
+
const ModalContent = _ref => {
|
|
17
|
+
let {
|
|
18
|
+
children,
|
|
19
|
+
className,
|
|
20
|
+
dataTest
|
|
21
|
+
} = _ref;
|
|
22
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
23
|
+
"data-test": dataTest,
|
|
24
|
+
className: "jsx-3719215021" + " " + (className || "")
|
|
25
|
+
}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
26
|
+
id: "3719215021"
|
|
27
|
+
}, ["div.jsx-3719215021{-webkit-order:2;-ms-flex-order:2;order:2;-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;overflow-y:auto;}"]));
|
|
28
|
+
};
|
|
26
29
|
|
|
27
30
|
exports.ModalContent = ModalContent;
|
|
28
31
|
ModalContent.defaultProps = {
|
|
@@ -17,16 +17,19 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
17
17
|
|
|
18
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
19
|
|
|
20
|
-
const ModalTitle =
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
20
|
+
const ModalTitle = _ref => {
|
|
21
|
+
let {
|
|
22
|
+
children,
|
|
23
|
+
dataTest
|
|
24
|
+
} = _ref;
|
|
25
|
+
return /*#__PURE__*/_react.default.createElement("h1", {
|
|
26
|
+
"data-test": dataTest,
|
|
27
|
+
className: _style.default.dynamic([["4169842822", [_uiConstants.colors.grey900, _uiConstants.spacers.dp12]]]) + " " + ((0, _classnames.default)('title') || "")
|
|
28
|
+
}, children, /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
29
|
+
id: "4169842822",
|
|
30
|
+
dynamic: [_uiConstants.colors.grey900, _uiConstants.spacers.dp12]
|
|
31
|
+
}, ["h1.__jsx-style-dynamic-selector{-webkit-order:1;-ms-flex-order:1;order:1;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;color:".concat(_uiConstants.colors.grey900, ";font-size:20px;font-weight:500;line-height:24px;margin:0 0 ").concat(_uiConstants.spacers.dp12, ";}")]));
|
|
32
|
+
};
|
|
30
33
|
|
|
31
34
|
exports.ModalTitle = ModalTitle;
|
|
32
35
|
ModalTitle.defaultProps = {
|
|
@@ -8,16 +8,19 @@ const createClickHandler = onClick => event => {
|
|
|
8
8
|
onClick({}, event);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
|
-
export const CloseButton =
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
11
|
+
export const CloseButton = _ref => {
|
|
12
|
+
let {
|
|
13
|
+
onClick
|
|
14
|
+
} = _ref;
|
|
15
|
+
return /*#__PURE__*/React.createElement("button", {
|
|
16
|
+
"data-test": "dhis2-modal-close-button",
|
|
17
|
+
onClick: createClickHandler(onClick),
|
|
18
|
+
className: _JSXStyle.dynamic([["3281559950", [colors.grey700, colors.grey200, colors.grey900, colors.grey200, theme.focus, colors.grey300]]])
|
|
19
|
+
}, /*#__PURE__*/React.createElement(IconCross16, null), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
20
|
+
id: "3281559950",
|
|
21
|
+
dynamic: [colors.grey700, colors.grey200, colors.grey900, colors.grey200, theme.focus, colors.grey300]
|
|
22
|
+
}, ["button.__jsx-style-dynamic-selector{background-color:transparent;color:".concat(colors.grey700, ";border:none;outline:none;padding:4px 4px 0px;border-radius:3px;position:absolute;top:0px;right:0px;}"), "button.__jsx-style-dynamic-selector:hover{background-color:".concat(colors.grey200, ";color:").concat(colors.grey900, ";}"), "button.__jsx-style-dynamic-selector:focus{background-color:".concat(colors.grey200, ";outline:3px solid ").concat(theme.focus, ";}"), "button.__jsx-style-dynamic-selector:focus.__jsx-style-dynamic-selector:not(:focus-visible){outline:none;}", "button.__jsx-style-dynamic-selector:active{background-color:".concat(colors.grey300, ";}")]));
|
|
23
|
+
};
|
|
21
24
|
CloseButton.propTypes = {
|
|
22
25
|
onClick: PropTypes.func
|
|
23
26
|
};
|
package/build/es/modal/modal.js
CHANGED
|
@@ -12,21 +12,22 @@ const resolveLayerStyles = hide => ({
|
|
|
12
12
|
styles: /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
13
13
|
id: "1884450060",
|
|
14
14
|
dynamic: [spacers.dp64, hide ? 'none' : 'block']
|
|
15
|
-
}, [
|
|
15
|
+
}, ["div.__jsx-style-dynamic-selector{padding:".concat(spacers.dp64, ";display:").concat(hide ? 'none' : 'block', ";}")]),
|
|
16
16
|
className: _JSXStyle.dynamic([["1884450060", [spacers.dp64, hide ? 'none' : 'block']]])
|
|
17
17
|
});
|
|
18
18
|
|
|
19
|
-
export const Modal =
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
19
|
+
export const Modal = _ref => {
|
|
20
|
+
let {
|
|
21
|
+
children,
|
|
22
|
+
className,
|
|
23
|
+
dataTest,
|
|
24
|
+
hide,
|
|
25
|
+
fluid,
|
|
26
|
+
large,
|
|
27
|
+
onClose,
|
|
28
|
+
position,
|
|
29
|
+
small
|
|
30
|
+
} = _ref;
|
|
30
31
|
const layerStyles = resolveLayerStyles(hide);
|
|
31
32
|
return /*#__PURE__*/React.createElement(Layer, {
|
|
32
33
|
onClick: onClose,
|
|
@@ -38,7 +39,7 @@ export const Modal = ({
|
|
|
38
39
|
role: "dialog",
|
|
39
40
|
"aria-modal": "true",
|
|
40
41
|
"data-test": dataTest,
|
|
41
|
-
className: _JSXStyle.dynamic([["
|
|
42
|
+
className: _JSXStyle.dynamic([["3655640549", [2 * spacersNum.dp64, 2 * spacersNum.dp64, 2 * spacersNum.dp64, 2 * spacersNum.dp64]]]) + " " + (cx(className, {
|
|
42
43
|
small,
|
|
43
44
|
large,
|
|
44
45
|
fluid
|
|
@@ -46,11 +47,11 @@ export const Modal = ({
|
|
|
46
47
|
}, /*#__PURE__*/React.createElement(Card, null, onClose && /*#__PURE__*/React.createElement(CloseButton, {
|
|
47
48
|
onClick: onClose
|
|
48
49
|
}), /*#__PURE__*/React.createElement("div", {
|
|
49
|
-
className: _JSXStyle.dynamic([["
|
|
50
|
+
className: _JSXStyle.dynamic([["3655640549", [2 * spacersNum.dp64, 2 * spacersNum.dp64, 2 * spacersNum.dp64, 2 * spacersNum.dp64]]])
|
|
50
51
|
}, children))), layerStyles.styles), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
51
|
-
id: "
|
|
52
|
-
dynamic: [2 * spacersNum.dp64, 2 * spacersNum.dp64]
|
|
53
|
-
}, [
|
|
52
|
+
id: "3655640549",
|
|
53
|
+
dynamic: [2 * spacersNum.dp64, 2 * spacersNum.dp64, 2 * spacersNum.dp64, 2 * spacersNum.dp64]
|
|
54
|
+
}, ["aside.__jsx-style-dynamic-selector{height:auto;width:600px;max-width:calc(100vw - ".concat(2 * spacersNum.dp64, "px);max-height:calc(100vh - ").concat(2 * spacersNum.dp64, "px);}"), "aside.small.__jsx-style-dynamic-selector{width:400px;}", "aside.large.__jsx-style-dynamic-selector{width:800px;}", "aside.fluid.__jsx-style-dynamic-selector{width:auto;}", "div.__jsx-style-dynamic-selector{padding:24px;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-flow:column;-ms-flex-flow:column;flex-flow:column;max-width:calc(100vw - ".concat(2 * spacersNum.dp64, "px);max-height:calc(100vh - ").concat(2 * spacersNum.dp64, "px);}")]));
|
|
54
55
|
};
|
|
55
56
|
Modal.defaultProps = {
|
|
56
57
|
dataTest: 'dhis2-uicore-modal',
|
|
@@ -8,36 +8,7 @@ import { sharedPropTypes } from '@dhis2/ui-constants';
|
|
|
8
8
|
import React, { useState } from 'react';
|
|
9
9
|
import { ModalActions, ModalContent, ModalTitle } from '../index.js';
|
|
10
10
|
import { Modal } from './modal.js';
|
|
11
|
-
const description =
|
|
12
|
-
_**Note**: For performance reasons, only one representative example is shown here. For more (interactive) examples, see individual stories in the Canvas tab._
|
|
13
|
-
|
|
14
|
-
A modal focuses user attention on a single task or piece of information inside a container. A modal blocks the rest of the application until it is dismissed.
|
|
15
|
-
|
|
16
|
-
#### Usage
|
|
17
|
-
|
|
18
|
-
A modal should be used to focus user attention on a single task or piece of information. Modals take over the entire screen and should be used sparingly to avoid interrupting a user's flow too often.
|
|
19
|
-
|
|
20
|
-
Use a modal in the following cases:
|
|
21
|
-
|
|
22
|
-
- to collect short, focussed user input that is blocking progress
|
|
23
|
-
- to present critical information that a user needs to acknowledge before continuing
|
|
24
|
-
- to ask the user to confirm a destructive action that cannot be undone
|
|
25
|
-
|
|
26
|
-
Do not use a modal in the following cases:
|
|
27
|
-
|
|
28
|
-
- to display unrelated or non-critical information; use an alert bar or a notice box instead
|
|
29
|
-
- to display complex, workflows that span multiple screens; navigate to a new, full page in the app instead
|
|
30
|
-
|
|
31
|
-
#### Children
|
|
32
|
-
|
|
33
|
-
Modals should be used with children \`<ModalTitle>\` (optional), \`<ModalContent>\` (required), and \`<ModalActions>\` (recommended)
|
|
34
|
-
|
|
35
|
-
See more about modal usage, including alignment and sizing, at [Design System: Modals](https://github.com/dhis2/design-system/blob/master/molecules/modal.md#usage).
|
|
36
|
-
|
|
37
|
-
\`\`\`js
|
|
38
|
-
import { Modal } from '@dhis2/ui'
|
|
39
|
-
\`\`\`
|
|
40
|
-
`;
|
|
11
|
+
const description = "\n_**Note**: For performance reasons, only one representative example is shown here. For more (interactive) examples, see individual stories in the Canvas tab._\n\nA modal focuses user attention on a single task or piece of information inside a container. A modal blocks the rest of the application until it is dismissed.\n\n#### Usage\n\nA modal should be used to focus user attention on a single task or piece of information. Modals take over the entire screen and should be used sparingly to avoid interrupting a user's flow too often.\n\nUse a modal in the following cases:\n\n- to collect short, focussed user input that is blocking progress\n- to present critical information that a user needs to acknowledge before continuing\n- to ask the user to confirm a destructive action that cannot be undone\n\nDo not use a modal in the following cases:\n\n- to display unrelated or non-critical information; use an alert bar or a notice box instead\n- to display complex, workflows that span multiple screens; navigate to a new, full page in the app instead\n\n#### Children\n\nModals should be used with children `<ModalTitle>` (optional), `<ModalContent>` (required), and `<ModalActions>` (recommended)\n\nSee more about modal usage, including alignment and sizing, at [Design System: Modals](https://github.com/dhis2/design-system/blob/master/molecules/modal.md#usage).\n\n```js\nimport { Modal } from '@dhis2/ui'\n```\n";
|
|
41
12
|
|
|
42
13
|
const say = something => () => alert(something);
|
|
43
14
|
|
|
@@ -46,10 +17,12 @@ window.onClose = (payload, event) => {
|
|
|
46
17
|
console.log('onClose event', event);
|
|
47
18
|
};
|
|
48
19
|
|
|
49
|
-
const onClose = (
|
|
20
|
+
const onClose = function () {
|
|
21
|
+
return window.onClose(...arguments);
|
|
22
|
+
};
|
|
50
23
|
|
|
51
24
|
export default {
|
|
52
|
-
title: '
|
|
25
|
+
title: 'Modal',
|
|
53
26
|
component: Modal,
|
|
54
27
|
parameters: {
|
|
55
28
|
docs: {
|
|
@@ -455,20 +428,23 @@ export const LargeModalWithMoreNestedModals = args => /*#__PURE__*/React.createE
|
|
|
455
428
|
label: "ten"
|
|
456
429
|
})), /*#__PURE__*/React.createElement(Tooltip, {
|
|
457
430
|
content: "Some extra info"
|
|
458
|
-
},
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
},
|
|
470
|
-
|
|
471
|
-
},
|
|
431
|
+
}, _ref => {
|
|
432
|
+
let {
|
|
433
|
+
ref,
|
|
434
|
+
onMouseOver,
|
|
435
|
+
onMouseOut
|
|
436
|
+
} = _ref;
|
|
437
|
+
return /*#__PURE__*/React.createElement("span", {
|
|
438
|
+
ref: ref,
|
|
439
|
+
onMouseOver: onMouseOver,
|
|
440
|
+
onMouseOut: onMouseOut,
|
|
441
|
+
className: "jsx-2364308943"
|
|
442
|
+
}, /*#__PURE__*/React.createElement("button", {
|
|
443
|
+
className: "jsx-2364308943"
|
|
444
|
+
}, "Tooltip on button"), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
445
|
+
id: "2364308943"
|
|
446
|
+
}, ["span.jsx-2364308943{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;}"]));
|
|
447
|
+
}), /*#__PURE__*/React.createElement(FlyoutMenu, null, /*#__PURE__*/React.createElement(MenuSectionHeader, {
|
|
472
448
|
label: "Section with sub-menus"
|
|
473
449
|
}), /*#__PURE__*/React.createElement(MenuItem, {
|
|
474
450
|
label: "Item 1"
|
|
@@ -2,16 +2,19 @@ import _JSXStyle from "styled-jsx/style";
|
|
|
2
2
|
import { spacers } from '@dhis2/ui-constants';
|
|
3
3
|
import PropTypes from 'prop-types';
|
|
4
4
|
import React from 'react';
|
|
5
|
-
export const ModalActions =
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
5
|
+
export const ModalActions = _ref => {
|
|
6
|
+
let {
|
|
7
|
+
children,
|
|
8
|
+
dataTest
|
|
9
|
+
} = _ref;
|
|
10
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
11
|
+
"data-test": dataTest,
|
|
12
|
+
className: _JSXStyle.dynamic([["2674552674", [spacers.dp16]]])
|
|
13
|
+
}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
14
|
+
id: "2674552674",
|
|
15
|
+
dynamic: [spacers.dp16]
|
|
16
|
+
}, ["div.__jsx-style-dynamic-selector{-webkit-order:3;-ms-flex-order:3;order:3;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;margin:".concat(spacers.dp16, " 0 0;}")]));
|
|
17
|
+
};
|
|
15
18
|
ModalActions.defaultProps = {
|
|
16
19
|
dataTest: 'dhis2-uicore-modalactions'
|
|
17
20
|
};
|
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
import _JSXStyle from "styled-jsx/style";
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import React from 'react';
|
|
4
|
-
export const ModalContent =
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
},
|
|
4
|
+
export const ModalContent = _ref => {
|
|
5
|
+
let {
|
|
6
|
+
children,
|
|
7
|
+
className,
|
|
8
|
+
dataTest
|
|
9
|
+
} = _ref;
|
|
10
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
11
|
+
"data-test": dataTest,
|
|
12
|
+
className: "jsx-3719215021" + " " + (className || "")
|
|
13
|
+
}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
14
|
+
id: "3719215021"
|
|
15
|
+
}, ["div.jsx-3719215021{-webkit-order:2;-ms-flex-order:2;order:2;-webkit-box-flex:2;-webkit-flex-grow:2;-ms-flex-positive:2;flex-grow:2;overflow-y:auto;}"]));
|
|
16
|
+
};
|
|
14
17
|
ModalContent.defaultProps = {
|
|
15
18
|
dataTest: 'dhis2-uicore-modalcontent'
|
|
16
19
|
};
|
|
@@ -3,16 +3,19 @@ import { colors, spacers } from '@dhis2/ui-constants';
|
|
|
3
3
|
import cx from 'classnames';
|
|
4
4
|
import PropTypes from 'prop-types';
|
|
5
5
|
import React from 'react';
|
|
6
|
-
export const ModalTitle =
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
6
|
+
export const ModalTitle = _ref => {
|
|
7
|
+
let {
|
|
8
|
+
children,
|
|
9
|
+
dataTest
|
|
10
|
+
} = _ref;
|
|
11
|
+
return /*#__PURE__*/React.createElement("h1", {
|
|
12
|
+
"data-test": dataTest,
|
|
13
|
+
className: _JSXStyle.dynamic([["4169842822", [colors.grey900, spacers.dp12]]]) + " " + (cx('title') || "")
|
|
14
|
+
}, children, /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
15
|
+
id: "4169842822",
|
|
16
|
+
dynamic: [colors.grey900, spacers.dp12]
|
|
17
|
+
}, ["h1.__jsx-style-dynamic-selector{-webkit-order:1;-ms-flex-order:1;order:1;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start;color:".concat(colors.grey900, ";font-size:20px;font-weight:500;line-height:24px;margin:0 0 ").concat(spacers.dp12, ";}")]));
|
|
18
|
+
};
|
|
16
19
|
ModalTitle.defaultProps = {
|
|
17
20
|
dataTest: 'dhis2-uicore-modaltitle'
|
|
18
21
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/modal",
|
|
3
|
-
"version": "8.
|
|
3
|
+
"version": "8.2.2",
|
|
4
4
|
"description": "UI Modal",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -32,12 +32,12 @@
|
|
|
32
32
|
},
|
|
33
33
|
"dependencies": {
|
|
34
34
|
"@dhis2/prop-types": "^3.0.0-beta.1",
|
|
35
|
-
"@dhis2-ui/card": "8.
|
|
36
|
-
"@dhis2-ui/center": "8.
|
|
37
|
-
"@dhis2-ui/layer": "8.
|
|
38
|
-
"@dhis2-ui/portal": "8.
|
|
39
|
-
"@dhis2/ui-constants": "8.
|
|
40
|
-
"@dhis2/ui-icons": "8.
|
|
35
|
+
"@dhis2-ui/card": "8.2.2",
|
|
36
|
+
"@dhis2-ui/center": "8.2.2",
|
|
37
|
+
"@dhis2-ui/layer": "8.2.2",
|
|
38
|
+
"@dhis2-ui/portal": "8.2.2",
|
|
39
|
+
"@dhis2/ui-constants": "8.2.2",
|
|
40
|
+
"@dhis2/ui-icons": "8.2.2",
|
|
41
41
|
"classnames": "^2.3.1",
|
|
42
42
|
"prop-types": "^15.7.2"
|
|
43
43
|
},
|