componenteshospitais 2.0.4 → 2.0.6

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

@@ -5,7 +5,7 @@ interface InputFieldProps {
     id: string;
     placeholder: string;
     value: string;
-    onChange?: (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onChange?: (e: ChangeEvent<HTMLInputElement>) => 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 | HTMLTextAreaElement>) => void;
-    onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
     corFundo?: string;
     corLabel?: string;
 }

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

@@ -0,0 +1,19 @@
+import React, { ChangeEvent } from 'react';
+interface TextAreaFieldProps {
+    label?: string;
+    id: string;
+    placeholder: string;
+    value: string;
+    onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+    largura?: string;
+    readonly?: boolean;
+    disabled?: boolean;
+    required?: boolean;
+    maxLength?: number;
+    onKeyPress?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    corFundo?: string;
+    corLabel?: string;
+}
+declare const TextAreaField: React.FC<TextAreaFieldProps>;
+export default TextAreaField;

package/dist/types/index.d.ts

@@ -10,3 +10,4 @@ export { default as SelectField } from "./components/SelectField";
 export { default as Busca } from "./components/Busca";
 export { default as CheckboxGroup } from "./components/CheckboxGroup";
 export { default as TableStandard } from "./components/TableStandard";
+export { default as TextArea } from "./components/TextArea";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "componenteshospitais",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "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 | HTMLTextAreaElement>) => void;
+  onChange?: (e: ChangeEvent<HTMLInputElement>) => void; // Tornando onChange opcional
   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 | HTMLTextAreaElement>) => void;
-  onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void; 
+  onKeyPress?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void; // Adicionando onBlur como opcional
   corFundo?: string;
   corLabel?: string;
 }
@@ -50,11 +50,11 @@ const InputField: React.FC<InputFieldProps> = ({
 
   const appliedMaxLength = maxLength !== undefined ? maxLength : 524288;
 
-  const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     if (type === 'number' && e.target.value.length > appliedMaxLength) {
       e.target.value = e.target.value.slice(0, appliedMaxLength);
     }
-    if (onChange) {
+    if (onChange) { // Verificando se onChange foi passado antes de chamá-lo
       onChange(e);
     }
   };
@@ -70,7 +70,7 @@ const InputField: React.FC<InputFieldProps> = ({
     <>
       {label && <label htmlFor={id} style={{color: corLabel ? corLabel: ''}}>{label}</label>}
       <div className={styles.inputWrapper}>
-        {maskType && type !== 'textarea' ? ( // Evitar o uso de máscara com textarea
+        {maskType ? (
           <InputMask
             mask={mask}
             value={value}
@@ -94,21 +94,6 @@ 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}

package/src/components/TextArea.tsx

@@ -0,0 +1,68 @@
+import React, { ChangeEvent } from 'react';
+import styles from '../styles/input.module.css';
+
+interface TextAreaFieldProps {
+  label?: string;
+  id: string;
+  placeholder: string;
+  value: string;
+  onChange?: (e: ChangeEvent<HTMLTextAreaElement>) => void;
+  largura?: string;
+  readonly?: boolean;
+  disabled?: boolean;
+  required?: boolean;
+  maxLength?: number;
+  onKeyPress?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
+  onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+  corFundo?: string;
+  corLabel?: string;
+}
+
+const TextAreaField: React.FC<TextAreaFieldProps> = ({
+  id,
+  placeholder,
+  onChange,
+  value,
+  label,
+  largura,
+  readonly,
+  disabled,
+  required,
+  maxLength,
+  onKeyPress,
+  onBlur,
+  corFundo,
+  corLabel
+}) => {
+  const appliedMaxLength = maxLength !== undefined ? maxLength : 524288;
+
+  return (
+    <>
+      {label && <label htmlFor={id} style={{color: corLabel ? corLabel : ''}}>{label}</label>}
+      <div className={styles.inputWrapper}>
+        <textarea
+          id={id}
+          name={id}
+          value={value}
+          placeholder={placeholder}
+          onChange={onChange}
+          className={styles.inputPadrao}
+          style={{ 
+            width: largura ? `${largura}` : '', 
+            backgroundColor: disabled ? '#e5e5e5' : (corFundo ? corFundo : ''),
+            resize: 'none',
+            height: '6rem' 
+          }}
+          readOnly={readonly}
+          disabled={disabled}
+          required={required}
+          maxLength={appliedMaxLength}
+          onKeyPress={onKeyPress}
+          onBlur={onBlur}
+        />
+      </div>
+    </>
+  );
+};
+
+export default TextAreaField;

package/src/index.tsx

@@ -11,4 +11,5 @@ export { default as MenuPage } from "./components/MenuPage";
 export { default as SelectField } from "./components/SelectField";
 export { default as Busca } from "./components/Busca";
 export { default as CheckboxGroup } from "./components/CheckboxGroup";
-export { default as TableStandard } from "./components/TableStandard";
+export { default as TableStandard } from "./components/TableStandard";
+export { default as TextArea } from "./components/TextArea";