db5ec89dc5
### What problem does this PR solve? Feat: The key for the begin operator can only contain alphanumeric characters and underscores. #10427 ### Type of change - [x] New Feature (non-breaking change which adds functionality)
26 lines
803 B
TypeScript
26 lines
803 B
TypeScript
import { Input, InputProps } from '@/components/ui/input';
|
|
import { ChangeEvent, forwardRef, useCallback } from 'react';
|
|
|
|
type KeyInputProps = {
|
|
value?: string;
|
|
onChange?: (value: string) => void;
|
|
searchValue?: string | RegExp;
|
|
} & Omit<InputProps, 'onChange'>;
|
|
|
|
export const KeyInput = forwardRef<HTMLInputElement, KeyInputProps>(
|
|
function KeyInput(
|
|
{ value, onChange, searchValue = /[^a-zA-Z0-9_]/g, ...props },
|
|
ref,
|
|
) {
|
|
const handleChange = useCallback(
|
|
(e: ChangeEvent<HTMLInputElement>) => {
|
|
const value = e.target.value ?? '';
|
|
const filteredValue = value.replace(searchValue, '');
|
|
onChange?.(filteredValue);
|
|
},
|
|
[onChange, searchValue],
|
|
);
|
|
|
|
return <Input {...props} value={value} onChange={handleChange} ref={ref} />;
|
|
},
|
|
);
|