From 1c6103142f903e24c0dabb61e8df57735ed28754 Mon Sep 17 00:00:00 2001 From: jude Date: Wed, 28 Feb 2024 21:16:24 +0000 Subject: [PATCH] Fix color picker not working --- reminder-dashboard/package-lock.json | 12 ++++++++++ reminder-dashboard/package.json | 1 + .../src/components/Reminder/Embed/Color.tsx | 22 ++++++++++--------- 3 files changed, 25 insertions(+), 10 deletions(-) diff --git a/reminder-dashboard/package-lock.json b/reminder-dashboard/package-lock.json index 2ed4077..4bdf8ee 100644 --- a/reminder-dashboard/package-lock.json +++ b/reminder-dashboard/package-lock.json @@ -13,6 +13,7 @@ "react-colorful": "^5.6.1", "react-query": "^3.39.3", "tributejs": "^5.1.3", + "use-debounce": "^10.0.0", "wouter": "^3.0" }, "devDependencies": { @@ -5206,6 +5207,17 @@ "punycode": "^2.1.0" } }, + "node_modules/use-debounce": { + "version": "10.0.0", + "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-10.0.0.tgz", + "integrity": "sha512-XRjvlvCB46bah9IBXVnq/ACP2lxqXyZj0D9hj4K5OzNroMDpTEBg8Anuh1/UfRTRs7pLhQ+RiNxxwZu9+MVl1A==", + "engines": { + "node": ">= 16.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0" + } + }, "node_modules/use-sync-external-store": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", diff --git a/reminder-dashboard/package.json b/reminder-dashboard/package.json index fb249b1..1169d98 100644 --- a/reminder-dashboard/package.json +++ b/reminder-dashboard/package.json @@ -16,6 +16,7 @@ "react-colorful": "^5.6.1", "react-query": "^3.39.3", "tributejs": "^5.1.3", + "use-debounce": "^10.0.0", "wouter": "^3.0" }, "devDependencies": { diff --git a/reminder-dashboard/src/components/Reminder/Embed/Color.tsx b/reminder-dashboard/src/components/Reminder/Embed/Color.tsx index 2af56e3..50915cd 100644 --- a/reminder-dashboard/src/components/Reminder/Embed/Color.tsx +++ b/reminder-dashboard/src/components/Reminder/Embed/Color.tsx @@ -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 (
{ - setReminder((reminder) => ({ - ...reminder, - embed_color: colorToInt(color), - })); + onChange={(color: string) => { + setDebounced(color); }} >
@@ -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); }} >