@progress/kendo-react-dateinputs 8.1.0-develop.9 → 8.1.0
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/calendar/components/ViewList.js +1 -1
- package/calendar/components/ViewList.mjs +20 -22
- package/datepicker/DatePicker.js +1 -1
- package/datepicker/DatePicker.mjs +1 -0
- package/datetimepicker/DateTimePicker.js +1 -1
- package/datetimepicker/DateTimePicker.mjs +1 -0
- package/dist/cdn/js/kendo-react-dateinputs.js +1 -1
- package/package-metadata.mjs +1 -1
- package/package.json +7 -7
- package/timepicker/TimePicker.js +1 -1
- package/timepicker/TimePicker.mjs +2 -1
|
@@ -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 V=require("react"),r=require("prop-types"),y=require("@progress/kendo-react-common"),p=require("@progress/kendo-date-math"),f=require("@progress/kendo-react-intl"),x=require("../../virtualization/Virtualization.js"),S=require("./View.js"),C=require("./Header.js"),E=require("../services/WeekNamesService.js"),d=require("../../utils.js"),l=require("../models/CalendarViewEnum.js"),I=require("./TodayCommand.js");function T(h){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const e in h)if(e!=="default"){const t=Object.getOwnPropertyDescriptor(h,e);Object.defineProperty(o,e,t.get?t:{enumerable:!0,get:()=>h[e]})}}return o.default=h,Object.freeze(o)}const s=T(V),O=5,c=class c extends s.Component{constructor(o){super(o),this.virtualization=null,this.calendarView=null,this.table=null,this.intl=null,this.bottomOffset=0,this.viewOffset=0,this.viewHeight=0,this._element=null,this.isActive=!1,this.animateToIndex=!0,this.shouldScroll=!1,this.weekService=null,this.focusActiveDate=()=>{if(!this._element)return;const e=this._element.querySelector("td.k-focus"),t=this._element.querySelector(".k-state-pending-focus");e&&e[0]&&e[0].classList.remove("k-focus"),t&&t.classList.add("k-focus"),this.isActive=!0},this.blurActiveDate=()=>{if(!this._element)return;const e=this._element.querySelector("td.k-focus");e&&e.classList.remove("k-focus"),this.isActive=!1},this.handleVirtualizationMount=e=>{if(this.virtualization=e,this.virtualization&&this.table){this.table.style.transform=`translateY(${this.viewOffset}px)`;const t=d.dateInRange(this.props.focusedDate,this.props.min,this.props.max),i=this.props.service.skip(t,this.props.min);this.virtualization.scrollToIndex(i)}},this.buildMonthView=(e,t)=>s.createElement("table",{key:"calendar-view-list-weekdays",className:"k-calendar-table k-calendar-weekdays",role:"grid",tabIndex:this.props.tabIndex},s.createElement("colgroup",null,e.map((i,a)=>s.createElement("col",{key:a}))),s.createElement("thead",{className:"k-calendar-thead"},s.createElement("tr",{className:"k-calendar-tr"},t.map((i,a)=>s.createElement("th",{key:a,className:"k-calendar-th"},i))))),this.buildDates=(e,t)=>{const i=this.props.cellUID;return s.createElement("table",{className:"k-calendar-table",ref:a=>this.table=a,role:"grid",tabIndex:this.props.tabIndex,"aria-activedescendant":i+this.props.focusedDate.getTime()},s.createElement("colgroup",null,e.map((a,n)=>s.createElement("col",{key:n}))),t.map(a=>s.createElement(S.View,{ref:n=>{this.calendarView||(this.calendarView=n)},key:a.getTime(),activeView:this.props.activeView,viewDate:a,min:this.props.min,max:this.props.max,cellUID:i,focusedDate:this.props.focusedDate,cell:this.props.cell,selectedDate:this.props.value,showWeekNumbers:this.weekNumber,onChange:this.handleDateChange,bus:this.props.bus,service:this.props.service,weekCell:this.props.weekCell,showOtherMonthDays:this.props.showOtherMonthDays})))},this.calculateHeights=()=>{if(!this.props.dom)return;const e=this.props.activeView===l.CalendarViewEnum.month?this.props.dom.scrollableContentHeight:this.props.dom.scrollableYearContentHeight;this.bottomOffset=e-this.props.dom.viewHeight(this.props.activeView),this.viewOffset=-1*this.props.dom.headerHeight,this.viewHeight=this.props.dom.viewHeight(this.props.activeView)||1},this.getTake=(e,t)=>Math.min(t-e,this.take),this.handleScrollAction=({index:e,scrollAction:t,pageAction:i})=>{const a=i?i.skip:this.state.skip;if((this.state.index!==e||this.state.skip!==a)&&this.setState({index:e,skip:a}),this.table&&t){const n=`translateY(${t.offset}px)`;this.table.style.transform=n}},this.handleTodayClick=e=>{this.shouldScroll=!0,this.handleDateChange.call(void 0,e,!0)},this.handleDateChange=(e,t=!1)=>{const{onChange:i}=this.props;if(i){const a={syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,value:p.cloneDate(e.value),target:this,isTodayClick:t};i.call(void 0,a)}},this.lastView=this.props.activeView,this.lastFocus=this.props.focusedDate,this.state={skip:this.props.service.skip(this.props.focusedDate,this.props.min),index:this.props.service.skip(this.props.focusedDate,this.props.min)}}get element(){return this._element}get weekNames(){return this.intl=f.provideIntlService(this),this.weekService=new E.WeekNamesService(this.intl),this.weekService.getWeekNames(this.weekNumber,this.props.weekDaysFormat)}get weekNumber(){return!!(this.props.showWeekNumbers&&this.props.activeView===l.CalendarViewEnum.month)}get take(){return this.props.take!==void 0?this.props.take:c.defaultProps.take}get animate(){return!!(this.props.smoothScroll&&this.animateToIndex)}get todayIsInRange(){return d.isInRange(d.getToday(),p.getDate(this.props.min),p.getDate(this.props.max))}componentDidUpdate(o,e){this.shouldScroll=!1,this.indexToScroll!==void 0&&this.virtualization&&this.virtualization[this.animate?"animateToIndex":"scrollToIndex"](this.indexToScroll),this.isActive&&this.focusActiveDate(),this.lastView=this.props.activeView,this.indexToScroll=void 0}render(){this.calculateHeights();const o=this.lastView!==this.props.activeView,e=d.dateInRange(this.props.focusedDate,this.props.min,this.props.max),t=o?this.props.service.skip(e,this.props.min):this.state.skip,i=this.props.service.total(this.props.min,this.props.max),a=this.getTake(t,i),n=this.props.service.addToDate(this.props.min,t),w=this.props.service.addToDate(this.props.min,this.state.index),m=new Array(this.props.service.rowLength(this.weekNumber)).fill(""),v=this.props.activeView!==this.lastView;this.animateToIndex=!v,(v||!p.isEqualDate(this.lastFocus,e)||this.shouldScroll||!this.props.shouldScroll||this.props.shouldScroll())&&(this.indexToScroll=this.props.service.skip(e,this.props.min)),this.lastFocus=e;const k=y.classNames("k-calendar-view k-vstack",{"k-calendar-monthview":this.props.activeView===l.CalendarViewEnum.month,"k-calendar-yearview":this.props.activeView===l.CalendarViewEnum.year,"k-calendar-decadeview":this.props.activeView===l.CalendarViewEnum.decade,"k-calendar-centuryview":this.props.activeView===l.CalendarViewEnum.century}),b=this.buildDates(m,this.props.service.datesList(n,a)),g=s.createElement(s.Fragment,null,s.createElement(C.Header,{key:"calendar-view-list-header",currentDate:w,min:this.props.min,max:this.props.max,activeView:this.props.activeView,bus:this.props.bus,service:this.props.service,headerTitle:this.props.headerTitle,header:this.props.header,commands:s.createElement(s.Fragment,null,s.createElement(I.TodayCommand,{min:this.props.min,max:this.props.max,onClick:this.handleTodayClick,disabled:!this.todayIsInRange,tabIndex:this.props.tabIndex}))}),this.props.activeView===l.CalendarViewEnum.month&&this.buildMonthView(m,this.weekNames),s.createElement(x.Virtualization,{key:"calendar-view-list-content",skip:t,take:this.take,total:i,itemHeight:this.viewHeight,topOffset:this.viewOffset,bottomOffset:this.bottomOffset,scrollOffsetSize:this.viewOffset,maxScrollDifference:this.viewHeight,onScroll:this.props.onScroll,onScrollAction:this.handleScrollAction,onMount:this.handleVirtualizationMount,children:b,tabIndex:this.props.tabIndex}));return s.createElement("div",{ref:D=>{this._element=D},className:k},this.props.dom.didCalculate?g:null)}};c.propTypes={activeView:r.number.isRequired,bottomOffset:r.number,cellUID:r.string.isRequired,focusedDate:r.instanceOf(Date).isRequired,max:r.instanceOf(Date).isRequired,min:r.instanceOf(Date).isRequired,onChange:r.func,showWeekNumbers:r.bool,smoothScroll:r.bool,take:r.number,value:r.instanceOf(Date),viewHeight:r.number,viewOffset:r.number,weekDaysFormat:r.oneOf(["short","abbreviated","narrow"]),tabIndex:r.number},c.defaultProps={take:O,showWeekNumbers:!1,weekDaysFormat:"short",smoothScroll:!0};let u=c;f.registerForIntl(u);exports.ViewList=u;
|
|
@@ -14,13 +14,13 @@ import { provideIntlService as y, registerForIntl as S } from "@progress/kendo-r
|
|
|
14
14
|
import { Virtualization as V } from "../../virtualization/Virtualization.mjs";
|
|
15
15
|
import { View as I } from "./View.mjs";
|
|
16
16
|
import { Header as T } from "./Header.mjs";
|
|
17
|
-
import { WeekNamesService as
|
|
18
|
-
import { dateInRange as u,
|
|
17
|
+
import { WeekNamesService as C } from "../services/WeekNamesService.mjs";
|
|
18
|
+
import { dateInRange as u, isInRange as E, getToday as N } from "../../utils.mjs";
|
|
19
19
|
import { CalendarViewEnum as n } from "../models/CalendarViewEnum.mjs";
|
|
20
|
-
import { TodayCommand as
|
|
21
|
-
const
|
|
22
|
-
constructor(
|
|
23
|
-
super(
|
|
20
|
+
import { TodayCommand as O } from "./TodayCommand.mjs";
|
|
21
|
+
const H = 5, h = class h extends s.Component {
|
|
22
|
+
constructor(l) {
|
|
23
|
+
super(l), this.virtualization = null, this.calendarView = null, this.table = null, this.intl = null, this.bottomOffset = 0, this.viewOffset = 0, this.viewHeight = 0, this._element = null, this.isActive = !1, this.animateToIndex = !0, this.shouldScroll = !1, this.weekService = null, this.focusActiveDate = () => {
|
|
24
24
|
if (!this._element)
|
|
25
25
|
return;
|
|
26
26
|
const e = this._element.querySelector("td.k-focus"), t = this._element.querySelector(".k-state-pending-focus");
|
|
@@ -116,28 +116,26 @@ const z = 5, l = class l extends s.Component {
|
|
|
116
116
|
return this._element;
|
|
117
117
|
}
|
|
118
118
|
get weekNames() {
|
|
119
|
-
this.intl = y(this), this.weekService = new
|
|
120
|
-
const h = this.weekService.getWeekNames(this.weekNumber, this.props.weekDaysFormat), e = C(h, this.intl.firstDay());
|
|
121
|
-
return this.weekNumber ? [""].concat(e) : e;
|
|
119
|
+
return this.intl = y(this), this.weekService = new C(this.intl), this.weekService.getWeekNames(this.weekNumber, this.props.weekDaysFormat);
|
|
122
120
|
}
|
|
123
121
|
get weekNumber() {
|
|
124
122
|
return !!(this.props.showWeekNumbers && this.props.activeView === n.month);
|
|
125
123
|
}
|
|
126
124
|
get take() {
|
|
127
|
-
return this.props.take !== void 0 ? this.props.take :
|
|
125
|
+
return this.props.take !== void 0 ? this.props.take : h.defaultProps.take;
|
|
128
126
|
}
|
|
129
127
|
get animate() {
|
|
130
128
|
return !!(this.props.smoothScroll && this.animateToIndex);
|
|
131
129
|
}
|
|
132
130
|
get todayIsInRange() {
|
|
133
|
-
return E(
|
|
131
|
+
return E(N(), d(this.props.min), d(this.props.max));
|
|
134
132
|
}
|
|
135
|
-
componentDidUpdate(
|
|
133
|
+
componentDidUpdate(l, e) {
|
|
136
134
|
this.shouldScroll = !1, this.indexToScroll !== void 0 && this.virtualization && this.virtualization[this.animate ? "animateToIndex" : "scrollToIndex"](this.indexToScroll), this.isActive && this.focusActiveDate(), this.lastView = this.props.activeView, this.indexToScroll = void 0;
|
|
137
135
|
}
|
|
138
136
|
render() {
|
|
139
137
|
this.calculateHeights();
|
|
140
|
-
const
|
|
138
|
+
const l = this.lastView !== this.props.activeView, e = u(this.props.focusedDate, this.props.min, this.props.max), t = l ? this.props.service.skip(e, this.props.min) : this.state.skip, i = this.props.service.total(this.props.min, this.props.max), a = this.getTake(t, i), r = this.props.service.addToDate(this.props.min, t), v = this.props.service.addToDate(this.props.min, this.state.index), c = new Array(this.props.service.rowLength(this.weekNumber)).fill(""), m = this.props.activeView !== this.lastView;
|
|
141
139
|
this.animateToIndex = !m, (m || !x(this.lastFocus, e) || this.shouldScroll || !this.props.shouldScroll || this.props.shouldScroll()) && (this.indexToScroll = this.props.service.skip(e, this.props.min)), this.lastFocus = e;
|
|
142
140
|
const f = g(
|
|
143
141
|
"k-calendar-view k-vstack",
|
|
@@ -147,7 +145,7 @@ const z = 5, l = class l extends s.Component {
|
|
|
147
145
|
"k-calendar-decadeview": this.props.activeView === n.decade,
|
|
148
146
|
"k-calendar-centuryview": this.props.activeView === n.century
|
|
149
147
|
}
|
|
150
|
-
), w = this.buildDates(
|
|
148
|
+
), w = this.buildDates(c, this.props.service.datesList(r, a)), k = /* @__PURE__ */ s.createElement(s.Fragment, null, /* @__PURE__ */ s.createElement(
|
|
151
149
|
T,
|
|
152
150
|
{
|
|
153
151
|
key: "calendar-view-list-header",
|
|
@@ -160,7 +158,7 @@ const z = 5, l = class l extends s.Component {
|
|
|
160
158
|
headerTitle: this.props.headerTitle,
|
|
161
159
|
header: this.props.header,
|
|
162
160
|
commands: /* @__PURE__ */ s.createElement(s.Fragment, null, /* @__PURE__ */ s.createElement(
|
|
163
|
-
|
|
161
|
+
O,
|
|
164
162
|
{
|
|
165
163
|
min: this.props.min,
|
|
166
164
|
max: this.props.max,
|
|
@@ -170,7 +168,7 @@ const z = 5, l = class l extends s.Component {
|
|
|
170
168
|
}
|
|
171
169
|
))
|
|
172
170
|
}
|
|
173
|
-
), this.props.activeView === n.month && this.buildMonthView(
|
|
171
|
+
), this.props.activeView === n.month && this.buildMonthView(c, this.weekNames), /* @__PURE__ */ s.createElement(
|
|
174
172
|
V,
|
|
175
173
|
{
|
|
176
174
|
key: "calendar-view-list-content",
|
|
@@ -201,7 +199,7 @@ const z = 5, l = class l extends s.Component {
|
|
|
201
199
|
);
|
|
202
200
|
}
|
|
203
201
|
};
|
|
204
|
-
|
|
202
|
+
h.propTypes = {
|
|
205
203
|
activeView: o.number.isRequired,
|
|
206
204
|
bottomOffset: o.number,
|
|
207
205
|
cellUID: o.string.isRequired,
|
|
@@ -217,14 +215,14 @@ l.propTypes = {
|
|
|
217
215
|
viewOffset: o.number,
|
|
218
216
|
weekDaysFormat: o.oneOf(["short", "abbreviated", "narrow"]),
|
|
219
217
|
tabIndex: o.number
|
|
220
|
-
},
|
|
221
|
-
take:
|
|
218
|
+
}, h.defaultProps = {
|
|
219
|
+
take: H,
|
|
222
220
|
showWeekNumbers: !1,
|
|
223
221
|
weekDaysFormat: "short",
|
|
224
222
|
smoothScroll: !0
|
|
225
223
|
};
|
|
226
|
-
let
|
|
227
|
-
S(
|
|
224
|
+
let p = h;
|
|
225
|
+
S(p);
|
|
228
226
|
export {
|
|
229
|
-
|
|
227
|
+
p as ViewList
|
|
230
228
|
};
|
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"),_=require("@progress/kendo-react-popup"),I=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),U=require("@progress/kendo-svg-icons"),j=require("../package-metadata.js"),$=require("../dateinput/DateInput.js"),H=require("../calendar/components/Calendar.js"),m=require("../utils.js"),D=require("../messages/index.js"),q=require("@progress/kendo-react-intl"),X=require("./ToggleButton.js"),Z=require("../common/PickerWrap.js"),G=require("../hooks/usePickerFloatingLabel.js"),J=require("@progress/kendo-react-layout"),Q=require("../common/AdaptiveMode.js"),Y=require("../common/constants.js");function ee(l){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>l[t]})}}return i.default=l,Object.freeze(i)}const r=ee(W),o=class o extends r.Component{constructor(i){super(i),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,s)=>t.value!==void 0?t.value:s.value,this.nextShow=(t,s)=>t.show!==void 0?t.show:s.show,this.renderPopup=()=>{const{disabled:t,min:s,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),C={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},c={disabled:t,value:y,min:s,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,{...C},r.createElement(this.calendarComp,{_ref:this.setCalendarRef,...c}))},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:t};return r.createElement(Q.AdaptiveMode,{...s},r.createElement(J.ActionSheetContent,{className:"!k-overflow-hidden"},this.renderPopup()))},this.handleInputValueChange=t=>{this.handleValueChange(t.value,t)},this.handleCalendarValueChange=t=>{const s=this.mergeTime(t.value);this.handleValueChange(s,t)},this.handleValueChange=(t,s)=>{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:s.syntheticEvent,nativeEvent:s.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.handleIconClick=()=>{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===n.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(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(j.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<=Y.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get dateInput(){return this._dateInput.current}get calendar(){return this._calendar}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?I.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 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 i=m.isInDateRange(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;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:o.defaultProps.required}componentDidMount(){var i;this.observerResize=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this._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 i;clearTimeout(this.nextTickId),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:i=o.defaultProps.size,rounded:t=o.defaultProps.rounded,fillMode:s=o.defaultProps.fillMode,disabled:a,tabIndex:g,title:f,id:d,format:v,formatPlaceholder:w,min:b,max:h,className:y,width:p,name:C,validationMessage:c,required:E,validityStyles:R,ariaLabelledBy:z,ariaDescribedBy:F,ariaLabel:N,placeholder:V,label:k,popupSettings:te,defaultValue:ie,defaultShow:se,value:oe,popup:ae,weekNumber:ne,dateInput:re,calendar:le,toggleButton:ue,onChange:de,onBlur:he,onFocus:pe,show:ce,onOpen:me,pickerWrap:ge,adaptive:fe,adaptiveTitle:ve,valid:we,visited:be,touched:ye,modified:Ce,...O}=this.props,A=this.value,S=!this.validityStyles||this.validity.valid,L={disabled:a,format:v,formatPlaceholder:w,id:d,ariaLabelledBy:z,ariaDescribedBy:F,ariaLabel:N,max:h,min:b,name:C,onChange:this.handleInputValueChange,required:E,tabIndex:this.show?-1:g,title:f,valid:this.validity.valid,validationMessage:c,validityStyles:R,value:A,label:void 0,placeholder:this.state.focused?null:V,ariaExpanded:this.show,size:null,fillMode:null,rounded:null},M=q.provideLocalizationService(this).toLanguageString(D.toggleCalendar,D.messages[D.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",{...k?{}:O,ref:K=>{this._element=K},className:n.classNames("k-input","k-datepicker",{[`k-input-${n.kendoThemeMaps.sizeMap[i]||i}`]:i,[`k-rounded-${n.kendoThemeMaps.roundedMap[t]||t}`]:t,[`k-input-${s}`]:s,"k-invalid":!S,"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,...L}),r.createElement(this.toggleButtonComp,{type:"button",icon:"calendar",svgIcon:U.calendarIcon,title:M,className:"k-input-button",rounded:null,onClick:this.mobileMode?void 0:this.handleIconClick,"aria-label":M,onMouseDown:this.handleIconMouseDown}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup()));return k?r.createElement(G.PickerFloatingLabel,{dateInput:this._dateInput,label:k,editorId:d,editorValid:S,editorDisabled:a,children:P,style:{width:p},...O}):P}setShow(i){const{onOpen:t,onClose:s}=this.props;this.show!==i&&(this.setState({show:i}),i&&t&&t.call(void 0,{target:this}),!i&&s&&s.call(void 0,{target:this}))}mergeTime(i){return this.value&&i?m.setTime(i,this.value):i}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}calculateMedia(i){for(let t of i)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},o.defaultProps={defaultShow:!1,defaultValue:null,dateInput:$.DateInput,calendar:H.Calendar,toggleButton:X.ToggleButton,popup:_.Popup,pickerWrap:Z.PickerWrap,disabled:!1,format:"d",max:m.MAX_DATE,min:m.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,required:!1,validityStyles:!0,size:"medium",rounded:"medium",fillMode:"solid"};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
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),e=require("prop-types"),_=require("@progress/kendo-react-popup"),I=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),U=require("@progress/kendo-svg-icons"),j=require("../package-metadata.js"),$=require("../dateinput/DateInput.js"),H=require("../calendar/components/Calendar.js"),m=require("../utils.js"),D=require("../messages/index.js"),q=require("@progress/kendo-react-intl"),X=require("./ToggleButton.js"),Z=require("../common/PickerWrap.js"),G=require("../hooks/usePickerFloatingLabel.js"),J=require("@progress/kendo-react-layout"),Q=require("../common/AdaptiveMode.js"),Y=require("../common/constants.js");function ee(l){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const t in l)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(l,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>l[t]})}}return i.default=l,Object.freeze(i)}const r=ee(W),o=class o extends r.Component{constructor(i){super(i),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,s)=>t.value!==void 0?t.value:s.value,this.nextShow=(t,s)=>t.show!==void 0?t.show:s.show,this.renderPopup=()=>{const{disabled:t,min:s,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),C={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},c={disabled:t,value:y,min:s,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,{...C},r.createElement(this.calendarComp,{_ref:this.setCalendarRef,...c}))},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:t};return r.createElement(Q.AdaptiveMode,{...s},r.createElement(J.ActionSheetContent,{className:"!k-overflow-hidden"},this.renderPopup()))},this.handleInputValueChange=t=>{this.handleValueChange(t.value,t)},this.handleCalendarValueChange=t=>{const s=this.mergeTime(t.value);this.handleValueChange(s,t)},this.handleValueChange=(t,s)=>{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:s.syntheticEvent,nativeEvent:s.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.handleIconClick=()=>{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===n.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(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(j.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<=Y.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}get dateInput(){return this._dateInput.current}get calendar(){return this._calendar}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?I.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 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 i=m.isInDateRange(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;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:o.defaultProps.required}componentDidMount(){var i;this.observerResize=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this._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 i;clearTimeout(this.nextTickId),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:i=o.defaultProps.size,rounded:t=o.defaultProps.rounded,fillMode:s=o.defaultProps.fillMode,disabled:a,tabIndex:g,title:f,id:d,format:v,formatPlaceholder:w,min:b,max:h,className:y,width:p,name:C,validationMessage:c,required:E,validityStyles:R,ariaLabelledBy:z,ariaDescribedBy:F,ariaLabel:N,placeholder:V,label:k,popupSettings:te,defaultValue:ie,defaultShow:se,value:oe,popup:ae,weekNumber:ne,dateInput:re,calendar:le,toggleButton:ue,onChange:de,onBlur:he,onFocus:pe,show:ce,onOpen:me,pickerWrap:ge,adaptive:fe,adaptiveTitle:ve,valid:we,visited:be,touched:ye,modified:Ce,...O}=this.props,A=this.value,S=!this.validityStyles||this.validity.valid,L={disabled:a,format:v,formatPlaceholder:w,id:d,ariaLabelledBy:z,ariaDescribedBy:F,ariaLabel:N,max:h,min:b,name:C,onChange:this.handleInputValueChange,required:E,tabIndex:this.show?-1:g,title:f,valid:this.validity.valid,validationMessage:c,validityStyles:R,value:A,label:void 0,placeholder:this.state.focused?null:V,ariaExpanded:this.show,size:null,fillMode:null,rounded:null},M=q.provideLocalizationService(this).toLanguageString(D.toggleCalendar,D.messages[D.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",{...k?{}:O,ref:K=>{this._element=K},className:n.classNames("k-input","k-datepicker",{[`k-input-${n.kendoThemeMaps.sizeMap[i]||i}`]:i,[`k-rounded-${n.kendoThemeMaps.roundedMap[t]||t}`]:t,[`k-input-${s}`]:s,"k-invalid":!S,"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,...L}),r.createElement(this.toggleButtonComp,{type:"button",icon:"calendar",svgIcon:U.calendarIcon,title:M,className:"k-input-button",rounded:null,onClick:this.mobileMode?void 0:this.handleIconClick,"aria-label":M,fillMode:s,onMouseDown:this.handleIconMouseDown}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup()));return k?r.createElement(G.PickerFloatingLabel,{dateInput:this._dateInput,label:k,editorId:d,editorValid:S,editorDisabled:a,children:P,style:{width:p},...O}):P}setShow(i){const{onOpen:t,onClose:s}=this.props;this.show!==i&&(this.setState({show:i}),i&&t&&t.call(void 0,{target:this}),!i&&s&&s.call(void 0,{target:this}))}mergeTime(i){return this.value&&i?m.setTime(i,this.value):i}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}calculateMedia(i){for(let t of i)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},o.defaultProps={defaultShow:!1,defaultValue:null,dateInput:$.DateInput,calendar:H.Calendar,toggleButton:X.ToggleButton,popup:_.Popup,pickerWrap:Z.PickerWrap,disabled:!1,format:"d",max:m.MAX_DATE,min:m.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,required:!1,validityStyles:!0,size:"medium",rounded:"medium",fillMode:"solid"};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;
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react"),e=require("prop-types"),V=require("@progress/kendo-react-popup"),D=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),K=require("@progress/kendo-svg-icons"),j=require("../dateinput/DateInput.js"),U=require("@progress/kendo-react-buttons"),$=require("../package-metadata.js"),p=require("../utils.js"),W=require("../common/constants.js"),l=require("../messages/index.js"),m=require("@progress/kendo-react-intl"),X=require("./DateTimeSelector.js"),H=require("../timepicker/utils.js"),Z=require("../hooks/usePickerFloatingLabel.js"),G=require("../common/AdaptiveMode.js"),J=require("@progress/kendo-react-layout");function Q(h){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const i in h)if(i!=="default"){const s=Object.getOwnPropertyDescriptor(h,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:()=>h[i]})}}return t.default=h,Object.freeze(t)}const r=Q(_),o=class o 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:c,calendar:u,cancelButton:d,weekNumber:f,focusedDate:v}=this.props;return r.createElement(X.DateTimeSelector,{ref:w=>{this._dateTimeSelector=w},cancelButton:d,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:c,calendar:u,mobileMode:this.mobileMode,footerActions:!this.mobileMode})},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]),c={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:i,footer:{cancelText:s,onCancel:u=>{var d;return(d=this._dateTimeSelector)==null?void 0:d.handleReject(u)},applyText:a,onApply:u=>{var d;return(d=this._dateTimeSelector)==null?void 0:d.handleAccept(u)}}};return r.createElement(G.AdaptiveMode,{...c},r.createElement(J.ActionSheetContent,{className:"!k-overflow-hidden"},this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=i=>{this.setState({value:D.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===n.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(a===n.Keys.up||a===n.Keys.down)&&(i.preventDefault(),i.stopPropagation(),this.shouldFocusDateInput=a===n.Keys.up,this.setShow(a===n.Keys.down))},this.dateInputElement=()=>this.dateInput&&this.dateInput.element||this.element&&this.element.querySelector(".k-dateinput > input.k-input-inner"),n.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(n.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?D.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<=W.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}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 validity(){const t=p.isInDateRange(this.value,this.min,this.max)&&H.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:o.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:o.defaultProps.required}get dateInputComp(){return this.props.dateInput||o.defaultProps.dateInput}componentDidMount(){var t;this.observerResize=n.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=o.defaultProps.size,rounded:i=o.defaultProps.rounded,fillMode:s=o.defaultProps.fillMode,disabled:a,tabIndex:c,title:u,id:d,format:f,formatPlaceholder:v,min:w,max:k,className:T,width:M,name:O,validationMessage:P,required:C,validityStyles:x,minTime:q,maxTime:E,ariaLabelledBy:R,ariaDescribedBy:z,popup:F=V.Popup}=this.props,b=!this.validityStyles||this.validity.valid,A={id:d,ariaLabelledBy:R,ariaDescribedBy:z,format:f,formatPlaceholder:v,disabled:a,title:u,validityStyles:x,validationMessage:P,required:C,min:w,max:k,minTime:q,maxTime:E,name:O,tabIndex:this.show?-1:c,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},y=r.createElement(n.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:B,onBlur:L})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:N=>{this._element=N},className:n.classNames("k-input","k-datetimepicker",{[`k-input-${n.kendoThemeMaps.sizeMap[t]||t}`]:t,[`k-rounded-${n.kendoThemeMaps.roundedMap[i]||i}`]:i,[`k-input-${s}`]:s,"k-invalid":!b,"k-required":this.required,"k-disabled":this.props.disabled},T),onKeyDown:this.handleKeyDown,style:{width:M},onFocus:this.mobileMode?void 0:B,onBlur:L,onClick:this.mobileMode?this.handleDateIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,readonly:this.mobileMode,...A}),r.createElement(U.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:K.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleDateIconClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:"k-input-button",rounded:null,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(F,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:"k-datetime-container k-reset",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(Z.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:d,editorValid:b,editorDisabled:this.props.disabled,children:y,style:{width:this.props.width}}):y}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})}};o.displayName="DateTimePicker",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,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"])},o.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"g",max:p.MAX_DATE,min:p.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,required:!1,validityStyles:!0,cancelButton:!0,dateInput:j.DateInput,size:"medium",rounded:"medium",fillMode:"solid"};let g=o;const S=n.createPropsContext(),I=n.withIdHOC(n.withPropsContext(S,g));I.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=I;exports.DateTimePickerPropsContext=S;exports.DateTimePickerWithoutContext=g;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react"),e=require("prop-types"),V=require("@progress/kendo-react-popup"),D=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),K=require("@progress/kendo-svg-icons"),j=require("../dateinput/DateInput.js"),U=require("@progress/kendo-react-buttons"),$=require("../package-metadata.js"),p=require("../utils.js"),W=require("../common/constants.js"),l=require("../messages/index.js"),m=require("@progress/kendo-react-intl"),X=require("./DateTimeSelector.js"),H=require("../timepicker/utils.js"),Z=require("../hooks/usePickerFloatingLabel.js"),G=require("../common/AdaptiveMode.js"),J=require("@progress/kendo-react-layout");function Q(h){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const i in h)if(i!=="default"){const s=Object.getOwnPropertyDescriptor(h,i);Object.defineProperty(t,i,s.get?s:{enumerable:!0,get:()=>h[i]})}}return t.default=h,Object.freeze(t)}const r=Q(_),o=class o 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:c,calendar:u,cancelButton:d,weekNumber:f,focusedDate:v}=this.props;return r.createElement(X.DateTimeSelector,{ref:w=>{this._dateTimeSelector=w},cancelButton:d,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:c,calendar:u,mobileMode:this.mobileMode,footerActions:!this.mobileMode})},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]),c={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:i,footer:{cancelText:s,onCancel:u=>{var d;return(d=this._dateTimeSelector)==null?void 0:d.handleReject(u)},applyText:a,onApply:u=>{var d;return(d=this._dateTimeSelector)==null?void 0:d.handleAccept(u)}}};return r.createElement(G.AdaptiveMode,{...c},r.createElement(J.ActionSheetContent,{className:"!k-overflow-hidden"},this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=i=>{this.setState({value:D.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===n.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(a===n.Keys.up||a===n.Keys.down)&&(i.preventDefault(),i.stopPropagation(),this.shouldFocusDateInput=a===n.Keys.up,this.setShow(a===n.Keys.down))},this.dateInputElement=()=>this.dateInput&&this.dateInput.element||this.element&&this.element.querySelector(".k-dateinput > input.k-input-inner"),n.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(n.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?D.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<=W.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}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 validity(){const t=p.isInDateRange(this.value,this.min,this.max)&&H.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:o.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:o.defaultProps.required}get dateInputComp(){return this.props.dateInput||o.defaultProps.dateInput}componentDidMount(){var t;this.observerResize=n.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=o.defaultProps.size,rounded:i=o.defaultProps.rounded,fillMode:s=o.defaultProps.fillMode,disabled:a,tabIndex:c,title:u,id:d,format:f,formatPlaceholder:v,min:w,max:k,className:T,width:M,name:O,validationMessage:P,required:C,validityStyles:x,minTime:q,maxTime:E,ariaLabelledBy:R,ariaDescribedBy:z,popup:F=V.Popup}=this.props,b=!this.validityStyles||this.validity.valid,A={id:d,ariaLabelledBy:R,ariaDescribedBy:z,format:f,formatPlaceholder:v,disabled:a,title:u,validityStyles:x,validationMessage:P,required:C,min:w,max:k,minTime:q,maxTime:E,name:O,tabIndex:this.show?-1:c,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},y=r.createElement(n.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:B,onBlur:L})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:N=>{this._element=N},className:n.classNames("k-input","k-datetimepicker",{[`k-input-${n.kendoThemeMaps.sizeMap[t]||t}`]:t,[`k-rounded-${n.kendoThemeMaps.roundedMap[i]||i}`]:i,[`k-input-${s}`]:s,"k-invalid":!b,"k-required":this.required,"k-disabled":this.props.disabled},T),onKeyDown:this.handleKeyDown,style:{width:M},onFocus:this.mobileMode?void 0:B,onBlur:L,onClick:this.mobileMode?this.handleDateIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,readonly:this.mobileMode,...A}),r.createElement(U.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:K.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleDateIconClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:"k-input-button",rounded:null,fillMode:s,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(F,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:"k-datetime-container k-reset",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(Z.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:d,editorValid:b,editorDisabled:this.props.disabled,children:y,style:{width:this.props.width}}):y}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})}};o.displayName="DateTimePicker",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,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"])},o.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"g",max:p.MAX_DATE,min:p.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,required:!1,validityStyles:!0,cancelButton:!0,dateInput:j.DateInput,size:"medium",rounded:"medium",fillMode:"solid"};let g=o;const S=n.createPropsContext(),I=n.withIdHOC(n.withPropsContext(S,g));I.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=I;exports.DateTimePickerPropsContext=S;exports.DateTimePickerWithoutContext=g;
|