Populate interval inputs with zero if interval is specified
This commit is contained in:
parent
5ee1fa60db
commit
d068782596
@ -1,4 +1,4 @@
|
|||||||
import { useEffect, useState } from "preact/hooks";
|
import { useCallback, useEffect, useState } from "preact/hooks";
|
||||||
import { useReminder } from "./ReminderContext";
|
import { useReminder } from "./ReminderContext";
|
||||||
|
|
||||||
function divmod(a: number, b: number) {
|
function divmod(a: number, b: number) {
|
||||||
@ -45,6 +45,10 @@ export const IntervalSelector = ({
|
|||||||
}
|
}
|
||||||
}, [seconds, minutes, hours, days, months]);
|
}, [seconds, minutes, hours, days, months]);
|
||||||
|
|
||||||
|
const placeholder = useCallback(() => {
|
||||||
|
return seconds || minutes || hours || days || months ? "0" : "";
|
||||||
|
}, [seconds, minutes, hours, days, months]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="control intervalSelector">
|
<div class="control intervalSelector">
|
||||||
<div class="input interval-group">
|
<div class="input interval-group">
|
||||||
@ -59,7 +63,7 @@ export const IntervalSelector = ({
|
|||||||
name="interval_months"
|
name="interval_months"
|
||||||
maxlength={2}
|
maxlength={2}
|
||||||
placeholder=""
|
placeholder=""
|
||||||
value={months || ""}
|
value={months || placeholder()}
|
||||||
onInput={(ev) => {
|
onInput={(ev) => {
|
||||||
setMonths(parseInt(ev.currentTarget.value));
|
setMonths(parseInt(ev.currentTarget.value));
|
||||||
}}
|
}}
|
||||||
@ -75,7 +79,7 @@ export const IntervalSelector = ({
|
|||||||
name="interval_days"
|
name="interval_days"
|
||||||
maxlength={4}
|
maxlength={4}
|
||||||
placeholder=""
|
placeholder=""
|
||||||
value={days || ""}
|
value={days || placeholder()}
|
||||||
onInput={(ev) => {
|
onInput={(ev) => {
|
||||||
setDays(parseInt(ev.currentTarget.value));
|
setDays(parseInt(ev.currentTarget.value));
|
||||||
}}
|
}}
|
||||||
@ -93,7 +97,7 @@ export const IntervalSelector = ({
|
|||||||
name="interval_hours"
|
name="interval_hours"
|
||||||
maxlength={2}
|
maxlength={2}
|
||||||
placeholder="HH"
|
placeholder="HH"
|
||||||
value={hours || ""}
|
value={hours || placeholder()}
|
||||||
onInput={(ev) => {
|
onInput={(ev) => {
|
||||||
setHours(parseInt(ev.currentTarget.value));
|
setHours(parseInt(ev.currentTarget.value));
|
||||||
}}
|
}}
|
||||||
@ -109,7 +113,7 @@ export const IntervalSelector = ({
|
|||||||
name="interval_minutes"
|
name="interval_minutes"
|
||||||
maxlength={2}
|
maxlength={2}
|
||||||
placeholder="MM"
|
placeholder="MM"
|
||||||
value={minutes || ""}
|
value={minutes || placeholder()}
|
||||||
onInput={(ev) => {
|
onInput={(ev) => {
|
||||||
setMinutes(parseInt(ev.currentTarget.value));
|
setMinutes(parseInt(ev.currentTarget.value));
|
||||||
}}
|
}}
|
||||||
@ -125,7 +129,7 @@ export const IntervalSelector = ({
|
|||||||
name="interval_seconds"
|
name="interval_seconds"
|
||||||
maxlength={2}
|
maxlength={2}
|
||||||
placeholder="SS"
|
placeholder="SS"
|
||||||
value={seconds || ""}
|
value={seconds || placeholder()}
|
||||||
onInput={(ev) => {
|
onInput={(ev) => {
|
||||||
setSeconds(parseInt(ev.currentTarget.value));
|
setSeconds(parseInt(ev.currentTarget.value));
|
||||||
}}
|
}}
|
||||||
|
Loading…
Reference in New Issue
Block a user