@workday/canvas-kit-docs 6.0.0-alpha.0-next.30 → 6.0.0-alpha.0-next.36

package/dist/mdx/react/pagination/examples/HoistedModel.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import {SecondaryButton} from '@workday/canvas-kit-react/button';
 import {
   Pagination,
   getLastPage,
@@ -16,30 +17,43 @@ export default () => {
     lastPage,
     onPageChange: number => console.log(number),
   });
+
   return (
-    <Pagination aria-label="Pagination" model={model}>
-      <Pagination.Controls>
-        <Pagination.StepToPreviousButton aria-label="Previous" />
-        <Pagination.PageList>
+    <>
+      <Pagination aria-label="Pagination" model={model}>
+        <Pagination.Controls>
+          <Pagination.StepToPreviousButton aria-label="Previous" />
+          <Pagination.PageList>
+            {({state}) =>
+              state.range.map(pageNumber => (
+                <Pagination.PageListItem key={pageNumber}>
+                  <Pagination.PageButton
+                    aria-label={`Page ${pageNumber}`}
+                    pageNumber={pageNumber}
+                  />
+                </Pagination.PageListItem>
+              ))
+            }
+          </Pagination.PageList>
+          <Pagination.StepToNextButton aria-label="Next" />
+        </Pagination.Controls>
+        <Pagination.AdditionalDetails shouldHideDetails>
           {({state}) =>
-            state.range.map(pageNumber => (
-              <Pagination.PageListItem key={pageNumber}>
-                <Pagination.PageButton aria-label={`Page ${pageNumber}`} pageNumber={pageNumber} />
-              </Pagination.PageListItem>
-            ))
+            `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(
+              state.currentPage,
+              resultCount,
+              totalCount
+            )} of ${totalCount} results`
           }
-        </Pagination.PageList>
-        <Pagination.StepToNextButton aria-label="Next" />
-      </Pagination.Controls>
-      <Pagination.AdditionalDetails shouldHideDetails>
-        {({state}) =>
-          `${getVisibleResultsMin(state.currentPage, resultCount)}-${getVisibleResultsMax(
-            state.currentPage,
-            resultCount,
-            totalCount
-          )} of ${totalCount} results`
-        }
-      </Pagination.AdditionalDetails>
-    </Pagination>
+        </Pagination.AdditionalDetails>
+      </Pagination>
+      <SecondaryButton
+        onClick={() => {
+          model.events.goTo(7);
+        }}
+      >
+        Go to Page 7
+      </SecondaryButton>
+    </>
   );
 };

package/dist/mdx/react/pagination/examples/RTL.tsx

@@ -36,7 +36,7 @@ export default () => {
           <Pagination.JumpToLastButton aria-label="Last" />
           <Pagination.GoToForm>
             <Pagination.GoToTextInput aria-label="Go to page number" />
-            <Pagination.GoToLabel>{() => `من 100 صفحات`}</Pagination.GoToLabel>
+            <Pagination.GoToLabel>{({state}) => `از ${state.lastPage} صفحه`}</Pagination.GoToLabel>
           </Pagination.GoToForm>
         </Pagination.Controls>
         <Pagination.AdditionalDetails shouldHideDetails>