componenteshospitais 2.0.0 → 2.0.2

package/dist/types/components/InputField.d.ts

@@ -5,7 +5,7 @@ interface InputFieldProps {
     id: string;
     placeholder: string;
     value: string;
-    onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
+    onChange?: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     largura?: string;
     readonly?: boolean;
     disabled?: boolean;
@@ -13,8 +13,8 @@ interface InputFieldProps {
     checked?: boolean;
     maxLength?: number;
     maskType?: 'cpf' | 'phone' | 'time' | 'date' | 'cep' | 'telefone';
-    onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
     corFundo?: string;
     corLabel?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "componenteshospitais",
-  "version": "2.0.0",
+  "version": "2.0.2",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",

package/src/components/InputField.tsx

@@ -9,7 +9,7 @@ interface InputFieldProps {
   id: string;
   placeholder: string;
   value: string;
-  onChange?: (e: ChangeEvent<HTMLInputElement>) => void; // Tornando onChange opcional
+  onChange?: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void; // Aceitando também TextAreaElement
   largura?: string;
   readonly?: boolean;
   disabled?: boolean;
@@ -17,8 +17,8 @@ interface InputFieldProps {
   checked?: boolean;
   maxLength?: number;
   maskType?: 'cpf' | 'phone' | 'time' | 'date' | 'cep' | 'telefone';
-  onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
-  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void; // Adicionando onBlur como opcional
+  onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void; // Adicionando onBlur como opcional
   corFundo?: string;
   corLabel?: string;
 }
@@ -50,7 +50,7 @@ const InputField: React.FC<InputFieldProps> = ({
 
   const appliedMaxLength = maxLength !== undefined ? maxLength : 524288;
 
-  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+  const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     if (type === 'number' && e.target.value.length > appliedMaxLength) {
       e.target.value = e.target.value.slice(0, appliedMaxLength);
     }
@@ -70,7 +70,7 @@ const InputField: React.FC<InputFieldProps> = ({
     <>
       {label && <label htmlFor={id} style={{color: corLabel ? corLabel: ''}}>{label}</label>}
       <div className={styles.inputWrapper}>
-        {maskType ? (
+        {maskType && type !== 'textarea' ? ( // Evitar o uso de máscara com textarea
           <InputMask
             mask={mask}
             value={value}
@@ -94,6 +94,21 @@ const InputField: React.FC<InputFieldProps> = ({
               />
             )}
           </InputMask>
+        ) : type === 'textarea' ? ( // Condição para renderizar textarea
+          <textarea
+            id={id}
+            name={id}
+            value={value}
+            placeholder={placeholder}
+            onChange={handleChange}
+            className={styles.inputPadrao}
+            style={{ width: largura ? `${largura}` : '', backgroundColor: (disabled ? '#e5e5e5' : (corFundo ? corFundo : '')), resize: 'none', height: '6rem'}}
+            readOnly={readonly}
+            disabled={disabled}
+            required={required}
+            onKeyPress={onKeyPress}
+            onBlur={onBlur} // Aplicando onBlur
+          />
         ) : (
           <input
             type={type === 'password' && isPasswordVisible ? 'text' : type}
@@ -123,4 +138,4 @@ const InputField: React.FC<InputFieldProps> = ({
   );
 };
 
-export default InputField;
+export default InputField;