regex-input

1"use client";
2 
3import type * as React from "react";
4import { Input } from "@/components/ui/input";
5import {
6  useSimpleRegex,
7  type ValidationStatusType,
8} from "@/hooks/use-simple-regex";
9 
10export interface RegexInputProps extends React.ComponentProps<"input"> {
11  regex: RegExp;
12  onValidation?: (status: ValidationStatusType) => void;
13  transformToUppercase?: boolean;
14}
15 
16export function RegexInput({
17  regex,
18  value,
19  onChange,
20  onValidation,
21  defaultValue,
22  transformToUppercase,
23  ...props
24}: RegexInputProps) {
25  const { value: displayValue, onChange: handleChange } = useSimpleRegex({
26    regex,
27    value: value as string | undefined,
28    onChange: onChange
29      ? (newValue: string) => {
30          const syntheticEvent = {
31            target: { value: newValue },
32            currentTarget: { value: newValue },
33          } as React.ChangeEvent<HTMLInputElement>;
34          onChange(syntheticEvent);
35        }
36      : undefined,
37    onValidation,
38    defaultValue: defaultValue as string | undefined,
39    transformToUppercase,
40  });
41 
42  return <Input {...props} value={displayValue} onChange={handleChange} />;
43}