@progress/kendo-react-dateinputs 13.4.0-develop.3 → 13.4.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/dateinput/DateInput.d.ts +3 -2
- package/dateinput/DateInput.js +1 -1
- package/dateinput/DateInput.mjs +1 -1
- package/datepicker/DatePicker.d.ts +3 -2
- package/datepicker/DatePicker.js +1 -1
- package/datepicker/DatePicker.mjs +322 -294
- package/datetimepicker/DateTimePicker.d.ts +7 -3
- package/datetimepicker/DateTimePicker.js +1 -1
- package/datetimepicker/DateTimePicker.mjs +141 -111
- package/dist/cdn/js/kendo-react-dateinputs.js +1 -1
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +1 -1
- package/package.json +8 -8
- package/timepicker/TimePicker.d.ts +7 -3
- package/timepicker/TimePicker.js +1 -1
- package/timepicker/TimePicker.mjs +171 -140
|
@@ -95,6 +95,7 @@ export interface DateTimePickerProps extends DateTimePickerSettings, FormCompone
|
|
|
95
95
|
* - medium
|
|
96
96
|
* - large
|
|
97
97
|
* - full
|
|
98
|
+
* - none
|
|
98
99
|
*
|
|
99
100
|
* @default undefined (theme-controlled)
|
|
100
101
|
*
|
|
@@ -103,7 +104,7 @@ export interface DateTimePickerProps extends DateTimePickerSettings, FormCompone
|
|
|
103
104
|
* <DateTimePicker rounded="full" />
|
|
104
105
|
* ```
|
|
105
106
|
*/
|
|
106
|
-
rounded?: 'small' | 'medium' | 'large' | 'full';
|
|
107
|
+
rounded?: 'small' | 'medium' | 'large' | 'full' | 'none';
|
|
107
108
|
/**
|
|
108
109
|
* Control the `fillMode` (background) of the DateTimePicker.
|
|
109
110
|
*
|
|
@@ -247,7 +248,7 @@ export declare class DateTimePickerWithoutContext extends React.Component<DateTi
|
|
|
247
248
|
valid: PropTypes.Requireable<boolean>;
|
|
248
249
|
cancelButton: PropTypes.Requireable<boolean>;
|
|
249
250
|
size: PropTypes.Requireable<"small" | "medium" | "large" | undefined>;
|
|
250
|
-
rounded: PropTypes.Requireable<"small" | "medium" | "large" | "full" | undefined>;
|
|
251
|
+
rounded: PropTypes.Requireable<"small" | "none" | "medium" | "large" | "full" | undefined>;
|
|
251
252
|
fillMode: PropTypes.Requireable<"flat" | "solid" | "outline" | undefined>;
|
|
252
253
|
autoFocus: PropTypes.Requireable<boolean>;
|
|
253
254
|
inputAttributes: PropTypes.Requireable<object>;
|
|
@@ -269,7 +270,7 @@ export declare class DateTimePickerWithoutContext extends React.Component<DateTi
|
|
|
269
270
|
cancelButton: boolean;
|
|
270
271
|
dateInput: React.ComponentType<DateInputProps<any>>;
|
|
271
272
|
size: "small" | "medium" | "large" | undefined;
|
|
272
|
-
rounded: "small" | "medium" | "large" | "full" | undefined;
|
|
273
|
+
rounded: "small" | "none" | "medium" | "large" | "full" | undefined;
|
|
273
274
|
fillMode: "flat" | "solid" | "outline" | undefined;
|
|
274
275
|
autoFocus: boolean;
|
|
275
276
|
};
|
|
@@ -287,6 +288,7 @@ export declare class DateTimePickerWithoutContext extends React.Component<DateTi
|
|
|
287
288
|
private shouldFocusDateInput;
|
|
288
289
|
private prevShow;
|
|
289
290
|
private observerResize?;
|
|
291
|
+
private KendoPasteSubscription?;
|
|
290
292
|
private get document();
|
|
291
293
|
constructor(props: DateTimePickerProps);
|
|
292
294
|
/**
|
|
@@ -343,6 +345,8 @@ export declare class DateTimePickerWithoutContext extends React.Component<DateTi
|
|
|
343
345
|
* @hidden
|
|
344
346
|
*/
|
|
345
347
|
componentWillUnmount(): void;
|
|
348
|
+
private handleSmartPasteValue;
|
|
349
|
+
private applyKendoPasteDate;
|
|
346
350
|
/**
|
|
347
351
|
* @hidden
|
|
348
352
|
*/
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),e=require("prop-types"),J=require("@progress/kendo-react-popup"),I=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),Q=require("@progress/kendo-svg-icons"),ee=require("../dateinput/DateInput.js"),te=require("@progress/kendo-react-buttons"),p=require("../utils.js"),l=require("../messages/index.js"),m=require("@progress/kendo-react-intl"),ie=require("./DateTimeSelector.js"),se=require("../timepicker/utils.js"),oe=require("../hooks/usePickerFloatingLabel.js"),ae=require("../common/AdaptiveMode.js"),ne=require("@progress/kendo-react-layout");function re(h){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(h){for(const t in h)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(h,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>h[t]})}}return i.default=h,Object.freeze(i)}const r=re(G),a=class a extends r.Component{constructor(i){super(i),this._element=null,this._dateInput=r.createRef(),this._dateTimeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{const t=this.dateInputElement();t&&t.focus()},this.renderPicker=()=>{const{disabled:t,minTime:s,maxTime:n,format:c,calendar:d,cancelButton:u,weekNumber:v,focusedDate:f,unstyled:w}=this.props;return r.createElement(ie.DateTimeSelector,{ref:b=>{this._dateTimeSelector=b},cancelButton:u,steps:this.props.steps,value:this.value,onChange:this.handleValueChange,onReject:this.handleReject,disabled:t,weekNumber:v,min:this.min,max:this.max,minTime:s,maxTime:n,focusedDate:f,format:c,calendar:d,mobileMode:this.mobileMode,footerActions:!this.mobileMode,unstyled:w})},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerCancel,l.messages[l.dateTimePickerCancel]),n=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerSet,l.messages[l.dateTimePickerSet]),c={expand:this.show,onClose:this.handleBlur,title:this.props.adaptiveTitle||this.props.label,subTitle:this.props.adaptiveSubtitle,windowWidth:t,footer:{cancelText:s,onCancel:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleReject(d)},applyText:n,onApply:d=>{var u;return(u=this._dateTimeSelector)==null?void 0:u.handleAccept(d)}}};return r.createElement(ae.AdaptiveMode,{...c},r.createElement(ne.ActionSheetContent,null,this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=t=>{this.setState({value:I.cloneDate(t.value||void 0)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:s}=this.props;s&&s.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,value:this.value,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:s,keyCode:n}=t;if(n===o.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(n===o.Keys.up||n===o.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=n===o.Keys.up,this.setShow(n===o.Keys.down))},this.dateInputElement=()=>this.dateInput&&this.dateInput.element||this.element&&this.element.querySelector(".k-dateinput > input.k-input-inner"),this.state={value:this.props.defaultValue||a.defaultProps.defaultValue,show:this.props.defaultShow||a.defaultProps.defaultShow,focused:!1}}get _popupId(){return this.props.id+"-popup-id"}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?I.cloneDate(i):null}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get name(){return this.props.name}get mobileMode(){var t;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((t=this.props._adaptiveMode)==null?void 0:t.medium)&&this.props.adaptive)}get min(){return this.props.min!==void 0?this.props.min:a.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:a.defaultProps.max}get validity(){const i=p.isInDateRange(this.value,this.min,this.max)&&se.isInTimeRange(this.value,this.props.minTime||p.MIN_TIME,this.props.maxTime||p.MAX_TIME),t=this.props.validationMessage!==void 0,s=(!this.required||this.value!==null)&&i,n=this.props.valid!==void 0?this.props.valid:s;return{customError:t,rangeOverflow:this.value&&this.max.getTime()<this.value.getTime()||!1,rangeUnderflow:this.value&&this.value.getTime()<this.min.getTime()||!1,valid:n,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:a.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get dateInputComp(){return this.props.dateInput||a.defaultProps.dateInput}componentDidMount(){var i;this.observerResize=o.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(){const i=this.dateInputElement();this._dateTimeSelector&&this.show&&!this.prevShow&&this._dateTimeSelector.focus({preventScroll:!0}),this.mobileMode&&this.show&&!this.prevShow&&setTimeout(()=>{this._dateTimeSelector&&this._dateTimeSelector.focus({preventScroll:!0})},300),i&&!this.show&&this.shouldFocusDateInput&&i.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var i;clearTimeout(this.nextTickId),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect()}render(){const{size:i=a.defaultProps.size,rounded:t=a.defaultProps.rounded,fillMode:s=a.defaultProps.fillMode,autoFocus:n=a.defaultProps.autoFocus,inputAttributes:c,disabled:d,tabIndex:u,title:v,id:f,format:w,formatPlaceholder:b,min:M,max:k,className:C,width:x,name:q,validationMessage:E,required:F,validityStyles:R,minTime:A,maxTime:z,ariaLabelledBy:B,ariaDescribedBy:N,popup:_=J.Popup,unstyled:y,autoFill:L,twoDigitYearMax:K,enableMouseWheel:j,autoCorrectParts:V,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H}=this.props,S=y&&y.uDateTimePicker,D=!this.validityStyles||this.validity.valid,X={id:f,ariaLabelledBy:B,ariaDescribedBy:N,format:w,formatPlaceholder:b,disabled:d,title:v,validityStyles:R,validationMessage:E,required:F,min:M,max:k,minTime:A,maxTime:z,name:q,tabIndex:this.show?-1:u,valid:this.validity.valid,value:this.value,onChange:this.handleValueChange,steps:this.props.steps,label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaExpanded:this.show,unstyled:y,autoFill:L,twoDigitYearMax:K,enableMouseWheel:j,autoCorrectParts:V,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H},T=r.createElement(o.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:Y,onBlur:Z})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:$=>{this._element=$},className:o.classNames(o.uDateTimePicker.wrapper({c:S,size:i,fillMode:s,rounded:t,disabled:d,required:this.required,invalid:!D}),C),onKeyDown:this.handleKeyDown,style:{width:x},onFocus:this.mobileMode?this.handleClick:Y,onBlur:Z,onClick:this.mobileMode?this.handleClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,ariaHasPopup:"dialog",autoFocus:n,inputAttributes:c,...X}),r.createElement(te.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:Q.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:o.classNames(o.uDateTimePicker.inputButton({c:S})),fillMode:s,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(_,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:o.classNames(o.uDateTimePicker.popup({c:S})),id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"}},!this.mobileMode&&this.renderPicker())),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(oe.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:f,editorValid:D,editorDisabled:this.props.disabled,children:T,style:{width:this.props.width}}):T}setShow(i){const{onOpen:t,onClose:s}=this.props;this.show!==i&&(this.setState({show:i}),i&&t&&t.call(void 0,{target:this}),!i&&s&&s.call(void 0,{target:this}))}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}calculateMedia(i){for(const t of i)this.setState({windowWidth:t.target.clientWidth})}};a.displayName="DateTimePicker",a.propTypes={className:e.string,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,focusedDate:e.instanceOf(Date),format:e.oneOfType([e.string,e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),formatPlaceholder:e.oneOfType([e.oneOf(["wide","narrow","short","formatPattern"]),e.shape({year:e.string,month:e.string,day:e.string,hour:e.string,minute:e.string,second:e.string})]),id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:e.bool,appendTo:e.any,popupClass:e.string}),show:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),weekNumber:e.bool,width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,cancelButton:e.bool,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full"]),fillMode:e.oneOf(["solid","flat","outline"]),autoFocus:e.bool,inputAttributes:e.object},a.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"g",max:p.MAX_DATE,min:p.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,cancelButton:!0,dateInput:ee.DateInput,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1};let g=a;const P=o.createPropsContext(),O=o.withIdHOC(o.withPropsContext(P,o.withUnstyledHOC(o.withAdaptiveModeContext(g))));O.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=O;exports.DateTimePickerPropsContext=P;exports.DateTimePickerWithoutContext=g;
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),e=require("prop-types"),J=require("@progress/kendo-react-popup"),P=require("@progress/kendo-date-math"),o=require("@progress/kendo-react-common"),Q=require("@progress/kendo-svg-icons"),ee=require("../dateinput/DateInput.js"),te=require("@progress/kendo-react-buttons"),d=require("../utils.js"),l=require("../messages/index.js"),m=require("@progress/kendo-react-intl"),ie=require("./DateTimeSelector.js"),se=require("../timepicker/utils.js"),oe=require("../hooks/usePickerFloatingLabel.js"),ne=require("../common/AdaptiveMode.js"),ae=require("@progress/kendo-react-layout");function re(c){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const t in c)if(t!=="default"){const s=Object.getOwnPropertyDescriptor(c,t);Object.defineProperty(i,t,s.get?s:{enumerable:!0,get:()=>c[t]})}}return i.default=c,Object.freeze(i)}const r=re(G),a=class a extends r.Component{constructor(i){super(i),this._element=null,this._dateInput=r.createRef(),this._dateTimeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.handleSmartPasteValue=t=>{if(t instanceof Date&&!isNaN(t.getTime())){this.applyKendoPasteDate(t);return}const s=t!=null?String(t):"";if(!s)return;const n=new Date(s);isNaN(n.getTime())||this.applyKendoPasteDate(n)},this.applyKendoPasteDate=t=>{if(!d.isInDateRange(t,this.min,this.max))return;const s=new Event("change",{bubbles:!0}),n={target:this._element,currentTarget:this._element,nativeEvent:s};this.handleValueChange({syntheticEvent:n,nativeEvent:s,value:t})},this.focus=()=>{const t=this.dateInputElement();t&&t.focus()},this.renderPicker=()=>{const{disabled:t,minTime:s,maxTime:n,format:p,calendar:u,cancelButton:h,weekNumber:v,focusedDate:f,unstyled:b}=this.props;return r.createElement(ie.DateTimeSelector,{ref:w=>{this._dateTimeSelector=w},cancelButton:h,steps:this.props.steps,value:this.value,onChange:this.handleValueChange,onReject:this.handleReject,disabled:t,weekNumber:v,min:this.min,max:this.max,minTime:s,maxTime:n,focusedDate:f,format:p,calendar:u,mobileMode:this.mobileMode,footerActions:!this.mobileMode,unstyled:b})},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerCancel,l.messages[l.dateTimePickerCancel]),n=m.provideLocalizationService(this).toLanguageString(l.dateTimePickerSet,l.messages[l.dateTimePickerSet]),p={expand:this.show,onClose:this.handleBlur,title:this.props.adaptiveTitle||this.props.label,subTitle:this.props.adaptiveSubtitle,windowWidth:t,footer:{cancelText:s,onCancel:u=>{var h;return(h=this._dateTimeSelector)==null?void 0:h.handleReject(u)},applyText:n,onApply:u=>{var h;return(h=this._dateTimeSelector)==null?void 0:h.handleAccept(u)}}};return r.createElement(ne.AdaptiveMode,{...p},r.createElement(ae.ActionSheetContent,null,this.renderPicker()))},this.handleReject=()=>{this.shouldFocusDateInput=!0,this.setShow(!1)},this.handleValueChange=t=>{this.setState({value:P.cloneDate(t.value||void 0)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.mobileMode||(this.shouldFocusDateInput=!0);const{onChange:s}=this.props;s&&s.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,value:this.value,show:this.show,target:this}),this.valueDuringOnChange=void 0,this.showDuringOnChange=void 0,this.setShow(!1)},this.handleFocus=()=>{this.setState({focused:!0})},this.handleBlur=()=>{this.setState({focused:!1}),this.setShow(!1)},this.handleClick=()=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:s,keyCode:n}=t;if(n===o.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(n===o.Keys.up||n===o.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=n===o.Keys.up,this.setShow(n===o.Keys.down))},this.dateInputElement=()=>this.dateInput&&this.dateInput.element||this.element&&this.element.querySelector(".k-dateinput > input.k-input-inner"),this.state={value:this.props.defaultValue||a.defaultProps.defaultValue,show:this.props.defaultShow||a.defaultProps.defaultShow,focused:!1}}get _popupId(){return this.props.id+"-popup-id"}get document(){if(o.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?P.cloneDate(i):null}get show(){return this.showDuringOnChange!==void 0?this.showDuringOnChange:this.props.show!==void 0?this.props.show:this.state.show}get name(){return this.props.name}get mobileMode(){var t;return!!(this.state.windowWidth&&this.props._adaptiveMode&&this.state.windowWidth<=((t=this.props._adaptiveMode)==null?void 0:t.medium)&&this.props.adaptive)}get min(){return this.props.min!==void 0?this.props.min:a.defaultProps.min}get max(){return this.props.max!==void 0?this.props.max:a.defaultProps.max}get validity(){const i=d.isInDateRange(this.value,this.min,this.max)&&se.isInTimeRange(this.value,this.props.minTime||d.MIN_TIME,this.props.maxTime||d.MAX_TIME),t=this.props.validationMessage!==void 0,s=(!this.required||this.value!==null)&&i,n=this.props.valid!==void 0?this.props.valid:s;return{customError:t,rangeOverflow:this.value&&this.max.getTime()<this.value.getTime()||!1,rangeUnderflow:this.value&&this.value.getTime()<this.min.getTime()||!1,valid:n,valueMissing:this.value===null}}get validityStyles(){return this.props.validityStyles!==void 0?this.props.validityStyles:a.defaultProps.validityStyles}get required(){return this.props.required!==void 0?this.props.required:!1}get dateInputComp(){return this.props.dateInput||a.defaultProps.dateInput}componentDidMount(){var t;this.observerResize=o.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(t=this.document)!=null&&t.body&&this.observerResize&&this.observerResize.observe(this.document.body);const i=this.props.name||this.props.id;this.KendoPasteSubscription=o.subscribeToKendoPaste(this._element,{fieldName:i,onValueChange:s=>{this.handleSmartPasteValue(s)}})}componentDidUpdate(){const i=this.dateInputElement();this._dateTimeSelector&&this.show&&!this.prevShow&&this._dateTimeSelector.focus({preventScroll:!0}),this.mobileMode&&this.show&&!this.prevShow&&setTimeout(()=>{this._dateTimeSelector&&this._dateTimeSelector.focus({preventScroll:!0})},300),i&&!this.show&&this.shouldFocusDateInput&&i.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var i,t;clearTimeout(this.nextTickId),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.disconnect(),(t=this.KendoPasteSubscription)==null||t.unsubscribe()}render(){const{size:i=a.defaultProps.size,rounded:t=a.defaultProps.rounded,fillMode:s=a.defaultProps.fillMode,autoFocus:n=a.defaultProps.autoFocus,inputAttributes:p,disabled:u,tabIndex:h,title:v,id:f,format:b,formatPlaceholder:w,min:C,max:M,className:k,width:x,name:E,validationMessage:q,required:R,validityStyles:F,minTime:N,maxTime:A,ariaLabelledBy:z,ariaDescribedBy:_,popup:B=J.Popup,unstyled:S,autoFill:K,twoDigitYearMax:L,enableMouseWheel:V,autoCorrectParts:j,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H}=this.props,y=S&&S.uDateTimePicker,D=!this.validityStyles||this.validity.valid,X={id:f,ariaLabelledBy:z,ariaDescribedBy:_,format:b,formatPlaceholder:w,disabled:u,title:v,validityStyles:F,validationMessage:q,required:R,min:C,max:M,minTime:N,maxTime:A,name:E,tabIndex:this.show?-1:h,valid:this.validity.valid,value:this.value,onChange:this.handleValueChange,steps:this.props.steps,label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaExpanded:this.show,unstyled:S,autoFill:K,twoDigitYearMax:L,enableMouseWheel:V,autoCorrectParts:j,autoSwitchParts:U,autoSwitchKeys:W,allowCaretMode:H},T=r.createElement(o.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.handleBlur,onSyncFocus:this.props.onFocus,onSyncBlur:this.props.onBlur},({onFocus:Y,onBlur:Z})=>r.createElement(r.Fragment,null,r.createElement("div",{ref:$=>{this._element=$},className:o.classNames(o.uDateTimePicker.wrapper({c:y,size:i,fillMode:s,rounded:t,disabled:u,required:this.required,invalid:!D}),k),onKeyDown:this.handleKeyDown,style:{width:x},onFocus:this.mobileMode?this.handleClick:Y,onBlur:Z,onClick:this.mobileMode?this.handleClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,ariaHasPopup:"dialog",autoFocus:n,inputAttributes:p,...X}),r.createElement(te.Button,{tabIndex:-1,type:"button",icon:"calendar",svgIcon:Q.calendarIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleClick,title:m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector]),className:o.classNames(o.uDateTimePicker.inputButton({c:y})),fillMode:s,"aria-label":m.provideLocalizationService(this).toLanguageString(l.toggleDateTimeSelector,l.messages[l.toggleDateTimeSelector])}),r.createElement(B,{show:this.show,animate:this.element!==null,anchor:this.element,popupClass:o.classNames(o.uDateTimePicker.popup({c:y})),id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"}},!this.mobileMode&&this.renderPicker())),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(oe.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:f,editorValid:D,editorDisabled:this.props.disabled,children:T,style:{width:this.props.width}}):T}setShow(i){const{onOpen:t,onClose:s}=this.props;this.show!==i&&(this.setState({show:i}),i&&t&&t.call(void 0,{target:this}),!i&&s&&s.call(void 0,{target:this}))}nextTick(i){clearTimeout(this.nextTickId),this.nextTickId=window.setTimeout(()=>i())}calculateMedia(i){for(const t of i)this.setState({windowWidth:t.target.clientWidth})}};a.displayName="DateTimePicker",a.propTypes={className:e.string,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,focusedDate:e.instanceOf(Date),format:e.oneOfType([e.string,e.shape({skeleton:e.string,pattern:e.string,date:e.oneOf(["short","medium","long","full"]),time:e.oneOf(["short","medium","long","full"]),datetime:e.oneOf(["short","medium","long","full"]),era:e.oneOf(["narrow","short","long"]),year:e.oneOf(["numeric","2-digit"]),month:e.oneOf(["numeric","2-digit","narrow","short","long"]),day:e.oneOf(["numeric","2-digit"]),weekday:e.oneOf(["narrow","short","long"]),hour:e.oneOf(["numeric","2-digit"]),hour12:e.bool,minute:e.oneOf(["numeric","2-digit"]),second:e.oneOf(["numeric","2-digit"]),timeZoneName:e.oneOf(["short","long"])})]),formatPlaceholder:e.oneOfType([e.oneOf(["wide","narrow","short","formatPattern"]),e.shape({year:e.string,month:e.string,day:e.string,hour:e.string,minute:e.string,second:e.string})]),id:e.string,ariaLabelledBy:e.string,ariaDescribedBy:e.string,min:e.instanceOf(Date),max:e.instanceOf(Date),name:e.string,popupSettings:e.shape({animate:e.bool,appendTo:e.any,popupClass:e.string}),show:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),weekNumber:e.bool,width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,cancelButton:e.bool,size:e.oneOf(["small","medium","large"]),rounded:e.oneOf(["small","medium","large","full","none"]),fillMode:e.oneOf(["solid","flat","outline"]),autoFocus:e.bool,inputAttributes:e.object},a.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"g",max:d.MAX_DATE,min:d.MIN_DATE,popupSettings:{},tabIndex:0,weekNumber:!1,validityStyles:!0,cancelButton:!0,dateInput:ee.DateInput,size:void 0,rounded:void 0,fillMode:void 0,autoFocus:!1};let g=a;const I=o.createPropsContext(),O=o.withIdHOC(o.withPropsContext(I,o.withUnstyledHOC(o.withAdaptiveModeContext(g))));O.displayName="KendoReactDateTimePicker";m.registerForLocalization(g);exports.DateTimePicker=O;exports.DateTimePickerPropsContext=I;exports.DateTimePickerWithoutContext=g;
|
|
@@ -7,29 +7,52 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as n from "react";
|
|
9
9
|
import e from "prop-types";
|
|
10
|
-
import { Popup as
|
|
11
|
-
import { cloneDate as
|
|
12
|
-
import { withIdHOC as
|
|
13
|
-
import { calendarIcon as
|
|
14
|
-
import { DateInput as
|
|
15
|
-
import { Button as
|
|
16
|
-
import {
|
|
17
|
-
import { dateTimePickerCancel as
|
|
18
|
-
import { provideLocalizationService as m, registerForLocalization as
|
|
19
|
-
import { DateTimeSelector as
|
|
20
|
-
import { isInTimeRange as
|
|
21
|
-
import { PickerFloatingLabel as
|
|
22
|
-
import { AdaptiveMode as
|
|
23
|
-
import { ActionSheetContent as
|
|
24
|
-
const
|
|
10
|
+
import { Popup as ee } from "@progress/kendo-react-popup";
|
|
11
|
+
import { cloneDate as P } from "@progress/kendo-date-math";
|
|
12
|
+
import { withIdHOC as te, createPropsContext as ie, Keys as d, canUseDOM as C, subscribeToKendoPaste as se, AsyncFocusBlur as oe, classNames as S, uDateTimePicker as D, withPropsContext as ae, withUnstyledHOC as ne, withAdaptiveModeContext as re } from "@progress/kendo-react-common";
|
|
13
|
+
import { calendarIcon as le } from "@progress/kendo-svg-icons";
|
|
14
|
+
import { DateInput as he } from "../dateinput/DateInput.mjs";
|
|
15
|
+
import { Button as de } from "@progress/kendo-react-buttons";
|
|
16
|
+
import { isInDateRange as M, MIN_DATE as ue, MAX_DATE as pe, MAX_TIME as ce, MIN_TIME as me } from "../utils.mjs";
|
|
17
|
+
import { dateTimePickerCancel as O, messages as p, dateTimePickerSet as x, toggleDateTimeSelector as c } from "../messages/index.mjs";
|
|
18
|
+
import { provideLocalizationService as m, registerForLocalization as fe } from "@progress/kendo-react-intl";
|
|
19
|
+
import { DateTimeSelector as ge } from "./DateTimeSelector.mjs";
|
|
20
|
+
import { isInTimeRange as ve } from "../timepicker/utils.mjs";
|
|
21
|
+
import { PickerFloatingLabel as we } from "../hooks/usePickerFloatingLabel.mjs";
|
|
22
|
+
import { AdaptiveMode as be } from "../common/AdaptiveMode.mjs";
|
|
23
|
+
import { ActionSheetContent as ye } from "@progress/kendo-react-layout";
|
|
24
|
+
const a = class a extends n.Component {
|
|
25
25
|
constructor(i) {
|
|
26
|
-
super(i), this._element = null, this._dateInput = n.createRef(), this._dateTimeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.
|
|
26
|
+
super(i), this._element = null, this._dateInput = n.createRef(), this._dateTimeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.handleSmartPasteValue = (t) => {
|
|
27
|
+
if (t instanceof Date && !isNaN(t.getTime())) {
|
|
28
|
+
this.applyKendoPasteDate(t);
|
|
29
|
+
return;
|
|
30
|
+
}
|
|
31
|
+
const s = t != null ? String(t) : "";
|
|
32
|
+
if (!s)
|
|
33
|
+
return;
|
|
34
|
+
const o = new Date(s);
|
|
35
|
+
isNaN(o.getTime()) || this.applyKendoPasteDate(o);
|
|
36
|
+
}, this.applyKendoPasteDate = (t) => {
|
|
37
|
+
if (!M(t, this.min, this.max))
|
|
38
|
+
return;
|
|
39
|
+
const s = new Event("change", { bubbles: !0 }), o = {
|
|
40
|
+
target: this._element,
|
|
41
|
+
currentTarget: this._element,
|
|
42
|
+
nativeEvent: s
|
|
43
|
+
};
|
|
44
|
+
this.handleValueChange({
|
|
45
|
+
syntheticEvent: o,
|
|
46
|
+
nativeEvent: s,
|
|
47
|
+
value: t
|
|
48
|
+
});
|
|
49
|
+
}, this.focus = () => {
|
|
27
50
|
const t = this.dateInputElement();
|
|
28
51
|
t && t.focus();
|
|
29
52
|
}, this.renderPicker = () => {
|
|
30
|
-
const { disabled: t, minTime: s, maxTime:
|
|
53
|
+
const { disabled: t, minTime: s, maxTime: o, format: h, calendar: l, cancelButton: r, weekNumber: g, focusedDate: u, unstyled: v } = this.props;
|
|
31
54
|
return /* @__PURE__ */ n.createElement(
|
|
32
|
-
|
|
55
|
+
ge,
|
|
33
56
|
{
|
|
34
57
|
ref: (w) => {
|
|
35
58
|
this._dateTimeSelector = w;
|
|
@@ -44,7 +67,7 @@ const o = class o extends n.Component {
|
|
|
44
67
|
min: this.min,
|
|
45
68
|
max: this.max,
|
|
46
69
|
minTime: s,
|
|
47
|
-
maxTime:
|
|
70
|
+
maxTime: o,
|
|
48
71
|
focusedDate: u,
|
|
49
72
|
format: h,
|
|
50
73
|
calendar: l,
|
|
@@ -55,11 +78,11 @@ const o = class o extends n.Component {
|
|
|
55
78
|
);
|
|
56
79
|
}, this.renderAdaptivePopup = () => {
|
|
57
80
|
const { windowWidth: t = 0 } = this.state, s = m(this).toLanguageString(
|
|
58
|
-
|
|
59
|
-
p[
|
|
60
|
-
),
|
|
61
|
-
|
|
62
|
-
p[
|
|
81
|
+
O,
|
|
82
|
+
p[O]
|
|
83
|
+
), o = m(this).toLanguageString(
|
|
84
|
+
x,
|
|
85
|
+
p[x]
|
|
63
86
|
), h = {
|
|
64
87
|
expand: this.show,
|
|
65
88
|
onClose: this.handleBlur,
|
|
@@ -72,19 +95,19 @@ const o = class o extends n.Component {
|
|
|
72
95
|
var r;
|
|
73
96
|
return (r = this._dateTimeSelector) == null ? void 0 : r.handleReject(l);
|
|
74
97
|
},
|
|
75
|
-
applyText:
|
|
98
|
+
applyText: o,
|
|
76
99
|
onApply: (l) => {
|
|
77
100
|
var r;
|
|
78
101
|
return (r = this._dateTimeSelector) == null ? void 0 : r.handleAccept(l);
|
|
79
102
|
}
|
|
80
103
|
}
|
|
81
104
|
};
|
|
82
|
-
return /* @__PURE__ */ n.createElement(
|
|
105
|
+
return /* @__PURE__ */ n.createElement(be, { ...h }, /* @__PURE__ */ n.createElement(ye, null, this.renderPicker()));
|
|
83
106
|
}, this.handleReject = () => {
|
|
84
107
|
this.shouldFocusDateInput = !0, this.setShow(!1);
|
|
85
108
|
}, this.handleValueChange = (t) => {
|
|
86
109
|
this.setState({
|
|
87
|
-
value:
|
|
110
|
+
value: P(t.value || void 0)
|
|
88
111
|
}), this.valueDuringOnChange = t.value, this.showDuringOnChange = !1, this.mobileMode || (this.shouldFocusDateInput = !0);
|
|
89
112
|
const { onChange: s } = this.props;
|
|
90
113
|
s && s.call(void 0, {
|
|
@@ -103,15 +126,15 @@ const o = class o extends n.Component {
|
|
|
103
126
|
}, this.handleIconMouseDown = (t) => {
|
|
104
127
|
t.preventDefault();
|
|
105
128
|
}, this.handleKeyDown = (t) => {
|
|
106
|
-
const { altKey: s, keyCode:
|
|
107
|
-
if (
|
|
129
|
+
const { altKey: s, keyCode: o } = t;
|
|
130
|
+
if (o === d.esc) {
|
|
108
131
|
this.shouldFocusDateInput = !0, this.setShow(!1);
|
|
109
132
|
return;
|
|
110
133
|
}
|
|
111
|
-
s && (
|
|
134
|
+
s && (o === d.up || o === d.down) && (t.preventDefault(), t.stopPropagation(), this.shouldFocusDateInput = o === d.up, this.setShow(o === d.down));
|
|
112
135
|
}, this.dateInputElement = () => this.dateInput && this.dateInput.element || this.element && this.element.querySelector(".k-dateinput > input.k-input-inner"), this.state = {
|
|
113
|
-
value: this.props.defaultValue ||
|
|
114
|
-
show: this.props.defaultShow ||
|
|
136
|
+
value: this.props.defaultValue || a.defaultProps.defaultValue,
|
|
137
|
+
show: this.props.defaultShow || a.defaultProps.defaultShow,
|
|
115
138
|
focused: !1
|
|
116
139
|
};
|
|
117
140
|
}
|
|
@@ -119,7 +142,7 @@ const o = class o extends n.Component {
|
|
|
119
142
|
return this.props.id + "-popup-id";
|
|
120
143
|
}
|
|
121
144
|
get document() {
|
|
122
|
-
if (
|
|
145
|
+
if (C)
|
|
123
146
|
return this.element && this.element.ownerDocument || document;
|
|
124
147
|
}
|
|
125
148
|
/**
|
|
@@ -139,7 +162,7 @@ const o = class o extends n.Component {
|
|
|
139
162
|
*/
|
|
140
163
|
get value() {
|
|
141
164
|
const i = this.valueDuringOnChange !== void 0 ? this.valueDuringOnChange : this.props.value !== void 0 ? this.props.value : this.state.value;
|
|
142
|
-
return i !== null ?
|
|
165
|
+
return i !== null ? P(i) : null;
|
|
143
166
|
}
|
|
144
167
|
/**
|
|
145
168
|
* Gets the popup state of the DateTimePicker.
|
|
@@ -161,21 +184,21 @@ const o = class o extends n.Component {
|
|
|
161
184
|
return !!(this.state.windowWidth && this.props._adaptiveMode && this.state.windowWidth <= ((t = this.props._adaptiveMode) == null ? void 0 : t.medium) && this.props.adaptive);
|
|
162
185
|
}
|
|
163
186
|
get min() {
|
|
164
|
-
return this.props.min !== void 0 ? this.props.min :
|
|
187
|
+
return this.props.min !== void 0 ? this.props.min : a.defaultProps.min;
|
|
165
188
|
}
|
|
166
189
|
get max() {
|
|
167
|
-
return this.props.max !== void 0 ? this.props.max :
|
|
190
|
+
return this.props.max !== void 0 ? this.props.max : a.defaultProps.max;
|
|
168
191
|
}
|
|
169
192
|
/**
|
|
170
193
|
* Represents the validity state into which the DateTimePicker is set.
|
|
171
194
|
*/
|
|
172
195
|
get validity() {
|
|
173
|
-
const i =
|
|
196
|
+
const i = M(this.value, this.min, this.max) && ve(this.value, this.props.minTime || me, this.props.maxTime || ce), t = this.props.validationMessage !== void 0, s = (!this.required || this.value !== null) && i, o = this.props.valid !== void 0 ? this.props.valid : s;
|
|
174
197
|
return {
|
|
175
198
|
customError: t,
|
|
176
199
|
rangeOverflow: this.value && this.max.getTime() < this.value.getTime() || !1,
|
|
177
200
|
rangeUnderflow: this.value && this.value.getTime() < this.min.getTime() || !1,
|
|
178
|
-
valid:
|
|
201
|
+
valid: o,
|
|
179
202
|
valueMissing: this.value === null
|
|
180
203
|
};
|
|
181
204
|
}
|
|
@@ -183,7 +206,7 @@ const o = class o extends n.Component {
|
|
|
183
206
|
* @hidden
|
|
184
207
|
*/
|
|
185
208
|
get validityStyles() {
|
|
186
|
-
return this.props.validityStyles !== void 0 ? this.props.validityStyles :
|
|
209
|
+
return this.props.validityStyles !== void 0 ? this.props.validityStyles : a.defaultProps.validityStyles;
|
|
187
210
|
}
|
|
188
211
|
/**
|
|
189
212
|
* @hidden
|
|
@@ -195,14 +218,21 @@ const o = class o extends n.Component {
|
|
|
195
218
|
* @hidden
|
|
196
219
|
*/
|
|
197
220
|
get dateInputComp() {
|
|
198
|
-
return this.props.dateInput ||
|
|
221
|
+
return this.props.dateInput || a.defaultProps.dateInput;
|
|
199
222
|
}
|
|
200
223
|
/**
|
|
201
224
|
* @hidden
|
|
202
225
|
*/
|
|
203
226
|
componentDidMount() {
|
|
204
|
-
var
|
|
205
|
-
this.observerResize =
|
|
227
|
+
var t;
|
|
228
|
+
this.observerResize = C && window.ResizeObserver && new window.ResizeObserver(this.calculateMedia.bind(this)), this.show && this.forceUpdate(), (t = this.document) != null && t.body && this.observerResize && this.observerResize.observe(this.document.body);
|
|
229
|
+
const i = this.props.name || this.props.id;
|
|
230
|
+
this.KendoPasteSubscription = se(this._element, {
|
|
231
|
+
fieldName: i,
|
|
232
|
+
onValueChange: (s) => {
|
|
233
|
+
this.handleSmartPasteValue(s);
|
|
234
|
+
}
|
|
235
|
+
});
|
|
206
236
|
}
|
|
207
237
|
/**
|
|
208
238
|
* @hidden
|
|
@@ -217,18 +247,18 @@ const o = class o extends n.Component {
|
|
|
217
247
|
* @hidden
|
|
218
248
|
*/
|
|
219
249
|
componentWillUnmount() {
|
|
220
|
-
var i;
|
|
221
|
-
clearTimeout(this.nextTickId), (i = this.document) != null && i.body && this.observerResize && this.observerResize.disconnect();
|
|
250
|
+
var i, t;
|
|
251
|
+
clearTimeout(this.nextTickId), (i = this.document) != null && i.body && this.observerResize && this.observerResize.disconnect(), (t = this.KendoPasteSubscription) == null || t.unsubscribe();
|
|
222
252
|
}
|
|
223
253
|
/**
|
|
224
254
|
* @hidden
|
|
225
255
|
*/
|
|
226
256
|
render() {
|
|
227
257
|
const {
|
|
228
|
-
size: i =
|
|
229
|
-
rounded: t =
|
|
230
|
-
fillMode: s =
|
|
231
|
-
autoFocus:
|
|
258
|
+
size: i = a.defaultProps.size,
|
|
259
|
+
rounded: t = a.defaultProps.rounded,
|
|
260
|
+
fillMode: s = a.defaultProps.fillMode,
|
|
261
|
+
autoFocus: o = a.defaultProps.autoFocus,
|
|
232
262
|
inputAttributes: h,
|
|
233
263
|
disabled: l,
|
|
234
264
|
tabIndex: r,
|
|
@@ -236,28 +266,28 @@ const o = class o extends n.Component {
|
|
|
236
266
|
id: u,
|
|
237
267
|
format: v,
|
|
238
268
|
formatPlaceholder: w,
|
|
239
|
-
min:
|
|
269
|
+
min: E,
|
|
240
270
|
max: k,
|
|
241
|
-
className:
|
|
242
|
-
width:
|
|
243
|
-
name:
|
|
271
|
+
className: F,
|
|
272
|
+
width: A,
|
|
273
|
+
name: N,
|
|
244
274
|
validationMessage: R,
|
|
245
275
|
required: B,
|
|
246
276
|
validityStyles: z,
|
|
247
|
-
minTime:
|
|
248
|
-
maxTime:
|
|
277
|
+
minTime: _,
|
|
278
|
+
maxTime: K,
|
|
249
279
|
ariaLabelledBy: V,
|
|
250
280
|
ariaDescribedBy: q,
|
|
251
|
-
popup: L =
|
|
281
|
+
popup: L = ee,
|
|
252
282
|
unstyled: b,
|
|
253
|
-
autoFill:
|
|
254
|
-
twoDigitYearMax:
|
|
255
|
-
enableMouseWheel:
|
|
256
|
-
autoCorrectParts:
|
|
257
|
-
autoSwitchParts:
|
|
258
|
-
autoSwitchKeys:
|
|
259
|
-
allowCaretMode:
|
|
260
|
-
} = this.props, y = b && b.uDateTimePicker,
|
|
283
|
+
autoFill: U,
|
|
284
|
+
twoDigitYearMax: j,
|
|
285
|
+
enableMouseWheel: H,
|
|
286
|
+
autoCorrectParts: W,
|
|
287
|
+
autoSwitchParts: X,
|
|
288
|
+
autoSwitchKeys: Y,
|
|
289
|
+
allowCaretMode: Z
|
|
290
|
+
} = this.props, y = b && b.uDateTimePicker, T = !this.validityStyles || this.validity.valid, G = {
|
|
261
291
|
id: u,
|
|
262
292
|
ariaLabelledBy: V,
|
|
263
293
|
ariaDescribedBy: q,
|
|
@@ -268,11 +298,11 @@ const o = class o extends n.Component {
|
|
|
268
298
|
validityStyles: z,
|
|
269
299
|
validationMessage: R,
|
|
270
300
|
required: B,
|
|
271
|
-
min:
|
|
301
|
+
min: E,
|
|
272
302
|
max: k,
|
|
273
|
-
minTime:
|
|
274
|
-
maxTime:
|
|
275
|
-
name:
|
|
303
|
+
minTime: _,
|
|
304
|
+
maxTime: K,
|
|
305
|
+
name: N,
|
|
276
306
|
tabIndex: this.show ? -1 : r,
|
|
277
307
|
valid: this.validity.valid,
|
|
278
308
|
value: this.value,
|
|
@@ -282,43 +312,43 @@ const o = class o extends n.Component {
|
|
|
282
312
|
placeholder: this.state.focused ? null : this.props.placeholder,
|
|
283
313
|
ariaExpanded: this.show,
|
|
284
314
|
unstyled: b,
|
|
285
|
-
autoFill:
|
|
286
|
-
twoDigitYearMax:
|
|
287
|
-
enableMouseWheel:
|
|
288
|
-
autoCorrectParts:
|
|
289
|
-
autoSwitchParts:
|
|
290
|
-
autoSwitchKeys:
|
|
291
|
-
allowCaretMode:
|
|
292
|
-
},
|
|
293
|
-
|
|
315
|
+
autoFill: U,
|
|
316
|
+
twoDigitYearMax: j,
|
|
317
|
+
enableMouseWheel: H,
|
|
318
|
+
autoCorrectParts: W,
|
|
319
|
+
autoSwitchParts: X,
|
|
320
|
+
autoSwitchKeys: Y,
|
|
321
|
+
allowCaretMode: Z
|
|
322
|
+
}, I = /* @__PURE__ */ n.createElement(
|
|
323
|
+
oe,
|
|
294
324
|
{
|
|
295
325
|
onFocus: this.handleFocus,
|
|
296
326
|
onBlur: this.handleBlur,
|
|
297
327
|
onSyncFocus: this.props.onFocus,
|
|
298
328
|
onSyncBlur: this.props.onBlur
|
|
299
329
|
},
|
|
300
|
-
({ onFocus:
|
|
330
|
+
({ onFocus: J, onBlur: Q }) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement(
|
|
301
331
|
"div",
|
|
302
332
|
{
|
|
303
|
-
ref: (
|
|
304
|
-
this._element =
|
|
333
|
+
ref: ($) => {
|
|
334
|
+
this._element = $;
|
|
305
335
|
},
|
|
306
336
|
className: S(
|
|
307
|
-
|
|
337
|
+
D.wrapper({
|
|
308
338
|
c: y,
|
|
309
339
|
size: i,
|
|
310
340
|
fillMode: s,
|
|
311
341
|
rounded: t,
|
|
312
342
|
disabled: l,
|
|
313
343
|
required: this.required,
|
|
314
|
-
invalid: !
|
|
344
|
+
invalid: !T
|
|
315
345
|
}),
|
|
316
|
-
|
|
346
|
+
F
|
|
317
347
|
),
|
|
318
348
|
onKeyDown: this.handleKeyDown,
|
|
319
|
-
style: { width:
|
|
320
|
-
onFocus: this.mobileMode ? this.handleClick :
|
|
321
|
-
onBlur:
|
|
349
|
+
style: { width: A },
|
|
350
|
+
onFocus: this.mobileMode ? this.handleClick : J,
|
|
351
|
+
onBlur: Q,
|
|
322
352
|
onClick: this.mobileMode ? this.handleClick : void 0
|
|
323
353
|
},
|
|
324
354
|
/* @__PURE__ */ n.createElement(
|
|
@@ -328,25 +358,25 @@ const o = class o extends n.Component {
|
|
|
328
358
|
ariaRole: "combobox",
|
|
329
359
|
ariaControls: this._popupId,
|
|
330
360
|
ariaHasPopup: "dialog",
|
|
331
|
-
autoFocus:
|
|
361
|
+
autoFocus: o,
|
|
332
362
|
inputAttributes: h,
|
|
333
|
-
...
|
|
363
|
+
...G
|
|
334
364
|
}
|
|
335
365
|
),
|
|
336
366
|
/* @__PURE__ */ n.createElement(
|
|
337
|
-
|
|
367
|
+
de,
|
|
338
368
|
{
|
|
339
369
|
tabIndex: -1,
|
|
340
370
|
type: "button",
|
|
341
371
|
icon: "calendar",
|
|
342
|
-
svgIcon:
|
|
372
|
+
svgIcon: le,
|
|
343
373
|
onMouseDown: this.handleIconMouseDown,
|
|
344
374
|
onClick: this.mobileMode ? void 0 : this.handleClick,
|
|
345
375
|
title: m(this).toLanguageString(
|
|
346
376
|
c,
|
|
347
377
|
p[c]
|
|
348
378
|
),
|
|
349
|
-
className: S(
|
|
379
|
+
className: S(D.inputButton({ c: y })),
|
|
350
380
|
fillMode: s,
|
|
351
381
|
"aria-label": m(this).toLanguageString(
|
|
352
382
|
c,
|
|
@@ -360,7 +390,7 @@ const o = class o extends n.Component {
|
|
|
360
390
|
show: this.show,
|
|
361
391
|
animate: this.element !== null,
|
|
362
392
|
anchor: this.element,
|
|
363
|
-
popupClass: S(
|
|
393
|
+
popupClass: S(D.popup({ c: y })),
|
|
364
394
|
id: this._popupId,
|
|
365
395
|
anchorAlign: {
|
|
366
396
|
horizontal: "left",
|
|
@@ -376,17 +406,17 @@ const o = class o extends n.Component {
|
|
|
376
406
|
), this.mobileMode && this.renderAdaptivePopup())
|
|
377
407
|
);
|
|
378
408
|
return this.props.label ? /* @__PURE__ */ n.createElement(
|
|
379
|
-
|
|
409
|
+
we,
|
|
380
410
|
{
|
|
381
411
|
dateInput: this._dateInput,
|
|
382
412
|
label: this.props.label,
|
|
383
413
|
editorId: u,
|
|
384
|
-
editorValid:
|
|
414
|
+
editorValid: T,
|
|
385
415
|
editorDisabled: this.props.disabled,
|
|
386
|
-
children:
|
|
416
|
+
children: I,
|
|
387
417
|
style: { width: this.props.width }
|
|
388
418
|
}
|
|
389
|
-
) :
|
|
419
|
+
) : I;
|
|
390
420
|
}
|
|
391
421
|
setShow(i) {
|
|
392
422
|
const { onOpen: t, onClose: s } = this.props;
|
|
@@ -404,7 +434,7 @@ const o = class o extends n.Component {
|
|
|
404
434
|
this.setState({ windowWidth: t.target.clientWidth });
|
|
405
435
|
}
|
|
406
436
|
};
|
|
407
|
-
|
|
437
|
+
a.displayName = "DateTimePicker", a.propTypes = {
|
|
408
438
|
className: e.string,
|
|
409
439
|
defaultShow: e.bool,
|
|
410
440
|
defaultValue: e.instanceOf(Date),
|
|
@@ -469,42 +499,42 @@ o.displayName = "DateTimePicker", o.propTypes = {
|
|
|
469
499
|
valid: e.bool,
|
|
470
500
|
cancelButton: e.bool,
|
|
471
501
|
size: e.oneOf(["small", "medium", "large"]),
|
|
472
|
-
rounded: e.oneOf(["small", "medium", "large", "full"]),
|
|
502
|
+
rounded: e.oneOf(["small", "medium", "large", "full", "none"]),
|
|
473
503
|
fillMode: e.oneOf(["solid", "flat", "outline"]),
|
|
474
504
|
autoFocus: e.bool,
|
|
475
505
|
inputAttributes: e.object
|
|
476
|
-
},
|
|
506
|
+
}, a.defaultProps = {
|
|
477
507
|
defaultShow: !1,
|
|
478
508
|
defaultValue: null,
|
|
479
509
|
disabled: !1,
|
|
480
510
|
format: "g",
|
|
481
511
|
// general date and time pattern (short time): "M/d/y h:mm a" for en.
|
|
482
|
-
max:
|
|
483
|
-
min:
|
|
512
|
+
max: pe,
|
|
513
|
+
min: ue,
|
|
484
514
|
popupSettings: {},
|
|
485
515
|
tabIndex: 0,
|
|
486
516
|
weekNumber: !1,
|
|
487
517
|
validityStyles: !0,
|
|
488
518
|
cancelButton: !0,
|
|
489
|
-
dateInput:
|
|
519
|
+
dateInput: he,
|
|
490
520
|
size: void 0,
|
|
491
521
|
rounded: void 0,
|
|
492
522
|
fillMode: void 0,
|
|
493
523
|
autoFocus: !1
|
|
494
524
|
};
|
|
495
|
-
let f =
|
|
496
|
-
const
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
525
|
+
let f = a;
|
|
526
|
+
const Se = ie(), De = te(
|
|
527
|
+
ae(
|
|
528
|
+
Se,
|
|
529
|
+
ne(
|
|
530
|
+
re(f)
|
|
501
531
|
)
|
|
502
532
|
)
|
|
503
533
|
);
|
|
504
|
-
|
|
505
|
-
|
|
534
|
+
De.displayName = "KendoReactDateTimePicker";
|
|
535
|
+
fe(f);
|
|
506
536
|
export {
|
|
507
|
-
|
|
508
|
-
|
|
537
|
+
De as DateTimePicker,
|
|
538
|
+
Se as DateTimePickerPropsContext,
|
|
509
539
|
f as DateTimePickerWithoutContext
|
|
510
540
|
};
|