gbs-fwk-buildingblock 1.3.20-script-block → 1.3.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-fwk-buildingblock",
-  "version": "1.3.20-script-block",
+  "version": "1.3.21",
   "description": "building blocks",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/src/blocks/text-area/index.tsx

@@ -1,11 +1,4 @@
-import React, {
-  ChangeEvent,
-  FocusEvent,
-  KeyboardEvent,
-  useState,
-  useRef,
-  useEffect,
-} from "react";
+import React, { ChangeEvent, FocusEvent, KeyboardEvent, useState, useRef, useEffect } from "react";
 import { TooltipComponent } from "@syncfusion/ej2-react-popups";
 
 interface TextAreaprops {
@@ -21,7 +14,7 @@ interface TextAreaprops {
   required?: boolean;
   className?: string;
   placeholder?: string;
-  maxLength?: any;
+  maxLength?: any
   disabled?: boolean;
   defaultValue?: any;
   enableTooltip?: boolean;
@@ -45,76 +38,41 @@ export const TextArea: React.FC<TextAreaprops> = ({
   onBlur,
   defaultValue,
   enableTooltip,
-  maxWords,
+  maxWords
 }) => {
-  const [toolTipValue, setToolTipValue] = useState("");
+  const [toolTipValue, setToolTipValue] = useState("")
 
   const textAreaRef: any = useRef(null);
 
   useEffect(() => {
-    setToolTipValue(textAreaRef.current?.value);
-  }, [defaultValue, value]);
+    setToolTipValue(textAreaRef.current?.value)
+  }, [defaultValue, value])
 
   const tooltipBeforeOpen = (event: any, tooltipValue: any) => {
-    if (!tooltipValue || !enableTooltip) event.cancel = true;
-  };
-
-  const sanitizeInput = (value: string): string => {
-    return value
-      .replace(/[<>`;]/g, "") // strip common XSS/script vectors
-  };
+    if (!tooltipValue || !enableTooltip)
+      event.cancel = true;
+  }
 
   const onHandleChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
     const inputValue = event.target.value;
-    const sanitizedValue = sanitizeInput(inputValue);
-
-    const clonedEvent = Object.assign(Object.create(Object.getPrototypeOf(event)), event, {
-      target: {
-        ...event.target,
-        value: sanitizedValue,
-        name: event.target.name,
-      }
-    });
-
     const words = inputValue.trim().split(/\s+/);
     if (maxWords && words.length > maxWords) {
       return;
     }
     setToolTipValue(inputValue);
-    onChange?.(clonedEvent as any, {});
-  };
-
-  const onBlurEvent = (event: FocusEvent<HTMLTextAreaElement>) => {
-    const inputValue = event.target.value;
-    const sanitizedValue = sanitizeInput(inputValue);
-    const clonedEvent = {
-      ...event,
-      target: {
-        ...event.target,
-        value: sanitizedValue,
-      },
-    };
-    setToolTipValue(event.target.value);
-    onBlur?.(clonedEvent as any, {});
+    onChange?.(event, {});
   };
 
   const onKeyDown = (e: any) => {
-    e.stopPropagation();
-    onKeypress?.(e);
-  };
+    e.stopPropagation()
+    onKeypress?.(e)
+  }
 
   return (
     <>
-      {label && (
-        <label htmlFor={id} className="form-label">
-          {label} {required ? <i className="req-lbl">*</i> : <></>}
-        </label>
-      )}
+      {label && <label htmlFor={id} className="form-label">{label} {required ? <i className="req-lbl">*</i> : <></>}</label>}
       {value != undefined ? (
-        <TooltipComponent
-          beforeOpen={(event: any) => tooltipBeforeOpen(event, toolTipValue)}
-          content={enableTooltip ? toolTipValue : ""}
-        >
+        <TooltipComponent beforeOpen={(event: any) => tooltipBeforeOpen(event, toolTipValue)} content={enableTooltip ? toolTipValue : ""}>
           <textarea
             id={id}
             name={name}
@@ -132,10 +90,7 @@ export const TextArea: React.FC<TextAreaprops> = ({
           />
         </TooltipComponent>
       ) : (
-        <TooltipComponent
-          beforeOpen={(event: any) => tooltipBeforeOpen(event, toolTipValue)}
-          content={enableTooltip ? toolTipValue : ""}
-        >
+        <TooltipComponent beforeOpen={(event: any) => tooltipBeforeOpen(event, toolTipValue)} content={enableTooltip ? toolTipValue : ""}>
           <textarea
             id={id}
             name={name}
@@ -148,7 +103,7 @@ export const TextArea: React.FC<TextAreaprops> = ({
             disabled={disabled}
             onKeyDown={onKeyDown}
             defaultValue={defaultValue}
-            onBlur={onBlurEvent}
+            onBlur={onBlur}
             maxLength={maxLength}
             ref={textAreaRef}
           />

package/src/blocks/text-box/index.tsx

@@ -1,10 +1,4 @@
-import React, {
-  ChangeEvent,
-  FocusEvent,
-  useState,
-  useRef,
-  useEffect,
-} from "react";
+import React, { ChangeEvent, FocusEvent, useState, useRef, useEffect } from "react";
 import { TooltipComponent } from "@syncfusion/ej2-react-popups";
 
 interface TextInputProps {
@@ -30,7 +24,7 @@ interface TextInputProps {
   enableTooltip?: boolean;
   disablePasting?: boolean;
   autoComplete?: string;
-  inputRef?: any;
+  inputRef?: any
 }
 
 export const Textbox: React.FC<TextInputProps> = ({
@@ -56,11 +50,11 @@ export const Textbox: React.FC<TextInputProps> = ({
   enableTooltip,
   disablePasting = false,
   autoComplete = "",
-  inputRef,
+  inputRef
 }) => {
   const [patternError, setPatternError] = useState(false);
   const [oldValue, setOldValue] = useState(value ? value : defaultValue);
-  const [tooltipValue, setTooltipValue] = useState();
+  const [tooltipValue, setTooltipValue] = useState()
 
   const isValidPattern = (value: string): boolean => {
     switch (pattern) {
@@ -93,11 +87,6 @@ export const Textbox: React.FC<TextInputProps> = ({
     return "Invalid Input";
   };
 
-  const sanitizeInput = (value: string): string => {
-    return value
-      .replace(/[<>`;]/g, "")
-  };
-
   const onBlurEvent = (event: any) => {
     if (pattern && event.target.value && !isValidPattern(event.target.value)) {
       setPatternError(true);
@@ -105,73 +94,64 @@ export const Textbox: React.FC<TextInputProps> = ({
     onBlur?.(event, {});
   };
 
-  const onChangeEvent = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const rawValue = event.target.value;
-    const sanitizedValue: any = sanitizeInput(rawValue);
-    setTooltipValue(texboxTooltip.current?.value);
-    setPatternError(false);
+  const onChangeEvent = (event: any) => {
+    setTooltipValue(texboxTooltip.current?.value)
 
-    const clonedEvent = Object.assign(Object.create(Object.getPrototypeOf(event)), event, {
-      target: {
-        ...event.target,
-        value: sanitizedValue,
-        name: event.target.name
-      }
-    });
+    setPatternError(false);
 
     if (pattern === "number") {
       if (
-        (sanitizedValue.length === 1 && sanitizedValue === "-") ||
-        !isNaN(sanitizedValue)
+        (event.target.value.length === 1 && event.target.value === "-") ||
+        !isNaN(event.target.value)
       ) {
-        onChange?.(clonedEvent as any, {});
-        setOldValue(sanitizedValue);
+        onChange?.(event, {});
+        setOldValue(event.target.value);
       } else {
         event.target.value = oldValue;
       }
-    } else if (
-      pattern === "negativenumber" ||
-      pattern === "preventnegativenumber"
-    ) {
-      if (!sanitizedValue.includes("-") && !isNaN(sanitizedValue)) {
-        onChange?.(clonedEvent as any, {});
-        setOldValue(sanitizedValue);
+    } else if (pattern === "negativenumber" || pattern === "preventnegativenumber") {
+      if (!event.target.value.includes("-") && !isNaN(event.target.value)) {
+        onChange?.(event, {});
+        setOldValue(event.target.value);
       } else {
         event.target.value = oldValue;
       }
-    } else if (pattern === "lettersOnly") {
+    }
+    else if (pattern === "lettersOnly") {
       const textRegex = /^[a-zA-Z]*$/;
-      if (textRegex.test(sanitizedValue) || sanitizedValue === "") {
-        setOldValue(sanitizedValue);
-        onChange?.(clonedEvent as any, {});
+      if (textRegex.test(event.target.value) || event.target.value === "") {
+        setOldValue(event.target.value);
+        onChange?.(event, {});
       } else {
         event.target.value = oldValue;
       }
     } else {
-      setOldValue(sanitizedValue);
-      onChange?.(clonedEvent as any, {});
+      setOldValue(event.target.value);
+      onChange?.(event, {});
     }
   };
 
   //tooltip settings
   const texboxTooltip: any = useRef(null);
   useEffect(() => {
-    setTooltipValue(texboxTooltip.current?.value);
-  }, [defaultValue, value]);
+    setTooltipValue(texboxTooltip.current?.value)
+  }, [defaultValue, value])
 
   useEffect(() => {
     if (inputRef) {
-      inputRef(texboxTooltip);
+      inputRef(texboxTooltip)
     }
-  }, [texboxTooltip, inputRef]);
+  }, [texboxTooltip, inputRef])
 
   const tooltipBeforeOpen = (event: any, tooltipValue: any) => {
-    if (!tooltipValue || !enableTooltip) event.cancel = true;
-  };
+    if (!tooltipValue || !enableTooltip)
+      event.cancel = true;
+  }
   const handleonKeyDown = (e: any) => {
-    onKeyDown?.(e);
-    e.stopPropagation();
-  };
+    onKeyDown?.(e)
+    e.stopPropagation()
+
+  }
   return (
     <>
       {label && (
@@ -181,10 +161,7 @@ export const Textbox: React.FC<TextInputProps> = ({
       )}
       <>
         {value != undefined ? (
-          <TooltipComponent
-            beforeOpen={(event: any) => tooltipBeforeOpen(event, tooltipValue)}
-            content={enableTooltip ? tooltipValue : ""}
-          >
+          <TooltipComponent beforeOpen={(event: any) => tooltipBeforeOpen(event, tooltipValue)} content={enableTooltip ? tooltipValue : ""} >
             <input
               id={id}
               type={type}
@@ -206,15 +183,12 @@ export const Textbox: React.FC<TextInputProps> = ({
               defaultValue={defaultValue}
               checked={checked}
               ref={texboxTooltip}
-              onPaste={disablePasting ? (e) => e.preventDefault() : undefined}
+              onPaste={disablePasting ? e => e.preventDefault() : undefined}
               autoComplete={autoComplete}
             />
           </TooltipComponent>
         ) : (
-          <TooltipComponent
-            beforeOpen={(event: any) => tooltipBeforeOpen(event, tooltipValue)}
-            content={enableTooltip ? tooltipValue : ""}
-          >
+          <TooltipComponent beforeOpen={(event: any) => tooltipBeforeOpen(event, tooltipValue)} content={enableTooltip ? tooltipValue : ""}>
             <input
               id={id}
               type={type}
@@ -235,7 +209,7 @@ export const Textbox: React.FC<TextInputProps> = ({
               defaultValue={defaultValue}
               checked={checked}
               ref={texboxTooltip}
-              onPaste={disablePasting ? (e) => e.preventDefault() : undefined}
+              onPaste={disablePasting ? e => e.preventDefault() : undefined}
               autoComplete={autoComplete}
             />
           </TooltipComponent>