@longline/aqua-ui 1.0.102 → 1.0.103
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/package.json +2 -3
- package/services/Dialog/Dialog.js +14 -13
- package/services/Dialog/DialogBackground.d.ts +4 -0
- package/services/Dialog/DialogBackground.js +2 -2
- package/services/Dialog/DialogWindow.d.ts +4 -0
- package/services/Dialog/DialogWindow.js +2 -2
- package/services/Toast/Toast.js +17 -4
- package/services/Toast/ToastContainer.js +3 -6
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@longline/aqua-ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.103",
|
|
4
4
|
"description": "AquaUI",
|
|
5
5
|
"author": "Alexander van Oostenrijk / Longline Environment",
|
|
6
6
|
"license": "Commercial",
|
|
@@ -54,7 +54,6 @@
|
|
|
54
54
|
"@types/mapbox-gl": "^3.4.0",
|
|
55
55
|
"@types/react": "^18.3.10",
|
|
56
56
|
"@types/react-dom": "^18.3.0",
|
|
57
|
-
"@types/react-transition-group": "^4.4.11",
|
|
58
57
|
"awesome-debounce-promise": "^2.1.0",
|
|
59
58
|
"date-fns": "^4.1.0",
|
|
60
59
|
"gl-matrix": "^3.4.3",
|
|
@@ -64,7 +63,7 @@
|
|
|
64
63
|
"react-map-gl": "^7.1.7",
|
|
65
64
|
"react-popper": "^2.3.0",
|
|
66
65
|
"react-router-dom": "^6.26.2",
|
|
67
|
-
"react-transition-
|
|
66
|
+
"react-transition-state": "^2.2.0",
|
|
68
67
|
"styled-components": "^6.1.13"
|
|
69
68
|
}
|
|
70
69
|
}
|
|
@@ -21,8 +21,8 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
21
21
|
return t;
|
|
22
22
|
};
|
|
23
23
|
import * as React from 'react';
|
|
24
|
-
import { CSSTransition } from 'react-transition-group';
|
|
25
24
|
import { createPortal } from 'react-dom';
|
|
25
|
+
import { useTransitionState } from "react-transition-state";
|
|
26
26
|
// Other controls
|
|
27
27
|
import { DialogBackground } from './DialogBackground';
|
|
28
28
|
import { DialogWindow } from './DialogWindow';
|
|
@@ -41,6 +41,16 @@ import { XhrDialog } from './XhrDialog';
|
|
|
41
41
|
*/
|
|
42
42
|
var DialogBase = function (props) {
|
|
43
43
|
var windowRef = React.useRef(null);
|
|
44
|
+
var _a = useTransitionState({
|
|
45
|
+
timeout: 500,
|
|
46
|
+
mountOnEnter: true,
|
|
47
|
+
initialEntered: false,
|
|
48
|
+
preEnter: true,
|
|
49
|
+
unmountOnExit: true
|
|
50
|
+
}), _b = _a[0], status = _b.status, isMounted = _b.isMounted, isEnter = _b.isEnter, toggle = _a[1];
|
|
51
|
+
React.useEffect(function () {
|
|
52
|
+
toggle(props.open);
|
|
53
|
+
}, [props.open]);
|
|
44
54
|
// Listen for document-wide mousedown event when component mounts.
|
|
45
55
|
React.useEffect(function () {
|
|
46
56
|
document.addEventListener('mousedown', handleClickOutside);
|
|
@@ -58,18 +68,9 @@ var DialogBase = function (props) {
|
|
|
58
68
|
props.onClose();
|
|
59
69
|
}
|
|
60
70
|
};
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
// For use of CSSTransition, see:
|
|
65
|
-
// http://reactcommunity.org/react-transition-group/css-transition
|
|
66
|
-
// and
|
|
67
|
-
// https://veerasundar.com/blog/2018/12/how-to-animate-page-transition-in-react-using-styled-components/
|
|
68
|
-
return (React.createElement(React.Fragment, null,
|
|
69
|
-
createPortal(React.createElement(CSSTransition, { in: props.open, timeout: 300, unmountOnExit: true, classNames: "fade" },
|
|
70
|
-
React.createElement(DialogBackground, null)), document.body),
|
|
71
|
-
createPortal(React.createElement(CSSTransition, { in: props.open, timeout: 300, unmountOnExit: true, classNames: "fade" },
|
|
72
|
-
React.createElement(DialogWindow, { inverted: props.inverted, width: props.width, ref: windowRef }, props.children)), document.body)));
|
|
71
|
+
return (React.createElement(React.Fragment, null, isMounted && React.createElement(React.Fragment, null,
|
|
72
|
+
createPortal(React.createElement(DialogBackground, { status: status }), document.body),
|
|
73
|
+
createPortal(React.createElement(DialogWindow, { inverted: props.inverted, width: props.width, ref: windowRef, status: status }, props.children), document.body))));
|
|
73
74
|
};
|
|
74
75
|
var Dialog = function (_a) {
|
|
75
76
|
var _b = _a.open, open = _b === void 0 ? false : _b, _c = _a.canClose, canClose = _c === void 0 ? true : _c, _d = _a.width, width = _d === void 0 ? 600 : _d, _e = _a.inverted, inverted = _e === void 0 ? false : _e, props = __rest(_a, ["open", "canClose", "width", "inverted"]);
|
|
@@ -2,6 +2,10 @@ import * as React from 'react';
|
|
|
2
2
|
interface IProps {
|
|
3
3
|
/** @ignore */
|
|
4
4
|
className?: string;
|
|
5
|
+
/**
|
|
6
|
+
* useTransitionState class
|
|
7
|
+
*/
|
|
8
|
+
status: string;
|
|
5
9
|
}
|
|
6
10
|
declare const DialogBackground: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<IProps, never>> & string & Omit<(props: IProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
|
|
7
11
|
export { DialogBackground };
|
|
@@ -5,8 +5,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import styled from 'styled-components';
|
|
7
7
|
var DialogBackgroundBase = function (props) {
|
|
8
|
-
return React.createElement("div", { className: props.className });
|
|
8
|
+
return React.createElement("div", { className: "".concat(props.className, " ").concat(props.status) });
|
|
9
9
|
};
|
|
10
|
-
var DialogBackground = styled(DialogBackgroundBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed;\n z-index: 2000;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background-color: #
|
|
10
|
+
var DialogBackground = styled(DialogBackgroundBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: fixed;\n z-index: 2000;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background-color: #00000080;\n opacity: 1;\n\n /* useTransitionState classes */\n transition: opacity 0.5s ease;\n opacity: 0;\n &.preEnter, &.exiting {\n opacity: 0;\n }\n &.entering {\n opacity: 1;\n }\n &.entered {\n opacity: 1;\n } \n"], ["\n position: fixed;\n z-index: 2000;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n background-color: #00000080;\n opacity: 1;\n\n /* useTransitionState classes */\n transition: opacity 0.5s ease;\n opacity: 0;\n &.preEnter, &.exiting {\n opacity: 0;\n }\n &.entering {\n opacity: 1;\n }\n &.entered {\n opacity: 1;\n } \n"])));
|
|
11
11
|
export { DialogBackground };
|
|
12
12
|
var templateObject_1;
|
|
@@ -10,6 +10,10 @@ interface IProps {
|
|
|
10
10
|
* Are Dialog colors inverted?
|
|
11
11
|
*/
|
|
12
12
|
inverted?: boolean;
|
|
13
|
+
/**
|
|
14
|
+
* useTransitionState class
|
|
15
|
+
*/
|
|
16
|
+
status: string;
|
|
13
17
|
}
|
|
14
18
|
declare const DialogWindow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<IProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
15
19
|
ref?: React.Ref<HTMLDivElement>;
|
|
@@ -5,8 +5,8 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
5
5
|
import * as React from 'react';
|
|
6
6
|
import styled, { css } from 'styled-components';
|
|
7
7
|
var DialogWindowBase = React.forwardRef(function (props, ref) {
|
|
8
|
-
return React.createElement("div", { className: props.className, ref: ref }, props.children);
|
|
8
|
+
return React.createElement("div", { className: "".concat(props.className, " ").concat(props.status), ref: ref }, props.children);
|
|
9
9
|
});
|
|
10
|
-
var DialogWindow = styled(DialogWindowBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: fixed;\n z-index: 3000;\n left: 50%;\n top: 50%;\n transform-origin: center center;\n
|
|
10
|
+
var DialogWindow = styled(DialogWindowBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: fixed;\n z-index: 3000;\n left: 50%;\n top: 50%;\n transform-origin: center center;\n border-radius: ", "px;\n background-color: ", ";\n box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n ", "\n\n // Font:\n font: ", ";\n color: ", "; \n\n /* Dialog window width:\n * Narrower on small screen. */\n width: ", "px;\n @media (max-width: ", "px) {\n width: ", "px;\n }\n\n /* useTransitionState classes */\n transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.17,.89,.35,1.67);\n opacity: 0;\n &.preEnter, &.exiting {\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) scale(0.8);\n }\n &.entering {\n opacity: 1;\n transform: translateX(-50%) translateY(-50%);\n }\n &.entered {\n opacity: 1;\n transform: translateX(-50%) translateY(-50%);\n }\n\n"], ["\n position: fixed;\n z-index: 3000;\n left: 50%;\n top: 50%;\n transform-origin: center center;\n border-radius: ", "px;\n background-color: ", ";\n box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.5);\n\n ", "\n\n // Font:\n font: ", ";\n color: ", "; \n\n /* Dialog window width:\n * Narrower on small screen. */\n width: ", "px;\n @media (max-width: ", "px) {\n width: ", "px;\n }\n\n /* useTransitionState classes */\n transition: opacity 0.5s ease, transform 0.5s cubic-bezier(.17,.89,.35,1.67);\n opacity: 0;\n &.preEnter, &.exiting {\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) scale(0.8);\n }\n &.entering {\n opacity: 1;\n transform: translateX(-50%) translateY(-50%);\n }\n &.entered {\n opacity: 1;\n transform: translateX(-50%) translateY(-50%);\n }\n\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.inverted ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.inverted && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n .footer {\n background: ", ";\n } \n "], ["\n .footer {\n background: ", ";\n } \n "])), function (p) { return p.theme.colors.primary[5]; }); }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.inverted ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) { return p.width ? p.width : 600; }, function (p) { return p.theme.screen.small; }, function (p) { return p.width ? (p.width > 400 ? 400 : p.width) : 400; });
|
|
11
11
|
export { DialogWindow };
|
|
12
12
|
var templateObject_1, templateObject_2;
|
package/services/Toast/Toast.js
CHANGED
|
@@ -25,13 +25,26 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
25
25
|
return t;
|
|
26
26
|
};
|
|
27
27
|
import * as React from 'react';
|
|
28
|
+
import styled, { useTheme } from 'styled-components';
|
|
29
|
+
import { useTransitionState } from "react-transition-state";
|
|
28
30
|
// Other controls
|
|
29
|
-
import styled from 'styled-components';
|
|
30
31
|
import { SVG } from '../../svg';
|
|
31
32
|
;
|
|
32
33
|
var ToastBase = function (props) {
|
|
33
34
|
var _a;
|
|
34
35
|
var timerHandle = React.useRef(null);
|
|
36
|
+
var theme = useTheme();
|
|
37
|
+
var _b = useTransitionState({
|
|
38
|
+
timeout: theme.animation.duration * 2,
|
|
39
|
+
mountOnEnter: true,
|
|
40
|
+
initialEntered: false,
|
|
41
|
+
preEnter: true,
|
|
42
|
+
unmountOnExit: true
|
|
43
|
+
}), _c = _b[0], status = _c.status, isMounted = _c.isMounted, isEnter = _c.isEnter, toggle = _b[1];
|
|
44
|
+
React.useEffect(function () {
|
|
45
|
+
toggle(true);
|
|
46
|
+
return function () { return toggle(false); };
|
|
47
|
+
}, []);
|
|
35
48
|
React.useEffect(function () {
|
|
36
49
|
// Set a timeout on the toast, saving the
|
|
37
50
|
// timer handle for later cleanup.
|
|
@@ -49,17 +62,17 @@ var ToastBase = function (props) {
|
|
|
49
62
|
props.action();
|
|
50
63
|
props.onClose();
|
|
51
64
|
};
|
|
52
|
-
return (React.createElement("div", { className: props.className },
|
|
65
|
+
return (React.createElement(React.Fragment, null, isMounted && React.createElement("div", { className: "".concat(props.className, " ").concat(status) },
|
|
53
66
|
React.createElement(Message, null, props.message),
|
|
54
67
|
props.action && React.createElement(Action, { onClick: handleAction }, (_a = props.actionLabel) !== null && _a !== void 0 ? _a : "Action"),
|
|
55
68
|
props.dismissable && React.createElement(CloseButton, { onClick: props.onClose },
|
|
56
69
|
React.createElement("svg", null,
|
|
57
|
-
React.createElement("use", { xlinkHref: SVG.Icons.Cross })))));
|
|
70
|
+
React.createElement("use", { xlinkHref: SVG.Icons.Cross }))))));
|
|
58
71
|
};
|
|
59
72
|
var Message = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n flex: 1;\n padding-left: 16px;\n padding-right: 16px;\n"], ["\n display: flex;\n align-items: center;\n flex: 1;\n padding-left: 16px;\n padding-right: 16px;\n"])));
|
|
60
73
|
var CloseButton = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n cursor: pointer;\n\n svg {\n fill: ", ";\n width: 20px;\n height: 20px;\n } \n &:hover {\n svg {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n cursor: pointer;\n\n svg {\n fill: ", ";\n width: 20px;\n height: 20px;\n } \n &:hover {\n svg {\n fill: ", ";\n }\n }\n"])), function (p) { return p.theme.colors.neutral[95]; }, function (p) { return p.theme.colors.neutral[100]; });
|
|
61
74
|
var Action = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n padding-left: 8px;\n color: ", ";\n cursor: pointer;\n white-space: nowrap;\n font: ", ";\n text-transform: lowercase;\n transition: color ease-in-out ", "ms;\n &:hover {\n color: ", ";\n }\n &:last-child {\n padding-right: 16px;\n }\n"], ["\n display: flex;\n align-items: center;\n padding-left: 8px;\n color: ", ";\n cursor: pointer;\n white-space: nowrap;\n font: ", ";\n text-transform: lowercase;\n transition: color ease-in-out ", "ms;\n &:hover {\n color: ", ";\n }\n &:last-child {\n padding-right: 16px;\n }\n"])), function (p) { return p.theme.colors.primary[4]; }, function (p) { return p.theme.font.labelCaps; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.colors.primary[2]; });
|
|
62
|
-
var ToastStyled = styled(ToastBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n // Position and size:\n display: flex;\n width: 344px;\n box-sizing: border-box;\n align-items: stretch;\n justify-content: space-between;\n user-select: none;\n pointer-events: all;\n\n // Space between toasts:\n margin: 8px 0 8px 0; \n\n // Appearance:\n padding: 14px 0 14px 0;\n background-color: ", ";\n color: #fff;\n border-radius: ", "px;\n font: ", ";\n\n
|
|
75
|
+
var ToastStyled = styled(ToastBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n // Position and size:\n display: flex;\n width: 344px;\n box-sizing: border-box;\n align-items: stretch;\n justify-content: space-between;\n user-select: none;\n pointer-events: all;\n\n // Space between toasts:\n margin: 8px 0 8px 0; \n\n // Appearance:\n padding: 14px 0 14px 0;\n background-color: ", ";\n color: #fff;\n border-radius: ", "px;\n font: ", ";\n\n /* useTransitionState classes */\n transition: opacity ", "ms ease;\n &.preEnter, &.exiting, &.unmounted {\n opacity: 0;\n }\n &.entering {\n opacity: 1;\n }\n &.entered {\n opacity: 1;\n }\n\n"], ["\n // Position and size:\n display: flex;\n width: 344px;\n box-sizing: border-box;\n align-items: stretch;\n justify-content: space-between;\n user-select: none;\n pointer-events: all;\n\n // Space between toasts:\n margin: 8px 0 8px 0; \n\n // Appearance:\n padding: 14px 0 14px 0;\n background-color: ", ";\n color: #fff;\n border-radius: ", "px;\n font: ", ";\n\n /* useTransitionState classes */\n transition: opacity ", "ms ease;\n &.preEnter, &.exiting, &.unmounted {\n opacity: 0;\n }\n &.entering {\n opacity: 1;\n }\n &.entered {\n opacity: 1;\n }\n\n"])), function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.theme.animation.duration * 2; });
|
|
63
76
|
/**
|
|
64
77
|
* A `Toast` is generated through the `ToastProvider.toast` method.
|
|
65
78
|
*
|
|
@@ -26,7 +26,6 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
26
26
|
};
|
|
27
27
|
import * as React from 'react';
|
|
28
28
|
import styled from 'styled-components';
|
|
29
|
-
import { TransitionGroup, CSSTransition } from 'react-transition-group';
|
|
30
29
|
// Other controls
|
|
31
30
|
import { Toast } from './Toast';
|
|
32
31
|
import { useToast } from './useToast';
|
|
@@ -35,11 +34,9 @@ var ToastContainerBase = function (props) {
|
|
|
35
34
|
var handleClose = function (key) {
|
|
36
35
|
toastProvider.remove(key);
|
|
37
36
|
};
|
|
38
|
-
return (React.createElement("div", { className: props.className },
|
|
39
|
-
React.createElement(
|
|
40
|
-
|
|
41
|
-
React.createElement(Toast, __assign({ message: toastProvider.messages[key].message, onClose: function () { return handleClose(key); } }, toastProvider.messages[key].options)));
|
|
42
|
-
}))));
|
|
37
|
+
return (React.createElement("div", { className: props.className }, Object.keys(toastProvider.messages).map(function (key) {
|
|
38
|
+
return React.createElement(Toast, __assign({ key: key, message: toastProvider.messages[key].message, onClose: function () { return handleClose(key); } }, toastProvider.messages[key].options));
|
|
39
|
+
})));
|
|
43
40
|
};
|
|
44
41
|
var ToastContainerStyled = styled(ToastContainerBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Position:\n // ToastContainer occupies all area that it can, but captures no pointer events.\n // Toast children do capture pointer events.\n position: absolute;\n z-index: 9999;\n top: ", "px;\n bottom: ", "px;\n left: ", "px;\n right: ", "px;\n pointer-events: none !important;\n // Toasts are placed using a flexbox:\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n justify-content: ", ";\n"], ["\n // Position:\n // ToastContainer occupies all area that it can, but captures no pointer events.\n // Toast children do capture pointer events.\n position: absolute;\n z-index: 9999;\n top: ", "px;\n bottom: ", "px;\n left: ", "px;\n right: ", "px;\n pointer-events: none !important;\n // Toasts are placed using a flexbox:\n display: flex;\n flex-direction: ", ";\n align-items: ", ";\n justify-content: ", ";\n"
|
|
45
42
|
/**
|