|
|
import React, {PropsWithChildren, useCallback, useLayoutEffect, useMemo} from 'react'; import iro from "@jaames/iro";
import "./Forms.sass";
interface FormLineProps { label: string id?: string }
function FormLine({label, id, children}: PropsWithChildren<FormLineProps>) { return ( <div className="FormLine"> <label htmlFor={id}>{label}:</label> {children} </div> ); }
interface InputProps { label: string value: string onChange?: (s: string) => void, onChangeNumeric?: (n: number) => void numeric?: boolean }
export function Input({label, numeric, onChange, onChangeNumeric, value}: InputProps) { const id = useMemo(() => `input-${randomId()}`, []);
const actualOnChange = useCallback((newValue: string) => { if (onChangeNumeric) { onChangeNumeric(parseInt(newValue)); } else if (onChange) { onChange(newValue); } }, [onChange, onChangeNumeric]);
return ( <FormLine label={label} id={id}> <input id={id} value={value} type={numeric ? "number" : "text"} onChange={i => actualOnChange(i.target.value)} /> </FormLine> ) }
interface ColorPickerProps { label?: string h: number s: number onChange: (h: number, s: number) => void }
const randomId = () => Math.floor(Math.random() * 100000);
export const HSColorPicker: React.FC<ColorPickerProps> = ({h, s, onChange, label}) => { const myId = useMemo(() => `color-picker-${randomId()}`, []);
useLayoutEffect(() => { // @ts-ignore
const colorPicker = new iro.ColorPicker(`#${myId}`, { color: {h, s: s * 100, v: 255}, layout: [ { component: iro.ui.Wheel, options: {} } ], });
colorPicker.on("input:end", (color: { hsv: { h: number, s: number } }) => { onChange(color.hsv.h || 0, (color.hsv.s || 0) / 100); });
return () => { const elem = document.getElementById(myId); if (elem === null) { return; }
elem.innerHTML = ""; }; }, [h, s, onChange, myId]);
return ( <FormLine label={label || "HS-farge"}> <div id={myId} style={{margin: "0 auto"}}/> </FormLine> ); };
interface KelvinColorPickerProps { label?: string kelvin: number onChange: (kelvin: number) => void }
export const KelvinColorPicker: React.FC<KelvinColorPickerProps> = ({label, kelvin, onChange}) => { const myId = useMemo(() => `color-picker-${randomId()}`, []);
useLayoutEffect(() => { // @ts-ignore
const colorPicker = new iro.ColorPicker(`#${myId}`, { color: {kelvin}, layout: [ { component: iro.ui.Slider, options: { sliderType: "kelvin", } } ], });
colorPicker.on("input:end", (color: iro.Color) => { onChange(Math.floor(color.kelvin)); });
return () => { const elem = document.getElementById(myId); if (elem === null) { return; }
elem.innerHTML = ""; }; }, [kelvin, onChange, myId]);
return ( <FormLine label={label || "KV-farge"}> <div title={`${kelvin}K`} id={myId} style={{margin: "0 auto"}}/> </FormLine> ); }
|