@progress/kendo-react-dateinputs 9.0.0-develop.2 → 9.0.0-develop.20
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
|
@@ -0,0 +1,8 @@
|
|
|
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 l=require("@progress/kendo-intl");class s{constructor(t){this.service=t,this.cldr={},this.localeId=t.locale,this.format=t.format,this.toString=t.toString,this.formatDate=t.formatDate,this.parseDate=t.parseDate,this.parseNumber=t.parseNumber,this.formatNumber=t.formatNumber,this.splitDateFormat=t.splitDateFormat,this.numberSymbols=t.numberSymbols,this.firstDay=t.firstDay,this.dateFieldName=t.dateFieldName,this.dateFormatNames=(e,o)=>this.service.dateFormatNames(o),this.weekendRange=e=>{};const a=l.localeInfo(this.localeId);this.cldr[a.name]=a}}exports.DateInputIntl=s;
|
|
@@ -0,0 +1,20 @@
|
|
|
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";
|
|
9
|
+
import { localeInfo as l } from "@progress/kendo-intl";
|
|
10
|
+
class r {
|
|
11
|
+
constructor(t) {
|
|
12
|
+
this.service = t, this.cldr = {}, this.localeId = t.locale, this.format = t.format, this.toString = t.toString, this.formatDate = t.formatDate, this.parseDate = t.parseDate, this.parseNumber = t.parseNumber, this.formatNumber = t.formatNumber, this.splitDateFormat = t.splitDateFormat, this.numberSymbols = t.numberSymbols, this.firstDay = t.firstDay, this.dateFieldName = t.dateFieldName, this.dateFormatNames = (o, s) => this.service.dateFormatNames(s), this.weekendRange = (o) => {
|
|
13
|
+
};
|
|
14
|
+
const a = l(this.localeId);
|
|
15
|
+
this.cldr[a.name] = a;
|
|
16
|
+
}
|
|
17
|
+
}
|
|
18
|
+
export {
|
|
19
|
+
r as DateInputIntl
|
|
20
|
+
};
|
package/dateinput/utils.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
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n="d",s="wide",t=(e,A,T)=>e===null||!(A&&A>e||T&&T<e);exports.DEFAULT_FORMAT=n;exports.DEFAULT_FORMAT_PLACEHOLDER=s;exports.isInRange=t;
|
package/dateinput/utils.mjs
CHANGED
|
@@ -6,32 +6,9 @@
|
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
|
-
const
|
|
10
|
-
const l = e[f + e.length - g.length], p = e.substring(0, f + e.length - g.length), h = g.substring(0, f), b = [];
|
|
11
|
-
if (p === h && f > 0)
|
|
12
|
-
return b.push([n[f - 1], h[f - 1]]), b;
|
|
13
|
-
if (p.indexOf(h) === 0 && (h.length === 0 || n[h.length - 1] !== n[h.length])) {
|
|
14
|
-
let s = "";
|
|
15
|
-
h.length === 1 && b.push([n[0], h[0]]);
|
|
16
|
-
for (let u = h.length; u < p.length; u++)
|
|
17
|
-
n[u] !== s && n[u] !== "_" && (s = n[u], b.push([s, ""]));
|
|
18
|
-
return b;
|
|
19
|
-
}
|
|
20
|
-
if (h.indexOf(p) === 0 || n[f - 1] === "_") {
|
|
21
|
-
let s = n[0];
|
|
22
|
-
for (let u = Math.max(0, p.length - 1); u < n.length; u++)
|
|
23
|
-
if (n[u] !== "_") {
|
|
24
|
-
s = n[u];
|
|
25
|
-
break;
|
|
26
|
-
}
|
|
27
|
-
return [[s, h[f - 1]]];
|
|
28
|
-
}
|
|
29
|
-
return h[h.length - 1] === " " || h[h.length - 1] === l ? [[n[f - 1], "_"]] : [[n[f - 1], h[f - 1]]];
|
|
30
|
-
}, M = (e, n) => (e[n.pattern[0]] = n.type, e), x = (e, n, g) => e === null || !(n && n > e || g && g < e);
|
|
9
|
+
const o = "d", E = "wide", F = (s, A, n) => s === null || !(A && A > s || n && n < s);
|
|
31
10
|
export {
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
_ as defaultFormatPlaceholder,
|
|
36
|
-
x as isInRange
|
|
11
|
+
o as DEFAULT_FORMAT,
|
|
12
|
+
E as DEFAULT_FORMAT_PLACEHOLDER,
|
|
13
|
+
F as isInRange
|
|
37
14
|
};
|
package/datepicker/DatePicker.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 W=require("react"),e=require("prop-types"),U=require("@progress/kendo-react-popup"),I=require("@progress/kendo-date-math"),a=require("@progress/kendo-react-common"),j=require("@progress/kendo-svg-icons"),$=require("../package-metadata.js"),H=require("../dateinput/DateInput.js"),X=require("../calendar/components/Calendar.js"),m=require("../utils.js"),k=require("../messages/index.js"),q=require("@progress/kendo-react-intl"),Z=require("./ToggleButton.js"),G=require("../common/PickerWrap.js"),J=require("../hooks/usePickerFloatingLabel.js"),Q=require("@progress/kendo-react-layout"),Y=require("../common/AdaptiveMode.js"),ee=require("../common/constants.js");function te(l){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(s,t,i.get?i:{enumerable:!0,get:()=>l[t]})}}return s.default=l,Object.freeze(s)}const r=te(W),o=class o extends r.Component{constructor(s){super(s),this._element=null,this._dateInput=r.createRef(),this._calendar=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{this.dateInput&&this.dateInput.focus()},this.setCalendarRef=t=>{this._calendar=t},this.nextValue=(t,i)=>t.value!==void 0?t.value:i.value,this.nextShow=(t,i)=>t.show!==void 0?t.show:i.show,this.renderPopup=()=>{const{disabled:t,min:i,max:n,weekNumber:g,focusedDate:f,popupSettings:d}=this.props,{popupClass:v,...w}=d,b=this.show,h=this.value,y=h&&I.getDate(h),p=a.classNames(v),D={popupClass:"k-datepicker-popup",show:b,anchor:this._element,className:p,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...w,onMouseDownOutside:this.handleMouseDownOutside},c={disabled:t,value:y,min:i,max:n,weekNumber:g,focusedDate:f,className:this.mobileMode?"k-calendar-lg":"",navigation:!this.mobileMode,onChange:this.handleCalendarValueChange};return this.mobileMode?r.createElement(this.calendarComp,{_ref:this.setCalendarRef,...c}):r.createElement(this.popupComp,{...D},r.createElement(this.calendarComp,{_ref:this.setCalendarRef,...c}))},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,i={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:t};return r.createElement(Y.AdaptiveMode,{...i},r.createElement(Q.ActionSheetContent,{overflowHidden:!0},this.renderPopup()))},this.handleInputValueChange=t=>{this.handleValueChange(t.value,t)},this.handleCalendarValueChange=t=>{const i=this.mergeTime(t.value);this.handleValueChange(i,t)},this.handleValueChange=(t,i)=>{this.setState({value:I.cloneDate(t||void 0)}),this.valueDuringOnChange=t,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:n}=this.props;n&&n.call(void 0,{syntheticEvent:i.syntheticEvent,nativeEvent:i.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.togglePopup=()=>{this.setShow(!this.show)},this.handleMouseDownOutside=t=>{var i;(i=this.props.popupSettings)!=null&&i.onMouseDownOutside&&this.props.popupSettings.onMouseDownOutside.call(void 0,t)},this.handleIconClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:i,keyCode:n}=t;if(n===a.Keys.esc&&this.show){this.shouldFocusDateInput=!0,this.setShow(!1);return}i&&(n===a.Keys.up||n===a.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=n===a.Keys.up,this.setShow(n===a.Keys.down))},a.validatePackage($.packageMetadata),this.state={value:this.props.defaultValue||o.defaultProps.defaultValue,show:this.props.defaultShow||o.defaultProps.defaultShow,focused:!1}}get _popupId(){return this.props.id+"-popup-id"}get document(){if(a.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=ee.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get dateInput(){return this._dateInput.current}get calendar(){return this._calendar}get value(){const s=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return s!==null?I.cloneDate(s):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 min(){return this.props.min!==void 0?this.props.min:o.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:o.defaultProps.max}get dateInputComp(){return this.props.dateInput||o.defaultProps.dateInput}get toggleButtonComp(){return this.props.toggleButton||o.defaultProps.toggleButton}get calendarComp(){return this.props.calendar||o.defaultProps.calendar}get popupComp(){return this.props.popup||o.defaultProps.popup}get pickerWrapComp(){return this.props.pickerWrap||o.defaultProps.pickerWrap}get validity(){const s=m.isInDateRange(this.value,this.min,this.max),t=this.props.validationMessage!==void 0,i=(!this.required||this.value!==null)&&s,n=this.props.valid!==void 0?this.props.valid:i;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:o.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}componentDidMount(){var s;this.observerResize=a.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this._calendar&&this._calendar.element&&this.show&&!this.prevShow&&this._calendar.element.focus({preventScroll:!0}),this.dateInput&&this.dateInput.element&&!this.show&&this.shouldFocusDateInput&&this.dateInput.element.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var s;clearTimeout(this.nextTickId),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:s=o.defaultProps.size,rounded:t=o.defaultProps.rounded,fillMode:i=o.defaultProps.fillMode,disabled:n,tabIndex:g,title:f,id:d,format:v,formatPlaceholder:w,min:b,max:h,className:y,width:p,name:D,validationMessage:c,required:E,validityStyles:F,ariaLabelledBy:R,ariaDescribedBy:z,ariaLabel:V,placeholder:N,label:C,popupSettings:se,defaultValue:ie,defaultShow:oe,value:ne,popup:ae,weekNumber:re,dateInput:le,calendar:ue,toggleButton:de,onChange:he,onBlur:pe,onFocus:ce,show:me,onOpen:ge,pickerWrap:fe,adaptive:ve,adaptiveTitle:we,valid:be,autoFocus:A,visited:ye,touched:De,modified:Ce,...O}=this.props,L=this.value,M=!this.validityStyles||this.validity.valid,_={disabled:n,format:v,formatPlaceholder:w,id:d,ariaLabelledBy:R,ariaDescribedBy:z,ariaLabel:V,max:h,min:b,name:D,onChange:this.handleInputValueChange,required:E,tabIndex:this.show?-1:g,title:f,valid:this.validity.valid,validationMessage:c,validityStyles:F,value:L,label:void 0,placeholder:this.state.focused?null:N,ariaExpanded:this.show,size:null,fillMode:null,rounded:null},S=q.provideLocalizationService(this).toLanguageString(k.toggleCalendar,k.messages[k.toggleCalendar]),P=r.createElement(a.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.mobileMode?void 0:this.handleBlur,onSyncBlur:this.props.onBlur,onSyncFocus:this.props.onFocus},T=>r.createElement(r.Fragment,null,r.createElement("span",{...C?{}:O,ref:K=>{this._element=K},className:a.classNames("k-input","k-datepicker",{[`k-input-${a.kendoThemeMaps.sizeMap[s]||s}`]:s,[`k-rounded-${a.kendoThemeMaps.roundedMap[t]||t}`]:t,[`k-input-${i}`]:i,"k-invalid":!M,"k-required":this.required,"k-disabled":n},y),onKeyDown:this.handleKeyDown,style:{width:p},onFocus:T.onFocus,onBlur:T.onBlur,onClick:this.mobileMode?this.handleIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",readonly:this.mobileMode,ariaExpanded:this.show,ariaControls:this._popupId,autoFocus:A,..._}),r.createElement(this.toggleButtonComp,{type:"button",icon:"calendar",svgIcon:j.calendarIcon,title:S,className:"k-input-button",rounded:null,onClick:this.mobileMode?void 0:this.handleIconClick,"aria-label":S,fillMode:i,onMouseDown:this.handleIconMouseDown}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup()));return C?r.createElement(J.PickerFloatingLabel,{dateInput:this._dateInput,label:C,editorId:d,editorValid:M,editorDisabled:n,children:P,style:{width:p},...O}):P}setShow(s){const{onOpen:t,onClose:i}=this.props;this.show!==s&&(this.setState({show:s}),s&&t&&t.call(void 0,{target:this}),!s&&i&&i.call(void 0,{target:this}))}mergeTime(s){return this.value&&s?m.setTime(s,this.value):s}nextTick(s){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>s())}calculateMedia(s){for(const t of s)this.setState({windowWidth:t.target.clientWidth})}};o.displayName="DatePicker",o.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,ariaLabel: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,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),adaptive:e.bool,adaptiveTitle:e.string,autoFocus:e.bool},o.defaultProps={defaultShow:!1,defaultValue:null,dateInput:H.DateInput,calendar:X.Calendar,toggleButton:Z.ToggleButton,popup:U.Popup,pickerWrap:G.PickerWrap,disabled:!1,format:"d",max:m.MAX_DATE,min:m.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};let u=o;const x=a.createPropsContext(),B=a.withIdHOC(a.withPropsContext(x,u));B.displayName="KendoReactDatePicker";q.registerForLocalization(u);exports.DatePicker=B;exports.DatePickerPropsContext=x;exports.DatePickerWithoutContext=u;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Z=require("react"),e=require("prop-types"),G=require("@progress/kendo-react-popup"),I=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),J=require("@progress/kendo-svg-icons"),Q=require("../package-metadata.js"),ee=require("../dateinput/DateInput.js"),te=require("../calendar/components/Calendar.js"),m=require("../utils.js"),k=require("../messages/index.js"),q=require("@progress/kendo-react-intl"),se=require("./ToggleButton.js"),ie=require("../common/PickerWrap.js"),oe=require("../hooks/usePickerFloatingLabel.js"),ae=require("@progress/kendo-react-layout"),ne=require("../common/AdaptiveMode.js"),re=require("../common/constants.js");function le(l){const s=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const i=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(s,t,i.get?i:{enumerable:!0,get:()=>l[t]})}}return s.default=l,Object.freeze(s)}const r=le(Z),o=class o extends r.Component{constructor(s){super(s),this._element=null,this._dateInput=r.createRef(),this._calendar=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{this.dateInput&&this.dateInput.focus()},this.setCalendarRef=t=>{this._calendar=t},this.nextValue=(t,i)=>t.value!==void 0?t.value:i.value,this.nextShow=(t,i)=>t.show!==void 0?t.show:i.show,this.renderPopup=()=>{const{disabled:t,min:i,max:a,weekNumber:g,focusedDate:f,popupSettings:d}=this.props,{popupClass:v,...w}=d,b=this.show,h=this.value,y=h&&I.getDate(h),p=n.classNames(v),D={popupClass:"k-datepicker-popup",show:b,anchor:this._element,className:p,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...w,onMouseDownOutside:this.handleMouseDownOutside},c={disabled:t,value:y,min:i,max:a,weekNumber:g,focusedDate:f,className:this.mobileMode?"k-calendar-lg":"",navigation:!this.mobileMode,onChange:this.handleCalendarValueChange};return this.mobileMode?r.createElement(this.calendarComp,{_ref:this.setCalendarRef,...c}):r.createElement(this.popupComp,{...D},r.createElement(this.calendarComp,{_ref:this.setCalendarRef,...c}))},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,i={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:t};return r.createElement(ne.AdaptiveMode,{...i},r.createElement(ae.ActionSheetContent,{overflowHidden:!0},this.renderPopup()))},this.handleInputValueChange=t=>{this.handleValueChange(t.value,t)},this.handleCalendarValueChange=t=>{const i=this.mergeTime(t.value);this.handleValueChange(i,t)},this.handleValueChange=(t,i)=>{this.setState({value:I.cloneDate(t||void 0)}),this.valueDuringOnChange=t,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:a}=this.props;a&&a.call(void 0,{syntheticEvent:i.syntheticEvent,nativeEvent:i.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.togglePopup=()=>{this.setShow(!this.show)},this.handleMouseDownOutside=t=>{var i;(i=this.props.popupSettings)!=null&&i.onMouseDownOutside&&this.props.popupSettings.onMouseDownOutside.call(void 0,t)},this.handleIconClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:i,keyCode:a}=t;if(a===n.Keys.esc&&this.show){this.shouldFocusDateInput=!0,this.setShow(!1);return}i&&(a===n.Keys.up||a===n.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=a===n.Keys.up,this.setShow(a===n.Keys.down))},n.validatePackage(Q.packageMetadata),this.state={value:this.props.defaultValue||o.defaultProps.defaultValue,show:this.props.defaultShow||o.defaultProps.defaultShow,focused:!1}}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 mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=re.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get dateInput(){return this._dateInput.current}get calendar(){return this._calendar}get value(){const s=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return s!==null?I.cloneDate(s):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 min(){return this.props.min!==void 0?this.props.min:o.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:o.defaultProps.max}get dateInputComp(){return this.props.dateInput||o.defaultProps.dateInput}get toggleButtonComp(){return this.props.toggleButton||o.defaultProps.toggleButton}get calendarComp(){return this.props.calendar||o.defaultProps.calendar}get popupComp(){return this.props.popup||o.defaultProps.popup}get pickerWrapComp(){return this.props.pickerWrap||o.defaultProps.pickerWrap}get validity(){const s=m.isInDateRange(this.value,this.min,this.max),t=this.props.validationMessage!==void 0,i=(!this.required||this.value!==null)&&s,a=this.props.valid!==void 0?this.props.valid:i;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:o.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}componentDidMount(){var s;this.observerResize=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this._calendar&&this._calendar.element&&this.show&&!this.prevShow&&this._calendar.element.focus({preventScroll:!0}),this.dateInput&&this.dateInput.element&&!this.show&&this.shouldFocusDateInput&&this.dateInput.element.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var s;clearTimeout(this.nextTickId),(s=this.document)!=null&&s.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:s=o.defaultProps.size,rounded:t=o.defaultProps.rounded,fillMode:i=o.defaultProps.fillMode,disabled:a,tabIndex:g,title:f,id:d,format:v,formatPlaceholder:w,min:b,max:h,className:y,width:p,name:D,validationMessage:c,required:E,validityStyles:F,ariaLabelledBy:R,ariaDescribedBy:z,ariaLabel:V,placeholder:N,label:C,popupSettings:ue,defaultValue:de,defaultShow:he,value:pe,popup:ce,weekNumber:me,dateInput:ge,calendar:fe,toggleButton:ve,onChange:we,onBlur:be,onFocus:ye,show:De,onOpen:Ce,pickerWrap:Ie,adaptive:ke,adaptiveTitle:Me,valid:Oe,autoFocus:A,visited:Se,touched:Pe,modified:Te,autoFill:K,twoDigitYearMax:L,enableMouseWheel:W,autoCorrectParts:_,autoSwitchParts:U,autoSwitchKeys:j,allowCaretMode:$,...M}=this.props,H=this.value,O=!this.validityStyles||this.validity.valid,X={disabled:a,format:v,formatPlaceholder:w,id:d,ariaLabelledBy:R,ariaDescribedBy:z,ariaLabel:V,max:h,min:b,name:D,onChange:this.handleInputValueChange,required:E,tabIndex:this.show?-1:g,title:f,valid:this.validity.valid,validationMessage:c,validityStyles:F,value:H,label:void 0,placeholder:this.state.focused?null:N,ariaExpanded:this.show,size:null,fillMode:null,rounded:null,autoFill:K,twoDigitYearMax:L,enableMouseWheel:W,autoCorrectParts:_,autoSwitchParts:U,autoSwitchKeys:j,allowCaretMode:$},S=q.provideLocalizationService(this).toLanguageString(k.toggleCalendar,k.messages[k.toggleCalendar]),P=r.createElement(n.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.mobileMode?void 0:this.handleBlur,onSyncBlur:this.props.onBlur,onSyncFocus:this.props.onFocus},T=>r.createElement(r.Fragment,null,r.createElement("span",{...C?{}:M,ref:Y=>{this._element=Y},className:n.classNames("k-input","k-datepicker",{[`k-input-${n.kendoThemeMaps.sizeMap[s]||s}`]:s,[`k-rounded-${n.kendoThemeMaps.roundedMap[t]||t}`]:t,[`k-input-${i}`]:i,"k-invalid":!O,"k-required":this.required,"k-disabled":a},y),onKeyDown:this.handleKeyDown,style:{width:p},onFocus:T.onFocus,onBlur:T.onBlur,onClick:this.mobileMode?this.handleIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",readonly:this.mobileMode,ariaExpanded:this.show,ariaControls:this._popupId,autoFocus:A,...X}),r.createElement(this.toggleButtonComp,{type:"button",icon:"calendar",svgIcon:J.calendarIcon,title:S,className:"k-input-button",rounded:null,onClick:this.mobileMode?void 0:this.handleIconClick,"aria-label":S,fillMode:i,onMouseDown:this.handleIconMouseDown}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup()));return C?r.createElement(oe.PickerFloatingLabel,{dateInput:this._dateInput,label:C,editorId:d,editorValid:O,editorDisabled:a,children:P,style:{width:p},...M}):P}setShow(s){const{onOpen:t,onClose:i}=this.props;this.show!==s&&(this.setState({show:s}),s&&t&&t.call(void 0,{target:this}),!s&&i&&i.call(void 0,{target:this}))}mergeTime(s){return this.value&&s?m.setTime(s,this.value):s}nextTick(s){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>s())}calculateMedia(s){for(const t of s)this.setState({windowWidth:t.target.clientWidth})}};o.displayName="DatePicker",o.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,ariaLabel: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,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),adaptive:e.bool,adaptiveTitle:e.string,autoFocus:e.bool},o.defaultProps={defaultShow:!1,defaultValue:null,dateInput:ee.DateInput,calendar:te.Calendar,toggleButton:se.ToggleButton,popup:G.Popup,pickerWrap:ie.PickerWrap,disabled:!1,format:"d",max:m.MAX_DATE,min:m.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};let u=o;const x=n.createPropsContext(),B=n.withIdHOC(n.withPropsContext(x,u));B.displayName="KendoReactDatePicker";q.registerForLocalization(u);exports.DatePicker=B;exports.DatePickerPropsContext=x;exports.DatePickerWithoutContext=u;
|
|
@@ -8,22 +8,22 @@
|
|
|
8
8
|
"use client";
|
|
9
9
|
import * as n from "react";
|
|
10
10
|
import e from "prop-types";
|
|
11
|
-
import { Popup as
|
|
12
|
-
import { getDate as
|
|
13
|
-
import { classNames as k, Keys as r, validatePackage as
|
|
14
|
-
import { calendarIcon as
|
|
15
|
-
import { packageMetadata as
|
|
16
|
-
import { DateInput as
|
|
17
|
-
import { Calendar as
|
|
18
|
-
import { MAX_DATE as
|
|
19
|
-
import { toggleCalendar as
|
|
20
|
-
import { provideLocalizationService as
|
|
21
|
-
import { ToggleButton as
|
|
22
|
-
import { PickerWrap as
|
|
23
|
-
import { PickerFloatingLabel as
|
|
24
|
-
import { ActionSheetContent as
|
|
25
|
-
import { AdaptiveMode as
|
|
26
|
-
import { MOBILE_MEDIUM_DEVISE as
|
|
11
|
+
import { Popup as Y } from "@progress/kendo-react-popup";
|
|
12
|
+
import { getDate as Z, cloneDate as O } from "@progress/kendo-date-math";
|
|
13
|
+
import { classNames as k, Keys as r, validatePackage as j, canUseDOM as P, AsyncFocusBlur as G, kendoThemeMaps as T, createPropsContext as J, withIdHOC as Q, withPropsContext as ee } from "@progress/kendo-react-common";
|
|
14
|
+
import { calendarIcon as te } from "@progress/kendo-svg-icons";
|
|
15
|
+
import { packageMetadata as ie } from "../package-metadata.mjs";
|
|
16
|
+
import { DateInput as se } from "../dateinput/DateInput.mjs";
|
|
17
|
+
import { Calendar as oe } from "../calendar/components/Calendar.mjs";
|
|
18
|
+
import { MAX_DATE as ae, MIN_DATE as ne, isInDateRange as re, setTime as le } from "../utils.mjs";
|
|
19
|
+
import { toggleCalendar as x, messages as de } from "../messages/index.mjs";
|
|
20
|
+
import { provideLocalizationService as ue, registerForLocalization as he } from "@progress/kendo-react-intl";
|
|
21
|
+
import { ToggleButton as pe } from "./ToggleButton.mjs";
|
|
22
|
+
import { PickerWrap as ce } from "../common/PickerWrap.mjs";
|
|
23
|
+
import { PickerFloatingLabel as me } from "../hooks/usePickerFloatingLabel.mjs";
|
|
24
|
+
import { ActionSheetContent as fe } from "@progress/kendo-react-layout";
|
|
25
|
+
import { AdaptiveMode as ge } from "../common/AdaptiveMode.mjs";
|
|
26
|
+
import { MOBILE_MEDIUM_DEVISE as ve } from "../common/constants.mjs";
|
|
27
27
|
const o = class o extends n.Component {
|
|
28
28
|
constructor(i) {
|
|
29
29
|
super(i), this._element = null, this._dateInput = n.createRef(), this._calendar = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
|
|
@@ -31,9 +31,7 @@ const o = class o extends n.Component {
|
|
|
31
31
|
}, this.setCalendarRef = (t) => {
|
|
32
32
|
this._calendar = t;
|
|
33
33
|
}, 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.renderPopup = () => {
|
|
34
|
-
const { disabled: t, min: s, max: a, weekNumber: c, focusedDate: m, popupSettings: l } = this.props, { popupClass: f, ...g } = l, v = this.show, d = this.value, w = d &&
|
|
35
|
-
f
|
|
36
|
-
), b = {
|
|
34
|
+
const { disabled: t, min: s, max: a, weekNumber: c, focusedDate: m, popupSettings: l } = this.props, { popupClass: f, ...g } = l, v = this.show, d = this.value, w = d && Z(d), u = k(f), b = {
|
|
37
35
|
popupClass: "k-datepicker-popup",
|
|
38
36
|
show: v,
|
|
39
37
|
anchor: this._element,
|
|
@@ -68,7 +66,7 @@ const o = class o extends n.Component {
|
|
|
68
66
|
adaptiveTitle: this.props.adaptiveTitle,
|
|
69
67
|
windowWidth: t
|
|
70
68
|
};
|
|
71
|
-
return /* @__PURE__ */ n.createElement(
|
|
69
|
+
return /* @__PURE__ */ n.createElement(ge, { ...s }, /* @__PURE__ */ n.createElement(fe, { overflowHidden: !0 }, this.renderPopup()));
|
|
72
70
|
}, this.handleInputValueChange = (t) => {
|
|
73
71
|
this.handleValueChange(t.value, t);
|
|
74
72
|
}, this.handleCalendarValueChange = (t) => {
|
|
@@ -76,7 +74,7 @@ const o = class o extends n.Component {
|
|
|
76
74
|
this.handleValueChange(s, t);
|
|
77
75
|
}, this.handleValueChange = (t, s) => {
|
|
78
76
|
this.setState({
|
|
79
|
-
value:
|
|
77
|
+
value: O(t || void 0)
|
|
80
78
|
}), this.valueDuringOnChange = t, this.showDuringOnChange = !1, this.mobileMode || (this.shouldFocusDateInput = !0);
|
|
81
79
|
const { onChange: a } = this.props;
|
|
82
80
|
a && a.call(void 0, {
|
|
@@ -106,7 +104,7 @@ const o = class o extends n.Component {
|
|
|
106
104
|
return;
|
|
107
105
|
}
|
|
108
106
|
s && (a === r.up || a === r.down) && (t.preventDefault(), t.stopPropagation(), this.shouldFocusDateInput = a === r.up, this.setShow(a === r.down));
|
|
109
|
-
},
|
|
107
|
+
}, j(ie), this.state = {
|
|
110
108
|
value: this.props.defaultValue || o.defaultProps.defaultValue,
|
|
111
109
|
show: this.props.defaultShow || o.defaultProps.defaultShow,
|
|
112
110
|
focused: !1
|
|
@@ -129,7 +127,7 @@ const o = class o extends n.Component {
|
|
|
129
127
|
* The mobile mode of the DatePicker.
|
|
130
128
|
*/
|
|
131
129
|
get mobileMode() {
|
|
132
|
-
return !!(this.state.windowWidth && this.state.windowWidth <=
|
|
130
|
+
return !!(this.state.windowWidth && this.state.windowWidth <= ve && this.props.adaptive);
|
|
133
131
|
}
|
|
134
132
|
/**
|
|
135
133
|
* Gets the DateInput component inside the DatePicker component.
|
|
@@ -148,7 +146,7 @@ const o = class o extends n.Component {
|
|
|
148
146
|
*/
|
|
149
147
|
get value() {
|
|
150
148
|
const i = this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.props.value !== void 0 ? this.props.value : this.state.value;
|
|
151
|
-
return i !== null ?
|
|
149
|
+
return i !== null ? O(i) : null;
|
|
152
150
|
}
|
|
153
151
|
/**
|
|
154
152
|
* Gets the popup state of the DatePickerWithoutContext.
|
|
@@ -187,7 +185,7 @@ const o = class o extends n.Component {
|
|
|
187
185
|
* Represents the validity state into which the DatePicker is set.
|
|
188
186
|
*/
|
|
189
187
|
get validity() {
|
|
190
|
-
const i =
|
|
188
|
+
const i = re(this.value, this.min, this.max), t = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && i, a = this.props.valid !== void 0 ? this.props.valid : s;
|
|
191
189
|
return {
|
|
192
190
|
customError: t,
|
|
193
191
|
rangeOverflow: this.value && this.max.getTime() < this.value.getTime() || !1,
|
|
@@ -248,38 +246,45 @@ const o = class o extends n.Component {
|
|
|
248
246
|
width: u,
|
|
249
247
|
name: b,
|
|
250
248
|
validationMessage: h,
|
|
251
|
-
required:
|
|
249
|
+
required: E,
|
|
252
250
|
validityStyles: B,
|
|
253
251
|
ariaLabelledBy: F,
|
|
254
252
|
ariaDescribedBy: V,
|
|
255
253
|
ariaLabel: z,
|
|
256
254
|
placeholder: N,
|
|
257
255
|
label: y,
|
|
258
|
-
popupSettings:
|
|
259
|
-
defaultValue:
|
|
260
|
-
defaultShow:
|
|
261
|
-
value:
|
|
262
|
-
popup:
|
|
263
|
-
weekNumber:
|
|
264
|
-
dateInput:
|
|
265
|
-
calendar:
|
|
266
|
-
toggleButton:
|
|
267
|
-
onChange:
|
|
268
|
-
onBlur:
|
|
269
|
-
onFocus:
|
|
270
|
-
show:
|
|
271
|
-
onOpen:
|
|
272
|
-
pickerWrap:
|
|
273
|
-
adaptive:
|
|
274
|
-
adaptiveTitle:
|
|
275
|
-
valid:
|
|
256
|
+
popupSettings: ye,
|
|
257
|
+
defaultValue: Ce,
|
|
258
|
+
defaultShow: Ie,
|
|
259
|
+
value: De,
|
|
260
|
+
popup: Se,
|
|
261
|
+
weekNumber: Me,
|
|
262
|
+
dateInput: Oe,
|
|
263
|
+
calendar: ke,
|
|
264
|
+
toggleButton: Pe,
|
|
265
|
+
onChange: Te,
|
|
266
|
+
onBlur: xe,
|
|
267
|
+
onFocus: Ee,
|
|
268
|
+
show: Be,
|
|
269
|
+
onOpen: Fe,
|
|
270
|
+
pickerWrap: Ve,
|
|
271
|
+
adaptive: ze,
|
|
272
|
+
adaptiveTitle: Ne,
|
|
273
|
+
valid: Re,
|
|
276
274
|
autoFocus: R,
|
|
277
275
|
// Removed to support direct use in Form Field component
|
|
278
|
-
visited:
|
|
279
|
-
touched:
|
|
280
|
-
modified:
|
|
281
|
-
|
|
282
|
-
|
|
276
|
+
visited: Ae,
|
|
277
|
+
touched: Le,
|
|
278
|
+
modified: We,
|
|
279
|
+
autoFill: A,
|
|
280
|
+
twoDigitYearMax: L,
|
|
281
|
+
enableMouseWheel: W,
|
|
282
|
+
autoCorrectParts: q,
|
|
283
|
+
autoSwitchParts: _,
|
|
284
|
+
autoSwitchKeys: K,
|
|
285
|
+
allowCaretMode: U,
|
|
286
|
+
...C
|
|
287
|
+
} = this.props, $ = this.value, I = !this.validityStyles || this.validity.valid, H = {
|
|
283
288
|
disabled: a,
|
|
284
289
|
format: f,
|
|
285
290
|
formatPlaceholder: g,
|
|
@@ -291,33 +296,43 @@ const o = class o extends n.Component {
|
|
|
291
296
|
min: v,
|
|
292
297
|
name: b,
|
|
293
298
|
onChange: this.handleInputValueChange,
|
|
294
|
-
required:
|
|
299
|
+
required: E,
|
|
295
300
|
tabIndex: this.show ? -1 : c,
|
|
296
301
|
title: m,
|
|
297
302
|
valid: this.validity.valid,
|
|
298
303
|
validationMessage: h,
|
|
299
304
|
validityStyles: B,
|
|
300
|
-
value:
|
|
305
|
+
value: $,
|
|
301
306
|
label: void 0,
|
|
302
307
|
placeholder: this.state.focused ? null : N,
|
|
303
308
|
ariaExpanded: this.show,
|
|
304
309
|
size: null,
|
|
305
310
|
fillMode: null,
|
|
306
|
-
rounded: null
|
|
307
|
-
|
|
308
|
-
|
|
311
|
+
rounded: null,
|
|
312
|
+
autoFill: A,
|
|
313
|
+
twoDigitYearMax: L,
|
|
314
|
+
enableMouseWheel: W,
|
|
315
|
+
autoCorrectParts: q,
|
|
316
|
+
autoSwitchParts: _,
|
|
317
|
+
autoSwitchKeys: K,
|
|
318
|
+
allowCaretMode: U
|
|
319
|
+
}, D = ue(this).toLanguageString(
|
|
320
|
+
x,
|
|
321
|
+
de[x]
|
|
322
|
+
), S = /* @__PURE__ */ n.createElement(
|
|
323
|
+
G,
|
|
309
324
|
{
|
|
310
325
|
onFocus: this.handleFocus,
|
|
311
326
|
onBlur: this.mobileMode ? void 0 : this.handleBlur,
|
|
312
327
|
onSyncBlur: this.props.onBlur,
|
|
313
328
|
onSyncFocus: this.props.onFocus
|
|
314
329
|
},
|
|
315
|
-
(
|
|
330
|
+
(M) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
|
|
316
331
|
"span",
|
|
317
332
|
{
|
|
318
|
-
...y ? {} :
|
|
319
|
-
ref: (
|
|
320
|
-
this._element =
|
|
333
|
+
...y ? {} : C,
|
|
334
|
+
ref: (X) => {
|
|
335
|
+
this._element = X;
|
|
321
336
|
},
|
|
322
337
|
className: k(
|
|
323
338
|
"k-input",
|
|
@@ -326,7 +341,7 @@ const o = class o extends n.Component {
|
|
|
326
341
|
[`k-input-${T.sizeMap[i] || i}`]: i,
|
|
327
342
|
[`k-rounded-${T.roundedMap[t] || t}`]: t,
|
|
328
343
|
[`k-input-${s}`]: s,
|
|
329
|
-
"k-invalid": !
|
|
344
|
+
"k-invalid": !I,
|
|
330
345
|
"k-required": this.required,
|
|
331
346
|
"k-disabled": a
|
|
332
347
|
},
|
|
@@ -334,8 +349,8 @@ const o = class o extends n.Component {
|
|
|
334
349
|
),
|
|
335
350
|
onKeyDown: this.handleKeyDown,
|
|
336
351
|
style: { width: u },
|
|
337
|
-
onFocus:
|
|
338
|
-
onBlur:
|
|
352
|
+
onFocus: M.onFocus,
|
|
353
|
+
onBlur: M.onBlur,
|
|
339
354
|
onClick: this.mobileMode ? this.handleIconClick : void 0
|
|
340
355
|
},
|
|
341
356
|
/* @__PURE__ */ n.createElement(
|
|
@@ -347,7 +362,7 @@ const o = class o extends n.Component {
|
|
|
347
362
|
ariaExpanded: this.show,
|
|
348
363
|
ariaControls: this._popupId,
|
|
349
364
|
autoFocus: R,
|
|
350
|
-
...
|
|
365
|
+
...H
|
|
351
366
|
}
|
|
352
367
|
),
|
|
353
368
|
/* @__PURE__ */ n.createElement(
|
|
@@ -355,7 +370,7 @@ const o = class o extends n.Component {
|
|
|
355
370
|
{
|
|
356
371
|
type: "button",
|
|
357
372
|
icon: "calendar",
|
|
358
|
-
svgIcon:
|
|
373
|
+
svgIcon: te,
|
|
359
374
|
title: D,
|
|
360
375
|
className: "k-input-button",
|
|
361
376
|
rounded: null,
|
|
@@ -369,18 +384,18 @@ const o = class o extends n.Component {
|
|
|
369
384
|
), this.mobileMode && this.renderAdaptivePopup())
|
|
370
385
|
);
|
|
371
386
|
return y ? /* @__PURE__ */ n.createElement(
|
|
372
|
-
|
|
387
|
+
me,
|
|
373
388
|
{
|
|
374
389
|
dateInput: this._dateInput,
|
|
375
390
|
label: y,
|
|
376
391
|
editorId: l,
|
|
377
|
-
editorValid:
|
|
392
|
+
editorValid: I,
|
|
378
393
|
editorDisabled: a,
|
|
379
|
-
children:
|
|
394
|
+
children: S,
|
|
380
395
|
style: { width: u },
|
|
381
|
-
...
|
|
396
|
+
...C
|
|
382
397
|
}
|
|
383
|
-
) :
|
|
398
|
+
) : S;
|
|
384
399
|
}
|
|
385
400
|
setShow(i) {
|
|
386
401
|
const { onOpen: t, onClose: s } = this.props;
|
|
@@ -391,7 +406,7 @@ const o = class o extends n.Component {
|
|
|
391
406
|
}));
|
|
392
407
|
}
|
|
393
408
|
mergeTime(i) {
|
|
394
|
-
return this.value && i ?
|
|
409
|
+
return this.value && i ? le(i, this.value) : i;
|
|
395
410
|
}
|
|
396
411
|
nextTick(i) {
|
|
397
412
|
clearTimeout(this.nextTickId), this.nextTickId = window.setTimeout(() => i());
|
|
@@ -428,7 +443,12 @@ o.displayName = "DatePicker", o.propTypes = {
|
|
|
428
443
|
})
|
|
429
444
|
]),
|
|
430
445
|
formatPlaceholder: e.oneOfType([
|
|
431
|
-
e.oneOf([
|
|
446
|
+
e.oneOf([
|
|
447
|
+
"wide",
|
|
448
|
+
"narrow",
|
|
449
|
+
"short",
|
|
450
|
+
"formatPattern"
|
|
451
|
+
]),
|
|
432
452
|
e.shape({
|
|
433
453
|
year: e.string,
|
|
434
454
|
month: e.string,
|
|
@@ -469,15 +489,15 @@ o.displayName = "DatePicker", o.propTypes = {
|
|
|
469
489
|
}, o.defaultProps = {
|
|
470
490
|
defaultShow: !1,
|
|
471
491
|
defaultValue: null,
|
|
472
|
-
dateInput:
|
|
473
|
-
calendar:
|
|
474
|
-
toggleButton:
|
|
475
|
-
popup:
|
|
476
|
-
pickerWrap:
|
|
492
|
+
dateInput: se,
|
|
493
|
+
calendar: oe,
|
|
494
|
+
toggleButton: pe,
|
|
495
|
+
popup: Y,
|
|
496
|
+
pickerWrap: ce,
|
|
477
497
|
disabled: !1,
|
|
478
498
|
format: "d",
|
|
479
|
-
max:
|
|
480
|
-
min:
|
|
499
|
+
max: ae,
|
|
500
|
+
min: ne,
|
|
481
501
|
popupSettings: {},
|
|
482
502
|
tabIndex: 0,
|
|
483
503
|
weekNumber: !1,
|
|
@@ -488,11 +508,13 @@ o.displayName = "DatePicker", o.propTypes = {
|
|
|
488
508
|
autoFocus: !1
|
|
489
509
|
};
|
|
490
510
|
let p = o;
|
|
491
|
-
const
|
|
492
|
-
|
|
493
|
-
|
|
511
|
+
const we = J(), be = Q(
|
|
512
|
+
ee(we, p)
|
|
513
|
+
);
|
|
514
|
+
be.displayName = "KendoReactDatePicker";
|
|
515
|
+
he(p);
|
|
494
516
|
export {
|
|
495
|
-
|
|
496
|
-
|
|
517
|
+
be as DatePicker,
|
|
518
|
+
we as DatePickerPropsContext,
|
|
497
519
|
p as DatePickerWithoutContext
|
|
498
520
|
};
|
|
@@ -72,7 +72,10 @@ const o = class o extends i.Component {
|
|
|
72
72
|
adaptiveTitle: this.props.adaptiveTitle,
|
|
73
73
|
windowWidth: t,
|
|
74
74
|
footer: {
|
|
75
|
-
cancelText: this.localizationService.toLanguageString(
|
|
75
|
+
cancelText: this.localizationService.toLanguageString(
|
|
76
|
+
b,
|
|
77
|
+
l[b]
|
|
78
|
+
),
|
|
76
79
|
onCancel: this.handleCancel,
|
|
77
80
|
applyText: this.localizationService.toLanguageString(C, l[C]),
|
|
78
81
|
onApply: this.handleBlur
|
|
@@ -288,7 +291,10 @@ const o = class o extends i.Component {
|
|
|
288
291
|
onMouseDown: this.handleReverseMouseDown,
|
|
289
292
|
onClick: this.handleReverseClick,
|
|
290
293
|
"aria-controls": s + " " + n,
|
|
291
|
-
"aria-label": m(this).toLanguageString(
|
|
294
|
+
"aria-label": m(this).toLanguageString(
|
|
295
|
+
d,
|
|
296
|
+
l[d]
|
|
297
|
+
)
|
|
292
298
|
},
|
|
293
299
|
/* @__PURE__ */ i.createElement(F, { style: { transform: "rotate(90deg)" }, name: "arrows-swap", icon: L })
|
|
294
300
|
);
|
|
@@ -421,7 +427,12 @@ o.displayName = "DateRangePicker", o.propTypes = {
|
|
|
421
427
|
autoFocus: !1
|
|
422
428
|
};
|
|
423
429
|
let u = o;
|
|
424
|
-
const Z = B(), j = z(
|
|
430
|
+
const Z = B(), j = z(
|
|
431
|
+
A(
|
|
432
|
+
Z,
|
|
433
|
+
u
|
|
434
|
+
)
|
|
435
|
+
);
|
|
425
436
|
j.displayName = "KendoReactDateRangePicker";
|
|
426
437
|
N(u);
|
|
427
438
|
export {
|
|
@@ -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 j=require("react"),e=require("prop-types"),U=require("@progress/kendo-react-popup"),T=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),H=require("@progress/kendo-svg-icons"),W=require("../dateinput/DateInput.js"),X=require("@progress/kendo-react-buttons"),Z=require("../package-metadata.js"),p=require("../utils.js"),$=require("../common/constants.js"),l=require("../messages/index.js"),m=require("@progress/kendo-react-intl"),G=require("./DateTimeSelector.js"),J=require("../timepicker/utils.js"),Q=require("../hooks/usePickerFloatingLabel.js"),Y=require("../common/AdaptiveMode.js"),ee=require("@progress/kendo-react-layout");function te(c){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const i in c)if(i!=="default"){const s=Object.getOwnPropertyDescriptor(c,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:()=>c[i]})}}return t.default=c,Object.freeze(t)}const r=te(j),n=class n extends r.Component{constructor(t){super(t),this._element=null,this._dateInput=r.createRef(),this._dateTimeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{const i=this.dateInputElement();i&&i.focus()},this.renderPicker=()=>{const{disabled:i,minTime:s,maxTime:a,format:h,calendar:d,cancelButton:u,weekNumber:f,focusedDate:v,unstyled:w}=this.props;return r.createElement(G.DateTimeSelector,{ref:b=>{this._dateTimeSelector=b},cancelButton:u,steps:this.props.steps,value:this.value,onChange:this.handleValueChange,onReject:this.handleReject,disabled:i,weekNumber:f,min:this.min,max:this.max,minTime:s,maxTime:a,focusedDate:v,format:h,calendar:d,mobileMode:this.mobileMode,footerActions:!this.mobileMode,unstyled:w})},this.renderAdaptivePopup=()=>{const{windowWidth:i=0}=this.state,s=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerCancel,l.messages[l.dateTimePickerCancel]),a=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerSet,l.messages[l.dateTimePickerSet]),h={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:i,footer:{cancelText:s,onCancel:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleReject(d)},applyText:a,onApply:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleAccept(d)}}};return r.createElement(Y.AdaptiveMode,{...h},r.createElement(ee.ActionSheetContent,{overflowHidden:!0},this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=i=>{this.setState({value:T.cloneDate(i.value||void 0)}),this.valueDuringOnChange=i.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:s}=this.props;s&&s.call(void 0,{syntheticEvent:i.syntheticEvent,nativeEvent:i.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.handleDateIconClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=i=>{i.preventDefault()},this.handleKeyDown=i=>{const{altKey:s,keyCode:a}=i;if(a===o.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(a===o.Keys.up||a===o.Keys.down)&&(i.preventDefault(),i.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"),o.validatePackage(Z.packageMetadata),this.state={value:this.props.defaultValue||n.defaultProps.defaultValue,show:this.props.defaultShow||n.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 t=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return t!==null?T.cloneDate(t):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(){return!!(this.state.windowWidth&&this.state.windowWidth<=$.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get min(){return this.props.min!==void 0?this.props.min:n.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:n.defaultProps.max}get validity(){const t=p.isInDateRange(this.value,this.min,this.max)&&J.isInTimeRange(this.value,this.props.minTime||p.MIN_TIME,this.props.maxTime||p.MAX_TIME),i=this.props.validationMessage!==void 0,s=(!this.required||this.value!==null)&&t,a=this.props.valid!==void 0?this.props.valid:s;return{customError:i,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:n.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get dateInputComp(){return this.props.dateInput||n.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)}componentDidUpdate(){const t=this.dateInputElement();this._dateTimeSelector&&this.show&&!this.prevShow&&this._dateTimeSelector.focus({preventScroll:!0}),t&&!this.show&&this.shouldFocusDateInput&&t.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var t;clearTimeout(this.nextTickId),(t=this.document)!=null&&t.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:t=n.defaultProps.size,rounded:i=n.defaultProps.rounded,fillMode:s=n.defaultProps.fillMode,autoFocus:a=n.defaultProps.autoFocus,disabled:h,tabIndex:d,title:u,id:f,format:v,formatPlaceholder:w,min:b,max:k,className:M,width:C,name:x,validationMessage:E,required:q,validityStyles:R,minTime:F,maxTime:z,ariaLabelledBy:B,ariaDescribedBy:A,popup:N=U.Popup,unstyled:y}=this.props,D=y&&y.uDateTimePicker,S=!this.validityStyles||this.validity.valid,L={id:f,ariaLabelledBy:B,ariaDescribedBy:A,format:v,formatPlaceholder:w,disabled:h,title:u,validityStyles:R,validationMessage:E,required:q,min:b,max:k,minTime:F,maxTime:z,name:x,tabIndex:this.show?-1:d,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,size:null,fillMode:null,rounded:null,unstyled:y},I=r.createElement(o.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:_,onBlur:V})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:K=>{this._element=K},className:o.classNames(o.uDateTimePicker.wrapper({c:D,size:t,fillMode:s,rounded:i,disabled:h,required:this.required,invalid:!S}),M),onKeyDown:this.handleKeyDown,style:{width:C},onFocus:this.mobileMode?void 0:_,onBlur:V,onClick:this.mobileMode?this.handleDateIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,ariaHasPopup:"dialog",readonly:this.mobileMode,autoFocus:a,...L}),r.createElement(X.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:H.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleDateIconClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:o.classNames(o.uDateTimePicker.inputButton({c:D})),rounded:null,fillMode:s,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(N,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:o.classNames(o.uDateTimePicker.popup({c:D})),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(Q.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:f,editorValid:S,editorDisabled:this.props.disabled,children:I,style:{width:this.props.width}}):I}setShow(t){const{onOpen:i,onClose:s}=this.props;this.show!==t&&(this.setState({show:t}),t&&i&&i.call(void 0,{target:this}),!t&&s&&s.call(void 0,{target:this}))}nextTick(t){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>t())}calculateMedia(t){for(const i of t)this.setState({windowWidth:i.target.clientWidth})}};n.displayName="DateTimePicker",n.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([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),autoFocus:e.bool},n.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"g",max:p.MAX_DATE,min:p.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,cancelButton:!0,dateInput:W.DateInput,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};let g=n;const P=o.createPropsContext(),O=o.withIdHOC(o.withPropsContext(P,o.withUnstyledHOC(g)));O.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=O;exports.DateTimePickerPropsContext=P;exports.DateTimePickerWithoutContext=g;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const $=require("react"),e=require("prop-types"),G=require("@progress/kendo-react-popup"),T=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),J=require("@progress/kendo-svg-icons"),Q=require("../dateinput/DateInput.js"),ee=require("@progress/kendo-react-buttons"),te=require("../package-metadata.js"),p=require("../utils.js"),ie=require("../common/constants.js"),l=require("../messages/index.js"),m=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(c){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const i in c)if(i!=="default"){const s=Object.getOwnPropertyDescriptor(c,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:()=>c[i]})}}return t.default=c,Object.freeze(t)}const r=le($),a=class a extends r.Component{constructor(t){super(t),this._element=null,this._dateInput=r.createRef(),this._dateTimeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{const i=this.dateInputElement();i&&i.focus()},this.renderPicker=()=>{const{disabled:i,minTime:s,maxTime:n,format:h,calendar:d,cancelButton:u,weekNumber:f,focusedDate:v,unstyled:w}=this.props;return r.createElement(se.DateTimeSelector,{ref:b=>{this._dateTimeSelector=b},cancelButton:u,steps:this.props.steps,value:this.value,onChange:this.handleValueChange,onReject:this.handleReject,disabled:i,weekNumber:f,min:this.min,max:this.max,minTime:s,maxTime:n,focusedDate:v,format:h,calendar:d,mobileMode:this.mobileMode,footerActions:!this.mobileMode,unstyled:w})},this.renderAdaptivePopup=()=>{const{windowWidth:i=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]),h={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:i,footer:{cancelText:s,onCancel:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleReject(d)},applyText:n,onApply:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleAccept(d)}}};return r.createElement(ne.AdaptiveMode,{...h},r.createElement(re.ActionSheetContent,{overflowHidden:!0},this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=i=>{this.setState({value:T.cloneDate(i.value||void 0)}),this.valueDuringOnChange=i.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:s}=this.props;s&&s.call(void 0,{syntheticEvent:i.syntheticEvent,nativeEvent:i.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.handleDateIconClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=i=>{i.preventDefault()},this.handleKeyDown=i=>{const{altKey:s,keyCode:n}=i;if(n===o.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(n===o.Keys.up||n===o.Keys.down)&&(i.preventDefault(),i.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"),o.validatePackage(te.packageMetadata),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 t=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return t!==null?T.cloneDate(t):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(){return!!(this.state.windowWidth&&this.state.windowWidth<=ie.MOBILE_MEDIUM_DEVISE&&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 t=p.isInDateRange(this.value,this.min,this.max)&&oe.isInTimeRange(this.value,this.props.minTime||p.MIN_TIME,this.props.maxTime||p.MAX_TIME),i=this.props.validationMessage!==void 0,s=(!this.required||this.value!==null)&&t,n=this.props.valid!==void 0?this.props.valid:s;return{customError:i,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)}componentDidUpdate(){const t=this.dateInputElement();this._dateTimeSelector&&this.show&&!this.prevShow&&this._dateTimeSelector.focus({preventScroll:!0}),t&&!this.show&&this.shouldFocusDateInput&&t.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var t;clearTimeout(this.nextTickId),(t=this.document)!=null&&t.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:t=a.defaultProps.size,rounded:i=a.defaultProps.rounded,fillMode:s=a.defaultProps.fillMode,autoFocus:n=a.defaultProps.autoFocus,disabled:h,tabIndex:d,title:u,id:f,format:v,formatPlaceholder:w,min:b,max:O,className:k,width:C,name:x,validationMessage:E,required:q,validityStyles:F,minTime:R,maxTime:z,ariaLabelledBy:B,ariaDescribedBy:A,popup:N=G.Popup,unstyled:y,autoFill:L,twoDigitYearMax:_,enableMouseWheel:K,autoCorrectParts:V,autoSwitchParts:j,autoSwitchKeys:U,allowCaretMode:H}=this.props,D=y&&y.uDateTimePicker,S=!this.validityStyles||this.validity.valid,W={id:f,ariaLabelledBy:B,ariaDescribedBy:A,format:v,formatPlaceholder:w,disabled:h,title:u,validityStyles:F,validationMessage:E,required:q,min:b,max:O,minTime:R,maxTime:z,name:x,tabIndex:this.show?-1:d,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,size:null,fillMode:null,rounded:null,unstyled:y,autoFill:L,twoDigitYearMax:_,enableMouseWheel:K,autoCorrectParts:V,autoSwitchParts:j,autoSwitchKeys:U,allowCaretMode:H},I=r.createElement(o.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:X,onBlur:Y})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:Z=>{this._element=Z},className:o.classNames(o.uDateTimePicker.wrapper({c:D,size:t,fillMode:s,rounded:i,disabled:h,required:this.required,invalid:!S}),k),onKeyDown:this.handleKeyDown,style:{width:C},onFocus:this.mobileMode?void 0:X,onBlur:Y,onClick:this.mobileMode?this.handleDateIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,ariaHasPopup:"dialog",readonly:this.mobileMode,autoFocus:n,...W}),r.createElement(ee.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:J.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleDateIconClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:o.classNames(o.uDateTimePicker.inputButton({c:D})),rounded:null,fillMode:s,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(N,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:o.classNames(o.uDateTimePicker.popup({c:D})),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(ae.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:f,editorValid:S,editorDisabled:this.props.disabled,children:I,style:{width:this.props.width}}):I}setShow(t){const{onOpen:i,onClose:s}=this.props;this.show!==t&&(this.setState({show:t}),t&&i&&i.call(void 0,{target:this}),!t&&s&&s.call(void 0,{target:this}))}nextTick(t){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>t())}calculateMedia(t){for(const i of t)this.setState({windowWidth:i.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([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),autoFocus:e.bool},a.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"g",max:p.MAX_DATE,min:p.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,cancelButton:!0,dateInput:Q.DateInput,size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};let g=a;const P=o.createPropsContext(),M=o.withIdHOC(o.withPropsContext(P,o.withUnstyledHOC(g)));M.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=M;exports.DateTimePickerPropsContext=P;exports.DateTimePickerWithoutContext=g;
|