@longline/aqua-ui 1.0.130 → 1.0.132
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,7 +30,7 @@ import styled, { css } from 'styled-components';
|
|
|
30
30
|
import { useViewState } from '../../map/Map';
|
|
31
31
|
var DockableBase = function (props) {
|
|
32
32
|
// Reference to Dockable div:
|
|
33
|
-
var
|
|
33
|
+
var _a = React.useState(null), containerRef = _a[0], setContainerRef = _a[1];
|
|
34
34
|
// Using the ViewState will cause this component to be rerendered when the
|
|
35
35
|
// map moves:
|
|
36
36
|
useViewState();
|
|
@@ -39,10 +39,10 @@ var DockableBase = function (props) {
|
|
|
39
39
|
var mapWidth = map.current.getContainer().clientWidth;
|
|
40
40
|
var mapHeight = map.current.getContainer().clientHeight;
|
|
41
41
|
// Convert Dockable's lat/lng to pixel coordinates:
|
|
42
|
-
var
|
|
42
|
+
var _b = map.current.project([props.longitude, props.latitude]), x = _b.x, y = _b.y;
|
|
43
43
|
// Get size of Dockable:
|
|
44
|
-
var myWidth = containerRef
|
|
45
|
-
var myHeight = containerRef
|
|
44
|
+
var myWidth = containerRef ? containerRef.clientWidth : 0;
|
|
45
|
+
var myHeight = containerRef ? containerRef.clientHeight : 0;
|
|
46
46
|
// Is Dockable currently offscreen (boolean)?
|
|
47
47
|
var offsetX = props.offsetX;
|
|
48
48
|
var offsetY = props.offsetY;
|
|
@@ -73,7 +73,7 @@ var DockableBase = function (props) {
|
|
|
73
73
|
style.left = "".concat(x + offsetX, "px");
|
|
74
74
|
style.top = "".concat(y + offsetY, "px");
|
|
75
75
|
}
|
|
76
|
-
return (React.createElement("div", { style: style, className: "".concat(props.className, " ").concat(offscreen ? 'offscreen' : ''), ref:
|
|
76
|
+
return (React.createElement("div", { style: style, className: "".concat(props.className, " ").concat(offscreen ? 'offscreen' : ''), ref: setContainerRef }, props.children));
|
|
77
77
|
};
|
|
78
78
|
var DockableStyled = styled(DockableBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: white;\n z-index: ", ";\n ", "\n"], ["\n color: white;\n z-index: ", ";\n ", "\n"
|
|
79
79
|
/**
|
|
@@ -52,7 +52,7 @@ var TableBase = function (_a) {
|
|
|
52
52
|
},
|
|
53
53
|
}, {
|
|
54
54
|
name: 'flip',
|
|
55
|
-
enabled:
|
|
55
|
+
enabled: false
|
|
56
56
|
}, {
|
|
57
57
|
name: 'preventOverflow',
|
|
58
58
|
options: {
|
|
@@ -93,7 +93,7 @@ var TableBase = function (_a) {
|
|
|
93
93
|
React.createElement(Body, __assign({ ref: setActiveRef }, props, { columns: activeColumns })))),
|
|
94
94
|
props.total && Array.isArray(props.data) && React.createElement(Total, { value: props.data.length, singular: props.singular, plural: props.plural })));
|
|
95
95
|
};
|
|
96
|
-
var AuxHolder = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n z-index: 1;\n"], ["\n z-index: 1;\n"])));
|
|
96
|
+
var AuxHolder = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n z-index: 1;\n pointer-events: none;\n // Children must turn pointer-events back on.\n"], ["\n z-index: 1;\n pointer-events: none;\n // Children must turn pointer-events back on.\n"])));
|
|
97
97
|
var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n // Size and position. A table fills its container.\n position: relative;\n width: 100%;\n height: 100%;\n background-color: ", ";\n"], ["\n // Size and position. A table fills its container.\n position: relative;\n width: 100%;\n height: 100%;\n background-color: ", ";\n"])), function (p) { return p.$dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; });
|
|
98
98
|
var Inner = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n overflow-y: auto;\n"], ["\n position: absolute;\n left: 0;\n top: 0;\n right: 0;\n bottom: 0;\n overflow-y: auto;\n"])));
|
|
99
99
|
var TableStyled = styled(TableBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n border-collapse: collapse; \n table-layout: fixed; \n padding-bottom: 48px;\n\n // Grid:\n display: grid;\n grid-template-rows: ", "px;\n grid-auto-rows: ", "px;\n\n // Convert column widths a string suitable for grid template:\n grid-template-columns: ", ";\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n // <thead>, <tbody> and <tr> must not participate in CSS grid:\n tr, tbody, thead { display: contents; }\n\n // <tr>,<th>,<td> must be styled here, once, because otherwise \n // styled-components would create too many classes.\n tr {\n position: relative;\n }\n tr.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for both TD and TH:\n th, td {\n position: relative;\n box-sizing: border-box;\n white-space: nowrap;\n text-align: left;\n user-select: none;\n outline: none;\n padding-left: 16px;\n padding-right: 16px; \n\n // th, td use flexbox to vertical-align content:\n display: flex;\n align-items: center;\n justify-content: left;\n\n // Underline.\n &:after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n transition: background-color ", "ms ease-in-out;\n } \n }\n\n th {\n // Position and size:\n position: sticky;\n top: 0;\n z-index: 100;\n gap: 8px;\n justify-content: space-between;\n // Appearance\n background: ", ";\n &.sort {\n background: ", ";\n }\n &:after { \n background-color: ", "; \n }\n // Header shadow:\n ", "\n }\n // td bottom border color:\n td {\n &:after {\n background-color: ", ";\n } \n }\n // Active row TDs:\n tr.active td {\n background-color: ", ";\n }\n // Last column has double right margin:\n td:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n tr:last-child td {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in td/th are ellipsized:\n td > span, th > span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n // Grid:\n ", "\n\n // If onColumns is present, remove last column header's hover underline:\n // Also remove last gridline.\n ", "\n\n // Change styles for table to be vertically oriented:\n ", "\n"], ["\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n border-collapse: collapse; \n table-layout: fixed; \n padding-bottom: 48px;\n\n // Grid:\n display: grid;\n grid-template-rows: ", "px;\n grid-auto-rows: ", "px;\n\n // Convert column widths a string suitable for grid template:\n grid-template-columns: ", ";\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n // <thead>, <tbody> and <tr> must not participate in CSS grid:\n tr, tbody, thead { display: contents; }\n\n // <tr>,<th>,<td> must be styled here, once, because otherwise \n // styled-components would create too many classes.\n tr {\n position: relative;\n }\n tr.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for both TD and TH:\n th, td {\n position: relative;\n box-sizing: border-box;\n white-space: nowrap;\n text-align: left;\n user-select: none;\n outline: none;\n padding-left: 16px;\n padding-right: 16px; \n\n // th, td use flexbox to vertical-align content:\n display: flex;\n align-items: center;\n justify-content: left;\n\n // Underline.\n &:after {\n content: '';\n position: absolute;\n left: 0;\n bottom: 0;\n right: 0;\n height: 1px;\n transition: background-color ", "ms ease-in-out;\n } \n }\n\n th {\n // Position and size:\n position: sticky;\n top: 0;\n z-index: 100;\n gap: 8px;\n justify-content: space-between;\n // Appearance\n background: ", ";\n &.sort {\n background: ", ";\n }\n &:after { \n background-color: ", "; \n }\n // Header shadow:\n ", "\n }\n // td bottom border color:\n td {\n &:after {\n background-color: ", ";\n } \n }\n // Active row TDs:\n tr.active td {\n background-color: ", ";\n }\n // Last column has double right margin:\n td:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n tr:last-child td {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in td/th are ellipsized:\n td > span, th > span {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n }\n\n // Grid:\n ", "\n\n // If onColumns is present, remove last column header's hover underline:\n // Also remove last gridline.\n ", "\n\n // Change styles for table to be vertically oriented:\n ", "\n"])), HEADER_HEIGHT, function (p) { return p.rowHeight; }, function (p) {
|