@progress/kendo-react-dateinputs 9.2.0-develop.4 → 9.2.0-develop.5
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/common/AdaptiveMode.js +1 -1
- package/common/AdaptiveMode.mjs +27 -27
- package/datepicker/DatePicker.js +1 -1
- package/datepicker/DatePicker.mjs +74 -69
- package/daterangepicker/DateRangePicker.js +1 -1
- package/daterangepicker/DateRangePicker.mjs +20 -19
- package/datetimepicker/DateTimePicker.js +1 -1
- package/datetimepicker/DateTimePicker.mjs +60 -57
- package/dist/cdn/js/kendo-react-dateinputs.js +1 -1
- package/index.d.mts +22 -1
- package/index.d.ts +22 -1
- package/package-metadata.mjs +1 -1
- package/package.json +7 -7
- package/timepicker/TimePicker.js +1 -1
- package/timepicker/TimePicker.mjs +35 -34
package/common/AdaptiveMode.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 y=require("react"),r=require("@progress/kendo-react-layout"),x=require("@progress/kendo-svg-icons"),i=require("@progress/kendo-react-buttons"),h=require("@progress/kendo-react-common");function k(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const a in t)if(a!=="default"){const o=Object.getOwnPropertyDescriptor(t,a);Object.defineProperty(e,a,o.get?o:{enumerable:!0,get:()=>t[a]})}}return e.default=t,Object.freeze(e)}const n=k(y),C=t=>{const{footer:e,windowWidth:a=0,mobileFilter:o,children:s,navigatable:d,navigatableElements:u,expand:b,animation:p,title:m,subTitle:f,onClose:c}=t,g=()=>n.createElement(i.Button,{tabIndex:0,"aria-label":"Cancel","aria-disabled":"false",type:"button",fillMode:"flat",icon:"x",svgIcon:x.xIcon,onClick:c}),l=h.useAdaptiveModeContext(),v={navigatable:d||!1,navigatableElements:u||[],expand:b,animation:p!==!1,actions:g(),filter:o,onClose:c,animationStyles:l&&a<=l.small?{top:0,width:"100%",height:"100%"}:void 0,title:m,subTitle:f,className:"k-adaptive-actionsheet",position:l&&a<=l.small?"fullscreen":void 0};return n.createElement(r.ActionSheet,{...v},s,e&&n.createElement(r.ActionSheetFooter,{className:"k-actions k-actions-stretched"},n.createElement(i.Button,{size:"large",tabIndex:0,"aria-label":e.cancelText,"aria-disabled":"false",type:"button",onClick:e.onCancel},e.cancelText),n.createElement(i.Button,{tabIndex:0,themeColor:"primary",size:"large","aria-label":e.applyText,"aria-disabled":"false",type:"button",onClick:e.onApply},e.applyText)))};exports.AdaptiveMode=C;
|
package/common/AdaptiveMode.mjs
CHANGED
|
@@ -7,14 +7,14 @@
|
|
|
7
7
|
*/
|
|
8
8
|
"use client";
|
|
9
9
|
import * as t from "react";
|
|
10
|
-
import { ActionSheet as
|
|
11
|
-
import { xIcon as
|
|
12
|
-
import { Button as
|
|
13
|
-
import {
|
|
14
|
-
const I = (
|
|
10
|
+
import { ActionSheet as u, ActionSheetFooter as v } from "@progress/kendo-react-layout";
|
|
11
|
+
import { xIcon as C } from "@progress/kendo-svg-icons";
|
|
12
|
+
import { Button as n } from "@progress/kendo-react-buttons";
|
|
13
|
+
import { useAdaptiveModeContext as g } from "@progress/kendo-react-common";
|
|
14
|
+
const I = (i) => {
|
|
15
15
|
const {
|
|
16
16
|
footer: e,
|
|
17
|
-
windowWidth:
|
|
17
|
+
windowWidth: o = 0,
|
|
18
18
|
mobileFilter: r,
|
|
19
19
|
children: s,
|
|
20
20
|
navigatable: c,
|
|
@@ -23,35 +23,35 @@ const I = (l) => {
|
|
|
23
23
|
animation: p,
|
|
24
24
|
title: b,
|
|
25
25
|
subTitle: f,
|
|
26
|
-
onClose:
|
|
27
|
-
} =
|
|
26
|
+
onClose: l
|
|
27
|
+
} = i, x = () => /* @__PURE__ */ t.createElement(
|
|
28
|
+
n,
|
|
29
|
+
{
|
|
30
|
+
tabIndex: 0,
|
|
31
|
+
"aria-label": "Cancel",
|
|
32
|
+
"aria-disabled": "false",
|
|
33
|
+
type: "button",
|
|
34
|
+
fillMode: "flat",
|
|
35
|
+
icon: "x",
|
|
36
|
+
svgIcon: C,
|
|
37
|
+
onClick: l
|
|
38
|
+
}
|
|
39
|
+
), a = g(), h = {
|
|
28
40
|
navigatable: c || !1,
|
|
29
41
|
navigatableElements: m || [],
|
|
30
42
|
expand: d,
|
|
31
43
|
animation: p !== !1,
|
|
32
|
-
actions:
|
|
33
|
-
a,
|
|
34
|
-
{
|
|
35
|
-
tabIndex: 0,
|
|
36
|
-
"aria-label": "Cancel",
|
|
37
|
-
"aria-disabled": "false",
|
|
38
|
-
type: "button",
|
|
39
|
-
fillMode: "flat",
|
|
40
|
-
icon: "x",
|
|
41
|
-
svgIcon: A,
|
|
42
|
-
onClick: o
|
|
43
|
-
}
|
|
44
|
-
),
|
|
44
|
+
actions: x(),
|
|
45
45
|
filter: r,
|
|
46
|
-
onClose:
|
|
47
|
-
animationStyles:
|
|
46
|
+
onClose: l,
|
|
47
|
+
animationStyles: a && o <= a.small ? { top: 0, width: "100%", height: "100%" } : void 0,
|
|
48
48
|
title: b,
|
|
49
49
|
subTitle: f,
|
|
50
50
|
className: "k-adaptive-actionsheet",
|
|
51
|
-
position:
|
|
51
|
+
position: a && o <= a.small ? "fullscreen" : void 0
|
|
52
52
|
};
|
|
53
|
-
return /* @__PURE__ */ t.createElement(
|
|
54
|
-
|
|
53
|
+
return /* @__PURE__ */ t.createElement(u, { ...h }, s, e && /* @__PURE__ */ t.createElement(v, { className: "k-actions k-actions-stretched" }, /* @__PURE__ */ t.createElement(
|
|
54
|
+
n,
|
|
55
55
|
{
|
|
56
56
|
size: "large",
|
|
57
57
|
tabIndex: 0,
|
|
@@ -62,7 +62,7 @@ const I = (l) => {
|
|
|
62
62
|
},
|
|
63
63
|
e.cancelText
|
|
64
64
|
), /* @__PURE__ */ t.createElement(
|
|
65
|
-
|
|
65
|
+
n,
|
|
66
66
|
{
|
|
67
67
|
tabIndex: 0,
|
|
68
68
|
themeColor: "primary",
|
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 G=require("react"),e=require("prop-types"),J=require("@progress/kendo-react-popup"),I=require("@progress/kendo-date-math"),a=require("@progress/kendo-react-common"),Q=require("@progress/kendo-svg-icons"),ee=require("../package-metadata.js"),te=require("../dateinput/DateInput.js"),se=require("../calendar/components/Calendar.js"),m=require("../utils.js"),k=require("../messages/index.js"),x=require("@progress/kendo-react-intl"),ie=require("./ToggleButton.js"),oe=require("../common/PickerWrap.js"),ae=require("../hooks/usePickerFloatingLabel.js"),ne=require("@progress/kendo-react-layout"),re=require("../common/AdaptiveMode.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(G),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,title:this.props.adaptiveTitle,windowWidth:t};return r.createElement(re.AdaptiveMode,{...i},r.createElement(ne.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(ee.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<=a.ADAPTIVE_MEDIUM_BREAKPOINT&&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:N,placeholder:V,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:Oe,valid:Me,autoFocus:A,inputAttributes:K,visited:Se,touched:Pe,modified:Te,autoFill:W,twoDigitYearMax:_,enableMouseWheel:L,autoCorrectParts:U,autoSwitchParts:j,autoSwitchKeys:$,allowCaretMode:H,...O}=this.props,X=this.value,M=!this.validityStyles||this.validity.valid,Y={disabled:n,format:v,formatPlaceholder:w,id:d,ariaLabelledBy:R,ariaDescribedBy:z,ariaLabel:N,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:X,label:void 0,placeholder:this.state.focused?null:V,ariaExpanded:this.show,size:null,fillMode:null,rounded:null,autoFill:W,twoDigitYearMax:_,enableMouseWheel:L,autoCorrectParts:U,autoSwitchParts:j,autoSwitchKeys:$,allowCaretMode:H,inputAttributes:K},S=x.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:Z=>{this._element=Z},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",ariaExpanded:this.show,ariaControls:this._popupId,autoFocus:A,...Y}),r.createElement(this.toggleButtonComp,{type:"button",icon:"calendar",svgIcon:Q.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(ae.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,inputAttributes:e.object},o.defaultProps={defaultShow:!1,defaultValue:null,dateInput:te.DateInput,calendar:se.Calendar,toggleButton:ie.ToggleButton,popup:J.Popup,pickerWrap:oe.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 q=a.createPropsContext(),B=a.withIdHOC(a.withPropsContext(q,u));B.displayName="KendoReactDatePicker";x.registerForLocalization(u);exports.DatePicker=B;exports.DatePickerPropsContext=q;exports.DatePickerWithoutContext=u;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),e=require("prop-types"),J=require("@progress/kendo-react-popup"),k=require("@progress/kendo-date-math"),a=require("@progress/kendo-react-common"),Q=require("@progress/kendo-svg-icons"),ee=require("../package-metadata.js"),te=require("../dateinput/DateInput.js"),ie=require("../calendar/components/Calendar.js"),m=require("../utils.js"),I=require("../messages/index.js"),x=require("@progress/kendo-react-intl"),se=require("./ToggleButton.js"),oe=require("../common/PickerWrap.js"),ae=require("../hooks/usePickerFloatingLabel.js"),ne=require("@progress/kendo-react-layout"),re=require("../common/AdaptiveMode.js");function le(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=le(G),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:n,weekNumber:g,focusedDate:f,popupSettings:d}=this.props,{popupClass:v,...w}=d,b=this.show,h=this.value,y=h&&k.getDate(h),p=a.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,onMouseDownOutside:this.handleMouseDownOutside},c={disabled:t,value:y,min:s,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,{...C},r.createElement(this.calendarComp,{_ref:this.setCalendarRef,...c}))},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s={expand:this.show,onClose:this.handleBlur,title:this.props.adaptiveTitle,windowWidth:t};return r.createElement(re.AdaptiveMode,{...s},r.createElement(ne.ActionSheetContent,{overflowHidden:!0},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:k.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: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.togglePopup=()=>{this.setShow(!this.show)},this.handleMouseDownOutside=t=>{var s;(s=this.props.popupSettings)!=null&&s.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:s,keyCode:n}=t;if(n===a.Keys.esc&&this.show){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(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(ee.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(){var t;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((t=this.props._adaptiveMode)==null?void 0:t.medium)&&this.props.adaptive)}get 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?k.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,n=this.props.valid!==void 0?this.props.valid:s;return{customError:t,rangeOverflow:this.value&&this.max.getTime()<this.value.getTime()||!1,rangeUnderflow:this.value&&this.value.getTime()<this.min.getTime()||!1,valid:n,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:o.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}componentDidMount(){var i;this.observerResize=a.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:n,tabIndex:g,title:f,id:d,format:v,formatPlaceholder:w,min:b,max:h,className:y,width:p,name:C,validationMessage:c,required:F,validityStyles:R,ariaLabelledBy:E,ariaDescribedBy:z,ariaLabel:N,placeholder:V,label:D,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:Ce,onOpen:De,pickerWrap:ke,adaptive:Ie,adaptiveTitle:Me,valid:Oe,autoFocus:A,inputAttributes:_,visited:Se,touched:Pe,modified:Te,autoFill:K,twoDigitYearMax:W,enableMouseWheel:L,autoCorrectParts:j,autoSwitchParts:U,autoSwitchKeys:$,allowCaretMode:H,_adaptiveMode:xe,...M}=this.props,X=this.value,O=!this.validityStyles||this.validity.valid,Y={disabled:n,format:v,formatPlaceholder:w,id:d,ariaLabelledBy:E,ariaDescribedBy:z,ariaLabel:N,max:h,min:b,name:C,onChange:this.handleInputValueChange,required:F,tabIndex:this.show?-1:g,title:f,valid:this.validity.valid,validationMessage:c,validityStyles:R,value:X,label:void 0,placeholder:this.state.focused?null:V,ariaExpanded:this.show,size:null,fillMode:null,rounded:null,autoFill:K,twoDigitYearMax:W,enableMouseWheel:L,autoCorrectParts:j,autoSwitchParts:U,autoSwitchKeys:$,allowCaretMode:H,inputAttributes:_},S=x.provideLocalizationService(this).toLanguageString(I.toggleCalendar,I.messages[I.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",{...D?{}:M,ref:Z=>{this._element=Z},className:a.classNames("k-input","k-datepicker",{[`k-input-${a.kendoThemeMaps.sizeMap[i]||i}`]:i,[`k-rounded-${a.kendoThemeMaps.roundedMap[t]||t}`]:t,[`k-input-${s}`]:s,"k-invalid":!O,"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",ariaExpanded:this.show,ariaControls:this._popupId,autoFocus:A,...Y}),r.createElement(this.toggleButtonComp,{type:"button",icon:"calendar",svgIcon:Q.calendarIcon,title:S,className:"k-input-button",rounded:null,onClick:this.mobileMode?void 0:this.handleIconClick,"aria-label":S,fillMode:s,onMouseDown:this.handleIconMouseDown}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup()));return D?r.createElement(ae.PickerFloatingLabel,{dateInput:this._dateInput,label:D,editorId:d,editorValid:O,editorDisabled:n,children:P,style:{width:p},...M}):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(const 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,autoFocus:e.bool,inputAttributes:e.object},o.defaultProps={defaultShow:!1,defaultValue:null,dateInput:te.DateInput,calendar:ie.Calendar,toggleButton:se.ToggleButton,popup:J.Popup,pickerWrap:oe.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 q=a.createPropsContext(),B=a.withIdHOC(a.withPropsContext(q,a.withAdaptiveModeContext(u)));B.displayName="KendoReactDatePicker";x.registerForLocalization(u);exports.DatePicker=B;exports.DatePickerPropsContext=q;exports.DatePickerWithoutContext=u;
|
|
@@ -9,13 +9,13 @@
|
|
|
9
9
|
import * as n from "react";
|
|
10
10
|
import e from "prop-types";
|
|
11
11
|
import { Popup as Y } from "@progress/kendo-react-popup";
|
|
12
|
-
import { getDate as Z, cloneDate as
|
|
13
|
-
import { classNames as k, Keys as r, validatePackage as G, canUseDOM as P,
|
|
12
|
+
import { getDate as Z, cloneDate as O } from "@progress/kendo-date-math";
|
|
13
|
+
import { classNames as k, Keys as r, validatePackage as G, canUseDOM as P, AsyncFocusBlur as J, kendoThemeMaps as T, createPropsContext as Q, withIdHOC as ee, withPropsContext as te, withAdaptiveModeContext as ie } from "@progress/kendo-react-common";
|
|
14
14
|
import { calendarIcon as se } from "@progress/kendo-svg-icons";
|
|
15
15
|
import { packageMetadata as oe } from "../package-metadata.mjs";
|
|
16
16
|
import { DateInput as ae } from "../dateinput/DateInput.mjs";
|
|
17
17
|
import { Calendar as ne } from "../calendar/components/Calendar.mjs";
|
|
18
|
-
import { MAX_DATE as re, MIN_DATE as le, isInDateRange as
|
|
18
|
+
import { MAX_DATE as re, MIN_DATE as le, isInDateRange as de, setTime as ue } from "../utils.mjs";
|
|
19
19
|
import { toggleCalendar as x, messages as he } from "../messages/index.mjs";
|
|
20
20
|
import { provideLocalizationService as pe, registerForLocalization as ce } from "@progress/kendo-react-intl";
|
|
21
21
|
import { ToggleButton as me } from "./ToggleButton.mjs";
|
|
@@ -30,11 +30,11 @@ const o = class o extends n.Component {
|
|
|
30
30
|
}, this.setCalendarRef = (t) => {
|
|
31
31
|
this._calendar = t;
|
|
32
32
|
}, 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 = () => {
|
|
33
|
-
const { disabled: t, min: s, max: a, weekNumber: c, focusedDate: m, popupSettings: l } = this.props, { popupClass: f, ...g } = l, v = this.show,
|
|
33
|
+
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 = {
|
|
34
34
|
popupClass: "k-datepicker-popup",
|
|
35
35
|
show: v,
|
|
36
36
|
anchor: this._element,
|
|
37
|
-
className:
|
|
37
|
+
className: u,
|
|
38
38
|
id: this._popupId,
|
|
39
39
|
anchorAlign: {
|
|
40
40
|
horizontal: "left",
|
|
@@ -73,7 +73,7 @@ const o = class o extends n.Component {
|
|
|
73
73
|
this.handleValueChange(s, t);
|
|
74
74
|
}, this.handleValueChange = (t, s) => {
|
|
75
75
|
this.setState({
|
|
76
|
-
value:
|
|
76
|
+
value: O(t || void 0)
|
|
77
77
|
}), this.valueDuringOnChange = t, this.showDuringOnChange = !1, this.mobileMode || (this.shouldFocusDateInput = !0);
|
|
78
78
|
const { onChange: a } = this.props;
|
|
79
79
|
a && a.call(void 0, {
|
|
@@ -126,7 +126,8 @@ const o = class o extends n.Component {
|
|
|
126
126
|
* The mobile mode of the DatePicker.
|
|
127
127
|
*/
|
|
128
128
|
get mobileMode() {
|
|
129
|
-
|
|
129
|
+
var t;
|
|
130
|
+
return !!(this.state.windowWidth && this.props._adaptiveMode && this.state.windowWidth <= ((t = this.props._adaptiveMode) == null ? void 0 : t.medium) && this.props.adaptive);
|
|
130
131
|
}
|
|
131
132
|
/**
|
|
132
133
|
* Gets the DateInput component inside the DatePicker component.
|
|
@@ -145,7 +146,7 @@ const o = class o extends n.Component {
|
|
|
145
146
|
*/
|
|
146
147
|
get value() {
|
|
147
148
|
const i = this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.props.value !== void 0 ? this.props.value : this.state.value;
|
|
148
|
-
return i !== null ?
|
|
149
|
+
return i !== null ? O(i) : null;
|
|
149
150
|
}
|
|
150
151
|
/**
|
|
151
152
|
* Gets the popup state of the DatePickerWithoutContext.
|
|
@@ -184,7 +185,7 @@ const o = class o extends n.Component {
|
|
|
184
185
|
* Represents the validity state into which the DatePicker is set.
|
|
185
186
|
*/
|
|
186
187
|
get validity() {
|
|
187
|
-
const i =
|
|
188
|
+
const i = de(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;
|
|
188
189
|
return {
|
|
189
190
|
customError: t,
|
|
190
191
|
rangeOverflow: this.value && this.max.getTime() < this.value.getTime() || !1,
|
|
@@ -240,59 +241,60 @@ const o = class o extends n.Component {
|
|
|
240
241
|
format: f,
|
|
241
242
|
formatPlaceholder: g,
|
|
242
243
|
min: v,
|
|
243
|
-
max:
|
|
244
|
+
max: d,
|
|
244
245
|
className: w,
|
|
245
|
-
width:
|
|
246
|
+
width: u,
|
|
246
247
|
name: b,
|
|
247
248
|
validationMessage: h,
|
|
248
249
|
required: B,
|
|
249
|
-
validityStyles:
|
|
250
|
-
ariaLabelledBy:
|
|
251
|
-
ariaDescribedBy:
|
|
252
|
-
ariaLabel:
|
|
253
|
-
placeholder:
|
|
254
|
-
label:
|
|
255
|
-
popupSettings:
|
|
256
|
-
defaultValue:
|
|
257
|
-
defaultShow:
|
|
258
|
-
value:
|
|
250
|
+
validityStyles: F,
|
|
251
|
+
ariaLabelledBy: E,
|
|
252
|
+
ariaDescribedBy: z,
|
|
253
|
+
ariaLabel: V,
|
|
254
|
+
placeholder: N,
|
|
255
|
+
label: C,
|
|
256
|
+
popupSettings: ye,
|
|
257
|
+
defaultValue: De,
|
|
258
|
+
defaultShow: Ie,
|
|
259
|
+
value: Me,
|
|
259
260
|
popup: Se,
|
|
260
|
-
weekNumber:
|
|
261
|
+
weekNumber: Oe,
|
|
261
262
|
dateInput: ke,
|
|
262
263
|
calendar: Pe,
|
|
263
264
|
toggleButton: Te,
|
|
264
265
|
onChange: xe,
|
|
265
266
|
onBlur: Be,
|
|
266
|
-
onFocus:
|
|
267
|
-
show:
|
|
268
|
-
onOpen:
|
|
269
|
-
pickerWrap:
|
|
270
|
-
adaptive:
|
|
271
|
-
adaptiveTitle:
|
|
272
|
-
valid:
|
|
273
|
-
autoFocus:
|
|
274
|
-
inputAttributes:
|
|
267
|
+
onFocus: Fe,
|
|
268
|
+
show: Ee,
|
|
269
|
+
onOpen: ze,
|
|
270
|
+
pickerWrap: Ve,
|
|
271
|
+
adaptive: Ne,
|
|
272
|
+
adaptiveTitle: Re,
|
|
273
|
+
valid: Ae,
|
|
274
|
+
autoFocus: R,
|
|
275
|
+
inputAttributes: A,
|
|
275
276
|
// Removed to support direct use in Form Field component
|
|
276
277
|
visited: We,
|
|
277
|
-
touched:
|
|
278
|
-
modified:
|
|
278
|
+
touched: _e,
|
|
279
|
+
modified: qe,
|
|
279
280
|
autoFill: W,
|
|
280
|
-
twoDigitYearMax:
|
|
281
|
-
enableMouseWheel:
|
|
281
|
+
twoDigitYearMax: _,
|
|
282
|
+
enableMouseWheel: q,
|
|
282
283
|
autoCorrectParts: L,
|
|
283
|
-
autoSwitchParts:
|
|
284
|
+
autoSwitchParts: K,
|
|
284
285
|
autoSwitchKeys: U,
|
|
285
286
|
allowCaretMode: $,
|
|
286
|
-
|
|
287
|
-
|
|
287
|
+
_adaptiveMode: Le,
|
|
288
|
+
...y
|
|
289
|
+
} = this.props, H = this.value, D = !this.validityStyles || this.validity.valid, j = {
|
|
288
290
|
disabled: a,
|
|
289
291
|
format: f,
|
|
290
292
|
formatPlaceholder: g,
|
|
291
293
|
id: l,
|
|
292
|
-
ariaLabelledBy:
|
|
293
|
-
ariaDescribedBy:
|
|
294
|
-
ariaLabel:
|
|
295
|
-
max:
|
|
294
|
+
ariaLabelledBy: E,
|
|
295
|
+
ariaDescribedBy: z,
|
|
296
|
+
ariaLabel: V,
|
|
297
|
+
max: d,
|
|
296
298
|
min: v,
|
|
297
299
|
name: b,
|
|
298
300
|
onChange: this.handleInputValueChange,
|
|
@@ -301,27 +303,27 @@ const o = class o extends n.Component {
|
|
|
301
303
|
title: m,
|
|
302
304
|
valid: this.validity.valid,
|
|
303
305
|
validationMessage: h,
|
|
304
|
-
validityStyles:
|
|
306
|
+
validityStyles: F,
|
|
305
307
|
value: H,
|
|
306
308
|
label: void 0,
|
|
307
|
-
placeholder: this.state.focused ? null :
|
|
309
|
+
placeholder: this.state.focused ? null : N,
|
|
308
310
|
ariaExpanded: this.show,
|
|
309
311
|
size: null,
|
|
310
312
|
fillMode: null,
|
|
311
313
|
rounded: null,
|
|
312
314
|
autoFill: W,
|
|
313
|
-
twoDigitYearMax:
|
|
314
|
-
enableMouseWheel:
|
|
315
|
+
twoDigitYearMax: _,
|
|
316
|
+
enableMouseWheel: q,
|
|
315
317
|
autoCorrectParts: L,
|
|
316
|
-
autoSwitchParts:
|
|
318
|
+
autoSwitchParts: K,
|
|
317
319
|
autoSwitchKeys: U,
|
|
318
320
|
allowCaretMode: $,
|
|
319
|
-
inputAttributes:
|
|
320
|
-
},
|
|
321
|
+
inputAttributes: A
|
|
322
|
+
}, I = pe(this).toLanguageString(
|
|
321
323
|
x,
|
|
322
324
|
he[x]
|
|
323
|
-
),
|
|
324
|
-
|
|
325
|
+
), M = /* @__PURE__ */ n.createElement(
|
|
326
|
+
J,
|
|
325
327
|
{
|
|
326
328
|
onFocus: this.handleFocus,
|
|
327
329
|
onBlur: this.mobileMode ? void 0 : this.handleBlur,
|
|
@@ -331,7 +333,7 @@ const o = class o extends n.Component {
|
|
|
331
333
|
(S) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
|
|
332
334
|
"span",
|
|
333
335
|
{
|
|
334
|
-
...
|
|
336
|
+
...C ? {} : y,
|
|
335
337
|
ref: (X) => {
|
|
336
338
|
this._element = X;
|
|
337
339
|
},
|
|
@@ -342,14 +344,14 @@ const o = class o extends n.Component {
|
|
|
342
344
|
[`k-input-${T.sizeMap[i] || i}`]: i,
|
|
343
345
|
[`k-rounded-${T.roundedMap[t] || t}`]: t,
|
|
344
346
|
[`k-input-${s}`]: s,
|
|
345
|
-
"k-invalid": !
|
|
347
|
+
"k-invalid": !D,
|
|
346
348
|
"k-required": this.required,
|
|
347
349
|
"k-disabled": a
|
|
348
350
|
},
|
|
349
351
|
w
|
|
350
352
|
),
|
|
351
353
|
onKeyDown: this.handleKeyDown,
|
|
352
|
-
style: { width:
|
|
354
|
+
style: { width: u },
|
|
353
355
|
onFocus: S.onFocus,
|
|
354
356
|
onBlur: S.onBlur,
|
|
355
357
|
onClick: this.mobileMode ? this.handleIconClick : void 0
|
|
@@ -361,7 +363,7 @@ const o = class o extends n.Component {
|
|
|
361
363
|
ariaRole: "combobox",
|
|
362
364
|
ariaExpanded: this.show,
|
|
363
365
|
ariaControls: this._popupId,
|
|
364
|
-
autoFocus:
|
|
366
|
+
autoFocus: R,
|
|
365
367
|
...j
|
|
366
368
|
}
|
|
367
369
|
),
|
|
@@ -371,11 +373,11 @@ const o = class o extends n.Component {
|
|
|
371
373
|
type: "button",
|
|
372
374
|
icon: "calendar",
|
|
373
375
|
svgIcon: se,
|
|
374
|
-
title:
|
|
376
|
+
title: I,
|
|
375
377
|
className: "k-input-button",
|
|
376
378
|
rounded: null,
|
|
377
379
|
onClick: this.mobileMode ? void 0 : this.handleIconClick,
|
|
378
|
-
"aria-label":
|
|
380
|
+
"aria-label": I,
|
|
379
381
|
fillMode: s,
|
|
380
382
|
onMouseDown: this.handleIconMouseDown
|
|
381
383
|
}
|
|
@@ -383,19 +385,19 @@ const o = class o extends n.Component {
|
|
|
383
385
|
!this.mobileMode && this.renderPopup()
|
|
384
386
|
), this.mobileMode && this.renderAdaptivePopup())
|
|
385
387
|
);
|
|
386
|
-
return
|
|
388
|
+
return C ? /* @__PURE__ */ n.createElement(
|
|
387
389
|
ge,
|
|
388
390
|
{
|
|
389
391
|
dateInput: this._dateInput,
|
|
390
|
-
label:
|
|
392
|
+
label: C,
|
|
391
393
|
editorId: l,
|
|
392
|
-
editorValid:
|
|
394
|
+
editorValid: D,
|
|
393
395
|
editorDisabled: a,
|
|
394
|
-
children:
|
|
395
|
-
style: { width:
|
|
396
|
-
...
|
|
396
|
+
children: M,
|
|
397
|
+
style: { width: u },
|
|
398
|
+
...y
|
|
397
399
|
}
|
|
398
|
-
) :
|
|
400
|
+
) : M;
|
|
399
401
|
}
|
|
400
402
|
setShow(i) {
|
|
401
403
|
const { onOpen: t, onClose: s } = this.props;
|
|
@@ -406,7 +408,7 @@ const o = class o extends n.Component {
|
|
|
406
408
|
}));
|
|
407
409
|
}
|
|
408
410
|
mergeTime(i) {
|
|
409
|
-
return this.value && i ?
|
|
411
|
+
return this.value && i ? ue(i, this.value) : i;
|
|
410
412
|
}
|
|
411
413
|
nextTick(i) {
|
|
412
414
|
clearTimeout(this.nextTickId), this.nextTickId = window.setTimeout(() => i());
|
|
@@ -509,13 +511,16 @@ o.displayName = "DatePicker", o.propTypes = {
|
|
|
509
511
|
autoFocus: !1
|
|
510
512
|
};
|
|
511
513
|
let p = o;
|
|
512
|
-
const be =
|
|
513
|
-
|
|
514
|
+
const be = Q(), Ce = ee(
|
|
515
|
+
te(
|
|
516
|
+
be,
|
|
517
|
+
ie(p)
|
|
518
|
+
)
|
|
514
519
|
);
|
|
515
|
-
|
|
520
|
+
Ce.displayName = "KendoReactDatePicker";
|
|
516
521
|
ce(p);
|
|
517
522
|
export {
|
|
518
|
-
|
|
523
|
+
Ce as DatePicker,
|
|
519
524
|
be as DatePickerPropsContext,
|
|
520
525
|
p as DatePickerWithoutContext
|
|
521
526
|
};
|
|
@@ -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 k=require("react"),t=require("prop-types"),M=require("@progress/kendo-react-popup"),D=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),c=require("@progress/kendo-react-intl"),T=require("@progress/kendo-svg-icons"),P=require("../package-metadata.js"),g=require("../dateinput/DateInput.js"),x=require("../calendar/components/MultiViewCalendar.js"),h=require("../calendar/models/SelectionRange.js"),u=require("../utils.js"),n=require("../messages/index.js"),A=require("@progress/kendo-react-buttons"),_=require("../common/AdaptiveMode.js"),N=require("@progress/kendo-react-layout");function F(d){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(a,e,s.get?s:{enumerable:!0,get:()=>d[e]})}}return a.default=d,Object.freeze(a)}const i=F(k),l=class l extends i.Component{constructor(a){super(a),this._element=null,this._calendar=null,this._startDateInput=i.createRef(),this._endDateInput=i.createRef(),this.shouldFocusDateInput=!1,this.shouldFocusCalendar=!1,this.focus=()=>{this.startDateInput&&this.startDateInput.focus()},this.setCalendarRef=e=>{this._calendar=e},this.focusCalendarElement=()=>{this._calendar&&this._calendar.element&&this._calendar.element.focus({preventScroll:!0})},this.calculateValue=(e,s)=>(e.value!==void 0?e.value:s.value)||h.EMPTY_SELECTIONRANGE,this.calculateShow=(e,s)=>e.show!==void 0?e.show:s.show,this.renderCalendar=()=>{const e=this.value||h.EMPTY_SELECTIONRANGE,s={min:this.min,max:this.max,allowReverse:this.props.allowReverse,mode:"range",focusedDate:this.props.focusedDate,disabled:this.props.disabled,className:this.mobileMode?"k-calendar-lg":"",mobileMode:this.mobileMode,...this.props.calendarSettings,value:e,dir:this.props.dir,onChange:this.handleCalendarChange};return this.props.calendar?i.createElement(this.props.calendar,{...s}):i.createElement(x.MultiViewCalendar,{...s,ref:this.setCalendarRef})},this.renderPopup=()=>{const e={popupClass:o.classNames("k-calendar-container","k-daterangepicker-popup"),animate:this._element!==null,anchor:this._element,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...this.props.popupSettings,show:this.show};return this.props.popup?i.createElement(this.props.popup,{...e},this.renderCalendar()):i.createElement(M.Popup,{...e},this.renderCalendar())},this.renderAdaptivePopup=()=>{const{windowWidth:e=0}=this.state,s={expand:this.show,onClose:r=>this.handleCancel(r),title:this.props.adaptiveTitle,windowWidth:e,footer:{cancelText:this.localizationService.toLanguageString(n.dateRangePickerCancel,n.messages[n.dateRangePickerCancel]),onCancel:this.handleCancel,applyText:this.localizationService.toLanguageString(n.dateRangePickerSet,n.messages[n.dateRangePickerSet]),onApply:this.handleBlur}};return i.createElement(_.AdaptiveMode,{...s},i.createElement(N.ActionSheetContent,{overflowHidden:!0},i.createElement("div",{className:"k-scrollable-wrap"},this.renderCalendar())))},this.handleReverseClick=e=>{const s={start:this.value.end,end:this.value.start},r={syntheticEvent:e,nativeEvent:e.nativeEvent};this.handleChange(s,r)},this.handleReverseMouseDown=e=>{e.preventDefault()},this.handleFocus=e=>{clearTimeout(this.nextTickId),this.shouldFocusDateInput||this.mobileMode&&this.setState({currentValue:this.value});const{onFocus:s}=this.props;s&&s.call(void 0,e)},this.handleClick=()=>{this.shouldFocusDateInput||this.setShow(!0)},this.handleBlur=e=>{this.nextTick(()=>{this.setShow(!1)});const{onBlur:s}=this.props;s&&s.call(void 0,e)},this.handleCancel=e=>{this.nextTick(()=>{this.setShow(!1),this.setState({currentValue:h.EMPTY_SELECTIONRANGE})});const{onCancel:s}=this.props;s&&s.call(void 0,e)},this.handleEndChange=e=>{const s={start:this.value.start,end:D.cloneDate(e.value||void 0)};this.handleChange(s,e)},this.handleStartChange=e=>{const s={start:D.cloneDate(e.value||void 0),end:this.value.end};this.handleChange(s,e)},this.extractRangeFromValue=e=>{if(!Array.isArray(e.value)&&!(e.value instanceof Date))return e.value||h.EMPTY_SELECTIONRANGE;const s=Array.isArray(e.value)?e.value[0]:e.value;return{start:this.value.end!==null?s:this.value.start,end:this.value.start!==null?s:this.value.end}},this.handleCalendarChange=e=>{const s=this.extractRangeFromValue(e);this.handleChange(s,e)},this.handleKeyDown=e=>{const{keyCode:s,altKey:r}=e;s===o.Keys.esc?(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1)):r&&s===o.Keys.down?(e.preventDefault(),this.shouldFocusCalendar=!0,this.setShow(!0),this.focusCalendarElement()):r&&s===o.Keys.up&&(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1))},this.handleChange=(e,s)=>{this.setState({value:e}),this.valueDuringOnChange=e;const{onChange:r}=this.props;if(r){const m={syntheticEvent:s.syntheticEvent,nativeEvent:s.nativeEvent,value:this.value,show:this.show,target:this};r.call(void 0,m)}this.valueDuringOnChange=void 0},o.validatePackage(P.packageMetadata),this.state={show:this.props.show||this.props.defaultShow||l.defaultProps.defaultShow,value:this.props.value||this.props.defaultValue||l.defaultProps.defaultValue,currentValue:h.EMPTY_SELECTIONRANGE},this.nextTick=this.nextTick.bind(this),this.setShow=this.setShow.bind(this),this.focusCalendarElement=this.focusCalendarElement.bind(this),this.focusDateInputElement=this.focusDateInputElement.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get _startInputId(){return this.props.id+"-start-input-id"}get _endInputId(){return this.props.id+"-end-input-id"}get element(){return this._element}get startDateInput(){return this._startDateInput.current}get endDateInput(){return this._endDateInput.current}get calendar(){return this._calendar}get value(){return(this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value)||h.EMPTY_SELECTIONRANGE}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get min(){return this.props.min!==void 0?this.props.min:l.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:l.defaultProps.max}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get localizationService(){return c.provideLocalizationService(this)}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=o.ADAPTIVE_MEDIUM_BREAKPOINT&&this.props.adaptive)}componentDidMount(){var a;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this.shouldFocusCalendar&&this.focusCalendarElement(),this.shouldFocusDateInput&&this.focusDateInputElement(),this.shouldFocusCalendar=!1,this.shouldFocusDateInput=!1}componentWillUnmount(){var a;clearTimeout(this.nextTickId),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{autoFocus:a,inputAttributes:e}=this.props,s=this.value||h.EMPTY_SELECTIONRANGE,r=this.mobileMode&&this.show?this.state.currentValue:s,m=(this.props.startDateInputSettings||{}).id||this._startInputId,w=(this.props.endDateInputSettings||{}).id||this._endInputId,E=o.classNames("k-daterangepicker",{"k-disabled":this.props.disabled},this.props.className),S=this.localizationService.toLanguageString(n.start,n.messages[n.start]),C=this.localizationService.toLanguageString(n.end,n.messages[n.end]),R=this.localizationService.toLanguageString(n.separator,n.messages[n.separator]),f={disableSelection:this.mobileMode&&!0,label:S,format:this.props.format,min:this.min,max:this.max,id:this._startInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.startDateInputSettings,value:r.start,onChange:this.handleStartChange,inputAttributes:this.props.inputAttributes},v={disableSelection:this.mobileMode&&!0,label:C,format:this.props.format,min:this.min,max:this.max,id:this._endInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.endDateInputSettings,value:r.end,onChange:this.handleEndChange,inputAttributes:this.props.inputAttributes},y=i.createElement(A.Button,{type:"button",className:"k-select",fillMode:"flat",title:c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd]),onMouseDown:this.handleReverseMouseDown,onClick:this.handleReverseClick,"aria-controls":m+" "+w,"aria-label":c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd])},i.createElement(o.IconWrap,{style:{transform:"rotate(90deg)"},name:"arrows-swap",icon:T.arrowsSwapIcon}));return i.createElement(i.Fragment,null,i.createElement("span",{ref:O=>{this._element=O},className:E,style:this.props.style,id:this.props.id,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:this.props.tabIndex,onFocus:this.handleFocus,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onBlur:this.mobileMode?void 0:this.handleBlur,dir:this.props.dir},this.props.startDateInput?i.createElement(this.props.startDateInput,{...f}):i.createElement(g.DateInput,{...f,autoFocus:a,ref:this._startDateInput,ariaRole:"combobox",ariaControls:this._popupId}),(this.props.allowReverse||this.props.calendarSettings&&this.props.calendarSettings.allowReverse)&&this.props.swapButton?y:R,this.props.endDateInput?i.createElement(this.props.endDateInput,{...v}):i.createElement(g.DateInput,{...v,ref:this._endDateInput,ariaRole:"combobox",ariaControls:this._popupId}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup())}focusDateInputElement(){if(!document||!this.startDateInput||!this.startDateInput.element||!this.endDateInput||!this.endDateInput.element)return;const a=o.getActiveElement(document);(this.value.start===null||this.value.end!==null)&&a!==this.endDateInput.element?this.startDateInput.element.focus({preventScroll:!0}):a!==this.startDateInput.element&&this.endDateInput.element.focus({preventScroll:!0})}nextTick(a){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>a())}setShow(a){const{onOpen:e,onClose:s}=this.props;this.show!==a&&(this.setState({show:a}),a&&e&&e.call(void 0,{target:this}),!a&&s&&s.call(void 0,{target:this}))}calculateMedia(a){for(const e of a)this.setState({windowWidth:e.target.clientWidth})}};l.displayName="DateRangePicker",l.propTypes={allowReverse:t.bool,calendarSettings:t.any,className:t.string,defaultShow:t.bool,defaultValue:t.shape({start:u.nullable(t.instanceOf(Date).isRequired),end:u.nullable(t.instanceOf(Date).isRequired)}),disabled:t.bool,endDateInputSettings:t.shape(g.DateInputWithoutContext.propTypes),focusedDate:t.instanceOf(Date),format:t.oneOfType([t.string,t.shape({skeleton:t.string,pattern:t.string,date:t.oneOf(["short","medium","long","full"]),time:t.oneOf(["short","medium","long","full"]),datetime:t.oneOf(["short","medium","long","full"]),era:t.oneOf(["narrow","short","long"]),year:t.oneOf(["numeric","2-digit"]),month:t.oneOf(["numeric","2-digit","narrow","short","long"]),day:t.oneOf(["numeric","2-digit"]),weekday:t.oneOf(["narrow","short","long"]),hour:t.oneOf(["numeric","2-digit"]),hour12:t.bool,minute:t.oneOf(["numeric","2-digit"]),second:t.oneOf(["numeric","2-digit"]),timeZoneName:t.oneOf(["short","long"])})]),id:t.string,ariaLabelledBy:t.string,ariaDescribedBy:t.string,max:t.instanceOf(Date),min:t.instanceOf(Date),onBlur:t.func,onChange:t.func,onFocus:t.func,popupSettings:t.any,show:t.bool,startDateInputSettings:t.any,style:t.any,swapButton:t.any,tabIndex:t.number,dir:t.string,value:t.shape({start:u.nullable(t.instanceOf(Date).isRequired),end:u.nullable(t.instanceOf(Date).isRequired)}),autoFocus:t.bool,inputAttributes:t.object},l.defaultProps={allowReverse:!1,defaultShow:!1,defaultValue:h.EMPTY_SELECTIONRANGE,disabled:!1,format:"d",max:u.MAX_DATE,min:u.MIN_DATE,swapButton:!1,autoFocus:!1};let p=l;const I=o.createPropsContext(),b=o.withIdHOC(o.withPropsContext(I,p));b.displayName="KendoReactDateRangePicker";c.registerForLocalization(p);exports.DateRangePicker=b;exports.DateRangePickerPropsContext=I;exports.DateRangePickerWithoutContext=p;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const k=require("react"),t=require("prop-types"),M=require("@progress/kendo-react-popup"),D=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),c=require("@progress/kendo-react-intl"),x=require("@progress/kendo-svg-icons"),T=require("../package-metadata.js"),g=require("../dateinput/DateInput.js"),P=require("../calendar/components/MultiViewCalendar.js"),h=require("../calendar/models/SelectionRange.js"),u=require("../utils.js"),n=require("../messages/index.js"),_=require("@progress/kendo-react-buttons"),A=require("../common/AdaptiveMode.js"),N=require("@progress/kendo-react-layout");function F(d){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(a,e,s.get?s:{enumerable:!0,get:()=>d[e]})}}return a.default=d,Object.freeze(a)}const i=F(k),l=class l extends i.Component{constructor(a){super(a),this._element=null,this._calendar=null,this._startDateInput=i.createRef(),this._endDateInput=i.createRef(),this.shouldFocusDateInput=!1,this.shouldFocusCalendar=!1,this.focus=()=>{this.startDateInput&&this.startDateInput.focus()},this.setCalendarRef=e=>{this._calendar=e},this.focusCalendarElement=()=>{this._calendar&&this._calendar.element&&this._calendar.element.focus({preventScroll:!0})},this.calculateValue=(e,s)=>(e.value!==void 0?e.value:s.value)||h.EMPTY_SELECTIONRANGE,this.calculateShow=(e,s)=>e.show!==void 0?e.show:s.show,this.renderCalendar=()=>{const e=this.value||h.EMPTY_SELECTIONRANGE,s={min:this.min,max:this.max,allowReverse:this.props.allowReverse,mode:"range",focusedDate:this.props.focusedDate,disabled:this.props.disabled,className:this.mobileMode?"k-calendar-lg":"",mobileMode:this.mobileMode,...this.props.calendarSettings,value:e,dir:this.props.dir,onChange:this.handleCalendarChange};return this.props.calendar?i.createElement(this.props.calendar,{...s}):i.createElement(P.MultiViewCalendar,{...s,ref:this.setCalendarRef})},this.renderPopup=()=>{const e={popupClass:o.classNames("k-calendar-container","k-daterangepicker-popup"),animate:this._element!==null,anchor:this._element,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...this.props.popupSettings,show:this.show};return this.props.popup?i.createElement(this.props.popup,{...e},this.renderCalendar()):i.createElement(M.Popup,{...e},this.renderCalendar())},this.renderAdaptivePopup=()=>{const{windowWidth:e=0}=this.state,s={expand:this.show,onClose:r=>this.handleCancel(r),title:this.props.adaptiveTitle,windowWidth:e,footer:{cancelText:this.localizationService.toLanguageString(n.dateRangePickerCancel,n.messages[n.dateRangePickerCancel]),onCancel:this.handleCancel,applyText:this.localizationService.toLanguageString(n.dateRangePickerSet,n.messages[n.dateRangePickerSet]),onApply:this.handleBlur}};return i.createElement(A.AdaptiveMode,{...s},i.createElement(N.ActionSheetContent,{overflowHidden:!0},i.createElement("div",{className:"k-scrollable-wrap"},this.renderCalendar())))},this.handleReverseClick=e=>{const s={start:this.value.end,end:this.value.start},r={syntheticEvent:e,nativeEvent:e.nativeEvent};this.handleChange(s,r)},this.handleReverseMouseDown=e=>{e.preventDefault()},this.handleFocus=e=>{clearTimeout(this.nextTickId),this.shouldFocusDateInput||this.mobileMode&&this.setState({currentValue:this.value});const{onFocus:s}=this.props;s&&s.call(void 0,e)},this.handleClick=()=>{this.shouldFocusDateInput||this.setShow(!0)},this.handleBlur=e=>{this.nextTick(()=>{this.setShow(!1)});const{onBlur:s}=this.props;s&&s.call(void 0,e)},this.handleCancel=e=>{this.nextTick(()=>{this.setShow(!1),this.setState({currentValue:h.EMPTY_SELECTIONRANGE})});const{onCancel:s}=this.props;s&&s.call(void 0,e)},this.handleEndChange=e=>{const s={start:this.value.start,end:D.cloneDate(e.value||void 0)};this.handleChange(s,e)},this.handleStartChange=e=>{const s={start:D.cloneDate(e.value||void 0),end:this.value.end};this.handleChange(s,e)},this.extractRangeFromValue=e=>{if(!Array.isArray(e.value)&&!(e.value instanceof Date))return e.value||h.EMPTY_SELECTIONRANGE;const s=Array.isArray(e.value)?e.value[0]:e.value;return{start:this.value.end!==null?s:this.value.start,end:this.value.start!==null?s:this.value.end}},this.handleCalendarChange=e=>{const s=this.extractRangeFromValue(e);this.handleChange(s,e)},this.handleKeyDown=e=>{const{keyCode:s,altKey:r}=e;s===o.Keys.esc?(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1)):r&&s===o.Keys.down?(e.preventDefault(),this.shouldFocusCalendar=!0,this.setShow(!0),this.focusCalendarElement()):r&&s===o.Keys.up&&(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1))},this.handleChange=(e,s)=>{this.setState({value:e}),this.valueDuringOnChange=e;const{onChange:r}=this.props;if(r){const m={syntheticEvent:s.syntheticEvent,nativeEvent:s.nativeEvent,value:this.value,show:this.show,target:this};r.call(void 0,m)}this.valueDuringOnChange=void 0},o.validatePackage(T.packageMetadata),this.state={show:this.props.show||this.props.defaultShow||l.defaultProps.defaultShow,value:this.props.value||this.props.defaultValue||l.defaultProps.defaultValue,currentValue:h.EMPTY_SELECTIONRANGE},this.nextTick=this.nextTick.bind(this),this.setShow=this.setShow.bind(this),this.focusCalendarElement=this.focusCalendarElement.bind(this),this.focusDateInputElement=this.focusDateInputElement.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get _startInputId(){return this.props.id+"-start-input-id"}get _endInputId(){return this.props.id+"-end-input-id"}get element(){return this._element}get startDateInput(){return this._startDateInput.current}get endDateInput(){return this._endDateInput.current}get calendar(){return this._calendar}get value(){return(this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value)||h.EMPTY_SELECTIONRANGE}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get min(){return this.props.min!==void 0?this.props.min:l.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:l.defaultProps.max}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get localizationService(){return c.provideLocalizationService(this)}get mobileMode(){var e;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((e=this.props._adaptiveMode)==null?void 0:e.medium)&&this.props.adaptive)}componentDidMount(){var a;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this.shouldFocusCalendar&&this.focusCalendarElement(),this.shouldFocusDateInput&&this.focusDateInputElement(),this.shouldFocusCalendar=!1,this.shouldFocusDateInput=!1}componentWillUnmount(){var a;clearTimeout(this.nextTickId),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{autoFocus:a,inputAttributes:e}=this.props,s=this.value||h.EMPTY_SELECTIONRANGE,r=this.mobileMode&&this.show?this.state.currentValue:s,m=(this.props.startDateInputSettings||{}).id||this._startInputId,w=(this.props.endDateInputSettings||{}).id||this._endInputId,S=o.classNames("k-daterangepicker",{"k-disabled":this.props.disabled},this.props.className),C=this.localizationService.toLanguageString(n.start,n.messages[n.start]),E=this.localizationService.toLanguageString(n.end,n.messages[n.end]),R=this.localizationService.toLanguageString(n.separator,n.messages[n.separator]),f={disableSelection:this.mobileMode&&!0,label:C,format:this.props.format,min:this.min,max:this.max,id:this._startInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.startDateInputSettings,value:r.start,onChange:this.handleStartChange,inputAttributes:this.props.inputAttributes},v={disableSelection:this.mobileMode&&!0,label:E,format:this.props.format,min:this.min,max:this.max,id:this._endInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.endDateInputSettings,value:r.end,onChange:this.handleEndChange,inputAttributes:this.props.inputAttributes},y=i.createElement(_.Button,{type:"button",className:"k-select",fillMode:"flat",title:c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd]),onMouseDown:this.handleReverseMouseDown,onClick:this.handleReverseClick,"aria-controls":m+" "+w,"aria-label":c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd])},i.createElement(o.IconWrap,{style:{transform:"rotate(90deg)"},name:"arrows-swap",icon:x.arrowsSwapIcon}));return i.createElement(i.Fragment,null,i.createElement("span",{ref:O=>{this._element=O},className:S,style:this.props.style,id:this.props.id,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:this.props.tabIndex,onFocus:this.handleFocus,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onBlur:this.mobileMode?void 0:this.handleBlur,dir:this.props.dir},this.props.startDateInput?i.createElement(this.props.startDateInput,{...f}):i.createElement(g.DateInput,{...f,autoFocus:a,ref:this._startDateInput,ariaRole:"combobox",ariaControls:this._popupId}),(this.props.allowReverse||this.props.calendarSettings&&this.props.calendarSettings.allowReverse)&&this.props.swapButton?y:R,this.props.endDateInput?i.createElement(this.props.endDateInput,{...v}):i.createElement(g.DateInput,{...v,ref:this._endDateInput,ariaRole:"combobox",ariaControls:this._popupId}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup())}focusDateInputElement(){if(!document||!this.startDateInput||!this.startDateInput.element||!this.endDateInput||!this.endDateInput.element)return;const a=o.getActiveElement(document);(this.value.start===null||this.value.end!==null)&&a!==this.endDateInput.element?this.startDateInput.element.focus({preventScroll:!0}):a!==this.startDateInput.element&&this.endDateInput.element.focus({preventScroll:!0})}nextTick(a){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>a())}setShow(a){const{onOpen:e,onClose:s}=this.props;this.show!==a&&(this.setState({show:a}),a&&e&&e.call(void 0,{target:this}),!a&&s&&s.call(void 0,{target:this}))}calculateMedia(a){for(const e of a)this.setState({windowWidth:e.target.clientWidth})}};l.displayName="DateRangePicker",l.propTypes={allowReverse:t.bool,calendarSettings:t.any,className:t.string,defaultShow:t.bool,defaultValue:t.shape({start:u.nullable(t.instanceOf(Date).isRequired),end:u.nullable(t.instanceOf(Date).isRequired)}),disabled:t.bool,endDateInputSettings:t.shape(g.DateInputWithoutContext.propTypes),focusedDate:t.instanceOf(Date),format:t.oneOfType([t.string,t.shape({skeleton:t.string,pattern:t.string,date:t.oneOf(["short","medium","long","full"]),time:t.oneOf(["short","medium","long","full"]),datetime:t.oneOf(["short","medium","long","full"]),era:t.oneOf(["narrow","short","long"]),year:t.oneOf(["numeric","2-digit"]),month:t.oneOf(["numeric","2-digit","narrow","short","long"]),day:t.oneOf(["numeric","2-digit"]),weekday:t.oneOf(["narrow","short","long"]),hour:t.oneOf(["numeric","2-digit"]),hour12:t.bool,minute:t.oneOf(["numeric","2-digit"]),second:t.oneOf(["numeric","2-digit"]),timeZoneName:t.oneOf(["short","long"])})]),id:t.string,ariaLabelledBy:t.string,ariaDescribedBy:t.string,max:t.instanceOf(Date),min:t.instanceOf(Date),onBlur:t.func,onChange:t.func,onFocus:t.func,popupSettings:t.any,show:t.bool,startDateInputSettings:t.any,style:t.any,swapButton:t.any,tabIndex:t.number,dir:t.string,value:t.shape({start:u.nullable(t.instanceOf(Date).isRequired),end:u.nullable(t.instanceOf(Date).isRequired)}),autoFocus:t.bool,inputAttributes:t.object},l.defaultProps={allowReverse:!1,defaultShow:!1,defaultValue:h.EMPTY_SELECTIONRANGE,disabled:!1,format:"d",max:u.MAX_DATE,min:u.MIN_DATE,swapButton:!1,autoFocus:!1};let p=l;const b=o.createPropsContext(),I=o.withIdHOC(o.withPropsContext(b,o.withAdaptiveModeContext(p)));I.displayName="KendoReactDateRangePicker";c.registerForLocalization(p);exports.DateRangePicker=I;exports.DateRangePickerPropsContext=b;exports.DateRangePickerWithoutContext=p;
|