@longline/aqua-ui 1.0.172 → 1.0.174
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/containers/Message/Error.d.ts +11 -0
- package/containers/Message/Error.js +9 -0
- package/containers/Message/Message.d.ts +35 -0
- package/containers/Message/Message.js +55 -0
- package/containers/Message/NoData.d.ts +9 -0
- package/containers/Message/NoData.js +7 -0
- package/containers/Message/NoFilteredData.d.ts +11 -0
- package/containers/Message/NoFilteredData.js +9 -0
- package/containers/Message/index.d.ts +1 -0
- package/containers/Message/index.js +1 -0
- package/controls/ListView/NoData.js +4 -4
- package/controls/View/View.d.ts +8 -4
- package/controls/View/View.js +9 -4
- package/package.json +1 -1
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
interface IProps {
|
|
3
|
+
/** @ignore */
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
/** If this callback is present, a "RETRY" button will be added. */
|
|
6
|
+
onRetry?: () => void;
|
|
7
|
+
/** If set, add a margin around the message box. */
|
|
8
|
+
margin?: boolean;
|
|
9
|
+
}
|
|
10
|
+
declare const Error: (props: IProps) => React.JSX.Element;
|
|
11
|
+
export { Error, IProps };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Message } from './Message';
|
|
3
|
+
import { TertiaryButton } from '../../controls/TertiaryButton';
|
|
4
|
+
var Error = function (props) {
|
|
5
|
+
var _a;
|
|
6
|
+
return React.createElement(Message, { margin: props.margin }, (_a = props.children) !== null && _a !== void 0 ? _a : "An error occurred.",
|
|
7
|
+
props.onRetry && React.createElement(TertiaryButton, { onClick: props.onRetry }, "RETRY"));
|
|
8
|
+
};
|
|
9
|
+
export { Error };
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
interface IProps {
|
|
3
|
+
/** @ignore */
|
|
4
|
+
className?: string;
|
|
5
|
+
/** @ignore */
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
/** If set, add a margin around the message box. */
|
|
8
|
+
margin?: boolean;
|
|
9
|
+
}
|
|
10
|
+
/**
|
|
11
|
+
* A `Message` is used to communicate to the user that something unusual
|
|
12
|
+
* has occurred: a list is empty, or an error occurred. A `Message` ideally
|
|
13
|
+
* includes a button with an action to resolve the situation.
|
|
14
|
+
*/
|
|
15
|
+
declare const Message: {
|
|
16
|
+
(props: IProps): React.JSX.Element;
|
|
17
|
+
/**
|
|
18
|
+
* A `NoData` `Message` should be used when there is reallly no data, and no
|
|
19
|
+
* filter is currently active. This Message offers no actions for the user
|
|
20
|
+
* to take.
|
|
21
|
+
*/
|
|
22
|
+
NoData: (props: import("./NoData").IProps) => React.JSX.Element;
|
|
23
|
+
/**
|
|
24
|
+
* A `NoFilteredData` `Message` should be used when a filter is active, and
|
|
25
|
+
* this may be the cause of a lack of data. Optionally a button can be shown
|
|
26
|
+
* to clear the filter.
|
|
27
|
+
*/
|
|
28
|
+
NoFilteredData: (props: import("./NoFilteredData").IProps) => React.JSX.Element;
|
|
29
|
+
/**
|
|
30
|
+
* An `Error` `Message` should be shown when there was an error retrieving
|
|
31
|
+
* data from the server. A `Retry` button can optionally be shown.
|
|
32
|
+
*/
|
|
33
|
+
Error: (props: import("./Error").IProps) => React.JSX.Element;
|
|
34
|
+
};
|
|
35
|
+
export { Message };
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
|
|
2
|
+
if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
|
|
3
|
+
return cooked;
|
|
4
|
+
};
|
|
5
|
+
var __assign = (this && this.__assign) || function () {
|
|
6
|
+
__assign = Object.assign || function(t) {
|
|
7
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
8
|
+
s = arguments[i];
|
|
9
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
10
|
+
t[p] = s[p];
|
|
11
|
+
}
|
|
12
|
+
return t;
|
|
13
|
+
};
|
|
14
|
+
return __assign.apply(this, arguments);
|
|
15
|
+
};
|
|
16
|
+
import * as React from 'react';
|
|
17
|
+
import styled from 'styled-components';
|
|
18
|
+
import { NoData } from './NoData';
|
|
19
|
+
import { NoFilteredData } from './NoFilteredData';
|
|
20
|
+
import { Error } from './Error';
|
|
21
|
+
var MessageBase = function (props) {
|
|
22
|
+
return React.createElement("div", { className: props.className }, props.children);
|
|
23
|
+
};
|
|
24
|
+
var MessageStyled = styled(MessageBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Position:\n margin: ", ";\n\n // Content:\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n align-items: center;\n gap: 16px;\n\n // Appearance:\n color: ", ";\n user-select: none;\n padding: 16px 16px 16px 16px;\n border-radius: ", "px;\n background-color: ", "; \n line-height: 22px;\n"], ["\n // Position:\n margin: ", ";\n\n // Content:\n display: flex;\n flex-direction: column;\n justify-content: center;\n text-align: center;\n align-items: center;\n gap: 16px;\n\n // Appearance:\n color: ", ";\n user-select: none;\n padding: 16px 16px 16px 16px;\n border-radius: ", "px;\n background-color: ", "; \n line-height: 22px;\n"
|
|
25
|
+
/**
|
|
26
|
+
* A `Message` is used to communicate to the user that something unusual
|
|
27
|
+
* has occurred: a list is empty, or an error occurred. A `Message` ideally
|
|
28
|
+
* includes a button with an action to resolve the situation.
|
|
29
|
+
*/
|
|
30
|
+
])), function (p) { return p.margin ? '32px' : 0; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[5]; });
|
|
31
|
+
/**
|
|
32
|
+
* A `Message` is used to communicate to the user that something unusual
|
|
33
|
+
* has occurred: a list is empty, or an error occurred. A `Message` ideally
|
|
34
|
+
* includes a button with an action to resolve the situation.
|
|
35
|
+
*/
|
|
36
|
+
var Message = function (props) { return React.createElement(MessageStyled, __assign({}, props)); };
|
|
37
|
+
/**
|
|
38
|
+
* A `NoData` `Message` should be used when there is reallly no data, and no
|
|
39
|
+
* filter is currently active. This Message offers no actions for the user
|
|
40
|
+
* to take.
|
|
41
|
+
*/
|
|
42
|
+
Message.NoData = NoData;
|
|
43
|
+
/**
|
|
44
|
+
* A `NoFilteredData` `Message` should be used when a filter is active, and
|
|
45
|
+
* this may be the cause of a lack of data. Optionally a button can be shown
|
|
46
|
+
* to clear the filter.
|
|
47
|
+
*/
|
|
48
|
+
Message.NoFilteredData = NoFilteredData;
|
|
49
|
+
/**
|
|
50
|
+
* An `Error` `Message` should be shown when there was an error retrieving
|
|
51
|
+
* data from the server. A `Retry` button can optionally be shown.
|
|
52
|
+
*/
|
|
53
|
+
Message.Error = Error;
|
|
54
|
+
export { Message };
|
|
55
|
+
var templateObject_1;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
interface IProps {
|
|
3
|
+
/** @ignore */
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
/** If set, add a margin around the message box. */
|
|
6
|
+
margin?: boolean;
|
|
7
|
+
}
|
|
8
|
+
declare const NoData: (props: IProps) => React.JSX.Element;
|
|
9
|
+
export { NoData, IProps };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Message } from './Message';
|
|
3
|
+
var NoData = function (props) {
|
|
4
|
+
var _a;
|
|
5
|
+
return React.createElement(Message, { margin: props.margin }, (_a = props.children) !== null && _a !== void 0 ? _a : "There are no records yet.");
|
|
6
|
+
};
|
|
7
|
+
export { NoData };
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
interface IProps {
|
|
3
|
+
/** @ignore */
|
|
4
|
+
children?: React.ReactNode;
|
|
5
|
+
/** If this callback is provided, a "CLEAR FILTER" button will be added. */
|
|
6
|
+
onClear?: () => void;
|
|
7
|
+
/** If set, add a margin around the message box. */
|
|
8
|
+
margin?: boolean;
|
|
9
|
+
}
|
|
10
|
+
declare const NoFilteredData: (props: IProps) => React.JSX.Element;
|
|
11
|
+
export { NoFilteredData, IProps };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Message } from './Message';
|
|
3
|
+
import { TertiaryButton } from '../../controls/TertiaryButton';
|
|
4
|
+
var NoFilteredData = function (props) {
|
|
5
|
+
var _a;
|
|
6
|
+
return React.createElement(Message, { margin: props.margin }, (_a = props.children) !== null && _a !== void 0 ? _a : "No records found. Your query may be too restrictive.",
|
|
7
|
+
props.onClear && React.createElement(TertiaryButton, { onClick: props.onClear }, "CLEAR FILTER"));
|
|
8
|
+
};
|
|
9
|
+
export { NoFilteredData };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Message } from './Message';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Message } from './Message';
|
|
@@ -15,16 +15,16 @@ var __assign = (this && this.__assign) || function () {
|
|
|
15
15
|
};
|
|
16
16
|
import * as React from 'react';
|
|
17
17
|
import styled from 'styled-components';
|
|
18
|
+
import { Message } from '../../containers/Message';
|
|
18
19
|
var NoDataBase = function (props) {
|
|
19
20
|
// Render nothing if component === false.
|
|
20
21
|
if (props.component === false)
|
|
21
22
|
return null;
|
|
22
23
|
return (React.createElement("div", { className: props.className },
|
|
23
24
|
props.component && props.component,
|
|
24
|
-
!props.component && React.createElement(
|
|
25
|
+
!props.component && React.createElement(Message.NoData, { margin: true })));
|
|
25
26
|
};
|
|
26
|
-
var
|
|
27
|
-
var NoDataStyled = styled(NoDataBase)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n top: 64px;\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n z-index: 1;\n ", " {\n margin: 0 16px 0 16px;\n color: ", ";\n user-select: none;\n padding: 8px 16px 8px 16px;\n border-radius: ", "px;\n background: ", ";\n }\n"], ["\n position: absolute;\n top: 64px;\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: center;\n z-index: 1;\n ", " {\n margin: 0 16px 0 16px;\n color: ", ";\n user-select: none;\n padding: 8px 16px 8px 16px;\n border-radius: ", "px;\n background: ", ";\n }\n"])), DefaultMessage, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.dark ? p.theme.colors.neutral[10] : p.theme.colors.neutral[10]; });
|
|
27
|
+
var NoDataStyled = styled(NoDataBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n top: 48px; /* Height of header row */\n width: 100%;\n z-index: 1;\n"], ["\n position: absolute;\n top: 48px; /* Height of header row */\n width: 100%;\n z-index: 1;\n"])));
|
|
28
28
|
var NoData = function (props) { return React.createElement(NoDataStyled, __assign({}, props)); };
|
|
29
29
|
export { NoData };
|
|
30
|
-
var templateObject_1
|
|
30
|
+
var templateObject_1;
|
package/controls/View/View.d.ts
CHANGED
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
interface
|
|
2
|
+
interface IProps {
|
|
3
3
|
/** @ignore */
|
|
4
4
|
className?: string;
|
|
5
5
|
/**
|
|
6
6
|
* The `View`'s children are its value. Can be JSX.
|
|
7
|
-
*
|
|
8
7
|
*/
|
|
9
8
|
children?: React.ReactNode;
|
|
10
9
|
/**
|
|
@@ -37,6 +36,11 @@ interface IViewProps {
|
|
|
37
36
|
* @default false
|
|
38
37
|
*/
|
|
39
38
|
ghost?: boolean;
|
|
39
|
+
/**
|
|
40
|
+
* Optional badge, in order to show a count next to the View's label.
|
|
41
|
+
* Badged views don't support label text ellipsizing.
|
|
42
|
+
*/
|
|
43
|
+
badge?: number;
|
|
40
44
|
}
|
|
41
45
|
/**
|
|
42
46
|
* A `View` is used to display static (read-only) data. A `View` has a label,
|
|
@@ -50,5 +54,5 @@ interface IViewProps {
|
|
|
50
54
|
* <View label="Email address">{email}</View>
|
|
51
55
|
* ```
|
|
52
56
|
*/
|
|
53
|
-
declare const View: ({ ghost, ...props }:
|
|
54
|
-
export { View,
|
|
57
|
+
declare const View: ({ ghost, ...props }: IProps) => React.JSX.Element;
|
|
58
|
+
export { View, IProps };
|
package/controls/View/View.js
CHANGED
|
@@ -31,7 +31,10 @@ import { ScrollingContent } from './ScrollingContent';
|
|
|
31
31
|
import { EllipsizedContent } from './EllipsizedContent';
|
|
32
32
|
var ViewBase = function (props) {
|
|
33
33
|
return (React.createElement("div", { className: props.className },
|
|
34
|
-
React.createElement(Label, null, props.
|
|
34
|
+
React.createElement(Label, null, props.badge ? (React.createElement(BadgeWrapper, null,
|
|
35
|
+
props.label,
|
|
36
|
+
" ",
|
|
37
|
+
React.createElement(Badge, null, props.badge))) : (props.label)),
|
|
35
38
|
React.createElement(Content, null, props.height
|
|
36
39
|
? React.createElement(ScrollingContent, { ghost: props.ghost, height: props.height, children: props.children })
|
|
37
40
|
: React.createElement(EllipsizedContent, { ghost: props.ghost, children: props.children })),
|
|
@@ -39,7 +42,9 @@ var ViewBase = function (props) {
|
|
|
39
42
|
};
|
|
40
43
|
var Content = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n top: 22px;\n bottom: 22px;\n left: 0;\n right: 0;\n padding-left: 12px;\n padding-right: 12px;\n"], ["\n position: absolute;\n top: 22px;\n bottom: 22px;\n left: 0;\n right: 0;\n padding-left: 12px;\n padding-right: 12px;\n"])));
|
|
41
44
|
var HintContent = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n bottom: 3px;\n left: 12px;\n right: 12px;\n\n font: ", ";\n color: ", ";\n user-select: none;\n // Hints don't wrap and are ellipsized:\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n"], ["\n position: absolute;\n bottom: 3px;\n left: 12px;\n right: 12px;\n\n font: ", ";\n color: ", ";\n user-select: none;\n // Hints don't wrap and are ellipsized:\n white-space: nowrap;\n overflow-x: hidden;\n text-overflow: ellipsis;\n"])), function (p) { return p.theme.font.bodySmall; }, function (p) { return p.theme.colors.neutral[80]; });
|
|
42
|
-
var ViewStyled = styled(ViewBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n // Position & size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n \n min-height: 80px;\n ", "\n z-index: 0; // for :before\n\n // Appearance:\n border-radius: ", "px;\n background-color: rgb(from ", " r g b / 30%);\n border: none;\n font: ", ";\n color: ", ";\n\n // Content:\n overflow: hidden;\n\n // Hint background:\n ", "\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n user-select: none;\n }\n\n // Ghost state:\n ", "\n\n // Views may provide their weight in relative units to other fields.\n ", "\n"], ["\n // Position & size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n \n min-height: 80px;\n ", "\n z-index: 0; // for :before\n\n // Appearance:\n border-radius: ", "px;\n background-color: rgb(from ", " r g b / 30%);\n border: none;\n font: ", ";\n color: ", ";\n\n // Content:\n overflow: hidden;\n\n // Hint background:\n ", "\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n user-select: none;\n }\n\n // Ghost state:\n ", "\n\n // Views may provide their weight in relative units to other fields.\n ", "\n"
|
|
45
|
+
var ViewStyled = styled(ViewBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n // Position & size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n \n min-height: 80px;\n ", "\n z-index: 0; // for :before\n\n // Appearance:\n border-radius: ", "px;\n background-color: rgb(from ", " r g b / 30%);\n border: none;\n font: ", ";\n color: ", ";\n\n // Content:\n overflow: hidden;\n\n // Hint background:\n ", "\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n user-select: none;\n }\n\n // Ghost state:\n ", "\n\n // Views may provide their weight in relative units to other fields.\n ", "\n"], ["\n // Position & size:\n position: relative;\n box-sizing: border-box;\n margin-bottom: 8px;\n \n min-height: 80px;\n ", "\n z-index: 0; // for :before\n\n // Appearance:\n border-radius: ", "px;\n background-color: rgb(from ", " r g b / 30%);\n border: none;\n font: ", ";\n color: ", ";\n\n // Content:\n overflow: hidden;\n\n // Hint background:\n ", "\n\n ", " {\n position: absolute;\n left: 12px;\n right: 12px;\n top: 10px;\n color: ", ";\n user-select: none;\n }\n\n // Ghost state:\n ", "\n\n // Views may provide their weight in relative units to other fields.\n ", "\n"])), function (p) { return p.height && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["height: ", ";"], ["height: ", ";"])), p.height); }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return !p.noHintBg && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n &:before {\n z-index: -1;\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n background-color: rgb(from ", " r g b / 30%);\n }\n "], ["\n &:before {\n z-index: -1;\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 22px;\n background-color: rgb(from ", " r g b / 30%);\n }\n "])), function (p) { return p.theme.colors.primary[1]; }); }, Label, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.ghost && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n outline: dashed 1px ", ";\n background-color: transparent;\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n pointer-events: none;\n user-select: none;\n \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "], ["\n outline: dashed 1px ", ";\n background-color: transparent;\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n pointer-events: none;\n user-select: none;\n \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "])), p.theme.colors.primary[2], function (p) { return p.theme.colors.neutral[100]; }, Label, function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.weight && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
|
|
46
|
+
var BadgeWrapper = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n flex-direction: row;\n gap: 4px;\n align-items: center;\n"], ["\n display: flex;\n flex-direction: row;\n gap: 4px;\n align-items: center;\n"])));
|
|
47
|
+
var Badge = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n height: 12px;\n width: 12px;\n display: flex;\n font-size: 8px;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n background: ", ";\n"], ["\n height: 12px;\n width: 12px;\n display: flex;\n font-size: 8px;\n justify-content: center;\n align-items: center;\n border-radius: 8px;\n background: ", ";\n"
|
|
43
48
|
/**
|
|
44
49
|
* A `View` is used to display static (read-only) data. A `View` has a label,
|
|
45
50
|
* and its children are its value. Optionally, a hint can be shown at the
|
|
@@ -52,7 +57,7 @@ var ViewStyled = styled(ViewBase)(templateObject_7 || (templateObject_7 = __make
|
|
|
52
57
|
* <View label="Email address">{email}</View>
|
|
53
58
|
* ```
|
|
54
59
|
*/
|
|
55
|
-
])), function (p) { return p.
|
|
60
|
+
])), function (p) { return p.theme.colors.primary[2]; });
|
|
56
61
|
/**
|
|
57
62
|
* A `View` is used to display static (read-only) data. A `View` has a label,
|
|
58
63
|
* and its children are its value. Optionally, a hint can be shown at the
|
|
@@ -70,4 +75,4 @@ var View = function (_a) {
|
|
|
70
75
|
return React.createElement(ViewStyled, __assign({ ghost: ghost }, props));
|
|
71
76
|
};
|
|
72
77
|
export { View };
|
|
73
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
|
|
78
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
|