@progress/kendo-react-data-tools
Version:
Includes React Pager & React Filter component, an intuitive interface to create complex filter descriptions. KendoReact Data Tools package
10 lines (9 loc) • 5.7 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
"use client";
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Ke=require("react"),s=require("prop-types"),Le=require("./PagerNumericButtons.js"),ke=require("./PagerInput.js"),ze=require("./PagerPageSizes.js"),De=require("@progress/kendo-react-buttons"),c=require("../messages/index.js"),Y=require("@progress/kendo-react-intl"),a=require("@progress/kendo-react-common"),n=require("./utils.js");function qe(o){const M=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const f in o)if(f!=="default"){const v=Object.getOwnPropertyDescriptor(o,f);Object.defineProperty(M,f,v.get?v:{enumerable:!0,get:()=>o[f]})}}return M.default=o,Object.freeze(M)}const i=qe(Ke),Z=600,Oe=768,B=i.forwardRef((o,M)=>{const{buttonCount:f=C.buttonCount,info:v=C.info,type:ee=C.type,size:m=C.size,disabled:y=C.disabled,total:h,skip:k,take:N,className:te,style:se,pageSizes:T,pageSizeValue:ae,previousNext:ne,responsive:R,messagesMap:l,dir:_,navigatable:b}=o,u=Y.useLocalization(),z=Y.useInternationalization(),P=i.useRef({element:null,props:o}),E=i.useRef(null);i.useImperativeHandle(P,()=>({get element(){return re()},props:o})),i.useImperativeHandle(M,()=>P.current);const re=()=>E.current,[A,D]=i.useState(!0),[oe,j]=i.useState(!0);i.useEffect(()=>(window.addEventListener("resize",q),q(),()=>{window.removeEventListener("resize",q)}),[]);const I=_==="rtl",g=Math.floor(k/N)+1,d=Math.ceil((h||0)/N),p=(t,e)=>{o.onPageChange&&t>0&&t<=d&&o.onPageChange({target:P.current,skip:(t-1)*o.take,take:o.take,syntheticEvent:e,nativeEvent:e.nativeEvent,targetEvent:e})},ie=t=>{const e=E.current,r=t.keyCode;!e||!b||((r===a.Keys.home||t.metaKey&&r===a.Keys.left)&&p(1,t),(r===a.Keys.end||t.metaKey&&r===a.Keys.right)&&p(d,t),document.activeElement===e?(r===a.Keys.enter&&(a.focusFirstFocusableChild(e),a.enableNavigatableContainer(e)),(r===a.Keys.left||r===a.Keys.up)&&p(g-1,t),(r===a.Keys.right||r===a.Keys.down)&&p(g+1,t)):(r===a.Keys.esc&&(e.focus(),a.disableNavigatableContainer(e)),a.keepFocusInContainer(t,e,a.TABBABLE_ELEMENTS)))},q=()=>{const t=E.current;if(!t||!R)return;const e=t.offsetWidth;e<Z?D(!1):e>=Z&&e<Oe?(j(!1),D(!0)):(j(!0),D(!0))},le=(t,e)=>{const r={target:P==null?void 0:P.current,syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,targetEvent:e,...t};o.onPageChange&&o.onPageChange(r)},ge=n.getL10NMessage(c.pagerFirstPage,l),ue=n.getL10NMessage(c.pagerPreviousPage,l),ce=n.getL10NMessage(c.pagerNextPage,l),de=n.getL10NMessage(c.pagerLastPage,l),F=n.getL10NMessage(c.pagerInfo,l),$=n.getL10NMessage(c.pagerAriaKeyshortcuts,l),V=n.getL10NMessage(c.pagerPage,l),G=n.getL10NMessage(c.pagerOf,l),S=n.getL10NMessage(c.pagerTotalPages,l),fe=`${u.toLanguageString(V.messageKey,V.defaultMessage)} ${z.format(u.toLanguageString(S.messageKey,S.defaultMessage),[g])} ${u.toLanguageString(G.messageKey,G.defaultMessage)} ${z.format(u.toLanguageString(S.messageKey,S.defaultMessage),[d])}`,K=(t,e,r,O,w,x)=>i.createElement(De.Button,{fillMode:"flat",themeColor:"base",size:m,rounded:null,className:e,icon:O,svgIcon:w,title:r,role:"button","aria-disabled":x,tabIndex:b?-1:void 0,onClick:L=>{L.preventDefault(),p(t,L)}}),H=T&&i.createElement(ze.PagerPageSizes,{pageChange:le,pageSize:N,pageSizes:T,value:ae,messagesMap:l,size:m,navigatable:b}),W=v&&i.createElement("span",{className:"k-pager-info"},z.format(u.toLanguageString(F.messageKey,F.defaultMessage),[Math.min(k+1,h),Math.min(k+N,h),h])),me=ee==="numeric"?i.createElement(Le.PagerNumericButtons,{type:R&&!A?"dropdown":"numbers",buttonCount:f||0,totalPages:d,currentPage:g,pageChange:p,messagesMap:l,size:m,navigatable:b}):i.createElement(ke.PagerInput,{buttonCount:f||0,totalPages:d,currentPage:g,pageChange:p,messagesMap:l,size:m,navigatable:b});let U,J,Q,X;if(ne){const t=n.translateMessage(u,ge),{rtlClass:e,rtlIcon:r,isDisabledClass:O,isDisabled:w}=n.getFirstButtonProps(I,g,y);U=K(1,O,t,e,r,w);const x=n.translateMessage(u,ue),{rtlClass:L,rtlIcon:pe,isDisabledClass:be,isDisabled:Pe}=n.getPrevButtonProps(I,g,y);J=K(g-1,be,x,L,pe,Pe);const Me=n.translateMessage(u,ce),{rtlClass:ye,rtlIcon:Ce,isDisabledClass:ve,isDisabled:he}=n.getNextButtonProps(I,g,d,y);Q=K(g+1,ve,Me,ye,Ce,he);const Ne=n.translateMessage(u,de),{rtlClass:Re,rtlIcon:Ee,isDisabledClass:Ie,isDisabled:Se}=n.getLastButtonProps(I,g,d,y);X=K(d,Ie,Ne,Re,Ee,Se)}return i.createElement("div",{ref:E,className:a.classNames("k-pager",{[`k-pager-${a.kendoThemeMaps.sizeMap[m]||m}`]:m,"k-disabled":y},te),style:se,role:"application","aria-roledescription":"pager",dir:_,"aria-keyshortcuts":u.toLanguageString($.messageKey,$.defaultMessage),"aria-label":fe,tabIndex:b?0:void 0,onKeyDown:ie},i.createElement("div",{className:a.classNames("k-pager-numbers-wrap")},U,J,me,Q,X),R?A&&H:H,R?oe&&W:W)}),C={buttonCount:10,info:!0,type:"numeric",size:"medium",disabled:!1};B.displayName="Pager";B.propTypes={className:s.string,style:s.object,total:s.number.isRequired,skip:s.number.isRequired,take:s.number.isRequired,buttonCount:s.number,info:s.bool,type:s.oneOf(["numeric","input"]),pageSizes:s.oneOfType([s.arrayOf(s.number.isRequired),s.arrayOf(s.oneOfType([s.number.isRequired,s.string.isRequired]).isRequired)]),previousNext:s.bool,onPageChange:s.func,messagesMap:s.func,size:s.oneOf([null,"small","medium","large"]),dir:s.string,disabled:s.bool};exports.Pager=B;