playbook_ui 13.34.1.pre.alpha.pbntr258paginationkitforreact3409 → 13.34.1.pre.alpha.pbntr258paginationkitforreact3413

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c7f034694f1d4c29ecf58164f1640c356cf3a94f42bf795f7681c9ac7b63b105
-  data.tar.gz: 55addb22902806249b335be954dfad31ca6364a73b51f79bcffb65dbe74bddde
+  metadata.gz: 2bea719eca117b3ff8e23aba95b5710c602ce62098e30fbd550fd2d0ff3dc5c1
+  data.tar.gz: 4a2a8910650f8f3ed883b567f1020554ec90060ebd5d7ddb5450867e6d5547e9
 SHA512:
-  metadata.gz: 790ef2260dd0892a15def8755ee15b4db91da65dfc1ad32ffbf2a61a1ec1ec504766f062c428e82dcf771cd9cce1ee736331b3b62b0c49c5af53d5ea271b753b
-  data.tar.gz: 800fcfb55b94927fa22e549d346b562a8ccefadbff1e0f372c8611a57f3322648212238211b4dc81f25abad6b6b8c3fe3e50c1a580855cf1b79b64250384ae6b
+  metadata.gz: 15144042ed78f1e9f87afc63a8c05e7ea9d3518156b0ec4fa254d1d002abc94c1cc070ac1dc70660bee5a3ebee8fac9e12b817525b3072e2d92b89ec3f6d7025
+  data.tar.gz: 9d195fbb90dfd2da29c1a7691bda478df7dfd4b25c0bf56b18a7be729c3ca19627381a56a020476ee641660b4c912e4450082259901e5cfe5ea79ab6968d6574

data/app/pb_kits/playbook/pb_pagination/_pagination.scss

@@ -62,7 +62,6 @@ $top_bottom_radius: 0px;
     text-decoration: none;
     font-weight: $bold;
     font-size: $text_small;
