@progress/kendo-react-dateinputs/timepicker/TimePart.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 B=require("react"),e=require("prop-types"),D=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),v=require("@progress/kendo-react-intl"),h=require("../messages/index.js"),E=require("./TimeList.js"),b=require("../utils.js"),T=require("./models/TimePart.js"),m=require("./utils.js"),k=require("@progress/kendo-react-buttons");function P(p){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const s in p)if(s!=="default"){const t=Object.getOwnPropertyDescriptor(p,s);Object.defineProperty(i,s,t.get?t:{enumerable:!0,get:()=>p[s]})}}return i.default=p,Object.freeze(i)}const o=P(B),y=new RegExp(`${T.TIME_PART.hour}|${T.TIME_PART.minute}|${T.TIME_PART.second}|${T.TIME_PART.dayperiod}|literal`),l=class l extends o.Component{constructor(i){super(i),this._element=null,this._nowButton=null,this.dateFormatParts=[],this.timeLists=[],this.focus=(s,t)=>{Promise.resolve().then(()=>{t&&this._nowButton&&this._nowButton.element&&this._nowButton.element.focus();const a=this.timeLists[0];!t&&this.state.activeListIndex===-1&&!this.hasActiveButton()&&a&&a.element&&a.focus(s)})},this.timeFormatReducer=(s,t)=>s+t.pattern,this.timeFormatFilter=(s,t,a)=>{const r=t>=1&&a[t-1];return r&&r&&s.type==="literal"?y.test(r.type||""):y.test(s.type||"")},this.focusList=s=>{this.timeLists.length&&this.timeLists.reduce(this.listReducer,[]).map(t=>s===1?t.next:t.prev).map(t=>t&&t.element&&t.element.focus({preventScroll:!0}))},this.listReducer=(s,t,a,r)=>s.length||t.props.id!==this.state.activeListIndex?s:[{next:r[a+1]||t,prev:r[a-1]||t}],this.showNowButton=()=>!this.hasSteps()&&this.props.nowButton&&m.isInTimeRange(m.getNow(),this.min,this.max),this.handleKeyDown=s=>{const{keyCode:t}=s;switch(t){case n.Keys.left:s.preventDefault(),this.focusList(0);return;case n.Keys.right:s.preventDefault(),this.focusList(1);return;default:return}},this.handleListBlur=()=>{this.nextTick(()=>{this.setState({activeListIndex:-1})})},this.handleListFocus=s=>{clearTimeout(this.nextTickId),this.setState({activeListIndex:s})},this.handleChange=s=>{const{onChange:t}=this.props;t&&t.call(void 0,s)},this.snapTime=m.snapTime(m.generateSnappers(this.props.steps,this.props.min||l.defaultProps.min)),this.state={activeListIndex:-1},this.hasActiveButton=this.hasActiveButton.bind(this)}get element(){return this._element}get value(){return m.timeInRange(this.snapTime(D.cloneDate(this.props.value||b.MIDNIGHT_DATE)),this.min,this.max)}get intl(){return v.provideIntlService(this)}get min(){return this.snapTime(this.props.min||l.defaultProps.min)}get max(){return this.snapTime(this.props.max||l.defaultProps.max)}get steps(){return this.props.steps||l.defaultProps.steps}get boundRange(){return this.props.boundRange!==void 0?this.props.boundRange:l.defaultProps.boundRange}componentWillUnmount(){clearTimeout(this.nextTickId)}componentDidMount(){const{onMount:i}=this.props;i&&i.call(void 0,this.value)}render(){const{format:i,smoothScroll:s,onNowClick:t,className:a,disabled:r,mobileMode:N,show:x,onNowKeyDown:R,unstyled:w}=this.props,u=w&&w.uTime;this.snapTime=m.snapTime(m.generateSnappers(this.steps,this.min)),this.dateFormatParts=this.intl.splitDateFormat(i||l.defaultProps.format).filter(this.timeFormatFilter);const O=n.classNames(n.uTime.part({c:u,mobileMode:N,disabled:r}),a);this.timeLists=[];const I=v.provideLocalizationService(this),L=I.toLanguageString(h.selectNow,h.messages[h.selectNow]);return o.createElement("div",{className:O},o.createElement("div",{className:n.classNames(n.uTime.header({c:u}))},o.createElement("span",{className:n.classNames(n.uTime.title({c:u}))},this.intl.formatDate(this.value,this.dateFormatParts.reduce(this.timeFormatReducer,""))),this.showNowButton()&&o.createElement(k.Button,{type:"button",ref:c=>{this._nowButton=c},className:n.classNames(n.uTime.now({c:u})),fillMode:"flat",themeColor:"base",title:L,onKeyDown:R,"aria-label":L,onClick:t,tabIndex:r?-1:0},I.toLanguageString(h.now,h.messages[h.now]))),o.createElement("div",{className:n.classNames(n.uTime.listContainer({c:u})),onKeyDown:this.handleKeyDown},o.createElement("span",{className:n.classNames(n.uTime.highlight({c:u}))}),this.dateFormatParts.map((c,d)=>c.type!=="literal"?o.createElement("div",{key:d,className:n.classNames(n.uTime.listWrapper({c:u,focused:d===this.state.activeListIndex})),role:"presentation",tabIndex:-1},o.createElement("span",{className:n.classNames(n.uTime.title({c:u})),onMouseDown:g=>{g.preventDefault()}},this.intl.dateFieldName(c)),o.createElement(E.TimeList,{min:this.min,max:this.max,boundRange:this.boundRange,part:c,step:c.type?this.steps[c.type]:1,smoothScroll:s,ref:g=>{g&&this.timeLists.push(g)},id:d,onFocus:()=>{this.handleListFocus(d)},onBlur:this.handleListBlur,onChange:this.handleChange,value:this.value,disabled:r,show:x,mobileMode:N,unstyled:w})):o.createElement("div",{key:d,className:n.classNames(n.uTime.separator({c:u}))},c.pattern))))}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}hasActiveButton(){const i=n.getActiveElement(document);return this._nowButton&&i===this._nowButton.element}hasSteps(){const i=Object.keys(this.steps);return i.length!==i.reduce((s,t)=>s+this.steps[t],0)}};l.propTypes={cancelButton:e.bool,disabled:e.bool,format:e.oneOfType([e.string,e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),max:e.instanceOf(Date),min:e.instanceOf(Date),nowButton:e.bool,steps:e.shape({hour:e.number,minute:e.number,second:e.number}),smoothScroll:e.bool,tabIndex:e.number,value:e.instanceOf(Date),show:e.bool},l.defaultProps={value:null,disabled:!1,nowButton:!0,cancelButton:!0,format:"hh:mm a",min:b.MIN_TIME,max:b.MAX_TIME,steps:{},boundRange:!1};let f=l;v.registerForIntl(f);v.registerForLocalization(f);exports.TimePart=f;