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

Use blur to set value

Browse Source
This commit is contained in:
jude 2023-11-19 11:29:10 +00:00
parent 67ce9077b6
commit 76c8afd45f
3 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/components/Reminder/Embed/Fields/Field.tsx
View File

@ -1,6 +1,6 @@
export const Field = ({ title, value, inlined, index, onUpdate }) => { export const Field = ({ title, value, inline, index, onUpdate }) => {
return ( return (
<div data-inlined={inlined ? "1" : "0"} class="embed-field-box" key={index}> <div data-inlined={inline ? "1" : "0"} class="embed-field-box" key={index}>
<label class="is-sr-only" for="embedFieldTitle"> <label class="is-sr-only" for="embedFieldTitle">
Field Title Field Title
</label> </label>
@ -24,7 +24,7 @@ export const Field = ({ title, value, inlined, index, onUpdate }) => {
onClick={() => { onClick={() => {
onUpdate({ onUpdate({
index, index,
inlined: !inlined, inline: !inline,
}); });
}} }}
> >

4
src/components/Reminder/Embed/Fields/index.tsx
View File

@ -6,7 +6,7 @@ export const Fields = () => {
return ( return (
<div class={"embed-multifield-box"}> <div class={"embed-multifield-box"}>
{[...embed_fields, { value: "", title: "", inlined: true }].map((field, index) => ( {[...embed_fields, { value: "", title: "", inline: true }].map((field, index) => (
<Field <Field
{...field} {...field}
index={index} index={index}
@ -15,7 +15,7 @@ export const Fields = () => {
...reminder, ...reminder,
embed_fields: [ embed_fields: [
...reminder.embed_fields, ...reminder.embed_fields,
{ value: "", title: "", inlined: true }, { value: "", title: "", inline: true },
] ]
.map((f, i) => { .map((f, i) => {
if (i === index) { if (i === index) {

18
src/components/Reminder/TimeInput.tsx
View File

@ -58,6 +58,9 @@ export const TimeInput = ({ defaultValue, onInput }) => {
minimumIntegerDigits: 4, minimumIntegerDigits: 4,
useGrouping: false, useGrouping: false,
})} })}
onBlur={(ev) => {
setTime(time.set({ year: ev.currentTarget.value }));
}}
></input>{" "} ></input>{" "}
</label> </label>
- -
@ -75,6 +78,9 @@ export const TimeInput = ({ defaultValue, onInput }) => {
maxlength={2} maxlength={2}
placeholder="12" placeholder="12"
value={time?.month.toLocaleString("en-US", { minimumIntegerDigits: 2 })} value={time?.month.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
onBlur={(ev) => {
setTime(time.set({ month: ev.currentTarget.value }));
}}
></input>{" "} ></input>{" "}
</label> </label>
- -
@ -92,6 +98,9 @@ export const TimeInput = ({ defaultValue, onInput }) => {
maxlength={2} maxlength={2}
placeholder="25" placeholder="25"
value={time?.day.toLocaleString("en-US", { minimumIntegerDigits: 2 })} value={time?.day.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
onBlur={(ev) => {
setTime(time.set({ day: ev.currentTarget.value }));
}}
></input>{" "} ></input>{" "}
</label> </label>
<label style={{ marginLeft: "8px" }}> <label style={{ marginLeft: "8px" }}>
@ -108,6 +117,9 @@ export const TimeInput = ({ defaultValue, onInput }) => {
maxlength={2} maxlength={2}
placeholder="12" placeholder="12"
value={time?.hour.toLocaleString("en-US", { minimumIntegerDigits: 2 })} value={time?.hour.toLocaleString("en-US", { minimumIntegerDigits: 2 })}
onBlur={(ev) => {
setTime(time.set({ hour: ev.currentTarget.value }));
}}
></input>{" "} ></input>{" "}
</label> </label>
: :
@ -127,6 +139,9 @@ export const TimeInput = ({ defaultValue, onInput }) => {
value={time?.minute.toLocaleString("en-US", { value={time?.minute.toLocaleString("en-US", {
minimumIntegerDigits: 2, minimumIntegerDigits: 2,
})} })}
onBlur={(ev) => {
setTime(time.set({ minute: ev.currentTarget.value }));
}}
></input>{" "} ></input>{" "}
</label> </label>
: :
@ -146,6 +161,9 @@ export const TimeInput = ({ defaultValue, onInput }) => {
value={time?.second.toLocaleString("en-US", { value={time?.second.toLocaleString("en-US", {
minimumIntegerDigits: 2, minimumIntegerDigits: 2,
})} })}
onBlur={(ev) => {
setTime(time.set({ second: ev.currentTarget.value }));
}}
></input>{" "} ></input>{" "}
</label> </label>
</div> </div>