@dhis2-ui/alert 10.13.0-alpha.1 → 10.13.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/cjs/alert-bar/alert-bar.js +5 -0
- package/build/cjs/alert-bar/alert-bar.styles.js +2 -2
- package/build/cjs/alert-bar/icon.js +4 -4
- package/build/cjs/alert-stack/alert-stack.prod.stories.js +38 -1
- package/build/es/alert-bar/alert-bar.js +5 -0
- package/build/es/alert-bar/alert-bar.styles.js +2 -2
- package/build/es/alert-bar/icon.js +4 -4
- package/build/es/alert-stack/alert-stack.prod.stories.js +37 -1
- package/package.json +4 -4
|
@@ -34,6 +34,7 @@ const AlertBar = _ref => {
|
|
|
34
34
|
} = _ref;
|
|
35
35
|
const [inViewport, setInViewport] = (0, _react.useState)(!hidden);
|
|
36
36
|
const [inDOM, setInDOM] = (0, _react.useState)(!hidden);
|
|
37
|
+
const alertRef = (0, _react.useRef)(null);
|
|
37
38
|
const showTimeout = (0, _react.useRef)(null);
|
|
38
39
|
const displayTimeout = (0, _react.useRef)(null);
|
|
39
40
|
const hideTimeout = (0, _react.useRef)(null);
|
|
@@ -61,6 +62,9 @@ const AlertBar = _ref => {
|
|
|
61
62
|
};
|
|
62
63
|
const runHideAnimation = () => {
|
|
63
64
|
clearAllTimeouts();
|
|
65
|
+
if (alertRef.current) {
|
|
66
|
+
alertRef.current.style.setProperty('--alert-bar-collapse', `-${alertRef.current.offsetHeight}px`);
|
|
67
|
+
}
|
|
64
68
|
hide();
|
|
65
69
|
hideTimeout.current = setTimeout(remove, _alertBarStyles.ANIMATION_TIME);
|
|
66
70
|
};
|
|
@@ -102,6 +106,7 @@ const AlertBar = _ref => {
|
|
|
102
106
|
return clearAllTimeouts;
|
|
103
107
|
}, [hidden]);
|
|
104
108
|
return !inDOM ? null : /*#__PURE__*/_react.default.createElement("div", {
|
|
109
|
+
ref: alertRef,
|
|
105
110
|
"data-test": dataTest,
|
|
106
111
|
onMouseEnter: pauseDisplayTimeout,
|
|
107
112
|
onMouseLeave: resumeDisplayTimeout,
|
|
@@ -6,6 +6,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = exports.ANIMATION_TIME = void 0;
|
|
7
7
|
var _uiConstants = require("@dhis2/ui-constants");
|
|
8
8
|
const ANIMATION_TIME = exports.ANIMATION_TIME = 350;
|
|
9
|
-
const _defaultExport = [`div.jsx-
|
|
10
|
-
_defaultExport.__hash = "
|
|
9
|
+
const _defaultExport = [`div.jsx-333097294{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px;box-shadow:${_uiConstants.elevations.e300};padding-top:${_uiConstants.spacers.dp8};padding-inline-end:${_uiConstants.spacers.dp8};padding-bottom:${_uiConstants.spacers.dp8};padding-inline-start:${_uiConstants.spacers.dp16};margin-bottom:${_uiConstants.spacers.dp16};max-width:600px;min-width:300px;font-size:14px;pointer-events:all;}`, `div.info.jsx-333097294{background-color:${_uiConstants.colors.grey900};color:${_uiConstants.colors.white};}`, `div.success.jsx-333097294{background-color:${_uiConstants.colors.green800};color:${_uiConstants.colors.white};}`, `div.warning.jsx-333097294{background-color:${_uiConstants.colors.yellow300};color:${_uiConstants.colors.yellow900};}`, `div.critical.jsx-333097294{background-color:${_uiConstants.colors.red800};color:${_uiConstants.colors.white};}`, `@-webkit-keyframes slidein-jsx-333097294{from{-webkit-transform:translateY(${_uiConstants.spacers.dp24});-ms-transform:translateY(${_uiConstants.spacers.dp24});transform:translateY(${_uiConstants.spacers.dp24});opacity:0;}to{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}}`, `@keyframes slidein-jsx-333097294{from{-webkit-transform:translateY(${_uiConstants.spacers.dp24});-ms-transform:translateY(${_uiConstants.spacers.dp24});transform:translateY(${_uiConstants.spacers.dp24});opacity:0;}to{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}}`, `@-webkit-keyframes slideout-jsx-333097294{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;margin-bottom:${_uiConstants.spacers.dp16};}45%{opacity:0;}100%{-webkit-transform:translateY(${_uiConstants.spacers.dp8});-ms-transform:translateY(${_uiConstants.spacers.dp8});transform:translateY(${_uiConstants.spacers.dp8});opacity:0;margin-bottom:var(--alert-bar-collapse,${_uiConstants.spacers.dp16});}}`, `@keyframes slideout-jsx-333097294{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;margin-bottom:${_uiConstants.spacers.dp16};}45%{opacity:0;}100%{-webkit-transform:translateY(${_uiConstants.spacers.dp8});-ms-transform:translateY(${_uiConstants.spacers.dp8});transform:translateY(${_uiConstants.spacers.dp8});opacity:0;margin-bottom:var(--alert-bar-collapse,${_uiConstants.spacers.dp16});}}`, `div.inViewport.jsx-333097294{-webkit-animation-duration:${ANIMATION_TIME}ms;animation-duration:${ANIMATION_TIME}ms;-webkit-animation-name:slidein-jsx-333097294;animation-name:slidein-jsx-333097294;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:cubic-bezier(0.2,0.8,0.2,1);animation-timing-function:cubic-bezier(0.2,0.8,0.2,1);}`, `div.jsx-333097294{-webkit-animation-duration:${ANIMATION_TIME}ms;animation-duration:${ANIMATION_TIME}ms;-webkit-animation-name:slideout-jsx-333097294;animation-name:slideout-jsx-333097294;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:cubic-bezier(0.4,0,1,1);animation-timing-function:cubic-bezier(0.4,0,1,1);}`, "@media (prefers-reduced-motion:reduce){div.jsx-333097294,div.inViewport.jsx-333097294{-webkit-animation-duration:0ms;animation-duration:0ms;}}"];
|
|
10
|
+
_defaultExport.__hash = "333097294";
|
|
11
11
|
var _default = exports.default = _defaultExport;
|
|
@@ -62,16 +62,16 @@ const Icon = _ref2 => {
|
|
|
62
62
|
}
|
|
63
63
|
return /*#__PURE__*/_react.default.createElement("div", {
|
|
64
64
|
"data-test": dataTest,
|
|
65
|
-
className: _style.default.dynamic([["
|
|
65
|
+
className: _style.default.dynamic([["4176481777", [_uiConstants.spacers.dp12]]])
|
|
66
66
|
}, /*#__PURE__*/_react.default.isValidElement(icon) ? icon : /*#__PURE__*/_react.default.createElement(StatusIcon, {
|
|
67
67
|
valid: success,
|
|
68
68
|
error: critical,
|
|
69
69
|
warning: warning,
|
|
70
70
|
info: info
|
|
71
71
|
}), /*#__PURE__*/_react.default.createElement(_style.default, {
|
|
72
|
-
id: "
|
|
73
|
-
dynamic: [_uiConstants.spacers.
|
|
74
|
-
}, [`div.__jsx-style-dynamic-selector{margin-inline-end:${_uiConstants.spacers.
|
|
72
|
+
id: "4176481777",
|
|
73
|
+
dynamic: [_uiConstants.spacers.dp12]
|
|
74
|
+
}, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-inline-end:${_uiConstants.spacers.dp12};}`]));
|
|
75
75
|
};
|
|
76
76
|
exports.Icon = Icon;
|
|
77
77
|
const iconPropType = exports.iconPropType = _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.element]);
|
|
@@ -3,12 +3,13 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.default = exports.RTL = exports.Default = void 0;
|
|
6
|
+
exports.default = exports.RTL = exports.Interactive = exports.Default = void 0;
|
|
7
7
|
var _react = _interopRequireWildcard(require("react"));
|
|
8
8
|
var _index = require("../alert-bar/index.js");
|
|
9
9
|
var _alertStack = require("./alert-stack.js");
|
|
10
10
|
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); }
|
|
11
11
|
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; }
|
|
12
|
+
const VARIANTS = ['info', 'success', 'warning', 'critical'];
|
|
12
13
|
const description = `
|
|
13
14
|
A container for Alert Bars.
|
|
14
15
|
|
|
@@ -45,6 +46,42 @@ const Default = args => /*#__PURE__*/_react.default.createElement(_alertStack.Al
|
|
|
45
46
|
success: true
|
|
46
47
|
}, "Fourth notification - I am at the top"));
|
|
47
48
|
exports.Default = Default;
|
|
49
|
+
const Interactive = args => {
|
|
50
|
+
const [alerts, setAlerts] = (0, _react.useState)([]);
|
|
51
|
+
const nextId = (0, _react.useRef)(0);
|
|
52
|
+
const addAlert = () => {
|
|
53
|
+
const id = nextId.current++;
|
|
54
|
+
const variant = VARIANTS[id % VARIANTS.length];
|
|
55
|
+
setAlerts(current => [...current, {
|
|
56
|
+
id,
|
|
57
|
+
variant,
|
|
58
|
+
message: `Alert #${id} (${variant})`
|
|
59
|
+
}]);
|
|
60
|
+
};
|
|
61
|
+
const removeAlert = id => {
|
|
62
|
+
setAlerts(current => current.filter(a => a.id !== id));
|
|
63
|
+
};
|
|
64
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
|
|
65
|
+
onClick: addAlert,
|
|
66
|
+
style: {
|
|
67
|
+
padding: '8px 16px',
|
|
68
|
+
fontSize: '14px',
|
|
69
|
+
cursor: 'pointer'
|
|
70
|
+
}
|
|
71
|
+
}, "Add alert"), /*#__PURE__*/_react.default.createElement(_alertStack.AlertStack, args, alerts.map(_ref => {
|
|
72
|
+
let {
|
|
73
|
+
id,
|
|
74
|
+
variant,
|
|
75
|
+
message
|
|
76
|
+
} = _ref;
|
|
77
|
+
return /*#__PURE__*/_react.default.createElement(_index.AlertBar, {
|
|
78
|
+
key: id,
|
|
79
|
+
[variant]: true,
|
|
80
|
+
onHidden: () => removeAlert(id)
|
|
81
|
+
}, message);
|
|
82
|
+
})));
|
|
83
|
+
};
|
|
84
|
+
exports.Interactive = Interactive;
|
|
48
85
|
const RTL = args => {
|
|
49
86
|
(0, _react.useEffect)(() => {
|
|
50
87
|
document.body.dir = 'rtl';
|
|
@@ -25,6 +25,7 @@ const AlertBar = _ref => {
|
|
|
25
25
|
} = _ref;
|
|
26
26
|
const [inViewport, setInViewport] = useState(!hidden);
|
|
27
27
|
const [inDOM, setInDOM] = useState(!hidden);
|
|
28
|
+
const alertRef = useRef(null);
|
|
28
29
|
const showTimeout = useRef(null);
|
|
29
30
|
const displayTimeout = useRef(null);
|
|
30
31
|
const hideTimeout = useRef(null);
|
|
@@ -52,6 +53,9 @@ const AlertBar = _ref => {
|
|
|
52
53
|
};
|
|
53
54
|
const runHideAnimation = () => {
|
|
54
55
|
clearAllTimeouts();
|
|
56
|
+
if (alertRef.current) {
|
|
57
|
+
alertRef.current.style.setProperty('--alert-bar-collapse', `-${alertRef.current.offsetHeight}px`);
|
|
58
|
+
}
|
|
55
59
|
hide();
|
|
56
60
|
hideTimeout.current = setTimeout(remove, ANIMATION_TIME);
|
|
57
61
|
};
|
|
@@ -93,6 +97,7 @@ const AlertBar = _ref => {
|
|
|
93
97
|
return clearAllTimeouts;
|
|
94
98
|
}, [hidden]);
|
|
95
99
|
return !inDOM ? null : /*#__PURE__*/React.createElement("div", {
|
|
100
|
+
ref: alertRef,
|
|
96
101
|
"data-test": dataTest,
|
|
97
102
|
onMouseEnter: pauseDisplayTimeout,
|
|
98
103
|
onMouseLeave: resumeDisplayTimeout,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { colors, spacers, elevations } from '@dhis2/ui-constants';
|
|
2
2
|
export const ANIMATION_TIME = 350;
|
|
3
|
-
const _defaultExport = [`div.jsx-
|
|
4
|
-
_defaultExport.__hash = "
|
|
3
|
+
const _defaultExport = [`div.jsx-333097294{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px;box-shadow:${elevations.e300};padding-top:${spacers.dp8};padding-inline-end:${spacers.dp8};padding-bottom:${spacers.dp8};padding-inline-start:${spacers.dp16};margin-bottom:${spacers.dp16};max-width:600px;min-width:300px;font-size:14px;pointer-events:all;}`, `div.info.jsx-333097294{background-color:${colors.grey900};color:${colors.white};}`, `div.success.jsx-333097294{background-color:${colors.green800};color:${colors.white};}`, `div.warning.jsx-333097294{background-color:${colors.yellow300};color:${colors.yellow900};}`, `div.critical.jsx-333097294{background-color:${colors.red800};color:${colors.white};}`, `@-webkit-keyframes slidein-jsx-333097294{from{-webkit-transform:translateY(${spacers.dp24});-ms-transform:translateY(${spacers.dp24});transform:translateY(${spacers.dp24});opacity:0;}to{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}}`, `@keyframes slidein-jsx-333097294{from{-webkit-transform:translateY(${spacers.dp24});-ms-transform:translateY(${spacers.dp24});transform:translateY(${spacers.dp24});opacity:0;}to{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;}}`, `@-webkit-keyframes slideout-jsx-333097294{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;margin-bottom:${spacers.dp16};}45%{opacity:0;}100%{-webkit-transform:translateY(${spacers.dp8});-ms-transform:translateY(${spacers.dp8});transform:translateY(${spacers.dp8});opacity:0;margin-bottom:var(--alert-bar-collapse,${spacers.dp16});}}`, `@keyframes slideout-jsx-333097294{0%{-webkit-transform:translateY(0);-ms-transform:translateY(0);transform:translateY(0);opacity:1;margin-bottom:${spacers.dp16};}45%{opacity:0;}100%{-webkit-transform:translateY(${spacers.dp8});-ms-transform:translateY(${spacers.dp8});transform:translateY(${spacers.dp8});opacity:0;margin-bottom:var(--alert-bar-collapse,${spacers.dp16});}}`, `div.inViewport.jsx-333097294{-webkit-animation-duration:${ANIMATION_TIME}ms;animation-duration:${ANIMATION_TIME}ms;-webkit-animation-name:slidein-jsx-333097294;animation-name:slidein-jsx-333097294;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:cubic-bezier(0.2,0.8,0.2,1);animation-timing-function:cubic-bezier(0.2,0.8,0.2,1);}`, `div.jsx-333097294{-webkit-animation-duration:${ANIMATION_TIME}ms;animation-duration:${ANIMATION_TIME}ms;-webkit-animation-name:slideout-jsx-333097294;animation-name:slideout-jsx-333097294;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-timing-function:cubic-bezier(0.4,0,1,1);animation-timing-function:cubic-bezier(0.4,0,1,1);}`, "@media (prefers-reduced-motion:reduce){div.jsx-333097294,div.inViewport.jsx-333097294{-webkit-animation-duration:0ms;animation-duration:0ms;}}"];
|
|
4
|
+
_defaultExport.__hash = "333097294";
|
|
5
5
|
export default _defaultExport;
|
|
@@ -55,16 +55,16 @@ const Icon = _ref2 => {
|
|
|
55
55
|
}
|
|
56
56
|
return /*#__PURE__*/React.createElement("div", {
|
|
57
57
|
"data-test": dataTest,
|
|
58
|
-
className: _JSXStyle.dynamic([["
|
|
58
|
+
className: _JSXStyle.dynamic([["4176481777", [spacers.dp12]]])
|
|
59
59
|
}, /*#__PURE__*/React.isValidElement(icon) ? icon : /*#__PURE__*/React.createElement(StatusIcon, {
|
|
60
60
|
valid: success,
|
|
61
61
|
error: critical,
|
|
62
62
|
warning: warning,
|
|
63
63
|
info: info
|
|
64
64
|
}), /*#__PURE__*/React.createElement(_JSXStyle, {
|
|
65
|
-
id: "
|
|
66
|
-
dynamic: [spacers.
|
|
67
|
-
}, [`div.__jsx-style-dynamic-selector{margin-inline-end:${spacers.
|
|
65
|
+
id: "4176481777",
|
|
66
|
+
dynamic: [spacers.dp12]
|
|
67
|
+
}, [`div.__jsx-style-dynamic-selector{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-inline-end:${spacers.dp12};}`]));
|
|
68
68
|
};
|
|
69
69
|
const iconPropType = PropTypes.oneOfType([PropTypes.bool, PropTypes.element]);
|
|
70
70
|
const alertStatePropType = mutuallyExclusive(['success', 'warning', 'critical', 'info'], PropTypes.bool);
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import React, { useEffect } from 'react';
|
|
1
|
+
import React, { useEffect, useState, useRef } from 'react';
|
|
2
2
|
import { AlertBar } from '../alert-bar/index.js';
|
|
3
3
|
import { AlertStack } from './alert-stack.js';
|
|
4
|
+
const VARIANTS = ['info', 'success', 'warning', 'critical'];
|
|
4
5
|
const description = `
|
|
5
6
|
A container for Alert Bars.
|
|
6
7
|
|
|
@@ -36,6 +37,41 @@ export const Default = args => /*#__PURE__*/React.createElement(AlertStack, args
|
|
|
36
37
|
permanent: true,
|
|
37
38
|
success: true
|
|
38
39
|
}, "Fourth notification - I am at the top"));
|
|
40
|
+
export const Interactive = args => {
|
|
41
|
+
const [alerts, setAlerts] = useState([]);
|
|
42
|
+
const nextId = useRef(0);
|
|
43
|
+
const addAlert = () => {
|
|
44
|
+
const id = nextId.current++;
|
|
45
|
+
const variant = VARIANTS[id % VARIANTS.length];
|
|
46
|
+
setAlerts(current => [...current, {
|
|
47
|
+
id,
|
|
48
|
+
variant,
|
|
49
|
+
message: `Alert #${id} (${variant})`
|
|
50
|
+
}]);
|
|
51
|
+
};
|
|
52
|
+
const removeAlert = id => {
|
|
53
|
+
setAlerts(current => current.filter(a => a.id !== id));
|
|
54
|
+
};
|
|
55
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
|
|
56
|
+
onClick: addAlert,
|
|
57
|
+
style: {
|
|
58
|
+
padding: '8px 16px',
|
|
59
|
+
fontSize: '14px',
|
|
60
|
+
cursor: 'pointer'
|
|
61
|
+
}
|
|
62
|
+
}, "Add alert"), /*#__PURE__*/React.createElement(AlertStack, args, alerts.map(_ref => {
|
|
63
|
+
let {
|
|
64
|
+
id,
|
|
65
|
+
variant,
|
|
66
|
+
message
|
|
67
|
+
} = _ref;
|
|
68
|
+
return /*#__PURE__*/React.createElement(AlertBar, {
|
|
69
|
+
key: id,
|
|
70
|
+
[variant]: true,
|
|
71
|
+
onHidden: () => removeAlert(id)
|
|
72
|
+
}, message);
|
|
73
|
+
})));
|
|
74
|
+
};
|
|
39
75
|
export const RTL = args => {
|
|
40
76
|
useEffect(() => {
|
|
41
77
|
document.body.dir = 'rtl';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dhis2-ui/alert",
|
|
3
|
-
"version": "10.13.
|
|
3
|
+
"version": "10.13.1",
|
|
4
4
|
"description": "UI Alert",
|
|
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/portal": "10.13.
|
|
37
|
-
"@dhis2/ui-constants": "10.13.
|
|
38
|
-
"@dhis2/ui-icons": "10.13.
|
|
36
|
+
"@dhis2-ui/portal": "10.13.1",
|
|
37
|
+
"@dhis2/ui-constants": "10.13.1",
|
|
38
|
+
"@dhis2/ui-icons": "10.13.1",
|
|
39
39
|
"classnames": "^2.3.1",
|
|
40
40
|
"prop-types": "^15.7.2"
|
|
41
41
|
},
|