@longline/aqua-ui 1.0.18 → 1.0.19
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
CHANGED
|
@@ -24,6 +24,11 @@ interface IProps {
|
|
|
24
24
|
* @default true
|
|
25
25
|
*/
|
|
26
26
|
canClose?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* If true, inverteds Dialog colors.
|
|
29
|
+
* @default false
|
|
30
|
+
*/
|
|
31
|
+
inverted?: boolean;
|
|
27
32
|
/**
|
|
28
33
|
* This optional callback is called when the user closes the Dialog
|
|
29
34
|
* window.
|
|
@@ -31,15 +36,8 @@ interface IProps {
|
|
|
31
36
|
*/
|
|
32
37
|
onClose?: () => void;
|
|
33
38
|
}
|
|
34
|
-
/**
|
|
35
|
-
* A Dialog is an overlay window that is shown when the Dialog’s `open`
|
|
36
|
-
* attribute is set to `true`. The calling code is responsible for setting
|
|
37
|
-
* `open` to false when the Dialog should close. The Dialog also calls
|
|
38
|
-
* `onClose` when the user clicks outside the Dialog (`canClose` can be set
|
|
39
|
-
* to prevent this behavior).
|
|
40
|
-
*/
|
|
41
39
|
declare const Dialog: {
|
|
42
|
-
({ open, canClose, width, ...props }: IProps): React.JSX.Element;
|
|
40
|
+
({ open, canClose, width, inverted, ...props }: IProps): React.JSX.Element;
|
|
43
41
|
/**
|
|
44
42
|
* Dialog.Header contains dialog header content.
|
|
45
43
|
*/
|
|
@@ -1,3 +1,14 @@
|
|
|
1
|
+
var __assign = (this && this.__assign) || function () {
|
|
2
|
+
__assign = Object.assign || function(t) {
|
|
3
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
4
|
+
s = arguments[i];
|
|
5
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
6
|
+
t[p] = s[p];
|
|
7
|
+
}
|
|
8
|
+
return t;
|
|
9
|
+
};
|
|
10
|
+
return __assign.apply(this, arguments);
|
|
11
|
+
};
|
|
1
12
|
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
13
|
var t = {};
|
|
3
14
|
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
@@ -27,8 +38,7 @@ import { XhrDialog } from './XhrDialog';
|
|
|
27
38
|
* `onClose` when the user clicks outside the Dialog (`canClose` can be set
|
|
28
39
|
* to prevent this behavior).
|
|
29
40
|
*/
|
|
30
|
-
var
|
|
31
|
-
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, props = __rest(_a, ["open", "canClose", "width"]);
|
|
41
|
+
var DialogBase = function (props) {
|
|
32
42
|
var windowRef = React.useRef(null);
|
|
33
43
|
// Listen for document-wide mousedown event when component mounts.
|
|
34
44
|
React.useEffect(function () {
|
|
@@ -43,7 +53,7 @@ var Dialog = function (_a) {
|
|
|
43
53
|
// prop is not set to false.
|
|
44
54
|
var handleClickOutside = function (event) {
|
|
45
55
|
var elem = event.target;
|
|
46
|
-
if (windowRef.current && !windowRef.current.contains(elem) && props.onClose && canClose !== false) {
|
|
56
|
+
if (windowRef.current && !windowRef.current.contains(elem) && props.onClose && props.canClose !== false) {
|
|
47
57
|
props.onClose();
|
|
48
58
|
}
|
|
49
59
|
};
|
|
@@ -55,10 +65,14 @@ var Dialog = function (_a) {
|
|
|
55
65
|
// and
|
|
56
66
|
// https://veerasundar.com/blog/2018/12/how-to-animate-page-transition-in-react-using-styled-components/
|
|
57
67
|
return (React.createElement(React.Fragment, null,
|
|
58
|
-
React.createElement(CSSTransition, { in: open, timeout: 300, unmountOnExit: true, classNames: "fade" },
|
|
68
|
+
React.createElement(CSSTransition, { in: props.open, timeout: 300, unmountOnExit: true, classNames: "fade" },
|
|
59
69
|
React.createElement(DialogBackground, null)),
|
|
60
|
-
React.createElement(CSSTransition, { in: open, timeout: 300, unmountOnExit: true, classNames: "fade" },
|
|
61
|
-
React.createElement(DialogWindow, { width: width, ref: windowRef }, props.children))));
|
|
70
|
+
React.createElement(CSSTransition, { in: props.open, timeout: 300, unmountOnExit: true, classNames: "fade" },
|
|
71
|
+
React.createElement(DialogWindow, { inverted: props.inverted, width: props.width, ref: windowRef }, props.children))));
|
|
72
|
+
};
|
|
73
|
+
var Dialog = function (_a) {
|
|
74
|
+
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"]);
|
|
75
|
+
return React.createElement(DialogBase, __assign({ open: open, canClose: canClose, width: width, inverted: inverted }, props));
|
|
62
76
|
};
|
|
63
77
|
/**
|
|
64
78
|
* Dialog.Header contains dialog header content.
|
|
@@ -27,7 +27,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
27
27
|
import * as React from 'react';
|
|
28
28
|
import styled from 'styled-components';
|
|
29
29
|
var DialogFooterBase = function (props) {
|
|
30
|
-
return React.createElement("div", { className: props.className }, props.children);
|
|
30
|
+
return React.createElement("div", { className: "".concat(props.className, " footer") }, props.children);
|
|
31
31
|
};
|
|
32
32
|
var DialogFooterStyled = styled(DialogFooterBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 16px;\n justify-content: ", ";\n padding: 0 20px 0 20px;\n height: 80px;\n background-color: ", ";\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n"], ["\n display: flex;\n flex-direction: row;\n align-items: center;\n gap: 16px;\n justify-content: ", ";\n padding: 0 20px 0 20px;\n height: 80px;\n background-color: ", ";\n border-bottom-left-radius: ", "px;\n border-bottom-right-radius: ", "px;\n"
|
|
33
33
|
/**
|
|
@@ -6,6 +6,10 @@ interface IProps {
|
|
|
6
6
|
children?: React.ReactNode;
|
|
7
7
|
windowRef?: any;
|
|
8
8
|
width?: number;
|
|
9
|
+
/**
|
|
10
|
+
* Are Dialog colors inverted?
|
|
11
|
+
*/
|
|
12
|
+
inverted?: boolean;
|
|
9
13
|
}
|
|
10
14
|
declare const DialogWindow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<IProps & React.RefAttributes<HTMLDivElement>, "ref"> & {
|
|
11
15
|
ref?: React.Ref<HTMLDivElement>;
|
|
@@ -3,10 +3,10 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
|
|
|
3
3
|
return cooked;
|
|
4
4
|
};
|
|
5
5
|
import * as React from 'react';
|
|
6
|
-
import styled from 'styled-components';
|
|
6
|
+
import styled, { css } from 'styled-components';
|
|
7
7
|
var DialogWindowBase = React.forwardRef(function (props, ref) {
|
|
8
8
|
return React.createElement("div", { className: props.className, ref: ref }, props.children);
|
|
9
9
|
});
|
|
10
|
-
var DialogWindow = styled(DialogWindowBase)(
|
|
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 transform: translateX(-50%) translateY(-50%);\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 /* CSSTransition classes: */\n &.fade-enter {\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) scale(0.8);\n }\n &.fade-enter-active {\n opacity: 1;\n transform: translateX(-50%) translateY(-50%);\n transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.17,.89,.35,1.67);\n }\n &.fade-exit {\n opacity: 1;\n }\n &.fade-exit-active {\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) scale(0.8);\n transition: opacity 0.3s ease, transform 0.3s ease;\n }\n"], ["\n position: fixed;\n z-index: 3000;\n left: 50%;\n top: 50%;\n transform-origin: center center;\n transform: translateX(-50%) translateY(-50%);\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 /* CSSTransition classes: */\n &.fade-enter {\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) scale(0.8);\n }\n &.fade-enter-active {\n opacity: 1;\n transform: translateX(-50%) translateY(-50%);\n transition: opacity 0.3s ease, transform 0.3s cubic-bezier(.17,.89,.35,1.67);\n }\n &.fade-exit {\n opacity: 1;\n }\n &.fade-exit-active {\n opacity: 0;\n transform: translateX(-50%) translateY(-50%) scale(0.8);\n transition: opacity 0.3s ease, transform 0.3s ease;\n }\n"])), function (p) { return p.theme.radius.normal; }, function (p) { return p.inverted ? p.theme.colors.primary[4] : 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
|
-
var templateObject_1;
|
|
12
|
+
var templateObject_1, templateObject_2;
|