@longline/aqua-ui 1.0.294 → 1.0.299
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.
|
@@ -30,6 +30,10 @@ interface IProgressProps {
|
|
|
30
30
|
* the color is the theme primary color.
|
|
31
31
|
*/
|
|
32
32
|
color?: string;
|
|
33
|
+
/**
|
|
34
|
+
* If set, applies a custom width (a CSS string), e.g. `300px` or `50%`.
|
|
35
|
+
*/
|
|
36
|
+
width?: string;
|
|
33
37
|
}
|
|
34
38
|
/**
|
|
35
39
|
* A visual progress bar component that shows completion of a task, range, or
|
|
@@ -34,11 +34,19 @@ var getClampedValue = function (value) {
|
|
|
34
34
|
return Math.round(Math.min(100, Math.max(0, value)));
|
|
35
35
|
};
|
|
36
36
|
var ProgressBase = function (props) {
|
|
37
|
-
return React.createElement("div", { className: props.className, role: "progressbar", "
|
|
37
|
+
return React.createElement("div", { className: props.className, role: "progressbar", "aria-valuenow": getClampedValue(props.value), "aria-valuemin": 0, "aria-valuemax": 100 },
|
|
38
|
+
React.createElement(FillOuter, null,
|
|
39
|
+
React.createElement(FillInner, { style: { transform: "scaleX(".concat(getClampedValue(props.value) / 100, ")") } })),
|
|
40
|
+
props.numbered && React.createElement(Value, null, "".concat(getClampedValue(props.value), "%")));
|
|
38
41
|
};
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
+
// We use inner DIVs to the display the inner fill and value. Previously these
|
|
43
|
+
// were done using :before/after pseudo-elements, which resulted in fewer
|
|
44
|
+
// DOM nodes, but throwing the width of the fill off when the <Progress>
|
|
45
|
+
// component was placed inside a flexbox.
|
|
46
|
+
var FillOuter = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n overflow: hidden;\n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: inherit;\n overflow: hidden;\n"])));
|
|
47
|
+
var FillInner = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n height: 100%;\n transform-origin: left center;\n transition: transform ", "ms ease;\n will-change: transform; \n"], ["\n position: absolute;\n width: 100%;\n height: 100%;\n transform-origin: left center;\n transition: transform ", "ms ease;\n will-change: transform; \n"])), function (p) { return p.theme.animation.duration * 2; });
|
|
48
|
+
var Value = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 8px;\n line-height: 0;\n color: ", ";\n text-shadow: 0px 0px 4px #000; \n"], ["\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n font-size: 8px;\n line-height: 0;\n color: ", ";\n text-shadow: 0px 0px 4px #000; \n"])), function (p) { return p.theme.colors.neutral[100]; });
|
|
49
|
+
var ProgressStyled = styled(ProgressBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject([" \n position: relative; \n box-sizing: border-box;\n height: ", "px;\n min-width: 100px;\n ", "\n margin: 4px 0 4px 0;\n\n ", "\n background-color: ", ";\n border-radius: ", "px;\n\n ", " {\n background-color: ", ";\n }\n"], [" \n position: relative; \n box-sizing: border-box;\n height: ", "px;\n min-width: 100px;\n ", "\n margin: 4px 0 4px 0;\n\n ", "\n background-color: ", ";\n border-radius: ", "px;\n\n ", " {\n background-color: ", ";\n }\n"
|
|
42
50
|
/**
|
|
43
51
|
* A visual progress bar component that shows completion of a task, range, or
|
|
44
52
|
* metric.
|
|
@@ -55,7 +63,7 @@ var ProgressStyled = styled(ProgressBase).attrs(function (p) { return ({
|
|
|
55
63
|
* <Progress value={45} numbered color="#00c2a8" thickness={8} />
|
|
56
64
|
* ```
|
|
57
65
|
*/
|
|
58
|
-
])), function (p) { return p.thickness; }, function (p) { return p.
|
|
66
|
+
])), function (p) { return p.thickness; }, function (p) { return p.width && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["width: ", ";"], ["width: ", ";"])), p.width); }, function (p) { return p.padded && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["margin: 10px;"], ["margin: 10px;"]))); }, function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.thickness / 2; }, FillInner, function (p) { var _a; return (_a = p.color) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; });
|
|
59
67
|
/**
|
|
60
68
|
* A visual progress bar component that shows completion of a task, range, or
|
|
61
69
|
* metric.
|
|
@@ -78,4 +86,4 @@ var Progress = function (_a) {
|
|
|
78
86
|
};
|
|
79
87
|
Progress.displayName = 'Progress';
|
|
80
88
|
export { Progress };
|
|
81
|
-
var templateObject_1, templateObject_2, templateObject_3;
|
|
89
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
|
package/package.json
CHANGED
|
@@ -13,9 +13,10 @@ interface IDialogProps {
|
|
|
13
13
|
open?: boolean;
|
|
14
14
|
/**
|
|
15
15
|
* Override standard dialog width of 600 pixels.
|
|
16
|
+
* Can be a number (pixels) or a CSS string (e.g., "90vw").
|
|
16
17
|
* @default 600
|
|
17
18
|
*/
|
|
18
|
-
width?: number;
|
|
19
|
+
width?: number | string;
|
|
19
20
|
/**
|
|
20
21
|
* If set to false, then the Dialog cannot be closed by clicking
|
|
21
22
|
* outside of it. This is helpful when a Dialog is executing an
|
|
@@ -11,6 +11,16 @@ var DialogWindowBase = React.forwardRef(function (props, ref) {
|
|
|
11
11
|
};
|
|
12
12
|
return (React.createElement("div", { className: "".concat(props.className, " ").concat(props.status), ref: ref, onKeyDown: handleKeyDown }, props.children));
|
|
13
13
|
});
|
|
14
|
-
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: ", "
|
|
14
|
+
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: ", ";\n @media (max-width: ", "px) {\n width: ", ";\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: ", ";\n @media (max-width: ", "px) {\n width: ", ";\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.bodyMedium; }, function (p) { return p.inverted ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) {
|
|
15
|
+
if (!p.width)
|
|
16
|
+
return '600px';
|
|
17
|
+
return typeof p.width === 'string' ? p.width : "".concat(p.width, "px");
|
|
18
|
+
}, function (p) { return p.theme.screen.small; }, function (p) {
|
|
19
|
+
if (!p.width)
|
|
20
|
+
return '400px';
|
|
21
|
+
if (typeof p.width === 'string')
|
|
22
|
+
return p.width;
|
|
23
|
+
return p.width > 400 ? '400px' : "".concat(p.width, "px");
|
|
24
|
+
});
|
|
15
25
|
export { DialogWindow };
|
|
16
26
|
var templateObject_1, templateObject_2;
|