react-core-ts 1.1.31 → 1.1.32

package/src/ReactTextArea.tsx

@@ -1,9 +1,9 @@
-import { TextAreaProps } from './commontypes'
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react';
 
-import { getInnerWidth } from './utilities/generateInnerWidth'
-import CustomIcons from './components/customIcons'
-import { applyPositionClass } from './utilities/getPosition'
+import { TextAreaProps } from './commontypes';
+import CustomIcons from './components/customIcons';
+import { getInnerWidth } from './utilities/generateInnerWidth';
+import { applyPositionClass } from './utilities/getPosition';
 
 const ModernTextArea: React.FC<TextAreaProps> = ({
   name,
@@ -26,13 +26,13 @@ const ModernTextArea: React.FC<TextAreaProps> = ({
   errors,
   onChange,
   value,
-  hideLabel = false
+  hideLabel = false,
 }) => {
   // const [editState, setEditState] = useState<boolean>(false)
-  const [isDisabled, setIsDisabled] = useState<boolean>(disabled)
-  const [isHovered, setIsHovered] = useState<boolean>(false)
-  const inputRef = useRef<HTMLInputElement>(null)
-  const adorementRef = useRef<HTMLDivElement>(null)
+  const [isDisabled, setIsDisabled] = useState<boolean>(disabled);
+  const [isHovered, setIsHovered] = useState<boolean>(false);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const adorementRef = useRef<HTMLDivElement>(null);
   // const onEditIconClick = () => {
   //   setEditState(true)
   //   setIsDisabled(false)
@@ -58,86 +58,94 @@ const ModernTextArea: React.FC<TextAreaProps> = ({
   // }, [editState, name])
   const onLabelClick = () => {
     if (!isDisabled) {
-      inputRef?.current?.focus()
+      inputRef?.current?.focus();
     }
-  }
+  };
 
   const checkIsEmptyField = (): boolean => {
-    if (value === undefined) return true
-    else return (value?.toString().length ?? 0) <= 0 ? true : false
-  }
+    if (value === undefined) return true;
+    else return (value?.toString().length ?? 0) <= 0 ? true : false;
+  };
   useEffect(() => {
-    setIsDisabled(disabled)
-  }, [disabled])
+    setIsDisabled(disabled);
+  }, [disabled]);
   const getErrors = (err: any) => {
-    let errMsg = ''
+    let errMsg = '';
     if (err.message) {
-      errMsg = err?.message
+      errMsg = err?.message;
     }
-    return errMsg
-  }
+    return errMsg;
+  };
   const generateClassName = (
     type: 'input' | 'label' | 'message' | 'adorement'
   ): string => {
     let className = `resize-none ${propsClassName}`;
     switch (type) {
       case 'input':
-        className += ` block text-common text-input-text font-normal px-3.5 py-2 w-full text-sm text-gray-900 bg-transparent  border  appearance-none   focus:outline-none focus:ring-0  peer  rounded-[4px] disabled:text-input-disabled disabled:bg-disabled ${hideLabel ? '' : 'placeholder-transparent'} focus:placeholder-grey-secondary`
+        className += ` block text-common text-input-text font-normal px-3.5 py-2 w-full text-sm text-gray-900 bg-transparent  border  appearance-none   focus:outline-none focus:ring-0  peer  rounded-[4px] disabled:text-input-disabled disabled:bg-disabled ${
+          hideLabel ? '' : 'placeholder-transparent'
+        } focus:placeholder-grey-secondary`;
         if (errors && errors[name]) {
           className +=
-            ' border-[#FDA29B] focus:border-error-[#FDA29B] focus:ring-[#FDA29B] focus:ring-3 '
+            ' border-[#FDA29B] focus:border-error-[#FDA29B] focus:ring-[#FDA29B] focus:ring-3 ';
         } else {
           className +=
-            ' text-grey-dark border-input-light focus:border-blue-navy   focus:outline-none  focus:ring-0'
+            ' text-grey-dark border-input-light focus:border-blue-navy   focus:outline-none  focus:ring-0';
         }
-        break
+        break;
       case 'label':
         className += `  modern-input-label   peer-focus:modern-input-peer-focus-label-size 
           px-0 
             absolute text-sm  duration-300 transform -translate-y-4  top-2 z-1 origin-[0]    peer-placeholder-shown:-translate-y-1 peer-placeholder-shown:top-[16px] peer-focus:top-2  peer-focus:-translate-y-4 start-[14px] rtl:peer-focus:translate-x-1/4 rtl:peer-focus:left-auto ${
-              isDisabled ? 'cursor-pointer' : 'cursor-text peer-focus:cursor-pointer'
+              isDisabled
+                ? 'cursor-pointer'
+                : 'cursor-text peer-focus:cursor-pointer'
             } ${!isDisabled || !checkIsEmptyField() ? 'bg-white' : ''} ${
-              checkIsEmptyField()
-                ? 'modern-input-label-size'
-                : 'modern-input-peer-focus-label-size'
-            } `
+          checkIsEmptyField()
+            ? 'modern-input-label-size'
+            : 'modern-input-peer-focus-label-size'
+        } `;
         if (errors && errors[name]) {
-          className += ' text-error-light '
+          className += ' text-error-light ';
         } else {
-          className += ' text-grey-dark peer-focus:text-blue-navy'
+          className += ' text-grey-dark peer-focus:text-blue-navy';
         }
-        break
+        break;
       case 'message':
-        className = ' text-error-icon '
-        break
+        className = ' text-error-icon ';
+        break;
       case 'adorement':
-        className += '  absolute right-0 py-4 adorement gap-1 flex items-center '
-        break
+        className +=
+          '  absolute right-0 py-4 adorement gap-1 flex items-center ';
+        break;
       default:
-        break
+        break;
     }
-    return className
-  }
+    return className;
+  };
   useEffect(() => {
     if (autoFocus) {
-      onLabelClick()
+      onLabelClick();
     }
-  }, [autoFocus])
+  }, [autoFocus]);
   // const getPosition = () => {
   //   return 'top'
   // }
   const handleError = (data: any) => {
-    if (getErrors(data[name]) === 'required' || getErrors(data[name]) === 'Required') {
-      return `${label} is ${getErrors(data[name])}`
+    if (
+      getErrors(data[name]) === 'required' ||
+      getErrors(data[name]) === 'Required'
+    ) {
+      return `${label} is ${getErrors(data[name])}`;
     } else {
-      return getErrors(data[name]) ?? ''
+      return getErrors(data[name]) ?? '';
     }
-  }
-  const textFieldRef = useRef<HTMLDivElement>(null) // Ref for the text field div
+  };
+  const textFieldRef = useRef<HTMLDivElement>(null); // Ref for the text field div
 
   useEffect(() => {
-    applyPositionClass(textFieldRef)
-  }, [isHovered])
+    if (isHovered) applyPositionClass(textFieldRef);
+  }, [isHovered]);
   return (
     <div ref={textFieldRef} className={` ${fullwidth ? 'w-full' : 'w-auto'}`}>
       <div className="tooltip-container">
@@ -160,7 +168,7 @@ const ModernTextArea: React.FC<TextAreaProps> = ({
               style={{
                 paddingRight: getInnerWidth(adorementRef, 11),
                 height: boxHeight ?? undefined,
-                minHeight: boxMinHeight ?? undefined
+                minHeight: boxMinHeight ?? undefined,
               }}
               autoComplete={autoComplete ? 'on' : 'off'}
               // autoFocus={autoFocus}
@@ -193,7 +201,7 @@ const ModernTextArea: React.FC<TextAreaProps> = ({
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
 
-export default ModernTextArea
+export default ModernTextArea;

package/src/ReactTextField.tsx

@@ -33,7 +33,7 @@ const TextField: React.FC<TextFieldProps> = ({
   onStepUp, //new requirement number steper
   onStepDown, //new requirement number steper
   onChange,
-  infoTitle = 'added for set background colour according to the form',
+  infoTitle = 'new requirement number steper',
   onBlur,
   showInfo = true,
   errors,
@@ -271,8 +271,8 @@ const TextField: React.FC<TextFieldProps> = ({
   const textFieldRef = useRef<HTMLDivElement>(null); // Ref for the text field div
 
   useEffect(() => {
-    applyPositionClass(textFieldRef);
-  }, []);
+    if (isHovered) applyPositionClass(textFieldRef);
+  }, [isHovered]);
   return (
     <div ref={textFieldRef} className={` ${fullwidth ? 'w-full' : 'w-auto'}`}>
       <div className="tooltip-container ">