@longline/aqua-ui 1.0.340 → 1.0.341
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/controls/CircularProgress/CircularProgress.d.ts +2 -2
- package/controls/Gradient/Gradient.d.ts +1 -1
- package/controls/Gradient/Gradient.js +13 -2
- package/controls/ListView/ListView.js +4 -4
- package/controls/Mouse/Mouse.d.ts +4 -1
- package/controls/Mouse/Mouse.js +8 -8
- package/package.json +1 -1
|
@@ -24,8 +24,8 @@ interface ICircularProgressProps extends ITestable {
|
|
|
24
24
|
*/
|
|
25
25
|
strokeWidth?: number;
|
|
26
26
|
/**
|
|
27
|
-
*
|
|
28
|
-
* readers alongside the percentage value.
|
|
27
|
+
* Optional accessible label describing what is progressing. Announced by
|
|
28
|
+
* screen readers alongside the percentage value.
|
|
29
29
|
*/
|
|
30
30
|
label?: string;
|
|
31
31
|
/**
|
|
@@ -27,6 +27,18 @@ 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 DEFAULT_THICKNESS = 5;
|
|
30
|
+
var MIN_THICKNESS = 1;
|
|
31
|
+
var MAX_THICKNESS = 50;
|
|
32
|
+
//
|
|
33
|
+
// Clamp the gradient thickness (in pixels) to 1..50. Guards against
|
|
34
|
+
// empty/negative/NaN/runaway values.
|
|
35
|
+
//
|
|
36
|
+
var clampThickness = function (value) {
|
|
37
|
+
var n = Number(value);
|
|
38
|
+
if (!Number.isFinite(n))
|
|
39
|
+
return DEFAULT_THICKNESS;
|
|
40
|
+
return Math.max(MIN_THICKNESS, Math.min(MAX_THICKNESS, n));
|
|
41
|
+
};
|
|
30
42
|
var GradientBase = function (props) {
|
|
31
43
|
// Runtime guard:
|
|
32
44
|
if (!Array.isArray(props.gradientStops) || props.gradientStops.length === 0) {
|
|
@@ -41,8 +53,7 @@ var generateGradient = function (stops) {
|
|
|
41
53
|
: "linear-gradient(to right, ".concat(stops.map(function (gs) { return "".concat(gs.color, " ").concat(gs.pos * 100, "%"); }).join(', '), ")");
|
|
42
54
|
};
|
|
43
55
|
var GradientStyled = styled(GradientBase).attrs(function (p) {
|
|
44
|
-
var
|
|
45
|
-
var thickness = (_a = p.thickness) !== null && _a !== void 0 ? _a : DEFAULT_THICKNESS;
|
|
56
|
+
var thickness = clampThickness(p.thickness);
|
|
46
57
|
var background = p.checkered
|
|
47
58
|
? "".concat(generateGradient(p.gradientStops), ", repeating-conic-gradient(#808080 0% 25%, #fff 0% 50%) 50% / 10px 10px")
|
|
48
59
|
: generateGradient(p.gradientStops);
|
|
@@ -75,11 +75,11 @@ var ListViewBase = function (props) {
|
|
|
75
75
|
// Don't sort if no data is available yet:
|
|
76
76
|
if (!Array.isArray(props.data))
|
|
77
77
|
return;
|
|
78
|
-
// Find column corresponding to sort key.
|
|
78
|
+
// Find the column corresponding to the current sort key. If none matches
|
|
79
|
+
// (e.g. no sortable column and no defaultSort), show the data unsorted
|
|
80
|
+
// rather than rendering nothing.
|
|
79
81
|
var sortColumn = columns.find(function (c) { return c.sort === sort; });
|
|
80
|
-
|
|
81
|
-
return;
|
|
82
|
-
setData(sortItems(props.data, sort, reverse, sortColumn.sortValue));
|
|
82
|
+
setData(sortColumn ? sortItems(props.data, sort, reverse, sortColumn.sortValue) : props.data);
|
|
83
83
|
}, [props.data, sort, reverse, columns]);
|
|
84
84
|
// If children change, then update columns state.
|
|
85
85
|
React.useEffect(function () {
|
|
@@ -69,6 +69,9 @@ interface IMouseProps extends ITestable {
|
|
|
69
69
|
* | `accent` | Wheel highlight color (default: theme primary) |
|
|
70
70
|
* | `size` | Height in pixels (max 100px) |
|
|
71
71
|
*/
|
|
72
|
-
declare const Mouse:
|
|
72
|
+
declare const Mouse: {
|
|
73
|
+
({ left, right, wheel, ...props }: IMouseProps): React.JSX.Element;
|
|
74
|
+
displayName: string;
|
|
75
|
+
};
|
|
73
76
|
export { Mouse };
|
|
74
77
|
export type { IMouseProps };
|
package/controls/Mouse/Mouse.js
CHANGED
|
@@ -26,14 +26,18 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
26
26
|
};
|
|
27
27
|
import * as React from 'react';
|
|
28
28
|
import styled, { css } from 'styled-components';
|
|
29
|
-
|
|
29
|
+
// The SVG render is pure and depends only on props, so it is wrapped in
|
|
30
|
+
// React.memo to avoid unnecessary re-renders. The memo is kept on this inner
|
|
31
|
+
// component (rather than the exported Mouse) so the exported component stays a
|
|
32
|
+
// plain function that Storybook's react-docgen-typescript can read props from.
|
|
33
|
+
var MouseBase = React.memo(function (props) {
|
|
30
34
|
return (React.createElement("svg", { "data-testid": props['data-testid'] || "Mouse", className: props.className, style: props.style, viewBox: "3 0 22 29", xmlns: "http://www.w3.org/2000/svg", "aria-hidden": "true" // Hide from assistive tech (for non-interactive icons)
|
|
31
35
|
, focusable: "false" },
|
|
32
36
|
React.createElement("path", { d: "M14 1.75623C8.69307 1.75623 4.375 6.07429 4.375 11.3812V18.3812C4.375 23.6882 8.69307 28.0062 14 28.0062C19.3069 28.0062 23.625 23.6882 23.625 18.3812V11.3812C23.625 6.07429 19.3069 1.75623 14 1.75623ZM21.875 11.3812V12.2562H16.625V10.5062C16.625 9.36653 15.8911 8.40403 14.875 8.04199V3.55756C18.806 3.99506 21.875 7.33546 21.875 11.3812ZM14 9.63123C14.4834 9.63123 14.875 10.0239 14.875 10.5062V13.1312C14.875 13.6136 14.4834 14.0062 14 14.0062C13.5166 14.0062 13.125 13.6136 13.125 13.1312V10.5062C13.125 10.0239 13.5166 9.63123 14 9.63123ZM6.125 11.3812C6.125 7.33546 9.19403 3.99389 13.125 3.55779V8.04223C12.1089 8.40427 11.375 9.36677 11.375 10.5065V12.2565H6.125V11.3812ZM14 26.2562C9.65767 26.2562 6.125 22.7236 6.125 18.3812V14.0062H11.5358C11.8978 15.0223 12.8603 15.7562 14 15.7562C15.1397 15.7562 16.1022 15.0223 16.4642 14.0062H21.875V18.3812C21.875 22.7236 18.3423 26.2562 14 26.2562Z" }),
|
|
33
37
|
props.left && React.createElement("path", { className: "left", d: "M13.125 3.55798C9.19403 3.99408 6.125 7.33565 6.125 11.3814V12.2567H11.375V10.5067C11.375 9.36696 12.1089 8.40446 13.125 8.04242V3.55798Z" }),
|
|
34
38
|
props.right && React.createElement("path", { className: "right", d: "M21.875 12.2562V11.3812C21.875 7.33539 18.806 3.995 14.875 3.5575V8.04193C15.8911 8.40397 16.625 9.36647 16.625 10.5062V12.2562H21.875Z" }),
|
|
35
39
|
props.wheel && React.createElement("path", { className: "wheel", d: "M15.875 10.5062C15.875 9.47241 15.0365 8.63123 14 8.63123C12.9635 8.63123 12.125 9.47241 12.125 10.5062V13.1312C12.125 14.165 12.9635 15.0062 14 15.0062C15.0365 15.0062 15.875 14.165 15.875 13.1312V10.5062Z" })));
|
|
36
|
-
};
|
|
40
|
+
});
|
|
37
41
|
var MouseStyled = styled(MouseBase).attrs(function (p) {
|
|
38
42
|
var _a;
|
|
39
43
|
return ({
|
|
@@ -73,8 +77,6 @@ var MouseStyled = styled(MouseBase).attrs(function (p) {
|
|
|
73
77
|
* | `accent` | Wheel highlight color (default: theme primary) |
|
|
74
78
|
* | `size` | Height in pixels (max 100px) |
|
|
75
79
|
*/
|
|
76
|
-
// Component is pure and based solely on props, so it is wrapped in React.memo
|
|
77
|
-
// to avoid unnecessary re-renders.
|
|
78
80
|
])), function (p) { return p.size && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: ", "px;\n "], ["\n height: ", "px;\n "])), p.size); }, function (p) { return p.$color; }, function (p) { return p.$color; }, function (p) { return p.$color; }, function (p) { var _a; return (_a = p.accent) !== null && _a !== void 0 ? _a : p.theme.colors.primary[1]; });
|
|
79
81
|
/**
|
|
80
82
|
* An SVG mouse icon with interactive button highlighting.
|
|
@@ -109,12 +111,10 @@ var MouseStyled = styled(MouseBase).attrs(function (p) {
|
|
|
109
111
|
* | `accent` | Wheel highlight color (default: theme primary) |
|
|
110
112
|
* | `size` | Height in pixels (max 100px) |
|
|
111
113
|
*/
|
|
112
|
-
|
|
113
|
-
// to avoid unnecessary re-renders.
|
|
114
|
-
var Mouse = React.memo(function (_a) {
|
|
114
|
+
var Mouse = function (_a) {
|
|
115
115
|
var _b = _a.left, left = _b === void 0 ? false : _b, _c = _a.right, right = _c === void 0 ? false : _c, _d = _a.wheel, wheel = _d === void 0 ? false : _d, props = __rest(_a, ["left", "right", "wheel"]);
|
|
116
116
|
return React.createElement(MouseStyled, __assign({ left: left, right: right, wheel: wheel }, props));
|
|
117
|
-
}
|
|
117
|
+
};
|
|
118
118
|
Mouse.displayName = "Mouse";
|
|
119
119
|
export { Mouse };
|
|
120
120
|
var templateObject_1, templateObject_2;
|