Files
formbricks/packages/ui/components/Input.tsx
T
Dhruwang Jariwala a165143c2a Add Input Validation to the Survey Editor (#588)
* added validation to survey edit

* made refactors

* extracted validation rules into a single object and resolved draggable issue

* ran pnpm format

* fixed a validation bug

* fixed similar  validation bug in other component

* implemented default and specific validation

* made some code refactors

* handled case where a question is deleted

* instead of storing questionIdx now we are storing question id in invalidQuestions array && ran pnpm format

* removed unused comment

* run pnpm format

* made requested changes

* removed unused export

* add types to validation.ts

* run pnpm format

---------

Co-authored-by: Matthias Nannt <mail@matthiasnannt.com>
2023-07-25 11:27:09 +02:00

29 lines
1012 B
TypeScript

import * as React from "react";
import { cn } from "@formbricks/lib/cn";
export interface InputProps
extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "crossOrigin" | "dangerouslySetInnerHTML"> {
crossOrigin?: "" | "anonymous" | "use-credentials" | undefined;
dangerouslySetInnerHTML?: {
__html: string;
};
isInvalid?: boolean;
}
const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, ...props }, ref) => {
return (
<input
className={cn(
"focus:border-brand flex h-10 w-full rounded-md border border-slate-300 bg-transparent px-3 py-2 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-500 dark:text-slate-300",
className,
props.isInvalid && "border border-red-600 focus:border-red-600"
)}
ref={ref}
{...props}
/>
);
});
Input.displayName = "Input";
export { Input };