81 lines
1.7 KiB
TypeScript
81 lines
1.7 KiB
TypeScript
import React from 'react';
|
|
import type {
|
|
BaseComponentProps,
|
|
IdentifiableProps,
|
|
DisableableProps,
|
|
} from '../types';
|
|
|
|
/**
|
|
* Props for Input component
|
|
* FE-TYPE-013: Fully typed component props
|
|
*/
|
|
export interface InputProps
|
|
extends BaseComponentProps,
|
|
IdentifiableProps,
|
|
DisableableProps {
|
|
value?: string;
|
|
defaultValue?: string;
|
|
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
|
|
onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
|
|
placeholder?: string;
|
|
type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search';
|
|
name?: string;
|
|
required?: boolean;
|
|
autoComplete?: string;
|
|
autoFocus?: boolean;
|
|
maxLength?: number;
|
|
minLength?: number;
|
|
pattern?: string;
|
|
readOnly?: boolean;
|
|
}
|
|
|
|
export const Input = ({
|
|
value,
|
|
defaultValue,
|
|
onChange,
|
|
onBlur,
|
|
onFocus,
|
|
placeholder,
|
|
type = 'text',
|
|
id,
|
|
name,
|
|
className,
|
|
disabled = false,
|
|
required = false,
|
|
autoComplete,
|
|
autoFocus = false,
|
|
maxLength,
|
|
minLength,
|
|
pattern,
|
|
readOnly = false,
|
|
style,
|
|
'data-testid': testId,
|
|
...props
|
|
}: InputProps) => {
|
|
return (
|
|
<input
|
|
id={id}
|
|
name={name}
|
|
type={type}
|
|
value={value}
|
|
defaultValue={defaultValue}
|
|
onChange={onChange}
|
|
onBlur={onBlur}
|
|
onFocus={onFocus}
|
|
placeholder={placeholder}
|
|
className={className}
|
|
disabled={disabled}
|
|
required={required}
|
|
autoComplete={autoComplete}
|
|
autoFocus={autoFocus}
|
|
maxLength={maxLength}
|
|
minLength={minLength}
|
|
pattern={pattern}
|
|
readOnly={readOnly}
|
|
style={style}
|
|
data-testid={testId}
|
|
{...props}
|
|
/>
|
|
);
|
|
};
|