@stenajs-webui/grid 16.1.0 → 17.0.0
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/CHANGELOG.md +16 -0
- package/dist/components/GridHooksTable.d.ts +5 -1
- package/dist/index.es.js +131 -140
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +131 -140
- package/dist/index.js.map +1 -1
- package/package.json +17 -17
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,19 @@
|
|
|
1
|
+
# v17.0.0 (Fri Jun 17 2022)
|
|
2
|
+
|
|
3
|
+
#### 💥 Breaking Change
|
|
4
|
+
|
|
5
|
+
- Upgrade and apply prettier. [#467](https://github.com/StenaIT/stenajs-webui/pull/467) ([@mattias800](https://github.com/mattias800))
|
|
6
|
+
|
|
7
|
+
#### 🔩 Dependency Updates
|
|
8
|
+
|
|
9
|
+
- Update Typescript, React, Jest, etc. [#466](https://github.com/StenaIT/stenajs-webui/pull/466) ([@mattias800](https://github.com/mattias800))
|
|
10
|
+
|
|
11
|
+
#### Authors: 1
|
|
12
|
+
|
|
13
|
+
- Mattias Andersson ([@mattias800](https://github.com/mattias800))
|
|
14
|
+
|
|
15
|
+
---
|
|
16
|
+
|
|
1
17
|
# v15.5.2 (Fri Apr 08 2022)
|
|
2
18
|
|
|
3
19
|
#### 🐛 Bug Fix
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
+
import { ReactNode } from "react";
|
|
3
|
+
interface GridHooksTableProps extends GridHooksContextValue {
|
|
4
|
+
children?: ReactNode;
|
|
5
|
+
}
|
|
2
6
|
interface GridHooksContextValue {
|
|
3
7
|
/**
|
|
4
8
|
* Total number of rows in table. Must be set in cell hook or in GridHooksTable prop.
|
|
@@ -18,5 +22,5 @@ interface GridHooksContextValue {
|
|
|
18
22
|
wrap?: boolean;
|
|
19
23
|
}
|
|
20
24
|
export declare const GridHooksContext: React.Context<GridHooksContextValue>;
|
|
21
|
-
export declare const GridHooksTable: React.FC<
|
|
25
|
+
export declare const GridHooksTable: React.FC<GridHooksTableProps>;
|
|
22
26
|
export {};
|
package/dist/index.es.js
CHANGED
|
@@ -130,10 +130,10 @@ var tableBorderColor = "var(--lhds-color-ui-300)";
|
|
|
130
130
|
var tableBorderColorExpanded = "var(--lhds-color-blue-500)";
|
|
131
131
|
var tableBackgroundColorExpanded = "var(--lhds-color-blue-50)";
|
|
132
132
|
var tableBackgroundHoverColorExpanded = "var(--lhds-color-blue-100)";
|
|
133
|
-
var tableBorder = "1px solid "
|
|
133
|
+
var tableBorder = "1px solid ".concat(tableBorderColor);
|
|
134
134
|
var tableBorderHidden = "1px solid transparent";
|
|
135
135
|
var tableBorderLeft = "var(--swui-expand-highlight-border-width) solid transparent";
|
|
136
|
-
var tableBorderLeftExpanded = "var(--swui-expand-highlight-border-width) solid "
|
|
136
|
+
var tableBorderLeftExpanded = "var(--swui-expand-highlight-border-width) solid ".concat(tableBorderColorExpanded);
|
|
137
137
|
var defaultTableRowHeight = "40px";
|
|
138
138
|
var defaultTableHeadRowHeight = "40px";
|
|
139
139
|
var smallTableRowWidth = "40px";
|
|
@@ -373,32 +373,34 @@ var isCharacter = function (key) { return !!key.match(/^[-+*<>]$/); };
|
|
|
373
373
|
var isLetter = function (key) { return !!key.match(/^[a-zA-Z0-9]$/); };
|
|
374
374
|
var isNumeric = function (key) { return !isNaN(parseInt(key, 10)); };
|
|
375
375
|
var createKeyDownHandler$1 = function (_, // isEditing
|
|
376
|
-
isEditable, startEditing, setLastKeyEvent, allowedInputType, transformEnteredValue, revertableValue) {
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
e.preventDefault();
|
|
385
|
-
e.stopPropagation();
|
|
386
|
-
}
|
|
387
|
-
else if (isEditable) {
|
|
388
|
-
// TODO Find nice way to allow full user control, while also providing simplicity.
|
|
389
|
-
var lastKeyEvent = createKeyDownEvent(e);
|
|
390
|
-
if ((isNumeric(e.key) && allowsNumerics(allowedInputType)) ||
|
|
391
|
-
(isLetter(e.key) && allowsLetters(allowedInputType)) ||
|
|
392
|
-
isCharacter(e.key)) {
|
|
393
|
-
startEditing(lastKeyEvent);
|
|
394
|
-
setLastKeyEvent(lastKeyEvent);
|
|
376
|
+
isEditable, startEditing, setLastKeyEvent, allowedInputType, transformEnteredValue, revertableValue) {
|
|
377
|
+
return function (e) {
|
|
378
|
+
if (e.ctrlKey || e.metaKey || e.shiftKey) {
|
|
379
|
+
return;
|
|
380
|
+
}
|
|
381
|
+
if (e.key === "Enter" && isEditable) {
|
|
382
|
+
setLastKeyEvent(undefined);
|
|
383
|
+
startEditing();
|
|
395
384
|
revertableValue.commit();
|
|
396
|
-
revertableValue.setValue(transformEnteredValue(lastKeyEvent.key));
|
|
397
385
|
e.preventDefault();
|
|
398
386
|
e.stopPropagation();
|
|
399
387
|
}
|
|
400
|
-
|
|
401
|
-
|
|
388
|
+
else if (isEditable) {
|
|
389
|
+
// TODO Find nice way to allow full user control, while also providing simplicity.
|
|
390
|
+
var lastKeyEvent = createKeyDownEvent(e);
|
|
391
|
+
if ((isNumeric(e.key) && allowsNumerics(allowedInputType)) ||
|
|
392
|
+
(isLetter(e.key) && allowsLetters(allowedInputType)) ||
|
|
393
|
+
isCharacter(e.key)) {
|
|
394
|
+
startEditing(lastKeyEvent);
|
|
395
|
+
setLastKeyEvent(lastKeyEvent);
|
|
396
|
+
revertableValue.commit();
|
|
397
|
+
revertableValue.setValue(transformEnteredValue(lastKeyEvent.key));
|
|
398
|
+
e.preventDefault();
|
|
399
|
+
e.stopPropagation();
|
|
400
|
+
}
|
|
401
|
+
}
|
|
402
|
+
};
|
|
403
|
+
};
|
|
402
404
|
|
|
403
405
|
var wrapBounds = function (x, y, maxX, maxY) {
|
|
404
406
|
var realX = x;
|
|
@@ -518,14 +520,8 @@ var useGridNavigation = function (options) {
|
|
|
518
520
|
onCellMove,
|
|
519
521
|
onCellNavigation,
|
|
520
522
|
]);
|
|
521
|
-
var onKeyDown = useMemo(function () { return createKeyDownHandler(moveHandler); }, [
|
|
522
|
-
|
|
523
|
-
]);
|
|
524
|
-
var id = useMemo(function () { return createCellId(tableId, rowIndex, colIndex); }, [
|
|
525
|
-
tableId,
|
|
526
|
-
rowIndex,
|
|
527
|
-
colIndex,
|
|
528
|
-
]);
|
|
523
|
+
var onKeyDown = useMemo(function () { return createKeyDownHandler(moveHandler); }, [moveHandler]);
|
|
524
|
+
var id = useMemo(function () { return createCellId(tableId, rowIndex, colIndex); }, [tableId, rowIndex, colIndex]);
|
|
529
525
|
var requiredProps = useMemo(function () { return ({
|
|
530
526
|
tabIndex: 0,
|
|
531
527
|
onKeyDown: onKeyDown,
|
|
@@ -537,13 +533,27 @@ var useGridNavigation = function (options) {
|
|
|
537
533
|
requiredProps: requiredProps,
|
|
538
534
|
};
|
|
539
535
|
};
|
|
540
|
-
var createMoveHandler = function (tableId, rowIndex, colIndex, numRows, numCols, edgeMode, onCellMove, onCellNavigation) {
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
if (
|
|
546
|
-
onCellMove
|
|
536
|
+
var createMoveHandler = function (tableId, rowIndex, colIndex, numRows, numCols, edgeMode, onCellMove, onCellNavigation) {
|
|
537
|
+
return function (direction) {
|
|
538
|
+
var pos = getNextPositionWrappedOrClamped(rowIndex, colIndex, numRows, numCols, direction, edgeMode);
|
|
539
|
+
var colDidChange = colIndex !== pos.colIndex;
|
|
540
|
+
var rowDidChange = rowIndex !== pos.rowIndex;
|
|
541
|
+
if (colDidChange || rowDidChange) {
|
|
542
|
+
if (onCellMove) {
|
|
543
|
+
onCellMove({
|
|
544
|
+
direction: direction,
|
|
545
|
+
fromRowIndex: rowIndex,
|
|
546
|
+
fromColIndex: colIndex,
|
|
547
|
+
rowIndex: pos.rowIndex,
|
|
548
|
+
colIndex: pos.colIndex,
|
|
549
|
+
colDidChange: colDidChange,
|
|
550
|
+
rowDidChange: rowDidChange,
|
|
551
|
+
});
|
|
552
|
+
}
|
|
553
|
+
focusOnCell(tableId, pos);
|
|
554
|
+
}
|
|
555
|
+
if (onCellNavigation) {
|
|
556
|
+
onCellNavigation({
|
|
547
557
|
direction: direction,
|
|
548
558
|
fromRowIndex: rowIndex,
|
|
549
559
|
fromColIndex: colIndex,
|
|
@@ -551,56 +561,46 @@ var createMoveHandler = function (tableId, rowIndex, colIndex, numRows, numCols,
|
|
|
551
561
|
colIndex: pos.colIndex,
|
|
552
562
|
colDidChange: colDidChange,
|
|
553
563
|
rowDidChange: rowDidChange,
|
|
564
|
+
cellDidChange: colDidChange || rowDidChange,
|
|
554
565
|
});
|
|
555
566
|
}
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
586
|
-
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
}
|
|
591
|
-
else if (e.key === "ArrowDown") {
|
|
592
|
-
moveHandler("down");
|
|
593
|
-
e.preventDefault();
|
|
594
|
-
e.stopPropagation();
|
|
595
|
-
return true;
|
|
596
|
-
}
|
|
597
|
-
else {
|
|
598
|
-
return false;
|
|
599
|
-
}
|
|
600
|
-
}; };
|
|
567
|
+
};
|
|
568
|
+
};
|
|
569
|
+
var createCellId = function (tableId, rowIndex, colIndex) { return ensureDomIdIsCorrect("table-".concat(tableId, "-").concat(rowIndex, "-").concat(colIndex)); };
|
|
570
|
+
var createKeyDownHandler = function (moveHandler) {
|
|
571
|
+
return function (e) {
|
|
572
|
+
if (e.key === "ArrowLeft") {
|
|
573
|
+
moveHandler("left");
|
|
574
|
+
e.preventDefault();
|
|
575
|
+
e.stopPropagation();
|
|
576
|
+
return true;
|
|
577
|
+
}
|
|
578
|
+
else if (e.key === "ArrowUp") {
|
|
579
|
+
moveHandler("up");
|
|
580
|
+
e.preventDefault();
|
|
581
|
+
e.stopPropagation();
|
|
582
|
+
return true;
|
|
583
|
+
}
|
|
584
|
+
else if (e.key === "ArrowRight") {
|
|
585
|
+
moveHandler("right");
|
|
586
|
+
e.preventDefault();
|
|
587
|
+
e.stopPropagation();
|
|
588
|
+
return true;
|
|
589
|
+
}
|
|
590
|
+
else if (e.key === "ArrowDown") {
|
|
591
|
+
moveHandler("down");
|
|
592
|
+
e.preventDefault();
|
|
593
|
+
e.stopPropagation();
|
|
594
|
+
return true;
|
|
595
|
+
}
|
|
596
|
+
else {
|
|
597
|
+
return false;
|
|
598
|
+
}
|
|
599
|
+
};
|
|
600
|
+
};
|
|
601
601
|
var focusOnCell = function (tableId, pos) {
|
|
602
|
-
var el = (document.querySelector("#"
|
|
603
|
-
document.querySelector("#"
|
|
602
|
+
var el = (document.querySelector("#".concat(createCellId(tableId, pos.rowIndex, pos.colIndex))) ||
|
|
603
|
+
document.querySelector("#".concat(createCellId(tableId, pos.rowIndex, pos.colIndex))));
|
|
604
604
|
if (el) {
|
|
605
605
|
el.focus();
|
|
606
606
|
}
|
|
@@ -743,7 +743,7 @@ var createInternalStandardTableActions = function () { return ({
|
|
|
743
743
|
fields: createEntityActions(),
|
|
744
744
|
}); };
|
|
745
745
|
|
|
746
|
-
var getReducerIdFor = function (reducerId, reducerIdSuffix) { return reducerId
|
|
746
|
+
var getReducerIdFor = function (reducerId, reducerIdSuffix) { return "".concat(reducerId, ".").concat(reducerIdSuffix); };
|
|
747
747
|
|
|
748
748
|
var createStandardTableInitialState = function (sortBy, desc, selectedIds, expandedRows) {
|
|
749
749
|
if (sortBy === void 0) { sortBy = undefined; }
|
|
@@ -1169,7 +1169,7 @@ var getStickyPropsPerColumnWithNoGroups = function (config) {
|
|
|
1169
1169
|
sum[columnId] = {
|
|
1170
1170
|
sticky: sticky,
|
|
1171
1171
|
left: sticky
|
|
1172
|
-
? "calc(var(--current-left-offset) + "
|
|
1172
|
+
? "calc(var(--current-left-offset) + ".concat((_a = columnConfig.left) !== null && _a !== void 0 ? _a : "0px", ")")
|
|
1173
1173
|
: undefined,
|
|
1174
1174
|
right: sticky ? columnConfig.right : undefined,
|
|
1175
1175
|
type: "column",
|
|
@@ -1358,10 +1358,7 @@ var useRowCheckbox = function (item, idListForEnabledItems) {
|
|
|
1358
1358
|
var _a = useStandardTableState(), selectedIds = _a.selectedIds.selectedIds, lastSelectedId = _a.fields.lastSelectedId;
|
|
1359
1359
|
var _b = useStandardTableActions(), _c = _b.actions, setSelectedIds = _c.setSelectedIds, setLastSelectedId = _c.setLastSelectedId, dispatch = _b.dispatch;
|
|
1360
1360
|
var itemKey = useMemo(function () { return keyResolver(item); }, [keyResolver, item]);
|
|
1361
|
-
var isSelected = useMemo(function () { return selectedIds.includes(itemKey); }, [
|
|
1362
|
-
selectedIds,
|
|
1363
|
-
itemKey,
|
|
1364
|
-
]);
|
|
1361
|
+
var isSelected = useMemo(function () { return selectedIds.includes(itemKey); }, [selectedIds, itemKey]);
|
|
1365
1362
|
var _d = useArraySet(selectedIds, function (ids) { return dispatch(setSelectedIds(ids)); }), toggle = _d.toggle, addMultiple = _d.addMultiple, removeMultiple = _d.removeMultiple;
|
|
1366
1363
|
var shiftAndToggleSelected = useCallback(function () {
|
|
1367
1364
|
if (idListForEnabledItems && lastSelectedId) {
|
|
@@ -1409,10 +1406,7 @@ var useExpandCollapseActions = function (item) {
|
|
|
1409
1406
|
var selectedIds = useStandardTableState().expandedRows.selectedIds;
|
|
1410
1407
|
var _a = useStandardTableActions(), expandByIds = _a.actions.expandByIds, dispatch = _a.dispatch;
|
|
1411
1408
|
var itemKey = useMemo(function () { return keyResolver(item); }, [keyResolver, item]);
|
|
1412
|
-
var isExpanded = useMemo(function () { return selectedIds.includes(itemKey); }, [
|
|
1413
|
-
selectedIds,
|
|
1414
|
-
itemKey,
|
|
1415
|
-
]);
|
|
1409
|
+
var isExpanded = useMemo(function () { return selectedIds.includes(itemKey); }, [selectedIds, itemKey]);
|
|
1416
1410
|
var toggle = useArraySet(selectedIds, function (ids) {
|
|
1417
1411
|
return dispatch(expandByIds(ids));
|
|
1418
1412
|
}).toggle;
|
|
@@ -1452,11 +1446,7 @@ var getBackgroundColor$1 = function (backgroundResolver, item, background) {
|
|
|
1452
1446
|
return backgroundResolver ? backgroundResolver(item) : background;
|
|
1453
1447
|
};
|
|
1454
1448
|
var useBackground = function (backgroundResolver, item, background) {
|
|
1455
|
-
return useMemo(function () { return getBackgroundColor$1(backgroundResolver, item, background); }, [
|
|
1456
|
-
backgroundResolver,
|
|
1457
|
-
item,
|
|
1458
|
-
background,
|
|
1459
|
-
]);
|
|
1449
|
+
return useMemo(function () { return getBackgroundColor$1(backgroundResolver, item, background); }, [backgroundResolver, item, background]);
|
|
1460
1450
|
};
|
|
1461
1451
|
var useCellBackgroundByColumnId = function (columnId, item) {
|
|
1462
1452
|
var _a = useColumnConfigById(columnId), background = _a.background, backgroundResolver = _a.backgroundResolver;
|
|
@@ -1613,20 +1603,20 @@ var StandardTableRowExpansion = function StandardTableRowExpansion(_a) {
|
|
|
1613
1603
|
|
|
1614
1604
|
var TrWithHoverBackground = styled.tr(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n ", ";\n ", ";\n ", ";\n ", "\n"], ["\n ", "\n ", ";\n ", ";\n ", ";\n ", "\n"])), function (_a) {
|
|
1615
1605
|
var focusBackground = _a.focusBackground;
|
|
1616
|
-
return focusBackground ? "--focus-within-background: "
|
|
1606
|
+
return focusBackground ? "--focus-within-background: ".concat(focusBackground, ";") : "";
|
|
1617
1607
|
}, function (_a) {
|
|
1618
1608
|
var borderLeft = _a.borderLeft;
|
|
1619
|
-
return (borderLeft ? "border-left: "
|
|
1609
|
+
return (borderLeft ? "border-left: ".concat(borderLeft, ";") : "");
|
|
1620
1610
|
}, function (_a) {
|
|
1621
1611
|
var background = _a.background;
|
|
1622
|
-
return (background ? "background: "
|
|
1612
|
+
return (background ? "background: ".concat(background, ";") : "");
|
|
1623
1613
|
}, function (_a) {
|
|
1624
1614
|
var height = _a.height;
|
|
1625
|
-
return (height ? "height: "
|
|
1615
|
+
return (height ? "height: ".concat(height, ";") : "");
|
|
1626
1616
|
}, function (_a) {
|
|
1627
1617
|
var hoverBackground = _a.hoverBackground;
|
|
1628
1618
|
return hoverBackground
|
|
1629
|
-
? " &:hover {\n background: "
|
|
1619
|
+
? " &:hover {\n background: ".concat(hoverBackground, ";\n }\n")
|
|
1630
1620
|
: "";
|
|
1631
1621
|
});
|
|
1632
1622
|
var templateObject_1;
|
|
@@ -1649,10 +1639,7 @@ var StandardTableRow = React.memo(function StandardTableRow(_a) {
|
|
|
1649
1639
|
var background = getBackgroundColor(resolvedBackgroundResult, isSelected, isExpanded);
|
|
1650
1640
|
var hoverBackground = getHoverBackgroundColor(resolvedBackgroundResult, isSelected, isExpanded);
|
|
1651
1641
|
var focusBackground = getFocusBackgroundColor(resolvedBackgroundResult, isSelected, hoverBackground);
|
|
1652
|
-
var disabled = useMemo(function () { return checkboxDisabledResolver === null || checkboxDisabledResolver === void 0 ? void 0 : checkboxDisabledResolver(item); }, [
|
|
1653
|
-
item,
|
|
1654
|
-
checkboxDisabledResolver,
|
|
1655
|
-
]);
|
|
1642
|
+
var disabled = useMemo(function () { return checkboxDisabledResolver === null || checkboxDisabledResolver === void 0 ? void 0 : checkboxDisabledResolver(item); }, [item, checkboxDisabledResolver]);
|
|
1656
1643
|
var firstColumn = useFirstColumnConfig();
|
|
1657
1644
|
var firstColumnBackground = useCellBackgroundByColumnConfig(firstColumn, item);
|
|
1658
1645
|
var lastColumn = useLastColumnConfig();
|
|
@@ -1794,11 +1781,7 @@ var SummaryCell = React.memo(function SummaryCell(_a) {
|
|
|
1794
1781
|
? "var(--swui-sticky-column-shadow-right)"
|
|
1795
1782
|
: undefined;
|
|
1796
1783
|
var text = useMemo(function () { return summaryText === null || summaryText === void 0 ? void 0 : summaryText({ items: items }); }, [items, summaryText]);
|
|
1797
|
-
var renderResult = useMemo(function () { return renderSummaryCell === null || renderSummaryCell === void 0 ? void 0 : renderSummaryCell({ items: items, text: text }); }, [
|
|
1798
|
-
items,
|
|
1799
|
-
renderSummaryCell,
|
|
1800
|
-
text,
|
|
1801
|
-
]);
|
|
1784
|
+
var renderResult = useMemo(function () { return renderSummaryCell === null || renderSummaryCell === void 0 ? void 0 : renderSummaryCell({ items: items, text: text }); }, [items, renderSummaryCell, text]);
|
|
1802
1785
|
return (React.createElement("td", { colSpan: colSpan, style: {
|
|
1803
1786
|
borderLeft: activeBorderLeft,
|
|
1804
1787
|
position: stickyProps.sticky ? "sticky" : undefined,
|
|
@@ -1857,9 +1840,11 @@ var SummaryRowSwitcher = function SummaryRowSwitcher(_a) {
|
|
|
1857
1840
|
return React.createElement(StandardTableSummaryRow, { items: items });
|
|
1858
1841
|
};
|
|
1859
1842
|
|
|
1860
|
-
var filterItemsOnEnabledCheckboxes = function (checkboxDisabledResolver) {
|
|
1861
|
-
return
|
|
1862
|
-
|
|
1843
|
+
var filterItemsOnEnabledCheckboxes = function (checkboxDisabledResolver) {
|
|
1844
|
+
return function (item) {
|
|
1845
|
+
return (checkboxDisabledResolver === null || checkboxDisabledResolver === void 0 ? void 0 : checkboxDisabledResolver(item)) ? false : true ;
|
|
1846
|
+
};
|
|
1847
|
+
};
|
|
1863
1848
|
|
|
1864
1849
|
var StandardTableRowList = React.memo(function StandardTableRowList(_a) {
|
|
1865
1850
|
var items = _a.items, _b = _a.colIndexOffset, colIndexOffset = _b === void 0 ? 0 : _b, _c = _a.rowIndexOffset, rowIndexOffset = _c === void 0 ? 0 : _c;
|
|
@@ -2085,10 +2070,10 @@ var StandardTableHeadItem = React.memo(function StandardTableHeaderItem(_a) {
|
|
|
2085
2070
|
|
|
2086
2071
|
var getTopPosition = function (headerRowOffsetTop, columnGroupOrder, height, stickyHeader) {
|
|
2087
2072
|
if (headerRowOffsetTop && columnGroupOrder !== undefined) {
|
|
2088
|
-
return "calc("
|
|
2073
|
+
return "calc(".concat(headerRowOffsetTop, " + ").concat(height, ")");
|
|
2089
2074
|
}
|
|
2090
2075
|
else if (stickyHeader && columnGroupOrder) {
|
|
2091
|
-
return "calc(0px + "
|
|
2076
|
+
return "calc(0px + ".concat(height, ")");
|
|
2092
2077
|
}
|
|
2093
2078
|
else if (headerRowOffsetTop) {
|
|
2094
2079
|
return headerRowOffsetTop;
|
|
@@ -2155,7 +2140,7 @@ var ColGroups = function () {
|
|
|
2155
2140
|
var rowIndent = booleanOrNumberToNumber(config.rowIndent);
|
|
2156
2141
|
return (React.createElement(React.Fragment, null,
|
|
2157
2142
|
rowIndent ? (React.createElement("colgroup", null,
|
|
2158
|
-
React.createElement("col", { style: { width: "calc(var(--swui-metrics-indent) * "
|
|
2143
|
+
React.createElement("col", { style: { width: "calc(var(--swui-metrics-indent) * ".concat(rowIndent, ")") } }))) : null,
|
|
2159
2144
|
hasExtraColGroup && (React.createElement("colgroup", null,
|
|
2160
2145
|
config.enableExpandCollapse && (React.createElement("col", { style: { width: "var(--swui-expand-cell-width)" } })),
|
|
2161
2146
|
config.showRowCheckbox && (React.createElement("col", { style: { width: "var(--swui-checkbox-cell-width)" } })))),
|
|
@@ -2167,7 +2152,7 @@ var ColGroups = function () {
|
|
|
2167
2152
|
} })); })));
|
|
2168
2153
|
}),
|
|
2169
2154
|
rowIndent ? (React.createElement("colgroup", null,
|
|
2170
|
-
React.createElement("col", { style: { width: "calc(var(--swui-metrics-indent) * "
|
|
2155
|
+
React.createElement("col", { style: { width: "calc(var(--swui-metrics-indent) * ".concat(rowIndent, ")") } }))) : null));
|
|
2171
2156
|
};
|
|
2172
2157
|
|
|
2173
2158
|
var StandardTable = function StandardTable(_a) {
|
|
@@ -2243,24 +2228,30 @@ var createColumnConfig = function (itemValueResolver, options) {
|
|
|
2243
2228
|
return __assign(__assign({}, options), { itemValueResolver: itemValueResolver });
|
|
2244
2229
|
};
|
|
2245
2230
|
|
|
2246
|
-
var createStandardEditableTextCell = function () {
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
React.createElement(
|
|
2250
|
-
}
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
|
|
2256
|
-
|
|
2257
|
-
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
|
|
2231
|
+
var createStandardEditableTextCell = function () {
|
|
2232
|
+
return function (_a) {
|
|
2233
|
+
var label = _a.label, _b = _a.gridCell, editorValue = _b.editorValue, isEditing = _b.isEditing, setEditorValue = _b.setEditorValue, stopEditingAndRevert = _b.stopEditingAndRevert, lastKeyEvent = _b.lastKeyEvent, stopEditing = _b.stopEditing, stopEditingAndMove = _b.stopEditingAndMove;
|
|
2234
|
+
return isEditing ? (React.createElement(TextInput, { onValueChange: setEditorValue, value: editorValue, onDone: stopEditing, onEsc: stopEditingAndRevert, autoFocus: true, selectAllOnMount: !lastKeyEvent, onMove: stopEditingAndMove })) : (React.createElement(Indent, null,
|
|
2235
|
+
React.createElement(Text, { color: "var(--swui-primary-action-color)" }, label)));
|
|
2236
|
+
};
|
|
2237
|
+
};
|
|
2238
|
+
|
|
2239
|
+
var createEditableTextCellWithStatus = function (warningOnEmpty, crudStatusProvider, modifiedFieldProvider) {
|
|
2240
|
+
return function (_a) {
|
|
2241
|
+
var label = _a.label, item = _a.item, _b = _a.gridCell, editorValue = _b.editorValue, isEditing = _b.isEditing, setEditorValue = _b.setEditorValue, stopEditingAndRevert = _b.stopEditingAndRevert, lastKeyEvent = _b.lastKeyEvent, stopEditing = _b.stopEditing, stopEditingAndMove = _b.stopEditingAndMove, isEditable = _a.isEditable;
|
|
2242
|
+
var warnOnEmpty = typeof warningOnEmpty === "function"
|
|
2243
|
+
? warningOnEmpty(item)
|
|
2244
|
+
: warningOnEmpty;
|
|
2245
|
+
var crudStatus = crudStatusProvider
|
|
2246
|
+
? crudStatusProvider(item)
|
|
2247
|
+
: undefined;
|
|
2248
|
+
var modifiedField = modifiedFieldProvider
|
|
2249
|
+
? modifiedFieldProvider(item)
|
|
2250
|
+
: undefined;
|
|
2251
|
+
return isEditable && isEditing ? (React.createElement(TextInput, { onValueChange: setEditorValue, value: editorValue, onDone: stopEditing, onEsc: stopEditingAndRevert, autoFocus: true, selectAllOnMount: !lastKeyEvent, onMove: stopEditingAndMove })) : (React.createElement(Indent, { row: true, alignItems: "center" },
|
|
2252
|
+
React.createElement(ModifiedField, { value: label, modifiedField: modifiedField, crudStatus: crudStatus, isEditable: isEditable, warningOnEmpty: warnOnEmpty })));
|
|
2253
|
+
};
|
|
2254
|
+
};
|
|
2264
2255
|
|
|
2265
2256
|
export { CrudStatusIndicator, EditableTextCellWithCrudAndModified, GridHooksContext, GridHooksTable, ModifiedField, SmallTableCell, SmallTableHead, StandardTable, StandardTableActionsContext, StandardTableCell, StandardTableCellUi, StandardTableConfigContext, StandardTableContent, StandardTableHeadRow, StandardTableRow, StandardTableRowCheckbox, StandardTableRowList, StandardTableStateContext, StandardTableTableIdContext, TableCell, TableColumnGroupHead, TableHeadItem, TableHeadRow, TableRow, TextCell, createColumnConfig, createEditableTextCellWithStatus, createGroupConfigAndIdsForRows, createInternalStandardTableActions, createStandardEditableTextCell, createStandardTableActions, createStandardTableInitialState, createStandardTableReducer, defaultTableHeadRowHeight, defaultTableRowHeight, focusOnCell, formatColumnIdToHeaderCellLabel, formatValueLabel, hasIndicatorContent, multitypeComparator, smallTableRowWidth, tableBackgroundColorExpanded, tableBackgroundHoverColorExpanded, tableBorder, tableBorderColor, tableBorderColorExpanded, tableBorderHidden, tableBorderLeft, tableBorderLeftExpanded, useCellBackgroundByColumnConfig, useCellBackgroundByColumnId, useColumnConfigById, useColumnValueResolver, useEditableCell, useFirstColumnConfig, useGridCell, useGridNavigation, useGridNavigationOptionsFromContext, useLastColumnConfig, useLocalStateTableContext, useRevertableValue, useRowCheckbox, useStandardTableActions, useStandardTableConfig, useStandardTableId, useStandardTableState, useTableHeadCheckbox, useTableSortHeader };
|
|
2266
2257
|
//# sourceMappingURL=index.es.js.map
|