76 lines
2 KiB
TypeScript
76 lines
2 KiB
TypeScript
import {ChangeEventHandler} from 'react';
|
|
import './Input.css';
|
|
|
|
export function TextInput({onChange, className, value, placeholder, onEnter}: {
|
|
onChange?: ChangeEventHandler<HTMLInputElement> | undefined;
|
|
className?: string;
|
|
value: string;
|
|
placeholder?: string;
|
|
onEnter?: () => void;
|
|
}) {
|
|
return <input
|
|
type="text"
|
|
className={'Input ' + (className ?? '')}
|
|
value={value}
|
|
placeholder={placeholder}
|
|
onChange={onChange}
|
|
onKeyUp={event => {
|
|
if (onEnter && event.key === 'Enter')
|
|
onEnter();
|
|
}}
|
|
/>;
|
|
}
|
|
|
|
export function NumberInput({onChange, className, value, placeholder, onEnter}: {
|
|
onChange?: (value: number) => void;
|
|
className?: string;
|
|
value: number;
|
|
placeholder?: string;
|
|
onEnter?: () => void;
|
|
}) {
|
|
return <input
|
|
type="number"
|
|
className={'Input ' + (className ?? '')}
|
|
value={value}
|
|
placeholder={placeholder}
|
|
onChange={event => {
|
|
if (!onChange)
|
|
return;
|
|
onChange(parseFloat(event.target.value));
|
|
}}
|
|
onKeyUp={event => {
|
|
if (!onEnter || event.key !== 'Enter')
|
|
return;
|
|
onEnter();
|
|
}}
|
|
/>;
|
|
}
|
|
|
|
export function RangeInput({onChange, className, value, placeholder, onEnter, min, max}: {
|
|
onChange?: (value: number) => void;
|
|
className?: string;
|
|
value: number;
|
|
min: number;
|
|
max: number;
|
|
placeholder?: string;
|
|
onEnter?: () => void;
|
|
}) {
|
|
return <input
|
|
type="range"
|
|
className={'Input RangeInput ' + (className ?? '')}
|
|
value={value} min={min} max={max}
|
|
placeholder={placeholder}
|
|
onChange={event => {
|
|
if (!onChange)
|
|
return;
|
|
onChange(parseFloat(event.target.value));
|
|
}}
|
|
onKeyUp={event => {
|
|
if (!onEnter || event.key !== 'Enter')
|
|
return;
|
|
onEnter();
|
|
}}
|
|
/>;
|
|
}
|
|
|
|
|