@progress/kendo-react-dateinputs 9.1.1-develop.4 → 9.2.0-develop.2
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.js +1 -1
- package/dateinput/DateInput.mjs +87 -84
- package/datepicker/DatePicker.js +1 -1
- package/datepicker/DatePicker.mjs +78 -75
- package/daterangepicker/DateRangePicker.js +1 -1
- package/daterangepicker/DateRangePicker.mjs +58 -55
- package/datetimepicker/DateTimePicker.js +1 -1
- package/datetimepicker/DateTimePicker.mjs +93 -90
- package/dist/cdn/js/kendo-react-dateinputs.js +1 -1
- package/index.d.mts +31 -0
- package/index.d.ts +31 -0
- package/package-metadata.mjs +1 -1
- package/package.json +7 -7
- package/timepicker/TimePicker.js +1 -1
- package/timepicker/TimePicker.mjs +59 -56
package/index.d.mts
CHANGED
|
@@ -815,6 +815,11 @@ export declare interface DateInputProps<T extends DateInput = any> extends FormC
|
|
|
815
815
|
* @hidden
|
|
816
816
|
*/
|
|
817
817
|
unstyled?: DateInputsClassStructure;
|
|
818
|
+
/**
|
|
819
|
+
* Sets the HTML attributes of the inner focusable input element.
|
|
820
|
+
* Attributes which are essential for certain component functionalities cannot be changed.
|
|
821
|
+
*/
|
|
822
|
+
inputAttributes?: React_2.InputHTMLAttributes<HTMLInputElement>;
|
|
818
823
|
}
|
|
819
824
|
|
|
820
825
|
/**
|
|
@@ -1039,6 +1044,7 @@ export declare class DateInputWithoutContext extends React_2.Component<DateInput
|
|
|
1039
1044
|
rounded: PropTypes.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
|
|
1040
1045
|
fillMode: PropTypes.Requireable<"flat" | "solid" | "outline" | null | undefined>;
|
|
1041
1046
|
autoFocus: PropTypes.Requireable<boolean>;
|
|
1047
|
+
inputAttributes: PropTypes.Requireable<object>;
|
|
1042
1048
|
};
|
|
1043
1049
|
/**
|
|
1044
1050
|
* @hidden
|
|
@@ -1380,6 +1386,11 @@ export declare interface DatePickerProps extends DatePickerSettings, FormCompone
|
|
|
1380
1386
|
* @default `true`
|
|
1381
1387
|
*/
|
|
1382
1388
|
enableMouseWheel?: boolean;
|
|
1389
|
+
/**
|
|
1390
|
+
* Sets the HTML attributes of the inner focusable input element.
|
|
1391
|
+
* Attributes which are essential for certain component functionalities cannot be changed.
|
|
1392
|
+
*/
|
|
1393
|
+
inputAttributes?: React_2.InputHTMLAttributes<HTMLInputElement>;
|
|
1383
1394
|
}
|
|
1384
1395
|
|
|
1385
1396
|
/**
|
|
@@ -1598,6 +1609,7 @@ export declare class DatePickerWithoutContext extends React_2.Component<DatePick
|
|
|
1598
1609
|
adaptive: PropTypes.Requireable<boolean>;
|
|
1599
1610
|
adaptiveTitle: PropTypes.Requireable<string>;
|
|
1600
1611
|
autoFocus: PropTypes.Requireable<boolean>;
|
|
1612
|
+
inputAttributes: PropTypes.Requireable<object>;
|
|
1601
1613
|
};
|
|
1602
1614
|
/**
|
|
1603
1615
|
* @hidden
|
|
@@ -1864,6 +1876,11 @@ export declare interface DateRangePickerProps extends DateRangePickerSettings {
|
|
|
1864
1876
|
* @hidden
|
|
1865
1877
|
*/
|
|
1866
1878
|
dir?: string;
|
|
1879
|
+
/**
|
|
1880
|
+
* Sets the HTML attributes of the inner focusable input element.
|
|
1881
|
+
* Attributes which are essential for certain component functionalities cannot be changed.
|
|
1882
|
+
*/
|
|
1883
|
+
inputAttributes?: React_2.InputHTMLAttributes<HTMLInputElement>;
|
|
1867
1884
|
}
|
|
1868
1885
|
|
|
1869
1886
|
/**
|
|
@@ -2077,6 +2094,7 @@ export declare class DateRangePickerWithoutContext extends React_2.Component<Dat
|
|
|
2077
2094
|
rounded: PropTypes.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
|
|
2078
2095
|
fillMode: PropTypes.Requireable<"flat" | "solid" | "outline" | null | undefined>;
|
|
2079
2096
|
autoFocus: PropTypes.Requireable<boolean>;
|
|
2097
|
+
inputAttributes: PropTypes.Requireable<object>;
|
|
2080
2098
|
}>>;
|
|
2081
2099
|
focusedDate: PropTypes.Requireable<Date>;
|
|
2082
2100
|
format: PropTypes.Requireable<NonNullable<string | PropTypes.InferProps<{
|
|
@@ -2113,6 +2131,7 @@ export declare class DateRangePickerWithoutContext extends React_2.Component<Dat
|
|
|
2113
2131
|
dir: PropTypes.Requireable<string>;
|
|
2114
2132
|
value: PropTypes.Validator<SelectionRange>;
|
|
2115
2133
|
autoFocus: PropTypes.Requireable<boolean>;
|
|
2134
|
+
inputAttributes: PropTypes.Requireable<object>;
|
|
2116
2135
|
};
|
|
2117
2136
|
/**
|
|
2118
2137
|
* @hidden
|
|
@@ -2389,6 +2408,11 @@ export declare interface DateTimePickerProps extends DateTimePickerSettings, For
|
|
|
2389
2408
|
* @default `true`
|
|
2390
2409
|
*/
|
|
2391
2410
|
enableMouseWheel?: boolean;
|
|
2411
|
+
/**
|
|
2412
|
+
* Sets the HTML attributes of the inner focusable input element.
|
|
2413
|
+
* Attributes which are essential for certain component functionalities cannot be changed.
|
|
2414
|
+
*/
|
|
2415
|
+
inputAttributes?: React_2.InputHTMLAttributes<HTMLInputElement>;
|
|
2392
2416
|
}
|
|
2393
2417
|
|
|
2394
2418
|
/**
|
|
@@ -2611,6 +2635,7 @@ export declare class DateTimePickerWithoutContext extends React_2.Component<Date
|
|
|
2611
2635
|
rounded: PropTypes.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
|
|
2612
2636
|
fillMode: PropTypes.Requireable<"flat" | "solid" | "outline" | null | undefined>;
|
|
2613
2637
|
autoFocus: PropTypes.Requireable<boolean>;
|
|
2638
|
+
inputAttributes: PropTypes.Requireable<object>;
|
|
2614
2639
|
};
|
|
2615
2640
|
/**
|
|
2616
2641
|
* @hidden
|
|
@@ -4002,6 +4027,11 @@ export declare interface TimePickerProps extends TimePickerSettings, FormCompone
|
|
|
4002
4027
|
* @default `true`
|
|
4003
4028
|
*/
|
|
4004
4029
|
enableMouseWheel?: boolean;
|
|
4030
|
+
/**
|
|
4031
|
+
* Sets the HTML attributes of the inner focusable input element.
|
|
4032
|
+
* Attributes which are essential for certain component functionalities cannot be changed.
|
|
4033
|
+
*/
|
|
4034
|
+
inputAttributes?: React_2.InputHTMLAttributes<HTMLInputElement>;
|
|
4005
4035
|
}
|
|
4006
4036
|
|
|
4007
4037
|
/**
|
|
@@ -4217,6 +4247,7 @@ export declare class TimePickerWithoutContext extends React_2.Component<TimePick
|
|
|
4217
4247
|
size: PropTypes.Requireable<"small" | "large" | "medium" | null | undefined>;
|
|
4218
4248
|
rounded: PropTypes.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
|
|
4219
4249
|
fillMode: PropTypes.Requireable<"flat" | "solid" | "outline" | null | undefined>;
|
|
4250
|
+
inputAttributes: PropTypes.Requireable<object>;
|
|
4220
4251
|
};
|
|
4221
4252
|
/**
|
|
4222
4253
|
* @hidden
|
package/index.d.ts
CHANGED
|
@@ -815,6 +815,11 @@ export declare interface DateInputProps<T extends DateInput = any> extends FormC
|
|
|
815
815
|
* @hidden
|
|
816
816
|
*/
|
|
817
817
|
unstyled?: DateInputsClassStructure;
|
|
818
|
+
/**
|
|
819
|
+
* Sets the HTML attributes of the inner focusable input element.
|
|
820
|
+
* Attributes which are essential for certain component functionalities cannot be changed.
|
|
821
|
+
*/
|
|
822
|
+
inputAttributes?: React_2.InputHTMLAttributes<HTMLInputElement>;
|
|
818
823
|
}
|
|
819
824
|
|
|
820
825
|
/**
|
|
@@ -1039,6 +1044,7 @@ export declare class DateInputWithoutContext extends React_2.Component<DateInput
|
|
|
1039
1044
|
rounded: PropTypes.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
|
|
1040
1045
|
fillMode: PropTypes.Requireable<"flat" | "solid" | "outline" | null | undefined>;
|
|
1041
1046
|
autoFocus: PropTypes.Requireable<boolean>;
|
|
1047
|
+
inputAttributes: PropTypes.Requireable<object>;
|
|
1042
1048
|
};
|
|
1043
1049
|
/**
|
|
1044
1050
|
* @hidden
|
|
@@ -1380,6 +1386,11 @@ export declare interface DatePickerProps extends DatePickerSettings, FormCompone
|
|
|
1380
1386
|
* @default `true`
|
|
1381
1387
|
*/
|
|
1382
1388
|
enableMouseWheel?: boolean;
|
|
1389
|
+
/**
|
|
1390
|
+
* Sets the HTML attributes of the inner focusable input element.
|
|
1391
|
+
* Attributes which are essential for certain component functionalities cannot be changed.
|
|
1392
|
+
*/
|
|
1393
|
+
inputAttributes?: React_2.InputHTMLAttributes<HTMLInputElement>;
|
|
1383
1394
|
}
|
|
1384
1395
|
|
|
1385
1396
|
/**
|
|
@@ -1598,6 +1609,7 @@ export declare class DatePickerWithoutContext extends React_2.Component<DatePick
|
|
|
1598
1609
|
adaptive: PropTypes.Requireable<boolean>;
|
|
1599
1610
|
adaptiveTitle: PropTypes.Requireable<string>;
|
|
1600
1611
|
autoFocus: PropTypes.Requireable<boolean>;
|
|
1612
|
+
inputAttributes: PropTypes.Requireable<object>;
|
|
1601
1613
|
};
|
|
1602
1614
|
/**
|
|
1603
1615
|
* @hidden
|
|
@@ -1864,6 +1876,11 @@ export declare interface DateRangePickerProps extends DateRangePickerSettings {
|
|
|
1864
1876
|
* @hidden
|
|
1865
1877
|
*/
|
|
1866
1878
|
dir?: string;
|
|
1879
|
+
/**
|
|
1880
|
+
* Sets the HTML attributes of the inner focusable input element.
|
|
1881
|
+
* Attributes which are essential for certain component functionalities cannot be changed.
|
|
1882
|
+
*/
|
|
1883
|
+
inputAttributes?: React_2.InputHTMLAttributes<HTMLInputElement>;
|
|
1867
1884
|
}
|
|
1868
1885
|
|
|
1869
1886
|
/**
|
|
@@ -2077,6 +2094,7 @@ export declare class DateRangePickerWithoutContext extends React_2.Component<Dat
|
|
|
2077
2094
|
rounded: PropTypes.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
|
|
2078
2095
|
fillMode: PropTypes.Requireable<"flat" | "solid" | "outline" | null | undefined>;
|
|
2079
2096
|
autoFocus: PropTypes.Requireable<boolean>;
|
|
2097
|
+
inputAttributes: PropTypes.Requireable<object>;
|
|
2080
2098
|
}>>;
|
|
2081
2099
|
focusedDate: PropTypes.Requireable<Date>;
|
|
2082
2100
|
format: PropTypes.Requireable<NonNullable<string | PropTypes.InferProps<{
|
|
@@ -2113,6 +2131,7 @@ export declare class DateRangePickerWithoutContext extends React_2.Component<Dat
|
|
|
2113
2131
|
dir: PropTypes.Requireable<string>;
|
|
2114
2132
|
value: PropTypes.Validator<SelectionRange>;
|
|
2115
2133
|
autoFocus: PropTypes.Requireable<boolean>;
|
|
2134
|
+
inputAttributes: PropTypes.Requireable<object>;
|
|
2116
2135
|
};
|
|
2117
2136
|
/**
|
|
2118
2137
|
* @hidden
|
|
@@ -2389,6 +2408,11 @@ export declare interface DateTimePickerProps extends DateTimePickerSettings, For
|
|
|
2389
2408
|
* @default `true`
|
|
2390
2409
|
*/
|
|
2391
2410
|
enableMouseWheel?: boolean;
|
|
2411
|
+
/**
|
|
2412
|
+
* Sets the HTML attributes of the inner focusable input element.
|
|
2413
|
+
* Attributes which are essential for certain component functionalities cannot be changed.
|
|
2414
|
+
*/
|
|
2415
|
+
inputAttributes?: React_2.InputHTMLAttributes<HTMLInputElement>;
|
|
2392
2416
|
}
|
|
2393
2417
|
|
|
2394
2418
|
/**
|
|
@@ -2611,6 +2635,7 @@ export declare class DateTimePickerWithoutContext extends React_2.Component<Date
|
|
|
2611
2635
|
rounded: PropTypes.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
|
|
2612
2636
|
fillMode: PropTypes.Requireable<"flat" | "solid" | "outline" | null | undefined>;
|
|
2613
2637
|
autoFocus: PropTypes.Requireable<boolean>;
|
|
2638
|
+
inputAttributes: PropTypes.Requireable<object>;
|
|
2614
2639
|
};
|
|
2615
2640
|
/**
|
|
2616
2641
|
* @hidden
|
|
@@ -4002,6 +4027,11 @@ export declare interface TimePickerProps extends TimePickerSettings, FormCompone
|
|
|
4002
4027
|
* @default `true`
|
|
4003
4028
|
*/
|
|
4004
4029
|
enableMouseWheel?: boolean;
|
|
4030
|
+
/**
|
|
4031
|
+
* Sets the HTML attributes of the inner focusable input element.
|
|
4032
|
+
* Attributes which are essential for certain component functionalities cannot be changed.
|
|
4033
|
+
*/
|
|
4034
|
+
inputAttributes?: React_2.InputHTMLAttributes<HTMLInputElement>;
|
|
4005
4035
|
}
|
|
4006
4036
|
|
|
4007
4037
|
/**
|
|
@@ -4217,6 +4247,7 @@ export declare class TimePickerWithoutContext extends React_2.Component<TimePick
|
|
|
4217
4247
|
size: PropTypes.Requireable<"small" | "large" | "medium" | null | undefined>;
|
|
4218
4248
|
rounded: PropTypes.Requireable<"small" | "large" | "medium" | "full" | null | undefined>;
|
|
4219
4249
|
fillMode: PropTypes.Requireable<"flat" | "solid" | "outline" | null | undefined>;
|
|
4250
|
+
inputAttributes: PropTypes.Requireable<object>;
|
|
4220
4251
|
};
|
|
4221
4252
|
/**
|
|
4222
4253
|
* @hidden
|
package/package-metadata.mjs
CHANGED
|
@@ -10,7 +10,7 @@ const e = {
|
|
|
10
10
|
name: "@progress/kendo-react-dateinputs",
|
|
11
11
|
productName: "KendoReact",
|
|
12
12
|
productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
|
|
13
|
-
publishDate:
|
|
13
|
+
publishDate: 1734711462,
|
|
14
14
|
version: "",
|
|
15
15
|
licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=product&utm_source=kendoreact&utm_campaign=kendo-ui-react-purchase-license-keys-warning"
|
|
16
16
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@progress/kendo-react-dateinputs",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.2.0-develop.2",
|
|
4
4
|
"description": "React DateInput is a perfect input component for handling quick and efficient date values. KendoReact Date Inputs package",
|
|
5
5
|
"author": "Progress",
|
|
6
6
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
@@ -25,12 +25,12 @@
|
|
|
25
25
|
"@progress/kendo-date-math": "^1.4.0",
|
|
26
26
|
"@progress/kendo-licensing": "^1.3.4",
|
|
27
27
|
"@progress/kendo-dateinputs-common": "0.4.0",
|
|
28
|
-
"@progress/kendo-react-buttons": "9.
|
|
29
|
-
"@progress/kendo-react-common": "9.
|
|
30
|
-
"@progress/kendo-react-intl": "9.
|
|
31
|
-
"@progress/kendo-react-labels": "9.
|
|
32
|
-
"@progress/kendo-react-layout": "9.
|
|
33
|
-
"@progress/kendo-react-popup": "9.
|
|
28
|
+
"@progress/kendo-react-buttons": "9.2.0-develop.2",
|
|
29
|
+
"@progress/kendo-react-common": "9.2.0-develop.2",
|
|
30
|
+
"@progress/kendo-react-intl": "9.2.0-develop.2",
|
|
31
|
+
"@progress/kendo-react-labels": "9.2.0-develop.2",
|
|
32
|
+
"@progress/kendo-react-layout": "9.2.0-develop.2",
|
|
33
|
+
"@progress/kendo-react-popup": "9.2.0-develop.2",
|
|
34
34
|
"@progress/kendo-svg-icons": "^4.0.0",
|
|
35
35
|
"react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
|
|
36
36
|
"react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
|
package/timepicker/TimePicker.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),e=require("prop-types"),G=require("@progress/kendo-react-popup"),y=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),X=require("@progress/kendo-svg-icons"),I=require("@progress/kendo-react-intl"),Z=require("../package-metadata.js"),l=require("../messages/index.js"),$=require("../dateinput/DateInput.js"),J=require("./TimeSelector.js"),p=require("../utils.js"),f=require("./utils.js"),Q=require("../hooks/usePickerFloatingLabel.js"),Y=require("@progress/kendo-react-buttons"),ee=require("../common/constants.js"),te=require("../common/AdaptiveMode.js"),ie=require("@progress/kendo-react-layout");function se(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=se(W),a=class a extends r.Component{constructor(i){super(i),this._element=null,this._dateInput=r.createRef(),this._timeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{this.dateInput&&this.dateInput.focus()},this.renderTimeSelector=()=>{const{smoothScroll:t,cancelButton:s,nowButton:o,disabled:u,format:d,steps:h,unstyled:g}=this.props;return r.createElement(J.TimeSelector,{ref:this.setTimeSelectorRef,mobileMode:this.mobileMode,show:this.show,cancelButton:s,disabled:u,nowButton:o,format:d,min:this.min,max:this.max,steps:h,smoothScroll:t,value:this.value,footer:!this.mobileMode,handleTimeChange:this.mobileMode&&this.handleTimeChange,onChange:this.handleValueChange,onReject:this.handleValueReject,unstyled:g})},this.renderPopup=()=>{const{popupClass:t,...s}=this.popupSettings,{unstyled:o}=this.props,u=o&&o.uTimePicker,d=n.classNames(t),h={popupClass:n.uTimePicker.popup({c:u}),show:this.show,animate:this.element!==null,anchor:this.element,className:d,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...s};return this.props.popup?r.createElement(this.props.popup,{...h},this.renderTimeSelector()):r.createElement(G.Popup,{...h},this.renderTimeSelector())},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:t,footer:{cancelText:this.localizationService.toLanguageString(l.toggleClock,l.messages[l.timePickerCancel]),onCancel:this.handleValueReject,applyText:this.localizationService.toLanguageString(l.timePickerSet,l.messages[l.timePickerSet]),onApply:o=>this.handleValueChange(o)}};return r.createElement(te.AdaptiveMode,{...s},r.createElement(ie.ActionSheetContent,{overflowHidden:!0},this.renderTimeSelector()))},this.setTimeSelectorRef=t=>{this._timeSelector=t},this.nextValue=(t,s)=>t.value!==void 0?t.value:s.value,this.nextShow=(t,s)=>t.show!==void 0?t.show:s.show,this.handleInputValueChange=t=>{const s=this.mergeTime(t.value);this.handleValueChange({...t,value:s})},this.handleTimeChange=t=>{this.setState({candidate:t.time})},this.handleValueChange=t=>{this.setState({value:y.cloneDate(t.value||this.state.candidate)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.shouldFocusDateInput=!0;const{onChange:s}=this.props,o=this.state.candidate||this.value;s&&s.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,value:o,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.handleValueReject=t=>{this.setShow(!1)},this.handleIconClick=t=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:s,keyCode:o}=t;if(o===n.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(o===n.Keys.up||o===n.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=o===n.Keys.up,this.setShow(o===n.Keys.down))},n.validatePackage(Z.packageMetadata),this.state={value:this.props.defaultValue||a.defaultProps.defaultValue,show:this.props.defaultShow||a.defaultProps.defaultShow,focused:!1,candidate:null},this.normalizeTime=this.normalizeTime.bind(this),this.setShow=this.setShow.bind(this),this.mergeTime=this.mergeTime.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get document(){if(n.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get timeSelector(){return this._timeSelector}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?y.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 validity(){const i=this.value&&this.normalizeTime(this.value),t=this.normalizeTime(this.min),s=this.normalizeTime(this.max),o=f.isInRange(i,t,s),u=this.props.validationMessage!==void 0,d=(!this.required||this.value!==null)&&o,h=this.props.valid!==void 0?this.props.valid:d;return{customError:u,rangeOverflow:f.isBiggerThanMax(i,s),rangeUnderflow:f.isSmallerThanMin(i,t),valid:h,valueMissing:this.value===null}}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=ee.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}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 popupSettings(){return this.props.popupSettings||a.defaultProps.popupSettings}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 dateInputComp(){return this.props.dateInput||a.defaultProps.dateInput}get localizationService(){return I.provideLocalizationService(this)}componentDidMount(){var i;this.observerResize=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this._timeSelector&&this.show&&!this.prevShow?this._timeSelector.focusActiveList():this.dateInput&&this.dateInput.element&&!this.show&&this.shouldFocusDateInput&&this.dateInput.element.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var i;(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,disabled:o,tabIndex:u,title:d,id:h,className:g,format:M,formatPlaceholder:P,width:D,name:O,steps:k,validationMessage:z,required:q,validityStyles:x,ariaLabelledBy:R,ariaDescribedBy:E,unstyled:v,enableMouseWheel:B,autoCorrectParts:V,autoSwitchParts:F,autoSwitchKeys:N,allowCaretMode:A}=this.props,w=v&&v.uTimePicker,S=!this.validityStyles||this.validity.valid,L={disabled:o,format:M,formatPlaceholder:P,id:h,ariaLabelledBy:R,ariaDescribedBy:E,max:this.normalizeTime(this.max),min:this.normalizeTime(this.min),name:O,onChange:this.handleInputValueChange,required:q,steps:k,tabIndex:this.show?-1:u,title:d,valid:this.validity.valid,validationMessage:z,validityStyles:x,value:this.value&&this.normalizeTime(this.value),label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaHasPopup:"dialog",ariaExpanded:this.show,size:null,fillMode:null,rounded:null,enableMouseWheel:B,autoCorrectParts:V,autoSwitchParts:F,autoSwitchKeys:N,allowCaretMode:A},_=this.localizationService.toLanguageString(l.toggleClock,l.messages[l.toggleClock]),K=this.localizationService.toLanguageString(l.toggleTimeSelector,l.messages[l.toggleTimeSelector]),b=r.createElement(n.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.mobileMode?void 0:this.handleBlur,onSyncBlur:this.props.onBlur,onSyncFocus:this.props.onFocus},({onFocus:j,onBlur:U})=>r.createElement(r.Fragment,null,r.createElement("span",{id:this.props.id,ref:H=>{this._element=H},className:n.classNames(n.uTimePicker.wrapper({c:w,size:i,rounded:t,fillMode:s,invalid:!S,required:this.required,disabled:o}),g),onKeyDown:this.handleKeyDown,style:{width:D},onFocus:j,onBlur:U,onClick:this.mobileMode?this.handleIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,...L}),r.createElement(Y.Button,{tabIndex:-1,type:"button",icon:"clock",svgIcon:X.clockIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleIconClick,title:K,className:n.classNames(n.uTimePicker.inputButton({c:w})),rounded:null,fillMode:s,"aria-label":_}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(Q.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:h,editorValid:S,editorDisabled:this.props.disabled,children:b,style:{width:this.props.width}}):b}normalizeTime(i){return p.setTime(p.MIDNIGHT_DATE,i)}setShow(i){const{onOpen:t,onClose:s}=this.props;this.show!==i&&(this.setState({show:i}),i&&t&&t.call(void 0,{target:this}),!i&&s&&s.call(void 0,{target:this}))}mergeTime(i){return this.value&&i?p.setTime(this.value,i):i}calculateMedia(i){for(const t of i)this.setState({windowWidth:t.target.clientWidth})}};a.displayName="TimePicker",a.propTypes={className:e.string,cancelButton:e.bool,nowButton:e.bool,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,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,steps:e.shape({hour:e.number,minute:e.number,second:e.number}),smoothScroll:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"])},a.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"t",max:p.MAX_TIME,min:p.MIN_TIME,popupSettings:{},tabIndex:0,steps:{},validityStyles:!0,dateInput:$.DateInput,size:"medium",rounded:"medium",fillMode:"solid"};let m=a;const T=n.createPropsContext(),C=n.withIdHOC(n.withPropsContext(T,n.withUnstyledHOC(m)));C.displayName="KendoReactTimePicker";I.registerForLocalization(m);exports.TimePicker=C;exports.TimePickerPropsContext=T;exports.TimePickerWithoutContext=m;
|
|
8
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const G=require("react"),e=require("prop-types"),X=require("@progress/kendo-react-popup"),y=require("@progress/kendo-date-math"),n=require("@progress/kendo-react-common"),Z=require("@progress/kendo-svg-icons"),I=require("@progress/kendo-react-intl"),$=require("../package-metadata.js"),l=require("../messages/index.js"),J=require("../dateinput/DateInput.js"),Q=require("./TimeSelector.js"),p=require("../utils.js"),f=require("./utils.js"),Y=require("../hooks/usePickerFloatingLabel.js"),ee=require("@progress/kendo-react-buttons"),te=require("../common/constants.js"),ie=require("../common/AdaptiveMode.js"),se=require("@progress/kendo-react-layout");function oe(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=oe(G),a=class a extends r.Component{constructor(i){super(i),this._element=null,this._dateInput=r.createRef(),this._timeSelector=null,this.shouldFocusDateInput=!1,this.prevShow=!1,this.focus=()=>{this.dateInput&&this.dateInput.focus()},this.renderTimeSelector=()=>{const{smoothScroll:t,cancelButton:s,nowButton:o,disabled:u,format:d,steps:h,unstyled:g}=this.props;return r.createElement(Q.TimeSelector,{ref:this.setTimeSelectorRef,mobileMode:this.mobileMode,show:this.show,cancelButton:s,disabled:u,nowButton:o,format:d,min:this.min,max:this.max,steps:h,smoothScroll:t,value:this.value,footer:!this.mobileMode,handleTimeChange:this.mobileMode&&this.handleTimeChange,onChange:this.handleValueChange,onReject:this.handleValueReject,unstyled:g})},this.renderPopup=()=>{const{popupClass:t,...s}=this.popupSettings,{unstyled:o}=this.props,u=o&&o.uTimePicker,d=n.classNames(t),h={popupClass:n.uTimePicker.popup({c:u}),show:this.show,animate:this.element!==null,anchor:this.element,className:d,id:this._popupId,anchorAlign:{horizontal:"left",vertical:"bottom"},popupAlign:{horizontal:"left",vertical:"top"},...s};return this.props.popup?r.createElement(this.props.popup,{...h},this.renderTimeSelector()):r.createElement(X.Popup,{...h},this.renderTimeSelector())},this.renderAdaptivePopup=()=>{const{windowWidth:t=0}=this.state,s={expand:this.show,onClose:this.handleBlur,adaptiveTitle:this.props.adaptiveTitle,windowWidth:t,footer:{cancelText:this.localizationService.toLanguageString(l.toggleClock,l.messages[l.timePickerCancel]),onCancel:this.handleValueReject,applyText:this.localizationService.toLanguageString(l.timePickerSet,l.messages[l.timePickerSet]),onApply:o=>this.handleValueChange(o)}};return r.createElement(ie.AdaptiveMode,{...s},r.createElement(se.ActionSheetContent,{overflowHidden:!0},this.renderTimeSelector()))},this.setTimeSelectorRef=t=>{this._timeSelector=t},this.nextValue=(t,s)=>t.value!==void 0?t.value:s.value,this.nextShow=(t,s)=>t.show!==void 0?t.show:s.show,this.handleInputValueChange=t=>{const s=this.mergeTime(t.value);this.handleValueChange({...t,value:s})},this.handleTimeChange=t=>{this.setState({candidate:t.time})},this.handleValueChange=t=>{this.setState({value:y.cloneDate(t.value||this.state.candidate)}),this.valueDuringOnChange=t.value,this.showDuringOnChange=!1,this.shouldFocusDateInput=!0;const{onChange:s}=this.props,o=this.state.candidate||this.value;s&&s.call(void 0,{syntheticEvent:t.syntheticEvent,nativeEvent:t.nativeEvent,value:o,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.handleValueReject=t=>{this.setShow(!1)},this.handleIconClick=t=>{this.props.disabled||(this.shouldFocusDateInput=!0,this.setShow(!this.show))},this.handleIconMouseDown=t=>{t.preventDefault()},this.handleKeyDown=t=>{const{altKey:s,keyCode:o}=t;if(o===n.Keys.esc){this.shouldFocusDateInput=!0,this.setShow(!1);return}s&&(o===n.Keys.up||o===n.Keys.down)&&(t.preventDefault(),t.stopPropagation(),this.shouldFocusDateInput=o===n.Keys.up,this.setShow(o===n.Keys.down))},n.validatePackage($.packageMetadata),this.state={value:this.props.defaultValue||a.defaultProps.defaultValue,show:this.props.defaultShow||a.defaultProps.defaultShow,focused:!1,candidate:null},this.normalizeTime=this.normalizeTime.bind(this),this.setShow=this.setShow.bind(this),this.mergeTime=this.mergeTime.bind(this)}get _popupId(){return this.props.id+"-popup-id"}get document(){if(n.canUseDOM)return this.element&&this.element.ownerDocument||document}get element(){return this._element}get dateInput(){return this._dateInput.current}get timeSelector(){return this._timeSelector}get value(){const i=this.valueDuringOnChange!==void 0?this.valueDuringOnChange:this.props.value!==void 0?this.props.value:this.state.value;return i!==null?y.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 validity(){const i=this.value&&this.normalizeTime(this.value),t=this.normalizeTime(this.min),s=this.normalizeTime(this.max),o=f.isInRange(i,t,s),u=this.props.validationMessage!==void 0,d=(!this.required||this.value!==null)&&o,h=this.props.valid!==void 0?this.props.valid:d;return{customError:u,rangeOverflow:f.isBiggerThanMax(i,s),rangeUnderflow:f.isSmallerThanMin(i,t),valid:h,valueMissing:this.value===null}}get mobileMode(){return!!(this.state.windowWidth&&this.state.windowWidth<=te.MOBILE_MEDIUM_DEVISE&&this.props.adaptive)}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 popupSettings(){return this.props.popupSettings||a.defaultProps.popupSettings}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 dateInputComp(){return this.props.dateInput||a.defaultProps.dateInput}get localizationService(){return I.provideLocalizationService(this)}componentDidMount(){var i;this.observerResize=n.canUseDOM&&window.ResizeObserver&&new window.ResizeObserver(this.calculateMedia.bind(this)),this.show&&this.forceUpdate(),(i=this.document)!=null&&i.body&&this.observerResize&&this.observerResize.observe(this.document.body)}componentDidUpdate(){this._timeSelector&&this.show&&!this.prevShow?this._timeSelector.focusActiveList():this.dateInput&&this.dateInput.element&&!this.show&&this.shouldFocusDateInput&&this.dateInput.element.focus({preventScroll:!0}),this.prevShow=this.show,this.shouldFocusDateInput=!1}componentWillUnmount(){var i;(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,disabled:o,tabIndex:u,title:d,id:h,className:g,format:M,formatPlaceholder:P,width:D,name:O,steps:k,validationMessage:z,required:q,validityStyles:x,ariaLabelledBy:R,ariaDescribedBy:E,unstyled:v,enableMouseWheel:B,autoCorrectParts:V,autoSwitchParts:F,autoSwitchKeys:A,allowCaretMode:N,inputAttributes:L}=this.props,w=v&&v.uTimePicker,S=!this.validityStyles||this.validity.valid,_={disabled:o,format:M,formatPlaceholder:P,id:h,ariaLabelledBy:R,ariaDescribedBy:E,max:this.normalizeTime(this.max),min:this.normalizeTime(this.min),name:O,onChange:this.handleInputValueChange,required:q,steps:k,tabIndex:this.show?-1:u,title:d,valid:this.validity.valid,validationMessage:z,validityStyles:x,value:this.value&&this.normalizeTime(this.value),label:void 0,placeholder:this.state.focused?null:this.props.placeholder,ariaHasPopup:"dialog",ariaExpanded:this.show,size:null,fillMode:null,rounded:null,enableMouseWheel:B,autoCorrectParts:V,autoSwitchParts:F,autoSwitchKeys:A,allowCaretMode:N,inputAttributes:L},K=this.localizationService.toLanguageString(l.toggleClock,l.messages[l.toggleClock]),j=this.localizationService.toLanguageString(l.toggleTimeSelector,l.messages[l.toggleTimeSelector]),b=r.createElement(n.AsyncFocusBlur,{onFocus:this.handleFocus,onBlur:this.mobileMode?void 0:this.handleBlur,onSyncBlur:this.props.onBlur,onSyncFocus:this.props.onFocus},({onFocus:U,onBlur:H})=>r.createElement(r.Fragment,null,r.createElement("span",{id:this.props.id,ref:W=>{this._element=W},className:n.classNames(n.uTimePicker.wrapper({c:w,size:i,rounded:t,fillMode:s,invalid:!S,required:this.required,disabled:o}),g),onKeyDown:this.handleKeyDown,style:{width:D},onFocus:U,onBlur:H,onClick:this.mobileMode?this.handleIconClick:void 0},r.createElement(this.dateInputComp,{_ref:this._dateInput,ariaRole:"combobox",ariaControls:this._popupId,..._}),r.createElement(ee.Button,{tabIndex:-1,type:"button",icon:"clock",svgIcon:Z.clockIcon,onMouseDown:this.handleIconMouseDown,onClick:this.mobileMode?void 0:this.handleIconClick,title:j,className:n.classNames(n.uTimePicker.inputButton({c:w})),rounded:null,fillMode:s,"aria-label":K}),!this.mobileMode&&this.renderPopup()),this.mobileMode&&this.renderAdaptivePopup()));return this.props.label?r.createElement(Y.PickerFloatingLabel,{dateInput:this._dateInput,label:this.props.label,editorId:h,editorValid:S,editorDisabled:this.props.disabled,children:b,style:{width:this.props.width}}):b}normalizeTime(i){return p.setTime(p.MIDNIGHT_DATE,i)}setShow(i){const{onOpen:t,onClose:s}=this.props;this.show!==i&&(this.setState({show:i}),i&&t&&t.call(void 0,{target:this}),!i&&s&&s.call(void 0,{target:this}))}mergeTime(i){return this.value&&i?p.setTime(this.value,i):i}calculateMedia(i){for(const t of i)this.setState({windowWidth:t.target.clientWidth})}};a.displayName="TimePicker",a.propTypes={className:e.string,cancelButton:e.bool,nowButton:e.bool,defaultShow:e.bool,defaultValue:e.instanceOf(Date),disabled:e.bool,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,steps:e.shape({hour:e.number,minute:e.number,second:e.number}),smoothScroll:e.bool,tabIndex:e.number,title:e.string,value:e.instanceOf(Date),width:e.oneOfType([e.number,e.string]),validationMessage:e.string,required:e.bool,validate:e.bool,valid:e.bool,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),inputAttributes:e.object},a.defaultProps={defaultShow:!1,defaultValue:null,disabled:!1,format:"t",max:p.MAX_TIME,min:p.MIN_TIME,popupSettings:{},tabIndex:0,steps:{},validityStyles:!0,dateInput:J.DateInput,size:"medium",rounded:"medium",fillMode:"solid"};let m=a;const T=n.createPropsContext(),C=n.withIdHOC(n.withPropsContext(T,n.withUnstyledHOC(m)));C.displayName="KendoReactTimePicker";I.registerForLocalization(m);exports.TimePicker=C;exports.TimePickerPropsContext=T;exports.TimePickerWithoutContext=m;
|
|
@@ -8,22 +8,22 @@
|
|
|
8
8
|
"use client";
|
|
9
9
|
import * as a from "react";
|
|
10
10
|
import e from "prop-types";
|
|
11
|
-
import { Popup as
|
|
11
|
+
import { Popup as X } from "@progress/kendo-react-popup";
|
|
12
12
|
import { cloneDate as y } from "@progress/kendo-date-math";
|
|
13
|
-
import { classNames as c, uTimePicker as g, Keys as
|
|
14
|
-
import { clockIcon as
|
|
15
|
-
import { provideLocalizationService as
|
|
16
|
-
import { packageMetadata as
|
|
17
|
-
import { toggleClock as f, messages as
|
|
18
|
-
import { DateInput as
|
|
19
|
-
import { TimeSelector as
|
|
20
|
-
import { MAX_TIME as
|
|
21
|
-
import { isInRange as de, isBiggerThanMax as
|
|
22
|
-
import { PickerFloatingLabel as
|
|
23
|
-
import { Button as
|
|
24
|
-
import { MOBILE_MEDIUM_DEVISE as
|
|
25
|
-
import { AdaptiveMode as
|
|
26
|
-
import { ActionSheetContent as
|
|
13
|
+
import { classNames as c, uTimePicker as g, Keys as u, validatePackage as Z, canUseDOM as I, AsyncFocusBlur as J, createPropsContext as Q, withIdHOC as Y, withPropsContext as $, withUnstyledHOC as ee } from "@progress/kendo-react-common";
|
|
14
|
+
import { clockIcon as te } from "@progress/kendo-svg-icons";
|
|
15
|
+
import { provideLocalizationService as ie, registerForLocalization as se } from "@progress/kendo-react-intl";
|
|
16
|
+
import { packageMetadata as oe } from "../package-metadata.mjs";
|
|
17
|
+
import { toggleClock as f, messages as d, timePickerCancel as ne, timePickerSet as C, toggleTimeSelector as T } from "../messages/index.mjs";
|
|
18
|
+
import { DateInput as ae } from "../dateinput/DateInput.mjs";
|
|
19
|
+
import { TimeSelector as re } from "./TimeSelector.mjs";
|
|
20
|
+
import { MAX_TIME as le, MIN_TIME as he, setTime as M, MIDNIGHT_DATE as ue } from "../utils.mjs";
|
|
21
|
+
import { isInRange as de, isBiggerThanMax as pe, isSmallerThanMin as me } from "./utils.mjs";
|
|
22
|
+
import { PickerFloatingLabel as ce } from "../hooks/usePickerFloatingLabel.mjs";
|
|
23
|
+
import { Button as ge } from "@progress/kendo-react-buttons";
|
|
24
|
+
import { MOBILE_MEDIUM_DEVISE as fe } from "../common/constants.mjs";
|
|
25
|
+
import { AdaptiveMode as ve } from "../common/AdaptiveMode.mjs";
|
|
26
|
+
import { ActionSheetContent as we } from "@progress/kendo-react-layout";
|
|
27
27
|
const n = class n extends a.Component {
|
|
28
28
|
constructor(i) {
|
|
29
29
|
super(i), this._element = null, this._dateInput = a.createRef(), this._timeSelector = null, this.shouldFocusDateInput = !1, this.prevShow = !1, this.focus = () => {
|
|
@@ -31,7 +31,7 @@ const n = class n extends a.Component {
|
|
|
31
31
|
}, this.renderTimeSelector = () => {
|
|
32
32
|
const { smoothScroll: t, cancelButton: s, nowButton: o, disabled: l, format: h, steps: r, unstyled: m } = this.props;
|
|
33
33
|
return /* @__PURE__ */ a.createElement(
|
|
34
|
-
|
|
34
|
+
re,
|
|
35
35
|
{
|
|
36
36
|
ref: this.setTimeSelectorRef,
|
|
37
37
|
mobileMode: this.mobileMode,
|
|
@@ -70,7 +70,7 @@ const n = class n extends a.Component {
|
|
|
70
70
|
},
|
|
71
71
|
...s
|
|
72
72
|
};
|
|
73
|
-
return this.props.popup ? /* @__PURE__ */ a.createElement(this.props.popup, { ...r }, this.renderTimeSelector()) : /* @__PURE__ */ a.createElement(
|
|
73
|
+
return this.props.popup ? /* @__PURE__ */ a.createElement(this.props.popup, { ...r }, this.renderTimeSelector()) : /* @__PURE__ */ a.createElement(X, { ...r }, this.renderTimeSelector());
|
|
74
74
|
}, this.renderAdaptivePopup = () => {
|
|
75
75
|
const { windowWidth: t = 0 } = this.state, s = {
|
|
76
76
|
expand: this.show,
|
|
@@ -78,13 +78,13 @@ const n = class n extends a.Component {
|
|
|
78
78
|
adaptiveTitle: this.props.adaptiveTitle,
|
|
79
79
|
windowWidth: t,
|
|
80
80
|
footer: {
|
|
81
|
-
cancelText: this.localizationService.toLanguageString(f,
|
|
81
|
+
cancelText: this.localizationService.toLanguageString(f, d[ne]),
|
|
82
82
|
onCancel: this.handleValueReject,
|
|
83
|
-
applyText: this.localizationService.toLanguageString(C,
|
|
83
|
+
applyText: this.localizationService.toLanguageString(C, d[C]),
|
|
84
84
|
onApply: (o) => this.handleValueChange(o)
|
|
85
85
|
}
|
|
86
86
|
};
|
|
87
|
-
return /* @__PURE__ */ a.createElement(
|
|
87
|
+
return /* @__PURE__ */ a.createElement(ve, { ...s }, /* @__PURE__ */ a.createElement(we, { overflowHidden: !0 }, this.renderTimeSelector()));
|
|
88
88
|
}, this.setTimeSelectorRef = (t) => {
|
|
89
89
|
this._timeSelector = t;
|
|
90
90
|
}, this.nextValue = (t, s) => t.value !== void 0 ? t.value : s.value, this.nextShow = (t, s) => t.show !== void 0 ? t.show : s.show, this.handleInputValueChange = (t) => {
|
|
@@ -116,12 +116,12 @@ const n = class n extends a.Component {
|
|
|
116
116
|
t.preventDefault();
|
|
117
117
|
}, this.handleKeyDown = (t) => {
|
|
118
118
|
const { altKey: s, keyCode: o } = t;
|
|
119
|
-
if (o ===
|
|
119
|
+
if (o === u.esc) {
|
|
120
120
|
this.shouldFocusDateInput = !0, this.setShow(!1);
|
|
121
121
|
return;
|
|
122
122
|
}
|
|
123
|
-
s && (o ===
|
|
124
|
-
},
|
|
123
|
+
s && (o === u.up || o === u.down) && (t.preventDefault(), t.stopPropagation(), this.shouldFocusDateInput = o === u.up, this.setShow(o === u.down));
|
|
124
|
+
}, Z(oe), this.state = {
|
|
125
125
|
value: this.props.defaultValue || n.defaultProps.defaultValue,
|
|
126
126
|
show: this.props.defaultShow || n.defaultProps.defaultShow,
|
|
127
127
|
focused: !1,
|
|
@@ -179,8 +179,8 @@ const n = class n extends a.Component {
|
|
|
179
179
|
const i = this.value && this.normalizeTime(this.value), t = this.normalizeTime(this.min), s = this.normalizeTime(this.max), o = de(i, t, s), l = this.props.validationMessage !== void 0, h = (!this.required || this.value !== null) && o, r = this.props.valid !== void 0 ? this.props.valid : h;
|
|
180
180
|
return {
|
|
181
181
|
customError: l,
|
|
182
|
-
rangeOverflow:
|
|
183
|
-
rangeUnderflow:
|
|
182
|
+
rangeOverflow: pe(i, s),
|
|
183
|
+
rangeUnderflow: me(i, t),
|
|
184
184
|
valid: r,
|
|
185
185
|
valueMissing: this.value === null
|
|
186
186
|
};
|
|
@@ -189,7 +189,7 @@ const n = class n extends a.Component {
|
|
|
189
189
|
* The mobile mode of the ComboBox.
|
|
190
190
|
*/
|
|
191
191
|
get mobileMode() {
|
|
192
|
-
return !!(this.state.windowWidth && this.state.windowWidth <=
|
|
192
|
+
return !!(this.state.windowWidth && this.state.windowWidth <= fe && this.props.adaptive);
|
|
193
193
|
}
|
|
194
194
|
/**
|
|
195
195
|
* @hidden
|
|
@@ -216,7 +216,7 @@ const n = class n extends a.Component {
|
|
|
216
216
|
return this.props.dateInput || n.defaultProps.dateInput;
|
|
217
217
|
}
|
|
218
218
|
get localizationService() {
|
|
219
|
-
return
|
|
219
|
+
return ie(this);
|
|
220
220
|
}
|
|
221
221
|
/**
|
|
222
222
|
* @hidden
|
|
@@ -266,8 +266,9 @@ const n = class n extends a.Component {
|
|
|
266
266
|
autoCorrectParts: A,
|
|
267
267
|
autoSwitchParts: N,
|
|
268
268
|
autoSwitchKeys: L,
|
|
269
|
-
allowCaretMode: _
|
|
270
|
-
|
|
269
|
+
allowCaretMode: _,
|
|
270
|
+
inputAttributes: q
|
|
271
|
+
} = this.props, w = v && v.uTimePicker, S = !this.validityStyles || this.validity.valid, K = {
|
|
271
272
|
disabled: o,
|
|
272
273
|
format: D,
|
|
273
274
|
formatPlaceholder: O,
|
|
@@ -297,24 +298,25 @@ const n = class n extends a.Component {
|
|
|
297
298
|
autoCorrectParts: A,
|
|
298
299
|
autoSwitchParts: N,
|
|
299
300
|
autoSwitchKeys: L,
|
|
300
|
-
allowCaretMode: _
|
|
301
|
-
|
|
301
|
+
allowCaretMode: _,
|
|
302
|
+
inputAttributes: q
|
|
303
|
+
}, U = this.localizationService.toLanguageString(f, d[f]), j = this.localizationService.toLanguageString(
|
|
302
304
|
T,
|
|
303
|
-
|
|
305
|
+
d[T]
|
|
304
306
|
), b = /* @__PURE__ */ a.createElement(
|
|
305
|
-
|
|
307
|
+
J,
|
|
306
308
|
{
|
|
307
309
|
onFocus: this.handleFocus,
|
|
308
310
|
onBlur: this.mobileMode ? void 0 : this.handleBlur,
|
|
309
311
|
onSyncBlur: this.props.onBlur,
|
|
310
312
|
onSyncFocus: this.props.onFocus
|
|
311
313
|
},
|
|
312
|
-
({ onFocus: H, onBlur:
|
|
314
|
+
({ onFocus: H, onBlur: W }) => /* @__PURE__ */ a.createElement(a.Fragment, null, /* @__PURE__ */ a.createElement(
|
|
313
315
|
"span",
|
|
314
316
|
{
|
|
315
317
|
id: this.props.id,
|
|
316
|
-
ref: (
|
|
317
|
-
this._element =
|
|
318
|
+
ref: (G) => {
|
|
319
|
+
this._element = G;
|
|
318
320
|
},
|
|
319
321
|
className: c(
|
|
320
322
|
g.wrapper({
|
|
@@ -331,7 +333,7 @@ const n = class n extends a.Component {
|
|
|
331
333
|
onKeyDown: this.handleKeyDown,
|
|
332
334
|
style: { width: P },
|
|
333
335
|
onFocus: H,
|
|
334
|
-
onBlur:
|
|
336
|
+
onBlur: W,
|
|
335
337
|
onClick: this.mobileMode ? this.handleIconClick : void 0
|
|
336
338
|
},
|
|
337
339
|
/* @__PURE__ */ a.createElement(
|
|
@@ -340,30 +342,30 @@ const n = class n extends a.Component {
|
|
|
340
342
|
_ref: this._dateInput,
|
|
341
343
|
ariaRole: "combobox",
|
|
342
344
|
ariaControls: this._popupId,
|
|
343
|
-
...
|
|
345
|
+
...K
|
|
344
346
|
}
|
|
345
347
|
),
|
|
346
348
|
/* @__PURE__ */ a.createElement(
|
|
347
|
-
|
|
349
|
+
ge,
|
|
348
350
|
{
|
|
349
351
|
tabIndex: -1,
|
|
350
352
|
type: "button",
|
|
351
353
|
icon: "clock",
|
|
352
|
-
svgIcon:
|
|
354
|
+
svgIcon: te,
|
|
353
355
|
onMouseDown: this.handleIconMouseDown,
|
|
354
356
|
onClick: this.mobileMode ? void 0 : this.handleIconClick,
|
|
355
|
-
title:
|
|
357
|
+
title: j,
|
|
356
358
|
className: c(g.inputButton({ c: w })),
|
|
357
359
|
rounded: null,
|
|
358
360
|
fillMode: s,
|
|
359
|
-
"aria-label":
|
|
361
|
+
"aria-label": U
|
|
360
362
|
}
|
|
361
363
|
),
|
|
362
364
|
!this.mobileMode && this.renderPopup()
|
|
363
365
|
), this.mobileMode && this.renderAdaptivePopup())
|
|
364
366
|
);
|
|
365
367
|
return this.props.label ? /* @__PURE__ */ a.createElement(
|
|
366
|
-
|
|
368
|
+
ce,
|
|
367
369
|
{
|
|
368
370
|
dateInput: this._dateInput,
|
|
369
371
|
label: this.props.label,
|
|
@@ -376,7 +378,7 @@ const n = class n extends a.Component {
|
|
|
376
378
|
) : b;
|
|
377
379
|
}
|
|
378
380
|
normalizeTime(i) {
|
|
379
|
-
return M(
|
|
381
|
+
return M(ue, i);
|
|
380
382
|
}
|
|
381
383
|
setShow(i) {
|
|
382
384
|
const { onOpen: t, onClose: s } = this.props;
|
|
@@ -465,34 +467,35 @@ n.displayName = "TimePicker", n.propTypes = {
|
|
|
465
467
|
valid: e.bool,
|
|
466
468
|
size: e.oneOf([null, "small", "medium", "large"]),
|
|
467
469
|
rounded: e.oneOf([null, "small", "medium", "large", "full"]),
|
|
468
|
-
fillMode: e.oneOf([null, "solid", "flat", "outline"])
|
|
470
|
+
fillMode: e.oneOf([null, "solid", "flat", "outline"]),
|
|
471
|
+
inputAttributes: e.object
|
|
469
472
|
}, n.defaultProps = {
|
|
470
473
|
defaultShow: !1,
|
|
471
474
|
defaultValue: null,
|
|
472
475
|
disabled: !1,
|
|
473
476
|
format: "t",
|
|
474
|
-
max:
|
|
475
|
-
min:
|
|
477
|
+
max: le,
|
|
478
|
+
min: he,
|
|
476
479
|
popupSettings: {},
|
|
477
480
|
tabIndex: 0,
|
|
478
481
|
steps: {},
|
|
479
482
|
validityStyles: !0,
|
|
480
|
-
dateInput:
|
|
483
|
+
dateInput: ae,
|
|
481
484
|
size: "medium",
|
|
482
485
|
rounded: "medium",
|
|
483
486
|
fillMode: "solid"
|
|
484
487
|
};
|
|
485
488
|
let p = n;
|
|
486
|
-
const
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
489
|
+
const Se = Q(), be = Y(
|
|
490
|
+
$(
|
|
491
|
+
Se,
|
|
492
|
+
ee(p)
|
|
490
493
|
)
|
|
491
494
|
);
|
|
492
|
-
|
|
493
|
-
|
|
495
|
+
be.displayName = "KendoReactTimePicker";
|
|
496
|
+
se(p);
|
|
494
497
|
export {
|
|
495
|
-
|
|
496
|
-
|
|
498
|
+
be as TimePicker,
|
|
499
|
+
Se as TimePickerPropsContext,
|
|
497
500
|
p as TimePickerWithoutContext
|
|
498
501
|
};
|