Make duration input clearable (#22614)

This commit is contained in:
karwosts 2024-11-03 22:25:09 -08:00 committed by GitHub
parent 89250c0c01
commit f9a53743ce
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 57 additions and 29 deletions

View File

@ -43,6 +43,7 @@ class HaDurationInput extends LitElement {
.label=${this.label}
.helper=${this.helper}
.required=${this.required}
.clearable=${!this.required && this.data !== undefined}
.autoValidate=${this.required}
.disabled=${this.disabled}
errorMessage="Required"
@ -67,50 +68,79 @@ class HaDurationInput extends LitElement {
}
private get _days() {
return this.data?.days ? Number(this.data.days) : 0;
return this.data?.days
? Number(this.data.days)
: this.required || this.data
? 0
: NaN;
}
private get _hours() {
return this.data?.hours ? Number(this.data.hours) : 0;
return this.data?.hours
? Number(this.data.hours)
: this.required || this.data
? 0
: NaN;
}
private get _minutes() {
return this.data?.minutes ? Number(this.data.minutes) : 0;
return this.data?.minutes
? Number(this.data.minutes)
: this.required || this.data
? 0
: NaN;
}
private get _seconds() {
return this.data?.seconds ? Number(this.data.seconds) : 0;
return this.data?.seconds
? Number(this.data.seconds)
: this.required || this.data
? 0
: NaN;
}
private get _milliseconds() {
return this.data?.milliseconds ? Number(this.data.milliseconds) : 0;
return this.data?.milliseconds
? Number(this.data.milliseconds)
: this.required || this.data
? 0
: NaN;
}
private _durationChanged(ev: CustomEvent<{ value: TimeChangedEvent }>) {
private _durationChanged(ev: CustomEvent<{ value?: TimeChangedEvent }>) {
ev.stopPropagation();
const value = { ...ev.detail.value };
const value = ev.detail.value ? { ...ev.detail.value } : undefined;
if (!this.enableMillisecond && !value.milliseconds) {
// @ts-ignore
delete value.milliseconds;
} else if (value.milliseconds > 999) {
value.seconds += Math.floor(value.milliseconds / 1000);
value.milliseconds %= 1000;
}
if (value) {
value.hours ||= 0;
value.minutes ||= 0;
value.seconds ||= 0;
if (value.seconds > 59) {
value.minutes += Math.floor(value.seconds / 60);
value.seconds %= 60;
}
if ("days" in value) value.days ||= 0;
if ("milliseconds" in value) value.milliseconds ||= 0;
if (value.minutes > 59) {
value.hours += Math.floor(value.minutes / 60);
value.minutes %= 60;
}
if (!this.enableMillisecond && !value.milliseconds) {
// @ts-ignore
delete value.milliseconds;
} else if (value.milliseconds > 999) {
value.seconds += Math.floor(value.milliseconds / 1000);
value.milliseconds %= 1000;
}
if (this.enableDay && value.hours > 24) {
value.days = (value.days ?? 0) + Math.floor(value.hours / 24);
value.hours %= 24;
if (value.seconds > 59) {
value.minutes += Math.floor(value.seconds / 60);
value.seconds %= 60;
}
if (value.minutes > 59) {
value.hours += Math.floor(value.minutes / 60);
value.minutes %= 60;
}
if (this.enableDay && value.hours > 24) {
value.days = (value.days ?? 0) + Math.floor(value.hours / 24);
value.hours %= 24;
}
}
fireEvent(this, "value-changed", {

View File

@ -49,6 +49,7 @@ export class HaDelayAction extends LitElement implements ActionElement {
.disabled=${this.disabled}
.data=${this._timeData}
enableMillisecond
required
@value-changed=${this._valueChanged}
></ha-duration-input>`;
}

View File

@ -67,9 +67,6 @@ export class HaWaitForTriggerAction
private _timeoutChanged(ev: CustomEvent<{ value: TimeChangedEvent }>): void {
ev.stopPropagation();
const value = ev.detail.value;
if (!value) {
return;
}
fireEvent(this, "value-changed", {
value: { ...this.action, timeout: value },
});

View File

@ -46,7 +46,7 @@ export class HaCalendarTrigger extends LitElement implements TriggerElement {
],
],
},
{ name: "offset", selector: { duration: {} } },
{ name: "offset", required: true, selector: { duration: {} } },
{
name: "offset_type",
type: "select",