gbs-add-block 0.0.12 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.12",
+  "version": "0.0.14",
   "description": "React Component Library",
   "files": [
     "index.js",

package/source/components/input/index.tsx

@@ -74,6 +74,7 @@ export const Input = ({
           {/* If Type is password, this will show a password visible toggle button */}
           {props.type && props.type === "password" && (
             <button
+              type="button"
               className="absolute inset-y-0 right-0 flex items-center pr-2"
               onClick={toggleTypeForPassword}
             >
@@ -98,7 +99,9 @@ export const Input = ({
                 value={otpValues[index]}
                 onChange={(e) => updateOtpValue(index, e)}
                 onKeyDown={(e) => handleKeydown(index, e)}
-                // ref={(ref) => (inputRefs.current[index] = ref)}
+                ref={(ref) => {
+                  inputRefs.current[index] = ref;
+                }}
                 className={OTPClass}
               />
             ))}

package/source/components/multiselect/index.tsx

@@ -8,6 +8,7 @@
 import React, {
   forwardRef,
   memo,
+  useCallback,
   useEffect,
   useImperativeHandle,
   useRef,
@@ -50,10 +51,6 @@ const MultiSelect = forwardRef<any, MultiSelectProps>((props, ref) => {
     handleDataSource();
   }, [items]);
 
-  useEffect(() => {
-    if (onSelect) onSelect(selected);
-  }, [selected, onSelect]);
-
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
@@ -87,13 +84,16 @@ const MultiSelect = forwardRef<any, MultiSelectProps>((props, ref) => {
     setShowPopover(!showPopover);
   };
 
-  const handleSelect = (value: string) => {
-    setSelected((prev) =>
-      prev.includes(value)
-        ? prev.filter((item) => item !== value)
-        : [...prev, value]
-    );
-  };
+  const handleSelect = useCallback(
+    (value: string) => {
+      const newSelected = selected.includes(value)
+        ? selected.filter((item) => item !== value)
+        : [...selected, value];
+      setSelected(newSelected);
+      onSelect?.(newSelected);
+    },
+    [selected, onSelect]
+  );
 
   const getSelectedDisplay = () => {
     if (selected.length === 0) return placeholder;
@@ -127,6 +127,7 @@ const MultiSelect = forwardRef<any, MultiSelectProps>((props, ref) => {
   const clearSelected = () => {
     setSelected([]);
     setShowPopover(false);
+    if (onSelect) onSelect([]);
   };
 
   useImperativeHandle(ref, () => ({
@@ -142,19 +143,27 @@ const MultiSelect = forwardRef<any, MultiSelectProps>((props, ref) => {
   return (
     <div className="relative w-[200px]" ref={selectRef}>
       <div className="relative border w-[200px] flex items-center px-4 py-2 rounded-lg">
-        <button onClick={togglePopover} className="flex-grow text-sm text-left">
+        <button
+          onClick={togglePopover}
+          className="flex-grow text-sm text-left"
+          type="button"
+        >
           {getSelectedDisplay()}
         </button>
         <div className="flex items-center space-x-2">
           {selected.length > 0 && (
-            <button className="flex items-center px-2" onClick={clearSelected}>
+            <button
+              className="flex items-center px-2"
+              onClick={clearSelected}
+              type="button"
+            >
               <Icon
                 elements={x}
                 svgClass="h-4 w-4 stroke-gray-500 fill-none dark:stroke-white"
               />
             </button>
           )}
-          <button onClick={togglePopover}>
+          <button onClick={togglePopover} type="button">
             <Icon
               elements={upDown}
               svgClass="h-4 w-4 stroke-gray-500 fill-none dark:stroke-white"
@@ -187,6 +196,7 @@ const MultiSelect = forwardRef<any, MultiSelectProps>((props, ref) => {
           {filteredItems.length > 0 ? (
             filteredItems.map(({ value, label }) => (
               <button
+                type="button"
                 key={value}
                 className="flex items-center w-full px-2 py-1 text-left hover:bg-blue-100 gap-2 rounded-lg mt-1 text-sm dark:hover:bg-blue-600"
                 onClick={() => handleSelect(value)}

package/source/components/uploader/Uploader.tsx

@@ -6,8 +6,8 @@
  */
 
 import React, { useState, useRef, useEffect } from "react";
-import { upload, x } from "../../icon/iconPaths";
-import Icon from "../../icon/Icon";
+import { upload, x } from "@/src/component-lib/icon/iconPaths";
+import Icon from "@/src/component-lib/icon/Icon";
 import { GetFileIcon } from "./uploaderIcon";
 import AestheticProcessingAnimationWithStyles from "./ProgressAnimation";
 
@@ -163,6 +163,7 @@ export const FileUploader = ({
             {fileSizeErrors.map((error, index) => (
               <span key={index} className="text-xs text-red-500">
                 {error}
+                <br />
               </span>
             ))}
           </div>

package/source/components/uploader/uploaderService.ts

@@ -17,29 +17,54 @@ function processFiles(files: File[], chunkSize: number) {
   return finalFiles;
 }
 
-// Converts large files to chunks to send over network and sends
 export async function sendFiles(
   files: File[],
   chunkSize: number,
   apiUrl = "http://localhost:8080/upload"
 ) {
   const processedFiles = processFiles(files, chunkSize);
-  const totalChunks = processedFiles.length;
+
+  // Track how many chunks belong to the current file being processed
+  const fileChunkCounts: { [key: string]: number } = {};
+  files.forEach((file) => {
+    fileChunkCounts[file.name] = Math.ceil(file.size / chunkSize);
+  });
+
+  // To track chunk index per file
+  const chunkIndexTracker: { [key: string]: number } = {};
 
   for (let i = 0; i < processedFiles.length; i++) {
     const { file, originalFile } = processedFiles[i];
     const formData = new FormData();
     formData.append("file", file, originalFile.name);
     formData.append("originalname", originalFile.name);
+    formData.append("originalFileSize", originalFile.size.toString());
 
-    if (file.size > chunkSize) {
-      formData.append("chunkIndex", i.toString());
-      formData.append("totalChunks", totalChunks.toString());
-    } else {
-      formData.append("chunkIndex", "0");
-      formData.append("totalChunks", "1");
+    const chunkCount = fileChunkCounts[originalFile.name];
+    const isChunked = chunkCount > 1;
+
+    // Initialize or reset chunkIndex per file
+    if (!chunkIndexTracker[originalFile.name]) {
+      chunkIndexTracker[originalFile.name] = 0; // Start at 0 for each file
     }
 
+    const chunkIndex = isChunked
+      ? chunkIndexTracker[originalFile.name].toString()
+      : "";
+    formData.append("chunkIndex", chunkIndex);
+    formData.append("totalChunks", isChunked ? chunkCount.toString() : "");
+
+    // Increment chunkIndex for the current file
+    if (isChunked) {
+      chunkIndexTracker[originalFile.name]++;
+    }
+
+    // Don't Remove the following console
+    // console.log("FormData contents:");
+    // formData.forEach((value, key) => {
+    //   console.log(`${key}: ${value}`);
+    // });
+
     try {
       const response = await fetch(apiUrl, {
         method: "POST",
@@ -57,7 +82,9 @@ export async function sendFiles(
           `File uploaded successfully. Document ID: ${data.documentId}`
         );
       } else {
-        console.log(`Chunk ${i + 1}/${totalChunks} uploaded`);
+        console.log(
+          `Chunk ${chunkIndexTracker[originalFile.name]}/${chunkCount} uploaded`
+        );
       }
     } catch (error) {
       console.error("Error uploading file chunk:", error);

package/source/icon/Icon.tsx

@@ -1,12 +1,23 @@
 import React from "react";
 
 type SvgElement = {
-  type: "path" | "circle";
+  type: "path" | "circle" | "polyline" | "rect" | "line";
   key: string;
   d?: string;
   cx?: number;
   cy?: number;
   r?: number;
+  points?: string;
+  x?: number;
+  y?: number;
+  width?: number;
+  height?: number;
+  rx?: number;
+  ry?: number;
+  x1?: number;
+  y1?: number;
+  x2?: number;
+  y2?: number;
 };
 
 type IconProps = {
@@ -21,6 +32,18 @@ export default function Icon({
     { type: "path", d: "m11 17-5-5 5-5", key: "13zhaf" },
     { type: "path", d: "m18 17-5-5 5-5", key: "h8a8et" },
     { type: "circle", cx: 12, cy: 12, r: 5, key: "circle1" },
+    { type: "polyline", points: "20 6 12 13 4 6", key: "polyline1" },
+    {
+      type: "rect",
+      x: 4,
+      y: 4,
+      width: 16,
+      height: 16,
+      key: "rect1",
+      rx: 2,
+      ry: 2,
+    },
+    { type: "line", x1: 0, y1: 0, x2: 24, y2: 24, key: "line1" }, // Example line
   ],
   dimensions = { width: "24", height: "24" },
 }: IconProps) {
@@ -47,6 +70,30 @@ export default function Icon({
               key={element.key}
             />
           );
+        } else if (element.type === "polyline") {
+          return <polyline points={element.points} key={element.key} />;
+        } else if (element.type === "rect") {
+          return (
+            <rect
+              x={element.x}
+              y={element.y}
+              width={element.width}
+              height={element.height}
+              rx={element.rx}
+              ry={element.ry}
+              key={element.key}
+            />
+          );
+        } else if (element.type === "line") {
+          return (
+            <line
+              x1={element.x1}
+              y1={element.y1}
+              x2={element.x2}
+              y2={element.y2}
+              key={element.key}
+            />
+          );
         }
         return null;
       })}