feat(ui): add jump to option for gallery pagination

Author: Mary Hipp

invokeai/frontend/web/src/features/gallery/components/ImageGrid/GalleryPagination.tsx

@@ -1,7 +1,7 @@
-import { Button, Flex, IconButton, Spacer } from '@invoke-ai/ui-library';
+import { Button, CompositeNumberInput, Flex, Icon, IconButton, Spacer } from '@invoke-ai/ui-library';
 import { ELLIPSIS, useGalleryPagination } from 'features/gallery/hooks/useGalleryPagination';
 import { useCallback } from 'react';
-import { PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi';
+import { PiCaretLeftBold, PiCaretRightBold, PiDotsThreeBold } from 'react-icons/pi';
 
 export const GalleryPagination = () => {
   const { goPrev, goNext, isPrevEnabled, isNextEnabled, pageButtons, goToPage, currentPage, total } =
@@ -15,48 +15,63 @@ export const GalleryPagination = () => {
     goNext();
   }, [goNext]);
 
+  const onChangeJumpTo = useCallback(
+    (v: number) => {
+      goToPage(v - 1);
+    },
+    [goToPage]
+  );
+
   if (!total) {
     return null;
   }
 
   return (
-    <Flex gap={2} alignItems="center" w="full">
-      <IconButton
-        size="sm"
-        aria-label="prev"
-        icon={<PiCaretLeftBold />}
-        onClick={onClickPrev}
-        isDisabled={!isPrevEnabled}
-        variant="ghost"
-      />
-      <Spacer />
-      {pageButtons.map((page, i) => {
-        if (page === ELLIPSIS) {
-          return (
-            <Button size="sm" key={`ellipsis_${i}`} variant="link" isDisabled>
-              ...
-            </Button>
-          );
-        }
-        return (
-          <Button
-            size="sm"
-            key={page}
-            onClick={goToPage.bind(null, page - 1)}
-            variant={currentPage === page - 1 ? 'solid' : 'outline'}
-          >
-            {page}
-          </Button>
-        );
-      })}
-      <Spacer />
-      <IconButton
-        size="sm"
-        aria-label="next"
-        icon={<PiCaretRightBold />}
-        onClick={onClickNext}
-        isDisabled={!isNextEnabled}
-        variant="ghost"
+    <Flex justifyContent="space-between" alignItems="center" w="full">
+      <Spacer w="auto" />
+      <Flex flexGrow="1" justifyContent="center">
+        <Flex gap={1} alignItems="center">
+          <IconButton
+            size="xs"
+            aria-label="prev"
+            icon={<PiCaretLeftBold />}
+            onClick={onClickPrev}
+            isDisabled={!isPrevEnabled}
+            variant="ghost"
+          />
+          {pageButtons.map((page, i) => {
+            if (page === ELLIPSIS) {
+              return <Icon as={PiDotsThreeBold} boxSize="4" key={`ellipsis-${i}`} />;
+            }
+            return (
+              <Button
+                size="xs"
+                key={page}
+                onClick={goToPage.bind(null, page - 1)}
+                variant={currentPage === page - 1 ? 'solid' : 'outline'}
+              >
+                {page}
+              </Button>
+            );
+          })}
+          <IconButton
+            size="xs"
+            aria-label="next"
+            icon={<PiCaretRightBold />}
+            onClick={onClickNext}
+            isDisabled={!isNextEnabled}
+            variant="ghost"
+          />
+        </Flex>
+      </Flex>
+      <CompositeNumberInput
+        size="xs"
+        maxW="60px"
+        value={currentPage + 1}
+        min={1}
+        max={total}
+        step={1}
+        onChange={onChangeJumpTo}
       />
     </Flex>
   );