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

Fix color picker not working

Browse Source
This commit is contained in:
jude
2024-02-28 21:16:24 +00:00
parent 328127c55e
commit 1c6103142f
3 changed files with 25 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
reminder-dashboard/src/components/Reminder/Embed/Color.tsx
View File

@ -1,7 +1,8 @@
import { useState } from "preact/hooks";
import { useEffect, useState } from "preact/hooks";
import { HexColorPicker } from "react-colorful";
import { Modal } from "../../Modal";
import { Reminder } from "../../../api";
import { useDebouncedCallback } from "use-debounce";
type Props = {
color: string;
@ -38,16 +39,20 @@ export const Color = ({ color, setReminder }: Props) => {
};
const ColorModal = ({ setModalOpen, color, setReminder }) => {
const setDebounced = useDebouncedCallback((color) => {
setReminder((reminder: Reminder) => ({
...reminder,
embed_color: colorToInt(color),
}));
}, 100);
return (
<Modal setModalOpen={setModalOpen} title={"Select Color"}>
<div class="colorpicker-container">
<HexColorPicker
color={color}
onInput={(color) => {
setReminder((reminder) => ({
...reminder,
embed_color: colorToInt(color),
}));
onChange={(color: string) => {
setDebounced(color);
}}
></HexColorPicker>
</div>
@ -57,10 +62,7 @@ const ColorModal = ({ setModalOpen, color, setReminder }) => {
id="colorInput"
value={color}
onInput={(ev) => {
setReminder((reminder) => ({
...reminder,
embed_color: colorToInt(ev.currentTarget.value),
}));
setDebounced(ev.currentTarget.value);
}}
></input>
</Modal>