@onehat/ui 0.4.98 → 0.4.99

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onehat/ui",
-	"version": "0.4.98",
+	"version": "0.4.99",
 	"description": "Base UI for OneHat apps",
 	"main": "src/index.js",
 	"type": "module",

package/src/Components/Grid/Grid.js

@@ -208,6 +208,7 @@ function GridComponent(props) {
 			onRowDrop,
 			onDragStart,
 			onDragEnd,
+			rowLongPressDelayMs,
 
 			// withComponent
 			self,
@@ -300,6 +301,7 @@ function GridComponent(props) {
 		[localColumnsConfig, setLocalColumnsConfigRaw] = useState([]),
 		[isReorderMode, setIsReorderMode] = useState(false),
 		showRowHandle = showSelectHandle || areRowsDragSource || (canRowsReorder && isReorderMode),
+		rowLongPressDelay = rowLongPressDelayMs ?? ((areRowsDragSource || canRowsReorder) ? 800 : undefined),
 		[lastMeasuredContainerHeight, setLastMeasuredContainerHeight] = useState(0),
 		getMeasurementPhase = () => {
 			return measurementPhaseRaw.current;
@@ -469,11 +471,12 @@ function GridComponent(props) {
 				<Pressable
 					dataSet={{ ix: index }}
 					{...testProps(getRowTestId ? getRowTestId(row) : ((Repository ? Repository.schema.name : 'GridRow') + '-' + item?.id))}
+					delayLongPress={rowLongPressDelay}
 					onPress={(e) => {
 						if (e.preventDefault && e.cancelable) {
 							e.preventDefault();
 						}
-						if (isHeaderRow || isReorderMode) {
+						if (isHeaderRow) {
 							return
 						}
 						if (CURRENT_MODE === UI_MODE_WEB) {
@@ -485,6 +488,9 @@ function GridComponent(props) {
 									}
 									break;
 								case DOUBLE_CLICK:
+									if (isReorderMode) {
+										return; // don't allow double-clicks while in reorder mode
+									}
 									if (editorType === EDITOR_TYPE__SIDE) {
 										// For side-editors, a double-click just acts like a single click
 										if (!getIsEditorShown()) {
@@ -929,26 +935,58 @@ function GridComponent(props) {
 		onRowReorderEnd = (item, monitor) => {
 			const
 				{ ix: dropIx, useBottom, marker, rows, dragIx } = cachedDragElements.current,
-				shouldMove = dropIx !== dragIx;
-			if (shouldMove && dropIx !== -1) {
-				// Update the row with the new ix
-				let dragRecord,
-					dropRecord;
+				selectionList = item?.getSelection ? item.getSelection() : (dragSelectionRef.current || selection || []);
+			if (dropIx === -1) {
+				marker.remove();
+				cachedDragElements.current = null;
+				return;
+			}
+
+			const
+				// normalize the current selection to ids
+				itemsList = Repository ? entities : data,
+				dragItem = Repository ? Repository.getByIx(dragIx) : itemsList?.[dragIx],
+				selectionIds = _.compact(_.map(selectionList, (selectedItem) => {
+					if (!selectedItem) {
+						return null;
+					}
+					if (_.isObject(selectedItem)) {
+						return Repository ? selectedItem.id : selectedItem[idIx];
+					}
+					return selectedItem;
+				})),
+				// decide if we're moving the selected items or just the dragged item
+				dragItemId = dragItem ? (Repository ? dragItem.id : dragItem[idIx]) : null,
+				useSelection = !!(dragItemId && selectionIds.includes(dragItemId)),
+				dragItems = useSelection ? selectionIds : (dragItemId ? [dragItemId] : []),
+				// get the indices of the selected items
+				selectedIndicesRaw = Repository
+					? _.map(dragItems, (id) => itemsList?.findIndex((item) => item?.id === id))
+					: _.map(dragItems, (id) => itemsList?.findIndex((item) => item?.[idIx] === id)),
+				selectedIndices = _.uniq(_.filter(selectedIndicesRaw, (ix) => ix > -1)).sort((a, b) => a - b),
+				selectedIndicesSet = new Set(selectedIndices),
+				insertionIndexOriginal = useBottom ? dropIx + 1 : dropIx,
+				// get the drop record
+				dropRecord = Repository ? Repository.getByIx(dropIx) : itemsList?.[dropIx],
+				dropRecordId = dropRecord ? (Repository ? dropRecord.id : dropRecord[idIx]) : null,
+				// decide if we should move
+				shouldMove = !dropRecordId || !selectionIds.includes(dropRecordId);
+
+			if (shouldMove && selectedIndices.length) {
 				if (Repository) {
 					if (!Repository.isDestroyed) {
-						dragRecord = Repository.getByIx(dragIx);
-						dropRecord = Repository.getByIx(dropIx);
-						if (dropRecord) {
-							Repository.reorder(dragRecord, dropRecord, useBottom ? DROP_POSITION_AFTER : DROP_POSITION_BEFORE);
+						if (dropRecord && dragItems.length) {
+							Repository.reorder(dragItems, dropRecord, useBottom ? DROP_POSITION_AFTER : DROP_POSITION_BEFORE);
 						}
 					}
-				} else {
-					function arrayMove(arr, fromIndex, toIndex) {
-						var element = arr[fromIndex];
-						arr.splice(fromIndex, 1);
-						arr.splice(toIndex, 0, element);
-					}
-					arrayMove(data, compensatedDragIx, finalDropIx);
+				} else if (itemsList && itemsList.length) {
+					const
+						removedBefore = _.filter(selectedIndices, (ix) => ix < insertionIndexOriginal).length,
+						insertionIndex = insertionIndexOriginal - removedBefore,
+						selectedItems = _.map(selectedIndices, (ix) => itemsList[ix]),
+						remainingItems = _.filter(itemsList, (entry, ix) => !selectedIndicesSet.has(ix));
+					remainingItems.splice(insertionIndex, 0, ...selectedItems);
+					itemsList.splice(0, itemsList.length, ...remainingItems);
 				}
 			}
 

package/src/Components/Tree/Tree.js

@@ -110,6 +110,7 @@ function TreeComponent(props) {
 			showHeaderToolbar = true,
 			showHovers = true,
 			showSelectHandle = true,
+			nodeLongPressDelayMs,
 			isNodeSelectable = true,
 			isNodeHoverable = true,
 			allowToggleSelection = true, // i.e. single click with no shift key toggles the selection of the node clicked on
@@ -219,6 +220,7 @@ function TreeComponent(props) {
 		[highlitedDatum, setHighlitedDatum] = useState(null),
 		[treeSearchValue, setTreeSearchValue] = useState(''),
 		showNodeHandle = showSelectHandle || areNodesDragSource,
+		nodeLongPressDelay = nodeLongPressDelayMs ?? ((areNodesDragSource || canNodesMoveInternally) ? 800 : undefined),
 		// state getters & setters
 		getTreeNodeData = () => {
 			return treeNodeData.current;
@@ -1092,6 +1094,7 @@ function TreeComponent(props) {
 			return <Pressable
 						{...testProps((Repository ? Repository.schema.name : 'TreeNode') + '-' + item?.id)}
 						key={item.hash}
+						delayLongPress={nodeLongPressDelay}
 						onPress={(e) => {
 							if (e.preventDefault && e.cancelable) {
 								e.preventDefault();