@progress/kendo-react-dateinputs/timepicker/TimeSelector.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 I=require("react"),e=require("prop-types"),g=require("@progress/kendo-date-math"),s=require("@progress/kendo-react-common"),f=require("@progress/kendo-react-intl"),l=require("../messages/index.js"),y=require("../utils.js"),m=require("./utils.js"),K=require("./TimePart.js"),O=require("@progress/kendo-react-buttons");function x(u){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const t in u)if(t!=="default"){const n=Object.getOwnPropertyDescriptor(u,t);Object.defineProperty(i,t,n.get?n:{enumerable:!0,get:()=>u[t]})}}return i.default=u,Object.freeze(i)}const a=x(I),c=class c extends a.Component{constructor(i){super(i),this._element=null,this._cancelButton=null,this._acceptButton=null,this.timePart=null,this.focusActiveList=()=>{this.timePart&&this.timePart.focus({preventScroll:!0})},this.handleKeyDown=t=>{const{keyCode:n}=t;switch(n){case s.Keys.enter:this.hasActiveButton()||this.handleAccept(t);return;default:return}},this.revertToNowButton=t=>{const{keyCode:n,shiftKey:o}=t;!o&&n===s.Keys.tab&&(t.preventDefault(),this.props.nowButton!==!1?this.timePart&&this.timePart.focus({preventScroll:!0},!0):this.timePart&&this.timePart.focus({preventScroll:!0}))},this.handleNowKeyDown=t=>{var p;const{keyCode:n,shiftKey:o}=t;o&&n===s.Keys.tab?(t.preventDefault(),this._acceptButton&&((p=this._acceptButton.element)==null||p.focus({preventScroll:!0}))):n===s.Keys.enter&&(t.stopPropagation(),this.handleNowClick(t))},this.handleAccept=t=>{const n=this.mergeValue(g.cloneDate(this.value||m.getNow()),this.timePart?this.timePart.value:this.current);this.setState({value:n}),this.valueDuringOnChange=n;const{onChange:o}=this.props;o&&o.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:this.value,target:this}),this.valueDuringOnChange=void 0},this.handleReject=t=>{this.setState({current:this.value});const{onReject:n}=this.props;n&&n.call(void 0,t)},this.handleNowClick=t=>{const n=this.mergeValue(g.cloneDate(this.value||m.getNow()),m.getNow());this.setState({current:n,value:n}),this.valueDuringOnChange=n;const{onChange:o}=this.props;o&&o.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:this.value,target:this}),this.valueDuringOnChange=void 0},this.handleChange=t=>{this.setState({current:t});const{handleTimeChange:n}=this.props;n&&n.call(void 0,{time:t})},this.dateFormatParts=this.intl.splitDateFormat(this.props.format||c.defaultProps.format),this.mergeValue=m.valueMerger(m.generateGetters(this.dateFormatParts)),this.hasActiveButton=this.hasActiveButton.bind(this),this.state={current:this.props.value||y.MIDNIGHT_DATE,value:this.props.value||c.defaultProps.value}}get element(){return this._element}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?g.cloneDate(i):null}get intl(){return f.provideIntlService(this)}get current(){return this.state.current!==null?g.cloneDate(this.state.current):null}componentWillUnmount(){clearTimeout(this.nextTickId)}render(){const{format:i,cancelButton:t,disabled:n,tabIndex:o,className:p,smoothScroll:P,min:B,max:k,boundRange:N,nowButton:T,steps:S,show:E,mobileMode:C,unstyled:h}=this.props,_=h&&h.uTimePicker,v=h&&h.uTime,D=f.provideLocalizationService(this),b=D.toLanguageString(l.timePickerCancel,l.messages[l.timePickerCancel]),w=D.toLanguageString(l.timePickerSet,l.messages[l.timePickerSet]);return a.createElement(a.Fragment,null,a.createElement("div",{ref:r=>{this._element=r},tabIndex:n?void 0:o||0,className:s.classNames(s.uTimePicker.timeSelector({c:_,mobileMode:C,disabled:n}),p),onKeyDown:this.handleKeyDown},a.createElement(K.TimePart,{ref:r=>{this.timePart=r},value:this.current,onChange:this.handleChange,onNowClick:this.handleNowClick,format:i,smoothScroll:P,min:B,max:k,boundRange:N,disabled:n,nowButton:T,steps:S,show:E,mobileMode:C,onNowKeyDown:this.handleNowKeyDown,unstyled:h})),this.props.footer&&a.createElement("div",{className:s.classNames(s.uTime.footer({c:v}))},t&&a.createElement(O.Button,{type:"button",ref:r=>{this._cancelButton=r},className:s.classNames(s.uTime.cancel({c:v})),onClick:this.handleReject,title:b,"aria-label":b},b),a.createElement(O.Button,{type:"button",ref:r=>{this._acceptButton=r},className:s.classNames(s.uTime.accept({c:v})),themeColor:"primary",onClick:this.handleAccept,onKeyDown:this.revertToNowButton,title:w,"aria-label":w},w)))}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}hasActiveButton(){if(!this._acceptButton||!this._acceptButton.element)return!1;const i=s.getActiveElement(document);return this._acceptButton&&i===this._acceptButton.element||this._cancelButton&&i===this._cancelButton.element}};c.propTypes={cancelButton:e.bool,className:e.string,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},c.defaultProps={value:null,disabled:!1,cancelButton:!0,format:"t",min:y.MIN_TIME,max:y.MAX_TIME,boundRange:!1,footer:!0};let d=c;f.registerForIntl(d);f.registerForLocalization(d);exports.TimeSelector=d;