@stenajs-webui/grid 13.2.0 → 13.3.0

package/dist/index.js

@@ -743,6 +743,7 @@ var createInternalStandardTableActions = function () { return ({
     sortOrder: redux.createSortOrderActions(),
     selectedIds: redux.createSelectedIdsActions(),
     expandedRows: redux.createSelectedIdsActions(),
+    fields: redux.createEntityActions(),
 }); };
 
 var getReducerIdFor = function (reducerId, reducerIdSuffix) { return reducerId + "." + reducerIdSuffix; };
@@ -756,16 +757,19 @@ var createStandardTableInitialState = function (sortBy, desc, selectedIds, expan
         sortOrder: redux.createSortOrderReducerInitialState(sortBy, desc),
         selectedIds: redux.createSelectedIdsReducerInitialState(selectedIds),
         expandedRows: redux.createSelectedIdsReducerInitialState(expandedRows),
+        fields: { lastSelectedId: undefined },
     });
 };
 var createStandardTableReducer = function (reducerId) {
     var sortOrder = redux.reducerIdGate(getReducerIdFor(reducerId, "sortOrder"), redux.createSortOrderReducer());
     var selectedIds = redux.reducerIdGate(getReducerIdFor(reducerId, "selectedIds"), redux.createSelectedIdsReducer());
     var expandedRows = redux.reducerIdGate(getReducerIdFor(reducerId, "expandedRows"), redux.createSelectedIdsReducer());
+    var fields = redux.reducerIdGate(getReducerIdFor(reducerId, "fields"), redux.createEntityReducer({}));
     return redux$1.combineReducers({
         sortOrder: sortOrder,
         selectedIds: selectedIds,
         expandedRows: expandedRows,
+        fields: fields,
     });
 };
 
