react-ts-paginations
Version:
React pagination is a very simple yet configurable pagination component built with React + Typescript.
2 lines (1 loc) • 3.42 kB
JavaScript
import{jsx as r,jsxs as e}from'react/jsx-runtime';import{useCallback as t}from'react';var n=function(){return n=Object.assign||function(r){for(var e,t=1,n=arguments.length;t<n;t++)for(var i in e=arguments[t])Object.prototype.hasOwnProperty.call(e,i)&&(r[i]=e[i]);return r},n.apply(this,arguments)};'function'==typeof SuppressedError&&SuppressedError;var i=function(i){var o=i.currentPage,l=i.totalPages,a=i.onPageChange;i.recordsPerPage,i.onPageDrpSelect;var d=function(r){a(r)},s=t((function(){o>1&&d(o-1)}),[o,d]),c=t((function(){o<l&&d(o+1)}),[o,l]);return r('div',n({style:{display:'flex',alignItems:'center'}},{children:e('div',n({style:{display:'flex',alignItems:'center'}},{children:[r('button',n({onClick:function(){d(1)},disabled:o<=0||1===o,style:{cursor:1===o?'white':'pointer'}},{children:e('svg',n({fill:'#000000',width:'18px',height:'18px',viewBox:'0 0 24 24',xmlns:'http://www.w3.org/2000/svg'},{children:[r('g',{id:'SVGRepo_bgCarrier','stroke-width':'0'}),r('g',{id:'SVGRepo_tracerCarrier','stroke-linecap':'round','stroke-linejoin':'round',stroke:'#CCCCCC','stroke-width':'0.144'}),r('g',n({id:'SVGRepo_iconCarrier'},{children:r('path',{d:'M6.945,12.832l12,8A1,1,0,0,0,20.5,20V4a1,1,0,0,0-1.555-.832l-12,8a1,1,0,0,0,0,1.664ZM18.5,5.869V18.131L9.3,12ZM3.5,18V6a1,1,0,0,1,2,0V18a1,1,0,0,1-2,0Z'})}))]}))})),r('button',n({onClick:s,disabled:o<=0,style:{cursor:1===o?'not-allowed':'pointer'}},{children:r('div',n({style:{padding:'0.375rem',margin:'0.25rem'}},{children:r('svg',n({xmlns:'http://www.w3.org/2000/svg',viewBox:'0 0 24 24',width:'18',height:'18',fill:'none',stroke:'currentColor',strokeWidth:'2',strokeLinecap:'round',strokeLinejoin:'round'},{children:r('path',{d:'M15 18l-6-6 6-6'})}))}))})),r('div',n({style:{display:'flex',alignItems:'center',margin:'0.25rem'}},{children:function(){var e,t,i=[];l<=3?(e=1,t=l):(e=Math.max(1,o-Math.floor(1.5)),(t=Math.min(l,e+3-1))-e<2&&(e=Math.max(1,t-3+1)));for(var a=e;a<=t;a++)i.push(a);return i.map((function(e){return r('button',n({onClick:function(){return d(e)},style:{marginRight:'0.5rem',marginLeft:'0.25rem',width:'1.5rem',height:'2rem',borderRadius:'0.125rem',fontSize:'0.75rem',fontWeight:e===o?'bold':'normal',backgroundColor:e===o?'red':'transparent',color:e===o?'#fff':'#000',textAlign:'center'}},{children:e}),e)}))}()})),r('button',n({onClick:c,disabled:o===l,style:{cursor:o===l?'not-allowed':'pointer'}},{children:r('div',n({style:{padding:'0.375rem',margin:'0.25rem'}},{children:r('svg',n({xmlns:'http://www.w3.org/2000/svg',viewBox:'0 0 24 24',width:'18',height:'18',fill:'none',stroke:'currentColor',strokeWidth:'2',strokeLinecap:'round',strokeLinejoin:'round'},{children:r('path',{d:'M9 18l6-6-6-6'})}))}))})),r('button',n({onClick:function(){d(l)},disabled:o===l,style:{cursor:o===l?'not-allowed':'pointer'}},{children:r('div',n({style:{padding:'0.375rem',margin:'0.25rem'}},{children:e('svg',n({fill:'#000000',width:'18px',height:'18px',viewBox:'0 0 24 24',xmlns:'http://www.w3.org/2000/svg'},{children:[r('g',{id:'SVGRepo_bgCarrier','stroke-width':'0'}),r('g',{id:'SVGRepo_tracerCarrier','stroke-linecap':'round','stroke-linejoin':'round'}),r('g',n({id:'SVGRepo_iconCarrier'},{children:r('path',{d:'M4.028,20.882a1,1,0,0,0,1.027-.05l12-8a1,1,0,0,0,0-1.664l-12-8A1,1,0,0,0,3.5,4V20A1,1,0,0,0,4.028,20.882ZM5.5,5.869,14.7,12,5.5,18.131ZM18.5,18V6a1,1,0,0,1,2,0V18a1,1,0,0,1-2,0Z'})}))]}))}))}))]}))}))};export{i as Pagination};