Palette selector component

This commit is contained in:
CrispyBaguette 2021-12-15 18:46:05 +01:00
parent f7267bdf85
commit a5ab1c319f
3 changed files with 43 additions and 22 deletions

View File

@ -1,5 +1,6 @@
import React, { FormEventHandler } from "react"; import React, { FormEventHandler } from "react";
import Palette, { palettes } from "./Palette"; import Palette, { palettes } from "./Palette";
import PaletteSelect from "./PaletteSelect";
interface Props { interface Props {
onImageSubmit: (image: Blob, palette: Palette) => void; onImageSubmit: (image: Blob, palette: Palette) => void;
@ -7,7 +8,7 @@ interface Props {
function ImageInput({ onImageSubmit }: Props) { function ImageInput({ onImageSubmit }: Props) {
const fileInputRef = React.useRef<HTMLInputElement>(null); const fileInputRef = React.useRef<HTMLInputElement>(null);
const [paletteIndex, setPaletteIndex] = React.useState(0); const [palette, setPalette] = React.useState<Palette>(palettes[0]);
const handleSubmit: FormEventHandler = (e) => { const handleSubmit: FormEventHandler = (e) => {
e.preventDefault(); e.preventDefault();
@ -19,11 +20,11 @@ function ImageInput({ onImageSubmit }: Props) {
return; return;
} }
onImageSubmit(fileInputRef.current.files[0], palettes[paletteIndex]); onImageSubmit(fileInputRef.current.files[0], palette);
}; };
const handlePaletteChange = (event: React.ChangeEvent<HTMLSelectElement>) => { const handlePaletteChange = (palette: Palette) => {
setPaletteIndex(parseInt(event.target.value)); setPalette(palette);
}; };
return ( return (
@ -42,17 +43,7 @@ function ImageInput({ onImageSubmit }: Props) {
</label> </label>
<label> <label>
<span className="block">Select a color palette:</span> <span className="block">Select a color palette:</span>
<select <PaletteSelect value={palette} onChange={handlePaletteChange} />
value={paletteIndex}
onChange={handlePaletteChange}
className="form-select block w-full mt-1"
>
{palettes.map((palette, i) => (
<option key={i} value={i}>
{palette.label}
</option>
))}
</select>
</label> </label>
<button <button
type="submit" type="submit"

View File

@ -58,11 +58,7 @@ for (let i = 0; i < 256; i++) {
} }
const grayScale8bits = new Palette("Gray Scale 8 bits", grayColors); const grayScale8bits = new Palette("Gray Scale 8 bits", grayColors);
export const palettes = [ const palettes = [nord, monokai, grayScale1bit, grayScale2bits, grayScale8bits];
nord,
monokai, export { palettes };
grayScale1bit,
grayScale2bits,
grayScale8bits,
];
export default Palette; export default Palette;

View File

@ -0,0 +1,34 @@
import React from "react";
import Palette, { palettes } from "./Palette";
interface PaletteSelectProps {
value: Palette;
onChange: (palette: Palette) => void;
}
function PaletteSelect({ value, onChange }: PaletteSelectProps) {
const handlePaletteChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
onChange(palettes[parseInt(event.target.value)]);
};
// Index of the palette in the palettes array, used as the value of the select
const valueIndex = palettes.findIndex((p) => p === value);
const paletteOptions = palettes.map((palette, index) => (
<option key={index} value={index}>
{palette.label}
</option>
));
return (
<select
value={valueIndex}
onChange={handlePaletteChange}
className="form-select block w-full mt-1"
>
{paletteOptions}
</select>
);
}
export default PaletteSelect;