@@ -1212,7 +1216,7 @@ var getStickyPropsPerColumnWithGroups = function (config) {
 
 var createStandardTableActions = function (tableId, actions) {
     return {
-        selectByIds: function (ids) {
+        setSelectedIds: function (ids) {
             return redux.reducerIdGateAction(getReducerIdFor(tableId, "selectedIds"), actions.selectedIds.setSelectedIds(ids));
         },
         clearSelection: function () {
@@ -1230,6 +1234,9 @@ var createStandardTableActions = function (tableId, actions) {
         clearSortOrder: function () {
             return redux.reducerIdGateAction(getReducerIdFor(tableId, "sortOrder"), actions.sortOrder.clearSortOrder());
         },
+        setLastSelectedId: function (lastSelectedId) {
+            return redux.reducerIdGateAction(getReducerIdFor(tableId, "fields"), actions.fields.setEntityFields({ lastSelectedId: lastSelectedId }));
+        },
     };
 };
 
@@ -1306,7 +1313,7 @@ var useColumnValueResolver = function (columnId) {
 };
 
 var StandardTableRowCheckbox = React.memo(function StandardTableRowCheckbox(_a) {
-    var value = _a.value, onValueChange = _a.onValueChange, colIndex = _a.colIndex, rowIndex = _a.rowIndex, numRows = _a.numRows, disabled = _a.disabled;
+    var value = _a.value, onValueChange = _a.onValueChange, colIndex = _a.colIndex, rowIndex = _a.rowIndex, numRows = _a.numRows, disabled = _a.disabled, onValueChangeAndShift = _a.onValueChangeAndShift, shiftPressedRef = _a.shiftPressedRef;
     var totalNumColumns = useTotalNumColumnsForRows();
     var tableId = useStandardTableId();
     var gridCell = useGridCell(Boolean(value), {
@@ -1317,27 +1324,82 @@ var StandardTableRowCheckbox = React.memo(function StandardTableRowCheckbox(_a)
         tableId: tableId,
     });
     var requiredProps = gridCell.requiredProps;
-    return (React.createElement(forms.Checkbox, __assign({ size: "small", disabled: disabled, value: value, onValueChange: onValueChange }, requiredProps)));
+    var internalOnValueChange = React.useCallback(function (value) {
+        if (shiftPressedRef.current) {
+            onValueChangeAndShift === null || onValueChangeAndShift === void 0 ? void 0 : onValueChangeAndShift(value);
+        }
+        else {
+            onValueChange === null || onValueChange === void 0 ? void 0 : onValueChange(value);
+        }
+    }, [onValueChange, onValueChangeAndShift, shiftPressedRef]);
+    return (React.createElement(forms.Checkbox, __assign({ size: "small", disabled: disabled, value: value, onValueChange: internalOnValueChange }, requiredProps)));
 });
 
-var useRowCheckbox = function (item) {
+var getIdsBetweenSelected = function (idList, selected1, selected2) {
+    if (selected1 == null || selected2 == null || idList == null) {
+        return undefined;
+    }
+    if (selected1 === selected2) {
+        return undefined;
+    }
+    var i1 = idList.indexOf(selected1);
+    var i2 = idList.indexOf(selected2);
+    if (i1 < 0 || i2 < 0) {
+        return undefined;
+    }
+    var start = Math.min(i1, i2);
+    var end = Math.max(i1, i2);
+    return idList.slice(start, end + 1);
+};
+
+var useRowCheckbox = function (item, itemIdList) {
     var keyResolver = useStandardTableConfig().keyResolver;
-    var selectedIds = useStandardTableState().selectedIds.selectedIds;
-    var _a = useStandardTableActions(), selectByIds = _a.actions.selectByIds, dispatch = _a.dispatch;
+    var _a = useStandardTableState(), selectedIds = _a.selectedIds.selectedIds, lastSelectedId = _a.fields.lastSelectedId;
+    var _b = useStandardTableActions(), _c = _b.actions, setSelectedIds = _c.setSelectedIds, setLastSelectedId = _c.setLastSelectedId, dispatch = _b.dispatch;
     var itemKey = React.useMemo(function () { return keyResolver(item); }, [keyResolver, item]);
     var isSelected = React.useMemo(function () { return selectedIds.includes(itemKey); }, [
         selectedIds,
         itemKey,
     ]);
-    var toggle = core.useArraySet(selectedIds, function (ids) {
-        return dispatch(selectByIds(ids));
-    }).toggle;
+    var _d = core.useArraySet(selectedIds, function (ids) { return dispatch(setSelectedIds(ids)); }), toggle = _d.toggle, addMultiple = _d.addMultiple, removeMultiple = _d.removeMultiple;
+    var shiftAndToggleSelected = React.useCallback(function () {
+        if (itemIdList && lastSelectedId) {
+            var idList = getIdsBetweenSelected(itemIdList, lastSelectedId, itemKey);
+            if (idList === null || idList === void 0 ? void 0 : idList.length) {
+                if (isSelected) {
+                    removeMultiple(idList);
+                }
+                else {
+                    addMultiple(idList);
+                }
+            }
+            else {
+                toggle(itemKey);
+            }
+        }
+        else {
+            toggle(itemKey);
+        }
+        dispatch(setLastSelectedId(itemKey));
+    }, [
+        itemIdList,
+        lastSelectedId,
+        dispatch,
+        setLastSelectedId,
+        itemKey,
+        isSelected,
+        removeMultiple,
+        addMultiple,
+        toggle,
+    ]);
     var toggleSelected = React.useCallback(function () {
         toggle(itemKey);
-    }, [toggle, itemKey]);
+        dispatch(setLastSelectedId(itemKey));
+    }, [toggle, itemKey, dispatch, setLastSelectedId]);
     return {
         isSelected: isSelected,
         toggleSelected: toggleSelected,
+        shiftAndToggleSelected: shiftAndToggleSelected,
     };
 };
 
@@ -1569,7 +1631,7 @@ var TrWithHoverBackground = styled__default['default'].tr(templateObject_1 || (t
 var templateObject_1;
 
 var StandardTableRow = React.memo(function StandardTableRow(_a) {
-    var item = _a.item, rowIndex = _a.rowIndex, numRows = _a.numRows, colIndexOffset = _a.colIndexOffset, alwaysVisible = _a.alwaysVisible;
+    var item = _a.item, itemIdList = _a.itemIdList, rowIndex = _a.rowIndex, numRows = _a.numRows, colIndexOffset = _a.colIndexOffset, alwaysVisible = _a.alwaysVisible, shiftPressedRef = _a.shiftPressedRef;
     var trRef = React.useRef(null);
     var totalNumColumns = useTotalNumColumns();
     var stickyCheckboxColumn = useStandardTableConfig().stickyCheckboxColumn;
@@ -1577,7 +1639,7 @@ var StandardTableRow = React.memo(function StandardTableRow(_a) {
     var columnIndexPerColumnId = useColumnIndexPerColumnIdContext().columnIndexPerColumnId;
     var _b = useStandardTableConfig(), showRowCheckbox = _b.showRowCheckbox, rowBackgroundResolver = _b.rowBackgroundResolver, checkboxDisabledResolver = _b.checkboxDisabledResolver, enableGridCell = _b.enableGridCell, rowIndent = _b.rowIndent, enableExpandCollapse = _b.enableExpandCollapse;
     var isExpanded = useExpandCollapseActions(item).isExpanded;
-    var _c = useRowCheckbox(item), isSelected = _c.isSelected, toggleSelected = _c.toggleSelected;
+    var _c = useRowCheckbox(item, itemIdList), isSelected = _c.isSelected, toggleSelected = _c.toggleSelected, shiftAndToggleSelected = _c.shiftAndToggleSelected;
     var visible = core.useOnScreen(trRef, {
         rootMargin: "400px 0px 400px 0px",
         threshold: 0,
@@ -1630,7 +1692,7 @@ var StandardTableRow = React.memo(function StandardTableRow(_a) {
                         : undefined,
                 } },
                 React.createElement(core.Row, { width: "var(--swui-checkbox-cell-width)", minWidth: "var(--swui-checkbox-cell-width)", alignItems: "center", justifyContent: "center" },
-                    React.createElement(StandardTableRowCheckbox, { disabled: disabled, value: isSelected, onValueChange: toggleSelected, colIndex: colIndexOffset + (enableExpandCollapse ? 1 : 0), rowIndex: rowIndex, numRows: numRows })))),
+                    React.createElement(StandardTableRowCheckbox, { disabled: disabled, value: isSelected, onValueChange: toggleSelected, onValueChangeAndShift: shiftAndToggleSelected, colIndex: colIndexOffset + (enableExpandCollapse ? 1 : 0), rowIndex: rowIndex, numRows: numRows, shiftPressedRef: shiftPressedRef })))),
             groupConfigsAndIds.map(function (_a, groupIndex) {
                 var groupConfig = _a.groupConfig, groupId = _a.groupId;
                 return (React.createElement(React.Fragment, { key: groupId }, groupConfig.columnOrder.map(function (columnId, index) { return (React.createElement(StandardTableCell, { key: columnId, columnId: columnId, item: item, colIndex: colIndexOffset + columnIndexPerColumnId[columnId], rowIndex: rowIndex, numRows: numRows, borderFromGroup: getCellBorderFromGroup(groupIndex, index, groupConfig.borderLeft), disableBorderLeft: groupIndex === 0 && index === 0 })); })));
@@ -1653,6 +1715,8 @@ var StandardTableRow = React.memo(function StandardTableRow(_a) {
         numRows,
         rowIndent,
         rowIndex,
+        shiftAndToggleSelected,
+        shiftPressedRef,
         showRowCheckbox,
         stickyCheckboxColumn,
         toggleSelected,
@@ -1707,6 +1771,7 @@ var StandardTableRowList = React.memo(function StandardTableRowList(_a) {
      * rows after sorting.
      */
     var sortCounterRef = React.useRef(0);
+    var shiftPressedRef = React.useRef(false);
     var _d = useStandardTableConfig(), keyResolver = _d.keyResolver, disableInfiniteList = _d.disableInfiniteList;
     var _e = useStandardTableState().sortOrder, sortBy = _e.sortBy, desc = _e.desc;
     var valueResolver = useColumnValueResolver(sortBy);
@@ -1727,7 +1792,29 @@ var StandardTableRowList = React.memo(function StandardTableRowList(_a) {
         sortCounterRef.current++;
         return sortedList;
     }, [items, valueResolver, desc]);
-    return (React.createElement(React.Fragment, { key: sortCounterRef.current }, sortedItems.map(function (item, index) { return (React.createElement(StandardTableRow, { alwaysVisible: disableInfiniteList || sortedItems.length < 30, item: item, key: keyResolver(item), colIndexOffset: colIndexOffset, rowIndex: index + rowIndexOffset, numRows: sortedItems.length })); })));
+    var itemIdList = React.useMemo(function () { return sortedItems.map(function (l) { return keyResolver(l); }); }, [
+        sortedItems,
+        keyResolver,
+    ]);
+    React.useEffect(function () {
+        var keyUp = function (ev) {
+            if (ev.key === "Shift") {
+                shiftPressedRef.current = false;
+            }
+        };
+        var keyDown = function (ev) {
+            if (ev.key === "Shift") {
+                shiftPressedRef.current = true;
+            }
+        };
+        document.addEventListener("keyup", keyUp);
+        document.addEventListener("keydown", keyDown);
+        return function () {
+            document.removeEventListener("keyup", keyUp);
+            document.removeEventListener("keydown", keyDown);
+        };
+    }, []);
+    return (React.createElement(React.Fragment, { key: sortCounterRef.current }, sortedItems.map(function (item, index) { return (React.createElement(StandardTableRow, { alwaysVisible: disableInfiniteList || sortedItems.length < 30, item: item, itemIdList: itemIdList, key: itemIdList[index], colIndexOffset: colIndexOffset, rowIndex: index + rowIndexOffset, numRows: sortedItems.length, shiftPressedRef: shiftPressedRef })); })));
 });
 
 var StandardTableContent = React.memo(function StandardTableContent(_a) {
@@ -1761,7 +1848,7 @@ var StandardTableContent = React.memo(function StandardTableContent(_a) {
 var useTableHeadCheckbox = function (items) {
     var keyResolver = useStandardTableConfig().keyResolver;
     var selectedIds = useStandardTableState().selectedIds.selectedIds;
-    var _a = useStandardTableActions(), _b = _a.actions, selectByIds = _b.selectByIds, clearSelection = _b.clearSelection, dispatch = _a.dispatch;
+    var _a = useStandardTableActions(), _b = _a.actions, setSelectedIds = _b.setSelectedIds, clearSelection = _b.clearSelection, dispatch = _a.dispatch;
     var selectionIsEmpty = selectedIds.length === 0;
     var allItemsAreSelected = !items
         ? false
@@ -1769,7 +1856,7 @@ var useTableHeadCheckbox = function (items) {
     var onClickCheckbox = React.useCallback(function () {
         if (items) {
             if (selectionIsEmpty) {
-                dispatch(selectByIds(items.map(function (item) { return keyResolver(item); })));
+                dispatch(setSelectedIds(items.map(function (item) { return keyResolver(item); })));
             }
             else {
                 dispatch(clearSelection());
@@ -1781,7 +1868,7 @@ var useTableHeadCheckbox = function (items) {
         dispatch,
         items,
         keyResolver,
-        selectByIds,
+        setSelectedIds,
     ]);
     return {
         selectionIsEmpty: selectionIsEmpty,
@@ -1974,12 +2061,10 @@ var StandardTable = function StandardTable(_a) {
     var localTableContext = useLocalStateTableContext(tableId !== null && tableId !== void 0 ? tableId : generatedTableId, createStandardTableInitialState(initialSortOrder, initialSortOrderDesc)).tableContext;
     var currentTableContext = tableContext || localTableContext;
     var state = currentTableContext.state, actions = currentTableContext.actions, dispatch = currentTableContext.dispatch;
-    var actionsContext = React.useMemo(function () {
-        return {
-            actions: actions,
-            dispatch: dispatch,
-        };
-    }, [actions, dispatch]);
+    var actionsContext = React.useMemo(function () { return ({
+        actions: actions,
+        dispatch: dispatch,
+    }); }, [actions, dispatch]);
     var usingColumnGroups = Boolean(columnGroupOrder !== null && columnGroupOrder !== void 0 ? columnGroupOrder : "columnGroupOrder" in config);
     var columnGroupsFromConfig = "columnGroups" in config ? config.columnGroups : undefined;
     var columnGroupOrderFromConfig = "columnGroupOrder" in config ? config.columnGroupOrder : undefined;