(Un)Select multiple objects with single tap

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx

@@ -301,6 +301,7 @@ const ListObjects = ({
   const [loadingLocking, setLoadingLocking] = useState<boolean>(true);
   const [lockingEnabled, setLockingEnabled] = useState<boolean>(false);
   const [rewindSelect, setRewindSelect] = useState<boolean>(false);
+  const [selectedMainObject, setSelectedMainObject] = useState<string|null>(null);
   const [selectedObjects, setSelectedObjects] = useState<string[]>([]);
   const [previewOpen, setPreviewOpen] = useState<boolean>(false);
   const [selectedPreview, setSelectedPreview] = useState<BucketObject | null>(
@@ -714,6 +715,7 @@ const ListObjects = ({
     if (refresh) {
       setSnackBarMessage(`Objects deleted successfully.`);
       setSelectedObjects([]);
+      setSelectedMainObject(null);
       setLoading(true);
     }
   };
@@ -1028,26 +1030,6 @@ const ListObjects = ({
     setSelectedPreview(null);
   };
 
-  const selectListObjects = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const targetD = e.target;
-    const value = targetD.value;
-    const checked = targetD.checked;
-
-    let elements: string[] = [...selectedObjects]; // We clone the selectedBuckets array
-
-    if (checked) {
-      // If the user has checked this field we need to push this to selectedBucketsList
-      elements.push(value);
-    } else {
-      // User has unchecked this field, we need to remove it from the list
-      elements = elements.filter((element) => element !== value);
-    }
-    setSelectedObjects(elements);
-    setSelectedInternalPaths(null);
-
-    return elements;
-  };
-
   const sortChange = (sortData: any) => {
     const newSortDirection = get(sortData, "sortDirection", "DESC");
     setCurrentSortField(sortData.sortBy);
@@ -1069,6 +1051,49 @@ const ListObjects = ({
     payload = sortASC.reverse();
   }
 
+  const selectListObjects = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const targetD = e.target;
+    const value = targetD.value;
+    let checked = targetD.checked;
+    // @ts-ignore shiftKey is defined for click events
+    const shift: bool = e.nativeEvent.shiftKey;
+    // @ts-ignore ctrlKey is defined for click events
+    const ctrl: bool = e.nativeEvent.ctrlKey;
+    let elements: string[] = ctrl ? [...selectedObjects] : []; // We clone the selectedBuckets array
+
+    let mainObject = value;
+    // Use the shift effect if different elements are selected
+    if (shift && selectedMainObject !== null) {
+      // Repeat the previous steps for everyone in the range
+      mainObject = selectedMainObject;
+      checked = elements.indexOf(mainObject) !== -1 || (shift && !ctrl);
+    } else {
+      setSelectedMainObject(value);
+    }
+
+    const [min, max] = [
+      payload.findIndex(object => object.name === value),
+      payload.findIndex(object => object.name === mainObject),
+    ].sort((a, b) => a - b); // correctly sort an array of numbers
+    for (let i = min; i <= max; i++) {
+      const current = payload[i].name;
+      if (checked) {
+        // If the user has checked this field we need to push this to selectedBucketsList
+        if (elements.indexOf(current) === -1) {
+          elements.push(current);
+        }
+      } else {
+        // User has unchecked this field, we need to remove it from the list
+        elements = elements.filter((element) => element !== current);
+      }
+    }
+
+    setSelectedObjects(elements);
+    setSelectedInternalPaths(null);
+
+    return elements;
+  };
+
   const selectAllItems = () => {
     setSelectedInternalPaths(null);