@tecsinapse/cortex-react 1.15.0-beta.7 → 1.15.0-beta.9

package/dist/cjs/components/Uploader/Manager.js

@@ -5,20 +5,19 @@ var reactDom = require('react-dom');
 var Upload = require('./Upload.js');
 var Button = require('../Button.js');
 var io = require('react-icons/io');
-var React = require('react');
 var clsx = require('clsx');
 var io5 = require('react-icons/io5');
 var cortexCore = require('@tecsinapse/cortex-core');
+var useManager = require('../../hooks/useManager.js');
 
 const Manager = ({
   open,
   files,
   onDelete,
   uploadProgressText = "Upload(s) in progress",
-  onClose,
-  type = "file"
+  onClose
 }) => {
-  const [min, setMin] = React.useState(false);
+  const { min, setMin, regularFiles, folderFiles } = useManager.useManager({ files });
   return reactDom.createPortal(
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -47,7 +46,7 @@ const Manager = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxRuntime.jsx(
+          /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
               className: clsx.clsx("w-full h-auto max-h-[300px] gap-mili", {
@@ -55,16 +54,19 @@ const Manager = ({
                 "flex flex-col": !min,
                 "pb-kilo overflow-scroll pr-deca": files.length > 3
               }),
-              children: type === "file" ? files.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx(
-                Upload.File,
-                {
-                  file,
-                  index,
-                  onDelete,
-                  showDelete: false
-                },
-                file.uid
-              )) : /* @__PURE__ */ jsxRuntime.jsx(Upload.FolderList, { files })
+              children: [
+                regularFiles.length > 0 ? regularFiles.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx(
+                  Upload.File,
+                  {
+                    file,
+                    index,
+                    onDelete,
+                    showDelete: false
+                  },
+                  file.uid
+                )) : null,
+                folderFiles.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Upload.FolderList, { files: folderFiles }) : null
+              ]
             }
           )
         ] })

package/dist/cjs/components/Uploader/Upload.js

@@ -2,10 +2,32 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var cortexCore = require('@tecsinapse/cortex-core');
+var React = require('react');
 var fa6 = require('react-icons/fa6');
 var md = require('react-icons/md');
 var ProgressBar = require('../ProgressBar/ProgressBar.js');
 
+const recursiveCountFolderElements = (node) => {
+  let count = 0;
+  for (const key in node) {
+    count++;
+    count += recursiveCountFolderElements(node[key]);
+  }
+  return count;
+};
+const countFolderElements = (paths, root) => {
+  if (!paths.length) return 0;
+  const tree = {};
+  for (const path of paths) {
+    const parts = path.replace(root + "/", "").split("/").filter(Boolean);
+    let current = tree;
+    for (const part of parts) {
+      if (!current[part]) current[part] = {};
+      current = current[part];
+    }
+  }
+  return recursiveCountFolderElements(tree);
+};
 const File = ({
   file,
   index,
@@ -63,7 +85,22 @@ const File = ({
     )
   ] }, index);
 };
