inviton-powerduck 0.0.154 → 0.0.155

package/components/input/datetime-picker.tsx

@@ -1,26 +1,29 @@
+import type { Temporal } from '@js-temporal/polyfill';
+
 import type { DropdownButtonItemArgs } from '../dropdown-button/dropdown-button-item';
 import type { FormItemWrapperArgs, MarginType } from '../form/form-item-wrapper';
 import { Prop, toNative } from 'vue-facing-decorator';
 import PowerduckState from '../../app/powerduck-state';
 import TsxComponent, { Component } from '../../app/vuetsx';
 
-import { DateWrapper } from '../../common/date-wrapper';
-import { capitalize } from '../../common/utils/capitalize-string';
+import { toJsDate, toWire } from '../../common/extensions/temporal-extensions';
 import { isNullOrEmpty } from '../../common/utils/is-null-or-empty';
+import TemporalUtils from '../../common/utils/temporal-utils';
 import { PortalUtils } from '../../common/utils/utils';
 import FormItemWrapper from '../form/form-item-wrapper';
 import DateInputHelper, { DateInputUsage } from './ts/dateInputHelper';
 import 'bootstrap-datetime-picker';
 import 'bootstrap-datetime-picker/css/bootstrap-datetimepicker.min.css';
+import { capitalize } from '../../common/extensions/string-extensions';
 
 interface DatetimePickerArgs extends FormItemWrapperArgs {
-	value: DateWrapper;
+	value: Temporal.PlainDateTime;
 	disabled?: boolean;
 	placeholder?: string;
 	showTime?: boolean;
-	startDate?: DateWrapper;
-	endDate?: DateWrapper;
-	changed: (newValue: DateWrapper) => void;
+	startDate?: Temporal.PlainDateTime;
+	endDate?: Temporal.PlainDateTime;
+	changed: (newValue: Temporal.PlainDateTime) => void;
 	inline?: boolean;
 }
 
@@ -29,7 +32,7 @@ class DatetimePickerComponent extends TsxComponent<DatetimePickerArgs> implement
 	@Prop() label!: string;
 	@Prop() labelButtons!: DropdownButtonItemArgs[];
 	@Prop() subtitle!: string;
-	@Prop() value!: DateWrapper;
+	@Prop() value!: Temporal.PlainDateTime;
 	@Prop() disabled!: boolean;
 	@Prop() placeholder!: string;
 	@Prop() mandatory!: boolean;
@@ -41,14 +44,14 @@ class DatetimePickerComponent extends TsxComponent<DatetimePickerArgs> implement
 	@Prop() prependClicked: () => void;
 	@Prop() maxWidth?: number;
 	@Prop() marginType?: MarginType;
-	@Prop() changed: (newValue: DateWrapper) => void;
+	@Prop() changed: (newValue: Temporal.PlainDateTime) => void;
 	@Prop() showTime!: boolean;
 	@Prop() showClearValueButton!: boolean;
-	@Prop() startDate?: DateWrapper;
-	@Prop() endDate?: DateWrapper;
+	@Prop() startDate?: Temporal.PlainDateTime;
+	@Prop() endDate?: Temporal.PlainDateTime;
 	@Prop() inline!: boolean;
 
