@progress/kendo-react-dateinputs/calendar/components/Navigation.js

React DateInput is a perfect input component for handling quick and efficient date values. KendoReact Date Inputs package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const O=require("react"),r=require("prop-types"),v=require("@progress/kendo-date-math"),T=require("./CalendarNavigationItem.js"),k=require("../../utils.js"),w=require("../../virtualization/Virtualization.js"),c=require("@progress/kendo-react-common");function V(p){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const e in p)if(e!=="default"){const n=Object.getOwnPropertyDescriptor(p,e);Object.defineProperty(a,e,n.get?n:{enumerable:!0,get:()=>p[e]})}}return a.default=p,Object.freeze(a)}const l=V(O),C=30,d=class d extends l.Component{constructor(a){super(a),this.virtualization=null,this.list=null,this.itemHeight=0,this.topOffset=0,this.maxViewHeight=0,this.bottomOffset=0,this.handleVirtualizationMount=t=>{if(this.virtualization=t,this.virtualization&&this.list){this.list.style.transform=`translateY(${this.topOffset}px)`;const i=k.dateInRange(this.props.focusedDate,this.props.min,this.props.max),s=this.props.service.skip(i,this.props.min);this.virtualization.scrollToIndex(s)}},this.buildNavigationItem=t=>{const i=this.props.service.navigationTitle(t),s=this.props.service.isRangeStart(t),o=`kendo-react-calendar-nav-item-${t.getTime()}`,h={text:i,value:t,isRangeStart:s,view:this.props.activeView,onClick:this.handleDateChange};return this.props.navigationItem?l.createElement(this.props.navigationItem,{...h,key:o},i):l.createElement(T.CalendarNavigationItem,{...h,key:o},i)},this.calculateHeights=()=>{const t=this.props.dom.calendarHeight;this.itemHeight=this.props.dom.navigationItemHeight||1,this.maxViewHeight=this.props.dom.monthViewHeight,this.topOffset=(t-this.itemHeight)/2,this.bottomOffset=t-this.itemHeight},this.handleDateChange=(t,i)=>{const{onChange:s}=this.props;if(s&&i){const o={value:v.cloneDate(t),target:this,nativeEvent:i&&i.nativeEvent,syntheticEvent:i};s.call(void 0,o)}},this.handleScrollAction=({scrollAction:t,pageAction:i})=>{const s=i?i.skip:this.state.skip;if(this.state.skip!==s&&this.setState({skip:s}),this.list&&t){const o=`translateY(${t.offset}px)`;this.list.style.transform=o}},this.lastView=this.props.activeView,this.lastFocus=this.props.focusedDate;const e=this.props.service.skip(this.props.focusedDate,this.props.min),n=this.props.service.total(this.props.min,this.props.max);this.state={skip:e-this.getTake(e,n)>0?e:0}}get take(){return this.props.take!==void 0?this.props.take:d.defaultProps.take}componentDidUpdate(a,e){this.indexToScroll!==void 0&&this.virtualization&&this.virtualization.scrollToIndex(this.indexToScroll),this.lastView=this.props.activeView,this.lastFocus=this.props.focusedDate,this.indexToScroll=void 0}render(){const{activeView:a,min:e,max:n,service:t,unstyled:i}=this.props;this.calculateHeights();const s=i&&i.uCalendar,o=this.lastView!==a,h=k.dateInRange(this.props.focusedDate,e,n),m=o?t.skip(h,e):this.state.skip,g=t.total(e,n),x=this.getTake(m,g),D=t.addToDate(e,m),b=t.datesList(D,x);(a!==this.lastView||!v.isEqual(h,this.lastFocus))&&(this.indexToScroll=t.skip(h,e));const S=l.createElement(w.Virtualization,{skip:m,take:this.take,total:g,itemHeight:this.itemHeight,topOffset:this.topOffset,bottomOffset:this.bottomOffset,onScroll:this.props.onScroll,maxScrollDifference:this.maxViewHeight,onScrollAction:this.handleScrollAction,onMount:u=>!this.virtualization&&this.handleVirtualizationMount(u),tabIndex:this.props.tabIndex,unstyled:i},l.createElement("ul",{ref:u=>{this.list=u},className:c.classNames(c.uCalendar.ul({c:s}))},b.map(u=>this.buildNavigationItem(u))));return l.createElement("div",{className:c.classNames(c.uCalendar.navigation({c:s}))},l.createElement("span",{className:c.classNames(c.uCalendar.navigationHighlight({c:s}))}),this.props.dom.didCalculate?S:null)}getTake(a,e){return Math.min(e-a,this.take)}};d.propTypes={activeView:r.number.isRequired,focusedDate:r.instanceOf(Date).isRequired,max:r.instanceOf(Date).isRequired,min:r.instanceOf(Date).isRequired,onChange:r.func,take:r.number,tabIndex:r.number},d.defaultProps={take:C};let f=d;exports.Navigation=f;