-    height: 29px;
   }
   .disabled > span {
     padding: $pagination_padding;

data/app/pb_kits/playbook/pb_pagination/_pagination.tsx

@@ -2,40 +2,42 @@ import React, { useState } from "react";
 import Icon from '../pb_icon/_icon';
 
 type PaginationProps = {
-  defaultPage?: number;
-  onPageChange?: any;
-  pageRange?: number;
-  totalPages?: number;
+  current?: number;
+  onChange?: (pageNumber: number) => void;
+  range?: number;
+  total?: number;
 };
 
 const Pagination = ({
-  defaultPage = 1,
-  onPageChange,
-  pageRange = 5,
-  totalPages = 1,
+  current = 1,
+  onChange,
+  range = 5,
+  total = 1,
 }: PaginationProps) => {
-  const [currentPage, setCurrentPage] = useState(defaultPage);
+  const [currentPage, setCurrentPage] = useState(current);
 
   const handlePageChange = (pageNumber: number) => {
-    if (pageNumber >= 1 && pageNumber <= totalPages) {
+    if (pageNumber >= 1 && pageNumber <= total) {
       setCurrentPage(pageNumber);
-      onPageChange(pageNumber);
+      if (onChange) {
+        onChange(pageNumber);
+      }
     }
   };
 
-  const renderPageButtons = () => {
-    const buttons = [];
-
+  const renderPageButtons = (): JSX.Element[] => {
+    const buttons: JSX.Element[] = [];
+  
     // Calculate pagination range with let
-    let rangeStart = Math.max(1, currentPage - Math.floor(pageRange / 2));
-    let rangeEnd = Math.min(totalPages, rangeStart + pageRange - 1);
-
-    // Adjust range if it's too short to fit the pageRange
-    if (rangeEnd - rangeStart + 1 < pageRange) {
+    let rangeStart = Math.max(1, currentPage - Math.floor(range / 2));
+    let rangeEnd = Math.min(total, rangeStart + range - 1);
+  
+    // Adjust range if it's too short to fit the range
+    if (rangeEnd - rangeStart + 1 < range) {
       if (rangeStart > 1) {
-        rangeStart = Math.max(1, rangeEnd - pageRange + 1);
+        rangeStart = Math.max(1, rangeEnd - range + 1);
       } else {
-        rangeEnd = Math.min(totalPages, rangeStart + pageRange - 1);
+        rangeEnd = Math.min(total, rangeStart + range - 1);
       }
     }
 
@@ -51,7 +53,7 @@ const Pagination = ({
         </button>
       );
     }
-
+  
     // Always display the second page button
     if (rangeStart > 2) {
       buttons.push(
@@ -79,33 +81,34 @@ const Pagination = ({
     }
 
     // Always display the second-to-last page button
-    if (rangeEnd < totalPages - 1) {
+    if (rangeEnd < total - 1) {
       buttons.push(
         <button
-            className={`pagination-number ${totalPages - 1 === currentPage ? "active" : ""}`}
-            key={totalPages - 1}
-            onClick={() => handlePageChange(totalPages - 1)}
+            className={`pagination-number ${total - 1 === currentPage ? "active" : ""}`}
+            key={total - 1}
+            onClick={() => handlePageChange(total - 1)}
         >
-          {totalPages - 1}
+          {total - 1}
         </button>
       );
     }
 
     // Always display the last page button
-    if (rangeEnd < totalPages) {
+    if (rangeEnd < total) {
       buttons.push(
         <button
-            className={`pagination-number ${totalPages === currentPage ? "active" : ""}`}
-            key={totalPages}
-            onClick={() => handlePageChange(totalPages)}
+            className={`pagination-number ${total === currentPage ? "active" : ""}`}
+            key={total}
+            onClick={() => handlePageChange(total)}
         >
-          {totalPages}
+          {total}
         </button>
       );
     }
 
     return buttons;
   };
+  
 
   return (
     <div className="pb_pagination">
@@ -119,7 +122,7 @@ const Pagination = ({
       {renderPageButtons()}
       <button
           className="pagination-right"
-          disabled={currentPage === totalPages}
+          disabled={currentPage === total}
           onClick={() => handlePageChange(currentPage + 1)}
       >
         <Icon icon="chevron-right" />

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_default.jsx

@@ -5,14 +5,14 @@ import Pagination from '../_pagination'
 const PaginationDefault = (props) => {
 
     return (
-  <>
-     <Pagination
-         defaultPage={3}
-         pageRange={5}
-         totalPages={10}
-         {...props}
-      />
-  </>
+      <>
+        <Pagination
+            current={1}
+            range={5}
+            total={10}
+            {...props}
+          />
+      </>
     )
 }
 

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx

@@ -0,0 +1,62 @@
+import React, { useState } from "react";
+import { Table, Pagination } from 'playbook-ui'
+
+
+import { data } from "./data";
+
+const PaginationPageChange = (props) => {
+
+  const [activePage, setActivePage] = useState(1);
+  const rowsPerPage = 3;
+  const totalPages = Math.ceil(data.length / rowsPerPage);
+
+  const onPageChange = (pageNumber) => {
+    setActivePage(pageNumber);
+  };
+
+  const currentData = data.slice(
+    (activePage - 1) * rowsPerPage,
+    activePage * rowsPerPage
+  );
+
+
+    return (
+      <div className="App">
+      <Table 
+          marginBottom="xs"
+          responsive="none" 
+          size="sm" 
+          {...props}
+      >
+        <Table.Head>
+          <Table.Row>
+            <Table.Header>{"Column 1"}</Table.Header>
+            <Table.Header>{"Column 2"}</Table.Header>
+            <Table.Header>{"Column 3"}</Table.Header>
+            <Table.Header>{"Column 4"}</Table.Header>
+            <Table.Header>{"Column 5"}</Table.Header>
+          </Table.Row>
+        </Table.Head>
+        <Table.Body>
+          {currentData.map((row, index) => (
+            <Table.Row key={index}>
+              {row.map((cell, cellIndex) => (
+                <Table.Cell key={cellIndex}>{cell}</Table.Cell>
+              ))}
+            </Table.Row>
+          ))}
+        </Table.Body>
+      </Table>
+ 
+      <Pagination
+          current={1}
+          onChange={onPageChange}
+          range={5}
+          total={totalPages}
+          {...props}
+      />
+    </div>
+    )
+}
+
+export default PaginationPageChange

data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md

@@ -0,0 +1 @@
+You can use the `onPageChange` prop to control the data of your table. This prop is callback function that will allow you control the state.

data/app/pb_kits/playbook/pb_pagination/docs/data.js

@@ -0,0 +1,23 @@
+export const data = [
+    ["Value 1", "Value 2", "Value 3", "Value 4", "Value 5"],
+    ["Value 6", "Value 7", "Value 8", "Value 9", "Value 10"],
+    ["Value 11", "Value 12", "Value 13", "Value 14", "Value 15"],
+    ["Value 16", "Value 17", "Value 18", "Value 19", "Value 20"],
+    ["Value 21", "Value 22", "Value 23", "Value 24", "Value 25"],
+    ["Value 26", "Value 27", "Value 28", "Value 29", "Value 30"],
+    ["Value 31", "Value 32", "Value 33", "Value 34", "Value 35"],
+    ["Value 36", "Value 37", "Value 38", "Value 39", "Value 40"],
+    ["Value 41", "Value 42", "Value 43", "Value 44", "Value 45"],
+    ["Value 46", "Value 47", "Value 48", "Value 49", "Value 50"],
+    ["Value 51", "Value 52", "Value 53", "Value 54", "Value 55"],
+    ["Value 56", "Value 57", "Value 58", "Value 59", "Value 60"],
+    ["Value 61", "Value 62", "Value 63", "Value 64", "Value 65"],
+    ["Value 66", "Value 67", "Value 68", "Value 69", "Value 70"],
+    ["Value 71", "Value 72", "Value 73", "Value 74", "Value 75"],
+    ["Value 76", "Value 77", "Value 78", "Value 79", "Value 80"],
+    ["Value 81", "Value 82", "Value 83", "Value 84", "Value 85"],
+    ["Value 86", "Value 87", "Value 88", "Value 89", "Value 90"],
+    ["Value 91", "Value 92", "Value 93", "Value 94", "Value 95"],
+    ["Value 96", "Value 97", "Value 98", "Value 99", "Value 100"],
+  ];
+  

data/app/pb_kits/playbook/pb_pagination/docs/example.yml

@@ -5,3 +5,4 @@ examples:
   
   react:
   - pagination_default: Default
+  - pagination_page_change: Page Change

data/app/pb_kits/playbook/pb_pagination/docs/index.js

@@ -1 +1,2 @@
 export { default as PaginationDefault } from './_pagination_default.jsx'
+export { default as PaginationPageChange } from './_pagination_page_change.jsx'