-	raiseChangeEvent(newValue: DateWrapper) {
+	raiseChangeEvent(newValue: Temporal.PlainDateTime) {
 		this.populateValidationDeclaration();
 
 		if (this.changed != null) {
@@ -78,7 +81,7 @@ class DatetimePickerComponent extends TsxComponent<DatetimePickerArgs> implement
 		}
 
 		if (this.useNativeElement()) {
-			return this.value.toWire(this.showTime);
+			return this.value?.[toWire](this.showTime);
 		} else {
 			return null;
 		}
@@ -107,24 +110,26 @@ class DatetimePickerComponent extends TsxComponent<DatetimePickerArgs> implement
 			};
 
 			for (let i = 0; i < 12; i++) {
+				// eslint-disable-next-line no-restricted-syntax
 				const monthDate = new Date(Date.UTC(
 					1990,
 					i,
 					1,
 				));
-				resPack.months.push(capitalize(monthDate.toLocaleDateString(locale, { month: 'long', timeZone: 'UTC' })));
-				resPack.monthsShort.push(capitalize(monthDate.toLocaleDateString(locale, { month: 'short', timeZone: 'UTC' })));
+				resPack.months.push(monthDate.toLocaleDateString(locale, { month: 'long', timeZone: 'UTC' })[capitalize]());
+				resPack.monthsShort.push(monthDate.toLocaleDateString(locale, { month: 'short', timeZone: 'UTC' })[capitalize]());
 			}
 
 			for (let i = 7; i < 15; i++) {
+				// eslint-disable-next-line no-restricted-syntax
 				const dayDate = new Date(Date.UTC(
 					2015,
 					5,
 					i,
 				));
-				resPack.days.push(capitalize(dayDate.toLocaleDateString(locale, { weekday: 'long', timeZone: 'UTC' })));
+				resPack.days.push(dayDate.toLocaleDateString(locale, { weekday: 'long', timeZone: 'UTC' })[capitalize]());
 
-				let shortDay = capitalize(dayDate.toLocaleDateString(locale, { weekday: 'short', timeZone: 'UTC' }));
+				let shortDay = dayDate.toLocaleDateString(locale, { weekday: 'short', timeZone: 'UTC' })[capitalize]();
 				resPack.daysShort.push(shortDay);
 
 				if (shortDay.length > 2) {
@@ -140,12 +145,15 @@ class DatetimePickerComponent extends TsxComponent<DatetimePickerArgs> implement
 
 	getTimeZoneAbbreviation(): string {
 		let abbreviation, formattedStr, matchedStrings, ref, str;
+		// eslint-disable-next-line no-restricted-syntax
 		const date = new Date().toString();
+		// eslint-disable-next-line no-cond-assign
 		formattedStr = ((ref = date.split('(')[1]) != null ? ref.slice(0, -1) : 0) || date.split(' ');
 		if (Array.isArray(formattedStr)) {
 			matchedStrings = [];
 			for (let i = 0, len = formattedStr.length; i < len; i++) {
 				str = formattedStr[i];
+				// eslint-disable-next-line no-cond-assign
 				if ((abbreviation = (ref = str.match(/\b[A-Z]+\b/)) !== null) ? ref[0] : 0) {
 					matchedStrings.push(abbreviation);
 				}
@@ -158,7 +166,7 @@ class DatetimePickerComponent extends TsxComponent<DatetimePickerArgs> implement
 
 	handleInputValueChange(e) {
 		if (this.useNativeElement()) {
-			this.raiseChangeEvent(DateWrapper.fromWire(e.target.value));
+			this.raiseChangeEvent(TemporalUtils.fromString(e.target.value));
 		} else {
 			(this.getDtpJq() as any).datetimepicker('update');
 
@@ -174,14 +182,8 @@ class DatetimePickerComponent extends TsxComponent<DatetimePickerArgs> implement
 					'standard',
 					'UTC',
 				);
-				const utcDateWrapper = new DateWrapper(Date.UTC(
-					parsedDate.getUTCFullYear(),
-					parsedDate.getUTCMonth(),
-					parsedDate.getUTCDate(),
-					parsedDate.getUTCHours(),
-					parsedDate.getUTCMinutes(),
-				));
-				this.onDtpValueChanged(utcDateWrapper as any);
+
+				this.onDtpValueChanged(TemporalUtils.fromDate(parsedDate));
 			}
 		}
 	}
@@ -209,8 +211,8 @@ class DatetimePickerComponent extends TsxComponent<DatetimePickerArgs> implement
 					onFocus={e => this.handleInputOnFocus(e)}
 					class={`${PowerduckState.getFormControlCssClass()} dtp-input${placeholderClass}`}
 					placeholder={this.placeholder}
-					min={this.startDate == null ? null : this.startDate.toWire(this.showTime)}
-					max={this.endDate == null ? null : this.endDate.toWire(this.showTime)}
+					min={this.startDate == null ? null : this.startDate[toWire](this.showTime)}
+					max={this.endDate == null ? null : this.endDate[toWire](this.showTime)}
 				/>
 			);
 		} else {
@@ -239,8 +241,8 @@ class DatetimePickerComponent extends TsxComponent<DatetimePickerArgs> implement
 		);
 	}
 
-	onDtpValueChanged(e: Date): void {
-		this.raiseChangeEvent(e != null ? DateWrapper.fromNonUtcDate(e) : null);
+	onDtpValueChanged(e: Temporal.PlainDateTime): void {
+		this.raiseChangeEvent(e);
 	}
 
 	getDtpJq(): JQuery {
@@ -252,15 +254,7 @@ class DatetimePickerComponent extends TsxComponent<DatetimePickerArgs> implement
 			return null;
 		}
 
-		const d = this.value;
-		return new Date(
-			d.getFullYear(),
-			d.getMonth(),
-			d.getDate(),
-			d.getHours(),
-			d.getMinutes(),
-			d.getSeconds(),
-		);
+		return this.value[toJsDate]();
 	}
 
 	refreshJqInputDate() {
@@ -274,7 +268,7 @@ class DatetimePickerComponent extends TsxComponent<DatetimePickerArgs> implement
 		const DPGlobal = ($ as any).fn.datetimepicker.DPGlobal;
 		const format = DPGlobal.parseFormat(this.getDtpDateFormat(), 'standard');
 		const separators = $.extend([], format.separators);
-		const getVal = function (num: number): string {
+		const getVal = (num: number): string => {
 			if (num < 10) {
 				return `0${num.toString()}`;
 			} else {
@@ -283,15 +277,16 @@ class DatetimePickerComponent extends TsxComponent<DatetimePickerArgs> implement
 		};
 
 		if (date != null) {
+			const d = date.toZonedDateTime('UTC');
 			const funcMapping = {
-				t: date.getTime(),
-				yy: date.getFullYear().toString().substring(2),
-				yyyy: date.getFullYear(),
-				mm: getVal(date.getMonth() + 1),
-				dd: getVal(date.getDate()),
-				hh: getVal(date.getHours()),
-				ii: getVal(date.getMinutes()),
-				ss: getVal(date.getSeconds()),
+				t: d.epochMilliseconds,
+				yy: d.year.toString().substring(2),
+				yyyy: d.year,
+				mm: getVal(d.month),
+				dd: getVal(d.day),
+				hh: getVal(d.hour),
+				ii: getVal(d.minute),
+				ss: getVal(d.second),
 				z: this.getTimeZoneAbbreviation(),
 			};
 
@@ -323,8 +318,8 @@ class DatetimePickerComponent extends TsxComponent<DatetimePickerArgs> implement
 				format: this.getDtpDateFormat(),
 				minView: this.showTime ? 0 : 2,
 				initialDate: this.getDateForJqDtp(),
-				startDate: this.startDate != null ? this.startDate.toWire(true) : null,
-				endDate: this.endDate != null ? this.endDate.toWire(true) : null,
+				startDate: this.startDate != null ? this.startDate[toWire](true) : null,
+				endDate: this.endDate != null ? this.endDate[toWire](true) : null,
 				language: PowerduckState.getCurrentLanguage(),
 				timezone: this.getTimeZoneAbbreviation(),
 				weekStart: DateInputHelper.getStartOfWeek(),
@@ -332,7 +327,7 @@ class DatetimePickerComponent extends TsxComponent<DatetimePickerArgs> implement
 
 			this.getDtpJq()
 				.on('changeDate', (e: any) => {
-					this.onDtpValueChanged(e.date);
+					this.onDtpValueChanged(TemporalUtils.fromDate(e.date));
 				})
 				.on('keydown', (e) => {
 					if (e.keyCode == 13) {