-const Folder = ({ name, size, intent, loading }) => {
+const Folder = ({ name, subItems }) => {
+  const size = countFolderElements(
+    subItems.map((it) => it.path),
+    name
+  );
+  const loading = React.useMemo(
+    () => subItems.some((it) => it.status === "uploading"),
+    [subItems]
+  );
+  const intent = React.useMemo(() => {
+    if (loading) return "info";
+    if ((subItems ?? []).some((item) => item.status === "error") && (subItems ?? []).some((item) => item.status === "success")) {
+      return "warning";
+    }
+    return "success";
+  }, [subItems]);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full", children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center justify-between border rounded-t-mili shadow p-mili", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-centi", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { className: "border-2 text-kilo text-primary-medium w-tera h-tera flex items-center justify-center rounded-mili", children: /* @__PURE__ */ jsxRuntime.jsx(fa6.FaRegFolder, {}) }),
@@ -80,79 +117,17 @@ const Folder = ({ name, size, intent, loading }) => {
   ] });
 };
 const FolderList = ({ files }) => {
-  const paths = /* @__PURE__ */ new Set();
-  const buildTree = (files2) => {
-    const root = {
-      type: "root",
-      children: /* @__PURE__ */ new Map()
-    };
-    for (const file of files2) {
-      const parts = file.file.relativePath.slice(1).split("/");
-      parts.map((item) => paths.add(item));
-      let current = root;
-      parts.forEach((part, index) => {
-        const isLast = index === parts.length - 1;
-        if (isLast) {
-          current.children.set(part, {
-            type: "file",
-            file
-          });
-        } else {
-          if (!current.children.has(part)) {
-            current.children.set(part, {
-              type: "folder",
-              children: /* @__PURE__ */ new Map()
-            });
-          }
-          current = current.children.get(part);
-        }
-      });
-    }
-    return root;
-  };
-  const tree = buildTree(files);
-  const count = (node) => {
-    let total = 0;
-    const files2 = [];
-    for (const child of node.children.values()) {
-      if (child.type === "file") {
-        total += 1;
-        files2.push(child.file);
-      } else if (child.type === "folder") {
-        total += 1;
-        const nested = count(child);
-        total += nested.total;
-        files2.push(...nested.files);
-      }
-    }
-    return { total, files: files2 };
-  };
-  const children = [];
-  for (const [name, node] of tree.children) {
-    const size = count(node).total;
-    const files2 = count(node).files;
-    children.push({
-      name,
-      size,
-      files: files2
+  const folders = React.useMemo(() => {
+    const segments = {};
+    files.forEach((file) => {
+      const path = file.file.relativePath.replace(/^\//, "");
+      const root = path.split("/")[0];
+      const current = Array.from(segments?.[root] ?? []);
+      segments[root] = [...current, { path, status: file.status }];
     });
-  }
-  const folders = children.map((folder) => {
-    const intent = (folder.files ?? []).some((item) => item.status === "success") ? "success" : (files ?? []).some((item) => item.status === "error") ? "error" : "info";
-    return { ...folder, intent };
-  });
-  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: folders.map(({ intent, name, size, files: files2 }, index) => /* @__PURE__ */ jsxRuntime.jsx(
-    Folder,
-    {
-      name,
-      size,
-      intent,
-      loading: files2.some(
-        (file) => file.status === "uploading"
-      )
-    },
-    index
-  )) });
+    return segments;
+  }, [files]);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: Object.entries(folders).map(([name, children], index) => /* @__PURE__ */ jsxRuntime.jsx(Folder, { name, subItems: children }, index)) });
 };
 
 exports.File = File;

package/dist/cjs/hooks/useFileUpload.js

