carbon-react/lib/components/pager/pager.component.js

A library of reusable React components for easily building user interfaces.

"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("../select/option/option.component.js");require("../select/option-row/option-row.component.js"),require("../select/option-group-header/option-group-header.component.js");var n=require("../select/simple-select/simple-select.component.js");require("../select/filterable-select/filterable-select.component.js"),require("../select/multi-select/multi-select.component.js");var o=require("./__internal__/pager-navigation.component.js"),a=require("../../hooks/__internal__/useLocale/useLocale.js"),s=require("../../__internal__/utils/helpers/guid/index.js"),i=require("./pager.style.js"),l=require("../../__internal__/utils/helpers/events/events.js"),c=require("../../__internal__/utils/helpers/tags/tags.js");function u(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function p(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},n=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(n=n.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),n.forEach((function(t){u(e,t,r[t])}))}return e}function g(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}const d=u=>{var{currentPage:d=1,hideDisabledElements:b=!1,interactivePageNumber:f=!0,pageSizeSelectionOptions:h=[{id:"10",name:10},{id:"25",name:25},{id:"50",name:50},{id:"100",name:100}],pageSize:P=10,showPageSizeSelection:S=!1,totalRecords:m=0,onPagination:j,onNext:w,onFirst:y,onPrevious:O,onLast:v,showPageSizeLabelBefore:_=!0,showPageSizeLabelAfter:x=!0,showTotalRecords:k=!0,showFirstAndLastButtons:C=!0,showPreviousAndNextButtons:z=!0,showPageCount:q=!0,variant:B="default",smallScreenBreakpoint:L}=u,N=function(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);for(n=0;n<a.length;n++)r=a[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}(u,["currentPage","hideDisabledElements","interactivePageNumber","pageSizeSelectionOptions","pageSize","showPageSizeSelection","totalRecords","onPagination","onNext","onFirst","onPrevious","onLast","showPageSizeLabelBefore","showPageSizeLabelAfter","showTotalRecords","showFirstAndLastButtons","showPreviousAndNextButtons","showPageCount","variant","smallScreenBreakpoint"]);const E=a.default(),[A,D]=t.useState(+d),[F,R]=t.useState(+P),[T,I]=t.useState(+P),K=`Pager_size_selector_${t.useRef(s.default()).current}`,M=t.useCallback((()=>+m<0||Number.isNaN(+m)?1:Math.ceil(+m/F)),[m,F]),[$,G]=t.useState(M());t.useEffect((()=>{R(+P),I(+P)}),[P]),t.useEffect((()=>{const e=M();G(e),D(+d>e?e:+d)}),[F,$,d,m,M]);const H=t.useCallback((e=>{D(1),y&&y(e)}),[y]),J=t.useCallback((e=>{D($),v&&v(e)}),[$,v]),Q=t.useCallback((e=>{D(A+1),w&&w(e)}),[w,A]),U=t.useCallback((e=>{D(A-1),O&&O(e)}),[A,O]),V=t.useCallback((e=>{I(+e),R(+e),j(1,+e,"page-select")}),[j]),W=t.useCallback((e=>l.default.isEnterKey(e)&&V(e.target.value)),[V]);return e.jsxs(i.StyledPagerContainer,g(p({variant:B,smallScreenBreakpoint:L,showPageSizeSelection:S,showTotalRecords:k},N,c.default("pager",N)),{children:[S&&e.jsx(i.StyledPagerSizeOptions,{children:(()=>{const t=(t,r)=>t?e.jsx("label",{htmlFor:K,children:r}):e.jsx("div",{children:r});return e.jsxs(i.StyledPagerSizeOptionsInner,{children:[_&&t(_,E.pager.show()),e.jsx(i.StyledSelectContainer,{children:e.jsx(n.SimpleSelect,g(p({value:String(T),onChange:e=>I(+e.target.value),onBlur:()=>I(F),onKeyDown:W,"data-element":"page-select",id:K},_||x?{}:{ariaLabel:E.pager.show()}),{children:h.map((t=>e.jsx(r.default,{text:t.id,value:String(t.name),onClick:V},t.id)))}))}),x&&t(!_,E.pager.records(F,!1))]})})()}),e.jsx(o.default,{pageSize:F,currentPage:A,interactivePageNumber:f,hideDisabledElements:b,setCurrentPage:D,onNext:Q,onPrevious:U,onFirst:H,onLast:J,onPagination:j,pageCount:$,showFirstAndLastButtons:C,showPreviousAndNextButtons:z,showPageCount:q,smallScreenBreakpoint:L}),k&&e.jsx(i.StyledPagerSummary,{smallScreenBreakpoint:L,children:E.pager.records(m)})]}))};exports.Pager=d,exports.default=d;