jude/reminder-dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Populate interval inputs with zero if interval is specified

Browse Source
This commit is contained in:
jude 2023-11-12 10:37:11 +00:00
parent 5ee1fa60db
commit d068782596
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/Reminder/IntervalSelector.tsx
View File

@ -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));
}} }}