@progress/kendo-react-dateinputs 9.0.0-develop.2 → 9.0.0-develop.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +47 -46
- package/calendar/components/Calendar.mjs +57 -60
- package/calendar/components/CalendarNavigationItem.mjs +10 -12
- package/calendar/components/CalendarWeekCell.mjs +9 -1
- package/calendar/components/HorizontalViewList.mjs +8 -11
- package/calendar/components/MultiViewCalendar.mjs +13 -8
- package/calendar/components/Navigation.mjs +11 -11
- package/calendar/components/View.mjs +8 -25
- package/common/PickerWrap.mjs +2 -15
- package/dateinput/DateInput.js +1 -1
- package/dateinput/DateInput.mjs +264 -321
- package/dateinput/dateInputIntl.js +8 -0
- package/dateinput/dateInputIntl.mjs +20 -0
- package/dateinput/utils.js +1 -1
- package/dateinput/utils.mjs +4 -27
- package/datepicker/DatePicker.js +1 -1
- package/datepicker/DatePicker.mjs +104 -82
- package/daterangepicker/DateRangePicker.mjs +14 -3
- package/datetimepicker/DateTimePicker.js +1 -1
- package/datetimepicker/DateTimePicker.mjs +102 -81
- package/dist/cdn/js/kendo-react-dateinputs.js +1 -1
- package/hooks/usePickerFloatingLabel.js +1 -1
- package/hooks/usePickerFloatingLabel.mjs +6 -11
- package/index.d.mts +177 -36
- package/index.d.ts +177 -36
- package/package-metadata.mjs +1 -1
- package/package.json +8 -7
- package/timepicker/TimeList.mjs +27 -12
- package/timepicker/TimePart.mjs +55 -75
- package/timepicker/TimePicker.js +1 -1
- package/timepicker/TimePicker.mjs +85 -69
- package/timepicker/services/DOMService.mjs +7 -4
- package/timepicker/services/DayPeriodService.mjs +1 -4
- package/timepicker/utils.mjs +3 -15
- package/virtualization/Virtualization.js +1 -1
- package/virtualization/Virtualization.mjs +3 -13
- package/dateinput/models/kendo-date.js +0 -8
- package/dateinput/models/kendo-date.mjs +0 -233
- package/dateinput/models/mask.js +0 -8
- package/dateinput/models/mask.mjs +0 -16
package/timepicker/TimePicker.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react"),e=require("prop-types"),K=require("@progress/kendo-react-popup"),y=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),j=require("@progress/kendo-svg-icons"),I=require("@progress/kendo-react-intl"),U=require("../package-metadata.js"),l=require("../messages/index.js"),H=require("../dateinput/DateInput.js"),W=require("./TimeSelector.js"),p=require("../utils.js"),f=require("./utils.js"),G=require("../hooks/usePickerFloatingLabel.js"),X=require("@progress/kendo-react-buttons"),Z=require("../common/constants.js"),$=require("../common/AdaptiveMode.js"),J=require("@progress/kendo-react-layout");function Q(c){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>c[t]})}}return i.default=c,Object.freeze(i)}const r=Q(_),a=class a extends r.Component{constructor(i){super(i),this._element=null,this._dateInput=r.createRef(),this._timeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{this.dateInput&&this.dateInput.focus()},this.renderTimeSelector=()=>{const{smoothScroll:t,cancelButton:s,nowButton:o,disabled:u,format:d,steps:h,unstyled:g}=this.props;return r.createElement(W.TimeSelector,{ref:this.setTimeSelectorRef,mobileMode:this.mobileMode,show:this.show,cancelButton:s,disabled:u,nowButton:o,format:d,min:this.min,max:this.max,steps:h,smoothScroll:t,value:this.value,footer:!this.mobileMode,handleTimeChange:this.mobileMode&&this.handleTimeChange,onChange:this.handleValueChange,onReject:this.handleValueReject,unstyled:g})},this.renderPopup=()=>{const{popupClass:t,...s}=this.popupSettings,{unstyled:o}=this.props,u=o&&o.uTimePicker,d=n.classNames(t),h={popupClass:n.uTimePicker.popup({c:u}),show:this.show,animate:this.element!==null,anchor:this.element,className:d,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...s};return this.props.popup?r.createElement(this.props.popup,{...h},this.renderTimeSelector()):r.createElement(K.Popup,{...h},this.renderTimeSelector())},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:t,footer:{cancelText:this.localizationService.toLanguageString(l.toggleClock,l.messages[l.timePickerCancel]),onCancel:this.handleValueReject,applyText:this.localizationService.toLanguageString(l.timePickerSet,l.messages[l.timePickerSet]),onApply:o=>this.handleValueChange(o)}};return r.createElement($.AdaptiveMode,{...s},r.createElement(J.ActionSheetContent,{overflowHidden:!0},this.renderTimeSelector()))},this.setTimeSelectorRef=t=>{this._timeSelector=t},this.nextValue=(t,s)=>t.value!==void 0?t.value:s.value,this.nextShow=(t,s)=>t.show!==void 0?t.show:s.show,this.handleInputValueChange=t=>{const s=this.mergeTime(t.value);this.handleValueChange({...t,value:s})},this.handleTimeChange=t=>{this.setState({candidate:t.time})},this.handleValueChange=t=>{this.setState({value:y.cloneDate(t.value||this.state.candidate)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.shouldFocusDateInput=!0;const{onChange:s}=this.props,o=this.state.candidate||this.value;s&&s.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,value:o,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleValueReject=t=>{this.setShow(!1)},this.handleIconClick=t=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:s,keyCode:o}=t;if(o===n.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(o===n.Keys.up||o===n.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=o===n.Keys.up,this.setShow(o===n.Keys.down))},n.validatePackage(U.packageMetadata),this.state={value:this.props.defaultValue||a.defaultProps.defaultValue,show:this.props.defaultShow||a.defaultProps.defaultShow,focused:!1,candidate:null},this.normalizeTime=this.normalizeTime.bind(this),this.setShow=this.setShow.bind(this),this.mergeTime=this.mergeTime.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get document(){if(n.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get timeSelector(){return this._timeSelector}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?y.cloneDate(i):null}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get name(){return this.props.name}get validity(){const i=this.value&&this.normalizeTime(this.value),t=this.normalizeTime(this.min),s=this.normalizeTime(this.max),o=f.isInRange(i,t,s),u=this.props.validationMessage!==void 0,d=(!this.required||this.value!==null)&&o,h=this.props.valid!==void 0?this.props.valid:d;return{customError:u,rangeOverflow:f.isBiggerThanMax(i,s),rangeUnderflow:f.isSmallerThanMin(i,t),valid:h,valueMissing:this.value===null}}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=Z.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:a.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get popupSettings(){return this.props.popupSettings||a.defaultProps.popupSettings}get min(){return this.props.min!==void 0?this.props.min:a.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:a.defaultProps.max}get dateInputComp(){return this.props.dateInput||a.defaultProps.dateInput}get localizationService(){return I.provideLocalizationService(this)}componentDidMount(){var i;this.observerResize=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this._timeSelector&&this.show&&!this.prevShow?this._timeSelector.focusActiveList():this.dateInput&&this.dateInput.element&&!this.show&&this.shouldFocusDateInput&&this.dateInput.element.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var i;(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:i=a.defaultProps.size,rounded:t=a.defaultProps.rounded,fillMode:s=a.defaultProps.fillMode,disabled:o,tabIndex:u,title:d,id:h,className:g,format:M,formatPlaceholder:D,width:O,name:P,steps:k,validationMessage:z,required:q,validityStyles:x,ariaLabelledBy:R,ariaDescribedBy:E,unstyled:v}=this.props,w=v&&v.uTimePicker,S=!this.validityStyles||this.validity.valid,B={disabled:o,format:M,formatPlaceholder:D,id:h,ariaLabelledBy:R,ariaDescribedBy:E,max:this.normalizeTime(this.max),min:this.normalizeTime(this.min),name:P,onChange:this.handleInputValueChange,required:q,steps:k,tabIndex:this.show?-1:u,title:d,valid:this.validity.valid,validationMessage:z,validityStyles:x,value:this.value&&this.normalizeTime(this.value),label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaHasPopup:"dialog",ariaExpanded:this.show,size:null,fillMode:null,rounded:null,readonly:this.mobileMode},V=this.localizationService.toLanguageString(l.toggleClock,l.messages[l.toggleClock]),F=this.localizationService.toLanguageString(l.toggleTimeSelector,l.messages[l.toggleTimeSelector]),b=r.createElement(n.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.mobileMode?void 0:this.handleBlur,onSyncBlur:this.props.onBlur,onSyncFocus:this.props.onFocus},({onFocus:N,onBlur:A})=>r.createElement(r.Fragment,null,r.createElement("span",{id:this.props.id,ref:L=>{this._element=L},className:n.classNames(n.uTimePicker.wrapper({c:w,size:i,rounded:t,fillMode:s,invalid:!S,required:this.required,disabled:o}),g),onKeyDown:this.handleKeyDown,style:{width:O},onFocus:N,onBlur:A,onClick:this.mobileMode?this.handleIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,...B}),r.createElement(X.Button,{tabIndex:-1,type:"button",icon:"clock",svgIcon:j.clockIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleIconClick,title:F,className:n.classNames(n.uTimePicker.inputButton({c:w})),rounded:null,fillMode:s,"aria-label":V}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(G.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:h,editorValid:S,editorDisabled:this.props.disabled,children:b,style:{width:this.props.width}}):b}normalizeTime(i){return p.setTime(p.MIDNIGHT_DATE,i)}setShow(i){const{onOpen:t,onClose:s}=this.props;this.show!==i&&(this.setState({show:i}),i&&t&&t.call(void 0,{target:this}),!i&&s&&s.call(void 0,{target:this}))}mergeTime(i){return this.value&&i?p.setTime(this.value,i):i}calculateMedia(i){for(const t of i)this.setState({windowWidth:t.target.clientWidth})}};a.displayName="TimePicker",a.propTypes={className:e.string,cancelButton:e.bool,nowButton:e.bool,defaultShow:e.bool,defaultValue:e.instanceOf(Date),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"])})]),formatPlaceholder:e.oneOfType([e.oneOf(["wide","narrow","short","formatPattern"]),e.shape({year:e.string,month:e.string,day:e.string,hour:e.string,minute:e.string,second:e.string})]),id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:e.bool,appendTo:e.any,popupClass:e.string}),show:e.bool,steps:e.shape({hour:e.number,minute:e.number,second:e.number}),smoothScroll:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"])},a.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"t",max:p.MAX_TIME,min:p.MIN_TIME,popupSettings:{},tabIndex:0,steps:{},validityStyles:!0,dateInput:H.DateInput,size:"medium",rounded:"medium",fillMode:"solid"};let m=a;const T=n.createPropsContext(),C=n.withIdHOC(n.withPropsContext(T,n.withUnstyledHOC(m)));C.displayName="KendoReactTimePicker";I.registerForLocalization(m);exports.TimePicker=C;exports.TimePickerPropsContext=T;exports.TimePickerWithoutContext=m;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),e=require("prop-types"),G=require("@progress/kendo-react-popup"),y=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),X=require("@progress/kendo-svg-icons"),I=require("@progress/kendo-react-intl"),Z=require("../package-metadata.js"),l=require("../messages/index.js"),$=require("../dateinput/DateInput.js"),J=require("./TimeSelector.js"),p=require("../utils.js"),f=require("./utils.js"),Q=require("../hooks/usePickerFloatingLabel.js"),Y=require("@progress/kendo-react-buttons"),ee=require("../common/constants.js"),te=require("../common/AdaptiveMode.js"),ie=require("@progress/kendo-react-layout");function se(c){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>c[t]})}}return i.default=c,Object.freeze(i)}const r=se(W),a=class a extends r.Component{constructor(i){super(i),this._element=null,this._dateInput=r.createRef(),this._timeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{this.dateInput&&this.dateInput.focus()},this.renderTimeSelector=()=>{const{smoothScroll:t,cancelButton:s,nowButton:o,disabled:u,format:d,steps:h,unstyled:g}=this.props;return r.createElement(J.TimeSelector,{ref:this.setTimeSelectorRef,mobileMode:this.mobileMode,show:this.show,cancelButton:s,disabled:u,nowButton:o,format:d,min:this.min,max:this.max,steps:h,smoothScroll:t,value:this.value,footer:!this.mobileMode,handleTimeChange:this.mobileMode&&this.handleTimeChange,onChange:this.handleValueChange,onReject:this.handleValueReject,unstyled:g})},this.renderPopup=()=>{const{popupClass:t,...s}=this.popupSettings,{unstyled:o}=this.props,u=o&&o.uTimePicker,d=n.classNames(t),h={popupClass:n.uTimePicker.popup({c:u}),show:this.show,animate:this.element!==null,anchor:this.element,className:d,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...s};return this.props.popup?r.createElement(this.props.popup,{...h},this.renderTimeSelector()):r.createElement(G.Popup,{...h},this.renderTimeSelector())},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:t,footer:{cancelText:this.localizationService.toLanguageString(l.toggleClock,l.messages[l.timePickerCancel]),onCancel:this.handleValueReject,applyText:this.localizationService.toLanguageString(l.timePickerSet,l.messages[l.timePickerSet]),onApply:o=>this.handleValueChange(o)}};return r.createElement(te.AdaptiveMode,{...s},r.createElement(ie.ActionSheetContent,{overflowHidden:!0},this.renderTimeSelector()))},this.setTimeSelectorRef=t=>{this._timeSelector=t},this.nextValue=(t,s)=>t.value!==void 0?t.value:s.value,this.nextShow=(t,s)=>t.show!==void 0?t.show:s.show,this.handleInputValueChange=t=>{const s=this.mergeTime(t.value);this.handleValueChange({...t,value:s})},this.handleTimeChange=t=>{this.setState({candidate:t.time})},this.handleValueChange=t=>{this.setState({value:y.cloneDate(t.value||this.state.candidate)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.shouldFocusDateInput=!0;const{onChange:s}=this.props,o=this.state.candidate||this.value;s&&s.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,value:o,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleValueReject=t=>{this.setShow(!1)},this.handleIconClick=t=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:s,keyCode:o}=t;if(o===n.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(o===n.Keys.up||o===n.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=o===n.Keys.up,this.setShow(o===n.Keys.down))},n.validatePackage(Z.packageMetadata),this.state={value:this.props.defaultValue||a.defaultProps.defaultValue,show:this.props.defaultShow||a.defaultProps.defaultShow,focused:!1,candidate:null},this.normalizeTime=this.normalizeTime.bind(this),this.setShow=this.setShow.bind(this),this.mergeTime=this.mergeTime.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get document(){if(n.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get timeSelector(){return this._timeSelector}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?y.cloneDate(i):null}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get name(){return this.props.name}get validity(){const i=this.value&&this.normalizeTime(this.value),t=this.normalizeTime(this.min),s=this.normalizeTime(this.max),o=f.isInRange(i,t,s),u=this.props.validationMessage!==void 0,d=(!this.required||this.value!==null)&&o,h=this.props.valid!==void 0?this.props.valid:d;return{customError:u,rangeOverflow:f.isBiggerThanMax(i,s),rangeUnderflow:f.isSmallerThanMin(i,t),valid:h,valueMissing:this.value===null}}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=ee.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:a.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get popupSettings(){return this.props.popupSettings||a.defaultProps.popupSettings}get min(){return this.props.min!==void 0?this.props.min:a.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:a.defaultProps.max}get dateInputComp(){return this.props.dateInput||a.defaultProps.dateInput}get localizationService(){return I.provideLocalizationService(this)}componentDidMount(){var i;this.observerResize=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this._timeSelector&&this.show&&!this.prevShow?this._timeSelector.focusActiveList():this.dateInput&&this.dateInput.element&&!this.show&&this.shouldFocusDateInput&&this.dateInput.element.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var i;(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:i=a.defaultProps.size,rounded:t=a.defaultProps.rounded,fillMode:s=a.defaultProps.fillMode,disabled:o,tabIndex:u,title:d,id:h,className:g,format:M,formatPlaceholder:P,width:D,name:O,steps:k,validationMessage:z,required:q,validityStyles:x,ariaLabelledBy:R,ariaDescribedBy:E,unstyled:v,enableMouseWheel:B,autoCorrectParts:V,autoSwitchParts:F,autoSwitchKeys:N,allowCaretMode:A}=this.props,w=v&&v.uTimePicker,S=!this.validityStyles||this.validity.valid,L={disabled:o,format:M,formatPlaceholder:P,id:h,ariaLabelledBy:R,ariaDescribedBy:E,max:this.normalizeTime(this.max),min:this.normalizeTime(this.min),name:O,onChange:this.handleInputValueChange,required:q,steps:k,tabIndex:this.show?-1:u,title:d,valid:this.validity.valid,validationMessage:z,validityStyles:x,value:this.value&&this.normalizeTime(this.value),label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaHasPopup:"dialog",ariaExpanded:this.show,size:null,fillMode:null,rounded:null,readonly:this.mobileMode,enableMouseWheel:B,autoCorrectParts:V,autoSwitchParts:F,autoSwitchKeys:N,allowCaretMode:A},_=this.localizationService.toLanguageString(l.toggleClock,l.messages[l.toggleClock]),K=this.localizationService.toLanguageString(l.toggleTimeSelector,l.messages[l.toggleTimeSelector]),b=r.createElement(n.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.mobileMode?void 0:this.handleBlur,onSyncBlur:this.props.onBlur,onSyncFocus:this.props.onFocus},({onFocus:j,onBlur:U})=>r.createElement(r.Fragment,null,r.createElement("span",{id:this.props.id,ref:H=>{this._element=H},className:n.classNames(n.uTimePicker.wrapper({c:w,size:i,rounded:t,fillMode:s,invalid:!S,required:this.required,disabled:o}),g),onKeyDown:this.handleKeyDown,style:{width:D},onFocus:j,onBlur:U,onClick:this.mobileMode?this.handleIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,...L}),r.createElement(Y.Button,{tabIndex:-1,type:"button",icon:"clock",svgIcon:X.clockIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleIconClick,title:K,className:n.classNames(n.uTimePicker.inputButton({c:w})),rounded:null,fillMode:s,"aria-label":_}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(Q.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:h,editorValid:S,editorDisabled:this.props.disabled,children:b,style:{width:this.props.width}}):b}normalizeTime(i){return p.setTime(p.MIDNIGHT_DATE,i)}setShow(i){const{onOpen:t,onClose:s}=this.props;this.show!==i&&(this.setState({show:i}),i&&t&&t.call(void 0,{target:this}),!i&&s&&s.call(void 0,{target:this}))}mergeTime(i){return this.value&&i?p.setTime(this.value,i):i}calculateMedia(i){for(const t of i)this.setState({windowWidth:t.target.clientWidth})}};a.displayName="TimePicker",a.propTypes={className:e.string,cancelButton:e.bool,nowButton:e.bool,defaultShow:e.bool,defaultValue:e.instanceOf(Date),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"])})]),formatPlaceholder:e.oneOfType([e.oneOf(["wide","narrow","short","formatPattern"]),e.shape({year:e.string,month:e.string,day:e.string,hour:e.string,minute:e.string,second:e.string})]),id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:e.bool,appendTo:e.any,popupClass:e.string}),show:e.bool,steps:e.shape({hour:e.number,minute:e.number,second:e.number}),smoothScroll:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"])},a.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"t",max:p.MAX_TIME,min:p.MIN_TIME,popupSettings:{},tabIndex:0,steps:{},validityStyles:!0,dateInput:$.DateInput,size:"medium",rounded:"medium",fillMode:"solid"};let m=a;const T=n.createPropsContext(),C=n.withIdHOC(n.withPropsContext(T,n.withUnstyledHOC(m)));C.displayName="KendoReactTimePicker";I.registerForLocalization(m);exports.TimePicker=C;exports.TimePickerPropsContext=T;exports.TimePickerWithoutContext=m;
|
|
@@ -8,41 +8,41 @@
|
|
|
8
8
|
"use client";
|
|
9
9
|
import * as a from "react";
|
|
10
10
|
import e from "prop-types";
|
|
11
|
-
import { Popup as
|
|
11
|
+
import { Popup as G } from "@progress/kendo-react-popup";
|
|
12
12
|
import { cloneDate as y } from "@progress/kendo-date-math";
|
|
13
|
-
import { classNames as c, uTimePicker as g, Keys as d, validatePackage as
|
|
14
|
-
import { clockIcon as
|
|
15
|
-
import { provideLocalizationService as
|
|
16
|
-
import { packageMetadata as
|
|
17
|
-
import { toggleClock as f, messages as u, timePickerCancel as
|
|
18
|
-
import { DateInput as
|
|
19
|
-
import { TimeSelector as
|
|
20
|
-
import { MAX_TIME as
|
|
21
|
-
import { isInRange as
|
|
22
|
-
import { PickerFloatingLabel as
|
|
23
|
-
import { Button as
|
|
24
|
-
import { MOBILE_MEDIUM_DEVISE as
|
|
25
|
-
import { AdaptiveMode as
|
|
26
|
-
import { ActionSheetContent as
|
|
13
|
+
import { classNames as c, uTimePicker as g, Keys as d, validatePackage as X, canUseDOM as I, AsyncFocusBlur as Z, createPropsContext as J, withIdHOC as Q, withPropsContext as Y, withUnstyledHOC as $ } from "@progress/kendo-react-common";
|
|
14
|
+
import { clockIcon as ee } from "@progress/kendo-svg-icons";
|
|
15
|
+
import { provideLocalizationService as te, registerForLocalization as ie } from "@progress/kendo-react-intl";
|
|
16
|
+
import { packageMetadata as se } from "../package-metadata.mjs";
|
|
17
|
+
import { toggleClock as f, messages as u, timePickerCancel as oe, timePickerSet as C, toggleTimeSelector as T } from "../messages/index.mjs";
|
|
18
|
+
import { DateInput as ne } from "../dateinput/DateInput.mjs";
|
|
19
|
+
import { TimeSelector as ae } from "./TimeSelector.mjs";
|
|
20
|
+
import { MAX_TIME as re, MIN_TIME as le, setTime as M, MIDNIGHT_DATE as he } from "../utils.mjs";
|
|
21
|
+
import { isInRange as de, isBiggerThanMax as ue, isSmallerThanMin as pe } from "./utils.mjs";
|
|
22
|
+
import { PickerFloatingLabel as me } from "../hooks/usePickerFloatingLabel.mjs";
|
|
23
|
+
import { Button as ce } from "@progress/kendo-react-buttons";
|
|
24
|
+
import { MOBILE_MEDIUM_DEVISE as ge } from "../common/constants.mjs";
|
|
25
|
+
import { AdaptiveMode as fe } from "../common/AdaptiveMode.mjs";
|
|
26
|
+
import { ActionSheetContent as ve } from "@progress/kendo-react-layout";
|
|
27
27
|
const n = class n extends a.Component {
|
|
28
28
|
constructor(i) {
|
|
29
29
|
super(i), this._element = null, this._dateInput = a.createRef(), this._timeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
|
|
30
30
|
this.dateInput && this.dateInput.focus();
|
|
31
31
|
}, this.renderTimeSelector = () => {
|
|
32
|
-
const { smoothScroll: t, cancelButton: s, nowButton: o, disabled:
|
|
32
|
+
const { smoothScroll: t, cancelButton: s, nowButton: o, disabled: l, format: h, steps: r, unstyled: m } = this.props;
|
|
33
33
|
return /* @__PURE__ */ a.createElement(
|
|
34
|
-
|
|
34
|
+
ae,
|
|
35
35
|
{
|
|
36
36
|
ref: this.setTimeSelectorRef,
|
|
37
37
|
mobileMode: this.mobileMode,
|
|
38
38
|
show: this.show,
|
|
39
39
|
cancelButton: s,
|
|
40
|
-
disabled:
|
|
40
|
+
disabled: l,
|
|
41
41
|
nowButton: o,
|
|
42
42
|
format: h,
|
|
43
43
|
min: this.min,
|
|
44
44
|
max: this.max,
|
|
45
|
-
steps:
|
|
45
|
+
steps: r,
|
|
46
46
|
smoothScroll: t,
|
|
47
47
|
value: this.value,
|
|
48
48
|
footer: !this.mobileMode,
|
|
@@ -53,10 +53,8 @@ const n = class n extends a.Component {
|
|
|
53
53
|
}
|
|
54
54
|
);
|
|
55
55
|
}, this.renderPopup = () => {
|
|
56
|
-
const { popupClass: t, ...s } = this.popupSettings, { unstyled: o } = this.props,
|
|
57
|
-
|
|
58
|
-
), l = {
|
|
59
|
-
popupClass: g.popup({ c: r }),
|
|
56
|
+
const { popupClass: t, ...s } = this.popupSettings, { unstyled: o } = this.props, l = o && o.uTimePicker, h = c(t), r = {
|
|
57
|
+
popupClass: g.popup({ c: l }),
|
|
60
58
|
show: this.show,
|
|
61
59
|
animate: this.element !== null,
|
|
62
60
|
anchor: this.element,
|
|
@@ -72,7 +70,7 @@ const n = class n extends a.Component {
|
|
|
72
70
|
},
|
|
73
71
|
...s
|
|
74
72
|
};
|
|
75
|
-
return this.props.popup ? /* @__PURE__ */ a.createElement(this.props.popup, { ...
|
|
73
|
+
return this.props.popup ? /* @__PURE__ */ a.createElement(this.props.popup, { ...r }, this.renderTimeSelector()) : /* @__PURE__ */ a.createElement(G, { ...r }, this.renderTimeSelector());
|
|
76
74
|
}, this.renderAdaptivePopup = () => {
|
|
77
75
|
const { windowWidth: t = 0 } = this.state, s = {
|
|
78
76
|
expand: this.show,
|
|
@@ -80,13 +78,13 @@ const n = class n extends a.Component {
|
|
|
80
78
|
adaptiveTitle: this.props.adaptiveTitle,
|
|
81
79
|
windowWidth: t,
|
|
82
80
|
footer: {
|
|
83
|
-
cancelText: this.localizationService.toLanguageString(f, u[
|
|
81
|
+
cancelText: this.localizationService.toLanguageString(f, u[oe]),
|
|
84
82
|
onCancel: this.handleValueReject,
|
|
85
|
-
applyText: this.localizationService.toLanguageString(
|
|
83
|
+
applyText: this.localizationService.toLanguageString(C, u[C]),
|
|
86
84
|
onApply: (o) => this.handleValueChange(o)
|
|
87
85
|
}
|
|
88
86
|
};
|
|
89
|
-
return /* @__PURE__ */ a.createElement(
|
|
87
|
+
return /* @__PURE__ */ a.createElement(fe, { ...s }, /* @__PURE__ */ a.createElement(ve, { overflowHidden: !0 }, this.renderTimeSelector()));
|
|
90
88
|
}, this.setTimeSelectorRef = (t) => {
|
|
91
89
|
this._timeSelector = t;
|
|
92
90
|
}, this.nextValue = (t, s) => t.value !== void 0 ? t.value : s.value, this.nextShow = (t, s) => t.show !== void 0 ? t.show : s.show, this.handleInputValueChange = (t) => {
|
|
@@ -123,7 +121,7 @@ const n = class n extends a.Component {
|
|
|
123
121
|
return;
|
|
124
122
|
}
|
|
125
123
|
s && (o === d.up || o === d.down) && (t.preventDefault(), t.stopPropagation(), this.shouldFocusDateInput = o === d.up, this.setShow(o === d.down));
|
|
126
|
-
},
|
|
124
|
+
}, X(se), this.state = {
|
|
127
125
|
value: this.props.defaultValue || n.defaultProps.defaultValue,
|
|
128
126
|
show: this.props.defaultShow || n.defaultProps.defaultShow,
|
|
129
127
|
focused: !1,
|
|
@@ -178,12 +176,12 @@ const n = class n extends a.Component {
|
|
|
178
176
|
* Represents the validity state into which the TimePicker is set.
|
|
179
177
|
*/
|
|
180
178
|
get validity() {
|
|
181
|
-
const i = this.value && this.normalizeTime(this.value), t = this.normalizeTime(this.min), s = this.normalizeTime(this.max), o =
|
|
179
|
+
const i = this.value && this.normalizeTime(this.value), t = this.normalizeTime(this.min), s = this.normalizeTime(this.max), o = de(i, t, s), l = this.props.validationMessage !== void 0, h = (!this.required || this.value !== null) && o, r = this.props.valid !== void 0 ? this.props.valid : h;
|
|
182
180
|
return {
|
|
183
|
-
customError:
|
|
184
|
-
rangeOverflow:
|
|
185
|
-
rangeUnderflow:
|
|
186
|
-
valid:
|
|
181
|
+
customError: l,
|
|
182
|
+
rangeOverflow: ue(i, s),
|
|
183
|
+
rangeUnderflow: pe(i, t),
|
|
184
|
+
valid: r,
|
|
187
185
|
valueMissing: this.value === null
|
|
188
186
|
};
|
|
189
187
|
}
|
|
@@ -191,7 +189,7 @@ const n = class n extends a.Component {
|
|
|
191
189
|
* The mobile mode of the ComboBox.
|
|
192
190
|
*/
|
|
193
191
|
get mobileMode() {
|
|
194
|
-
return !!(this.state.windowWidth && this.state.windowWidth <=
|
|
192
|
+
return !!(this.state.windowWidth && this.state.windowWidth <= ge && this.props.adaptive);
|
|
195
193
|
}
|
|
196
194
|
/**
|
|
197
195
|
* @hidden
|
|
@@ -218,7 +216,7 @@ const n = class n extends a.Component {
|
|
|
218
216
|
return this.props.dateInput || n.defaultProps.dateInput;
|
|
219
217
|
}
|
|
220
218
|
get localizationService() {
|
|
221
|
-
return
|
|
219
|
+
return te(this);
|
|
222
220
|
}
|
|
223
221
|
/**
|
|
224
222
|
* @hidden
|
|
@@ -249,9 +247,9 @@ const n = class n extends a.Component {
|
|
|
249
247
|
rounded: t = n.defaultProps.rounded,
|
|
250
248
|
fillMode: s = n.defaultProps.fillMode,
|
|
251
249
|
disabled: o,
|
|
252
|
-
tabIndex:
|
|
250
|
+
tabIndex: l,
|
|
253
251
|
title: h,
|
|
254
|
-
id:
|
|
252
|
+
id: r,
|
|
255
253
|
className: m,
|
|
256
254
|
format: D,
|
|
257
255
|
formatPlaceholder: O,
|
|
@@ -263,12 +261,17 @@ const n = class n extends a.Component {
|
|
|
263
261
|
validityStyles: B,
|
|
264
262
|
ariaLabelledBy: R,
|
|
265
263
|
ariaDescribedBy: V,
|
|
266
|
-
unstyled: v
|
|
267
|
-
|
|
264
|
+
unstyled: v,
|
|
265
|
+
enableMouseWheel: F,
|
|
266
|
+
autoCorrectParts: A,
|
|
267
|
+
autoSwitchParts: N,
|
|
268
|
+
autoSwitchKeys: L,
|
|
269
|
+
allowCaretMode: _
|
|
270
|
+
} = this.props, w = v && v.uTimePicker, S = !this.validityStyles || this.validity.valid, q = {
|
|
268
271
|
disabled: o,
|
|
269
272
|
format: D,
|
|
270
273
|
formatPlaceholder: O,
|
|
271
|
-
id:
|
|
274
|
+
id: r,
|
|
272
275
|
ariaLabelledBy: R,
|
|
273
276
|
ariaDescribedBy: V,
|
|
274
277
|
max: this.normalizeTime(this.max),
|
|
@@ -277,7 +280,7 @@ const n = class n extends a.Component {
|
|
|
277
280
|
onChange: this.handleInputValueChange,
|
|
278
281
|
required: k,
|
|
279
282
|
steps: x,
|
|
280
|
-
tabIndex: this.show ? -1 :
|
|
283
|
+
tabIndex: this.show ? -1 : l,
|
|
281
284
|
title: h,
|
|
282
285
|
valid: this.validity.valid,
|
|
283
286
|
validationMessage: E,
|
|
@@ -290,21 +293,29 @@ const n = class n extends a.Component {
|
|
|
290
293
|
size: null,
|
|
291
294
|
fillMode: null,
|
|
292
295
|
rounded: null,
|
|
293
|
-
readonly: this.mobileMode
|
|
294
|
-
|
|
295
|
-
|
|
296
|
+
readonly: this.mobileMode,
|
|
297
|
+
enableMouseWheel: F,
|
|
298
|
+
autoCorrectParts: A,
|
|
299
|
+
autoSwitchParts: N,
|
|
300
|
+
autoSwitchKeys: L,
|
|
301
|
+
allowCaretMode: _
|
|
302
|
+
}, K = this.localizationService.toLanguageString(f, u[f]), U = this.localizationService.toLanguageString(
|
|
303
|
+
T,
|
|
304
|
+
u[T]
|
|
305
|
+
), b = /* @__PURE__ */ a.createElement(
|
|
306
|
+
Z,
|
|
296
307
|
{
|
|
297
308
|
onFocus: this.handleFocus,
|
|
298
309
|
onBlur: this.mobileMode ? void 0 : this.handleBlur,
|
|
299
310
|
onSyncBlur: this.props.onBlur,
|
|
300
311
|
onSyncFocus: this.props.onFocus
|
|
301
312
|
},
|
|
302
|
-
({ onFocus:
|
|
313
|
+
({ onFocus: H, onBlur: j }) => /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
|
|
303
314
|
"span",
|
|
304
315
|
{
|
|
305
316
|
id: this.props.id,
|
|
306
|
-
ref: (
|
|
307
|
-
this._element =
|
|
317
|
+
ref: (W) => {
|
|
318
|
+
this._element = W;
|
|
308
319
|
},
|
|
309
320
|
className: c(
|
|
310
321
|
g.wrapper({
|
|
@@ -320,8 +331,8 @@ const n = class n extends a.Component {
|
|
|
320
331
|
),
|
|
321
332
|
onKeyDown: this.handleKeyDown,
|
|
322
333
|
style: { width: P },
|
|
323
|
-
onFocus:
|
|
324
|
-
onBlur:
|
|
334
|
+
onFocus: H,
|
|
335
|
+
onBlur: j,
|
|
325
336
|
onClick: this.mobileMode ? this.handleIconClick : void 0
|
|
326
337
|
},
|
|
327
338
|
/* @__PURE__ */ a.createElement(
|
|
@@ -330,34 +341,34 @@ const n = class n extends a.Component {
|
|
|
330
341
|
_ref: this._dateInput,
|
|
331
342
|
ariaRole: "combobox",
|
|
332
343
|
ariaControls: this._popupId,
|
|
333
|
-
...
|
|
344
|
+
...q
|
|
334
345
|
}
|
|
335
346
|
),
|
|
336
347
|
/* @__PURE__ */ a.createElement(
|
|
337
|
-
|
|
348
|
+
ce,
|
|
338
349
|
{
|
|
339
350
|
tabIndex: -1,
|
|
340
351
|
type: "button",
|
|
341
352
|
icon: "clock",
|
|
342
|
-
svgIcon:
|
|
353
|
+
svgIcon: ee,
|
|
343
354
|
onMouseDown: this.handleIconMouseDown,
|
|
344
355
|
onClick: this.mobileMode ? void 0 : this.handleIconClick,
|
|
345
|
-
title:
|
|
356
|
+
title: U,
|
|
346
357
|
className: c(g.inputButton({ c: w })),
|
|
347
358
|
rounded: null,
|
|
348
359
|
fillMode: s,
|
|
349
|
-
"aria-label":
|
|
360
|
+
"aria-label": K
|
|
350
361
|
}
|
|
351
362
|
),
|
|
352
363
|
!this.mobileMode && this.renderPopup()
|
|
353
364
|
), this.mobileMode && this.renderAdaptivePopup())
|
|
354
365
|
);
|
|
355
366
|
return this.props.label ? /* @__PURE__ */ a.createElement(
|
|
356
|
-
|
|
367
|
+
me,
|
|
357
368
|
{
|
|
358
369
|
dateInput: this._dateInput,
|
|
359
370
|
label: this.props.label,
|
|
360
|
-
editorId:
|
|
371
|
+
editorId: r,
|
|
361
372
|
editorValid: S,
|
|
362
373
|
editorDisabled: this.props.disabled,
|
|
363
374
|
children: b,
|
|
@@ -366,7 +377,7 @@ const n = class n extends a.Component {
|
|
|
366
377
|
) : b;
|
|
367
378
|
}
|
|
368
379
|
normalizeTime(i) {
|
|
369
|
-
return M(
|
|
380
|
+
return M(he, i);
|
|
370
381
|
}
|
|
371
382
|
setShow(i) {
|
|
372
383
|
const { onOpen: t, onClose: s } = this.props;
|
|
@@ -412,7 +423,12 @@ n.displayName = "TimePicker", n.propTypes = {
|
|
|
412
423
|
})
|
|
413
424
|
]),
|
|
414
425
|
formatPlaceholder: e.oneOfType([
|
|
415
|
-
e.oneOf([
|
|
426
|
+
e.oneOf([
|
|
427
|
+
"wide",
|
|
428
|
+
"narrow",
|
|
429
|
+
"short",
|
|
430
|
+
"formatPattern"
|
|
431
|
+
]),
|
|
416
432
|
e.shape({
|
|
417
433
|
year: e.string,
|
|
418
434
|
month: e.string,
|
|
@@ -456,28 +472,28 @@ n.displayName = "TimePicker", n.propTypes = {
|
|
|
456
472
|
defaultValue: null,
|
|
457
473
|
disabled: !1,
|
|
458
474
|
format: "t",
|
|
459
|
-
max:
|
|
460
|
-
min:
|
|
475
|
+
max: re,
|
|
476
|
+
min: le,
|
|
461
477
|
popupSettings: {},
|
|
462
478
|
tabIndex: 0,
|
|
463
479
|
steps: {},
|
|
464
480
|
validityStyles: !0,
|
|
465
|
-
dateInput:
|
|
481
|
+
dateInput: ne,
|
|
466
482
|
size: "medium",
|
|
467
483
|
rounded: "medium",
|
|
468
484
|
fillMode: "solid"
|
|
469
485
|
};
|
|
470
486
|
let p = n;
|
|
471
|
-
const
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
487
|
+
const we = J(), Se = Q(
|
|
488
|
+
Y(
|
|
489
|
+
we,
|
|
490
|
+
$(p)
|
|
475
491
|
)
|
|
476
492
|
);
|
|
477
|
-
|
|
478
|
-
|
|
493
|
+
Se.displayName = "KendoReactTimePicker";
|
|
494
|
+
ie(p);
|
|
479
495
|
export {
|
|
480
|
-
|
|
481
|
-
|
|
496
|
+
Se as TimePicker,
|
|
497
|
+
we as TimePickerPropsContext,
|
|
482
498
|
p as TimePickerWithoutContext
|
|
483
499
|
};
|
|
@@ -18,10 +18,13 @@ class y {
|
|
|
18
18
|
calculateHeights(c, n) {
|
|
19
19
|
if (!C)
|
|
20
20
|
return;
|
|
21
|
-
const t = n && n.uTime, o = s("div"), p = s("span"), u = s("ul"), h = s("li"), m = () => h("<span>02</span>", i(e.li({ c: t }))), d = () => u([m()], i(e.ul({ c: t }))), f = () => o(
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
21
|
+
const t = n && n.uTime, o = s("div"), p = s("span"), u = s("ul"), h = s("li"), m = () => h("<span>02</span>", i(e.li({ c: t }))), d = () => u([m()], i(e.ul({ c: t }))), f = () => o(
|
|
22
|
+
[d()],
|
|
23
|
+
i(
|
|
24
|
+
e.containerSelector({ c: t }),
|
|
25
|
+
e.container({ c: t, content: !0, scrollable: !0 })
|
|
26
|
+
)
|
|
27
|
+
), g = o(
|
|
25
28
|
[
|
|
26
29
|
p("minute", i(e.title({ c: t }))),
|
|
27
30
|
o([f()], i(e.list({ c: t })))
|
package/timepicker/utils.mjs
CHANGED
|
@@ -38,29 +38,17 @@ const a = (e) => (t, r) => {
|
|
|
38
38
|
}), F = (e, t, r) => {
|
|
39
39
|
if (!e || !t || !r)
|
|
40
40
|
return e;
|
|
41
|
-
const {
|
|
42
|
-
candidateValue: n,
|
|
43
|
-
minValue: s,
|
|
44
|
-
maxValue: o
|
|
45
|
-
} = i(e, t, r);
|
|
41
|
+
const { candidateValue: n, minValue: s, maxValue: o } = i(e, t, r);
|
|
46
42
|
return n < s ? u(e, t) : n > o ? u(e, r) : e;
|
|
47
43
|
}, N = (e, t, r) => {
|
|
48
44
|
if (!e || !t || !r)
|
|
49
45
|
return !0;
|
|
50
|
-
const {
|
|
51
|
-
candidateValue: n,
|
|
52
|
-
minValue: s,
|
|
53
|
-
maxValue: o
|
|
54
|
-
} = i(e, t, r);
|
|
46
|
+
const { candidateValue: n, minValue: s, maxValue: o } = i(e, t, r);
|
|
55
47
|
return s <= n && n <= o;
|
|
56
48
|
}, P = (e, t, r) => {
|
|
57
49
|
if (e === null)
|
|
58
50
|
return !0;
|
|
59
|
-
const {
|
|
60
|
-
candidateValue: n,
|
|
61
|
-
minValue: s,
|
|
62
|
-
maxValue: o
|
|
63
|
-
} = i(e, t, r);
|
|
51
|
+
const { candidateValue: n, minValue: s, maxValue: o } = i(e, t, r);
|
|
64
52
|
return s <= n && n <= o;
|
|
65
53
|
}, v = (e, t) => {
|
|
66
54
|
if (e === null || t === null)
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react"),s=require("prop-types"),f=require("@progress/kendo-react-common"),H=require("./services/ScrollerService.js");function P(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const g=P(w),T=(r,e,t)=>Math.min(Math.abs(e-r),t),C=17,O=10,A={1:r=>e=>e+r,0:r=>e=>e-r},x={1:r=>e=>Math.min(e,r),0:r=>e=>Math.max(e,r)},I={1:r=>e=>e<r,0:r=>e=>e>r},a=class a extends g.Component{constructor(e){super(e),this.rowHeightService=null,this.scrollContainer=null,this.lastDirection=null,this.lastTotal=0,this.lastTake=0,this.animationInProgress=!1,this.restrictScroll=!1,this.scrollTo=t=>{const i=this.direction==="vertical"?"scrollTop":"scrollLeft";if(!this.scrollContainer)return;const o=this.scrollContainer[i];this.restrictScroll&&i==="scrollTop"&&(!Number.isInteger(o)||!Number.isInteger(t))&&Math.abs(o-t)<O||(this.scrollContainer[i]=t)},this.scrollToIndex=t=>{this.animationInProgress=!1,this.rowHeightService&&this.scrollTo(this.rowHeightService.offset(t))},this.animateToIndex=t=>{if(!this.rowHeightService||!window)return;window.cancelAnimationFrame(this.cancelAnimation);const i=this.rowHeightService.offset(t),o=this.getContainerScrollDirection(i)
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const w=require("react"),s=require("prop-types"),f=require("@progress/kendo-react-common"),H=require("./services/ScrollerService.js");function P(r){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(e,t,i.get?i:{enumerable:!0,get:()=>r[t]})}}return e.default=r,Object.freeze(e)}const g=P(w),T=(r,e,t)=>Math.min(Math.abs(e-r),t),C=17,O=10,A={1:r=>e=>e+r,0:r=>e=>e-r},x={1:r=>e=>Math.min(e,r),0:r=>e=>Math.max(e,r)},I={1:r=>e=>e<r,0:r=>e=>e>r},a=class a extends g.Component{constructor(e){super(e),this.rowHeightService=null,this.scrollContainer=null,this.lastDirection=null,this.lastTotal=0,this.lastTake=0,this.animationInProgress=!1,this.restrictScroll=!1,this.scrollTo=t=>{const i=this.direction==="vertical"?"scrollTop":"scrollLeft";if(!this.scrollContainer)return;const o=this.scrollContainer[i];this.restrictScroll&&i==="scrollTop"&&(!Number.isInteger(o)||!Number.isInteger(t))&&Math.abs(o-t)<O||(this.scrollContainer[i]=t)},this.scrollToIndex=t=>{this.animationInProgress=!1,this.rowHeightService&&this.scrollTo(this.rowHeightService.offset(t))},this.animateToIndex=t=>{if(!this.rowHeightService||!window)return;window.cancelAnimationFrame(this.cancelAnimation);const i=this.rowHeightService.offset(t),o=this.getContainerScrollDirection(i),{start:n,end:l}=this.scrollRange(i,o);if(n===l)return;const S=this.scrollStep(n,l),c=A[o](S),h=x[o](l),u=I[o](c(l)),m=p=>{this.animationInProgress=!0;const d=c(p);this.scrollTo(h(d)),u(d)?this.cancelAnimation=window.requestAnimationFrame(()=>{m(d)}):this.animationInProgress=!1};this.cancelAnimation=window.requestAnimationFrame(()=>{m(n)})},this.scrollToBottom=()=>{this.rowHeightService&&this.scrollTo(this.rowHeightService.totalHeight()+this.props.bottomOffset)},this.scrollStep=(t,i)=>{const o=this.props.scrollDuration||a.defaultProps.scrollDuration;return Math.abs(i-t)/(o/C)},this.scrollRange=(t,i)=>{const o=this.containerScrollPosition;if(parseInt(`${t}`,10)===parseInt(`${o}`,10))return{start:t,end:t};const n=this.containerMaxScroll(),l=i===0?1:-1,S=T(o,t,this.props.maxScrollDifference||0),c=Math.min(t,n);return{start:Math.min(Math.max(c+l*S,0),n),end:c}},this.containerMaxScroll=()=>this.containerScrollSize-this.containerOffsetSize,this.getContainerScrollDirection=t=>t<this.containerScrollPosition?0:1,this.initServices=(t=this.props)=>{const i=this.direction==="vertical"?t.itemHeight:t.itemWidth;i!==void 0&&(this.rowHeightService=new f.RowHeightService(t.total,i,0),this.scrollerService.create(this.rowHeightService,t.skip,t.take,t.total,t.topOffset,this.scrollOffsetSize,this.direction))},this.getContainerProperty=t=>this.scrollContainer?this.scrollContainer[t]:0,this.handleScroll=t=>{if(!this.scrollContainer||!this.rowHeightService)return;const i=t.target;this.scrollerService.onScroll({scrollLeft:i.scrollLeft,scrollTop:i.scrollTop,offsetHeight:i.offsetHeight,offsetWidth:i.offsetWidth});const o=this.rowHeightService.index(this.containerScrollPosition-this.props.topOffset),{onScrollAction:n}=this.props,l={index:o,target:i,scrollAction:this.scrollAction,pageAction:this.pageAction,animationInProgress:this.animationInProgress};this.props.onScroll&&this.props.onScroll.call(void 0,t),n&&n.call(void 0,l),this.scrollAction=void 0,this.pageAction=void 0},this.handleScrollAction=t=>{this.scrollAction=t},this.handlePageAction=t=>{this.pageAction=t},this.scrollerService=new H.ScrollerService(this.handleScrollAction,this.handlePageAction),this.restrictScroll=Number.parseFloat(g.version)>17}get element(){return this.scrollContainer}get containerOffsetSize(){return this.getContainerProperty(this.direction==="vertical"?"offsetHeight":"offsetWidth")}get containerScrollSize(){return this.getContainerProperty(this.direction==="vertical"?"scrollHeight":"scrollWidth")}get containerScrollPosition(){return this.getContainerProperty(this.direction==="vertical"?"scrollTop":"scrollLeft")}get direction(){return this.props.direction!==void 0?this.props.direction:a.defaultProps.direction}get scrollOffsetSize(){return this.props.scrollOffsetSize!==void 0?this.props.scrollOffsetSize:a.defaultProps.scrollOffsetSize}activeIndex(){return this.itemIndex(Math.ceil(this.containerScrollPosition))}itemIndex(e){return this.rowHeightService?this.rowHeightService.index(e):0}itemOffset(e){return this.rowHeightService?this.rowHeightService.offset(e):0}isIndexVisible(e){if(!this.rowHeightService)return!1;const t=this.containerScrollPosition,i=t+this.containerOffsetSize,o=this.rowHeightService.offset(e),n=o+this.rowHeightService.height(e);return o>=t&&n<=i}isListScrolled(e){return this.rowHeightService?this.containerScrollPosition!==this.rowHeightService.offset(e):!1}componentDidMount(){const{onMount:e}=this.props;e&&e.call(void 0,this)}render(){const{total:e,take:t,bottomOffset:i,className:o,tabIndex:n,role:l,children:S,unstyled:c}=this.props,h=c&&c.uCalendar;(this.lastTotal!==e||this.lastDirection!==this.direction||this.lastTake!==t)&&(this.initServices(),this.lastTotal=e,this.lastDirection=this.direction,this.lastTake=t);const u=`${(this.rowHeightService?this.rowHeightService.totalHeight():0)+i}`,m=this.direction==="vertical"?{height:`${u}px`}:{width:`${u}px`},p=f.classNames(f.uCalendar.scrollableSelector({c:h}),f.uCalendar.scrollable({c:h,horizontal:this.direction==="horizontal"}),o),d=f.classNames(f.uCalendar.scrollablePlaceholder({c:h,horizontal:this.direction==="horizontal"}));return g.createElement("div",{ref:b=>{this.scrollContainer=b},onScroll:this.handleScroll,className:p,tabIndex:n,role:l},S,g.createElement("div",{style:m,className:d}))}};a.propTypes={bottomOffset:s.number.isRequired,className:s.string,direction:s.oneOf(["horizontal","vertical"]),forceScroll:s.bool,itemHeight:s.number,itemWidth:s.number,maxScrollDifference:s.number,onScroll:s.func,onScrollAction:s.func,scrollDuration:s.number,scrollOffsetSize:s.number,skip:s.number.isRequired,tabIndex:s.number,take:s.number.isRequired,topOffset:s.number.isRequired,total:s.number.isRequired,role:s.string},a.defaultProps={direction:"vertical",forceScroll:!1,scrollOffsetSize:0,maxScrollDifference:100,scrollDuration:100};let v=a;exports.Virtualization=v;
|
|
@@ -33,8 +33,7 @@ const T = (s, i, t) => Math.min(Math.abs(i - s), t), A = 17, C = 10, x = {
|
|
|
33
33
|
if (!this.rowHeightService || !window)
|
|
34
34
|
return;
|
|
35
35
|
window.cancelAnimationFrame(this.cancelAnimation);
|
|
36
|
-
const e = this.rowHeightService.offset(t), r = this.getContainerScrollDirection(e);
|
|
37
|
-
let { start: n, end: l } = this.scrollRange(e, r);
|
|
36
|
+
const e = this.rowHeightService.offset(t), r = this.getContainerScrollDirection(e), { start: n, end: l } = this.scrollRange(e, r);
|
|
38
37
|
if (n === l)
|
|
39
38
|
return;
|
|
40
39
|
const f = this.scrollStep(n, l), c = x[r](f), h = I[r](l), d = M[r](c(l)), m = (g) => {
|
|
@@ -91,10 +90,7 @@ const T = (s, i, t) => Math.min(Math.abs(i - s), t), A = 17, C = 10, x = {
|
|
|
91
90
|
this.scrollAction = t;
|
|
92
91
|
}, this.handlePageAction = (t) => {
|
|
93
92
|
this.pageAction = t;
|
|
94
|
-
}, this.scrollerService = new P(
|
|
95
|
-
this.handleScrollAction,
|
|
96
|
-
this.handlePageAction
|
|
97
|
-
), this.restrictScroll = Number.parseFloat(u.version) > 17;
|
|
93
|
+
}, this.scrollerService = new P(this.handleScrollAction, this.handlePageAction), this.restrictScroll = Number.parseFloat(u.version) > 17;
|
|
98
94
|
}
|
|
99
95
|
get element() {
|
|
100
96
|
return this.scrollContainer;
|
|
@@ -166,13 +162,7 @@ const T = (s, i, t) => Math.min(Math.abs(i - s), t), A = 17, C = 10, x = {
|
|
|
166
162
|
role: l
|
|
167
163
|
},
|
|
168
164
|
f,
|
|
169
|
-
/* @__PURE__ */ u.createElement(
|
|
170
|
-
"div",
|
|
171
|
-
{
|
|
172
|
-
style: m,
|
|
173
|
-
className: S
|
|
174
|
-
}
|
|
175
|
-
)
|
|
165
|
+
/* @__PURE__ */ u.createElement("div", { style: m, className: S })
|
|
176
166
|
);
|
|
177
167
|
}
|
|
178
168
|
};
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @license
|
|
3
|
-
*-------------------------------------------------------------------------------------------
|
|
4
|
-
* Copyright © 2024 Progress Software Corporation. All rights reserved.
|
|
5
|
-
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
|
-
*-------------------------------------------------------------------------------------------
|
|
7
|
-
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("@progress/kendo-date-math"),p=require("./mask.js"),M=require("../utils.js");class y{constructor(t,e,s){this.year=!0,this.month=!0,this.date=!0,this.hours=!0,this.minutes=!0,this.seconds=!0,this.milliseconds=!0,this.leadingZero=null,this.typedMonthPart="",this.knownParts="adHhmMsEy",this.symbols={E:"E",H:"H",M:"M",a:"a",d:"d",h:"h",m:"m",s:"s",y:"y"},this._value=r.getDate(new Date),this.intlProvider=t,this.formatPlaceholder=e,this.format=s,this.monthNames=this.allFormatedMonths()}get intl(){return this.intlProvider()}get value(){return this._value}setValue(t){t?r.isEqual(t,this._value)||(this._value=r.cloneDate(t),this.modifyExisting(!0)):(this._value=r.getDate(new Date),this.modifyExisting(!1))}hasValue(){const t=(e,s)=>e||s.type!=="literal"&&s.type!=="dayperiod"&&this.getExisting(s.pattern[0]);return this.intl.splitDateFormat(this.format).reduce(t,!1)}getDateObject(){for(let t=0;t<this.knownParts.length;t++)if(!this.getExisting(this.knownParts[t]))return null;return r.cloneDate(this.value)}getTextAndFormat(){return this.merge(this.intl.formatDate(this.value,this.format),this.dateFormatString(this.value,this.format))}modifyExisting(t){const e=this.dateFormatString(this.value,this.format).symbols;for(let s=0;s<e.length;s++)this.setExisting(e[s],t)}getExisting(t){switch(t){case"y":return this.year;case"M":case"L":return this.month;case"d":return this.date;case"E":return this.date&&this.month&&this.year;case"h":case"H":return this.hours;case"m":return this.minutes;case"s":return this.seconds;default:return!0}}setExisting(t,e){switch(t){case"y":this.year=e,e===!1&&this._value.setFullYear(2e3);break;case"M":this.month=e,e===!1&&this._value.setMonth(0);break;case"d":this.date=e;break;case"h":case"H":this.hours=e;break;case"m":this.minutes=e;break;case"s":this.seconds=e;break;default:return}}modifyPart(t,e){let s=r.cloneDate(this.value);switch(t){case"y":s.setFullYear(s.getFullYear()+e);break;case"M":s=r.addMonths(this.value,e);break;case"d":case"E":s.setDate(s.getDate()+e);break;case"h":case"H":s.setHours(s.getHours()+e);break;case"m":s.setMinutes(s.getMinutes()+e);break;case"s":s.setSeconds(s.getSeconds()+e);break;case"a":s.setHours(s.getHours()+12*e);break}this.setExisting(t,!0),this._value=s}parsePart(t,e){if(this.resetLeadingZero(),!e)return this.setExisting(t,!1),{value:null};const s=this.intl.formatDate(this.value,this.format),n=this.dateFormatString(this.value,this.format),h=n.symbols;let i=!1,l="",o="",m="";for(let u=0;u<s.length;u++)h[u]===t?(o+=this.getExisting(t)?s[u]:"0",i=!0):i?m+=s[u]:l+=s[u];let a=null;const c=this.matchMonth(e);for(;o.length>0&&o.charAt(0)==="0";)o=o.slice(1);o.length>=4&&(o="");for(let u=0;u<2;u++){let g=o+e,f=parseInt(g,10);if(a=this.intl.parseDate(l+g+m,this.format),!a&&!isNaN(f)&&!isNaN(parseInt(e,10))){if(t==="M"&&!c){const d=f-1;d>-1&&d<12&&(a=r.cloneDate(this.value),a.setMonth(d),a.getMonth()!==d&&(a=r.lastDayOfMonth(r.addMonths(a,-1))))}t==="y"&&(a=r.createDate(parseInt(g,10),this.month?this.value.getMonth():0,this.date?this.value.getDate():1,this.hours?this.value.getHours():0,this.minutes?this.value.getMinutes():0,this.seconds?this.value.getSeconds():0,this.milliseconds?this.value.getMilliseconds():0),this.date&&a.getDate()!==this.value.getDate()&&(a=r.lastDayOfMonth(r.addMonths(a,-1))))}if(a)return this._value=a,this.setExisting(t,!0),{value:this.value};o=""}return c&&(a=this.intl.parseDate(l+c+m,this.format),a)?(this._value=a,this.setExisting(t,!0),{value:this.value}):(e==="0"&&(this.leadingZero=this.isAbbrMonth(n.partMap,t)?null:{[t]:!0},this.setExisting(t,!1)),{value:null})}symbolMap(t){return this.intl.splitDateFormat(this.format).reduce(M.dateSymbolMap,{})[t]}resetLeadingZero(){const t=this.leadingZero!==null;return this.leadingZero=null,t}isAbbrMonth(t,e){const s=this.partPattern(t,e);return s.type==="month"&&s.names}partPattern(t,e){return t.filter(s=>s.pattern.indexOf(e)!==-1)[0]}matchMonth(t){if(this.typedMonthPart+=t.toLowerCase(),this.monthNames.length===0)return"";for(;this.typedMonthPart.length>0;){for(let s=0;s<this.monthNames.length;s++)if(this.monthNames[s].toLowerCase().indexOf(this.typedMonthPart)===0)return this.monthNames[s];const e=parseInt(this.typedMonthPart,10);if(e>=1&&e<=12&&e.toString()===this.typedMonthPart)return this.monthNames[e-1];this.typedMonthPart=this.typedMonthPart.substring(1,this.typedMonthPart.length)}return""}allFormatedMonths(){const t=this.intl.splitDateFormat(this.format);for(let e=0;e<t.length;e++)if(t[e].type==="month"&&t[e].names)return this.intl.dateFormatNames(t[e].names);return[]}dateFormatString(t,e){const s=this.intl.splitDateFormat(e),n=[],h=[];for(let l=0;l<s.length;l++){let o=this.intl.formatDate(t,{pattern:s[l].pattern}).length;for(;o>0;)n.push(this.symbols[s[l].pattern[0]]||"_"),h.push(s[l]),o--}const i=new p.Mask;return i.symbols=n.join(""),i.partMap=h,i}merge(t,e){let s="",n="",h=e.symbols;for(let i=h.length-1;i>=0;i--)if(this.knownParts.indexOf(h[i])===-1||this.getExisting(h[i]))s=t[i]+s,n=h[i]+n;else{const l=h[i];for(;i>=0&&l===h[i];)i--;for(i++,this.leadingZero&&this.leadingZero[l]?s="0"+s:s=this.dateFieldName(e.partMap[i])+s;n.length<s.length;)n=h[i]+n}return{text:s,format:n}}dateFieldName(t){const e=this.formatPlaceholder||"wide";return e[t.type]?e[t.type]:e==="formatPattern"?t.pattern:this.intl.dateFieldName(Object.assign(t,{nameType:e}))}}exports.KendoDate=y;
|