@progress/kendo-react-dateinputs/timepicker/TimeList.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 x=require("react"),u=require("prop-types"),T=require("@progress/kendo-date-math"),i=require("@progress/kendo-react-common"),b=require("@progress/kendo-react-intl"),I=require("../virtualization/Virtualization.js"),p=require("./models/TimePart.js"),H=require("./services/DayPeriodService.js"),M=require("./services/DOMService.js"),D=require("./services/HoursService.js"),E=require("./services/MinutesService.js"),P=require("./services/SecondsService.js"),v=require("../utils.js");function R(o){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const e in o)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(o,e);Object.defineProperty(n,e,t.get?t:{enumerable:!0,get:()=>o[e]})}}return n.default=o,Object.freeze(n)}const a=R(x),_=2,S=.05,w=100,C=0,O=9,N={[i.Keys.end]:(o,n)=>o[o.length-1],[i.Keys.home]:(o,n)=>o[0],[i.Keys.up]:(o,n)=>o[n-1],[i.Keys.down]:(o,n)=>o[n+1]},g={[p.TIME_PART.dayperiod]:H.DayPeriodService,[p.TIME_PART.hour]:D.HoursService,[p.TIME_PART.minute]:E.MinutesService,[p.TIME_PART.second]:P.SecondsService},l=class l extends a.Component{constructor(n){super(n),this.intl=null,this._element=null,this.service=null,this.virtualization=null,this.topOffset=0,this.bottomOffset=0,this.itemHeight=0,this.listHeight=0,this.topThreshold=0,this.bottomThreshold=0,this.animateToIndex=!1,this.focus=e=>{Promise.resolve().then(()=>{this.element&&this.element.focus(e)})},this.itemOffset=e=>{if(!this.virtualization||!this.service)return-1;const t=this.service.selectedIndex(this.props.value),s=this.virtualization.activeIndex(),r=this.virtualization.itemOffset(s),c=Math.abs(Math.ceil(e)-r);if(t===s&&c<_)return r;const d=t>s;return d&&c>=this.bottomThreshold||!d&&c>this.topThreshold?this.virtualization.itemOffset(s+1):r},this.calculateHeights=()=>{this.dom.didCalculate&&(this.itemHeight=this.dom.itemHeight,this.listHeight=this.dom.timeListHeight,this.topOffset=(this.listHeight-this.itemHeight)/2,this.bottomOffset=this.listHeight-this.itemHeight,this.props.mobileMode&&(this.topOffset+=O,this.bottomOffset+=O*2),this.topThreshold=this.itemHeight*S,this.bottomThreshold=this.itemHeight*(1-S))},this.configureServices=({min:e,max:t,value:s}=this.props)=>{if(this.service){const[r,c]=this.service.limitRange(e||this.min,t||this.max,s||this.props.value);this.service.configure(this.serviceSettings({min:r,max:c}))}},this.serviceSettings=e=>{const t={boundRange:this.props.boundRange||l.defaultProps.boundRange,insertUndividedMax:!1,min:T.cloneDate(this.min),max:T.cloneDate(this.max),part:this.props.part,step:this.step},s=Object.assign({},t,e);return s.boundRange=s.part.type!=="hour"||this.props.boundRange||l.defaultProps.boundRange,s},this.handleScrollAction=({target:e,animationInProgress:t})=>{if(!(!this.virtualization||!this.service)&&e&&!t){this.animateToIndex=!1;const s=this.virtualization.itemIndex(this.itemOffset(e.scrollTop)),r=this.service.data(this.props.value)[s];this.handleChange(r)}},this.handleFocus=e=>{const{onFocus:t}=this.props;t&&t.call(void 0,e)},this.handleBlur=e=>{const{onBlur:t}=this.props;t&&t.call(void 0,e)},this.handleMouseOver=()=>{if(!this._element)return;const e=i.getActiveElement(document);document&&e!==this._element&&this.props.show&&this._element.focus({preventScroll:!0})},this.handleKeyDown=e=>{if(!this.service)return;const{keyCode:t}=e;(t===i.Keys.down||t===i.Keys.up||t===i.Keys.end||t===i.Keys.home)&&e.preventDefault();const r=(N[e.keyCode]||i.noop)(this.service.data(this.props.value),this.service.selectedIndex(this.props.value));r&&this.handleChange(r)},this.handleChange=v.debounce(e=>{if(!this.service)return;const t=this.service.apply(this.props.value,e.value);if(this.props.value.getTime()===t.getTime())return;const{onChange:s}=this.props;s&&s.call(void 0,t)},w),this.dom=new M.DOMService}get element(){return this._element}get animate(){return!!(this.props.smoothScroll&&this.animateToIndex)}get min(){return this.props.min||l.defaultProps.min}get max(){return this.props.max||l.defaultProps.max}get step(){return this.props.step!==void 0&&this.props.step!==0?Math.floor(this.props.step):l.defaultProps.step}componentDidMount(){Promise.resolve().then(()=>{const{unstyled:n}=this.props;this._element&&(this.dom.calculateHeights(this._element,n),this.forceUpdate())})}componentDidUpdate(){if(!this.virtualization||!this.service)return;const n=this.service.selectedIndex(this.props.value);if(this.virtualization[this.animate?"animateToIndex":"scrollToIndex"](n),this.animateToIndex=!0,!this.topOffset&&this._element){const{unstyled:e}=this.props;this.dom.calculateHeights(this._element,e)}}render(){const{part:n,value:e,unstyled:t}=this.props;if(!n.type||!g[n.type])return;const s=t&&t.uTime;this.calculateHeights(),this.intl=b.provideIntlService(this),this.service=new g[n.type](this.intl),this.configureServices();const r=this.service.data(e),c="translateY("+this.topOffset+"px)",d=this.service.total(e),f=a.createElement(a.Fragment,null,a.createElement("ul",{style:{transform:c,msTransform:c},className:i.classNames(i.uTime.ul({c:s}))},r.map((h,y)=>a.createElement("li",{key:y,className:i.classNames(i.uTime.li({c:s})),onClick:()=>{this.handleChange(h)}},a.createElement("span",null,h.text)))),a.createElement("div",{className:i.classNames(i.uTime.scrollablePlaceholder({c:s}))}));return a.createElement("div",{className:i.classNames(i.uTime.list({c:s})),id:String(this.props.id||""),tabIndex:this.props.disabled?-1:0,ref:h=>{this._element=h},onKeyDown:this.handleKeyDown,onFocus:this.handleFocus,onBlur:this.handleBlur,onMouseOver:this.handleMouseOver},this.dom.didCalculate?a.createElement(I.Virtualization,{bottomOffset:this.bottomOffset,children:f,className:i.classNames(i.uTime.containerSelector({c:s}),i.uTime.container({c:s})),itemHeight:this.itemHeight,maxScrollDifference:this.listHeight,onScrollAction:this.handleScrollAction,ref:h=>{this.virtualization=h},role:"presentation",skip:C,tabIndex:-1,take:d,topOffset:this.topOffset,total:d,unstyled:t}):a.createElement("div",{className:i.classNames(i.uTime.containerSelector({c:s}),i.uTime.container({c:s,content:!0,scrollable:!0}))},f))}};l.propTypes={id:u.number,max:u.instanceOf(Date),min:u.instanceOf(Date),part:function(n,e,t){const s=n[e];if(!s||!g[s.type])throw new Error(`
                    Invalid prop '${e}' supplied to ${t}.
                    Supported part types are hour|minute|second|dayperiod.
                `);return null},step:function(n,e,t){const s=n[e];if(s!==void 0&&s<=0)throw new Error(`
                    Invalid prop '${e}' supplied to ${t}.
                    ${e} cannot be less than 1.
                `);return null},value:u.instanceOf(Date),smoothScroll:u.bool,show:u.bool},l.defaultProps={boundRange:!1,max:v.MAX_TIME,min:v.MIDNIGHT_DATE,step:1,smoothScroll:!0};let m=l;b.registerForIntl(m);exports.TimeList=m;