UNPKG

@resourge/react-pagination

Version:

`react-pagination` is a small, highly customizable, component to render the pagination.

13 lines (12 loc) 2.85 kB
/** * react-pagination v1.2.0 * * Copyright (c) resourge. * * This source code is licensed under the MIT license found in the * LICENSE.md file in the root directory of this source tree. * * @license MIT */ "use strict";var e=require("react"),a=require("@emotion/css");const t=({page:e,totalPages:a,displayRange:t=5,disabled:r=!1,onPageChange:l,firstLabel:o,previousLabel:s,nextLabel:n,lastLabel:i})=>{const{minPage:c,maxPage:d}=((e,a,t)=>{const r=Math.floor(a/2);let l=Math.max(0,e-r),o=Math.min(t-1,e+r);return l<0&&(o=t>a?a-1:t),o>=t&&(l=t-a,o<a&&(l=0)),{minPage:l,maxPage:o}})(e<=a?e:0,t,a),g=(e,t,o)=>e?{label:"function"==typeof e?e():e,type:t,page:o,disabled:r||o<0||o>=a,onClick:()=>{l(o)}}:null;return[g(o,"firstPage",0),g(s,"previousPage",e-1),...Array.from({length:d-c+1},((a,t)=>{const o=c+t;return{label:o+1,page:o,type:"page",disabled:r,selected:e===o,onClick:()=>{l(o)}}})),g(n,"nextPage",e+1),g(i,"lastPage",a-1)].filter(Boolean)},r=a=>{var r;const l=null!=(r=a.onPageChange)?r:()=>{},o=e.useRef(l);return o.current=l,e.useMemo((()=>t({...a,onPageChange:e=>{o.current(e)},firstLabel:a.renderFirst,previousLabel:a.renderPrevious,nextLabel:a.renderNext,lastLabel:a.renderLast})),[a.page,a.totalPages,a.disabled])},l="#2E3641",o="#D0D0D0",s={backgroundColor:o,color:"white"},n=({selected:e})=>({cursor:"not-allowed",border:`2px solid ${o}`,color:o,"& > *":{cursor:"not-allowed",opacity:.5},...e?s:{}}),i={listStyle:"none",display:"flex",alignItems:"center",gap:"0.75rem",padding:0},c=({href:t,children:r,onClick:o,disabled:s,selected:i,customStyles:c})=>{const d={disabled:s,selected:i},g=(({disabled:e,selected:a})=>({cursor:"pointer",borderRadius:"5px",border:`2px solid ${l}`,color:l,"& > *":{color:l},...e?n({selected:a}):{},"&:hover":{backgroundColor:"rgba(46,54,65, 0.15)",color:l},...a?{backgroundColor:l,color:"white","& > *":{color:"white"},"&:hover":{opacity:.75}}:{}}))(d),u={display:"flex",justifyContent:"center",alignItems:"center",color:"inherit",width:"1.875rem",height:"1.875rem"},p=c&&c.li?c.li(g,d):g,b=c&&c.a?c.a(u,d):u;return e.createElement("li",{"aria-label":"number"==typeof r?`Page ${r}`:void 0,className:a.css(p),role:"navigation"},e.createElement("a",{className:a.css(b),href:t,rel:"noreferrer",target:"_blank",onClick:e=>{e.ctrlKey||e.metaKey||(e.preventDefault(),e.stopPropagation(),s||o&&o())}},r))};exports.Pagination=({className:t,page:l,totalPages:o=1,getHref:s,customStyles:n,...d})=>{const g=r({page:l,totalPages:o,...d}),u=n&&n.ul?n.ul(i):i;return e.createElement("ul",{className:`${a.css(u)}${t?` ${t}`:""}`},g.map((({label:a,page:t,disabled:r,selected:l,onClick:o},i)=>e.createElement(c,{key:`pagination_page_item_${i}`,customStyles:n,disabled:r,href:s&&s(t),selected:l,onClick:o},a))))},exports.pagination=t,exports.usePagination=r; //# sourceMappingURL=react-pagination.production.min.js.map