Fix color picker not working
This commit is contained in:
parent
328127c55e
commit
1c6103142f
12
reminder-dashboard/package-lock.json
generated
12
reminder-dashboard/package-lock.json
generated
@ -13,6 +13,7 @@
|
|||||||
"react-colorful": "^5.6.1",
|
"react-colorful": "^5.6.1",
|
||||||
"react-query": "^3.39.3",
|
"react-query": "^3.39.3",
|
||||||
"tributejs": "^5.1.3",
|
"tributejs": "^5.1.3",
|
||||||
|
"use-debounce": "^10.0.0",
|
||||||
"wouter": "^3.0"
|
"wouter": "^3.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
@ -5206,6 +5207,17 @@
|
|||||||
"punycode": "^2.1.0"
|
"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": {
|
"node_modules/use-sync-external-store": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
|
||||||
|
@ -16,6 +16,7 @@
|
|||||||
"react-colorful": "^5.6.1",
|
"react-colorful": "^5.6.1",
|
||||||
"react-query": "^3.39.3",
|
"react-query": "^3.39.3",
|
||||||
"tributejs": "^5.1.3",
|
"tributejs": "^5.1.3",
|
||||||
|
"use-debounce": "^10.0.0",
|
||||||
"wouter": "^3.0"
|
"wouter": "^3.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
@ -1,7 +1,8 @@
|
|||||||
import { useState } from "preact/hooks";
|
import { useEffect, useState } from "preact/hooks";
|
||||||
import { HexColorPicker } from "react-colorful";
|
import { HexColorPicker } from "react-colorful";
|
||||||
import { Modal } from "../../Modal";
|
import { Modal } from "../../Modal";
|
||||||
import { Reminder } from "../../../api";
|
import { Reminder } from "../../../api";
|
||||||
|
import { useDebouncedCallback } from "use-debounce";
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
color: string;
|
color: string;
|
||||||
@ -38,16 +39,20 @@ export const Color = ({ color, setReminder }: Props) => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const ColorModal = ({ setModalOpen, color, setReminder }) => {
|
const ColorModal = ({ setModalOpen, color, setReminder }) => {
|
||||||
|
const setDebounced = useDebouncedCallback((color) => {
|
||||||
|
setReminder((reminder: Reminder) => ({
|
||||||
|
...reminder,
|
||||||
|
embed_color: colorToInt(color),
|
||||||
|
}));
|
||||||
|
}, 100);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Modal setModalOpen={setModalOpen} title={"Select Color"}>
|
<Modal setModalOpen={setModalOpen} title={"Select Color"}>
|
||||||
<div class="colorpicker-container">
|
<div class="colorpicker-container">
|
||||||
<HexColorPicker
|
<HexColorPicker
|
||||||
color={color}
|
color={color}
|
||||||
onInput={(color) => {
|
onChange={(color: string) => {
|
||||||
setReminder((reminder) => ({
|
setDebounced(color);
|
||||||
...reminder,
|
|
||||||
embed_color: colorToInt(color),
|
|
||||||
}));
|
|
||||||
}}
|
}}
|
||||||
></HexColorPicker>
|
></HexColorPicker>
|
||||||
</div>
|
</div>
|
||||||
@ -57,10 +62,7 @@ const ColorModal = ({ setModalOpen, color, setReminder }) => {
|
|||||||
id="colorInput"
|
id="colorInput"
|
||||||
value={color}
|
value={color}
|
||||||
onInput={(ev) => {
|
onInput={(ev) => {
|
||||||
setReminder((reminder) => ({
|
setDebounced(ev.currentTarget.value);
|
||||||
...reminder,
|
|
||||||
embed_color: colorToInt(ev.currentTarget.value),
|
|
||||||
}));
|
|
||||||
}}
|
}}
|
||||||
></input>
|
></input>
|
||||||
</Modal>
|
</Modal>
|
||||||
|
Loading…
Reference in New Issue
Block a user