avine-react-components - npm Package Compare versions

Comparing version 0.1.19 to 0.1.20

dist/avine-react-components.cjs.development.js

@@ -9,2 +9,3 @@ 'use strict';
 var React__default = _interopDefault(React);
+var utils = require('components/table/utils');
 var lu = require('react-icons/lu');
@@ -14,11 +15,11 @@ var react = require('@headlessui/react');
 const MAX_BUTTONS_PER_VIEW = 7;
-const usePagination = (dataLength, rowsPerPage) => {
+const usePagination = (columns, data, rowsPerPage) => {
   const [currentPage, setCurrentPage] = React.useState(1);
   const maxPages = React.useMemo(() => {
-    const totalPages = Math.ceil(dataLength / rowsPerPage);
+    const totalPages = Math.ceil(data.length / rowsPerPage);
     if (totalPages < currentPage) setCurrentPage(totalPages);
     return totalPages;
-  }, [dataLength, rowsPerPage]);
+  }, [data, rowsPerPage]);
   const pages = React.useMemo(() => {
-    if (dataLength > 0) {
+    if (data.length > 0) {
       if (maxPages <= 1) return [];
@@ -90,3 +91,3 @@ if (maxPages <= 5) return Array.from({
     return [];
-  }, [dataLength, currentPage, rowsPerPage]);
+  }, [data, currentPage, rowsPerPage]);
   const {
@@ -96,3 +97,3 @@ startIndex,
   } = React.useMemo(() => {
-    if (dataLength > 0) {
+    if (data.length > 0) {
       const startIndex = (currentPage - 1) * rowsPerPage;
@@ -106,3 +107,5 @@ const endIndex = startIndex + rowsPerPage;
     return [];
-  }, [dataLength, currentPage, rowsPerPage]);
+  }, [data, currentPage, rowsPerPage]);
+  const [tableColumns, setTableColumns] = React.useState(columns);
+  const [tableData, setTableData] = React.useState(data.slice(startIndex, endIndex));
   const handlePreviousPage = () => {
@@ -117,11 +120,23 @@ if (currentPage > 1) setCurrentPage(current => current - 1);
   };
+  const handleSortData = column => {
+    if (column.sortable) {
+      const {
+        columns: sortedColumn,
+        data: sortedData
+      } = utils.sortData(column.key, tableColumns, data);
+      setTableColumns(sortedColumn);
+      setTableData(sortedData.slice(startIndex, endIndex));
+    }
+    return undefined;
+  };
   return {
     maxPages,
     currentPage,
+    tableColumns,
+    tableData,
     pages,
-    startIndex,
-    endIndex,
     handlePreviousPage,
     handleNextPage,
-    handlePageChange
+    handlePageChange,
+    handleSortData
   };
@@ -187,25 +202,10 @@ };
     currentPage,
+    tableColumns,
+    tableData,
     handlePreviousPage,
     handleNextPage,
     handlePageChange,
-    startIndex,
-    endIndex
-  } = usePagination(data.length, itemsPerPage);
-  const [tableData, setTableData] = React.useState(data.slice(startIndex, endIndex));
-  const [tableColumns, setTableColumns] = React.useState(columns);
+    handleSortData
+  } = usePagination(columns, data, itemsPerPage);
   const emptyText = emptyDataText ? emptyDataText : 'Não existem dados para exibição';
