typed-inputs-sketch.tsx

function Input<T>({
	value,
	onChange,
	children,
	serialize,
	deserialize
}: {
	value: T;
	deserialize: (value: T) => string | null;
	serialize: (rawValue: string | null) => T;
	onChange: (value: T) => void;
	children: (
		props: { value: T; rawValue: string; onChange: (e: React.SyntheticEvent) => void }
	) => React.ReactElement<{}>;
}) {
	return children({
		value,
		rawValue: deserialize(value),
		onChange: (e: React.SyntheticEvent) => {
			e.preventDefault();
			onChange(serialize((e.target as HTMLInputElement).value));
		}
	});
}

function TextInput({ value, onChange }: { value: string; onChange: (value: string) => void }) {
	return (
		<Input value={value} onChange={onChange} serialize={r => r} deserialize={v => v}>
			{p => <input value={p.rawValue} onChange={p.onChange} type="text" />}
		</Input>
	);
}

function BooleanInput({ value, onChange }: { value: boolean; onChange: (value: boolean) => void }) {
	return (
		<Input value={value} onChange={onChange} serialize={r => r === 'true'} deserialize={v => (v ? 'true' : 'false')}>
			{p => <input checked={p.value} onChange={p.onChange} value="true" type="checkbox" />}
		</Input>
	);
}

function NumberInput({ value, onChange }: { value: number; onChange: (value: number) => void }) {
	return (
		<Input value={value} onChange={onChange} serialize={r => Number.parseInt(r, 10)} deserialize={v => `${v}`}>
			{(p) => <input value={p.rawValue} onChange={p.onChange} type="number" />}
		</Input>
	);
}