@longline/aqua-ui 1.0.95 → 1.0.97
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.
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
interface IProps {
|
|
3
|
+
/** @ignore */
|
|
4
|
+
className?: string;
|
|
5
|
+
/** @ignore */
|
|
6
|
+
children?: React.ReactNode;
|
|
7
|
+
/**
|
|
8
|
+
* DragBar height in pixels.
|
|
9
|
+
* @default 40
|
|
10
|
+
*/
|
|
11
|
+
height?: number;
|
|
12
|
+
/**
|
|
13
|
+
* If set, navigation buttons are shown.
|
|
14
|
+
* @default false
|
|
15
|
+
*/
|
|
16
|
+
navigation?: boolean;
|
|
17
|
+
/**
|
|
18
|
+
* Number of pixels scrolled when navigation button is clicked.
|
|
19
|
+
* @default 100
|
|
20
|
+
*/
|
|
21
|
+
navigationDelta?: number;
|
|
22
|
+
/**
|
|
23
|
+
* Scroll behavior.
|
|
24
|
+
* @default smooth
|
|
25
|
+
*/
|
|
26
|
+
behavior?: ScrollBehavior;
|
|
27
|
+
}
|
|
28
|
+
/**
|
|
29
|
+
* A `DragBar` presents its content in a horizontally scrollable container,
|
|
30
|
+
* without a scrollbar. The contents can be dragged with the mouse. Optionally,
|
|
31
|
+
* there can be navigation arrows. When an element in the `DragBar` is clicked,
|
|
32
|
+
* it is scrolled into view.
|
|
33
|
+
*
|
|
34
|
+
* Scrolling is smooth by default, but can be set to `instant`. Navigation
|
|
35
|
+
* arrows scroll by `100px`, but this can be configured.
|
|
36
|
+
*
|
|
37
|
+
* A `DragBar` fills all horizontal space available to it. Its `height` is
|
|
38
|
+
* set in pixels.
|
|
39
|
+
*/
|
|
40
|
+
declare const DragBar: ({ height, navigation, navigationDelta, behavior, ...props }: IProps) => React.JSX.Element;
|
|
41
|
+
export { DragBar };
|
|
@@ -0,0 +1,119 @@
|
|
|
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
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
17
|
+
var t = {};
|
|
18
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
19
|
+
t[p] = s[p];
|
|
20
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
21
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
22
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
23
|
+
t[p[i]] = s[p[i]];
|
|
24
|
+
}
|
|
25
|
+
return t;
|
|
26
|
+
};
|
|
27
|
+
import * as React from 'react';
|
|
28
|
+
import styled from 'styled-components';
|
|
29
|
+
import { Icon } from '../../controls/Icon';
|
|
30
|
+
import { SVG } from '../../svg';
|
|
31
|
+
var DragBarBase = function (props) {
|
|
32
|
+
var scrollerRef = React.useRef(null);
|
|
33
|
+
var posRef = React.useRef({ top: 0, left: 0, x: 0, y: 0 });
|
|
34
|
+
var handleMouseUp = function () {
|
|
35
|
+
// Mouse-up event removes itself and move-event when mouse is released:
|
|
36
|
+
document.removeEventListener('mousemove', handleMouseMove);
|
|
37
|
+
document.removeEventListener('mouseup', handleMouseUp);
|
|
38
|
+
scrollerRef.current.style.cursor = 'auto';
|
|
39
|
+
};
|
|
40
|
+
var handleMouseMove = function (e) {
|
|
41
|
+
// How far the mouse has been moved
|
|
42
|
+
var dx = e.clientX - posRef.current.x;
|
|
43
|
+
var dy = e.clientY - posRef.current.y;
|
|
44
|
+
// Scroll the element
|
|
45
|
+
scrollerRef.current.scrollTop = posRef.current.top - dy;
|
|
46
|
+
scrollerRef.current.scrollLeft = posRef.current.left - dx;
|
|
47
|
+
};
|
|
48
|
+
var handleMouseDown = function (e) {
|
|
49
|
+
posRef.current = {
|
|
50
|
+
// The current scroll
|
|
51
|
+
left: scrollerRef.current.scrollLeft,
|
|
52
|
+
top: scrollerRef.current.scrollTop,
|
|
53
|
+
// Get the current mouse position
|
|
54
|
+
x: e.clientX,
|
|
55
|
+
y: e.clientY,
|
|
56
|
+
};
|
|
57
|
+
scrollerRef.current.style.cursor = 'grab';
|
|
58
|
+
document.addEventListener('mousemove', handleMouseMove);
|
|
59
|
+
document.addEventListener('mouseup', handleMouseUp);
|
|
60
|
+
};
|
|
61
|
+
var handleNavigate = function (delta) {
|
|
62
|
+
scrollerRef.current.scrollBy({
|
|
63
|
+
left: delta,
|
|
64
|
+
behavior: props.behavior
|
|
65
|
+
});
|
|
66
|
+
};
|
|
67
|
+
var handleClickItem = function (e) {
|
|
68
|
+
// Scroll item into view smoothly:
|
|
69
|
+
var elem = e.target;
|
|
70
|
+
elem.scrollIntoView({
|
|
71
|
+
behavior: props.behavior
|
|
72
|
+
});
|
|
73
|
+
};
|
|
74
|
+
return (React.createElement("div", { className: props.className },
|
|
75
|
+
props.navigation && React.createElement(NavButton, { onClick: function () { return handleNavigate(-props.navigationDelta); } },
|
|
76
|
+
React.createElement(Icon, { url: SVG.Icons.Chevron })),
|
|
77
|
+
React.createElement(Scroller, { onMouseDown: handleMouseDown, ref: scrollerRef },
|
|
78
|
+
React.createElement(Content, null, React.Children.map(props.children, function (c) {
|
|
79
|
+
return React.createElement(Item, { onClick: handleClickItem }, React.cloneElement(c));
|
|
80
|
+
}))),
|
|
81
|
+
props.navigation && React.createElement(NavButton, { onClick: function () { return handleNavigate(props.navigationDelta); } },
|
|
82
|
+
React.createElement(Icon, { rotated: 180, url: SVG.Icons.Chevron }))));
|
|
83
|
+
};
|
|
84
|
+
var Item = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 100%;\n"], ["\n height: 100%;\n"])));
|
|
85
|
+
var Content = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n // Content:\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 100%;\n"], ["\n // Content:\n display: flex;\n flex-direction: row;\n align-items: center;\n height: 100%;\n"])));
|
|
86
|
+
var NavButton = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 100%;\n cursor: pointer;\n background-color: ", ";\n transition: background-color ease-in-out 100ms;\n outline: none;\n user-select: none;\n // Borders:\n border-color: ", ";\n &:first-child {\n border-right-width: 1px;\n border-right-style: solid;\n }\n &:last-child {\n border-left-width: 1px;\n border-left-style: solid;\n } \n // Hover:\n &:hover {\n background-color: ", ";\n }\n // Icon:\n svg {\n fill: ", ";\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 100%;\n cursor: pointer;\n background-color: ", ";\n transition: background-color ease-in-out 100ms;\n outline: none;\n user-select: none;\n // Borders:\n border-color: ", ";\n &:first-child {\n border-right-width: 1px;\n border-right-style: solid;\n }\n &:last-child {\n border-left-width: 1px;\n border-left-style: solid;\n } \n // Hover:\n &:hover {\n background-color: ", ";\n }\n // Icon:\n svg {\n fill: ", ";\n }\n"])), function (p) { return p.theme.colors.primary[5]; }, function (p) { return p.theme.colors.primary[4]; }, function (p) { return p.theme.colors.primary[4]; }, function (p) { return p.theme.colors.primary[1]; });
|
|
87
|
+
var Scroller = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n flex: 1;\n // Hide scrollbar:\n overflow: hidden; \n"], ["\n flex: 1;\n // Hide scrollbar:\n overflow: hidden; \n"])));
|
|
88
|
+
var DragBarStyled = styled(DragBarBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n // Fill all available space:\n position: relative;\n width: 100%;\n height: ", "px;\n\n background-color: ", "; \n\n // Buttons and scroller are flexed (scroller uses flex 1):\n display: flex;\n flex-direction: row;\n"], ["\n // Fill all available space:\n position: relative;\n width: 100%;\n height: ", "px;\n\n background-color: ", "; \n\n // Buttons and scroller are flexed (scroller uses flex 1):\n display: flex;\n flex-direction: row;\n"
|
|
89
|
+
/**
|
|
90
|
+
* A `DragBar` presents its content in a horizontally scrollable container,
|
|
91
|
+
* without a scrollbar. The contents can be dragged with the mouse. Optionally,
|
|
92
|
+
* there can be navigation arrows. When an element in the `DragBar` is clicked,
|
|
93
|
+
* it is scrolled into view.
|
|
94
|
+
*
|
|
95
|
+
* Scrolling is smooth by default, but can be set to `instant`. Navigation
|
|
96
|
+
* arrows scroll by `100px`, but this can be configured.
|
|
97
|
+
*
|
|
98
|
+
* A `DragBar` fills all horizontal space available to it. Its `height` is
|
|
99
|
+
* set in pixels.
|
|
100
|
+
*/
|
|
101
|
+
])), function (p) { return p.height; }, function (p) { return p.theme.colors.primary[5]; });
|
|
102
|
+
/**
|
|
103
|
+
* A `DragBar` presents its content in a horizontally scrollable container,
|
|
104
|
+
* without a scrollbar. The contents can be dragged with the mouse. Optionally,
|
|
105
|
+
* there can be navigation arrows. When an element in the `DragBar` is clicked,
|
|
106
|
+
* it is scrolled into view.
|
|
107
|
+
*
|
|
108
|
+
* Scrolling is smooth by default, but can be set to `instant`. Navigation
|
|
109
|
+
* arrows scroll by `100px`, but this can be configured.
|
|
110
|
+
*
|
|
111
|
+
* A `DragBar` fills all horizontal space available to it. Its `height` is
|
|
112
|
+
* set in pixels.
|
|
113
|
+
*/
|
|
114
|
+
var DragBar = function (_a) {
|
|
115
|
+
var _b = _a.height, height = _b === void 0 ? 40 : _b, _c = _a.navigation, navigation = _c === void 0 ? false : _c, _d = _a.navigationDelta, navigationDelta = _d === void 0 ? 100 : _d, _e = _a.behavior, behavior = _e === void 0 ? 'smooth' : _e, props = __rest(_a, ["height", "navigation", "navigationDelta", "behavior"]);
|
|
116
|
+
return React.createElement(DragBarStyled, __assign({ height: height, navigation: navigation, navigationDelta: navigationDelta, behavior: behavior }, props));
|
|
117
|
+
};
|
|
118
|
+
export { DragBar };
|
|
119
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './DragBar';
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './DragBar';
|
|
@@ -72,8 +72,13 @@ var ClusterMarkerBase = function (props) {
|
|
|
72
72
|
});
|
|
73
73
|
return rings;
|
|
74
74
|
};
|
|
75
|
+
var handleClick = function (e) {
|
|
76
|
+
e.stopPropagation();
|
|
77
|
+
if (props.onClick)
|
|
78
|
+
props.onClick();
|
|
79
|
+
};
|
|
75
80
|
// Radius is passed in as inline style, to avoid generating 1000s of styled-component classes.
|
|
76
|
-
return (React.createElement("div", { className: props.className, style: { width: "".concat(props.radius * 2, "px"), height: "".concat(props.radius * 2, "px") }, onClick:
|
|
81
|
+
return (React.createElement("div", { className: props.className, style: { width: "".concat(props.radius * 2, "px"), height: "".concat(props.radius * 2, "px") }, onClick: handleClick },
|
|
77
82
|
props.ringValues &&
|
|
78
83
|
React.createElement("svg", null, renderValueRings()),
|
|
79
84
|
React.createElement("span", null,
|