@longline/aqua-ui 1.0.73 → 1.0.75
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 +21 -6
- package/controls/View/View.js +1 -1
- package/inputs/Input/Input.js +1 -1
- package/package.json +1 -1
|
@@ -38,6 +38,7 @@ 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);
|
|
41
42
|
var innerRef = React.useRef(null);
|
|
42
43
|
var auxRef = React.useRef(null);
|
|
43
44
|
var activeColumns = props.columns.filter(function (c) { return c.active; });
|
|
@@ -56,6 +57,18 @@ var TableBase = function (_a) {
|
|
|
56
57
|
auxRef.current.style.top = top;
|
|
57
58
|
};
|
|
58
59
|
React.useEffect(function () { setAuxPosition(); }, [props.active]);
|
|
60
|
+
// We use a ResizeObserver to detect changes in the size of aux.
|
|
61
|
+
// This is because the content of an InfoBox may change, and the Infobox
|
|
62
|
+
// may then grow or shrink. If its position isn't updated, then the Infobox
|
|
63
|
+
// may suddenly run off the screen.
|
|
64
|
+
// When a resize is detected, we reposition the aux.
|
|
65
|
+
React.useEffect(function () {
|
|
66
|
+
var resizeObserver = new ResizeObserver(function () {
|
|
67
|
+
setAuxPosition();
|
|
68
|
+
});
|
|
69
|
+
resizeObserver.observe(auxWrapperRef.current);
|
|
70
|
+
return function () { return resizeObserver.disconnect(); };
|
|
71
|
+
}, []);
|
|
59
72
|
var handleScroll = function () {
|
|
60
73
|
if (innerRef.current == null)
|
|
61
74
|
return;
|
|
@@ -67,7 +80,8 @@ var TableBase = function (_a) {
|
|
|
67
80
|
React.createElement(ColumnsManager, { columns: props.columns, onChange: props.onChangeColumns, onClose: props.onCloseColumns, onReset: props.onResetColumns })),
|
|
68
81
|
(props.data == null || props.data.length == 0) &&
|
|
69
82
|
React.createElement(NoData, { dark: props.dark, component: props.noData }),
|
|
70
|
-
React.createElement(AuxHolder, { ref: auxRef, style: { visibility: (props.active && props.aux && props.data.includes(props.active)) ? 'visible' : 'hidden' } },
|
|
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 }))),
|
|
71
85
|
React.createElement(Inner, { onScroll: handleScroll, ref: innerRef },
|
|
72
86
|
React.createElement("table", { className: className },
|
|
73
87
|
props.noheader != true && React.createElement(Header, __assign({}, props, { columns: activeColumns, onOpenColumns: props.onOpenColumns })),
|
|
@@ -75,9 +89,10 @@ var TableBase = function (_a) {
|
|
|
75
89
|
props.total && React.createElement(Total, { value: props.data.length, singular: props.singular, plural: props.plural })));
|
|
76
90
|
};
|
|
77
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"])));
|
|
78
|
-
var
|
|
79
|
-
var
|
|
80
|
-
var
|
|
92
|
+
var AuxWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n"], ["\n"])));
|
|
93
|
+
var Wrapper = styled.div(templateObject_3 || (templateObject_3 = __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]; });
|
|
94
|
+
var Inner = styled.div(templateObject_4 || (templateObject_4 = __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"])));
|
|
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) {
|
|
81
96
|
// Prefix a check column?
|
|
82
97
|
return (p.onCheck ? ['48px'] : []).concat(
|
|
83
98
|
// Actual columns:
|
|
@@ -92,7 +107,7 @@ var TableStyled = styled(TableBase)(templateObject_10 || (templateObject_10 = __
|
|
|
92
107
|
// Postfix an columns management column?
|
|
93
108
|
.concat(p.columnsEditable ? ['48px'] : [])
|
|
94
109
|
.join(" ");
|
|
95
|
-
}, 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(
|
|
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(templateObject_5 || (templateObject_5 = __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_6 || (templateObject_6 = __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_7 || (templateObject_7 = __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_8 || (templateObject_8 = __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_9 || (templateObject_9 = __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_10 || (templateObject_10 = __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; }); });
|
|
96
111
|
var Table = function (props) { return React.createElement(TableStyled, __assign({}, props)); };
|
|
97
112
|
export { Table };
|
|
98
|
-
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
|
|
113
|
+
var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
|
package/controls/View/View.js
CHANGED
|
@@ -41,7 +41,7 @@ var ViewStyled = styled(ViewBase)(templateObject_3 || (templateObject_3 = __make
|
|
|
41
41
|
* <View label="Email address">{email}</View>
|
|
42
42
|
* ```
|
|
43
43
|
*/
|
|
44
|
-
])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[4]; }, function (p) { return p.theme.font.
|
|
44
|
+
])), function (p) { return p.theme.radius.normal; }, function (p) { return p.theme.colors.primary[4]; }, function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.theme.colors.primary[3]; }, Label, function (p) { return p.theme.colors.neutral[100]; }, function (p) { return p.ghost && css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n outline: dashed 1px ", ";\n background-color: transparent;\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n pointer-events: none;\n user-select: none;\n \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "], ["\n outline: dashed 1px ", ";\n background-color: transparent;\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n pointer-events: none;\n user-select: none;\n \n ", " {\n color: transparent;\n text-shadow: 0 0 3px rgb(from ", " r g b / 50%);\n } \n "])), p.theme.colors.primary[2], function (p) { return p.theme.colors.neutral[100]; }, Label, function (p) { return p.theme.colors.neutral[100]; }); }, function (p) { return p.weight && css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["flex: ", ""], ["flex: ", ""])), p.weight); });
|
|
45
45
|
/**
|
|
46
46
|
* A `View` is used to display static (read-only) data. A `View` has a label, and its
|
|
47
47
|
* children are its value.
|
package/inputs/Input/Input.js
CHANGED
|
@@ -59,6 +59,6 @@ var InputBase = function (props) {
|
|
|
59
59
|
return (React.createElement(InputWrapper, { fluid: props.fluid, ghost: props.ghost, error: props.error, disabled: props.disabled, transparent: props.transparent, icon: props.icon, iconPosition: props.iconPosition, onClear: (props.clearable && props.value) ? handleClear : null, unit: props.unit },
|
|
60
60
|
React.createElement("input", { className: props.className, ref: inputRef, tabIndex: props.noTabIndex ? -1 : 0, value: value, placeholder: props.placeholder, disabled: props.disabled, type: props.type, maxLength: props.maxLength, autoComplete: props.autocomplete, onChange: handleChange, onFocus: props.onFocus })));
|
|
61
61
|
};
|
|
62
|
-
var Input = styled(InputBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Dimensions:\n width: 100%;\n box-sizing: border-box;\n z-index: 0;\n border: none;\n\n outline: solid 3px rebeccapurple;\n background: transparent;\n padding: 0;\n margin: 0;\n outline: none;\n\n // Font\n font:
|
|
62
|
+
var Input = styled(InputBase)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n // Dimensions:\n width: 100%;\n box-sizing: border-box;\n z-index: 0;\n border: none;\n\n outline: solid 3px rebeccapurple;\n background: transparent;\n padding: 0;\n margin: 0;\n outline: none;\n\n // Font\n font: ", ";\n text-align: left;\n color: ", ";\n\n // Define colors for placeholder text.\n &::placeholder {\n color: rgb(from ", " r g b / 50%);\n opacity: 1 !important; /* Firefox applies opacity */\n }\n\n // Focus:\n &:focus {\n &::placeholder {\n color: rgb(from ", " r g b / 30%);\n }\n }\n\n // Make sure HTML5 validation does not show up.\n &:valid {\n box-shadow: none;\n }\n &:invalid {\n box-shadow: none;\n }\n\n // Turn off number spinners.\n &[type=number]::-webkit-inner-spin-button, \n &[type=number]::-webkit-outer-spin-button { \n -webkit-appearance: none; /* Webkit (Chrome) */\n margin: 0; \n } \n &[type=number] {\n appearance:textfield;\n -moz-appearance:textfield; /* Firefox */\n } \n"], ["\n // Dimensions:\n width: 100%;\n box-sizing: border-box;\n z-index: 0;\n border: none;\n\n outline: solid 3px rebeccapurple;\n background: transparent;\n padding: 0;\n margin: 0;\n outline: none;\n\n // Font\n font: ", ";\n text-align: left;\n color: ", ";\n\n // Define colors for placeholder text.\n &::placeholder {\n color: rgb(from ", " r g b / 50%);\n opacity: 1 !important; /* Firefox applies opacity */\n }\n\n // Focus:\n &:focus {\n &::placeholder {\n color: rgb(from ", " r g b / 30%);\n }\n }\n\n // Make sure HTML5 validation does not show up.\n &:valid {\n box-shadow: none;\n }\n &:invalid {\n box-shadow: none;\n }\n\n // Turn off number spinners.\n &[type=number]::-webkit-inner-spin-button, \n &[type=number]::-webkit-outer-spin-button { \n -webkit-appearance: none; /* Webkit (Chrome) */\n margin: 0; \n } \n &[type=number] {\n appearance:textfield;\n -moz-appearance:textfield; /* Firefox */\n } \n"])), function (p) { return p.theme.font.bodyLarge; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; }, function (p) { return p.theme.colors.primary[3]; });
|
|
63
63
|
export { Input };
|
|
64
64
|
var templateObject_1;
|