From a5ab1c319f6c5ebde802d7d64dc55b898e4e5754 Mon Sep 17 00:00:00 2001 From: CrispyBaguette Date: Wed, 15 Dec 2021 18:46:05 +0100 Subject: [PATCH] Palette selector component --- client/src/ImageInput.tsx | 21 ++++++--------------- client/src/Palette.ts | 10 +++------- client/src/PaletteSelect.tsx | 34 ++++++++++++++++++++++++++++++++++ 3 files changed, 43 insertions(+), 22 deletions(-) create mode 100644 client/src/PaletteSelect.tsx diff --git a/client/src/ImageInput.tsx b/client/src/ImageInput.tsx index f0d2997..e8e113e 100644 --- a/client/src/ImageInput.tsx +++ b/client/src/ImageInput.tsx @@ -1,5 +1,6 @@ import React, { FormEventHandler } from "react"; import Palette, { palettes } from "./Palette"; +import PaletteSelect from "./PaletteSelect"; interface Props { onImageSubmit: (image: Blob, palette: Palette) => void; @@ -7,7 +8,7 @@ interface Props { function ImageInput({ onImageSubmit }: Props) { const fileInputRef = React.useRef(null); - const [paletteIndex, setPaletteIndex] = React.useState(0); + const [palette, setPalette] = React.useState(palettes[0]); const handleSubmit: FormEventHandler = (e) => { e.preventDefault(); @@ -19,11 +20,11 @@ function ImageInput({ onImageSubmit }: Props) { return; } - onImageSubmit(fileInputRef.current.files[0], palettes[paletteIndex]); + onImageSubmit(fileInputRef.current.files[0], palette); }; - const handlePaletteChange = (event: React.ChangeEvent) => { - setPaletteIndex(parseInt(event.target.value)); + const handlePaletteChange = (palette: Palette) => { + setPalette(palette); }; return ( @@ -42,17 +43,7 @@ function ImageInput({ onImageSubmit }: Props) {