SafeSqlInput.tsx15 lines · main

1	import { rawSql, type SafeSqlFragment } from '@supabase/pg-meta'
2	import type { ChangeEvent, ComponentProps } from 'react'
3	import { Input } from 'ui-patterns/DataInputs/Input'
4
5	type InputProps = ComponentProps<typeof Input>
6
7	export type SafeSqlInputProps = Omit<InputProps, 'placeholder' | 'value' | 'onChange'> & {
8	placeholder?: SafeSqlFragment
9	value: SafeSqlFragment
10	onChange?: (event: ChangeEvent<HTMLInputElement>, value: SafeSqlFragment) => void
11	}
12
13	export const SafeSqlInput = ({ onChange, ...props }: SafeSqlInputProps) => (
14	<Input {...props} onChange={(event) => onChange?.(event, rawSql(event.target.value))} />
15	)