@progress/kendo-react-dateinputs 14.5.0-develop.9 → 15.0.0-develop.2
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/CalendarMcpWrapper.d.ts +16 -0
- package/CalendarMcpWrapper.js +8 -0
- package/CalendarMcpWrapper.mjs +18 -0
- package/DateRangePickerMcpWrapper.d.ts +16 -0
- package/DateRangePickerMcpWrapper.js +8 -0
- package/DateRangePickerMcpWrapper.mjs +18 -0
- package/DateTimePickerMcpWrapper.d.ts +16 -0
- package/DateTimePickerMcpWrapper.js +8 -0
- package/DateTimePickerMcpWrapper.mjs +18 -0
- package/README.md +4 -4
- package/TimePickerMcpWrapper.d.ts +16 -0
- package/TimePickerMcpWrapper.js +8 -0
- package/TimePickerMcpWrapper.mjs +18 -0
- package/calendar/components/Calendar.d.ts +6 -1
- package/calendar/components/Calendar.mjs +5 -5
- package/dateinput/DateInput.d.ts +11 -1
- package/dateinput/DateInput.js +1 -1
- package/dateinput/DateInput.mjs +202 -194
- package/datepicker/DatePicker.d.ts +6 -1
- package/datepicker/DatePicker.js +1 -1
- package/datepicker/DatePicker.mjs +233 -231
- package/daterangepicker/DateRangePicker.d.ts +6 -1
- package/daterangepicker/DateRangePicker.js +1 -1
- package/daterangepicker/DateRangePicker.mjs +65 -61
- package/datetimepicker/DateTimePicker.d.ts +7 -1
- package/datetimepicker/DateTimePicker.js +1 -1
- package/datetimepicker/DateTimePicker.mjs +106 -100
- package/dist/cdn/js/kendo-react-dateinputs.js +1 -1
- package/index.d.mts +12 -4
- package/index.d.ts +12 -4
- package/index.js +1 -1
- package/index.mjs +110 -105
- package/messages/index.d.ts +25 -0
- package/messages/index.js +1 -1
- package/messages/index.mjs +46 -36
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +8 -8
- package/timepicker/TimePicker.d.ts +7 -1
- package/timepicker/TimePicker.js +1 -1
- package/timepicker/TimePicker.mjs +90 -87
|
@@ -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 strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("react"),t=require("prop-types"),O=require("@progress/kendo-react-popup"),b=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),c=require("@progress/kendo-react-intl"),T=require("@progress/kendo-svg-icons"),D=require("../package-metadata.js"),g=require("../dateinput/DateInput.js"),x=require("../calendar/components/MultiViewCalendar.js"),h=require("../calendar/models/SelectionRange.js"),u=require("../utils.js"),i=require("../messages/index.js"),P=require("@progress/kendo-react-buttons"),_=require("../common/AdaptiveMode.js"),A=require("@progress/kendo-react-layout");function N(d){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(a,e,s.get?s:{enumerable:!0,get:()=>d[e]})}}return a.default=d,Object.freeze(a)}const n=N(M),l=class l extends n.Component{constructor(a){super(a),this._element=null,this._calendar=null,this._startDateInput=n.createRef(),this._endDateInput=n.createRef(),this.shouldFocusDateInput=!1,this.shouldFocusCalendar=!1,this.showLicenseWatermark=!1,this.focus=()=>{this.startDateInput&&this.startDateInput.focus()},this.setCalendarRef=e=>{this._calendar=e},this.focusCalendarElement=()=>{this._calendar&&this._calendar.element&&this._calendar.element.focus({preventScroll:!0})},this.calculateValue=(e,s)=>(e.value!==void 0?e.value:s.value)||h.EMPTY_SELECTIONRANGE,this.calculateShow=(e,s)=>e.show!==void 0?e.show:s.show,this.renderCalendar=()=>{const e=this.value||h.EMPTY_SELECTIONRANGE,s={min:this.min,max:this.max,allowReverse:this.props.allowReverse,mode:"range",focusedDate:this.props.focusedDate,disabled:this.props.disabled,className:this.mobileMode?"k-calendar-lg":"",mobileMode:this.mobileMode,...this.props.calendarSettings,value:e,dir:this.props.dir,onChange:this.handleCalendarChange};return this.props.calendar?n.createElement(this.props.calendar,{...s}):n.createElement(x.MultiViewCalendar,{...s,ref:this.setCalendarRef})},this.renderPopup=()=>{const e={popupClass:o.classNames("k-calendar-container","k-daterangepicker-popup"),animate:this._element!==null,anchor:this._element,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...this.props.popupSettings,show:this.show};return this.props.popup?n.createElement(this.props.popup,{...e},this.renderCalendar()):n.createElement(O.Popup,{...e},this.renderCalendar())},this.renderAdaptivePopup=()=>{const{windowWidth:e=0}=this.state,s={expand:this.show,onClose:r=>this.handleCancel(r),title:this.props.adaptiveTitle,subTitle:this.props.adaptiveSubtitle,windowWidth:e,footer:{cancelText:this.localizationService.toLanguageString(i.dateRangePickerCancel,i.messages[i.dateRangePickerCancel]),onCancel:this.handleCancel,applyText:this.localizationService.toLanguageString(i.dateRangePickerSet,i.messages[i.dateRangePickerSet]),onApply:this.handleBlur}};return n.createElement(_.AdaptiveMode,{...s},n.createElement(A.ActionSheetContent,null,n.createElement("div",{className:"k-scrollable-wrap"},this.renderCalendar())))},this.handleReverseClick=e=>{const s={start:this.value.end,end:this.value.start},r={syntheticEvent:e,nativeEvent:e.nativeEvent};this.handleChange(s,r)},this.handleReverseMouseDown=e=>{e.preventDefault()},this.handleFocus=e=>{clearTimeout(this.nextTickId),this.shouldFocusDateInput||this.mobileMode&&this.setState({currentValue:this.value});const{onFocus:s}=this.props;s&&s.call(void 0,e)},this.handleClick=()=>{this.shouldFocusDateInput||this.setShow(!0)},this.handleBlur=e=>{this.nextTick(()=>{this.setShow(!1)});const{onBlur:s}=this.props;s&&s.call(void 0,e)},this.handleCancel=e=>{this.nextTick(()=>{this.setShow(!1),this.setState({currentValue:h.EMPTY_SELECTIONRANGE})});const{onCancel:s}=this.props;s&&s.call(void 0,e)},this.handleEndChange=e=>{const s={start:this.value.start,end:b.cloneDate(e.value||void 0)};this.handleChange(s,e)},this.handleStartChange=e=>{const s={start:b.cloneDate(e.value||void 0),end:this.value.end};this.handleChange(s,e)},this.extractRangeFromValue=e=>{if(!Array.isArray(e.value)&&!(e.value instanceof Date))return e.value||h.EMPTY_SELECTIONRANGE;const s=Array.isArray(e.value)?e.value[0]:e.value;return{start:this.value.end!==null?s:this.value.start,end:this.value.start!==null?s:this.value.end}},this.handleCalendarChange=e=>{const s=this.extractRangeFromValue(e);this.handleChange(s,e)},this.handleKeyDown=e=>{const{keyCode:s,altKey:r}=e;s===o.Keys.esc?(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1)):r&&s===o.Keys.down?(e.preventDefault(),this.shouldFocusCalendar=!0,this.setShow(!0),this.focusCalendarElement()):r&&s===o.Keys.up&&(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1))},this.handleChange=(e,s)=>{this.setState({value:e}),this.valueDuringOnChange=e;const{onChange:r}=this.props;if(r){const m={syntheticEvent:s.syntheticEvent,nativeEvent:s.nativeEvent,value:this.value,show:this.show,target:this};r.call(void 0,m)}this.valueDuringOnChange=void 0},this.showLicenseWatermark=!o.validatePackage(D.packageMetadata,{component:"DateRangePicker"}),this.licenseMessage=o.getLicenseMessage(D.packageMetadata),this.state={show:this.props.show||this.props.defaultShow||l.defaultProps.defaultShow,value:this.props.value||this.props.defaultValue||l.defaultProps.defaultValue,currentValue:h.EMPTY_SELECTIONRANGE},this.nextTick=this.nextTick.bind(this),this.setShow=this.setShow.bind(this),this.focusCalendarElement=this.focusCalendarElement.bind(this),this.focusDateInputElement=this.focusDateInputElement.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get _startInputId(){return this.props.id+"-start-input-id"}get _endInputId(){return this.props.id+"-end-input-id"}get element(){return this._element}get startDateInput(){return this._startDateInput.current}get endDateInput(){return this._endDateInput.current}get calendar(){return this._calendar}get value(){return(this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value)||h.EMPTY_SELECTIONRANGE}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get min(){return this.props.min!==void 0?this.props.min:l.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:l.defaultProps.max}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get localizationService(){return c.provideLocalizationService(this)}get mobileMode(){var e;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((e=this.props._adaptiveMode)==null?void 0:e.medium)&&this.props.adaptive)}componentDidMount(){var a;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this.shouldFocusCalendar&&this.focusCalendarElement(),this.mobileMode&&this.show&&setTimeout(()=>{this.focusCalendarElement()},300),this.shouldFocusDateInput&&this.focusDateInputElement(),this.shouldFocusCalendar=!1,this.shouldFocusDateInput=!1}componentWillUnmount(){var a;clearTimeout(this.nextTickId),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{autoFocus:a}=this.props,e=this.value||h.EMPTY_SELECTIONRANGE,s=this.mobileMode&&this.show?this.state.currentValue:e,r=(this.props.startDateInputSettings||{}).id||this._startInputId,m=(this.props.endDateInputSettings||{}).id||this._endInputId,S=o.classNames("k-daterangepicker",{"k-disabled":this.props.disabled},this.props.className),C=this.localizationService.toLanguageString(i.start,i.messages[i.start]),E=this.localizationService.toLanguageString(i.end,i.messages[i.end]),y=this.localizationService.toLanguageString(i.separator,i.messages[i.separator]),f={disableSelection:this.mobileMode&&!0,label:C,format:this.props.format,min:this.min,max:this.max,id:this._startInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.startDateInputSettings,value:s.start,onChange:this.handleStartChange,inputAttributes:this.props.inputAttributes},v={disableSelection:this.mobileMode&&!0,label:E,format:this.props.format,min:this.min,max:this.max,id:this._endInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.endDateInputSettings,value:s.end,onChange:this.handleEndChange,inputAttributes:this.props.inputAttributes},k=n.createElement(P.Button,{type:"button",className:"k-select",fillMode:"flat",title:c.provideLocalizationService(this).toLanguageString(i.swapStartEnd,i.messages[i.swapStartEnd]),onMouseDown:this.handleReverseMouseDown,onClick:this.handleReverseClick,"aria-controls":r+" "+m,"aria-label":c.provideLocalizationService(this).toLanguageString(i.swapStartEnd,i.messages[i.swapStartEnd])},n.createElement(o.IconWrap,{style:{transform:"rotate(90deg)"},name:"arrows-swap",icon:T.arrowsSwapIcon}));return n.createElement(n.Fragment,null,n.createElement("span",{ref:R=>{this._element=R},className:S,style:this.props.style,id:this.props.id,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:this.props.tabIndex,onFocus:this.mobileMode?this.handleClick:this.handleFocus,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onBlur:this.mobileMode?void 0:this.handleBlur,dir:this.props.dir},this.props.startDateInput?n.createElement(this.props.startDateInput,{...f}):n.createElement(g.DateInput,{...f,autoFocus:a,ref:this._startDateInput,ariaRole:"combobox",ariaControls:this.show?this._popupId:void 0}),(this.props.allowReverse||this.props.calendarSettings&&this.props.calendarSettings.allowReverse)&&this.props.swapButton?k:y,this.props.endDateInput?n.createElement(this.props.endDateInput,{...v}):n.createElement(g.DateInput,{...v,ref:this._endDateInput,ariaRole:"combobox",ariaControls:this.show?this._popupId:void 0}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup(),this.showLicenseWatermark&&n.createElement(o.WatermarkOverlay,{message:this.licenseMessage}))}focusDateInputElement(){if(!document||!this.startDateInput||!this.startDateInput.element||!this.endDateInput||!this.endDateInput.element)return;const a=o.getActiveElement(document);(this.value.start===null||this.value.end!==null)&&a!==this.endDateInput.element?this.startDateInput.element.focus({preventScroll:!0}):a!==this.startDateInput.element&&this.endDateInput.element.focus({preventScroll:!0})}nextTick(a){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>a())}setShow(a){const{onOpen:e,onClose:s}=this.props;this.show!==a&&(this.setState({show:a}),a&&e&&e.call(void 0,{target:this}),!a&&s&&s.call(void 0,{target:this}))}calculateMedia(a){for(const e of a)this.setState({windowWidth:e.target.clientWidth})}};l.displayName="DateRangePicker",l.propTypes={allowReverse:t.bool,calendarSettings:t.any,className:t.string,defaultShow:t.bool,defaultValue:t.shape({start:u.nullable(t.instanceOf(Date).isRequired),end:u.nullable(t.instanceOf(Date).isRequired)}),disabled:t.bool,endDateInputSettings:t.shape(g.DateInput.propTypes),focusedDate:t.instanceOf(Date),format:t.oneOfType([t.string,t.shape({skeleton:t.string,pattern:t.string,date:t.oneOf(["short","medium","long","full"]),time:t.oneOf(["short","medium","long","full"]),datetime:t.oneOf(["short","medium","long","full"]),era:t.oneOf(["narrow","short","long"]),year:t.oneOf(["numeric","2-digit"]),month:t.oneOf(["numeric","2-digit","narrow","short","long"]),day:t.oneOf(["numeric","2-digit"]),weekday:t.oneOf(["narrow","short","long"]),hour:t.oneOf(["numeric","2-digit"]),hour12:t.bool,minute:t.oneOf(["numeric","2-digit"]),second:t.oneOf(["numeric","2-digit"]),timeZoneName:t.oneOf(["short","long"])})]),id:t.string,ariaLabelledBy:t.string,ariaDescribedBy:t.string,max:t.instanceOf(Date),min:t.instanceOf(Date),onBlur:t.func,onChange:t.func,onFocus:t.func,popupSettings:t.any,show:t.bool,startDateInputSettings:t.any,style:t.any,swapButton:t.any,tabIndex:t.number,dir:t.string,value:t.shape({start:u.nullable(t.instanceOf(Date)),end:u.nullable(t.instanceOf(Date))}),autoFocus:t.bool,inputAttributes:t.object},l.defaultProps={allowReverse:!1,defaultShow:!1,defaultValue:h.EMPTY_SELECTIONRANGE,disabled:!1,format:"d",max:u.MAX_DATE,min:u.MIN_DATE,swapButton:!1,autoFocus:!1};let p=l;const w=o.createPropsContext(),I=o.withIdHOC(o.withPropsContext(w,o.withAdaptiveModeContext(p)));I.displayName="KendoReactDateRangePicker";c.registerForLocalization(p);exports.DateRangePicker=I;exports.DateRangePickerPropsContext=w;exports.DateRangePickerWithoutContext=p;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const T=require("react"),t=require("prop-types"),P=require("@progress/kendo-react-popup"),D=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),c=require("@progress/kendo-react-intl"),x=require("@progress/kendo-svg-icons"),b=require("../package-metadata.js"),g=require("../dateinput/DateInput.js"),_=require("../calendar/components/MultiViewCalendar.js"),h=require("../calendar/models/SelectionRange.js"),u=require("../utils.js"),i=require("../messages/index.js"),A=require("@progress/kendo-react-buttons"),L=require("../common/AdaptiveMode.js"),N=require("@progress/kendo-react-layout");function z(d){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(a,e,s.get?s:{enumerable:!0,get:()=>d[e]})}}return a.default=d,Object.freeze(a)}const n=z(T),l=class l extends n.Component{constructor(a){super(a),this._element=null,this._calendar=null,this._startDateInput=n.createRef(),this._endDateInput=n.createRef(),this.shouldFocusDateInput=!1,this.shouldFocusCalendar=!1,this.showLicenseWatermark=!1,this.focus=()=>{this.startDateInput&&this.startDateInput.focus()},this.setCalendarRef=e=>{this._calendar=e},this.focusCalendarElement=()=>{this._calendar&&this._calendar.element&&this._calendar.element.focus({preventScroll:!0})},this.calculateValue=(e,s)=>(e.value!==void 0?e.value:s.value)||h.EMPTY_SELECTIONRANGE,this.calculateShow=(e,s)=>e.show!==void 0?e.show:s.show,this.renderCalendar=()=>{const e=this.value||h.EMPTY_SELECTIONRANGE,s={min:this.min,max:this.max,allowReverse:this.props.allowReverse,mode:"range",focusedDate:this.props.focusedDate,disabled:this.props.disabled,className:this.mobileMode?"k-calendar-lg":"",mobileMode:this.mobileMode,...this.props.calendarSettings,value:e,dir:this.props.dir,onChange:this.handleCalendarChange};return this.props.calendar?n.createElement(this.props.calendar,{...s}):n.createElement(_.MultiViewCalendar,{...s,ref:this.setCalendarRef})},this.renderPopup=()=>{const e={popupClass:o.classNames("k-calendar-container","k-daterangepicker-popup"),animate:this._element!==null,anchor:this._element,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...this.props.popupSettings,show:this.show};return this.props.popup?n.createElement(this.props.popup,{...e},this.renderCalendar()):n.createElement(P.Popup,{...e},this.renderCalendar())},this.renderAdaptivePopup=()=>{const{windowWidth:e=0}=this.state,s={expand:this.show,onClose:r=>this.handleCancel(r),title:this.props.adaptiveTitle,subTitle:this.props.adaptiveSubtitle,windowWidth:e,footer:{cancelText:this.localizationService.toLanguageString(i.dateRangePickerCancel,i.messages[i.dateRangePickerCancel]),onCancel:this.handleCancel,applyText:this.localizationService.toLanguageString(i.dateRangePickerSet,i.messages[i.dateRangePickerSet]),onApply:this.handleBlur}};return n.createElement(L.AdaptiveMode,{...s},n.createElement(N.ActionSheetContent,null,n.createElement("div",{className:"k-scrollable-wrap"},this.renderCalendar())))},this.handleReverseClick=e=>{const s={start:this.value.end,end:this.value.start},r={syntheticEvent:e,nativeEvent:e.nativeEvent};this.handleChange(s,r)},this.handleReverseMouseDown=e=>{e.preventDefault()},this.handleFocus=e=>{clearTimeout(this.nextTickId),this.shouldFocusDateInput||this.mobileMode&&this.setState({currentValue:this.value});const{onFocus:s}=this.props;s&&s.call(void 0,e)},this.handleClick=()=>{this.shouldFocusDateInput||this.setShow(!0)},this.handleBlur=e=>{this.nextTick(()=>{this.setShow(!1)});const{onBlur:s}=this.props;s&&s.call(void 0,e)},this.handleCancel=e=>{this.nextTick(()=>{this.setShow(!1),this.setState({currentValue:h.EMPTY_SELECTIONRANGE})});const{onCancel:s}=this.props;s&&s.call(void 0,e)},this.handleEndChange=e=>{const s={start:this.value.start,end:D.cloneDate(e.value||void 0)};this.handleChange(s,e)},this.handleStartChange=e=>{const s={start:D.cloneDate(e.value||void 0),end:this.value.end};this.handleChange(s,e)},this.extractRangeFromValue=e=>{if(!Array.isArray(e.value)&&!(e.value instanceof Date))return e.value||h.EMPTY_SELECTIONRANGE;const s=Array.isArray(e.value)?e.value[0]:e.value;return{start:this.value.end!==null?s:this.value.start,end:this.value.start!==null?s:this.value.end}},this.handleCalendarChange=e=>{const s=this.extractRangeFromValue(e);this.handleChange(s,e)},this.handleKeyDown=e=>{const{keyCode:s,altKey:r}=e;s===o.Keys.esc?(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1)):r&&s===o.Keys.down?(e.preventDefault(),this.shouldFocusCalendar=!0,this.setShow(!0),this.focusCalendarElement()):r&&s===o.Keys.up&&(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1))},this.handleChange=(e,s)=>{this.setState({value:e}),this.valueDuringOnChange=e;const{onChange:r}=this.props;if(r){const m={syntheticEvent:s.syntheticEvent,nativeEvent:s.nativeEvent,value:this.value,show:this.show,target:this};r.call(void 0,m)}this.valueDuringOnChange=void 0},this.showLicenseWatermark=!o.validatePackage(b.packageMetadata,{component:"DateRangePicker"}),this.licenseMessage=o.getLicenseMessage(b.packageMetadata),this.state={show:this.props.show||this.props.defaultShow||l.defaultProps.defaultShow,value:this.props.value||this.props.defaultValue||l.defaultProps.defaultValue,currentValue:h.EMPTY_SELECTIONRANGE},this.nextTick=this.nextTick.bind(this),this.setShow=this.setShow.bind(this),this.focusCalendarElement=this.focusCalendarElement.bind(this),this.focusDateInputElement=this.focusDateInputElement.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get _startInputId(){return this.props.id+"-start-input-id"}get _endInputId(){return this.props.id+"-end-input-id"}get element(){return this._element}get startDateInput(){return this._startDateInput.current}get endDateInput(){return this._endDateInput.current}get calendar(){return this._calendar}get value(){return(this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value)||h.EMPTY_SELECTIONRANGE}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get min(){return this.props.min!==void 0?this.props.min:l.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:l.defaultProps.max}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get localizationService(){return c.provideLocalizationService(this)}get mobileMode(){var e;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((e=this.props._adaptiveMode)==null?void 0:e.medium)&&this.props.adaptive)}componentDidMount(){var a;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this.shouldFocusCalendar&&this.focusCalendarElement(),this.mobileMode&&this.show&&setTimeout(()=>{this.focusCalendarElement()},300),this.shouldFocusDateInput&&this.focusDateInputElement(),this.shouldFocusCalendar=!1,this.shouldFocusDateInput=!1}componentWillUnmount(){var a;clearTimeout(this.nextTickId),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{autoFocus:a}=this.props,e=this.value||h.EMPTY_SELECTIONRANGE,s=this.mobileMode&&this.show?this.state.currentValue:e,r=(this.props.startDateInputSettings||{}).id||this._startInputId,m=(this.props.endDateInputSettings||{}).id||this._endInputId,S=o.classNames("k-daterangepicker",{"k-disabled":this.props.disabled},this.props.className),E=this.localizationService.toLanguageString(i.start,i.messages[i.start]),C=this.localizationService.toLanguageString(i.end,i.messages[i.end]),y=this.localizationService.toLanguageString(i.separator,i.messages[i.separator]),k=this.localizationService.toLanguageString(i.selectStartDate,i.messages[i.selectStartDate]),R=this.localizationService.toLanguageString(i.selectEndDate,i.messages[i.selectEndDate]),f={disableSelection:this.mobileMode&&!0,label:E,ariaLabel:k,ariaHasPopup:"grid",format:this.props.format,min:this.min,max:this.max,id:this._startInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.startDateInputSettings,value:s.start,onChange:this.handleStartChange,inputAttributes:this.props.inputAttributes},v={disableSelection:this.mobileMode&&!0,label:C,ariaLabel:R,ariaHasPopup:"grid",format:this.props.format,min:this.min,max:this.max,id:this._endInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.endDateInputSettings,value:s.end,onChange:this.handleEndChange,inputAttributes:this.props.inputAttributes},M=n.createElement(A.Button,{type:"button",className:"k-select",fillMode:"flat",title:c.provideLocalizationService(this).toLanguageString(i.swapStartEnd,i.messages[i.swapStartEnd]),onMouseDown:this.handleReverseMouseDown,onClick:this.handleReverseClick,"aria-controls":r+" "+m,"aria-label":c.provideLocalizationService(this).toLanguageString(i.swapStartEnd,i.messages[i.swapStartEnd])},n.createElement(o.IconWrap,{style:{transform:"rotate(90deg)"},name:"arrows-swap",icon:x.arrowsSwapIcon}));return n.createElement(n.Fragment,null,n.createElement("span",{ref:O=>{this._element=O},className:S,style:this.props.style,id:this.props.id,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:this.props.tabIndex,onFocus:this.mobileMode?this.handleClick:this.handleFocus,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onBlur:this.mobileMode?void 0:this.handleBlur,dir:this.props.dir},this.props.startDateInput?n.createElement(this.props.startDateInput,{...f}):n.createElement(g.DateInput,{...f,autoFocus:a,ref:this._startDateInput,ariaRole:"combobox",ariaControls:this.show?this._popupId:void 0}),(this.props.allowReverse||this.props.calendarSettings&&this.props.calendarSettings.allowReverse)&&this.props.swapButton?M:y,this.props.endDateInput?n.createElement(this.props.endDateInput,{...v}):n.createElement(g.DateInput,{...v,ref:this._endDateInput,ariaRole:"combobox",ariaControls:this.show?this._popupId:void 0}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup(),this.showLicenseWatermark&&n.createElement(o.WatermarkOverlay,{message:this.licenseMessage}))}focusDateInputElement(){if(!document||!this.startDateInput||!this.startDateInput.element||!this.endDateInput||!this.endDateInput.element)return;const a=o.getActiveElement(document);(this.value.start===null||this.value.end!==null)&&a!==this.endDateInput.element?this.startDateInput.element.focus({preventScroll:!0}):a!==this.startDateInput.element&&this.endDateInput.element.focus({preventScroll:!0})}nextTick(a){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>a())}setShow(a){const{onOpen:e,onClose:s}=this.props;this.show!==a&&(this.setState({show:a}),a&&e&&e.call(void 0,{target:this}),!a&&s&&s.call(void 0,{target:this}))}calculateMedia(a){for(const e of a)this.setState({windowWidth:e.target.clientWidth})}};l.displayName="DateRangePicker",l.propTypes={allowReverse:t.bool,calendarSettings:t.any,className:t.string,defaultShow:t.bool,defaultValue:t.shape({start:u.nullable(t.instanceOf(Date).isRequired),end:u.nullable(t.instanceOf(Date).isRequired)}),disabled:t.bool,endDateInputSettings:t.shape(g.DateInput.propTypes),focusedDate:t.instanceOf(Date),format:t.oneOfType([t.string,t.shape({skeleton:t.string,pattern:t.string,date:t.oneOf(["short","medium","long","full"]),time:t.oneOf(["short","medium","long","full"]),datetime:t.oneOf(["short","medium","long","full"]),era:t.oneOf(["narrow","short","long"]),year:t.oneOf(["numeric","2-digit"]),month:t.oneOf(["numeric","2-digit","narrow","short","long"]),day:t.oneOf(["numeric","2-digit"]),weekday:t.oneOf(["narrow","short","long"]),hour:t.oneOf(["numeric","2-digit"]),hour12:t.bool,minute:t.oneOf(["numeric","2-digit"]),second:t.oneOf(["numeric","2-digit"]),timeZoneName:t.oneOf(["short","long"])})]),id:t.string,ariaLabelledBy:t.string,ariaDescribedBy:t.string,max:t.instanceOf(Date),min:t.instanceOf(Date),onBlur:t.func,onChange:t.func,onFocus:t.func,popupSettings:t.any,show:t.bool,startDateInputSettings:t.any,style:t.any,swapButton:t.any,tabIndex:t.number,dir:t.string,value:t.shape({start:u.nullable(t.instanceOf(Date)),end:u.nullable(t.instanceOf(Date))}),autoFocus:t.bool,inputAttributes:t.object},l.defaultProps={allowReverse:!1,defaultShow:!1,defaultValue:h.EMPTY_SELECTIONRANGE,disabled:!1,format:"d",max:u.MAX_DATE,min:u.MIN_DATE,swapButton:!1,autoFocus:!1};let p=l;const w=o.createPropsContext(),I=o.withIdHOC(o.withPropsContext(w,o.withAdaptiveModeContext(p)));I.displayName="KendoReactDateRangePicker";c.registerForLocalization(p);exports.DateRangePicker=I;exports.DateRangePickerPropsContext=w;exports.DateRangePickerWithoutContext=p;
|
|
@@ -7,21 +7,21 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as i from "react";
|
|
9
9
|
import e from "prop-types";
|
|
10
|
-
import { Popup as
|
|
11
|
-
import { cloneDate as
|
|
12
|
-
import {
|
|
13
|
-
import { provideLocalizationService as m, registerForLocalization as
|
|
14
|
-
import { arrowsSwapIcon as
|
|
10
|
+
import { Popup as z } from "@progress/kendo-react-popup";
|
|
11
|
+
import { cloneDate as b } from "@progress/kendo-date-math";
|
|
12
|
+
import { createPropsContext as B, classNames as w, Keys as c, validatePackage as N, getLicenseMessage as V, canUseDOM as D, IconWrap as W, WatermarkOverlay as K, getActiveElement as U, withIdHOC as H, withPropsContext as q, withAdaptiveModeContext as j } from "@progress/kendo-react-common";
|
|
13
|
+
import { provideLocalizationService as m, registerForLocalization as G } from "@progress/kendo-react-intl";
|
|
14
|
+
import { arrowsSwapIcon as X } from "@progress/kendo-svg-icons";
|
|
15
15
|
import { packageMetadata as I } from "../package-metadata.mjs";
|
|
16
16
|
import { DateInput as f } from "../dateinput/DateInput.mjs";
|
|
17
|
-
import { MultiViewCalendar as
|
|
18
|
-
import { EMPTY_SELECTIONRANGE as
|
|
19
|
-
import { nullable as h, MIN_DATE as
|
|
20
|
-
import { dateRangePickerSet as C, messages as
|
|
21
|
-
import { Button as
|
|
22
|
-
import { AdaptiveMode as
|
|
23
|
-
import { ActionSheetContent as
|
|
24
|
-
const
|
|
17
|
+
import { MultiViewCalendar as Y } from "../calendar/components/MultiViewCalendar.mjs";
|
|
18
|
+
import { EMPTY_SELECTIONRANGE as l } from "../calendar/models/SelectionRange.mjs";
|
|
19
|
+
import { nullable as h, MIN_DATE as Z, MAX_DATE as J } from "../utils.mjs";
|
|
20
|
+
import { dateRangePickerSet as C, messages as o, dateRangePickerCancel as S, start as E, end as y, separator as x, selectStartDate as k, selectEndDate as M, swapStartEnd as p } from "../messages/index.mjs";
|
|
21
|
+
import { Button as Q } from "@progress/kendo-react-buttons";
|
|
22
|
+
import { AdaptiveMode as $ } from "../common/AdaptiveMode.mjs";
|
|
23
|
+
import { ActionSheetContent as tt } from "@progress/kendo-react-layout";
|
|
24
|
+
const r = class r extends i.Component {
|
|
25
25
|
constructor(a) {
|
|
26
26
|
super(a), this._element = null, this._calendar = null, this._startDateInput = i.createRef(), this._endDateInput = i.createRef(), this.shouldFocusDateInput = !1, this.shouldFocusCalendar = !1, this.showLicenseWatermark = !1, this.focus = () => {
|
|
27
27
|
this.startDateInput && this.startDateInput.focus();
|
|
@@ -29,8 +29,8 @@ const o = class o extends i.Component {
|
|
|
29
29
|
this._calendar = t;
|
|
30
30
|
}, this.focusCalendarElement = () => {
|
|
31
31
|
this._calendar && this._calendar.element && this._calendar.element.focus({ preventScroll: !0 });
|
|
32
|
-
}, this.calculateValue = (t, s) => (t.value !== void 0 ? t.value : s.value) ||
|
|
33
|
-
const t = this.value ||
|
|
32
|
+
}, this.calculateValue = (t, s) => (t.value !== void 0 ? t.value : s.value) || l, this.calculateShow = (t, s) => t.show !== void 0 ? t.show : s.show, this.renderCalendar = () => {
|
|
33
|
+
const t = this.value || l, s = {
|
|
34
34
|
min: this.min,
|
|
35
35
|
max: this.max,
|
|
36
36
|
allowReverse: this.props.allowReverse,
|
|
@@ -44,10 +44,10 @@ const o = class o extends i.Component {
|
|
|
44
44
|
dir: this.props.dir,
|
|
45
45
|
onChange: this.handleCalendarChange
|
|
46
46
|
};
|
|
47
|
-
return this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { ...s }) : /* @__PURE__ */ i.createElement(
|
|
47
|
+
return this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { ...s }) : /* @__PURE__ */ i.createElement(Y, { ...s, ref: this.setCalendarRef });
|
|
48
48
|
}, this.renderPopup = () => {
|
|
49
49
|
const t = {
|
|
50
|
-
popupClass:
|
|
50
|
+
popupClass: w("k-calendar-container", "k-daterangepicker-popup"),
|
|
51
51
|
animate: this._element !== null,
|
|
52
52
|
anchor: this._element,
|
|
53
53
|
id: this._popupId,
|
|
@@ -62,7 +62,7 @@ const o = class o extends i.Component {
|
|
|
62
62
|
...this.props.popupSettings,
|
|
63
63
|
show: this.show
|
|
64
64
|
};
|
|
65
|
-
return this.props.popup ? /* @__PURE__ */ i.createElement(this.props.popup, { ...t }, this.renderCalendar()) : /* @__PURE__ */ i.createElement(
|
|
65
|
+
return this.props.popup ? /* @__PURE__ */ i.createElement(this.props.popup, { ...t }, this.renderCalendar()) : /* @__PURE__ */ i.createElement(z, { ...t }, this.renderCalendar());
|
|
66
66
|
}, this.renderAdaptivePopup = () => {
|
|
67
67
|
const { windowWidth: t = 0 } = this.state, s = {
|
|
68
68
|
expand: this.show,
|
|
@@ -73,14 +73,14 @@ const o = class o extends i.Component {
|
|
|
73
73
|
footer: {
|
|
74
74
|
cancelText: this.localizationService.toLanguageString(
|
|
75
75
|
S,
|
|
76
|
-
|
|
76
|
+
o[S]
|
|
77
77
|
),
|
|
78
78
|
onCancel: this.handleCancel,
|
|
79
|
-
applyText: this.localizationService.toLanguageString(C,
|
|
79
|
+
applyText: this.localizationService.toLanguageString(C, o[C]),
|
|
80
80
|
onApply: this.handleBlur
|
|
81
81
|
}
|
|
82
82
|
};
|
|
83
|
-
return /* @__PURE__ */ i.createElement(
|
|
83
|
+
return /* @__PURE__ */ i.createElement($, { ...s }, /* @__PURE__ */ i.createElement(tt, null, /* @__PURE__ */ i.createElement("div", { className: "k-scrollable-wrap" }, this.renderCalendar())));
|
|
84
84
|
}, this.handleReverseClick = (t) => {
|
|
85
85
|
const s = {
|
|
86
86
|
start: this.value.end,
|
|
@@ -106,25 +106,25 @@ const o = class o extends i.Component {
|
|
|
106
106
|
s && s.call(void 0, t);
|
|
107
107
|
}, this.handleCancel = (t) => {
|
|
108
108
|
this.nextTick(() => {
|
|
109
|
-
this.setShow(!1), this.setState({ currentValue:
|
|
109
|
+
this.setShow(!1), this.setState({ currentValue: l });
|
|
110
110
|
});
|
|
111
111
|
const { onCancel: s } = this.props;
|
|
112
112
|
s && s.call(void 0, t);
|
|
113
113
|
}, this.handleEndChange = (t) => {
|
|
114
114
|
const s = {
|
|
115
115
|
start: this.value.start,
|
|
116
|
-
end:
|
|
116
|
+
end: b(t.value || void 0)
|
|
117
117
|
};
|
|
118
118
|
this.handleChange(s, t);
|
|
119
119
|
}, this.handleStartChange = (t) => {
|
|
120
120
|
const s = {
|
|
121
|
-
start:
|
|
121
|
+
start: b(t.value || void 0),
|
|
122
122
|
end: this.value.end
|
|
123
123
|
};
|
|
124
124
|
this.handleChange(s, t);
|
|
125
125
|
}, this.extractRangeFromValue = (t) => {
|
|
126
126
|
if (!Array.isArray(t.value) && !(t.value instanceof Date))
|
|
127
|
-
return t.value ||
|
|
127
|
+
return t.value || l;
|
|
128
128
|
const s = Array.isArray(t.value) ? t.value[0] : t.value;
|
|
129
129
|
return {
|
|
130
130
|
start: this.value.end !== null ? s : this.value.start,
|
|
@@ -150,10 +150,10 @@ const o = class o extends i.Component {
|
|
|
150
150
|
n.call(void 0, u);
|
|
151
151
|
}
|
|
152
152
|
this.valueDuringOnChange = void 0;
|
|
153
|
-
}, this.showLicenseWatermark = !
|
|
154
|
-
show: this.props.show || this.props.defaultShow ||
|
|
155
|
-
value: this.props.value || this.props.defaultValue ||
|
|
156
|
-
currentValue:
|
|
153
|
+
}, this.showLicenseWatermark = !N(I, { component: "DateRangePicker" }), this.licenseMessage = V(I), this.state = {
|
|
154
|
+
show: this.props.show || this.props.defaultShow || r.defaultProps.defaultShow,
|
|
155
|
+
value: this.props.value || this.props.defaultValue || r.defaultProps.defaultValue,
|
|
156
|
+
currentValue: l
|
|
157
157
|
}, this.nextTick = this.nextTick.bind(this), this.setShow = this.setShow.bind(this), this.focusCalendarElement = this.focusCalendarElement.bind(this), this.focusDateInputElement = this.focusDateInputElement.bind(this);
|
|
158
158
|
}
|
|
159
159
|
get _popupId() {
|
|
@@ -193,7 +193,7 @@ const o = class o extends i.Component {
|
|
|
193
193
|
* Gets the value of the DateRangePicker.
|
|
194
194
|
*/
|
|
195
195
|
get value() {
|
|
196
|
-
return (this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.props.value !== void 0 ? this.props.value : this.state.value) ||
|
|
196
|
+
return (this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.props.value !== void 0 ? this.props.value : this.state.value) || l;
|
|
197
197
|
}
|
|
198
198
|
/**
|
|
199
199
|
* Gets the popup state of the DateRangePicker.
|
|
@@ -205,10 +205,10 @@ const o = class o extends i.Component {
|
|
|
205
205
|
return this.showDuringOnChange !== void 0 ? this.showDuringOnChange : this.props.show !== void 0 ? this.props.show : this.state.show;
|
|
206
206
|
}
|
|
207
207
|
get min() {
|
|
208
|
-
return this.props.min !== void 0 ? this.props.min :
|
|
208
|
+
return this.props.min !== void 0 ? this.props.min : r.defaultProps.min;
|
|
209
209
|
}
|
|
210
210
|
get max() {
|
|
211
|
-
return this.props.max !== void 0 ? this.props.max :
|
|
211
|
+
return this.props.max !== void 0 ? this.props.max : r.defaultProps.max;
|
|
212
212
|
}
|
|
213
213
|
get document() {
|
|
214
214
|
if (D)
|
|
@@ -250,15 +250,17 @@ const o = class o extends i.Component {
|
|
|
250
250
|
* @hidden
|
|
251
251
|
*/
|
|
252
252
|
render() {
|
|
253
|
-
const { autoFocus: a } = this.props, t = this.value ||
|
|
253
|
+
const { autoFocus: a } = this.props, t = this.value || l, s = this.mobileMode && this.show ? this.state.currentValue : t, n = (this.props.startDateInputSettings || {}).id || this._startInputId, u = (this.props.endDateInputSettings || {}).id || this._endInputId, O = w(
|
|
254
254
|
"k-daterangepicker",
|
|
255
255
|
{
|
|
256
256
|
"k-disabled": this.props.disabled
|
|
257
257
|
},
|
|
258
258
|
this.props.className
|
|
259
|
-
),
|
|
259
|
+
), R = this.localizationService.toLanguageString(E, o[E]), T = this.localizationService.toLanguageString(y, o[y]), P = this.localizationService.toLanguageString(x, o[x]), _ = this.localizationService.toLanguageString(k, o[k]), A = this.localizationService.toLanguageString(M, o[M]), g = {
|
|
260
260
|
disableSelection: this.mobileMode && !0,
|
|
261
|
-
label:
|
|
261
|
+
label: R,
|
|
262
|
+
ariaLabel: _,
|
|
263
|
+
ariaHasPopup: "grid",
|
|
262
264
|
format: this.props.format,
|
|
263
265
|
min: this.min,
|
|
264
266
|
max: this.max,
|
|
@@ -274,7 +276,9 @@ const o = class o extends i.Component {
|
|
|
274
276
|
inputAttributes: this.props.inputAttributes
|
|
275
277
|
}, v = {
|
|
276
278
|
disableSelection: this.mobileMode && !0,
|
|
277
|
-
label:
|
|
279
|
+
label: T,
|
|
280
|
+
ariaLabel: A,
|
|
281
|
+
ariaHasPopup: "grid",
|
|
278
282
|
format: this.props.format,
|
|
279
283
|
min: this.min,
|
|
280
284
|
max: this.max,
|
|
@@ -288,30 +292,30 @@ const o = class o extends i.Component {
|
|
|
288
292
|
value: s.end,
|
|
289
293
|
onChange: this.handleEndChange,
|
|
290
294
|
inputAttributes: this.props.inputAttributes
|
|
291
|
-
},
|
|
292
|
-
|
|
295
|
+
}, F = /* @__PURE__ */ i.createElement(
|
|
296
|
+
Q,
|
|
293
297
|
{
|
|
294
298
|
type: "button",
|
|
295
299
|
className: "k-select",
|
|
296
300
|
fillMode: "flat",
|
|
297
|
-
title: m(this).toLanguageString(p,
|
|
301
|
+
title: m(this).toLanguageString(p, o[p]),
|
|
298
302
|
onMouseDown: this.handleReverseMouseDown,
|
|
299
303
|
onClick: this.handleReverseClick,
|
|
300
304
|
"aria-controls": n + " " + u,
|
|
301
305
|
"aria-label": m(this).toLanguageString(
|
|
302
306
|
p,
|
|
303
|
-
|
|
307
|
+
o[p]
|
|
304
308
|
)
|
|
305
309
|
},
|
|
306
|
-
/* @__PURE__ */ i.createElement(
|
|
310
|
+
/* @__PURE__ */ i.createElement(W, { style: { transform: "rotate(90deg)" }, name: "arrows-swap", icon: X })
|
|
307
311
|
);
|
|
308
312
|
return /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
|
|
309
313
|
"span",
|
|
310
314
|
{
|
|
311
|
-
ref: (
|
|
312
|
-
this._element =
|
|
315
|
+
ref: (L) => {
|
|
316
|
+
this._element = L;
|
|
313
317
|
},
|
|
314
|
-
className:
|
|
318
|
+
className: O,
|
|
315
319
|
style: this.props.style,
|
|
316
320
|
id: this.props.id,
|
|
317
321
|
"aria-labelledby": this.props.ariaLabelledBy,
|
|
@@ -333,7 +337,7 @@ const o = class o extends i.Component {
|
|
|
333
337
|
ariaControls: this.show ? this._popupId : void 0
|
|
334
338
|
}
|
|
335
339
|
),
|
|
336
|
-
(this.props.allowReverse || this.props.calendarSettings && this.props.calendarSettings.allowReverse) && this.props.swapButton ?
|
|
340
|
+
(this.props.allowReverse || this.props.calendarSettings && this.props.calendarSettings.allowReverse) && this.props.swapButton ? F : P,
|
|
337
341
|
this.props.endDateInput ? /* @__PURE__ */ i.createElement(this.props.endDateInput, { ...v }) : /* @__PURE__ */ i.createElement(
|
|
338
342
|
f,
|
|
339
343
|
{
|
|
@@ -344,12 +348,12 @@ const o = class o extends i.Component {
|
|
|
344
348
|
}
|
|
345
349
|
),
|
|
346
350
|
!this.mobileMode && this.renderPopup()
|
|
347
|
-
), this.mobileMode && this.renderAdaptivePopup(), this.showLicenseWatermark && /* @__PURE__ */ i.createElement(
|
|
351
|
+
), this.mobileMode && this.renderAdaptivePopup(), this.showLicenseWatermark && /* @__PURE__ */ i.createElement(K, { message: this.licenseMessage }));
|
|
348
352
|
}
|
|
349
353
|
focusDateInputElement() {
|
|
350
354
|
if (!document || !this.startDateInput || !this.startDateInput.element || !this.endDateInput || !this.endDateInput.element)
|
|
351
355
|
return;
|
|
352
|
-
const a =
|
|
356
|
+
const a = U(document);
|
|
353
357
|
(this.value.start === null || this.value.end !== null) && a !== this.endDateInput.element ? this.startDateInput.element.focus({ preventScroll: !0 }) : a !== this.startDateInput.element && this.endDateInput.element.focus({ preventScroll: !0 });
|
|
354
358
|
}
|
|
355
359
|
nextTick(a) {
|
|
@@ -368,7 +372,7 @@ const o = class o extends i.Component {
|
|
|
368
372
|
this.setState({ windowWidth: t.target.clientWidth });
|
|
369
373
|
}
|
|
370
374
|
};
|
|
371
|
-
|
|
375
|
+
r.displayName = "DateRangePicker", r.propTypes = {
|
|
372
376
|
allowReverse: e.bool,
|
|
373
377
|
calendarSettings: e.any,
|
|
374
378
|
className: e.string,
|
|
@@ -421,28 +425,28 @@ o.displayName = "DateRangePicker", o.propTypes = {
|
|
|
421
425
|
}),
|
|
422
426
|
autoFocus: e.bool,
|
|
423
427
|
inputAttributes: e.object
|
|
424
|
-
},
|
|
428
|
+
}, r.defaultProps = {
|
|
425
429
|
allowReverse: !1,
|
|
426
430
|
defaultShow: !1,
|
|
427
|
-
defaultValue:
|
|
431
|
+
defaultValue: l,
|
|
428
432
|
disabled: !1,
|
|
429
433
|
format: "d",
|
|
430
|
-
max:
|
|
431
|
-
min:
|
|
434
|
+
max: J,
|
|
435
|
+
min: Z,
|
|
432
436
|
swapButton: !1,
|
|
433
437
|
autoFocus: !1
|
|
434
438
|
};
|
|
435
|
-
let d =
|
|
436
|
-
const
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
439
|
+
let d = r;
|
|
440
|
+
const et = B(), st = H(
|
|
441
|
+
q(
|
|
442
|
+
et,
|
|
443
|
+
j(d)
|
|
440
444
|
)
|
|
441
445
|
);
|
|
442
|
-
|
|
443
|
-
|
|
446
|
+
st.displayName = "KendoReactDateRangePicker";
|
|
447
|
+
G(d);
|
|
444
448
|
export {
|
|
445
|
-
|
|
446
|
-
|
|
449
|
+
st as DateRangePicker,
|
|
450
|
+
et as DateRangePickerPropsContext,
|
|
447
451
|
d as DateRangePickerWithoutContext
|
|
448
452
|
};
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
import { default as PropTypes } from 'prop-types';
|
|
9
|
-
import { FormComponent, FormComponentProps, FormComponentValidity, DateInputsClassStructure, AdaptiveModeContextType } from '@progress/kendo-react-common';
|
|
9
|
+
import { FormComponent, FormComponentProps, FormComponentValidity, DateInputsClassStructure, AdaptiveModeContextType, WebMcpProps } from '@progress/kendo-react-common';
|
|
10
10
|
import { DateInputHandle, DateInputProps } from '../dateinput/DateInput.js';
|
|
11
11
|
import { DateTimePickerSettings } from './models/index.js';
|
|
12
12
|
import { DateInputCommonPackageProps } from '../dateinput/models/common-package-props';
|
|
@@ -181,6 +181,11 @@ export interface DateTimePickerProps extends DateTimePickerSettings, FormCompone
|
|
|
181
181
|
* This prop is provided by the withAdaptiveModeContext HOC to subscribe to AdaptiveModeContext.
|
|
182
182
|
*/
|
|
183
183
|
_adaptiveMode?: AdaptiveModeContextType;
|
|
184
|
+
/**
|
|
185
|
+
* Enables Web MCP tool registration for this component.
|
|
186
|
+
* Requires a parent `WebMcpProvider` from `@progress/kendo-react-webmcp`.
|
|
187
|
+
*/
|
|
188
|
+
webMcp?: boolean | WebMcpProps;
|
|
184
189
|
}
|
|
185
190
|
/**
|
|
186
191
|
* @hidden
|
|
@@ -242,6 +247,7 @@ export declare class DateTimePickerWithoutContext extends React.Component<DateTi
|
|
|
242
247
|
appendTo: PropTypes.Requireable<any>;
|
|
243
248
|
popupClass: PropTypes.Requireable<string>;
|
|
244
249
|
}>>;
|
|
250
|
+
dateInput: PropTypes.Requireable<PropTypes.ReactComponentLike>;
|
|
245
251
|
show: PropTypes.Requireable<boolean>;
|
|
246
252
|
tabIndex: PropTypes.Requireable<number>;
|
|
247
253
|
title: PropTypes.Requireable<string>;
|
|
@@ -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 strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),e=require("prop-types"),J=require("@progress/kendo-react-popup"),P=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),Q=require("@progress/kendo-svg-icons"),ee=require("../dateinput/DateInput.js"),te=require("@progress/kendo-react-buttons"),d=require("../utils.js"),l=require("../messages/index.js"),m=require("@progress/kendo-react-intl"),ie=require("./DateTimeSelector.js"),se=require("../timepicker/utils.js"),oe=require("../hooks/usePickerFloatingLabel.js"),ne=require("../common/AdaptiveMode.js"),ae=require("@progress/kendo-react-layout");function re(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=re(G),a=class a extends r.Component{constructor(i){super(i),this._element=null,this._dateInput=r.createRef(),this._dateTimeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.handleSmartPasteValue=t=>{if(t instanceof Date&&!isNaN(t.getTime())){this.applyKendoPasteDate(t);return}const s=t!=null?String(t):"";if(!s)return;const n=new Date(s);isNaN(n.getTime())||this.applyKendoPasteDate(n)},this.applyKendoPasteDate=t=>{if(!d.isInDateRange(t,this.min,this.max))return;const s=new Event("change",{bubbles:!0}),n={target:this._element,currentTarget:this._element,nativeEvent:s};this.handleValueChange({syntheticEvent:n,nativeEvent:s,value:t})},this.focus=()=>{const t=this.dateInputElement();t&&t.focus()},this.renderPicker=()=>{const{disabled:t,minTime:s,maxTime:n,format:p,calendar:u,cancelButton:h,weekNumber:v,focusedDate:f,unstyled:b}=this.props;return r.createElement(ie.DateTimeSelector,{ref:w=>{this._dateTimeSelector=w},cancelButton:h,steps:this.props.steps,value:this.value,onChange:this.handleValueChange,onReject:this.handleReject,disabled:t,weekNumber:v,min:this.min,max:this.max,minTime:s,maxTime:n,focusedDate:f,format:p,calendar:u,mobileMode:this.mobileMode,footerActions:!this.mobileMode,unstyled:b})},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerCancel,l.messages[l.dateTimePickerCancel]),n=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerSet,l.messages[l.dateTimePickerSet]),p={expand:this.show,onClose:this.handleBlur,title:this.props.adaptiveTitle||this.props.label,subTitle:this.props.adaptiveSubtitle,windowWidth:t,footer:{cancelText:s,onCancel:u=>{var h;return(h=this._dateTimeSelector)==null?void 0:h.handleReject(u)},applyText:n,onApply:u=>{var h;return(h=this._dateTimeSelector)==null?void 0:h.handleAccept(u)}}};return r.createElement(ne.AdaptiveMode,{...p},r.createElement(ae.ActionSheetContent,null,this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=t=>{this.setState({value:P.cloneDate(t.value||void 0)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:s}=this.props;s&&s.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,value:this.value,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.handleClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:s,keyCode:n}=t;if(n===o.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(n===o.Keys.up||n===o.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=n===o.Keys.up,this.setShow(n===o.Keys.down))},this.dateInputElement=()=>this.dateInput&&this.dateInput.element||this.element&&this.element.querySelector(".k-dateinput > input.k-input-inner"),this.state={value:this.props.defaultValue||a.defaultProps.defaultValue,show:this.props.defaultShow||a.defaultProps.defaultShow,focused:!1}}get _popupId(){return this.props.id+"-popup-id"}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?P.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 mobileMode(){var t;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((t=this.props._adaptiveMode)==null?void 0:t.medium)&&this.props.adaptive)}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 validity(){const i=d.isInDateRange(this.value,this.min,this.max)&&se.isInTimeRange(this.value,this.props.minTime||d.MIN_TIME,this.props.maxTime||d.MAX_TIME),t=this.props.validationMessage!==void 0,s=(!this.required||this.value!==null)&&i,n=this.props.valid!==void 0?this.props.valid:s;return{customError:t,rangeOverflow:this.value&&this.max.getTime()<this.value.getTime()||!1,rangeUnderflow:this.value&&this.value.getTime()<this.min.getTime()||!1,valid:n,valueMissing:this.value===null}}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 dateInputComp(){return this.props.dateInput||a.defaultProps.dateInput}componentDidMount(){var t;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(t=this.document)!=null&&t.body&&this.observerResize&&this.observerResize.observe(this.document.body);const i=this.props.name||this.props.id;this.KendoPasteSubscription=o.subscribeToKendoPaste(this._element,{fieldName:i,onValueChange:s=>{this.handleSmartPasteValue(s)}})}componentDidUpdate(){const i=this.dateInputElement();this._dateTimeSelector&&this.show&&!this.prevShow&&this._dateTimeSelector.focus({preventScroll:!0}),this.mobileMode&&this.show&&!this.prevShow&&setTimeout(()=>{this._dateTimeSelector&&this._dateTimeSelector.focus({preventScroll:!0})},300),i&&!this.show&&this.shouldFocusDateInput&&i.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var i,t;clearTimeout(this.nextTickId),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect(),(t=this.KendoPasteSubscription)==null||t.unsubscribe()}render(){const{size:i=a.defaultProps.size,rounded:t=a.defaultProps.rounded,fillMode:s=a.defaultProps.fillMode,autoFocus:n=a.defaultProps.autoFocus,inputAttributes:p,disabled:u,tabIndex:h,title:v,id:f,format:b,formatPlaceholder:w,min:C,max:M,className:k,width:x,name:E,validationMessage:q,required:R,validityStyles:F,minTime:N,maxTime:A,ariaLabelledBy:z,ariaDescribedBy:_,popup:B=J.Popup,unstyled:S,autoFill:K,twoDigitYearMax:L,enableMouseWheel:V,autoCorrectParts:j,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H}=this.props,y=S&&S.uDateTimePicker,D=!this.validityStyles||this.validity.valid,X={id:f,ariaLabelledBy:z,ariaDescribedBy:_,format:b,formatPlaceholder:w,disabled:u,title:v,validityStyles:F,validationMessage:q,required:R,min:C,max:M,minTime:N,maxTime:A,name:E,tabIndex:this.show?-1:h,valid:this.validity.valid,value:this.value,onChange:this.handleValueChange,steps:this.props.steps,label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaExpanded:this.show,unstyled:S,autoFill:K,twoDigitYearMax:L,enableMouseWheel:V,autoCorrectParts:j,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H},T=r.createElement(o.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:Y,onBlur:Z})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:$=>{this._element=$},className:o.classNames(o.uDateTimePicker.wrapper({c:y,size:i,fillMode:s,rounded:t,disabled:u,required:this.required,invalid:!D}),k),onKeyDown:this.handleKeyDown,style:{width:x},onFocus:this.mobileMode?this.handleClick:Y,onBlur:Z,onClick:this.mobileMode?this.handleClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this.show?this._popupId:void 0,ariaHasPopup:"dialog",autoFocus:n,inputAttributes:p,...X}),r.createElement(te.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:Q.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:o.classNames(o.uDateTimePicker.inputButton({c:y})),fillMode:s,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(B,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:o.classNames(o.uDateTimePicker.popup({c:y})),id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"}},!this.mobileMode&&this.renderPicker())),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(oe.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:f,editorValid:D,editorDisabled:this.props.disabled,children:T,style:{width:this.props.width}}):T}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}))}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}calculateMedia(i){for(const t of i)this.setState({windowWidth:t.target.clientWidth})}};a.displayName="DateTimePicker",a.propTypes={className:e.string,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,focusedDate:e.instanceOf(Date),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,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),weekNumber:e.bool,width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,cancelButton:e.bool,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full","none"]),fillMode:e.oneOf(["solid","flat","outline"]),autoFocus:e.bool,inputAttributes:e.object},a.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"g",max:d.MAX_DATE,min:d.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,cancelButton:!0,dateInput:ee.DateInput,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1};let g=a;const I=o.createPropsContext(),O=o.withIdHOC(o.withPropsContext(I,o.withUnstyledHOC(o.withAdaptiveModeContext(g))));O.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=O;exports.DateTimePickerPropsContext=I;exports.DateTimePickerWithoutContext=g;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),e=require("prop-types"),Q=require("@progress/kendo-react-popup"),P=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),ee=require("@progress/kendo-svg-icons"),te=require("../dateinput/DateInput.js"),ie=require("@progress/kendo-react-buttons"),d=require("../utils.js"),n=require("../messages/index.js"),c=require("@progress/kendo-react-intl"),se=require("./DateTimeSelector.js"),oe=require("../timepicker/utils.js"),ae=require("../hooks/usePickerFloatingLabel.js"),ne=require("../common/AdaptiveMode.js"),re=require("@progress/kendo-react-layout");function le(p){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(p){for(const t in p)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(p,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>p[t]})}}return i.default=p,Object.freeze(i)}const l=le(J),r=class r extends l.Component{constructor(i){super(i),this._element=null,this._dateInput=l.createRef(),this._dateTimeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.handleSmartPasteValue=t=>{if(t instanceof Date&&!isNaN(t.getTime())){this.applyKendoPasteDate(t);return}const s=t!=null?String(t):"";if(!s)return;const a=new Date(s);isNaN(a.getTime())||this.applyKendoPasteDate(a)},this.applyKendoPasteDate=t=>{if(!d.isInDateRange(t,this.min,this.max))return;const s=new Event("change",{bubbles:!0}),a={target:this._element,currentTarget:this._element,nativeEvent:s};this.handleValueChange({syntheticEvent:a,nativeEvent:s,value:t})},this.focus=()=>{const t=this.dateInputElement();t&&t.focus()},this.renderPicker=()=>{const{disabled:t,minTime:s,maxTime:a,format:m,calendar:u,cancelButton:h,weekNumber:v,focusedDate:f,unstyled:b}=this.props;return l.createElement(se.DateTimeSelector,{ref:w=>{this._dateTimeSelector=w},cancelButton:h,steps:this.props.steps,value:this.value,onChange:this.handleValueChange,onReject:this.handleReject,disabled:t,weekNumber:v,min:this.min,max:this.max,minTime:s,maxTime:a,focusedDate:f,format:m,calendar:u,mobileMode:this.mobileMode,footerActions:!this.mobileMode,unstyled:b})},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s=c.provideLocalizationService(this).toLanguageString(n.dateTimePickerCancel,n.messages[n.dateTimePickerCancel]),a=c.provideLocalizationService(this).toLanguageString(n.dateTimePickerSet,n.messages[n.dateTimePickerSet]),m={expand:this.show,onClose:this.handleBlur,title:this.props.adaptiveTitle||this.props.label,subTitle:this.props.adaptiveSubtitle,windowWidth:t,footer:{cancelText:s,onCancel:u=>{var h;return(h=this._dateTimeSelector)==null?void 0:h.handleReject(u)},applyText:a,onApply:u=>{var h;return(h=this._dateTimeSelector)==null?void 0:h.handleAccept(u)}}};return l.createElement(ne.AdaptiveMode,{...m},l.createElement(re.ActionSheetContent,null,this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=t=>{this.setState({value:P.cloneDate(t.value||void 0)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:s}=this.props;s&&s.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,value:this.value,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.handleClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:s,keyCode:a}=t;if(a===o.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(a===o.Keys.up||a===o.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=a===o.Keys.up,this.setShow(a===o.Keys.down))},this.dateInputElement=()=>this.dateInput&&this.dateInput.element||this.element&&this.element.querySelector(".k-dateinput > input.k-input-inner"),this.state={value:this.props.defaultValue||r.defaultProps.defaultValue,show:this.props.defaultShow||r.defaultProps.defaultShow,focused:!1}}get _popupId(){return this.props.id+"-popup-id"}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?P.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 mobileMode(){var t;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((t=this.props._adaptiveMode)==null?void 0:t.medium)&&this.props.adaptive)}get min(){return this.props.min!==void 0?this.props.min:r.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:r.defaultProps.max}get validity(){const i=d.isInDateRange(this.value,this.min,this.max)&&oe.isInTimeRange(this.value,this.props.minTime||d.MIN_TIME,this.props.maxTime||d.MAX_TIME),t=this.props.validationMessage!==void 0,s=(!this.required||this.value!==null)&&i,a=this.props.valid!==void 0?this.props.valid:s;return{customError:t,rangeOverflow:this.value&&this.max.getTime()<this.value.getTime()||!1,rangeUnderflow:this.value&&this.value.getTime()<this.min.getTime()||!1,valid:a,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:r.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get dateInputComp(){return this.props.dateInput||r.defaultProps.dateInput}componentDidMount(){var t;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(t=this.document)!=null&&t.body&&this.observerResize&&this.observerResize.observe(this.document.body);const i=this.props.name||this.props.id;this.KendoPasteSubscription=o.subscribeToKendoPaste(this._element,{fieldName:i,onValueChange:s=>{this.handleSmartPasteValue(s)}})}componentDidUpdate(){const i=this.dateInputElement();this._dateTimeSelector&&this.show&&!this.prevShow&&this._dateTimeSelector.focus({preventScroll:!0}),this.mobileMode&&this.show&&!this.prevShow&&setTimeout(()=>{this._dateTimeSelector&&this._dateTimeSelector.focus({preventScroll:!0})},300),i&&!this.show&&this.shouldFocusDateInput&&i.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var i,t;clearTimeout(this.nextTickId),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect(),(t=this.KendoPasteSubscription)==null||t.unsubscribe()}render(){const{size:i=r.defaultProps.size,rounded:t=r.defaultProps.rounded,fillMode:s=r.defaultProps.fillMode,autoFocus:a=r.defaultProps.autoFocus,inputAttributes:m,disabled:u,tabIndex:h,title:v,id:f,format:b,formatPlaceholder:w,min:k,max:C,className:M,width:x,name:E,validationMessage:q,required:R,validityStyles:F,minTime:A,maxTime:N,ariaLabelledBy:z,ariaDescribedBy:L,popup:_=Q.Popup,unstyled:S,autoFill:B,twoDigitYearMax:K,enableMouseWheel:V,autoCorrectParts:j,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H}=this.props,y=S&&S.uDateTimePicker,D=!this.validityStyles||this.validity.valid,X=c.provideLocalizationService(this).toLanguageString(n.selectDateAndTime,n.messages[n.selectDateAndTime]),Y={id:f,ariaLabelledBy:z,ariaDescribedBy:L,ariaLabel:X,format:b,formatPlaceholder:w,disabled:u,title:v,validityStyles:F,validationMessage:q,required:R,min:k,max:C,minTime:A,maxTime:N,name:E,tabIndex:this.show?-1:h,valid:this.validity.valid,value:this.value,onChange:this.handleValueChange,steps:this.props.steps,label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaExpanded:this.show,unstyled:S,autoFill:B,twoDigitYearMax:K,enableMouseWheel:V,autoCorrectParts:j,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H},T=l.createElement(o.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:Z,onBlur:$})=>l.createElement(l.Fragment,null,l.createElement("div",{ref:G=>{this._element=G},className:o.classNames(o.uDateTimePicker.wrapper({c:y,size:i,fillMode:s,rounded:t,disabled:u,required:this.required,invalid:!D}),{"k-focus":this.state.focused},M),onKeyDown:this.handleKeyDown,style:{width:x},onFocus:this.mobileMode?this.handleClick:Z,onBlur:$,onClick:this.mobileMode?this.handleClick:void 0},l.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this.show?this._popupId:void 0,ariaHasPopup:"dialog",autoFocus:a,inputAttributes:m,...Y}),l.createElement(ie.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:ee.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleClick,title:c.provideLocalizationService(this).toLanguageString(n.toggleDateTimeSelector,n.messages[n.toggleDateTimeSelector]),className:o.classNames(o.uDateTimePicker.inputButton({c:y})),fillMode:s,"aria-label":c.provideLocalizationService(this).toLanguageString(n.toggleDateTimeSelector,n.messages[n.toggleDateTimeSelector])}),l.createElement(_,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:o.classNames(o.uDateTimePicker.popup({c:y})),id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"}},!this.mobileMode&&this.renderPicker())),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?l.createElement(ae.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:f,editorValid:D,editorDisabled:this.props.disabled,children:T,style:{width:this.props.width}}):T}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}))}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}calculateMedia(i){for(const t of i)this.setState({windowWidth:t.target.clientWidth})}};r.displayName="DateTimePicker",r.propTypes={className:e.string,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,focusedDate:e.instanceOf(Date),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}),dateInput:e.elementType,show:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),weekNumber:e.bool,width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,cancelButton:e.bool,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full","none"]),fillMode:e.oneOf(["solid","flat","outline"]),autoFocus:e.bool,inputAttributes:e.object},r.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"g",max:d.MAX_DATE,min:d.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,cancelButton:!0,dateInput:te.DateInputInner,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1};let g=r;const I=o.createPropsContext(),O=o.withIdHOC(o.withPropsContext(I,o.withUnstyledHOC(o.withAdaptiveModeContext(g))));O.displayName="KendoReactDateTimePicker";c.registerForLocalization(g);exports.DateTimePicker=O;exports.DateTimePickerPropsContext=I;exports.DateTimePickerWithoutContext=g;
|