koval-ui/dist/src/lib/Pagination/Pagination.cjs

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),g=require("classnames"),M=require("css-vars-hook"),T=require("../../internal/utils/createArray.cjs"),_=require("../../internal/Icons/IconForward.cjs"),z=require("../../internal/Icons/IconBackward.cjs"),H=require("../../internal/Icons/IconEnter.cjs"),f=require("./PageButton.cjs"),K=require("./usePagePaginationState.cjs"),a=require("./Pagination.module.css.cjs"),C=s.forwardRef(({children:O,className:B,totalPages:d,onPageSelect:o,selectedPage:h,showNavigation:q=!0,showPageButtons:I=!0,...P},y)=>{const{visible:A,first:x,last:j,selectedPage:l,setSelectedPage:i,nextPage:k,previousPage:v,isLong:b,maxDigits:p,checkValidity:r}=K.usePagePaginationState(d,h);s.useEffect(()=>{i(h)},[h,i]);const[n,m]=s.useState(l);s.useEffect(()=>{m(l)},[l]);const c=s.useCallback(t=>{i(t),m(t),o(t)},[o,i]),E=s.useCallback(()=>{i(k),o(k)},[k,o,i]),w=s.useCallback(()=>{i(v),o(v)},[o,v,i]),R=s.useCallback(t=>{const u=parseInt(t.target.value);t.target.value!==""&&m(u)},[m]),F=s.useCallback(()=>{r(n)&&n!==null&&c(n)},[r,c,n]),L=s.useCallback(t=>{t.key==="Enter"&&r(n)&&n!==null&&c(n)},[r,c,n]),{LocalRoot:S}=M.useLocalTheme(),V=s.useMemo(()=>({digits:p}),[p]);return e.jsxs("div",{...P,className:g(a.default.pagination,B),ref:y,children:[I&&e.jsxs("div",{className:g(a.default.buttons,{[a.default.short]:!b}),children:[!b&&T.createArray(d).map((t,u)=>{const D=u+1===l;return e.jsx(f.PageButton,{isActive:D,onClick:c,pageNumber:u+1},u)}),b&&e.jsxs(s.Fragment,{children:[e.jsx(f.PageButton,{isActive:x===l,onClick:c,pageNumber:x}),e.jsx("div",{className:a.default.ellipsis,children:"…"}),A.map((t,u)=>{const N=t===l;return e.jsx(f.PageButton,{className:g({[a.default.centerButton]:u!==1}),isActive:N,onClick:c,pageNumber:t},t)}),e.jsx("div",{className:a.default.ellipsis,children:"…"}),e.jsx(f.PageButton,{isActive:j===l,onClick:c,pageNumber:j})]})]}),q&&e.jsxs(S,{className:a.default.navigation,theme:V,children:[e.jsxs("div",{className:a.default.navigationBlock,children:[e.jsx("button",{disabled:d===1,onClick:w,className:a.default.navigationButton,children:e.jsx(z.IconBackward,{className:a.default.icon})}),e.jsx("button",{disabled:d===1,onClick:E,className:a.default.navigationButton,children:e.jsx(_.IconForward,{className:a.default.icon})})]}),e.jsxs("div",{className:a.default.navigationBlock,children:[e.jsx("input",{className:g(a.default.input,{[a.default.error]:!r(n)}),min:x,max:j,pattern:"[0-9]{10}",step:"1",size:p,type:"number",value:n,onChange:R,onKeyUp:L}),e.jsx("button",{disabled:!r(n)||n===null,className:a.default.navigationButton,onClick:F,children:e.jsx(H.IconEnter,{className:a.default.icon})})]})]})]})});C.displayName="Pagination";exports.Pagination=C;
//# sourceMappingURL=Pagination.cjs.map