@progress/kendo-react-dateinputs 11.4.0-develop.6 → 11.4.0-develop.8
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/MultiViewCalendar.js +1 -1
- package/calendar/components/MultiViewCalendar.mjs +38 -38
- package/daterangepicker/DateRangePicker.js +1 -1
- package/daterangepicker/DateRangePicker.mjs +46 -46
- package/dist/cdn/js/kendo-react-dateinputs.js +1 -1
- package/index.d.mts +3 -0
- package/index.d.ts +3 -0
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +9 -9
- package/timepicker/TimePicker.js +1 -1
- package/timepicker/TimePicker.mjs +84 -84
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const _=require("react"),s=require("prop-types"),F=require("@progress/kendo-react-intl"),f=require("@progress/kendo-react-common"),o=require("@progress/kendo-date-math"),S=require("@progress/kendo-react-buttons"),x=require("@progress/kendo-svg-icons"),I=require("../models/NavigationAction.js"),M=require("../models/CalendarViewEnum.js"),N=require("../models/SelectionRange.js"),K=require("./Header.js"),r=require("../../utils.js"),V=require("../../messages/index.js"),z=require("../services/BusViewService.js"),H=require("../services/NavigationService.js"),E=require("./HorizontalViewList.js"),Y=require("./TodayCommand.js"),W=require("../../package-metadata.js");function j(c){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const a in c)if(a!=="default"){const d=Object.getOwnPropertyDescriptor(c,a);Object.defineProperty(i,a,d.get?d:{enumerable:!0,get:()=>c[a]})}}return i.default=c,Object.freeze(i)}const p=j(_),A=(c=m.defaultProps.min,i=m.defaultProps.max,a)=>a instanceof Date&&!Array.isArray(a)&&r.isInRange(o.getDate(a),c,i)?o.getDate(a):null,T=(c=m.defaultProps.min,i=m.defaultProps.max,a)=>Array.isArray(a)?a.filter(d=>r.isInRange(d,c,i)).map(d=>o.getDate(d)):null,P=c=>typeof c=="object"&&!(c instanceof Date)&&c!==null&&!Array.isArray(c)?c:N.EMPTY_SELECTIONRANGE,L=(c,i,a)=>c||i&&i[0]||a&&a.start,U=(c,i)=>c.start===null&&i===null?"start":c.end===null?"end":"start",v=class v extends p.Component{constructor(i){super(i),this.dates=[],this.selectedDate=null,this.selectedMultiple=null,this.selectedRange=N.EMPTY_SELECTIONRANGE,this._focusedDate=new Date,this.cellUID=this.props.id+"-cell-uid",this.activeRangeEnd="start",this._element=null,this.intl=null,this.localization=null,this.service=null,this.calendarViewList=null,this.isActive=!1,this.calculateFocusFromValue=!0,this.showLicenseWatermark=!1,this.focus=()=>{this._element&&this._element.focus()},this.clampRange=e=>({start:e,end:null}),this.rangeWithFocused=(e,t)=>({start:e.start,end:e.end===null&&e.start!==null&&this.isActive?t:e.end}),this.generateRange=(e,t)=>{const{end:h,start:l}=t,u=t.start!==null&&e.getTime()<=t.start.getTime();return!this.props.allowReverse&&u?{start:e,end:this.selectedRange.start}:this.activeRange!=="end"?{start:e,end:h}:{start:l||this.selectedDate,end:e}},this.canNavigate=e=>{if(!this.service)return!1;const t=this.service.move(this.focusedDate,e);return this.min<=t&&t<=this.max||this.service.isInSameView(t,this.min)||this.service.isInSameView(t,this.max)},this.navigate=(e,t)=>{this.calculateFocusFromValue=!1;const h=this.move(e,t);this.setState({navigateDate:h,focusedDate:h})},this.move=(e,t)=>this.clampDate(this.service.move(t,e)),this.clampDate=e=>r.dateInRange(e,this.min,this.max),this.shouldAutoCorrect=(e,t)=>{const{end:h,start:l}=t;return this.activeRange!=="end"?h!==null&&e>h:l!==null&&e<l},this.handleCellEnter=e=>{this.props.mode==="range"&&(this.calculateFocusFromValue=!1,this.setState({focusedDate:e}))},this.handleMouseDown=e=>{e.preventDefault()},this.handleClick=e=>{this._element&&this._element.focus({preventScroll:!0})},this.handleFocus=e=>{if(this.isActive=!0,!this.calendarViewList)return;this.calendarViewList.focusActiveDate();const{onFocus:t}=this.props;t&&t.call(void 0,e)},this.handleBlur=e=>{if(this.isActive=!1,!this.calendarViewList)return;this.calendarViewList.blurActiveDate();const{onBlur:t}=this.props;t&&t.call(void 0,e)},this.handleTodayClick=e=>{this.todayIsInRange&&this.handleDateChange(e)},this.handlePrevButtonClick=()=>{const e=I.Action.PrevView;if(this.state.activeView>0&&this.focusedDate.getFullYear()>this.dates[0].getFullYear())this.navigate(e,this.move(e,this.focusedDate));else{const t=this.isInMonth(this.focusedDate,this.dates[1])?this.move(e,this.focusedDate):this.focusedDate;this.navigate(e,t)}},this.handleNextButtonClick=()=>{this.navigate(I.Action.NextView,this.focusedDate)},this.handleKeyDown=e=>{const{keyCode:h,ctrlKey:l,metaKey:u}=e;if(h===84){const n=r.getToday();this.calculateFocusFromValue=!1,this.setState({focusedDate:n,navigateDate:n})}if((l||u)&&(h===f.Keys.left&&this.handlePrevButtonClick(),h===f.Keys.right&&this.handleNextButtonClick()),h===f.Keys.enter){const n={syntheticEvent:e,nativeEvent:e.nativeEvent,value:this.focusedDate,target:this};this.handleDateChange(n)}else{const n=r.dateInRange(this.navigation.move(this.focusedDate,this.navigation.action(e),this.state.activeView,this.service,e),this.min,this.max);if(o.isEqualDate(this.focusedDate,n))return;this.dates&&this.service&&!this.service.isInArray(n,this.dates)&&this.setState({navigateDate:n}),this.calculateFocusFromValue=!1,this.setState({focusedDate:n})}e.preventDefault()},this.handleViewChange=({view:e})=>{this.calculateFocusFromValue=!1,this.setState(t=>({activeView:e,navigateDate:t.focusedDate}))},this.handleWeekSelection=(e,t,h)=>{if(this.props.mode==="single")return;const l=0,u=6,n=t===l?e:o.addDays(e,-t),g=t===u?e:o.addDays(e,u-t);let D=null;if(this.props.mode==="multiple"){D=[];for(let R=l;R<=u;R++)D.push(o.addDays(n,R));this.setState({value:D,focusedDate:e})}this.props.mode==="range"&&(D={start:n,end:g},this.setState({value:D,focusedDate:e}));const{onChange:k}=this.props;if(k){const R={syntheticEvent:h,nativeEvent:h.nativeEvent,value:D,target:this};k.call(void 0,R)}},this.handleDateChange=e=>{const t=o.cloneDate(e.value),h=this.bus.canMoveDown(this.state.activeView);if(this.props.disabled)return;if(h)if(e.isTodayClick)this.bus.moveToBottom(this.state.activeView);else{this.bus.moveDown(this.state.activeView,e.syntheticEvent),this.setState({focusedDate:t,navigateDate:t});return}this.calculateFocusFromValue=!0;let l;switch(this.props.mode){case"single":l=o.cloneDate(e.value);break;case"multiple":if(Array.isArray(this.selectedMultiple)){const n=this.selectedMultiple.slice();let g=-1;n.forEach((D,k)=>{o.isEqualDate(D,e.value)&&(g=k)}),g!==-1?n.splice(g,1):n.push(o.cloneDate(e.value)),l=n.slice()}else this.selectedDate?l=[o.cloneDate(this.selectedDate),o.cloneDate(e.value)]:l=[o.cloneDate(e.value)];break;case"range":{l=this.selectedRange.start!==null&&this.selectedRange.end!==null&&this.activeRange==="start"?this.clampRange(e.value):this.generateRange(e.value,this.selectedRange),this.activeRangeEnd=this.activeRange!=="end"?"end":"start";break}default:l=o.cloneDate(e.value);break}this.valueDuringOnChange=l,e.isTodayClick&&this.setState({navigateDate:t}),this.setState({value:l,focusedDate:t}),this.valueDuringOnChange=l;const{onChange:u}=this.props;if(u){const n={syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,value:l,target:this};u.call(void 0,n)}this.valueDuringOnChange=void 0},this.showLicenseWatermark=!f.validatePackage(W.packageMetadata,{component:"MultiViewCalendar"});const a=i.value!==void 0?i.value:i.defaultValue||v.defaultProps.defaultValue,d=A(this.min,this.max,a),w=T(this.min,this.max,a),C=P(a),O=L(d,w,C),b=r.viewInRange(M.CalendarViewEnum[i.defaultActiveView],this.bottomView,this.topView),y=r.dateInRange(i.focusedDate||O||r.getToday(),this.min,this.max);this.state={value:a,activeView:b,focusedDate:y,navigateDate:y},this.activeRangeEnd=U(C,d),this.bus=new z.BusViewService(this.handleViewChange),this.navigation=new H.NavigationService(this.bus),this.calculateFocusFromValue=!1,this.lastView=b,this.lastViewsCount=this.props.views||E.HorizontalViewList.defaultProps.views}get wrapperID(){return this.props.id+"-wrapper-id"}get isRtl(){return this.props.dir==="rtl"}get element(){return this._element}get value(){return this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value}get focusedDate(){return o.cloneDate(this._focusedDate)}get min(){return o.getDate(this.props.min!==void 0?this.props.min:v.defaultProps.min)}get max(){return o.getDate(this.props.max!==void 0?this.props.max:v.defaultProps.max)}get bottomView(){return M.CalendarViewEnum[this.props.bottomView!==void 0?this.props.bottomView:v.defaultProps.bottomView]}get topView(){return M.CalendarViewEnum[this.props.topView!==void 0?this.props.topView:v.defaultProps.topView]}get activeRange(){return this.props.activeRangeEnd!==void 0?this.props.activeRangeEnd:this.activeRangeEnd}get todayIsInRange(){return r.isInRange(r.getToday(),o.getDate(this.min),o.getDate(this.max))}componentDidMount(){this.calculateFocusFromValue=!0}componentDidUpdate(){this.calendarViewList&&(this.isActive?this.calendarViewList.focusActiveDate:this.calendarViewList.blurActiveDate)();const i=A(this.min,this.max,this.value);this.calculateFocusFromValue=!!(this.selectedDate&&i&&this.selectedDate.getTime()&&i.getTime()),this.lastView=this.state.activeView,this.lastViewsCount=this.props.views||E.HorizontalViewList.defaultProps.views}render(){this.props._ref&&this.props._ref(this),this.intl=F.provideIntlService(this),this.localization=F.provideLocalizationService(this),this.bus.configure(this.bottomView,this.topView);const i=r.viewInRange(this.state.activeView,this.bottomView,this.topView);this.service=this.bus.service(i,this.intl),this.selectedDate=A(this.min,this.max,this.value),this.selectedMultiple=T(this.min,this.max,this.value),this.selectedRange=P(this.value);const a=L(this.selectedDate,this.selectedMultiple,this.selectedRange);this._focusedDate=r.dateInRange(this.calculateFocusFromValue&&a!==null?a:this.state.focusedDate,this.min,this.max);const d=f.classNames("k-calendar k-calendar-range k-calendar-md",{"k-disabled":this.props.disabled},this.props.className),w=this.rangeWithFocused(this.selectedRange,this.focusedDate),C=this.localization.toLanguageString(V.prevView,V.messages[V.prevView]),O=this.localization.toLanguageString(V.nextView,V.messages[V.nextView]),b=!this.canNavigate(I.Action.PrevView),y=!this.canNavigate(I.Action.NextView),e={"aria-disabled":b},t={"aria-disabled":y},h=this.lastView!==i,l=this.dates&&this.isInMonth(this.state.navigateDate,this.dates[0]),u=this.lastViewsCount!==this.props.views;(!l||h||u)&&(this.dates=this.service.datesList(this.state.navigateDate,this.props.views||E.HorizontalViewList.defaultProps.views));const n=o.cloneDate(this.dates&&this.dates[0]?this.dates[0]:r.getToday());return p.createElement("div",{ref:g=>{this._element=g},className:d,id:this.props.id||this.wrapperID,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:this.props.disabled?void 0:this.props.tabIndex,onFocus:this.handleFocus,onBlur:this.handleBlur,onMouseDown:this.handleMouseDown,onClick:this.handleClick,onKeyDown:this.handleKeyDown,"aria-disabled":this.props.disabled,dir:this.props.dir},p.createElement(K.Header,{key:`.kendo.calendar.header.${n.getTime()}`,activeView:i,currentDate:n,min:this.min,max:this.max,rangeLength:this.props.views,bus:this.bus,service:this.service,headerTitle:this.props.headerTitle,verticalView:this.props.mobileMode,commands:p.createElement(p.Fragment,null,p.createElement(S.Button,{type:"button",className:"k-calendar-nav-prev",icon:this.isRtl?"chevron-right":"chevron-left",svgIcon:this.isRtl?x.chevronRightIcon:x.chevronLeftIcon,fillMode:"flat",title:C,disabled:b,onClick:this.handlePrevButtonClick,...e}),p.createElement(Y.TodayCommand,{min:this.min,max:this.max,onClick:this.handleTodayClick,disabled:!this.todayIsInRange}),p.createElement(S.Button,{type:"button",className:"k-calendar-nav-next",icon:this.isRtl?"chevron-left":"chevron-right",svgIcon:this.isRtl?x.chevronLeftIcon:x.chevronRightIcon,fillMode:"flat",title:O,disabled:y,onClick:this.handleNextButtonClick,...t}))}),p.createElement(E.HorizontalViewList,{ref:g=>{this.calendarViewList=g},dates:this.dates,activeView:i,focusedDate:this.focusedDate,weekDaysFormat:this.props.weekDaysFormat,min:this.min,max:this.max,bus:this.bus,service:this.service,selectionRange:w,value:this.selectedMultiple||this.selectedDate,cellUID:this.cellUID,views:this.props.views,onChange:this.handleDateChange,onWeekSelect:this.handleWeekSelection,showWeekNumbers:this.props.weekNumber,onCellEnter:this.handleCellEnter,cell:this.props.cell,weekCell:this.props.weekCell,headerTitle:this.props.headerTitle,verticalView:this.props.mobileMode,showOtherMonthDays:this.props.showOtherMonthDays,allowReverse:this.props.allowReverse}),this.showLicenseWatermark&&p.createElement(f.WatermarkOverlay,null))}isInMonth(i,a){return!!a&&o.firstDayOfMonth(a)<=i&&i<=o.lastDayOfMonth(a)}};v.displayName="MultiViewCalendar",v.propTypes={activeRangeEnd:s.oneOf(["start","end"]),allowReverse:s.bool,bottomView:s.oneOf(["month","year","decade","century"]),className:s.string,defaultActiveView:s.oneOf(["month","year","decade","century"]),defaultValue:s.oneOfType([r.nullable(s.instanceOf(Date)),s.arrayOf(s.instanceOf(Date)),s.shape({start:r.nullable(s.instanceOf(Date)),end:r.nullable(s.instanceOf(Date))})]),disabled:s.bool,focusedDate:s.instanceOf(Date),id:s.string,weekDaysFormat:s.oneOf(["narrow","short","abbreviated"]),ariaLabelledBy:s.string,ariaDescribedBy:s.string,max:s.instanceOf(Date),min:s.instanceOf(Date),mode:s.oneOf(["single","multiple","range"]),onBlur:s.func,onChange:s.func,onFocus:s.func,tabIndex:s.number,topView:s.oneOf(["month","year","decade","century"]),value:s.oneOfType([r.nullable(s.instanceOf(Date)),s.arrayOf(s.instanceOf(Date)),s.shape({start:r.nullable(s.instanceOf(Date).isRequired),end:r.nullable(s.instanceOf(Date).isRequired)})]),views:(i,a,d)=>{const w=i[a];return w!==void 0&&w<1?new Error(`Invalid prop '${a}' supplied to'${d}'. The '${a}' property cannot be less than 1'`):null},weekNumber:s.bool,showOtherMonthDays:s.bool,dir:s.string},v.defaultProps={disabled:!1,min:r.MIN_DATE,max:r.MAX_DATE,navigation:!0,defaultActiveView:"month",defaultValue:null,topView:"century",weekDaysFormat:"short",tabIndex:0,bottomView:"month",views:2,allowReverse:!1,showOtherMonthDays:!1};let m=v;const B=f.createPropsContext(),q=f.withIdHOC(f.withPropsContext(B,m));q.displayName="KendoReactMultiViewCalendar";F.registerForIntl(m);F.registerForLocalization(m);exports.MultiViewCalendar=q;exports.MultiViewCalendarPropsContext=B;exports.MultiViewCalendarWithoutContext=m;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const K=require("react"),s=require("prop-types"),F=require("@progress/kendo-react-intl"),g=require("@progress/kendo-react-common"),o=require("@progress/kendo-date-math"),S=require("@progress/kendo-react-buttons"),x=require("@progress/kendo-svg-icons"),I=require("../models/NavigationAction.js"),O=require("../models/CalendarViewEnum.js"),B=require("../models/SelectionRange.js"),z=require("./Header.js"),r=require("../../utils.js"),V=require("../../messages/index.js"),H=require("../services/BusViewService.js"),Y=require("../services/NavigationService.js"),E=require("./HorizontalViewList.js"),W=require("./TodayCommand.js"),T=require("../../package-metadata.js");function j(c){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const a in c)if(a!=="default"){const d=Object.getOwnPropertyDescriptor(c,a);Object.defineProperty(i,a,d.get?d:{enumerable:!0,get:()=>c[a]})}}return i.default=c,Object.freeze(i)}const p=j(K),A=(c=m.defaultProps.min,i=m.defaultProps.max,a)=>a instanceof Date&&!Array.isArray(a)&&r.isInRange(o.getDate(a),c,i)?o.getDate(a):null,L=(c=m.defaultProps.min,i=m.defaultProps.max,a)=>Array.isArray(a)?a.filter(d=>r.isInRange(d,c,i)).map(d=>o.getDate(d)):null,P=c=>typeof c=="object"&&!(c instanceof Date)&&c!==null&&!Array.isArray(c)?c:B.EMPTY_SELECTIONRANGE,N=(c,i,a)=>c||i&&i[0]||a&&a.start,U=(c,i)=>c.start===null&&i===null?"start":c.end===null?"end":"start",v=class v extends p.Component{constructor(i){super(i),this.dates=[],this.selectedDate=null,this.selectedMultiple=null,this.selectedRange=B.EMPTY_SELECTIONRANGE,this._focusedDate=new Date,this.cellUID=this.props.id+"-cell-uid",this.activeRangeEnd="start",this._element=null,this.intl=null,this.localization=null,this.service=null,this.calendarViewList=null,this.isActive=!1,this.calculateFocusFromValue=!0,this.showLicenseWatermark=!1,this.focus=()=>{this._element&&this._element.focus()},this.clampRange=e=>({start:e,end:null}),this.rangeWithFocused=(e,t)=>({start:e.start,end:e.end===null&&e.start!==null&&this.isActive?t:e.end}),this.generateRange=(e,t)=>{const{end:h,start:l}=t,u=t.start!==null&&e.getTime()<=t.start.getTime();return!this.props.allowReverse&&u?{start:e,end:this.selectedRange.start}:this.activeRange!=="end"?{start:e,end:h}:{start:l||this.selectedDate,end:e}},this.canNavigate=e=>{if(!this.service)return!1;const t=this.service.move(this.focusedDate,e);return this.min<=t&&t<=this.max||this.service.isInSameView(t,this.min)||this.service.isInSameView(t,this.max)},this.navigate=(e,t)=>{this.calculateFocusFromValue=!1;const h=this.move(e,t);this.setState({navigateDate:h,focusedDate:h})},this.move=(e,t)=>this.clampDate(this.service.move(t,e)),this.clampDate=e=>r.dateInRange(e,this.min,this.max),this.shouldAutoCorrect=(e,t)=>{const{end:h,start:l}=t;return this.activeRange!=="end"?h!==null&&e>h:l!==null&&e<l},this.handleCellEnter=e=>{this.props.mode==="range"&&(this.calculateFocusFromValue=!1,this.setState({focusedDate:e}))},this.handleMouseDown=e=>{e.preventDefault()},this.handleClick=e=>{this._element&&this._element.focus({preventScroll:!0})},this.handleFocus=e=>{if(this.isActive=!0,!this.calendarViewList)return;this.calendarViewList.focusActiveDate();const{onFocus:t}=this.props;t&&t.call(void 0,e)},this.handleBlur=e=>{if(this.isActive=!1,!this.calendarViewList)return;this.calendarViewList.blurActiveDate();const{onBlur:t}=this.props;t&&t.call(void 0,e)},this.handleTodayClick=e=>{this.todayIsInRange&&this.handleDateChange(e)},this.handlePrevButtonClick=()=>{const e=I.Action.PrevView;if(this.state.activeView>0&&this.focusedDate.getFullYear()>this.dates[0].getFullYear())this.navigate(e,this.move(e,this.focusedDate));else{const t=this.isInMonth(this.focusedDate,this.dates[1])?this.move(e,this.focusedDate):this.focusedDate;this.navigate(e,t)}},this.handleNextButtonClick=()=>{this.navigate(I.Action.NextView,this.focusedDate)},this.handleKeyDown=e=>{const{keyCode:h,ctrlKey:l,metaKey:u}=e;if(h===84){const n=r.getToday();this.calculateFocusFromValue=!1,this.setState({focusedDate:n,navigateDate:n})}if((l||u)&&(h===g.Keys.left&&this.handlePrevButtonClick(),h===g.Keys.right&&this.handleNextButtonClick()),h===g.Keys.enter){const n={syntheticEvent:e,nativeEvent:e.nativeEvent,value:this.focusedDate,target:this};this.handleDateChange(n)}else{const n=r.dateInRange(this.navigation.move(this.focusedDate,this.navigation.action(e),this.state.activeView,this.service,e),this.min,this.max);if(o.isEqualDate(this.focusedDate,n))return;this.dates&&this.service&&!this.service.isInArray(n,this.dates)&&this.setState({navigateDate:n}),this.calculateFocusFromValue=!1,this.setState({focusedDate:n})}e.preventDefault()},this.handleViewChange=({view:e})=>{this.calculateFocusFromValue=!1,this.setState(t=>({activeView:e,navigateDate:t.focusedDate}))},this.handleWeekSelection=(e,t,h)=>{if(this.props.mode==="single")return;const l=0,u=6,n=t===l?e:o.addDays(e,-t),f=t===u?e:o.addDays(e,u-t);let D=null;if(this.props.mode==="multiple"){D=[];for(let R=l;R<=u;R++)D.push(o.addDays(n,R));this.setState({value:D,focusedDate:e})}this.props.mode==="range"&&(D={start:n,end:f},this.setState({value:D,focusedDate:e}));const{onChange:k}=this.props;if(k){const R={syntheticEvent:h,nativeEvent:h.nativeEvent,value:D,target:this};k.call(void 0,R)}},this.handleDateChange=e=>{const t=o.cloneDate(e.value),h=this.bus.canMoveDown(this.state.activeView);if(this.props.disabled)return;if(h)if(e.isTodayClick)this.bus.moveToBottom(this.state.activeView);else{this.bus.moveDown(this.state.activeView,e.syntheticEvent),this.setState({focusedDate:t,navigateDate:t});return}this.calculateFocusFromValue=!0;let l;switch(this.props.mode){case"single":l=o.cloneDate(e.value);break;case"multiple":if(Array.isArray(this.selectedMultiple)){const n=this.selectedMultiple.slice();let f=-1;n.forEach((D,k)=>{o.isEqualDate(D,e.value)&&(f=k)}),f!==-1?n.splice(f,1):n.push(o.cloneDate(e.value)),l=n.slice()}else this.selectedDate?l=[o.cloneDate(this.selectedDate),o.cloneDate(e.value)]:l=[o.cloneDate(e.value)];break;case"range":{l=this.selectedRange.start!==null&&this.selectedRange.end!==null&&this.activeRange==="start"?this.clampRange(e.value):this.generateRange(e.value,this.selectedRange),this.activeRangeEnd=this.activeRange!=="end"?"end":"start";break}default:l=o.cloneDate(e.value);break}this.valueDuringOnChange=l,e.isTodayClick&&this.setState({navigateDate:t}),this.setState({value:l,focusedDate:t}),this.valueDuringOnChange=l;const{onChange:u}=this.props;if(u){const n={syntheticEvent:e.syntheticEvent,nativeEvent:e.nativeEvent,value:l,target:this};u.call(void 0,n)}this.valueDuringOnChange=void 0},this.showLicenseWatermark=!g.validatePackage(T.packageMetadata,{component:"MultiViewCalendar"}),this.licenseMessage=g.getLicenseMessage(T.packageMetadata);const a=i.value!==void 0?i.value:i.defaultValue||v.defaultProps.defaultValue,d=A(this.min,this.max,a),w=L(this.min,this.max,a),C=P(a),M=N(d,w,C),b=r.viewInRange(O.CalendarViewEnum[i.defaultActiveView],this.bottomView,this.topView),y=r.dateInRange(i.focusedDate||M||r.getToday(),this.min,this.max);this.state={value:a,activeView:b,focusedDate:y,navigateDate:y},this.activeRangeEnd=U(C,d),this.bus=new H.BusViewService(this.handleViewChange),this.navigation=new Y.NavigationService(this.bus),this.calculateFocusFromValue=!1,this.lastView=b,this.lastViewsCount=this.props.views||E.HorizontalViewList.defaultProps.views}get wrapperID(){return this.props.id+"-wrapper-id"}get isRtl(){return this.props.dir==="rtl"}get element(){return this._element}get value(){return this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value}get focusedDate(){return o.cloneDate(this._focusedDate)}get min(){return o.getDate(this.props.min!==void 0?this.props.min:v.defaultProps.min)}get max(){return o.getDate(this.props.max!==void 0?this.props.max:v.defaultProps.max)}get bottomView(){return O.CalendarViewEnum[this.props.bottomView!==void 0?this.props.bottomView:v.defaultProps.bottomView]}get topView(){return O.CalendarViewEnum[this.props.topView!==void 0?this.props.topView:v.defaultProps.topView]}get activeRange(){return this.props.activeRangeEnd!==void 0?this.props.activeRangeEnd:this.activeRangeEnd}get todayIsInRange(){return r.isInRange(r.getToday(),o.getDate(this.min),o.getDate(this.max))}componentDidMount(){this.calculateFocusFromValue=!0}componentDidUpdate(){this.calendarViewList&&(this.isActive?this.calendarViewList.focusActiveDate:this.calendarViewList.blurActiveDate)();const i=A(this.min,this.max,this.value);this.calculateFocusFromValue=!!(this.selectedDate&&i&&this.selectedDate.getTime()&&i.getTime()),this.lastView=this.state.activeView,this.lastViewsCount=this.props.views||E.HorizontalViewList.defaultProps.views}render(){this.props._ref&&this.props._ref(this),this.intl=F.provideIntlService(this),this.localization=F.provideLocalizationService(this),this.bus.configure(this.bottomView,this.topView);const i=r.viewInRange(this.state.activeView,this.bottomView,this.topView);this.service=this.bus.service(i,this.intl),this.selectedDate=A(this.min,this.max,this.value),this.selectedMultiple=L(this.min,this.max,this.value),this.selectedRange=P(this.value);const a=N(this.selectedDate,this.selectedMultiple,this.selectedRange);this._focusedDate=r.dateInRange(this.calculateFocusFromValue&&a!==null?a:this.state.focusedDate,this.min,this.max);const d=g.classNames("k-calendar k-calendar-range k-calendar-md",{"k-disabled":this.props.disabled},this.props.className),w=this.rangeWithFocused(this.selectedRange,this.focusedDate),C=this.localization.toLanguageString(V.prevView,V.messages[V.prevView]),M=this.localization.toLanguageString(V.nextView,V.messages[V.nextView]),b=!this.canNavigate(I.Action.PrevView),y=!this.canNavigate(I.Action.NextView),e={"aria-disabled":b},t={"aria-disabled":y},h=this.lastView!==i,l=this.dates&&this.isInMonth(this.state.navigateDate,this.dates[0]),u=this.lastViewsCount!==this.props.views;(!l||h||u)&&(this.dates=this.service.datesList(this.state.navigateDate,this.props.views||E.HorizontalViewList.defaultProps.views));const n=o.cloneDate(this.dates&&this.dates[0]?this.dates[0]:r.getToday());return p.createElement("div",{ref:f=>{this._element=f},className:d,id:this.props.id||this.wrapperID,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:this.props.disabled?void 0:this.props.tabIndex,onFocus:this.handleFocus,onBlur:this.handleBlur,onMouseDown:this.handleMouseDown,onClick:this.handleClick,onKeyDown:this.handleKeyDown,"aria-disabled":this.props.disabled,dir:this.props.dir},p.createElement(z.Header,{key:`.kendo.calendar.header.${n.getTime()}`,activeView:i,currentDate:n,min:this.min,max:this.max,rangeLength:this.props.views,bus:this.bus,service:this.service,headerTitle:this.props.headerTitle,verticalView:this.props.mobileMode,commands:p.createElement(p.Fragment,null,p.createElement(S.Button,{type:"button",className:"k-calendar-nav-prev",icon:this.isRtl?"chevron-right":"chevron-left",svgIcon:this.isRtl?x.chevronRightIcon:x.chevronLeftIcon,fillMode:"flat",title:C,disabled:b,onClick:this.handlePrevButtonClick,...e}),p.createElement(W.TodayCommand,{min:this.min,max:this.max,onClick:this.handleTodayClick,disabled:!this.todayIsInRange}),p.createElement(S.Button,{type:"button",className:"k-calendar-nav-next",icon:this.isRtl?"chevron-left":"chevron-right",svgIcon:this.isRtl?x.chevronLeftIcon:x.chevronRightIcon,fillMode:"flat",title:M,disabled:y,onClick:this.handleNextButtonClick,...t}))}),p.createElement(E.HorizontalViewList,{ref:f=>{this.calendarViewList=f},dates:this.dates,activeView:i,focusedDate:this.focusedDate,weekDaysFormat:this.props.weekDaysFormat,min:this.min,max:this.max,bus:this.bus,service:this.service,selectionRange:w,value:this.selectedMultiple||this.selectedDate,cellUID:this.cellUID,views:this.props.views,onChange:this.handleDateChange,onWeekSelect:this.handleWeekSelection,showWeekNumbers:this.props.weekNumber,onCellEnter:this.handleCellEnter,cell:this.props.cell,weekCell:this.props.weekCell,headerTitle:this.props.headerTitle,verticalView:this.props.mobileMode,showOtherMonthDays:this.props.showOtherMonthDays,allowReverse:this.props.allowReverse}),this.showLicenseWatermark&&p.createElement(g.WatermarkOverlay,{message:this.licenseMessage}))}isInMonth(i,a){return!!a&&o.firstDayOfMonth(a)<=i&&i<=o.lastDayOfMonth(a)}};v.displayName="MultiViewCalendar",v.propTypes={activeRangeEnd:s.oneOf(["start","end"]),allowReverse:s.bool,bottomView:s.oneOf(["month","year","decade","century"]),className:s.string,defaultActiveView:s.oneOf(["month","year","decade","century"]),defaultValue:s.oneOfType([r.nullable(s.instanceOf(Date)),s.arrayOf(s.instanceOf(Date)),s.shape({start:r.nullable(s.instanceOf(Date)),end:r.nullable(s.instanceOf(Date))})]),disabled:s.bool,focusedDate:s.instanceOf(Date),id:s.string,weekDaysFormat:s.oneOf(["narrow","short","abbreviated"]),ariaLabelledBy:s.string,ariaDescribedBy:s.string,max:s.instanceOf(Date),min:s.instanceOf(Date),mode:s.oneOf(["single","multiple","range"]),onBlur:s.func,onChange:s.func,onFocus:s.func,tabIndex:s.number,topView:s.oneOf(["month","year","decade","century"]),value:s.oneOfType([r.nullable(s.instanceOf(Date)),s.arrayOf(s.instanceOf(Date)),s.shape({start:r.nullable(s.instanceOf(Date).isRequired),end:r.nullable(s.instanceOf(Date).isRequired)})]),views:(i,a,d)=>{const w=i[a];return w!==void 0&&w<1?new Error(`Invalid prop '${a}' supplied to'${d}'. The '${a}' property cannot be less than 1'`):null},weekNumber:s.bool,showOtherMonthDays:s.bool,dir:s.string},v.defaultProps={disabled:!1,min:r.MIN_DATE,max:r.MAX_DATE,navigation:!0,defaultActiveView:"month",defaultValue:null,topView:"century",weekDaysFormat:"short",tabIndex:0,bottomView:"month",views:2,allowReverse:!1,showOtherMonthDays:!1};let m=v;const q=g.createPropsContext(),_=g.withIdHOC(g.withPropsContext(q,m));_.displayName="KendoReactMultiViewCalendar";F.registerForIntl(m);F.registerForLocalization(m);exports.MultiViewCalendar=_;exports.MultiViewCalendarPropsContext=q;exports.MultiViewCalendarWithoutContext=m;
|
|
@@ -7,25 +7,25 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as d from "react";
|
|
9
9
|
import s from "prop-types";
|
|
10
|
-
import { provideIntlService as
|
|
11
|
-
import { Keys as O, validatePackage as
|
|
12
|
-
import { isEqualDate as P, addDays as M, cloneDate as m, getDate as g, firstDayOfMonth as
|
|
13
|
-
import { Button as
|
|
14
|
-
import { chevronRightIcon as
|
|
10
|
+
import { provideIntlService as G, provideLocalizationService as X, registerForIntl as q, registerForLocalization as J } from "@progress/kendo-react-intl";
|
|
11
|
+
import { Keys as O, validatePackage as Q, getLicenseMessage as Z, classNames as ee, WatermarkOverlay as te, createPropsContext as se, withIdHOC as ie, withPropsContext as ae } from "@progress/kendo-react-common";
|
|
12
|
+
import { isEqualDate as P, addDays as M, cloneDate as m, getDate as g, firstDayOfMonth as ne, lastDayOfMonth as oe } from "@progress/kendo-date-math";
|
|
13
|
+
import { Button as L } from "@progress/kendo-react-buttons";
|
|
14
|
+
import { chevronRightIcon as N, chevronLeftIcon as B } from "@progress/kendo-svg-icons";
|
|
15
15
|
import { Action as k } from "../models/NavigationAction.mjs";
|
|
16
16
|
import { CalendarViewEnum as A } from "../models/CalendarViewEnum.mjs";
|
|
17
|
-
import { EMPTY_SELECTIONRANGE as
|
|
18
|
-
import { Header as
|
|
19
|
-
import { dateInRange as x, getToday as F, viewInRange as _, nullable as D, MIN_DATE as
|
|
17
|
+
import { EMPTY_SELECTIONRANGE as j } from "../models/SelectionRange.mjs";
|
|
18
|
+
import { Header as re } from "./Header.mjs";
|
|
19
|
+
import { dateInRange as x, getToday as F, viewInRange as _, nullable as D, MIN_DATE as le, MAX_DATE as he, isInRange as T } from "../../utils.mjs";
|
|
20
20
|
import { prevView as K, messages as Y, nextView as W } from "../../messages/index.mjs";
|
|
21
|
-
import { BusViewService as
|
|
22
|
-
import { NavigationService as
|
|
21
|
+
import { BusViewService as ce } from "../services/BusViewService.mjs";
|
|
22
|
+
import { NavigationService as de } from "../services/NavigationService.mjs";
|
|
23
23
|
import { HorizontalViewList as E } from "./HorizontalViewList.mjs";
|
|
24
|
-
import { TodayCommand as
|
|
25
|
-
import { packageMetadata as
|
|
26
|
-
const S = (l = v.defaultProps.min, i = v.defaultProps.max, a) => a instanceof Date && !Array.isArray(a) && T(g(a), l, i) ? g(a) : null,
|
|
24
|
+
import { TodayCommand as ue } from "./TodayCommand.mjs";
|
|
25
|
+
import { packageMetadata as z } from "../../package-metadata.mjs";
|
|
26
|
+
const S = (l = v.defaultProps.min, i = v.defaultProps.max, a) => a instanceof Date && !Array.isArray(a) && T(g(a), l, i) ? g(a) : null, U = (l = v.defaultProps.min, i = v.defaultProps.max, a) => Array.isArray(a) ? a.filter((c) => T(c, l, i)).map((c) => g(c)) : null, $ = (l) => typeof l == "object" && !(l instanceof Date) && l !== null && !Array.isArray(l) ? l : j, H = (l, i, a) => l || i && i[0] || a && a.start, pe = (l, i) => l.start === null && i === null ? "start" : l.end === null ? "end" : "start", u = class u extends d.Component {
|
|
27
27
|
constructor(i) {
|
|
28
|
-
super(i), this.dates = [], this.selectedDate = null, this.selectedMultiple = null, this.selectedRange =
|
|
28
|
+
super(i), this.dates = [], this.selectedDate = null, this.selectedMultiple = null, this.selectedRange = j, this._focusedDate = /* @__PURE__ */ new Date(), this.cellUID = this.props.id + "-cell-uid", this.activeRangeEnd = "start", this._element = null, this.intl = null, this.localization = null, this.service = null, this.calendarViewList = null, this.isActive = !1, this.calculateFocusFromValue = !0, this.showLicenseWatermark = !1, this.focus = () => {
|
|
29
29
|
this._element && this._element.focus();
|
|
30
30
|
}, this.clampRange = (e) => ({ start: e, end: null }), this.rangeWithFocused = (e, t) => ({
|
|
31
31
|
start: e.start,
|
|
@@ -179,8 +179,8 @@ const S = (l = v.defaultProps.min, i = v.defaultProps.max, a) => a instanceof Da
|
|
|
179
179
|
h.call(void 0, n);
|
|
180
180
|
}
|
|
181
181
|
this.valueDuringOnChange = void 0;
|
|
182
|
-
}, this.showLicenseWatermark = !
|
|
183
|
-
const a = i.value !== void 0 ? i.value : i.defaultValue || u.defaultProps.defaultValue, c = S(this.min, this.max, a), w =
|
|
182
|
+
}, this.showLicenseWatermark = !Q(z, { component: "MultiViewCalendar" }), this.licenseMessage = Z(z);
|
|
183
|
+
const a = i.value !== void 0 ? i.value : i.defaultValue || u.defaultProps.defaultValue, c = S(this.min, this.max, a), w = U(this.min, this.max, a), R = $(a), I = H(c, w, R), V = _(
|
|
184
184
|
A[i.defaultActiveView],
|
|
185
185
|
this.bottomView,
|
|
186
186
|
this.topView
|
|
@@ -190,7 +190,7 @@ const S = (l = v.defaultProps.min, i = v.defaultProps.max, a) => a instanceof Da
|
|
|
190
190
|
activeView: V,
|
|
191
191
|
focusedDate: b,
|
|
192
192
|
navigateDate: b
|
|
193
|
-
}, this.activeRangeEnd =
|
|
193
|
+
}, this.activeRangeEnd = pe(R, c), this.bus = new ce(this.handleViewChange), this.navigation = new de(this.bus), this.calculateFocusFromValue = !1, this.lastView = V, this.lastViewsCount = this.props.views || E.defaultProps.views;
|
|
194
194
|
}
|
|
195
195
|
get wrapperID() {
|
|
196
196
|
return this.props.id + "-wrapper-id";
|
|
@@ -256,16 +256,16 @@ const S = (l = v.defaultProps.min, i = v.defaultProps.max, a) => a instanceof Da
|
|
|
256
256
|
* @hidden
|
|
257
257
|
*/
|
|
258
258
|
render() {
|
|
259
|
-
this.props._ref && this.props._ref(this), this.intl =
|
|
259
|
+
this.props._ref && this.props._ref(this), this.intl = G(this), this.localization = X(this), this.bus.configure(this.bottomView, this.topView);
|
|
260
260
|
const i = _(this.state.activeView, this.bottomView, this.topView);
|
|
261
|
-
this.service = this.bus.service(i, this.intl), this.selectedDate = S(this.min, this.max, this.value), this.selectedMultiple =
|
|
262
|
-
const a =
|
|
261
|
+
this.service = this.bus.service(i, this.intl), this.selectedDate = S(this.min, this.max, this.value), this.selectedMultiple = U(this.min, this.max, this.value), this.selectedRange = $(this.value);
|
|
262
|
+
const a = H(this.selectedDate, this.selectedMultiple, this.selectedRange);
|
|
263
263
|
this._focusedDate = x(
|
|
264
264
|
this.calculateFocusFromValue && a !== null ? a : this.state.focusedDate,
|
|
265
265
|
this.min,
|
|
266
266
|
this.max
|
|
267
267
|
);
|
|
268
|
-
const c =
|
|
268
|
+
const c = ee(
|
|
269
269
|
"k-calendar k-calendar-range k-calendar-md",
|
|
270
270
|
{
|
|
271
271
|
"k-disabled": this.props.disabled
|
|
@@ -297,7 +297,7 @@ const S = (l = v.defaultProps.min, i = v.defaultProps.max, a) => a instanceof Da
|
|
|
297
297
|
dir: this.props.dir
|
|
298
298
|
},
|
|
299
299
|
/* @__PURE__ */ d.createElement(
|
|
300
|
-
|
|
300
|
+
re,
|
|
301
301
|
{
|
|
302
302
|
key: `.kendo.calendar.header.${n.getTime()}`,
|
|
303
303
|
activeView: i,
|
|
@@ -310,12 +310,12 @@ const S = (l = v.defaultProps.min, i = v.defaultProps.max, a) => a instanceof Da
|
|
|
310
310
|
headerTitle: this.props.headerTitle,
|
|
311
311
|
verticalView: this.props.mobileMode,
|
|
312
312
|
commands: /* @__PURE__ */ d.createElement(d.Fragment, null, /* @__PURE__ */ d.createElement(
|
|
313
|
-
|
|
313
|
+
L,
|
|
314
314
|
{
|
|
315
315
|
type: "button",
|
|
316
316
|
className: "k-calendar-nav-prev",
|
|
317
317
|
icon: this.isRtl ? "chevron-right" : "chevron-left",
|
|
318
|
-
svgIcon: this.isRtl ?
|
|
318
|
+
svgIcon: this.isRtl ? N : B,
|
|
319
319
|
fillMode: "flat",
|
|
320
320
|
title: R,
|
|
321
321
|
disabled: V,
|
|
@@ -323,7 +323,7 @@ const S = (l = v.defaultProps.min, i = v.defaultProps.max, a) => a instanceof Da
|
|
|
323
323
|
...e
|
|
324
324
|
}
|
|
325
325
|
), /* @__PURE__ */ d.createElement(
|
|
326
|
-
|
|
326
|
+
ue,
|
|
327
327
|
{
|
|
328
328
|
min: this.min,
|
|
329
329
|
max: this.max,
|
|
@@ -331,12 +331,12 @@ const S = (l = v.defaultProps.min, i = v.defaultProps.max, a) => a instanceof Da
|
|
|
331
331
|
disabled: !this.todayIsInRange
|
|
332
332
|
}
|
|
333
333
|
), /* @__PURE__ */ d.createElement(
|
|
334
|
-
|
|
334
|
+
L,
|
|
335
335
|
{
|
|
336
336
|
type: "button",
|
|
337
337
|
className: "k-calendar-nav-next",
|
|
338
338
|
icon: this.isRtl ? "chevron-left" : "chevron-right",
|
|
339
|
-
svgIcon: this.isRtl ? B :
|
|
339
|
+
svgIcon: this.isRtl ? B : N,
|
|
340
340
|
fillMode: "flat",
|
|
341
341
|
title: I,
|
|
342
342
|
disabled: b,
|
|
@@ -376,7 +376,7 @@ const S = (l = v.defaultProps.min, i = v.defaultProps.max, a) => a instanceof Da
|
|
|
376
376
|
allowReverse: this.props.allowReverse
|
|
377
377
|
}
|
|
378
378
|
),
|
|
379
|
-
this.showLicenseWatermark && /* @__PURE__ */ d.createElement(
|
|
379
|
+
this.showLicenseWatermark && /* @__PURE__ */ d.createElement(te, { message: this.licenseMessage })
|
|
380
380
|
);
|
|
381
381
|
}
|
|
382
382
|
// protected isListInRange = (list: Date[]): boolean => {
|
|
@@ -384,7 +384,7 @@ const S = (l = v.defaultProps.min, i = v.defaultProps.max, a) => a instanceof Da
|
|
|
384
384
|
// && this.max > list[Math.max(0, (this.props.views || MultiViewCalendarWithoutContext.defaultProps.views) - 1)];
|
|
385
385
|
// };
|
|
386
386
|
isInMonth(i, a) {
|
|
387
|
-
return !!a &&
|
|
387
|
+
return !!a && ne(a) <= i && i <= oe(a);
|
|
388
388
|
}
|
|
389
389
|
};
|
|
390
390
|
u.displayName = "MultiViewCalendar", u.propTypes = {
|
|
@@ -434,8 +434,8 @@ u.displayName = "MultiViewCalendar", u.propTypes = {
|
|
|
434
434
|
dir: s.string
|
|
435
435
|
}, u.defaultProps = {
|
|
436
436
|
disabled: !1,
|
|
437
|
-
min:
|
|
438
|
-
max:
|
|
437
|
+
min: le,
|
|
438
|
+
max: he,
|
|
439
439
|
navigation: !0,
|
|
440
440
|
defaultActiveView: "month",
|
|
441
441
|
defaultValue: null,
|
|
@@ -448,17 +448,17 @@ u.displayName = "MultiViewCalendar", u.propTypes = {
|
|
|
448
448
|
showOtherMonthDays: !1
|
|
449
449
|
};
|
|
450
450
|
let v = u;
|
|
451
|
-
const
|
|
452
|
-
|
|
453
|
-
|
|
451
|
+
const me = se(), ve = ie(
|
|
452
|
+
ae(
|
|
453
|
+
me,
|
|
454
454
|
v
|
|
455
455
|
)
|
|
456
456
|
);
|
|
457
|
-
|
|
458
|
-
X(v);
|
|
457
|
+
ve.displayName = "KendoReactMultiViewCalendar";
|
|
459
458
|
q(v);
|
|
459
|
+
J(v);
|
|
460
460
|
export {
|
|
461
|
-
|
|
462
|
-
|
|
461
|
+
ve as MultiViewCalendar,
|
|
462
|
+
me as MultiViewCalendarPropsContext,
|
|
463
463
|
v as MultiViewCalendarWithoutContext
|
|
464
464
|
};
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const 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"),O=require("@progress/kendo-svg-icons"),T=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"),P=require("@progress/kendo-react-buttons"),_=require("../common/AdaptiveMode.js"),A=require("@progress/kendo-react-layout");function N(d){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(a,e,s.get?s:{enumerable:!0,get:()=>d[e]})}}return a.default=d,Object.freeze(a)}const i=N(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.showLicenseWatermark=!1,this.focus=()=>{this.startDateInput&&this.startDateInput.focus()},this.setCalendarRef=e=>{this._calendar=e},this.focusCalendarElement=()=>{this._calendar&&this._calendar.element&&this._calendar.element.focus({preventScroll:!0})},this.calculateValue=(e,s)=>(e.value!==void 0?e.value:s.value)||h.EMPTY_SELECTIONRANGE,this.calculateShow=(e,s)=>e.show!==void 0?e.show:s.show,this.renderCalendar=()=>{const e=this.value||h.EMPTY_SELECTIONRANGE,s={min:this.min,max:this.max,allowReverse:this.props.allowReverse,mode:"range",focusedDate:this.props.focusedDate,disabled:this.props.disabled,className:this.mobileMode?"k-calendar-lg":"",mobileMode:this.mobileMode,...this.props.calendarSettings,value:e,dir:this.props.dir,onChange:this.handleCalendarChange};return this.props.calendar?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(A.ActionSheetContent,null,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},this.showLicenseWatermark=!o.validatePackage(T.packageMetadata,{component:"DateRangePicker"}),this.state={show:this.props.show||this.props.defaultShow||l.defaultProps.defaultShow,value:this.props.value||this.props.defaultValue||l.defaultProps.defaultValue,currentValue:h.EMPTY_SELECTIONRANGE},this.nextTick=this.nextTick.bind(this),this.setShow=this.setShow.bind(this),this.focusCalendarElement=this.focusCalendarElement.bind(this),this.focusDateInputElement=this.focusDateInputElement.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get _startInputId(){return this.props.id+"-start-input-id"}get _endInputId(){return this.props.id+"-end-input-id"}get element(){return this._element}get startDateInput(){return this._startDateInput.current}get endDateInput(){return this._endDateInput.current}get calendar(){return this._calendar}get value(){return(this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value)||h.EMPTY_SELECTIONRANGE}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get min(){return this.props.min!==void 0?this.props.min:l.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:l.defaultProps.max}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get localizationService(){return c.provideLocalizationService(this)}get mobileMode(){var e;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((e=this.props._adaptiveMode)==null?void 0:e.medium)&&this.props.adaptive)}componentDidMount(){var a;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this.shouldFocusCalendar&&this.focusCalendarElement(),this.mobileMode&&this.show&&setTimeout(()=>{this.focusCalendarElement()},300),this.shouldFocusDateInput&&this.focusDateInputElement(),this.shouldFocusCalendar=!1,this.shouldFocusDateInput=!1}componentWillUnmount(){var a;clearTimeout(this.nextTickId),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{autoFocus:a}=this.props,e=this.value||h.EMPTY_SELECTIONRANGE,s=this.mobileMode&&this.show?this.state.currentValue:e,r=(this.props.startDateInputSettings||{}).id||this._startInputId,m=(this.props.endDateInputSettings||{}).id||this._endInputId,w=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]),E=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:s.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:s.end,onChange:this.handleEndChange,inputAttributes:this.props.inputAttributes},y=i.createElement(P.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":r+" "+m,"aria-label":c.provideLocalizationService(this).toLanguageString(n.swapStartEnd,n.messages[n.swapStartEnd])},i.createElement(o.IconWrap,{style:{transform:"rotate(90deg)"},name:"arrows-swap",icon:O.arrowsSwapIcon}));return i.createElement(i.Fragment,null,i.createElement("span",{ref:R=>{this._element=R},className:w,style:this.props.style,id:this.props.id,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:this.props.tabIndex,onFocus:this.mobileMode?this.handleClick:this.handleFocus,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onBlur:this.mobileMode?void 0:this.handleBlur,dir:this.props.dir},this.props.startDateInput?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:E,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(),this.showLicenseWatermark&&i.createElement(o.WatermarkOverlay,null))}focusDateInputElement(){if(!document||!this.startDateInput||!this.startDateInput.element||!this.endDateInput||!this.endDateInput.element)return;const a=o.getActiveElement(document);(this.value.start===null||this.value.end!==null)&&a!==this.endDateInput.element?this.startDateInput.element.focus({preventScroll:!0}):a!==this.startDateInput.element&&this.endDateInput.element.focus({preventScroll:!0})}nextTick(a){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>a())}setShow(a){const{onOpen:e,onClose:s}=this.props;this.show!==a&&(this.setState({show:a}),a&&e&&e.call(void 0,{target:this}),!a&&s&&s.call(void 0,{target:this}))}calculateMedia(a){for(const e of a)this.setState({windowWidth:e.target.clientWidth})}};l.displayName="DateRangePicker",l.propTypes={allowReverse:t.bool,calendarSettings:t.any,className:t.string,defaultShow:t.bool,defaultValue:t.shape({start:u.nullable(t.instanceOf(Date).isRequired),end:u.nullable(t.instanceOf(Date).isRequired)}),disabled:t.bool,endDateInputSettings:t.shape(g.DateInput.propTypes),focusedDate:t.instanceOf(Date),format:t.oneOfType([t.string,t.shape({skeleton:t.string,pattern:t.string,date:t.oneOf(["short","medium","long","full"]),time:t.oneOf(["short","medium","long","full"]),datetime:t.oneOf(["short","medium","long","full"]),era:t.oneOf(["narrow","short","long"]),year:t.oneOf(["numeric","2-digit"]),month:t.oneOf(["numeric","2-digit","narrow","short","long"]),day:t.oneOf(["numeric","2-digit"]),weekday:t.oneOf(["narrow","short","long"]),hour:t.oneOf(["numeric","2-digit"]),hour12:t.bool,minute:t.oneOf(["numeric","2-digit"]),second:t.oneOf(["numeric","2-digit"]),timeZoneName:t.oneOf(["short","long"])})]),id:t.string,ariaLabelledBy:t.string,ariaDescribedBy:t.string,max:t.instanceOf(Date),min:t.instanceOf(Date),onBlur:t.func,onChange:t.func,onFocus:t.func,popupSettings:t.any,show:t.bool,startDateInputSettings:t.any,style:t.any,swapButton:t.any,tabIndex:t.number,dir:t.string,value:t.shape({start:u.nullable(t.instanceOf(Date)),end:u.nullable(t.instanceOf(Date))}),autoFocus:t.bool,inputAttributes:t.object},l.defaultProps={allowReverse:!1,defaultShow:!1,defaultValue:h.EMPTY_SELECTIONRANGE,disabled:!1,format:"d",max:u.MAX_DATE,min:u.MIN_DATE,swapButton:!1,autoFocus:!1};let p=l;const 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;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const M=require("react"),t=require("prop-types"),O=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"),b=require("../package-metadata.js"),g=require("../dateinput/DateInput.js"),x=require("../calendar/components/MultiViewCalendar.js"),h=require("../calendar/models/SelectionRange.js"),u=require("../utils.js"),i=require("../messages/index.js"),P=require("@progress/kendo-react-buttons"),_=require("../common/AdaptiveMode.js"),A=require("@progress/kendo-react-layout");function N(d){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const e in d)if(e!=="default"){const s=Object.getOwnPropertyDescriptor(d,e);Object.defineProperty(a,e,s.get?s:{enumerable:!0,get:()=>d[e]})}}return a.default=d,Object.freeze(a)}const n=N(M),l=class l extends n.Component{constructor(a){super(a),this._element=null,this._calendar=null,this._startDateInput=n.createRef(),this._endDateInput=n.createRef(),this.shouldFocusDateInput=!1,this.shouldFocusCalendar=!1,this.showLicenseWatermark=!1,this.focus=()=>{this.startDateInput&&this.startDateInput.focus()},this.setCalendarRef=e=>{this._calendar=e},this.focusCalendarElement=()=>{this._calendar&&this._calendar.element&&this._calendar.element.focus({preventScroll:!0})},this.calculateValue=(e,s)=>(e.value!==void 0?e.value:s.value)||h.EMPTY_SELECTIONRANGE,this.calculateShow=(e,s)=>e.show!==void 0?e.show:s.show,this.renderCalendar=()=>{const e=this.value||h.EMPTY_SELECTIONRANGE,s={min:this.min,max:this.max,allowReverse:this.props.allowReverse,mode:"range",focusedDate:this.props.focusedDate,disabled:this.props.disabled,className:this.mobileMode?"k-calendar-lg":"",mobileMode:this.mobileMode,...this.props.calendarSettings,value:e,dir:this.props.dir,onChange:this.handleCalendarChange};return this.props.calendar?n.createElement(this.props.calendar,{...s}):n.createElement(x.MultiViewCalendar,{...s,ref:this.setCalendarRef})},this.renderPopup=()=>{const e={popupClass:o.classNames("k-calendar-container","k-daterangepicker-popup"),animate:this._element!==null,anchor:this._element,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...this.props.popupSettings,show:this.show};return this.props.popup?n.createElement(this.props.popup,{...e},this.renderCalendar()):n.createElement(O.Popup,{...e},this.renderCalendar())},this.renderAdaptivePopup=()=>{const{windowWidth:e=0}=this.state,s={expand:this.show,onClose:r=>this.handleCancel(r),title:this.props.adaptiveTitle,windowWidth:e,footer:{cancelText:this.localizationService.toLanguageString(i.dateRangePickerCancel,i.messages[i.dateRangePickerCancel]),onCancel:this.handleCancel,applyText:this.localizationService.toLanguageString(i.dateRangePickerSet,i.messages[i.dateRangePickerSet]),onApply:this.handleBlur}};return n.createElement(_.AdaptiveMode,{...s},n.createElement(A.ActionSheetContent,null,n.createElement("div",{className:"k-scrollable-wrap"},this.renderCalendar())))},this.handleReverseClick=e=>{const s={start:this.value.end,end:this.value.start},r={syntheticEvent:e,nativeEvent:e.nativeEvent};this.handleChange(s,r)},this.handleReverseMouseDown=e=>{e.preventDefault()},this.handleFocus=e=>{clearTimeout(this.nextTickId),this.shouldFocusDateInput||this.mobileMode&&this.setState({currentValue:this.value});const{onFocus:s}=this.props;s&&s.call(void 0,e)},this.handleClick=()=>{this.shouldFocusDateInput||this.setShow(!0)},this.handleBlur=e=>{this.nextTick(()=>{this.setShow(!1)});const{onBlur:s}=this.props;s&&s.call(void 0,e)},this.handleCancel=e=>{this.nextTick(()=>{this.setShow(!1),this.setState({currentValue:h.EMPTY_SELECTIONRANGE})});const{onCancel:s}=this.props;s&&s.call(void 0,e)},this.handleEndChange=e=>{const s={start:this.value.start,end:D.cloneDate(e.value||void 0)};this.handleChange(s,e)},this.handleStartChange=e=>{const s={start:D.cloneDate(e.value||void 0),end:this.value.end};this.handleChange(s,e)},this.extractRangeFromValue=e=>{if(!Array.isArray(e.value)&&!(e.value instanceof Date))return e.value||h.EMPTY_SELECTIONRANGE;const s=Array.isArray(e.value)?e.value[0]:e.value;return{start:this.value.end!==null?s:this.value.start,end:this.value.start!==null?s:this.value.end}},this.handleCalendarChange=e=>{const s=this.extractRangeFromValue(e);this.handleChange(s,e)},this.handleKeyDown=e=>{const{keyCode:s,altKey:r}=e;s===o.Keys.esc?(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1)):r&&s===o.Keys.down?(e.preventDefault(),this.shouldFocusCalendar=!0,this.setShow(!0),this.focusCalendarElement()):r&&s===o.Keys.up&&(e.preventDefault(),this.shouldFocusDateInput=!0,this.setShow(!1))},this.handleChange=(e,s)=>{this.setState({value:e}),this.valueDuringOnChange=e;const{onChange:r}=this.props;if(r){const m={syntheticEvent:s.syntheticEvent,nativeEvent:s.nativeEvent,value:this.value,show:this.show,target:this};r.call(void 0,m)}this.valueDuringOnChange=void 0},this.showLicenseWatermark=!o.validatePackage(b.packageMetadata,{component:"DateRangePicker"}),this.licenseMessage=o.getLicenseMessage(b.packageMetadata),this.state={show:this.props.show||this.props.defaultShow||l.defaultProps.defaultShow,value:this.props.value||this.props.defaultValue||l.defaultProps.defaultValue,currentValue:h.EMPTY_SELECTIONRANGE},this.nextTick=this.nextTick.bind(this),this.setShow=this.setShow.bind(this),this.focusCalendarElement=this.focusCalendarElement.bind(this),this.focusDateInputElement=this.focusDateInputElement.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get _startInputId(){return this.props.id+"-start-input-id"}get _endInputId(){return this.props.id+"-end-input-id"}get element(){return this._element}get startDateInput(){return this._startDateInput.current}get endDateInput(){return this._endDateInput.current}get calendar(){return this._calendar}get value(){return(this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value)||h.EMPTY_SELECTIONRANGE}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get min(){return this.props.min!==void 0?this.props.min:l.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:l.defaultProps.max}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get localizationService(){return c.provideLocalizationService(this)}get mobileMode(){var e;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((e=this.props._adaptiveMode)==null?void 0:e.medium)&&this.props.adaptive)}componentDidMount(){var a;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this.shouldFocusCalendar&&this.focusCalendarElement(),this.mobileMode&&this.show&&setTimeout(()=>{this.focusCalendarElement()},300),this.shouldFocusDateInput&&this.focusDateInputElement(),this.shouldFocusCalendar=!1,this.shouldFocusDateInput=!1}componentWillUnmount(){var a;clearTimeout(this.nextTickId),(a=this.document)!=null&&a.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{autoFocus:a}=this.props,e=this.value||h.EMPTY_SELECTIONRANGE,s=this.mobileMode&&this.show?this.state.currentValue:e,r=(this.props.startDateInputSettings||{}).id||this._startInputId,m=(this.props.endDateInputSettings||{}).id||this._endInputId,S=o.classNames("k-daterangepicker",{"k-disabled":this.props.disabled},this.props.className),C=this.localizationService.toLanguageString(i.start,i.messages[i.start]),E=this.localizationService.toLanguageString(i.end,i.messages[i.end]),y=this.localizationService.toLanguageString(i.separator,i.messages[i.separator]),f={disableSelection:this.mobileMode&&!0,label:C,format:this.props.format,min:this.min,max:this.max,id:this._startInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.startDateInputSettings,value:s.start,onChange:this.handleStartChange,inputAttributes:this.props.inputAttributes},v={disableSelection:this.mobileMode&&!0,label:E,format:this.props.format,min:this.min,max:this.max,id:this._endInputId,disabled:this.props.disabled,valid:this.props.valid,tabIndex:this.props.tabIndex,ariaExpanded:this.show,clearButton:this.props.clearButton,...this.props.endDateInputSettings,value:s.end,onChange:this.handleEndChange,inputAttributes:this.props.inputAttributes},k=n.createElement(P.Button,{type:"button",className:"k-select",fillMode:"flat",title:c.provideLocalizationService(this).toLanguageString(i.swapStartEnd,i.messages[i.swapStartEnd]),onMouseDown:this.handleReverseMouseDown,onClick:this.handleReverseClick,"aria-controls":r+" "+m,"aria-label":c.provideLocalizationService(this).toLanguageString(i.swapStartEnd,i.messages[i.swapStartEnd])},n.createElement(o.IconWrap,{style:{transform:"rotate(90deg)"},name:"arrows-swap",icon:T.arrowsSwapIcon}));return n.createElement(n.Fragment,null,n.createElement("span",{ref:R=>{this._element=R},className:S,style:this.props.style,id:this.props.id,"aria-labelledby":this.props.ariaLabelledBy,"aria-describedby":this.props.ariaDescribedBy,tabIndex:this.props.tabIndex,onFocus:this.mobileMode?this.handleClick:this.handleFocus,onClick:this.handleClick,onKeyDown:this.handleKeyDown,onBlur:this.mobileMode?void 0:this.handleBlur,dir:this.props.dir},this.props.startDateInput?n.createElement(this.props.startDateInput,{...f}):n.createElement(g.DateInput,{...f,autoFocus:a,ref:this._startDateInput,ariaRole:"combobox",ariaControls:this._popupId}),(this.props.allowReverse||this.props.calendarSettings&&this.props.calendarSettings.allowReverse)&&this.props.swapButton?k:y,this.props.endDateInput?n.createElement(this.props.endDateInput,{...v}):n.createElement(g.DateInput,{...v,ref:this._endDateInput,ariaRole:"combobox",ariaControls:this._popupId}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup(),this.showLicenseWatermark&&n.createElement(o.WatermarkOverlay,{message:this.licenseMessage}))}focusDateInputElement(){if(!document||!this.startDateInput||!this.startDateInput.element||!this.endDateInput||!this.endDateInput.element)return;const a=o.getActiveElement(document);(this.value.start===null||this.value.end!==null)&&a!==this.endDateInput.element?this.startDateInput.element.focus({preventScroll:!0}):a!==this.startDateInput.element&&this.endDateInput.element.focus({preventScroll:!0})}nextTick(a){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>a())}setShow(a){const{onOpen:e,onClose:s}=this.props;this.show!==a&&(this.setState({show:a}),a&&e&&e.call(void 0,{target:this}),!a&&s&&s.call(void 0,{target:this}))}calculateMedia(a){for(const e of a)this.setState({windowWidth:e.target.clientWidth})}};l.displayName="DateRangePicker",l.propTypes={allowReverse:t.bool,calendarSettings:t.any,className:t.string,defaultShow:t.bool,defaultValue:t.shape({start:u.nullable(t.instanceOf(Date).isRequired),end:u.nullable(t.instanceOf(Date).isRequired)}),disabled:t.bool,endDateInputSettings:t.shape(g.DateInput.propTypes),focusedDate:t.instanceOf(Date),format:t.oneOfType([t.string,t.shape({skeleton:t.string,pattern:t.string,date:t.oneOf(["short","medium","long","full"]),time:t.oneOf(["short","medium","long","full"]),datetime:t.oneOf(["short","medium","long","full"]),era:t.oneOf(["narrow","short","long"]),year:t.oneOf(["numeric","2-digit"]),month:t.oneOf(["numeric","2-digit","narrow","short","long"]),day:t.oneOf(["numeric","2-digit"]),weekday:t.oneOf(["narrow","short","long"]),hour:t.oneOf(["numeric","2-digit"]),hour12:t.bool,minute:t.oneOf(["numeric","2-digit"]),second:t.oneOf(["numeric","2-digit"]),timeZoneName:t.oneOf(["short","long"])})]),id:t.string,ariaLabelledBy:t.string,ariaDescribedBy:t.string,max:t.instanceOf(Date),min:t.instanceOf(Date),onBlur:t.func,onChange:t.func,onFocus:t.func,popupSettings:t.any,show:t.bool,startDateInputSettings:t.any,style:t.any,swapButton:t.any,tabIndex:t.number,dir:t.string,value:t.shape({start:u.nullable(t.instanceOf(Date)),end:u.nullable(t.instanceOf(Date))}),autoFocus:t.bool,inputAttributes:t.object},l.defaultProps={allowReverse:!1,defaultShow:!1,defaultValue:h.EMPTY_SELECTIONRANGE,disabled:!1,format:"d",max:u.MAX_DATE,min:u.MIN_DATE,swapButton:!1,autoFocus:!1};let p=l;const I=o.createPropsContext(),w=o.withIdHOC(o.withPropsContext(I,o.withAdaptiveModeContext(p)));w.displayName="KendoReactDateRangePicker";c.registerForLocalization(p);exports.DateRangePicker=w;exports.DateRangePickerPropsContext=I;exports.DateRangePickerWithoutContext=p;
|
|
@@ -7,20 +7,20 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as i from "react";
|
|
9
9
|
import e from "prop-types";
|
|
10
|
-
import { Popup as
|
|
10
|
+
import { Popup as A } from "@progress/kendo-react-popup";
|
|
11
11
|
import { cloneDate as w } from "@progress/kendo-date-math";
|
|
12
|
-
import { classNames as D, Keys as c, validatePackage as
|
|
13
|
-
import { provideLocalizationService as m, registerForLocalization as
|
|
14
|
-
import { arrowsSwapIcon as
|
|
15
|
-
import { packageMetadata as
|
|
12
|
+
import { classNames as D, Keys as c, validatePackage as F, getLicenseMessage as P, canUseDOM as b, IconWrap as z, WatermarkOverlay as B, getActiveElement as L, createPropsContext as N, withIdHOC as V, withPropsContext as W, withAdaptiveModeContext as K } from "@progress/kendo-react-common";
|
|
13
|
+
import { provideLocalizationService as m, registerForLocalization as U } from "@progress/kendo-react-intl";
|
|
14
|
+
import { arrowsSwapIcon as q } from "@progress/kendo-svg-icons";
|
|
15
|
+
import { packageMetadata as I } from "../package-metadata.mjs";
|
|
16
16
|
import { DateInput as f } from "../dateinput/DateInput.mjs";
|
|
17
|
-
import { MultiViewCalendar as
|
|
17
|
+
import { MultiViewCalendar as j } from "../calendar/components/MultiViewCalendar.mjs";
|
|
18
18
|
import { EMPTY_SELECTIONRANGE as r } from "../calendar/models/SelectionRange.mjs";
|
|
19
|
-
import { nullable as h, MAX_DATE as
|
|
20
|
-
import { dateRangePickerCancel as
|
|
21
|
-
import { Button as
|
|
22
|
-
import { AdaptiveMode as
|
|
23
|
-
import { ActionSheetContent as
|
|
19
|
+
import { nullable as h, MAX_DATE as G, MIN_DATE as H } from "../utils.mjs";
|
|
20
|
+
import { dateRangePickerCancel as C, messages as l, dateRangePickerSet as S, start as E, end as y, separator as x, swapStartEnd as p } from "../messages/index.mjs";
|
|
21
|
+
import { Button as X } from "@progress/kendo-react-buttons";
|
|
22
|
+
import { AdaptiveMode as Y } from "../common/AdaptiveMode.mjs";
|
|
23
|
+
import { ActionSheetContent as Z } from "@progress/kendo-react-layout";
|
|
24
24
|
const o = class o extends i.Component {
|
|
25
25
|
constructor(a) {
|
|
26
26
|
super(a), this._element = null, this._calendar = null, this._startDateInput = i.createRef(), this._endDateInput = i.createRef(), this.shouldFocusDateInput = !1, this.shouldFocusCalendar = !1, this.showLicenseWatermark = !1, this.focus = () => {
|
|
@@ -44,7 +44,7 @@ const o = class o extends i.Component {
|
|
|
44
44
|
dir: this.props.dir,
|
|
45
45
|
onChange: this.handleCalendarChange
|
|
46
46
|
};
|
|
47
|
-
return this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { ...s }) : /* @__PURE__ */ i.createElement(
|
|
47
|
+
return this.props.calendar ? /* @__PURE__ */ i.createElement(this.props.calendar, { ...s }) : /* @__PURE__ */ i.createElement(j, { ...s, ref: this.setCalendarRef });
|
|
48
48
|
}, this.renderPopup = () => {
|
|
49
49
|
const t = {
|
|
50
50
|
popupClass: D("k-calendar-container", "k-daterangepicker-popup"),
|
|
@@ -62,7 +62,7 @@ const o = class o extends i.Component {
|
|
|
62
62
|
...this.props.popupSettings,
|
|
63
63
|
show: this.show
|
|
64
64
|
};
|
|
65
|
-
return this.props.popup ? /* @__PURE__ */ i.createElement(this.props.popup, { ...t }, this.renderCalendar()) : /* @__PURE__ */ i.createElement(
|
|
65
|
+
return this.props.popup ? /* @__PURE__ */ i.createElement(this.props.popup, { ...t }, this.renderCalendar()) : /* @__PURE__ */ i.createElement(A, { ...t }, this.renderCalendar());
|
|
66
66
|
}, this.renderAdaptivePopup = () => {
|
|
67
67
|
const { windowWidth: t = 0 } = this.state, s = {
|
|
68
68
|
expand: this.show,
|
|
@@ -71,15 +71,15 @@ const o = class o extends i.Component {
|
|
|
71
71
|
windowWidth: t,
|
|
72
72
|
footer: {
|
|
73
73
|
cancelText: this.localizationService.toLanguageString(
|
|
74
|
-
|
|
75
|
-
l[
|
|
74
|
+
C,
|
|
75
|
+
l[C]
|
|
76
76
|
),
|
|
77
77
|
onCancel: this.handleCancel,
|
|
78
|
-
applyText: this.localizationService.toLanguageString(
|
|
78
|
+
applyText: this.localizationService.toLanguageString(S, l[S]),
|
|
79
79
|
onApply: this.handleBlur
|
|
80
80
|
}
|
|
81
81
|
};
|
|
82
|
-
return /* @__PURE__ */ i.createElement(
|
|
82
|
+
return /* @__PURE__ */ i.createElement(Y, { ...s }, /* @__PURE__ */ i.createElement(Z, null, /* @__PURE__ */ i.createElement("div", { className: "k-scrollable-wrap" }, this.renderCalendar())));
|
|
83
83
|
}, this.handleReverseClick = (t) => {
|
|
84
84
|
const s = {
|
|
85
85
|
start: this.value.end,
|
|
@@ -139,17 +139,17 @@ const o = class o extends i.Component {
|
|
|
139
139
|
this.setState({ value: t }), this.valueDuringOnChange = t;
|
|
140
140
|
const { onChange: n } = this.props;
|
|
141
141
|
if (n) {
|
|
142
|
-
const
|
|
142
|
+
const u = {
|
|
143
143
|
syntheticEvent: s.syntheticEvent,
|
|
144
144
|
nativeEvent: s.nativeEvent,
|
|
145
145
|
value: this.value,
|
|
146
146
|
show: this.show,
|
|
147
147
|
target: this
|
|
148
148
|
};
|
|
149
|
-
n.call(void 0,
|
|
149
|
+
n.call(void 0, u);
|
|
150
150
|
}
|
|
151
151
|
this.valueDuringOnChange = void 0;
|
|
152
|
-
}, this.showLicenseWatermark = !
|
|
152
|
+
}, this.showLicenseWatermark = !F(I, { component: "DateRangePicker" }), this.licenseMessage = P(I), this.state = {
|
|
153
153
|
show: this.props.show || this.props.defaultShow || o.defaultProps.defaultShow,
|
|
154
154
|
value: this.props.value || this.props.defaultValue || o.defaultProps.defaultValue,
|
|
155
155
|
currentValue: r
|
|
@@ -246,15 +246,15 @@ const o = class o extends i.Component {
|
|
|
246
246
|
* @hidden
|
|
247
247
|
*/
|
|
248
248
|
render() {
|
|
249
|
-
const { autoFocus: a } = this.props, t = this.value || r, s = this.mobileMode && this.show ? this.state.currentValue : t, n = (this.props.startDateInputSettings || {}).id || this._startInputId,
|
|
249
|
+
const { autoFocus: a } = this.props, t = this.value || r, s = this.mobileMode && this.show ? this.state.currentValue : t, n = (this.props.startDateInputSettings || {}).id || this._startInputId, u = (this.props.endDateInputSettings || {}).id || this._endInputId, k = D(
|
|
250
250
|
"k-daterangepicker",
|
|
251
251
|
{
|
|
252
252
|
"k-disabled": this.props.disabled
|
|
253
253
|
},
|
|
254
254
|
this.props.className
|
|
255
|
-
),
|
|
255
|
+
), M = this.localizationService.toLanguageString(E, l[E]), O = this.localizationService.toLanguageString(y, l[y]), R = this.localizationService.toLanguageString(x, l[x]), g = {
|
|
256
256
|
disableSelection: this.mobileMode && !0,
|
|
257
|
-
label:
|
|
257
|
+
label: M,
|
|
258
258
|
format: this.props.format,
|
|
259
259
|
min: this.min,
|
|
260
260
|
max: this.max,
|
|
@@ -270,7 +270,7 @@ const o = class o extends i.Component {
|
|
|
270
270
|
inputAttributes: this.props.inputAttributes
|
|
271
271
|
}, v = {
|
|
272
272
|
disableSelection: this.mobileMode && !0,
|
|
273
|
-
label:
|
|
273
|
+
label: O,
|
|
274
274
|
format: this.props.format,
|
|
275
275
|
min: this.min,
|
|
276
276
|
max: this.max,
|
|
@@ -284,8 +284,8 @@ const o = class o extends i.Component {
|
|
|
284
284
|
value: s.end,
|
|
285
285
|
onChange: this.handleEndChange,
|
|
286
286
|
inputAttributes: this.props.inputAttributes
|
|
287
|
-
},
|
|
288
|
-
|
|
287
|
+
}, T = /* @__PURE__ */ i.createElement(
|
|
288
|
+
X,
|
|
289
289
|
{
|
|
290
290
|
type: "button",
|
|
291
291
|
className: "k-select",
|
|
@@ -293,21 +293,21 @@ const o = class o extends i.Component {
|
|
|
293
293
|
title: m(this).toLanguageString(p, l[p]),
|
|
294
294
|
onMouseDown: this.handleReverseMouseDown,
|
|
295
295
|
onClick: this.handleReverseClick,
|
|
296
|
-
"aria-controls": n + " " +
|
|
296
|
+
"aria-controls": n + " " + u,
|
|
297
297
|
"aria-label": m(this).toLanguageString(
|
|
298
298
|
p,
|
|
299
299
|
l[p]
|
|
300
300
|
)
|
|
301
301
|
},
|
|
302
|
-
/* @__PURE__ */ i.createElement(
|
|
302
|
+
/* @__PURE__ */ i.createElement(z, { style: { transform: "rotate(90deg)" }, name: "arrows-swap", icon: q })
|
|
303
303
|
);
|
|
304
304
|
return /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement(
|
|
305
305
|
"span",
|
|
306
306
|
{
|
|
307
|
-
ref: (
|
|
308
|
-
this._element =
|
|
307
|
+
ref: (_) => {
|
|
308
|
+
this._element = _;
|
|
309
309
|
},
|
|
310
|
-
className:
|
|
310
|
+
className: k,
|
|
311
311
|
style: this.props.style,
|
|
312
312
|
id: this.props.id,
|
|
313
313
|
"aria-labelledby": this.props.ariaLabelledBy,
|
|
@@ -329,7 +329,7 @@ const o = class o extends i.Component {
|
|
|
329
329
|
ariaControls: this._popupId
|
|
330
330
|
}
|
|
331
331
|
),
|
|
332
|
-
(this.props.allowReverse || this.props.calendarSettings && this.props.calendarSettings.allowReverse) && this.props.swapButton ?
|
|
332
|
+
(this.props.allowReverse || this.props.calendarSettings && this.props.calendarSettings.allowReverse) && this.props.swapButton ? T : R,
|
|
333
333
|
this.props.endDateInput ? /* @__PURE__ */ i.createElement(this.props.endDateInput, { ...v }) : /* @__PURE__ */ i.createElement(
|
|
334
334
|
f,
|
|
335
335
|
{
|
|
@@ -340,12 +340,12 @@ const o = class o extends i.Component {
|
|
|
340
340
|
}
|
|
341
341
|
),
|
|
342
342
|
!this.mobileMode && this.renderPopup()
|
|
343
|
-
), this.mobileMode && this.renderAdaptivePopup(), this.showLicenseWatermark && /* @__PURE__ */ i.createElement(
|
|
343
|
+
), this.mobileMode && this.renderAdaptivePopup(), this.showLicenseWatermark && /* @__PURE__ */ i.createElement(B, { message: this.licenseMessage }));
|
|
344
344
|
}
|
|
345
345
|
focusDateInputElement() {
|
|
346
346
|
if (!document || !this.startDateInput || !this.startDateInput.element || !this.endDateInput || !this.endDateInput.element)
|
|
347
347
|
return;
|
|
348
|
-
const a =
|
|
348
|
+
const a = L(document);
|
|
349
349
|
(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 });
|
|
350
350
|
}
|
|
351
351
|
nextTick(a) {
|
|
@@ -423,22 +423,22 @@ o.displayName = "DateRangePicker", o.propTypes = {
|
|
|
423
423
|
defaultValue: r,
|
|
424
424
|
disabled: !1,
|
|
425
425
|
format: "d",
|
|
426
|
-
max:
|
|
427
|
-
min:
|
|
426
|
+
max: G,
|
|
427
|
+
min: H,
|
|
428
428
|
swapButton: !1,
|
|
429
429
|
autoFocus: !1
|
|
430
430
|
};
|
|
431
|
-
let
|
|
432
|
-
const
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
431
|
+
let d = o;
|
|
432
|
+
const J = N(), Q = V(
|
|
433
|
+
W(
|
|
434
|
+
J,
|
|
435
|
+
K(d)
|
|
436
436
|
)
|
|
437
437
|
);
|
|
438
|
-
|
|
439
|
-
|
|
438
|
+
Q.displayName = "KendoReactDateRangePicker";
|
|
439
|
+
U(d);
|
|
440
440
|
export {
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
441
|
+
Q as DateRangePicker,
|
|
442
|
+
J as DateRangePickerPropsContext,
|
|
443
|
+
d as DateRangePickerWithoutContext
|
|
444
444
|
};
|