-  const handleSortData = column => {
-    if (column.sortable) {
-      const {
-        columns: sortedColumn,
-        data: sortedData
-      } = sortData(column.key, tableColumns, data);
-      setTableColumns(sortedColumn);
-      setTableData(sortedData.slice(startIndex, endIndex));
-    }
-    return undefined;
-  };
-  React.useEffect(() => setTableColumns(columns), [columns]);
-  React.useEffect(() => setTableData(data.slice(startIndex, endIndex)), [data]);
-  React.useEffect(() => setTableData(data.slice(startIndex, endIndex)), [startIndex, endIndex]);
   return /*#__PURE__*/React__default.createElement("div", {
@@ -212,0 +212,0 @@ className: "w-full"

dist/avine-react-components.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,a=require("react-icons/lu"),n=require("@headlessui/react");const l=(e,r)=>{const[a,n]=t.useState(1),l=t.useMemo(()=>{const t=Math.ceil(e/r);return t<a&&n(t),t},[e,r]),s=t.useMemo(()=>{if(e>0){if(l<=1)return[];if(l<=5)return Array.from({length:l}).map((e,t)=>t+1);if(a<5)return Array.from({length:7}).map((e,t)=>{switch(t){case 0:return 1;case 1:return 2;case 2:return 3;case 3:return 4;case 4:return 5;case 5:return"...";default:return l}});if(a>l-4)return Array.from({length:7}).map((e,t)=>{switch(t){case 0:return 1;case 1:return"...";case 2:return l-4;case 3:return l-3;case 4:return l-2;case 5:return l-1;default:return l}});if(a>=5&&a<=l-4)return Array.from({length:7}).map((e,t)=>{switch(t){case 0:return 1;case 1:return"...";case 2:return a-1;case 3:return a;case 4:return a+1;case 5:return"...";default:return l}})}return[]},[e,a,r]),{startIndex:o,endIndex:c}=t.useMemo(()=>{if(e>0){const e=(a-1)*r;return{startIndex:e,endIndex:e+r}}return[]},[e,a,r]);return{maxPages:l,currentPage:a,pages:s,startIndex:o,endIndex:c,handlePreviousPage:()=>{a>1&&n(e=>e-1)},handleNextPage:()=>{a<l&&n(e=>e+1)},handlePageChange:e=>{e>=1&&e<=l&&n(e)}}},s=(e,t,r)=>{const a=t.find(t=>t.key.toString()===e.toString());if(a){const n=a.sortableOrder===exports.ETableColumnOrder.Asc?exports.ETableColumnOrder.Desc:exports.ETableColumnOrder.Asc;let l=[];return n===exports.ETableColumnOrder.Asc&&(l=((e,t)=>{const r=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"});return e.sort((e,a)=>r.compare(e[t.toString()],a[t.toString()]))})(r,e)),n===exports.ETableColumnOrder.Desc&&(l=(e=>e.reverse())(r)),{columns:t.map(t=>(t.key.toString()===e.toString()&&(t.sortableOrder=n),t.key.toString()!==e.toString()&&(t.sortableOrder=void 0),t)),data:l}}return{columns:t,data:r}},o=(e,t)=>e.reduce((e,t)=>e&&e[t]?e[t]:null,t);var c;(c=exports.ETableColumnOrder||(exports.ETableColumnOrder={})).Asc="asc",c.Desc="desc";const u=(e,t)=>e.formatter?e.formatter(t):o(e.key,t);exports.Table=e=>{let{isLoading:o,columns:c,data:i,emptyDataText:m,rowsPerPage:d=10,searchable:g=!1,fixed:p=!1,viewOnly:x=!1}=e;const[f,b]=t.useState(d),{pages:y,currentPage:h,handlePreviousPage:E,handleNextPage:v,handlePageChange:w,startIndex:N,endIndex:C}=l(i.length,f),[k,P]=t.useState(i.slice(N,C)),[O,S]=t.useState(c),I=m||"Não existem dados para exibição";return t.useEffect(()=>S(c),[c]),t.useEffect(()=>P(i.slice(N,C)),[i]),t.useEffect(()=>P(i.slice(N,C)),[N,C]),r.createElement("div",{className:"w-full"},!x&&r.createElement("div",{className:"w-full flex space-x-4 justify-end mb-4"},r.createElement("div",{className:"w-full flex space-x-4 justify-end"},g&&r.createElement("div",{className:"relative flex-1"},r.createElement(a.LuSearch,{className:"absolute top-2.5 left-2 text-gray-300",size:20}),r.createElement("input",{type:"text",id:"search-input",placeholder:"Pesquisar",className:"border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full py-2.5 pl-8 pr-4 outline-none"})),r.createElement("div",{className:"flex flex-nowrap items-center space-x-2 text-sm text-gray-400"},r.createElement("span",null,"Exibindo"),r.createElement("select",{value:f,onChange:e=>b(Number(e.target.value)),className:"bg-green-50 border border-green-300 text-green-700 font-medium text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-2"},r.createElement("option",{value:10,title:"10 itens por página"},"10"),r.createElement("option",{value:50,title:"50 itens por página"},"50"),r.createElement("option",{value:75,title:"75 itens por página"},"75"),r.createElement("option",{value:100,title:"100 itens por página"},"100")),r.createElement("span",null,"de ",i.length," resultados")),r.createElement(n.Menu,null,r.createElement(n.Menu.Button,{className:"px-2 -py-1 text-sm font-medium text-center flex items-center rounded-lg border border-transparent hover:border-gray-200"},r.createElement(a.LuMoreVertical,null)),r.createElement(n.Menu.Items,{className:"flex flex-col absolute right-0 top-12 bg-white shadow-md border rounded-xl p-4"},r.createElement(n.Menu.Item,null,r.createElement("button",{onClick:()=>{},type:"button",className:"px-3 py-2 text-sm font-medium text-center flex items-center"},r.createElement(a.LuDownload,{className:"mr-2"})," Download")))))),r.createElement("div",{className:"w-full overflow-x-auto"},r.createElement("table",{className:"w-full text-sm text-left text-gray-500 "+(p??"table-fixed")},r.createElement("thead",{className:"text-green-700 capitalize bg-green-50 whitespace-nowrap"},r.createElement("tr",null,O.map((e,t)=>!1!==e.visible?r.createElement("th",{key:t,scope:"col",className:"py-3 px-6 whitespace-nowrap",onClick:()=>(e=>{if(e.sortable){const{columns:t,data:r}=s(e.key,O,i);S(t),P(r.slice(N,C))}})(e)},r.createElement("div",{className:"flex items-center justify-between space-x-4"},r.createElement("span",null,e.name),e.sortable&&r.createElement("div",{className:"flex flex-col items-center justify-around"},r.createElement(a.LuChevronUp,{size:16,className:"asc"===e.sortableOrder?"text-green-700":"text-gray-300"}),r.createElement(a.LuChevronDown,{size:16,className:"desc"===e.sortableOrder?"-mt-1.5 text-green-700":"-mt-1.5 text-gray-300"})))):null))),r.createElement("tbody",{className:"overflow-y-auto"},!o&&k.map((e,t)=>r.createElement("tr",{key:t,className:"hover:bg-green-50 [&:not(:last-child)]:border-b"},O.map((t,a)=>!1!==t.visible?r.createElement("td",0===a?{scope:"row",key:a,className:u(t,e)?"py-4 px-6 whitespace-nowrap hover:bg-green-100":'py-4 px-6 whitespace-nowrap hover:bg-green-100 before:content-["(vazio)"] text-gray-300'}:{key:a,className:u(t,e)?"py-4 px-6 whitespace-nowrap hover:bg-green-100":'py-4 px-6 whitespace-nowrap hover:bg-green-100 before:content-["(vazio)"] text-gray-300'},r.createElement("span",null,u(t,e))):null))))),o&&r.createElement("div",{className:"w-full flex justify-center mt-4 text-sm"},r.createElement("p",{className:"text-gray-500"},"Carregando...")),!o&&i.length<=0&&r.createElement("div",{className:"w-full flex justify-center mt-4 text-sm"},r.createElement("p",{className:"text-gray-500"},I))),!o&&i.length>f&&r.createElement("nav",{className:"w-full flex justify-end mt-6"},r.createElement("ul",{className:"inline-flex -space-x-px"},r.createElement("li",null,r.createElement("a",{onClick:E,className:"select-none px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 cursor-pointer"},"Anterior")),y.map((e,t)=>r.createElement("li",{key:t},r.createElement("a",{onClick:"number"==typeof e?()=>w(e):void 0,className:e===h?"px-3 py-2 text-green-600 border border-gray-300 bg-green-50 hover:bg-green-100 hover:text-green-700 cursor-pointer select-none":"px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 cursor-pointer select-none"},e))),r.createElement("li",null,r.createElement("a",{onClick:v,className:"select-none px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 cursor-pointer"},"Próximo")))))},exports.getNestedValues=o,exports.sortData=s,exports.usePagination=l;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,a=require("components/table/utils"),n=require("react-icons/lu"),l=require("@headlessui/react");const s=(e,r,n)=>{const[l,s]=t.useState(1),o=t.useMemo(()=>{const e=Math.ceil(r.length/n);return e<l&&s(e),e},[r,n]),c=t.useMemo(()=>{if(r.length>0){if(o<=1)return[];if(o<=5)return Array.from({length:o}).map((e,t)=>t+1);if(l<5)return Array.from({length:7}).map((e,t)=>{switch(t){case 0:return 1;case 1:return 2;case 2:return 3;case 3:return 4;case 4:return 5;case 5:return"...";default:return o}});if(l>o-4)return Array.from({length:7}).map((e,t)=>{switch(t){case 0:return 1;case 1:return"...";case 2:return o-4;case 3:return o-3;case 4:return o-2;case 5:return o-1;default:return o}});if(l>=5&&l<=o-4)return Array.from({length:7}).map((e,t)=>{switch(t){case 0:return 1;case 1:return"...";case 2:return l-1;case 3:return l;case 4:return l+1;case 5:return"...";default:return o}})}return[]},[r,l,n]),{startIndex:u,endIndex:m}=t.useMemo(()=>{if(r.length>0){const e=(l-1)*n;return{startIndex:e,endIndex:e+n}}return[]},[r,l,n]),[i,g]=t.useState(e),[d,p]=t.useState(r.slice(u,m));return{maxPages:o,currentPage:l,tableColumns:i,tableData:d,pages:c,handlePreviousPage:()=>{l>1&&s(e=>e-1)},handleNextPage:()=>{l<o&&s(e=>e+1)},handlePageChange:e=>{e>=1&&e<=o&&s(e)},handleSortData:e=>{if(e.sortable){const{columns:t,data:n}=a.sortData(e.key,i,r);g(t),p(n.slice(u,m))}}}},o=(e,t)=>e.reduce((e,t)=>e&&e[t]?e[t]:null,t);var c;(c=exports.ETableColumnOrder||(exports.ETableColumnOrder={})).Asc="asc",c.Desc="desc";const u=(e,t)=>e.formatter?e.formatter(t):o(e.key,t);exports.Table=e=>{let{isLoading:a,columns:o,data:c,emptyDataText:m,rowsPerPage:i=10,searchable:g=!1,fixed:d=!1,viewOnly:p=!1}=e;const[x,b]=t.useState(i),{pages:f,currentPage:y,tableColumns:h,tableData:E,handlePreviousPage:v,handleNextPage:w,handlePageChange:N,handleSortData:C}=s(o,c,x),k=m||"Não existem dados para exibição";return r.createElement("div",{className:"w-full"},!p&&r.createElement("div",{className:"w-full flex space-x-4 justify-end mb-4"},r.createElement("div",{className:"w-full flex space-x-4 justify-end"},g&&r.createElement("div",{className:"relative flex-1"},r.createElement(n.LuSearch,{className:"absolute top-2.5 left-2 text-gray-300",size:20}),r.createElement("input",{type:"text",id:"search-input",placeholder:"Pesquisar",className:"border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block w-full py-2.5 pl-8 pr-4 outline-none"})),r.createElement("div",{className:"flex flex-nowrap items-center space-x-2 text-sm text-gray-400"},r.createElement("span",null,"Exibindo"),r.createElement("select",{value:x,onChange:e=>b(Number(e.target.value)),className:"bg-green-50 border border-green-300 text-green-700 font-medium text-sm rounded-lg focus:ring-green-500 focus:border-green-500 block p-2"},r.createElement("option",{value:10,title:"10 itens por página"},"10"),r.createElement("option",{value:50,title:"50 itens por página"},"50"),r.createElement("option",{value:75,title:"75 itens por página"},"75"),r.createElement("option",{value:100,title:"100 itens por página"},"100")),r.createElement("span",null,"de ",c.length," resultados")),r.createElement(l.Menu,null,r.createElement(l.Menu.Button,{className:"px-2 -py-1 text-sm font-medium text-center flex items-center rounded-lg border border-transparent hover:border-gray-200"},r.createElement(n.LuMoreVertical,null)),r.createElement(l.Menu.Items,{className:"flex flex-col absolute right-0 top-12 bg-white shadow-md border rounded-xl p-4"},r.createElement(l.Menu.Item,null,r.createElement("button",{onClick:()=>{},type:"button",className:"px-3 py-2 text-sm font-medium text-center flex items-center"},r.createElement(n.LuDownload,{className:"mr-2"})," Download")))))),r.createElement("div",{className:"w-full overflow-x-auto"},r.createElement("table",{className:"w-full text-sm text-left text-gray-500 "+(d??"table-fixed")},r.createElement("thead",{className:"text-green-700 capitalize bg-green-50 whitespace-nowrap"},r.createElement("tr",null,h.map((e,t)=>!1!==e.visible?r.createElement("th",{key:t,scope:"col",className:"py-3 px-6 whitespace-nowrap",onClick:()=>C(e)},r.createElement("div",{className:"flex items-center justify-between space-x-4"},r.createElement("span",null,e.name),e.sortable&&r.createElement("div",{className:"flex flex-col items-center justify-around"},r.createElement(n.LuChevronUp,{size:16,className:"asc"===e.sortableOrder?"text-green-700":"text-gray-300"}),r.createElement(n.LuChevronDown,{size:16,className:"desc"===e.sortableOrder?"-mt-1.5 text-green-700":"-mt-1.5 text-gray-300"})))):null))),r.createElement("tbody",{className:"overflow-y-auto"},!a&&E.map((e,t)=>r.createElement("tr",{key:t,className:"hover:bg-green-50 [&:not(:last-child)]:border-b"},h.map((t,a)=>!1!==t.visible?r.createElement("td",0===a?{scope:"row",key:a,className:u(t,e)?"py-4 px-6 whitespace-nowrap hover:bg-green-100":'py-4 px-6 whitespace-nowrap hover:bg-green-100 before:content-["(vazio)"] text-gray-300'}:{key:a,className:u(t,e)?"py-4 px-6 whitespace-nowrap hover:bg-green-100":'py-4 px-6 whitespace-nowrap hover:bg-green-100 before:content-["(vazio)"] text-gray-300'},r.createElement("span",null,u(t,e))):null))))),a&&r.createElement("div",{className:"w-full flex justify-center mt-4 text-sm"},r.createElement("p",{className:"text-gray-500"},"Carregando...")),!a&&c.length<=0&&r.createElement("div",{className:"w-full flex justify-center mt-4 text-sm"},r.createElement("p",{className:"text-gray-500"},k))),!a&&c.length>x&&r.createElement("nav",{className:"w-full flex justify-end mt-6"},r.createElement("ul",{className:"inline-flex -space-x-px"},r.createElement("li",null,r.createElement("a",{onClick:v,className:"select-none px-3 py-2 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-gray-100 hover:text-gray-700 cursor-pointer"},"Anterior")),f.map((e,t)=>r.createElement("li",{key:t},r.createElement("a",{onClick:"number"==typeof e?()=>N(e):void 0,className:e===y?"px-3 py-2 text-green-600 border border-gray-300 bg-green-50 hover:bg-green-100 hover:text-green-700 cursor-pointer select-none":"px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 hover:bg-gray-100 hover:text-gray-700 cursor-pointer select-none"},e))),r.createElement("li",null,r.createElement("a",{onClick:w,className:"select-none px-3 py-2 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-gray-100 hover:text-gray-700 cursor-pointer"},"Próximo")))))},exports.getNestedValues=o,exports.sortData=(e,t,r)=>{const a=t.find(t=>t.key.toString()===e.toString());if(a){const n=a.sortableOrder===exports.ETableColumnOrder.Asc?exports.ETableColumnOrder.Desc:exports.ETableColumnOrder.Asc;let l=[];return n===exports.ETableColumnOrder.Asc&&(l=((e,t)=>{const r=new Intl.Collator(void 0,{numeric:!0,sensitivity:"base"});return e.sort((e,a)=>r.compare(e[t.toString()],a[t.toString()]))})(r,e)),n===exports.ETableColumnOrder.Desc&&(l=(e=>e.reverse())(r)),{columns:t.map(t=>(t.key.toString()===e.toString()&&(t.sortableOrder=n),t.key.toString()!==e.toString()&&(t.sortableOrder=void 0),t)),data:l}}return{columns:t,data:r}},exports.usePagination=s;
 //# sourceMappingURL=avine-react-components.cjs.production.min.js.map

dist/avine-react-components.esm.js

@@ -1,2 +0,3 @@
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useState, useMemo } from 'react';
+import { sortData as sortData$1 } from 'components/table/utils';
 import { LuSearch, LuMoreVertical, LuDownload, LuChevronUp, LuChevronDown } from 'react-icons/lu';
@@ -6,11 +7,11 @@ import { Menu } from '@headlessui/react';
 const MAX_BUTTONS_PER_VIEW = 7;
-const usePagination = (dataLength, rowsPerPage) => {
+const usePagination = (columns, data, rowsPerPage) => {
   const [currentPage, setCurrentPage] = useState(1);
   const maxPages = useMemo(() => {
-    const totalPages = Math.ceil(dataLength / rowsPerPage);
+    const totalPages = Math.ceil(data.length / rowsPerPage);
     if (totalPages < currentPage) setCurrentPage(totalPages);
     return totalPages;
-  }, [dataLength, rowsPerPage]);
+  }, [data, rowsPerPage]);
   const pages = useMemo(() => {
-    if (dataLength > 0) {
+    if (data.length > 0) {
       if (maxPages <= 1) return [];
@@ -82,3 +83,3 @@ if (maxPages <= 5) return Array.from({
     return [];
-  }, [dataLength, currentPage, rowsPerPage]);
+  }, [data, currentPage, rowsPerPage]);
   const {
@@ -88,3 +89,3 @@ startIndex,
   } = useMemo(() => {
-    if (dataLength > 0) {
+    if (data.length > 0) {
       const startIndex = (currentPage - 1) * rowsPerPage;
@@ -98,3 +99,5 @@ const endIndex = startIndex + rowsPerPage;
     return [];
-  }, [dataLength, currentPage, rowsPerPage]);
+  }, [data, currentPage, rowsPerPage]);
+  const [tableColumns, setTableColumns] = useState(columns);
+  const [tableData, setTableData] = useState(data.slice(startIndex, endIndex));
   const handlePreviousPage = () => {
@@ -109,11 +112,23 @@ if (currentPage > 1) setCurrentPage(current => current - 1);
   };
+  const handleSortData = column => {
+    if (column.sortable) {
+      const {
+        columns: sortedColumn,
+        data: sortedData
+      } = sortData$1(column.key, tableColumns, data);
+      setTableColumns(sortedColumn);
+      setTableData(sortedData.slice(startIndex, endIndex));
+    }
+    return undefined;
+  };
   return {
     maxPages,
     currentPage,
+    tableColumns,
+    tableData,
     pages,
-    startIndex,
-    endIndex,
     handlePreviousPage,
     handleNextPage,
-    handlePageChange
+    handlePageChange,
+    handleSortData
   };
@@ -180,25 +195,10 @@ };
     currentPage,
+    tableColumns,
+    tableData,
     handlePreviousPage,
     handleNextPage,
     handlePageChange,
-    startIndex,
-    endIndex
-  } = usePagination(data.length, itemsPerPage);
-  const [tableData, setTableData] = useState(data.slice(startIndex, endIndex));
-  const [tableColumns, setTableColumns] = useState(columns);
+    handleSortData
+  } = usePagination(columns, data, itemsPerPage);
   const emptyText = emptyDataText ? emptyDataText : 'Não existem dados para exibição';
-  const handleSortData = column => {
-    if (column.sortable) {
-      const {
-        columns: sortedColumn,
-        data: sortedData
-      } = sortData(column.key, tableColumns, data);
-      setTableColumns(sortedColumn);
-      setTableData(sortedData.slice(startIndex, endIndex));
-    }
-    return undefined;
-  };
-  useEffect(() => setTableColumns(columns), [columns]);
-  useEffect(() => setTableData(data.slice(startIndex, endIndex)), [data]);
-  useEffect(() => setTableData(data.slice(startIndex, endIndex)), [startIndex, endIndex]);
   return /*#__PURE__*/React.createElement("div", {
@@ -205,0 +205,0 @@ className: "w-full"

dist/hooks/use-pagination.d.ts

@@ -1,10 +0,12 @@
-export declare const usePagination: (dataLength: number, rowsPerPage: number) => {
+import { TableColumn } from 'components/table/table';
+export declare const usePagination: (columns: TableColumn[], data: any[], rowsPerPage: number) => {
     maxPages: number;
     currentPage: number;
+    tableColumns: TableColumn[];
+    tableData: any[];
     pages: (number | "...")[];
-    startIndex: any;
-    endIndex: any;
     handlePreviousPage: () => void;
     handleNextPage: () => void;
     handlePageChange: (page: number) => void;
+    handleSortData: (column: TableColumn) => undefined;
 };

package.json

 {
-  "version": "0.1.19",
+  "version": "0.1.20",
   "license": "MIT",
@@ -21,4 +21,4 @@ "main": "dist/index.js",
     "analyze": "size-limit --why",
-    "storybook": "sb dev",
-    "build-storybook": "sb build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "deploy": "npm version patch && npm publish"
@@ -60,8 +60,9 @@ },
     "@storybook/addon-essentials": "^7.6.3",
-    "@storybook/addon-info": "^5.3.21",
+    "@storybook/addon-interactions": "^7.6.3",
     "@storybook/addon-links": "^7.6.3",
-    "@storybook/addon-styling-webpack": "^0.0.5",
-    "@storybook/addons": "^7.6.3",
+    "@storybook/addon-onboarding": "^1.0.9",
+    "@storybook/blocks": "^7.6.3",
     "@storybook/react": "^7.6.3",
     "@storybook/react-webpack5": "^7.6.3",
+    "@storybook/test": "^7.6.3",
     "@types/react": "^18.2.41",
@@ -68,0 +69,0 @@ "@types/react-dom": "^18.2.17",

src/hooks/use-pagination.ts

@@ -0,1 +1,3 @@
+import { TableColumn } from 'components/table/table';
+import { sortData } from 'components/table/utils';
 import { useState, useMemo } from 'react';
@@ -5,11 +7,11 @@
 
-export const usePagination = (dataLength: number, rowsPerPage: number) => {
+export const usePagination = (columns: TableColumn[], data: any[], rowsPerPage: number) => {
     const [currentPage, setCurrentPage] = useState(1);
     const maxPages = useMemo(() => {
-        const totalPages = Math.ceil(dataLength / rowsPerPage);
+        const totalPages = Math.ceil(data.length / rowsPerPage);
         if (totalPages < currentPage) setCurrentPage(totalPages);
         return totalPages;
-    }, [dataLength, rowsPerPage]);
+    }, [data, rowsPerPage]);
     const pages = useMemo(() => {
-        if (dataLength > 0) {
+        if (data.length > 0) {
             if (maxPages <= 1) return [];
@@ -73,5 +75,5 @@ if (maxPages <= 5) return Array.from({ length: maxPages }).map((_, i) => i + 1);
         return [];
-    }, [dataLength, currentPage, rowsPerPage]);
+    }, [data, currentPage, rowsPerPage]);
     const { startIndex, endIndex }: any = useMemo(() => {
-        if (dataLength > 0) {
+        if (data.length > 0) {
             const startIndex = (currentPage - 1) * rowsPerPage;
@@ -82,3 +84,5 @@ const endIndex = startIndex + rowsPerPage;
         return [];
-    }, [dataLength, currentPage, rowsPerPage]);
+    }, [data, currentPage, rowsPerPage]);
+    const [tableColumns, setTableColumns] = useState(columns);
+    const [tableData, setTableData] = useState(data.slice(startIndex, endIndex));
     const handlePreviousPage = (): void => {
@@ -93,12 +97,21 @@ if (currentPage > 1) setCurrentPage(current => current - 1);
     };
+    const handleSortData = (column: TableColumn) => {
+        if (column.sortable) {
+            const { columns: sortedColumn, data: sortedData } = sortData(column.key, tableColumns, data);
+            setTableColumns(sortedColumn);
+            setTableData(sortedData.slice(startIndex, endIndex));
+        }
+        return undefined;
+    };
     return {
         maxPages,
         currentPage,
+        tableColumns,
+        tableData,
         pages,
-        startIndex,
-        endIndex,
         handlePreviousPage,
         handleNextPage,
-        handlePageChange
+        handlePageChange,
+        handleSortData
     };
 };

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

981640

increased by354.13%

Number of package files

54

increased by145.45%

Lines of code

3402

increased by15.09%

Worsened metrics

Dev dependency count

28

increased by3.7%

No dependency changes