@progress/kendo-react-dateinputs/calendar/components/ViewList.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 T=require("react"),o=require("prop-types"),n=require("@progress/kendo-react-common"),m=require("@progress/kendo-date-math"),C=require("@progress/kendo-react-intl"),N=require("../../virtualization/Virtualization.js"),O=require("./View.js"),q=require("./Header.js"),H=require("../services/WeekNamesService.js"),f=require("../../utils.js"),p=require("../models/CalendarViewEnum.js"),R=require("./TodayCommand.js");function z(d){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(r,e,t.get?t:{enumerable:!0,get:()=>d[e]})}}return r.default=d,Object.freeze(r)}const a=z(T),_=5,u=class u extends a.Component{constructor(r){super(r),this.virtualization=null,this.calendarView=null,this.table=null,this.intl=null,this.bottomOffset=0,this.viewOffset=0,this.viewHeight=0,this._element=null,this.isActive=!1,this.animateToIndex=!0,this.shouldScroll=!1,this.weekService=null,this.focusActiveDate=()=>{if(!this._element)return;const e=this._element.querySelector("td.k-focus"),t=this._element.querySelector(".k-state-pending-focus");e&&e[0]&&e[0].classList.remove("k-focus"),t&&t.classList.add("k-focus"),this.isActive=!0},this.blurActiveDate=()=>{if(!this._element)return;const e=this._element.querySelector("td.k-focus");e&&e.classList.remove("k-focus"),this.isActive=!1},this.handleVirtualizationMount=e=>{if(this.virtualization=e,this.virtualization&&this.table){this.table.style.transform=`translateY(${this.viewOffset}px)`;const t=f.dateInRange(this.props.focusedDate,this.props.min,this.props.max),s=this.props.service.skip(t,this.props.min);this.virtualization.scrollToIndex(s)}},this.buildMonthView=(e,t)=>{const{unstyled:s}=this.props,i=s&&s.uCalendar;return a.createElement("table",{key:"calendar-view-list-weekdays",className:n.classNames(n.uCalendar.table({c:i,weekdays:!0})),role:"grid",tabIndex:this.props.tabIndex},a.createElement("colgroup",null,e.map((h,l)=>a.createElement("col",{key:l}))),a.createElement("thead",{className:n.classNames(n.uCalendar.thead({c:i}))},a.createElement("tr",{className:n.classNames(n.uCalendar.tr({c:i}))},t.map((h,l)=>a.createElement("th",{key:l,className:n.classNames(n.uCalendar.th({c:i}))},h)))))},this.buildDates=(e,t)=>{const s=this.props.cellUID,{unstyled:i}=this.props,h=i&&i.uCalendar;return a.createElement("table",{className:n.classNames(n.uCalendar.table({c:h})),ref:l=>this.table=l,role:"grid",tabIndex:this.props.tabIndex,"aria-activedescendant":s+this.props.focusedDate.getTime()},a.createElement("colgroup",null,e.map((l,c)=>a.createElement("col",{key:c}))),t.map(l=>a.createElement(O.View,{ref:c=>{this.calendarView||(this.calendarView=c)},key:l.getTime(),activeView:this.props.activeView,viewDate:l,min:this.props.min,max:this.props.max,cellUID:s,focusedDate:this.props.focusedDate,cell:this.props.cell,selectedDate:this.props.value,showWeekNumbers:this.weekNumber,onChange:this.handleDateChange,bus:this.props.bus,service:this.props.service,weekCell:this.props.weekCell,showOtherMonthDays:this.props.showOtherMonthDays,unstyled:i})))},this.calculateHeights=()=>{if(!this.props.dom)return;const e=this.props.activeView===p.CalendarViewEnum.month?this.props.dom.scrollableContentHeight:this.props.dom.scrollableYearContentHeight;this.bottomOffset=e-this.props.dom.viewHeight(this.props.activeView),this.viewOffset=-1*this.props.dom.headerHeight,this.viewHeight=this.props.dom.viewHeight(this.props.activeView)||1},this.getTake=(e,t)=>Math.min(t-e,this.take),this.handleScrollAction=({index:e,scrollAction:t,pageAction:s})=>{const i=s?s.skip:this.state.skip;if((this.state.index!==e||this.state.skip!==i)&&this.setState({index:e,skip:i}),this.table&&t){const h=`translateY(${t.offset}px)`;this.table.style.transform=h}},this.handleTodayClick=e=>{this.shouldScroll=!0,this.handleDateChange.call(void 0,e,!0)},this.handleDateChange=(e,t=!1)=>{const{onChange:s}=this.props;if(s){const i={syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,value:m.cloneDate(e.value),target:this,isTodayClick:t};s.call(void 0,i)}},this.lastView=this.props.activeView,this.lastFocus=this.props.focusedDate,this.state={skip:this.props.service.skip(this.props.focusedDate,this.props.min),index:this.props.service.skip(this.props.focusedDate,this.props.min)}}get element(){return this._element}get weekNames(){return this.intl=C.provideIntlService(this),this.weekService=new H.WeekNamesService(this.intl),this.weekService.getWeekNames(this.weekNumber,this.props.weekDaysFormat)}get weekNumber(){return!!(this.props.showWeekNumbers&&this.props.activeView===p.CalendarViewEnum.month)}get take(){return this.props.take!==void 0?this.props.take:u.defaultProps.take}get animate(){return!!(this.props.smoothScroll&&this.animateToIndex)}get todayIsInRange(){return f.isInRange(f.getToday(),m.getDate(this.props.min),m.getDate(this.props.max))}componentDidUpdate(r,e){this.shouldScroll=!1,this.indexToScroll!==void 0&&this.virtualization&&this.virtualization[this.animate?"animateToIndex":"scrollToIndex"](this.indexToScroll),this.isActive&&this.focusActiveDate(),this.lastView=this.props.activeView,this.indexToScroll=void 0}render(){const{activeView:r,min:e,max:t,service:s,unstyled:i}=this.props,h=i&&i.uCalendar;this.calculateHeights();const l=this.lastView!==r,c=f.dateInRange(this.props.focusedDate,e,t),w=l?s.skip(c,e):this.state.skip,b=s.total(e,t),y=this.getTake(w,b),x=s.addToDate(e,w),S=s.addToDate(e,this.state.index),g=new Array(s.rowLength(this.weekNumber)).fill(""),D=r!==this.lastView;this.animateToIndex=!D,(D||!m.isEqualDate(this.lastFocus,c)||this.shouldScroll||!this.props.shouldScroll||this.props.shouldScroll())&&(this.indexToScroll=this.props.service.skip(c,this.props.min)),this.lastFocus=c;const V=n.classNames(n.uCalendar.view({c:h,month:r===p.CalendarViewEnum.month,year:r===p.CalendarViewEnum.year,decade:r===p.CalendarViewEnum.decade,century:r===p.CalendarViewEnum.century})),E=this.buildDates(g,s.datesList(x,y)),I=a.createElement(a.Fragment,null,a.createElement(q.Header,{key:"calendar-view-list-header",currentDate:S,min:this.props.min,max:this.props.max,activeView:this.props.activeView,bus:this.props.bus,service:this.props.service,headerTitle:this.props.headerTitle,header:this.props.header,unstyled:i,commands:a.createElement(R.TodayCommand,{min:this.props.min,max:this.props.max,onClick:this.handleTodayClick,disabled:!this.todayIsInRange,tabIndex:this.props.tabIndex,unstyled:i})}),this.props.activeView===p.CalendarViewEnum.month&&this.buildMonthView(g,this.weekNames),a.createElement(N.Virtualization,{key:"calendar-view-list-content",skip:w,take:this.take,total:b,itemHeight:this.viewHeight,topOffset:this.viewOffset,bottomOffset:this.bottomOffset,scrollOffsetSize:this.viewOffset,maxScrollDifference:this.viewHeight,onScroll:this.props.onScroll,onScrollAction:this.handleScrollAction,onMount:k=>!this.virtualization&&this.handleVirtualizationMount(k),children:E,tabIndex:this.props.tabIndex,unstyled:i}));return a.createElement("div",{ref:k=>{this._element=k},className:V},this.props.dom.didCalculate?I:null)}};u.propTypes={activeView:o.number.isRequired,bottomOffset:o.number,cellUID:o.string.isRequired,focusedDate:o.instanceOf(Date).isRequired,max:o.instanceOf(Date).isRequired,min:o.instanceOf(Date).isRequired,onChange:o.func,showWeekNumbers:o.bool,smoothScroll:o.bool,take:o.number,value:o.instanceOf(Date),viewHeight:o.number,viewOffset:o.number,weekDaysFormat:o.oneOf(["short","abbreviated","narrow"]),tabIndex:o.number},u.defaultProps={take:_,showWeekNumbers:!1,weekDaysFormat:"short",smoothScroll:!0};let v=u;C.registerForIntl(v);exports.ViewList=v;