@longline/aqua-ui 1.0.124 → 1.0.126
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.
|
@@ -4,14 +4,12 @@ interface IProps {
|
|
|
4
4
|
className?: string;
|
|
5
5
|
/** @ignore */
|
|
6
6
|
children?: React.ReactNode;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
/** Should Hint appear to left or right of parent? */
|
|
10
|
-
side: 'left' | 'right';
|
|
7
|
+
styles: any;
|
|
8
|
+
attributes: any;
|
|
11
9
|
}
|
|
12
10
|
/**
|
|
13
11
|
* A Hint appears next to a parent control, at the specified side (left or
|
|
14
12
|
* right), with an optional offset.
|
|
15
13
|
*/
|
|
16
|
-
declare const Hint:
|
|
14
|
+
declare const Hint: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLDivElement>>;
|
|
17
15
|
export { Hint, IProps as IHintProps };
|
|
@@ -14,21 +14,21 @@ var __assign = (this && this.__assign) || function () {
|
|
|
14
14
|
return __assign.apply(this, arguments);
|
|
15
15
|
};
|
|
16
16
|
import * as React from 'react';
|
|
17
|
-
import styled
|
|
17
|
+
import styled from 'styled-components';
|
|
18
18
|
var HEIGHT = 24; // Hint height (px)
|
|
19
|
-
var HintBase = function (props) {
|
|
20
|
-
return React.createElement("div", { className: props.className }, props.children);
|
|
21
|
-
};
|
|
22
|
-
var HintStyled = styled(HintBase)(
|
|
19
|
+
var HintBase = React.forwardRef(function (props, ref) {
|
|
20
|
+
return React.createElement("div", __assign({ ref: ref, style: props.styles }, props.attributes, { className: props.className }), props.children);
|
|
21
|
+
});
|
|
22
|
+
var HintStyled = styled(HintBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n height: ", "px;\n padding: 0 12px 0 12px;\n margin: 0 12 0 12px;\n font: ", ";\n z-index: 1000;\n\n // Border:\n border-radius: ", "px;\n\n // Color:\n background-color: ", ";\n color: ", ";\n white-space: nowrap;\n pointer-events: none;\n user-select: none;\n transition: opacity ease-in-out ", "ms;\n opacity: 0;\n\n // Content:\n display: flex;\n align-items: center;\n gap: 4px;\n"], ["\n position: absolute;\n height: ", "px;\n padding: 0 12px 0 12px;\n margin: 0 12 0 12px;\n font: ", ";\n z-index: 1000;\n\n // Border:\n border-radius: ", "px;\n\n // Color:\n background-color: ", ";\n color: ", ";\n white-space: nowrap;\n pointer-events: none;\n user-select: none;\n transition: opacity ease-in-out ", "ms;\n opacity: 0;\n\n // Content:\n display: flex;\n align-items: center;\n gap: 4px;\n"
|
|
23
23
|
/**
|
|
24
24
|
* A Hint appears next to a parent control, at the specified side (left or
|
|
25
25
|
* right), with an optional offset.
|
|
26
26
|
*/
|
|
27
|
-
])),
|
|
27
|
+
])), HEIGHT, function (p) { return p.theme.font.labelSmall; }, function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.animation.duration * 3; });
|
|
28
28
|
/**
|
|
29
29
|
* A Hint appears next to a parent control, at the specified side (left or
|
|
30
30
|
* right), with an optional offset.
|
|
31
31
|
*/
|
|
32
|
-
var Hint = function (
|
|
32
|
+
var Hint = React.forwardRef(function (props, ref) { return React.createElement(HintStyled, __assign({ ref: ref }, props)); });
|
|
33
33
|
export { Hint };
|
|
34
|
-
var templateObject_1
|
|
34
|
+
var templateObject_1;
|
|
@@ -26,28 +26,51 @@ 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
|
+
import { createPortal } from 'react-dom';
|
|
30
|
+
import { usePopper } from 'react-popper';
|
|
29
31
|
import { Hint } from './Hint';
|
|
30
32
|
import { MapControl } from '../MapControl';
|
|
31
33
|
var MapButtonBase = function (props) {
|
|
34
|
+
var _a = React.useState(null), wrapperRef = _a[0], setWrapperRef = _a[1];
|
|
35
|
+
var _b = React.useState(null), hintRef = _b[0], setHintRef = _b[1];
|
|
32
36
|
var handleClick = function (e) {
|
|
33
37
|
if (props.disabled)
|
|
34
38
|
return;
|
|
35
39
|
if (props.onClick)
|
|
36
40
|
props.onClick(e);
|
|
37
41
|
};
|
|
42
|
+
var handleMouseEnter = function () {
|
|
43
|
+
if (hintRef)
|
|
44
|
+
hintRef.style.opacity = "1";
|
|
45
|
+
};
|
|
46
|
+
var handleMouseLeave = function () {
|
|
47
|
+
if (hintRef)
|
|
48
|
+
hintRef.style.opacity = "0";
|
|
49
|
+
};
|
|
50
|
+
var _c = usePopper(wrapperRef, hintRef, {
|
|
51
|
+
placement: 'left',
|
|
52
|
+
strategy: 'fixed',
|
|
53
|
+
modifiers: [
|
|
54
|
+
{
|
|
55
|
+
name: 'offset',
|
|
56
|
+
options: {
|
|
57
|
+
offset: [0, 8],
|
|
58
|
+
},
|
|
59
|
+
}
|
|
60
|
+
]
|
|
61
|
+
}), styles = _c.styles, attributes = _c.attributes, update = _c.update;
|
|
38
62
|
var renderButton = function () {
|
|
39
|
-
return React.createElement("div", { className: props.className, tabIndex: props.disabled ? -1 : 0, onClick: handleClick },
|
|
63
|
+
return React.createElement("div", { ref: setWrapperRef, className: props.className, tabIndex: props.disabled ? -1 : 0, onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
|
|
40
64
|
React.createElement(Button, { "$grouped": props.grouped, "$size": props.size, "$disabled": props.disabled, "$active": props.active }, props.children),
|
|
41
65
|
props.hint &&
|
|
42
|
-
React.createElement(Hint, {
|
|
66
|
+
createPortal(React.createElement(Hint, { ref: setHintRef, styles: styles.popper, attributes: __assign({}, attributes.popper) }, props.hint), document.body));
|
|
43
67
|
};
|
|
44
68
|
if (props.grouped)
|
|
45
69
|
return renderButton();
|
|
46
70
|
return React.createElement(MapControl, { x: props.x, y: props.y }, renderButton());
|
|
47
71
|
};
|
|
48
|
-
// const Teardrop = styled.svg<{ $disabled: boolean }>`
|
|
49
72
|
var Button = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject([" \n width: 100%;\n height: 100%;\n cursor: pointer;\n background-color: ", ";\n\n // Border:\n border-radius: 4px;\n\n ", "\n\n svg {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n padding: 8px;\n fill: ", ";\n transition: fill ease-in-out ", "ms;\n }\n\n // Hover:\n div:hover > & {\n background-color: ", ";\n }\n\n ", "\n\n // Disabled:\n ", "\n"], [" \n width: 100%;\n height: 100%;\n cursor: pointer;\n background-color: ", ";\n\n // Border:\n border-radius: 4px;\n\n ", "\n\n svg {\n box-sizing: border-box;\n width: 100%;\n height: 100%;\n padding: 8px;\n fill: ", ";\n transition: fill ease-in-out ", "ms;\n }\n\n // Hover:\n div:hover > & {\n background-color: ", ";\n }\n\n ", "\n\n // Disabled:\n ", "\n"])), function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.$grouped && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n div:first-child > & {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n div:not(:last-child):not(:first-child) > & {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n div:last-child > & {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n "], ["\n div:first-child > & {\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n div:not(:last-child):not(:first-child) > & {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n border-bottom-left-radius: 0;\n border-bottom-right-radius: 0;\n }\n div:last-child > & {\n border-top-left-radius: 0;\n border-top-right-radius: 0;\n }\n "]))); }, function (p) { return p.theme.colors.neutral[10]; }, function (p) { return p.theme.animation.duration; }, function (p) { return p.theme.colors.neutral[95]; }, function (p) { return p.$active && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background-color: ", " !important;\n svg {\n fill: ", ";\n }\n "], ["\n background-color: ", " !important;\n svg {\n fill: ", ";\n }\n "])), function (p) { return p.theme.colors.accent; }, function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.$disabled && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n cursor: default;\n background-color: ", ";\n svg { fill: ", "; } \n "], ["\n cursor: default;\n background-color: ", ";\n svg { fill: ", "; } \n "])), function (p) { return p.theme.colors.neutral[50]; }, function (p) { return p.theme.colors.primary[3]; }); });
|
|
50
|
-
var MapButtonStyled = styled(MapButtonBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: relative;\n pointer-events: all;\n\n // Size control:\n width: ", "px;\n height: ", "px;\n\n outline: 0;\n user-select: none;\n\n // Grouped button has a separator border (though not the last button in the group):\n ", "\n\n //
|
|
73
|
+
var MapButtonStyled = styled(MapButtonBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n position: relative;\n pointer-events: all;\n\n // Size control:\n width: ", "px;\n height: ", "px;\n\n outline: 0;\n user-select: none;\n\n // Grouped button has a separator border (though not the last button in the group):\n ", "\n\n // Disabled mode:\n ", " \n"], ["\n position: relative;\n pointer-events: all;\n\n // Size control:\n width: ", "px;\n height: ", "px;\n\n outline: 0;\n user-select: none;\n\n // Grouped button has a separator border (though not the last button in the group):\n ", "\n\n // Disabled mode:\n ", " \n"
|
|
51
74
|
/**
|
|
52
75
|
* A `MapButton` is a square button to be used on a Mapbox map. It must
|
|
53
76
|
* be provided with the `ViewState` by the underlying `Map`.
|