@longline/aqua-ui 1.0.255 → 1.0.256
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.
|
@@ -46,6 +46,10 @@ interface IColumnProps {
|
|
|
46
46
|
* Is this column currently shown in the ListView?
|
|
47
47
|
*/
|
|
48
48
|
active?: boolean;
|
|
49
|
+
/**
|
|
50
|
+
* Is this column in an error state?
|
|
51
|
+
*/
|
|
52
|
+
error?: boolean;
|
|
49
53
|
}
|
|
50
54
|
/**
|
|
51
55
|
* TableColumn species a column name, and how to render content for that
|
|
@@ -79,7 +79,7 @@ var Body = React.forwardRef(function (props, ref) {
|
|
|
79
79
|
props.onCheck && React.createElement("div", { className: "cell check" },
|
|
80
80
|
React.createElement(Selector, { checked: !!item.checked, onChange: function () { return props.onCheck(props.data[i]); } })),
|
|
81
81
|
props.columns.map(function (col, index) {
|
|
82
|
-
return React.createElement("div", { className: "cell", key: index, style: { justifyContent: col.align == 'right' ? 'end' : 'start' } },
|
|
82
|
+
return React.createElement("div", { className: "cell ".concat(col.error || item.error ? 'error' : ''), key: index, style: { justifyContent: col.align == 'right' ? 'end' : 'start' } },
|
|
83
83
|
index == 0 && props.decorator && props.decorator(item),
|
|
84
84
|
React.createElement("span", { className: "content" },
|
|
85
85
|
" ",
|
|
@@ -132,7 +132,7 @@ var TableBase = function (_a) {
|
|
|
132
132
|
};
|
|
133
133
|
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"])));
|
|
134
134
|
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]; });
|
|
135
|
-
var TableStyled = styled(TableBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n .inner {\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n padding-bottom: 48px;\n }\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n .row {\n width: 100%;\n height: ", "px;\n display: flex;\n flex-direction: row;\n }\n .row.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for cells:\n .cell {\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 min-width: 0; \n\n // 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 // Cell widths:\n ", "\n\n .cell.check {\n width: 48px;\n }\n\n .cell.columns {\n width: 48px;\n }\n\n .header {\n // Position and size:\n position: absolute;\n top: 0;\n z-index: 200;\n height: ", "px;\n }\n\n .header .cell {\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 // cell bottom border color:\n .cell {\n &:after {\n background-color: ", ";\n } \n }\n // Active row cells:\n .row.active .cell {\n background-color: ", ";\n }\n // Last column has double right margin:\n .cell:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n .row:last-child .cell {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in cells are ellipsized:\n .cell > span {\n max-width: 100%;\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 // Expanded row makes its cells sticky:\n .row.expanded {\n position: sticky;\n top: 0;\n z-index: 100;\n }\n"], ["\n .inner {\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n padding-bottom: 48px;\n }\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n .row {\n width: 100%;\n height: ", "px;\n display: flex;\n flex-direction: row;\n }\n .row.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for cells:\n .cell {\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 min-width: 0; \n\n // 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 // Cell widths:\n ", "\n\n .cell.check {\n width: 48px;\n }\n\n .cell.columns {\n width: 48px;\n }\n\n .header {\n // Position and size:\n position: absolute;\n top: 0;\n z-index: 200;\n height: ", "px;\n }\n\n .header .cell {\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 // cell bottom border color:\n .cell {\n &:after {\n background-color: ", ";\n } \n }\n // Active row cells:\n .row.active .cell {\n background-color: ", ";\n }\n // Last column has double right margin:\n .cell:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n .row:last-child .cell {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in cells are ellipsized:\n .cell > span {\n max-width: 100%;\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 // Expanded row makes its cells sticky:\n .row.expanded {\n position: sticky;\n top: 0;\n z-index: 100;\n }\n"])), 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.rowHeight; }, function (p) { return p.hover && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n .row:hover .cell { background-color: ", "; }\n "], ["\n .row:hover .cell { background-color: ", "; }\n "])), p.dark ? p.theme.colors.primary[4] : p.theme.colors.neutral[95]); }, function (p) { return p.striped && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n .row:nth-child(2n+2) .cell {\n background-color: ", ";\n }\n "], ["\n .row:nth-child(2n+2) .cell {\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.columns.filter(function (c) { return c.active; }).map(function (c, i) {
|
|
135
|
+
var TableStyled = styled(TableBase)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n .inner {\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n padding-bottom: 48px;\n }\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n .row {\n width: 100%;\n height: ", "px;\n display: flex;\n flex-direction: row;\n }\n .row.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for cells:\n .cell {\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 min-width: 0; \n\n // 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 // A column can be in an error state.\n .cell.error {\n background: ", ";\n }\n\n // Cell widths:\n ", "\n\n .cell.check {\n width: 48px;\n }\n\n .cell.columns {\n width: 48px;\n }\n\n .header {\n // Position and size:\n position: absolute;\n top: 0;\n z-index: 200;\n height: ", "px;\n }\n\n .header .cell {\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 // cell bottom border color:\n .cell {\n &:after {\n background-color: ", ";\n } \n }\n // Active row cells:\n .row.active .cell {\n background-color: ", ";\n }\n // Last column has double right margin:\n .cell:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n .row:last-child .cell {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in cells are ellipsized:\n .cell > span {\n max-width: 100%;\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 // Expanded row makes its cells sticky:\n .row.expanded {\n position: sticky;\n top: 0;\n z-index: 100;\n }\n"], ["\n .inner {\n position: absolute;\n box-sizing: border-box;\n left: 0;\n top: 0;\n width: 100%;\n padding-bottom: 48px;\n }\n\n // Appearance:\n font: ", ";\n color: ", ";\n background-color: ", ";\n\n .row {\n width: 100%;\n height: ", "px;\n display: flex;\n flex-direction: row;\n }\n .row.clickable {\n cursor: pointer;\n }\n\n // Optional row hover effect:\n ", "\n\n // Striped rows:\n ", "\n\n // General styles for cells:\n .cell {\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 min-width: 0; \n\n // 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 // A column can be in an error state.\n .cell.error {\n background: ", ";\n }\n\n // Cell widths:\n ", "\n\n .cell.check {\n width: 48px;\n }\n\n .cell.columns {\n width: 48px;\n }\n\n .header {\n // Position and size:\n position: absolute;\n top: 0;\n z-index: 200;\n height: ", "px;\n }\n\n .header .cell {\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 // cell bottom border color:\n .cell {\n &:after {\n background-color: ", ";\n } \n }\n // Active row cells:\n .row.active .cell {\n background-color: ", ";\n }\n // Last column has double right margin:\n .cell:last-child {\n padding-right: 32px;\n }\n // Last row has no bottom border:\n .row:last-child .cell {\n &:after {\n visibility: hidden;\n } \n }\n // Spans in cells are ellipsized:\n .cell > span {\n max-width: 100%;\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 // Expanded row makes its cells sticky:\n .row.expanded {\n position: sticky;\n top: 0;\n z-index: 100;\n }\n"])), 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.rowHeight; }, function (p) { return p.hover && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n .row:hover .cell { background-color: ", "; }\n "], ["\n .row:hover .cell { background-color: ", "; }\n "])), p.dark ? p.theme.colors.primary[4] : p.theme.colors.neutral[95]); }, function (p) { return p.striped && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n .row:nth-child(2n+2) .cell {\n background-color: ", ";\n }\n "], ["\n .row:nth-child(2n+2) .cell {\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.theme.colors.negative; }, function (p) { return p.columns.filter(function (c) { return c.active; }).map(function (c, i) {
|
|
136
136
|
var _a;
|
|
137
137
|
var width_definition = (_a = c.width) !== null && _a !== void 0 ? _a : 1;
|
|
138
138
|
var cellIndex = p.onCheck ? i + 2 : i + 1;
|