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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-fwk-buildingblock",
-  "version": "1.3.21",
+  "version": "1.3.23-script-block",
   "description": "building blocks",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -46,9 +46,9 @@
     "acorn-walk": "8.2.0",
     "axios": "^1.6.7",
     "commander": "10.0.1",
-    "gbs-fwk-core": "latest",
+    "gbs-fwk-core": "^1.0.70-beta",
     "react-bootstrap": "2.8.0",
-    "react-pdf": "^7.7.1",
+    "react-pdf": "^10.0.1",
     "react-slick": "^0.30.2",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-typescript2": "0.35.0",

package/src/blocks/file-viewer/index.tsx

@@ -6,7 +6,7 @@ import DocumentViewer from "./docx-viewer/document-viewer";
 
 export const Viewer = () => {
 
-  const [state, setState] = useState({ documentId: "", showEditor: false, documentAPI: "", documentName: "", documentType: "", actualPath: "", downloadPdfFile :false,downloadImageFile:false});
+  const [state, setState] = useState({ documentId: "", showEditor: false, documentAPI: "", documentName: "", documentType: "", actualPath: "", downloadPdfFile: false, downloadImageFile: false });
 
   useEffect(() => {
     window.addEventListener('message', crossCommunication)
@@ -17,7 +17,7 @@ export const Viewer = () => {
       let data: any = tryJSONParse(message.data);
       if (data.message) {
         switch (data.message) {
-          case "_showDocumentEditor":
+          case "_viewDocumentEditor":
             if (data.entity) {
               setState({
                 documentId: data.entity?.documentId || "",

package/src/blocks/modal/index.tsx

@@ -8,6 +8,8 @@ interface ModalProps {
   title?: string;
   confirmBtn?: string;
   deletBtn?: string;
+  showConfirmBtn?: boolean;
+  showDeleteBtn?: boolean
 }
 
 export const Modal = ({
@@ -18,6 +20,8 @@ export const Modal = ({
   title,
   confirmBtn = 'Yes',
   deletBtn = 'No',
+  showConfirmBtn = true,
+  showDeleteBtn = true
 }: ModalProps) => {
   const handleClick = (button: any) => {
     onButtonClick(button);
@@ -55,21 +59,21 @@ export const Modal = ({
       <div className="bb-modal-container">
         <div className="bb-modal-content">
           <p className="bb-modal-title">{title}</p>
-            <div className="bb-modal-children">{children}</div>
-            <div className="bb-modal-buttons">
-              <Button
-                onClick={() => handleClick('Action_1')}
-                className={'bb-modal-buttons-action1'}
-              >
-                {confirmBtn}
-              </Button>
-              <Button
-                onClick={() => handleClick('Action_2')}
-                className={'bb-modal-buttons-action2'}
-              >
-                {deletBtn}
-              </Button>
-            </div>
+          <div className="bb-modal-children">{children}</div>
+          <div className="bb-modal-buttons">
+            {showConfirmBtn && <Button
+              onClick={() => handleClick('Action_1')}
+              className={'bb-modal-buttons-action1'}
+            >
+              {confirmBtn}
+            </Button>}
+            {showDeleteBtn && <Button
+              onClick={() => handleClick('Action_2')}
+              className={'bb-modal-buttons-action2'}
+            >
+              {deletBtn}
+            </Button>}
+          </div>
         </div>
       </div>
     )

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

@@ -1,4 +1,11 @@
-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 {
@@ -14,7 +21,7 @@ interface TextAreaprops {
   required?: boolean;
   className?: string;
   placeholder?: string;
-  maxLength?: any
+  maxLength?: any;
   disabled?: boolean;
   defaultValue?: any;
   enableTooltip?: boolean;
@@ -38,41 +45,76 @@ 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;
-  }
+    if (!tooltipValue || !enableTooltip) event.cancel = true;
+  };
+
+  const sanitizeInput = (value: string): string => {
+    return value
+      .replace(/[<>`;]/g, "") // strip common XSS/script vectors
+  };
 
   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?.(event, {});
+    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, {});
   };
 
   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}
@@ -90,7 +132,10 @@ 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}
@@ -103,7 +148,7 @@ export const TextArea: React.FC<TextAreaprops> = ({
             disabled={disabled}
             onKeyDown={onKeyDown}
             defaultValue={defaultValue}
-            onBlur={onBlur}
+            onBlur={onBlurEvent}
             maxLength={maxLength}
             ref={textAreaRef}
           />
@@ -111,4 +156,4 @@ export const TextArea: React.FC<TextAreaprops> = ({
       )}
     </>
   );
-};
+};

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

@@ -1,4 +1,10 @@
-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 {
@@ -24,7 +30,7 @@ interface TextInputProps {
   enableTooltip?: boolean;
   disablePasting?: boolean;
   autoComplete?: string;
-  inputRef?: any
+  inputRef?: any;
 }
 
 export const Textbox: React.FC<TextInputProps> = ({
@@ -50,11 +56,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) {
@@ -87,6 +93,11 @@ 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);
@@ -94,64 +105,73 @@ export const Textbox: React.FC<TextInputProps> = ({
     onBlur?.(event, {});
   };
 
-  const onChangeEvent = (event: any) => {
-    setTooltipValue(texboxTooltip.current?.value)
-
+  const onChangeEvent = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const rawValue = event.target.value;
+    const sanitizedValue: any = sanitizeInput(rawValue);
+    setTooltipValue(texboxTooltip.current?.value);
     setPatternError(false);
 
+    const clonedEvent = Object.assign(Object.create(Object.getPrototypeOf(event)), event, {
+      target: {
+        ...event.target,
+        value: sanitizedValue,
+        name: event.target.name
+      }
+    });
+
     if (pattern === "number") {
       if (
-        (event.target.value.length === 1 && event.target.value === "-") ||
-        !isNaN(event.target.value)
+        (sanitizedValue.length === 1 && sanitizedValue === "-") ||
+        !isNaN(sanitizedValue)
       ) {
-        onChange?.(event, {});
-        setOldValue(event.target.value);
+        onChange?.(clonedEvent as any, {});
+        setOldValue(sanitizedValue);
       } else {
         event.target.value = oldValue;
       }
-    } else if (pattern === "negativenumber" || pattern === "preventnegativenumber") {
-      if (!event.target.value.includes("-") && !isNaN(event.target.value)) {
-        onChange?.(event, {});
-        setOldValue(event.target.value);
+    } else if (
+      pattern === "negativenumber" ||
+      pattern === "preventnegativenumber"
+    ) {
+      if (!sanitizedValue.includes("-") && !isNaN(sanitizedValue)) {
+        onChange?.(clonedEvent as any, {});
+        setOldValue(sanitizedValue);
       } else {
         event.target.value = oldValue;
       }
-    }
-    else if (pattern === "lettersOnly") {
+    } else if (pattern === "lettersOnly") {
       const textRegex = /^[a-zA-Z]*$/;
-      if (textRegex.test(event.target.value) || event.target.value === "") {
-        setOldValue(event.target.value);
-        onChange?.(event, {});
+      if (textRegex.test(sanitizedValue) || sanitizedValue === "") {
+        setOldValue(sanitizedValue);
+        onChange?.(clonedEvent as any, {});
       } else {
         event.target.value = oldValue;
       }
     } else {
-      setOldValue(event.target.value);
-      onChange?.(event, {});
+      setOldValue(sanitizedValue);
+      onChange?.(clonedEvent as any, {});
     }
   };
 
   //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 && (
@@ -161,7 +181,10 @@ 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}
@@ -183,12 +206,15 @@ 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}
@@ -209,7 +235,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>

package/src/blocks/uploader/index.tsx

@@ -607,7 +607,7 @@ export const Uploader: React.FC<UploaderProps> = ({
     if (utilService.isValidGUID(file.documentId)) {
       var fileType: any = file.fileName?.split(".").pop();
       const message = JSON.stringify({
-        message: "_showDocumentEditor",
+        message: "_viewDocumentEditor",
         entity: {
           documentId: file.documentId,
           documentName: file.fileName,

package/types/blocks/modal/index.d.ts

@@ -7,6 +7,8 @@ interface ModalProps {
     title?: string;
     confirmBtn?: string;
     deletBtn?: string;
+    showConfirmBtn?: boolean;
+    showDeleteBtn?: boolean;
 }
-export declare const Modal: ({ isOpen, setIsOpen, onButtonClick, children, title, confirmBtn, deletBtn, }: ModalProps) => JSX.Element;
+export declare const Modal: ({ isOpen, setIsOpen, onButtonClick, children, title, confirmBtn, deletBtn, showConfirmBtn, showDeleteBtn }: ModalProps) => JSX.Element;
 export {};