@@ -13,7 +13,8 @@ const useFileUpload = ({
   allowMultiple = true,
   preventDuplicates = false,
   onDuplicate,
-  hasManager = true
+  hasManager = true,
+  isFolder = false
 }) => {
   const [files, setFiles] = React.useState([]);
   const [duplicates, setDuplicates] = React.useState([]);
@@ -62,7 +63,8 @@ const useFileUpload = ({
     const newFiles = toProcess.map((file) => ({
       file,
       status: onAccept ? types.FileStatus.UPLOADING : types.FileStatus.SUCCESS,
-      uid: uuid.v4()
+      uid: uuid.v4(),
+      isFolder
     }));
     try {
       setFiles((prevFiles) => [...prevFiles, ...newFiles]);

package/dist/cjs/hooks/useManager.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var React = require('react');
+
+const useManager = ({ files }) => {
+  const [min, setMin] = React.useState(false);
+  const folderFiles = React.useMemo(
+    () => files.filter((file) => file.isFolder),
+    [files]
+  );
+  const regularFiles = React.useMemo(
+    () => files.filter((file) => !file.isFolder),
+    [files]
+  );
+  return {
+    min,
+    setMin,
+    folderFiles,
+    regularFiles
+  };
+};
+
+exports.useManager = useManager;

package/dist/esm/components/Uploader/Manager.js

@@ -3,20 +3,19 @@ import { createPortal } from 'react-dom';
 import { File, FolderList } from './Upload.js';
 import { Button } from '../Button.js';
 import { IoMdClose } from 'react-icons/io';
-import { useState } from 'react';
 import { clsx } from 'clsx';
 import { IoChevronUp, IoChevronDown } from 'react-icons/io5';
 import { manager } from '@tecsinapse/cortex-core';
+import { useManager } from '../../hooks/useManager.js';
 
 const Manager = ({
   open,
   files,
   onDelete,
   uploadProgressText = "Upload(s) in progress",
-  onClose,
-  type = "file"
+  onClose
 }) => {
-  const [min, setMin] = useState(false);
+  const { min, setMin, regularFiles, folderFiles } = useManager({ files });
   return createPortal(
     /* @__PURE__ */ jsx(
       "div",
@@ -45,7 +44,7 @@ const Manager = ({
               }
             )
           ] }),
-          /* @__PURE__ */ jsx(
+          /* @__PURE__ */ jsxs(
             "div",
             {
               className: clsx("w-full h-auto max-h-[300px] gap-mili", {
@@ -53,16 +52,19 @@ const Manager = ({
                 "flex flex-col": !min,
                 "pb-kilo overflow-scroll pr-deca": files.length > 3
               }),
-              children: type === "file" ? files.map((file, index) => /* @__PURE__ */ jsx(
-                File,
-                {
-                  file,
-                  index,
-                  onDelete,
-                  showDelete: false
-                },
-                file.uid
-              )) : /* @__PURE__ */ jsx(FolderList, { files })
+              children: [
+                regularFiles.length > 0 ? regularFiles.map((file, index) => /* @__PURE__ */ jsx(
+                  File,
+                  {
+                    file,
+                    index,
+                    onDelete,
+                    showDelete: false
+                  },
+                  file.uid
+                )) : null,
+                folderFiles.length > 0 ? /* @__PURE__ */ jsx(FolderList, { files: folderFiles }) : null
+              ]
             }
           )
         ] })

package/dist/esm/components/Uploader/Upload.js

@@ -1,9 +1,31 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { button } from '@tecsinapse/cortex-core';
+import { useMemo } from 'react';
 import { FaRegFileLines, FaRegFolder } from 'react-icons/fa6';
 import { MdClose } from 'react-icons/md';
 import { ProgressBar } from '../ProgressBar/ProgressBar.js';
 
+const recursiveCountFolderElements = (node) => {
+  let count = 0;
+  for (const key in node) {
+    count++;
+    count += recursiveCountFolderElements(node[key]);
+  }
+  return count;
+};
+const countFolderElements = (paths, root) => {
+  if (!paths.length) return 0;
+  const tree = {};
+  for (const path of paths) {
+    const parts = path.replace(root + "/", "").split("/").filter(Boolean);
+    let current = tree;
+    for (const part of parts) {
+      if (!current[part]) current[part] = {};
+      current = current[part];
+    }
+  }
+  return recursiveCountFolderElements(tree);
+};
 const File = ({
   file,
   index,
@@ -61,7 +83,22 @@ const File = ({
     )
   ] }, index);
 };
-const Folder = ({ name, size, intent, loading }) => {
+const Folder = ({ name, subItems }) => {
+  const size = countFolderElements(
+    subItems.map((it) => it.path),
+    name
+  );
+  const loading = useMemo(
+    () => subItems.some((it) => it.status === "uploading"),
+    [subItems]
+  );
+  const intent = useMemo(() => {
+    if (loading) return "info";
+    if ((subItems ?? []).some((item) => item.status === "error") && (subItems ?? []).some((item) => item.status === "success")) {
+      return "warning";
+    }
+    return "success";
+  }, [subItems]);
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full", children: [
     /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border rounded-t-mili shadow p-mili", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-centi", children: [
       /* @__PURE__ */ jsx("span", { className: "border-2 text-kilo text-primary-medium w-tera h-tera flex items-center justify-center rounded-mili", children: /* @__PURE__ */ jsx(FaRegFolder, {}) }),
@@ -78,79 +115,17 @@ const Folder = ({ name, size, intent, loading }) => {
   ] });
 };
 const FolderList = ({ files }) => {
-  const paths = /* @__PURE__ */ new Set();
-  const buildTree = (files2) => {
-    const root = {
-      type: "root",
-      children: /* @__PURE__ */ new Map()
-    };
-    for (const file of files2) {
-      const parts = file.file.relativePath.slice(1).split("/");
-      parts.map((item) => paths.add(item));
-      let current = root;
-      parts.forEach((part, index) => {
-        const isLast = index === parts.length - 1;
-        if (isLast) {
-          current.children.set(part, {
-            type: "file",
-            file
-          });
-        } else {
-          if (!current.children.has(part)) {
-            current.children.set(part, {
-              type: "folder",
-              children: /* @__PURE__ */ new Map()
-            });
-          }
-          current = current.children.get(part);
-        }
-      });
-    }
-    return root;
-  };
-  const tree = buildTree(files);
-  const count = (node) => {
-    let total = 0;
-    const files2 = [];
-    for (const child of node.children.values()) {
-      if (child.type === "file") {
-        total += 1;
-        files2.push(child.file);
-      } else if (child.type === "folder") {
-        total += 1;
-        const nested = count(child);
-        total += nested.total;
-        files2.push(...nested.files);
-      }
-    }
-    return { total, files: files2 };
-  };
-  const children = [];
-  for (const [name, node] of tree.children) {
-    const size = count(node).total;
-    const files2 = count(node).files;
-    children.push({
-      name,
-      size,
-      files: files2
+  const folders = useMemo(() => {
+    const segments = {};
+    files.forEach((file) => {
+      const path = file.file.relativePath.replace(/^\//, "");
+      const root = path.split("/")[0];
+      const current = Array.from(segments?.[root] ?? []);
+      segments[root] = [...current, { path, status: file.status }];
     });
-  }
-  const folders = children.map((folder) => {
-    const intent = (folder.files ?? []).some((item) => item.status === "success") ? "success" : (files ?? []).some((item) => item.status === "error") ? "error" : "info";
-    return { ...folder, intent };
-  });
-  return /* @__PURE__ */ jsx(Fragment, { children: folders.map(({ intent, name, size, files: files2 }, index) => /* @__PURE__ */ jsx(
-    Folder,
-    {
-      name,
-      size,
-      intent,
-      loading: files2.some(
-        (file) => file.status === "uploading"
-      )
-    },
-    index
-  )) });
+    return segments;
+  }, [files]);
+  return /* @__PURE__ */ jsx(Fragment, { children: Object.entries(folders).map(([name, children], index) => /* @__PURE__ */ jsx(Folder, { name, subItems: children }, index)) });
 };
 
 export { File, Folder, FolderList };

package/dist/esm/hooks/useFileUpload.js

@@ -11,7 +11,8 @@ const useFileUpload = ({
   allowMultiple = true,
   preventDuplicates = false,
   onDuplicate,
-  hasManager = true
+  hasManager = true,
+  isFolder = false
 }) => {
   const [files, setFiles] = useState([]);
   const [duplicates, setDuplicates] = useState([]);
@@ -60,7 +61,8 @@ const useFileUpload = ({
     const newFiles = toProcess.map((file) => ({
       file,
       status: onAccept ? FileStatus.UPLOADING : FileStatus.SUCCESS,
-      uid: v4()
+      uid: v4(),
+      isFolder
     }));
     try {
       setFiles((prevFiles) => [...prevFiles, ...newFiles]);

package/dist/esm/hooks/useManager.js

@@ -0,0 +1,21 @@
+import { useState, useMemo } from 'react';
+
+const useManager = ({ files }) => {
+  const [min, setMin] = useState(false);
+  const folderFiles = useMemo(
+    () => files.filter((file) => file.isFolder),
+    [files]
+  );
+  const regularFiles = useMemo(
+    () => files.filter((file) => !file.isFolder),
+    [files]
+  );
+  return {
+    min,
+    setMin,
+    folderFiles,
+    regularFiles
+  };
+};
+
+export { useManager };

package/dist/types/components/Uploader/Manager.d.ts

@@ -1,2 +1,2 @@
 import { ManagerProps } from './types';
-export declare const Manager: <T>({ open, files, onDelete, uploadProgressText, onClose, type, }: ManagerProps<T>) => any;
+export declare const Manager: <T>({ open, files, onDelete, uploadProgressText, onClose, }: ManagerProps<T>) => any;

package/dist/types/components/Uploader/Upload.d.ts

@@ -1,4 +1,4 @@
 import { FileProps, FolderListProps, FolderProps } from './types';
 export declare const File: <T>({ file, index, onDelete, showDelete, }: FileProps<T>) => import("react/jsx-runtime").JSX.Element;
-export declare const Folder: <T>({ name, size, intent, loading }: FolderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Folder: ({ name, subItems }: FolderProps) => import("react/jsx-runtime").JSX.Element;
 export declare const FolderList: <T>({ files }: FolderListProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/components/Uploader/index.d.ts

@@ -5,5 +5,5 @@ export declare const Uploader: {
     Files: <T>({ files, onDelete, uploadProgressText, }: import("./types").FilesProps<T>) => import("react/jsx-runtime").JSX.Element;
     Modal: ({ open, onClose, children, title, }: import("./types").ModalProps) => any;
     Root: <T>({ open, onClose, files, onDelete, dropzoneProps, selectFileText, dropText, buttonText, uploadProgressText, titleModal, isManagerOpen, closeManager, }: import("./types").RootUploaderProps<T>) => import("react/jsx-runtime").JSX.Element;
-    Manager: <T>({ open, files, onDelete, uploadProgressText, onClose, type, }: import("./types").ManagerProps<T>) => any;
+    Manager: <T>({ open, files, onDelete, uploadProgressText, onClose, }: import("./types").ManagerProps<T>) => any;
 };

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

@@ -1,4 +1,10 @@
 import { DropzoneInputProps, DropzoneRootProps, type FileError, type FileRejection, type FileWithPath } from 'react-dropzone';
+declare global {
+    interface File {
+        relativePath: string;
+        path?: string;
+    }
+}
 export interface FileItem {
     file: File;
     loading: 'loading' | 'success' | 'error';
@@ -11,9 +17,10 @@ export interface FileProps<T> {
 }
 export interface FolderProps {
     name: string;
-    size: number;
-    intent: 'default' | 'success' | 'warning' | 'info' | 'error';
-    loading: boolean;
+    subItems: {
+        status: string;
+        path: string;
+    }[];
 }
 export interface FolderListProps<T> {
     files: FileUpload<T>[];
@@ -52,6 +59,7 @@ export type FileUpload<T> = {
     metadata?: T;
     uid: string;
     status: 'success' | 'error' | 'uploading';
+    isFolder?: boolean;
 };
 export interface RootUploaderProps<T> {
     open: boolean;

package/dist/types/hooks/useFileUpload.d.ts

@@ -15,8 +15,9 @@ interface UseFileUploadOptions<T> {
     preventDuplicates?: boolean;
     onDuplicate?: (duplicates: File[]) => void;
     hasManager?: boolean;
+    isFolder?: boolean;
 }
-export declare const useFileUpload: <T>({ accept, onAccept, onFileRejected, maxSize, allowMultiple, preventDuplicates, onDuplicate, hasManager, }: UseFileUploadOptions<T>) => {
+export declare const useFileUpload: <T>({ accept, onAccept, onFileRejected, maxSize, allowMultiple, preventDuplicates, onDuplicate, hasManager, isFolder, }: UseFileUploadOptions<T>) => {
     onOpen: () => void;
     onClose: () => void;
     onDelete: (index: number) => void;

package/dist/types/hooks/useManager.d.ts

@@ -0,0 +1,9 @@
+import { FileUpload } from '../components';
+export declare const useManager: <T>({ files }: {
+    files: FileUpload<T>[];
+}) => {
+    min: boolean;
+    setMin: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    folderFiles: FileUpload<T>[];
+    regularFiles: FileUpload<T>[];
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tecsinapse/cortex-react",
-  "version": "1.15.0-beta.7",
+  "version": "1.15.0-beta.9",
   "description": "React components based in @tecsinapse/cortex-core",
   "license": "MIT",
   "main": "dist/esm/index.js",
@@ -20,7 +20,7 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.18",
     "@internationalized/date": "3.7.0",
-    "@tecsinapse/cortex-core": "1.2.0-beta.5",
+    "@tecsinapse/cortex-core": "1.2.0-beta.6",
     "clsx": "2.1.1",
     "currency.js": "2.0.4",
     "embla-carousel-autoplay": "^8.0.0",
@@ -48,5 +48,5 @@
     "react-icons": ">=5.2.0",
     "tailwind": ">=3.3.0"
   },
-  "gitHead": "2082dfbefdac0dc3a0773f8876885fdae29a8609"
+  "gitHead": "7ddfc6577ee756d2a3c4906fc41cbc2e5c0418bb"
 }