allow theming visibleRange for pager

reaviz · Jul 18, 2024 · 24949fd · 24949fd
1 parent c8d72de
commit 24949fd
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 2 deletions.
diff --git a/src/data/Pager/Pager.story.tsx b/src/data/Pager/Pager.story.tsx
@@ -1,5 +1,6 @@
 import { useState } from 'react';
 import { Pager } from './Pager';
+import { pagerTheme } from './PagerTheme';
 
 export default {
   title: 'Components/Data/Pager',
@@ -47,3 +48,20 @@ export const ShowAll = () => {
     />
   );
 };
+
+export const CustomTheme = () => {
+  const [page, setPage] = useState<number>(0);
+  const customTheme = pagerTheme;
+  customTheme.visibleRange = 'text-blue-400 font-bold';
+
+  return (
+    <Pager
+      theme={customTheme}
+      page={page}
+      size={10}
+      total={100}
+      onPageChange={setPage}
+      displayMode="all"
+    />
+  );
+};
diff --git a/src/data/Pager/Pager.tsx b/src/data/Pager/Pager.tsx
@@ -140,8 +140,10 @@ export const Pager: FC<PagerProps> = ({
           {pageCount > 1 && (
             <Stack dense>
               <Text>
-                {startItem.toLocaleString()}-{endItem.toLocaleString()} of{' '}
-                <Pluralize count={total} singular="item" />
+                <Text className={theme.visibleRange}>
+                  {startItem.toLocaleString()}-{endItem.toLocaleString()}
+                </Text>{' '}
+                of <Pluralize count={total} singular="item" />
               </Text>
             </Stack>
           )}

diff --git a/src/data/Pager/PagerTheme.ts b/src/data/Pager/PagerTheme.ts
@@ -9,6 +9,7 @@ export interface PagerTheme {
   };
   ellipsis: string;
   pagerDisplayItems: string;
+  visibleRange: string;
   control: string;
   firstPage: string;
   prevPage: string;
@@ -28,6 +29,7 @@ const baseTheme: PagerTheme = {
   },
   ellipsis: 'cursor-pointer',
   pagerDisplayItems: 'mr-1.5',
+  visibleRange: '',
   control: '[&>svg]:w-5 [&>svg]:h-5',
   firstPage: '',
   prevPage: '',