@longline/aqua-ui 1.0.75 → 1.0.77
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/ListView/Table.js +10 -11
- package/package.json +1 -1
|
@@ -38,7 +38,6 @@ var TableBase = function (_a) {
|
|
|
38
38
|
var className = _a.className, props = __rest(_a, ["className"]);
|
|
39
39
|
var scrollPos = React.useRef(0);
|
|
40
40
|
var wrapperRef = React.useRef(null);
|
|
41
|
-
var auxWrapperRef = React.useRef(null);
|
|
42
41
|
var innerRef = React.useRef(null);
|
|
43
42
|
var auxRef = React.useRef(null);
|
|
44
43
|
var activeColumns = props.columns.filter(function (c) { return c.active; });
|
|
@@ -53,6 +52,7 @@ var TableBase = function (_a) {
|
|
|
53
52
|
}
|
|
54
53
|
var pos = props.data.indexOf(props.active);
|
|
55
54
|
var ROWHEIGHT = props.rowHeight;
|
|
55
|
+
console.log(wrapperRef.current.clientHeight, auxRef.current.clientHeight);
|
|
56
56
|
var top = Math.min(wrapperRef.current.clientHeight - auxRef.current.clientHeight - 16, Math.max(HEADER_HEIGHT, -offset + HEADER_HEIGHT + pos * ROWHEIGHT)) + "px";
|
|
57
57
|
auxRef.current.style.top = top;
|
|
58
58
|
};
|
|
@@ -64,9 +64,10 @@ var TableBase = function (_a) {
|
|
|
64
64
|
// When a resize is detected, we reposition the aux.
|
|
65
65
|
React.useEffect(function () {
|
|
66
66
|
var resizeObserver = new ResizeObserver(function () {
|
|
67
|
+
console.log("ListView: Resize detected.");
|
|
67
68
|
setAuxPosition();
|
|
68
69
|
});
|
|
69
|
-
resizeObserver.observe(
|
|
70
|
+
resizeObserver.observe(auxRef.current);
|
|
70
71
|
return function () { return resizeObserver.disconnect(); };
|
|
71
72
|
}, []);
|
|
72
73
|
var handleScroll = function () {
|
|
@@ -80,19 +81,17 @@ var TableBase = function (_a) {
|
|
|
80
81
|
React.createElement(ColumnsManager, { columns: props.columns, onChange: props.onChangeColumns, onClose: props.onCloseColumns, onReset: props.onResetColumns })),
|
|
81
82
|
(props.data == null || props.data.length == 0) &&
|
|
82
83
|
React.createElement(NoData, { dark: props.dark, component: props.noData }),
|
|
83
|
-
React.createElement(AuxHolder, { ref: auxRef, style: { visibility: (props.active && props.aux && props.data.includes(props.active)) ? 'visible' : 'hidden' } },
|
|
84
|
-
React.createElement(AuxWrapper, { ref: auxWrapperRef }, (props.active && props.aux && props.data.includes(props.active)) && React.cloneElement(props.aux, { value: props.active }))),
|
|
84
|
+
React.createElement(AuxHolder, { ref: auxRef, style: { visibility: (props.active && props.aux && props.data.includes(props.active)) ? 'visible' : 'hidden' } }, (props.active && props.aux && props.data.includes(props.active)) && React.cloneElement(props.aux, { value: props.active })),
|
|
85
85
|
React.createElement(Inner, { onScroll: handleScroll, ref: innerRef },
|
|
86
86
|
React.createElement("table", { className: className },
|
|
87
87
|
props.noheader != true && React.createElement(Header, __assign({}, props, { columns: activeColumns, onOpenColumns: props.onOpenColumns })),
|
|
88
88
|
React.createElement(Body, __assign({}, props, { columns: activeColumns })))),
|
|
89
89
|
props.total && React.createElement(Total, { value: props.data.length, singular: props.singular, plural: props.plural })));
|
|
90
90
|
};
|
|
91
|
-
var AuxHolder = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n // The AuxHolder is 16px right of the table. Its \"top\" position will\n // be set by the table scroll handler.\n left: calc(100% + 16px);\n z-index: 1;\n"], ["\n position: absolute;\n // The AuxHolder is 16px right of the table. Its \"top\" position will\n // be set by the table scroll handler.\n left: calc(100% + 16px);\n z-index: 1;\n"])));
|
|
92
|
-
var
|
|
93
|
-
var
|
|
94
|
-
var
|
|
95
|
-
var TableStyled = styled(TableBase)(templateObject_11 || (templateObject_11 = __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) {
|
|
91
|
+
var AuxHolder = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: absolute;\n // The AuxHolder is 16px right of the table. Its \"top\" position will\n // be set by the table scroll handler.\n left: calc(100% + 16px);\n z-index: 1;\n background: green;\n"], ["\n position: absolute;\n // The AuxHolder is 16px right of the table. Its \"top\" position will\n // be set by the table scroll handler.\n left: calc(100% + 16px);\n z-index: 1;\n background: green;\n"])));
|
|
92
|
+
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 border: solid 3px red;\n background-color: ", ";\n"], ["\n // Size and position. A table fills its container.\n position: relative;\n width: 100%;\n height: 100%;\n border: solid 3px red;\n background-color: ", ";\n"])), function (p) { return p.$dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; });
|
|
93
|
+
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"])));
|
|
94
|
+
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) {
|
|
96
95
|
// Prefix a check column?
|
|
97
96
|
return (p.onCheck ? ['48px'] : []).concat(
|
|
98
97
|
// Actual columns:
|
|
@@ -107,7 +106,7 @@ var TableStyled = styled(TableBase)(templateObject_11 || (templateObject_11 = __
|
|
|
107
106
|
// Postfix an columns management column?
|
|
108
107
|
.concat(p.columnsEditable ? ['48px'] : [])
|
|
109
108
|
.join(" ");
|
|
110
|
-
}, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.dark ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) { return p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.hover && css(
|
|
109
|
+
}, function (p) { return p.theme.font.bodyMedium; }, function (p) { return p.dark ? p.theme.colors.neutral[100] : p.theme.colors.neutral[10]; }, function (p) { return p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100]; }, function (p) { return p.hover && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n tr:hover td { background-color: ", "; }\n "], ["\n tr:hover td { background-color: ", "; }\n "])), p.dark ? p.theme.colors.primary[4] : p.theme.colors.neutral[95]); }, function (p) { return p.striped && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n tr:nth-child(2n+2) td {\n background-color: ", ";\n }\n "], ["\n tr:nth-child(2n+2) td {\n background-color: ", ";\n }\n "])), darken(0.02, p.dark ? p.theme.colors.primary[3] : p.theme.colors.neutral[100])); }, function (p) { return p.theme.animation.duration; }, function (p) { return p.dark ? p.theme.colors.primary[5] : p.theme.colors.neutral[100]; }, function (p) { return p.dark ? p.theme.colors.neutral[10] : p.theme.colors.neutral[95]; }, function (p) { return p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]; }, function (p) { return p.shadow && css(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n &:before {\n position: absolute;\n pointer-events: none;\n content: '';\n z-index: 1;\n top: calc(100%);\n left: 0;\n right: 0;\n height: 8px;\n background: linear-gradient(rgba(0,0,0,0.1), transparent);\n }\n "], ["\n &:before {\n position: absolute;\n pointer-events: none;\n content: '';\n z-index: 1;\n top: calc(100%);\n left: 0;\n right: 0;\n height: 8px;\n background: linear-gradient(rgba(0,0,0,0.1), transparent);\n }\n "]))); }, function (p) { return p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]; }, function (p) { return p.theme.colors.primary[1]; }, function (p) { return p.grid && css(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n td:not(:last-child), th:not(:last-child) {\n border-right: dashed 1px ", ";\n }\n "], ["\n td:not(:last-child), th:not(:last-child) {\n border-right: dashed 1px ", ";\n }\n "])), p.dark ? p.theme.colors.primary[2] : p.theme.colors.neutral[80]); }, function (p) { return p.columnsEditable && css(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n th:last-child {\n &:hover {\n &:after { \n background-color: ", ";\n }\n }\n }\n th:nth-last-child(2), td:nth-last-child(2) {\n border-right: none;\n }\n "], ["\n th:last-child {\n &:hover {\n &:after { \n background-color: ", ";\n }\n }\n }\n th:nth-last-child(2), td:nth-last-child(2) {\n border-right: none;\n }\n "])), function (p) { return p.theme.colors.primary[2]; }); }, function (p) { return p.narrow && css(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n grid-template-columns: 1fr;\n tr th {\n display: none;\n } \n th, td:not(:last-child) {\n &:after {\n visibility: hidden;\n }\n }\n td {\n flex-direction: column;\n align-items: start;\n justify-content: center;\n }\n td span.label {\n font: ", ";\n }\n td:last-child {\n padding-right: 16px;\n }\n "], ["\n grid-template-columns: 1fr;\n tr th {\n display: none;\n } \n th, td:not(:last-child) {\n &:after {\n visibility: hidden;\n }\n }\n td {\n flex-direction: column;\n align-items: start;\n justify-content: center;\n }\n td span.label {\n font: ", ";\n }\n td:last-child {\n padding-right: 16px;\n }\n "])), function (p) { return p.theme.font.labelSmall; }); });
|
|
111
110
|
var Table = function (props) { return React.createElement(TableStyled, __assign({}, props)); };
|
|
112
111
|
export { Table };
|
|
113
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10
|
|
112
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|