@tecsinapse/cortex-react 1.15.0-beta.2 → 1.15.0-beta.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/Calendar/Calendar.js +1 -0
- package/dist/cjs/components/Calendar/CalendarCell.js +4 -0
- package/dist/cjs/components/Calendar/CalendarGrid.js +1 -0
- package/dist/cjs/components/Calendar/RangeCalendar.js +1 -0
- package/dist/cjs/components/DatePicker/DatePickerInput.js +1 -0
- package/dist/cjs/components/DatePicker/DateRangePickerInput.js +1 -0
- package/dist/cjs/components/Input/Mask.js +1 -0
- package/dist/cjs/components/Input/Search.js +1 -0
- package/dist/cjs/components/Menubar/Categories.js +1 -0
- package/dist/cjs/components/Menubar/Dropdown.js +1 -0
- package/dist/cjs/components/Menubar/Header.js +1 -0
- package/dist/cjs/components/Menubar/Item.js +1 -0
- package/dist/cjs/components/Menubar/MostUsed.js +1 -0
- package/dist/cjs/components/Menubar/Root.js +1 -0
- package/dist/cjs/components/Menubar/Search.js +1 -0
- package/dist/cjs/components/Menubar/SubItem.js +1 -0
- package/dist/cjs/components/Popover/Provider.js +1 -0
- package/dist/cjs/components/Select/GroupedOptions.js +1 -0
- package/dist/cjs/components/Select/MultiGroupedOptions.js +1 -0
- package/dist/cjs/components/Select/MultiOptions.js +1 -0
- package/dist/cjs/components/Select/Options.js +1 -0
- package/dist/cjs/components/TimePicker/TimePickerInput.js +1 -0
- package/dist/cjs/components/Tooltip.js +1 -0
- package/dist/cjs/components/Uploader/Dropzone.js +23 -7
- package/dist/cjs/components/Uploader/Manager.js +26 -20
- package/dist/cjs/components/Uploader/Modal.js +1 -2
- package/dist/cjs/components/Uploader/Root.js +10 -14
- package/dist/cjs/components/Uploader/Upload.js +74 -2
- package/dist/cjs/hooks/useCalendarCell.js +1 -0
- package/dist/cjs/hooks/useFileUpload.js +55 -27
- package/dist/cjs/hooks/useManagerHelpers.js +29 -0
- package/dist/cjs/index.js +3 -0
- package/dist/cjs/provider/ManagerContext.js +125 -0
- package/dist/cjs/provider/MenubarProvider.js +1 -0
- package/dist/cjs/styles/progressBar.js +1 -1
- package/dist/esm/components/Calendar/Calendar.js +1 -0
- package/dist/esm/components/Calendar/CalendarCell.js +4 -0
- package/dist/esm/components/Calendar/CalendarGrid.js +1 -0
- package/dist/esm/components/Calendar/RangeCalendar.js +1 -0
- package/dist/esm/components/DatePicker/DatePickerInput.js +1 -0
- package/dist/esm/components/DatePicker/DateRangePickerInput.js +1 -0
- package/dist/esm/components/Input/Mask.js +1 -0
- package/dist/esm/components/Input/Search.js +1 -0
- package/dist/esm/components/Menubar/Categories.js +1 -0
- package/dist/esm/components/Menubar/Dropdown.js +1 -0
- package/dist/esm/components/Menubar/Header.js +1 -0
- package/dist/esm/components/Menubar/Item.js +1 -0
- package/dist/esm/components/Menubar/MostUsed.js +1 -0
- package/dist/esm/components/Menubar/Root.js +1 -0
- package/dist/esm/components/Menubar/Search.js +1 -0
- package/dist/esm/components/Menubar/SubItem.js +1 -0
- package/dist/esm/components/Popover/Provider.js +1 -0
- package/dist/esm/components/Select/GroupedOptions.js +1 -0
- package/dist/esm/components/Select/MultiGroupedOptions.js +1 -0
- package/dist/esm/components/Select/MultiOptions.js +1 -0
- package/dist/esm/components/Select/Options.js +1 -0
- package/dist/esm/components/TimePicker/TimePickerInput.js +1 -0
- package/dist/esm/components/Tooltip.js +1 -0
- package/dist/esm/components/Uploader/Dropzone.js +23 -7
- package/dist/esm/components/Uploader/Manager.js +28 -22
- package/dist/esm/components/Uploader/Modal.js +1 -2
- package/dist/esm/components/Uploader/Root.js +11 -15
- package/dist/esm/components/Uploader/Upload.js +75 -5
- package/dist/esm/hooks/useCalendarCell.js +1 -0
- package/dist/esm/hooks/useFileUpload.js +56 -28
- package/dist/esm/hooks/useManagerHelpers.js +27 -0
- package/dist/esm/index.js +1 -0
- package/dist/esm/provider/ManagerContext.js +122 -0
- package/dist/esm/provider/MenubarProvider.js +1 -0
- package/dist/esm/styles/progressBar.js +1 -1
- package/dist/types/components/Uploader/Dropzone.d.ts +1 -1
- package/dist/types/components/Uploader/Root.d.ts +1 -1
- package/dist/types/components/Uploader/Upload.d.ts +3 -1
- package/dist/types/components/Uploader/index.d.ts +2 -2
- package/dist/types/components/Uploader/types.d.ts +31 -7
- package/dist/types/hooks/useFileUpload.d.ts +8 -4
- package/dist/types/hooks/useManagerHelpers.d.ts +14 -0
- package/dist/types/provider/ManagerContext.d.ts +20 -0
- package/dist/types/provider/index.d.ts +1 -0
- package/package.json +3 -3
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { createPortal } from 'react-dom';
|
|
3
|
-
import { File } from './Upload.js';
|
|
3
|
+
import { File, FolderList } from './Upload.js';
|
|
4
4
|
import { Button } from '../Button.js';
|
|
5
5
|
import { IoMdClose } from 'react-icons/io';
|
|
6
|
-
import { useState } from 'react';
|
|
7
6
|
import { clsx } from 'clsx';
|
|
8
|
-
import {
|
|
7
|
+
import { IoChevronUp, IoChevronDown } from 'react-icons/io5';
|
|
9
8
|
import { manager } from '@tecsinapse/cortex-core';
|
|
9
|
+
import { useManagerHelpers } from '../../hooks/useManagerHelpers.js';
|
|
10
10
|
|
|
11
11
|
const Manager = ({
|
|
12
12
|
open,
|
|
@@ -15,13 +15,15 @@ const Manager = ({
|
|
|
15
15
|
uploadProgressText = "Upload(s) in progress",
|
|
16
16
|
onClose
|
|
17
17
|
}) => {
|
|
18
|
-
const
|
|
18
|
+
const { min, setMin, regularFiles, folderFiles, totalLength, setFolders } = useManagerHelpers({
|
|
19
|
+
files
|
|
20
|
+
});
|
|
19
21
|
return createPortal(
|
|
20
22
|
/* @__PURE__ */ jsx(
|
|
21
23
|
"div",
|
|
22
24
|
{
|
|
23
25
|
className: manager({
|
|
24
|
-
className: "h-auto max-h-[350px] w-[450px] overflow-hidden
|
|
26
|
+
className: "h-auto max-h-[350px] w-[450px] overflow-hidden",
|
|
25
27
|
open
|
|
26
28
|
}),
|
|
27
29
|
children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full h-full gap-mili items-center", children: [
|
|
@@ -29,9 +31,9 @@ const Manager = ({
|
|
|
29
31
|
/* @__PURE__ */ jsx(
|
|
30
32
|
Button,
|
|
31
33
|
{
|
|
32
|
-
variants: { variant: "
|
|
34
|
+
variants: { variant: "text", size: "square" },
|
|
33
35
|
onClick: () => setMin((min2) => !min2),
|
|
34
|
-
children: min ? /* @__PURE__ */ jsx(
|
|
36
|
+
children: min ? /* @__PURE__ */ jsx(IoChevronUp, {}) : /* @__PURE__ */ jsx(IoChevronDown, {})
|
|
35
37
|
}
|
|
36
38
|
),
|
|
37
39
|
/* @__PURE__ */ jsx("h3", { "data-testid": "upload-progress", children: uploadProgressText }),
|
|
@@ -44,23 +46,27 @@ const Manager = ({
|
|
|
44
46
|
}
|
|
45
47
|
)
|
|
46
48
|
] }),
|
|
47
|
-
/* @__PURE__ */
|
|
49
|
+
/* @__PURE__ */ jsxs(
|
|
48
50
|
"div",
|
|
49
51
|
{
|
|
50
|
-
className: clsx(
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
52
|
+
className: clsx("w-full h-auto max-h-[300px] gap-mili", {
|
|
53
|
+
hidden: min,
|
|
54
|
+
"flex flex-col": !min,
|
|
55
|
+
"pb-kilo overflow-scroll pr-deca": totalLength > 3
|
|
56
|
+
}),
|
|
57
|
+
children: [
|
|
58
|
+
regularFiles.length > 0 ? regularFiles.map((file, index) => /* @__PURE__ */ jsx(
|
|
59
|
+
File,
|
|
60
|
+
{
|
|
61
|
+
file,
|
|
62
|
+
index,
|
|
63
|
+
onDelete,
|
|
64
|
+
showDelete: false
|
|
65
|
+
},
|
|
66
|
+
file.uid
|
|
67
|
+
)) : null,
|
|
68
|
+
folderFiles.length > 0 ? /* @__PURE__ */ jsx(FolderList, { files: folderFiles, setFolders }) : null
|
|
69
|
+
]
|
|
64
70
|
}
|
|
65
71
|
)
|
|
66
72
|
] })
|
|
@@ -19,8 +19,7 @@ const Modal = ({
|
|
|
19
19
|
className: "flex flex-col bg-secondary-xlight rounded-mili min-w-[70vw] max-w-[95vh] max-h-[95vh] overflow-auto",
|
|
20
20
|
children: [
|
|
21
21
|
/* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between mb-deca", children: [
|
|
22
|
-
/* @__PURE__ */ jsx("
|
|
23
|
-
/* @__PURE__ */ jsx("h2", { className: "text-deca font-semibold", children: title }),
|
|
22
|
+
/* @__PURE__ */ jsx("h2", { className: "text-deca font-semibold ml-tera flex-1 text-center", children: title }),
|
|
24
23
|
/* @__PURE__ */ jsx(
|
|
25
24
|
"button",
|
|
26
25
|
{
|
|
@@ -1,24 +1,22 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { Modal } from './Modal.js';
|
|
3
3
|
import { Dropzone } from './Dropzone.js';
|
|
4
|
-
import {
|
|
4
|
+
import { Files } from './Files.js';
|
|
5
5
|
|
|
6
6
|
const Root = ({
|
|
7
7
|
open,
|
|
8
8
|
onClose,
|
|
9
|
-
files,
|
|
10
|
-
onDelete,
|
|
11
9
|
dropzoneProps,
|
|
12
10
|
selectFileText,
|
|
13
11
|
dropText,
|
|
14
12
|
buttonText,
|
|
15
|
-
uploadProgressText,
|
|
16
13
|
titleModal,
|
|
17
|
-
|
|
18
|
-
|
|
14
|
+
onDelete,
|
|
15
|
+
uploadProgressText,
|
|
16
|
+
files
|
|
19
17
|
}) => {
|
|
20
|
-
return /* @__PURE__ */
|
|
21
|
-
/* @__PURE__ */ jsx(
|
|
18
|
+
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx(Modal, { onClose, open, title: titleModal, children: /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col w-full gap-deca md:flex-row", children: [
|
|
19
|
+
/* @__PURE__ */ jsx(
|
|
22
20
|
Dropzone,
|
|
23
21
|
{
|
|
24
22
|
dropzoneProps,
|
|
@@ -26,18 +24,16 @@ const Root = ({
|
|
|
26
24
|
dropText,
|
|
27
25
|
buttonText
|
|
28
26
|
}
|
|
29
|
-
)
|
|
27
|
+
),
|
|
30
28
|
/* @__PURE__ */ jsx(
|
|
31
|
-
|
|
29
|
+
Files,
|
|
32
30
|
{
|
|
33
|
-
open: isManagerOpen,
|
|
34
31
|
files,
|
|
35
32
|
onDelete,
|
|
36
|
-
uploadProgressText
|
|
37
|
-
onClose: closeManager
|
|
33
|
+
uploadProgressText
|
|
38
34
|
}
|
|
39
35
|
)
|
|
40
|
-
] });
|
|
36
|
+
] }) }) });
|
|
41
37
|
};
|
|
42
38
|
|
|
43
39
|
export { Root };
|
|
@@ -1,9 +1,31 @@
|
|
|
1
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
1
|
+
import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
|
|
2
2
|
import { button } from '@tecsinapse/cortex-core';
|
|
3
|
-
import {
|
|
3
|
+
import { useMemo, useEffect } from 'react';
|
|
4
|
+
import { FaRegFileLines, FaRegFolder } from 'react-icons/fa6';
|
|
4
5
|
import { MdClose } from 'react-icons/md';
|
|
5
6
|
import { ProgressBar } from '../ProgressBar/ProgressBar.js';
|
|
6
7
|
|
|
8
|
+
const recursiveCountFolderElements = (node) => {
|
|
9
|
+
let count = 0;
|
|
10
|
+
for (const key in node) {
|
|
11
|
+
count++;
|
|
12
|
+
count += recursiveCountFolderElements(node[key]);
|
|
13
|
+
}
|
|
14
|
+
return count;
|
|
15
|
+
};
|
|
16
|
+
const countFolderElements = (paths, root) => {
|
|
17
|
+
if (!paths.length) return 0;
|
|
18
|
+
const tree = {};
|
|
19
|
+
for (const path of paths) {
|
|
20
|
+
const parts = path.replace(root + "/", "").split("/").filter(Boolean);
|
|
21
|
+
let current = tree;
|
|
22
|
+
for (const part of parts) {
|
|
23
|
+
if (!current[part]) current[part] = {};
|
|
24
|
+
current = current[part];
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
return recursiveCountFolderElements(tree);
|
|
28
|
+
};
|
|
7
29
|
const File = ({
|
|
8
30
|
file,
|
|
9
31
|
index,
|
|
@@ -20,7 +42,7 @@ const File = ({
|
|
|
20
42
|
return "info";
|
|
21
43
|
}
|
|
22
44
|
}
|
|
23
|
-
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
|
|
45
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full", children: [
|
|
24
46
|
/* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border rounded-t-mili shadow p-mili", children: [
|
|
25
47
|
/* @__PURE__ */ jsxs("div", { className: "flex gap-centi", children: [
|
|
26
48
|
file.file && file.file.type.startsWith("image/") ? /* @__PURE__ */ jsx(
|
|
@@ -42,7 +64,7 @@ const File = ({
|
|
|
42
64
|
file.status === "success" && showDelete ? /* @__PURE__ */ jsx(
|
|
43
65
|
"button",
|
|
44
66
|
{
|
|
45
|
-
onClick: () => onDelete(index),
|
|
67
|
+
onClick: () => onDelete?.(index),
|
|
46
68
|
"data-testid": "remove-button",
|
|
47
69
|
className: button({
|
|
48
70
|
className: " bg-inherit border-2 border-primary-light text-primary-light",
|
|
@@ -61,5 +83,53 @@ const File = ({
|
|
|
61
83
|
)
|
|
62
84
|
] }, index);
|
|
63
85
|
};
|
|
86
|
+
const Folder = ({ name, subItems }) => {
|
|
87
|
+
const size = useMemo(
|
|
88
|
+
() => countFolderElements(
|
|
89
|
+
subItems.map((it) => it.path),
|
|
90
|
+
name
|
|
91
|
+
),
|
|
92
|
+
[subItems, name]
|
|
93
|
+
);
|
|
94
|
+
const loading = useMemo(
|
|
95
|
+
() => subItems.some((it) => it.status === "uploading"),
|
|
96
|
+
[subItems]
|
|
97
|
+
);
|
|
98
|
+
const intent = useMemo(() => {
|
|
99
|
+
if (loading) return "info";
|
|
100
|
+
if ((subItems ?? []).some((item) => item.status === "error") && (subItems ?? []).some((item) => item.status === "success")) {
|
|
101
|
+
return "warning";
|
|
102
|
+
}
|
|
103
|
+
return "success";
|
|
104
|
+
}, [subItems]);
|
|
105
|
+
return /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full", children: [
|
|
106
|
+
/* @__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: [
|
|
107
|
+
/* @__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, {}) }),
|
|
108
|
+
/* @__PURE__ */ jsxs("div", { className: "flex-col", children: [
|
|
109
|
+
/* @__PURE__ */ jsx("p", { className: "font-semibold truncate max-w-[200px]", children: name }),
|
|
110
|
+
/* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-500", children: [
|
|
111
|
+
size,
|
|
112
|
+
" ",
|
|
113
|
+
size > 1 ? "itens" : "item"
|
|
114
|
+
] })
|
|
115
|
+
] })
|
|
116
|
+
] }) }),
|
|
117
|
+
/* @__PURE__ */ jsx(ProgressBar, { intent, infinite: loading })
|
|
118
|
+
] });
|
|
119
|
+
};
|
|
120
|
+
const FolderList = ({ files, setFolders }) => {
|
|
121
|
+
const folders = useMemo(() => {
|
|
122
|
+
const segments = {};
|
|
123
|
+
files.forEach((file) => {
|
|
124
|
+
const path = file.file.relativePath.replace(/^\//, "");
|
|
125
|
+
const root = path.split("/")[0];
|
|
126
|
+
const current = Array.from(segments?.[root] ?? []);
|
|
127
|
+
segments[root] = [...current, { path, status: file.status }];
|
|
128
|
+
});
|
|
129
|
+
return segments;
|
|
130
|
+
}, [files]);
|
|
131
|
+
useEffect(() => setFolders(Object.entries(folders)), [folders, setFolders]);
|
|
132
|
+
return /* @__PURE__ */ jsx(Fragment, { children: Object.entries(folders).map(([name, children], index) => /* @__PURE__ */ jsx(Folder, { name, subItems: children }, index)) });
|
|
133
|
+
};
|
|
64
134
|
|
|
65
|
-
export { File };
|
|
135
|
+
export { File, Folder, FolderList };
|
|
@@ -11,6 +11,7 @@ import 'currency.js';
|
|
|
11
11
|
import '../provider/MenubarContext.js';
|
|
12
12
|
import '../provider/SnackbarProvider.js';
|
|
13
13
|
import { useCalendarContext } from '../provider/CalendarProvider.js';
|
|
14
|
+
import '../provider/ManagerContext.js';
|
|
14
15
|
|
|
15
16
|
const useCalendarCell = ({ state, date }) => {
|
|
16
17
|
const { isTodayHighlited } = useCalendarContext();
|
|
@@ -1,25 +1,58 @@
|
|
|
1
|
-
import { useState, useCallback } from 'react';
|
|
1
|
+
import { useState, useCallback, useEffect } from 'react';
|
|
2
2
|
import { useDropzone } from 'react-dropzone';
|
|
3
3
|
import { v4 } from 'uuid';
|
|
4
4
|
import { FileStatus, AcceptSpecificMap } from '../components/Uploader/types.js';
|
|
5
|
+
import 'react/jsx-runtime';
|
|
6
|
+
import '@internationalized/date';
|
|
7
|
+
import 'react-aria';
|
|
8
|
+
import 'react-stately';
|
|
9
|
+
import '../components/Popover/Context.js';
|
|
10
|
+
import '@floating-ui/react';
|
|
11
|
+
import 'currency.js';
|
|
12
|
+
import '../provider/MenubarContext.js';
|
|
13
|
+
import '../provider/SnackbarProvider.js';
|
|
14
|
+
import '../provider/CalendarProvider.js';
|
|
15
|
+
import { useManager } from '../provider/ManagerContext.js';
|
|
5
16
|
|
|
6
17
|
const useFileUpload = ({
|
|
7
18
|
accept = {},
|
|
8
19
|
onAccept,
|
|
20
|
+
onOpenManager,
|
|
9
21
|
onFileRejected,
|
|
10
22
|
maxSize,
|
|
11
23
|
allowMultiple = true,
|
|
12
24
|
preventDuplicates = false,
|
|
13
|
-
onDuplicate
|
|
25
|
+
onDuplicate,
|
|
26
|
+
hasManager = true,
|
|
27
|
+
isFolder = false,
|
|
28
|
+
uploadProgressText
|
|
14
29
|
}) => {
|
|
15
|
-
const
|
|
30
|
+
const {
|
|
31
|
+
showManager,
|
|
32
|
+
files,
|
|
33
|
+
setFiles,
|
|
34
|
+
isOpen: isManagerOpen,
|
|
35
|
+
setIsOpen: setIsManagerOpen,
|
|
36
|
+
uploadFiles
|
|
37
|
+
} = useManager();
|
|
16
38
|
const [duplicates, setDuplicates] = useState([]);
|
|
17
39
|
const [isOpen, setIsOpen] = useState(false);
|
|
18
|
-
const [isManagerOpen, setIsManagerOpen] = useState(false);
|
|
19
40
|
const onOpen = useCallback(() => setIsOpen(true), []);
|
|
20
41
|
const onClose = useCallback(() => setIsOpen(false), []);
|
|
21
|
-
const
|
|
22
|
-
|
|
42
|
+
const handleRemoveFile = useCallback((index) => {
|
|
43
|
+
setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
|
|
44
|
+
}, []);
|
|
45
|
+
const handleClearFiles = useCallback(() => {
|
|
46
|
+
setFiles([]);
|
|
47
|
+
}, []);
|
|
48
|
+
const openManager = useCallback(() => {
|
|
49
|
+
setIsManagerOpen(true);
|
|
50
|
+
onOpenManager?.();
|
|
51
|
+
}, []);
|
|
52
|
+
const closeManager = useCallback(() => {
|
|
53
|
+
handleClearFiles();
|
|
54
|
+
setIsManagerOpen(false);
|
|
55
|
+
}, []);
|
|
23
56
|
const updateFiles = useCallback(
|
|
24
57
|
(prevFiles, newFiles) => {
|
|
25
58
|
const current = /* @__PURE__ */ new Map();
|
|
@@ -29,8 +62,11 @@ const useFileUpload = ({
|
|
|
29
62
|
[]
|
|
30
63
|
);
|
|
31
64
|
const onDrop = async (acceptedFiles) => {
|
|
32
|
-
|
|
33
|
-
|
|
65
|
+
if (acceptedFiles.length < 1) return;
|
|
66
|
+
if (hasManager) {
|
|
67
|
+
openManager();
|
|
68
|
+
onClose();
|
|
69
|
+
}
|
|
34
70
|
let toProcess = acceptedFiles;
|
|
35
71
|
if (preventDuplicates) {
|
|
36
72
|
const found = (acceptedFiles ?? []).filter(
|
|
@@ -48,22 +84,20 @@ const useFileUpload = ({
|
|
|
48
84
|
const newFiles = toProcess.map((file) => ({
|
|
49
85
|
file,
|
|
50
86
|
status: onAccept ? FileStatus.UPLOADING : FileStatus.SUCCESS,
|
|
51
|
-
uid: v4()
|
|
87
|
+
uid: v4(),
|
|
88
|
+
isFolder
|
|
52
89
|
}));
|
|
53
|
-
|
|
54
|
-
setFiles((prevFiles) => [...prevFiles, ...newFiles]);
|
|
55
|
-
if (onAccept) {
|
|
56
|
-
const updatedFiles = await onAccept(newFiles);
|
|
57
|
-
setFiles((prevFiles) => updateFiles(prevFiles, updatedFiles));
|
|
58
|
-
}
|
|
59
|
-
} catch (e) {
|
|
60
|
-
const updatedFiles = newFiles.map((f) => ({
|
|
61
|
-
...f,
|
|
62
|
-
status: FileStatus.ERROR
|
|
63
|
-
}));
|
|
64
|
-
setFiles((prevFiles) => updateFiles(prevFiles, updatedFiles));
|
|
65
|
-
}
|
|
90
|
+
uploadFiles({ onAccept, newFiles, updateFiles });
|
|
66
91
|
};
|
|
92
|
+
useEffect(() => {
|
|
93
|
+
if (hasManager) {
|
|
94
|
+
showManager?.({
|
|
95
|
+
onClose: closeManager,
|
|
96
|
+
onDelete: handleRemoveFile,
|
|
97
|
+
uploadProgressText
|
|
98
|
+
});
|
|
99
|
+
}
|
|
100
|
+
}, [handleRemoveFile, closeManager]);
|
|
67
101
|
const addMimeTypes = (key, acc) => {
|
|
68
102
|
AcceptSpecificMap[key].forEach((mimeType) => {
|
|
69
103
|
acc[mimeType] = [];
|
|
@@ -87,12 +121,6 @@ const useFileUpload = ({
|
|
|
87
121
|
maxSize,
|
|
88
122
|
onDropRejected: onFileRejected
|
|
89
123
|
});
|
|
90
|
-
const handleRemoveFile = useCallback((index) => {
|
|
91
|
-
setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
|
|
92
|
-
}, []);
|
|
93
|
-
const handleClearFiles = useCallback(() => {
|
|
94
|
-
setFiles([]);
|
|
95
|
-
}, []);
|
|
96
124
|
const isFileLimitReached = !allowMultiple && files.length > 0;
|
|
97
125
|
return {
|
|
98
126
|
onOpen,
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import { useState, useMemo } from 'react';
|
|
2
|
+
|
|
3
|
+
const useManagerHelpers = ({
|
|
4
|
+
files
|
|
5
|
+
}) => {
|
|
6
|
+
const [min, setMin] = useState(false);
|
|
7
|
+
const [folders, setFolders] = useState();
|
|
8
|
+
const folderFiles = useMemo(
|
|
9
|
+
() => files?.filter((file) => file.isFolder) ?? [],
|
|
10
|
+
[files]
|
|
11
|
+
);
|
|
12
|
+
const regularFiles = useMemo(
|
|
13
|
+
() => files?.filter((file) => !file.isFolder) ?? [],
|
|
14
|
+
[files]
|
|
15
|
+
);
|
|
16
|
+
const totalLength = (regularFiles ?? []).length + (folders ?? []).length;
|
|
17
|
+
return {
|
|
18
|
+
min,
|
|
19
|
+
setMin,
|
|
20
|
+
folderFiles,
|
|
21
|
+
regularFiles,
|
|
22
|
+
totalLength,
|
|
23
|
+
setFolders
|
|
24
|
+
};
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export { useManagerHelpers };
|
package/dist/esm/index.js
CHANGED
|
@@ -65,6 +65,7 @@ export { SnackbarProvider, useSnackbar } from './provider/SnackbarProvider.js';
|
|
|
65
65
|
export { MenubarContext } from './provider/MenubarContext.js';
|
|
66
66
|
export { useMenubar } from './provider/useMenubar.js';
|
|
67
67
|
export { CalendarProvider, useCalendarContext } from './provider/CalendarProvider.js';
|
|
68
|
+
export { ManagerProvider, useManager } from './provider/ManagerContext.js';
|
|
68
69
|
export { Context, useAccordionContext } from './components/Accordion/context.js';
|
|
69
70
|
export { BRLMask, CurrencyIMask, ExpressionMasks, Masks, NumberIMask, PercentageIMask, PercentageMask } from './components/Input/masks.js';
|
|
70
71
|
export { Root } from './components/Uploader/Root.js';
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { createContext, useState, useContext } from 'react';
|
|
3
|
+
import { Manager } from '../components/Uploader/Manager.js';
|
|
4
|
+
import 'clsx';
|
|
5
|
+
import '../components/Accordion/context.js';
|
|
6
|
+
import 'react-icons/lia';
|
|
7
|
+
import '@internationalized/date';
|
|
8
|
+
import '../components/Badge.js';
|
|
9
|
+
import 'react-icons/md';
|
|
10
|
+
import '../components/Card.js';
|
|
11
|
+
import '../components/Button.js';
|
|
12
|
+
import 'react-aria';
|
|
13
|
+
import 'react-stately';
|
|
14
|
+
import './MenubarContext.js';
|
|
15
|
+
import './SnackbarProvider.js';
|
|
16
|
+
import './CalendarProvider.js';
|
|
17
|
+
import '../components/Popover/Context.js';
|
|
18
|
+
import 'react-dropzone';
|
|
19
|
+
import 'uuid';
|
|
20
|
+
import { FileStatus } from '../components/Uploader/types.js';
|
|
21
|
+
import '@floating-ui/react';
|
|
22
|
+
import 'currency.js';
|
|
23
|
+
import '../components/Calendar/CalendarCell.js';
|
|
24
|
+
import '@tecsinapse/cortex-core';
|
|
25
|
+
import 'react-icons/fa';
|
|
26
|
+
import 'react-icons/io';
|
|
27
|
+
import 'embla-carousel-react';
|
|
28
|
+
import 'embla-carousel-autoplay';
|
|
29
|
+
import '../components/Checkbox.js';
|
|
30
|
+
import '../components/ColorPicker.js';
|
|
31
|
+
import '../components/DatePicker/DateSegment.js';
|
|
32
|
+
import '../components/DatePicker/DatePickerInputBase.js';
|
|
33
|
+
import '../components/GroupButton.js';
|
|
34
|
+
import '../components/Hint.js';
|
|
35
|
+
import '../components/Input/Box.js';
|
|
36
|
+
import '../components/Input/Face.js';
|
|
37
|
+
import '../components/Input/Left.js';
|
|
38
|
+
import '../components/Input/Mask.js';
|
|
39
|
+
import '../components/Input/Right.js';
|
|
40
|
+
import '../components/Input/Root.js';
|
|
41
|
+
import '../components/Input/Search.js';
|
|
42
|
+
import '../components/Menubar/Left.js';
|
|
43
|
+
import '../styles/menubar.js';
|
|
44
|
+
import '../components/Menubar/Right.js';
|
|
45
|
+
import '../components/Menubar/Dropdown.js';
|
|
46
|
+
import '../components/Menubar/MostUsed.js';
|
|
47
|
+
import '../components/Menubar/MostUsedItem.js';
|
|
48
|
+
import '../components/Menubar/Header.js';
|
|
49
|
+
import '../components/Menubar/Item.js';
|
|
50
|
+
import './CategoriesContext.js';
|
|
51
|
+
import '../components/Menubar/SubItem.js';
|
|
52
|
+
import '../components/Modal.js';
|
|
53
|
+
import '../components/ProgressBar/Progress.js';
|
|
54
|
+
import '../components/RadioButton.js';
|
|
55
|
+
import '../components/Select/GroupedOptions.js';
|
|
56
|
+
import '../components/Select/context.js';
|
|
57
|
+
import '../components/Select/MultiGroupedOptions.js';
|
|
58
|
+
import '../components/Select/MultiOptions.js';
|
|
59
|
+
import '../components/Select/Options.js';
|
|
60
|
+
import '../components/Select/Trigger.js';
|
|
61
|
+
import '../components/Snackbar/BaseSnackbar.js';
|
|
62
|
+
import '../styles/stepNodeVariants.js';
|
|
63
|
+
import '../components/Tag.js';
|
|
64
|
+
import '../components/TextArea/Box.js';
|
|
65
|
+
import '../components/TextArea/Face.js';
|
|
66
|
+
import '../components/TextArea/Left.js';
|
|
67
|
+
import '../components/TextArea/Right.js';
|
|
68
|
+
import '../components/TextArea/Root.js';
|
|
69
|
+
import '../components/TimePicker/TimeFieldInput.js';
|
|
70
|
+
import '../components/Toggle.js';
|
|
71
|
+
import '../components/Tooltip.js';
|
|
72
|
+
import 'react-icons/hi2';
|
|
73
|
+
import 'react-icons/fa6';
|
|
74
|
+
import 'react-dom';
|
|
75
|
+
|
|
76
|
+
const ManagerContext = createContext(null);
|
|
77
|
+
const ManagerProvider = ({ children }) => {
|
|
78
|
+
const [props, setProps] = useState({});
|
|
79
|
+
const [files, setFiles] = useState([]);
|
|
80
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
81
|
+
const uploadFiles = async ({
|
|
82
|
+
onAccept,
|
|
83
|
+
newFiles,
|
|
84
|
+
updateFiles
|
|
85
|
+
}) => {
|
|
86
|
+
try {
|
|
87
|
+
setFiles((prevFiles) => [...prevFiles, ...newFiles]);
|
|
88
|
+
if (onAccept) {
|
|
89
|
+
const updatedFiles = await onAccept(newFiles);
|
|
90
|
+
setFiles((prevFiles) => updateFiles(prevFiles, updatedFiles));
|
|
91
|
+
}
|
|
92
|
+
} catch (e) {
|
|
93
|
+
const updatedFiles = newFiles.map((f) => ({
|
|
94
|
+
...f,
|
|
95
|
+
status: FileStatus.ERROR
|
|
96
|
+
}));
|
|
97
|
+
setFiles((prevFiles) => updateFiles(prevFiles, updatedFiles));
|
|
98
|
+
}
|
|
99
|
+
};
|
|
100
|
+
const showManager = (_props) => {
|
|
101
|
+
setProps(_props);
|
|
102
|
+
};
|
|
103
|
+
return /* @__PURE__ */ jsxs(
|
|
104
|
+
ManagerContext.Provider,
|
|
105
|
+
{
|
|
106
|
+
value: { showManager, files, setFiles, isOpen, setIsOpen, uploadFiles },
|
|
107
|
+
children: [
|
|
108
|
+
children,
|
|
109
|
+
/* @__PURE__ */ jsx(Manager, { files, open: isOpen, ...props })
|
|
110
|
+
]
|
|
111
|
+
}
|
|
112
|
+
);
|
|
113
|
+
};
|
|
114
|
+
const useManager = () => {
|
|
115
|
+
const context = useContext(ManagerContext);
|
|
116
|
+
if (!context) {
|
|
117
|
+
throw new Error("useManager must be used within a ManagerProvider");
|
|
118
|
+
}
|
|
119
|
+
return context;
|
|
120
|
+
};
|
|
121
|
+
|
|
122
|
+
export { ManagerProvider, useManager };
|
|
@@ -6,6 +6,7 @@ import 'react-stately';
|
|
|
6
6
|
import { MenubarContext } from './MenubarContext.js';
|
|
7
7
|
import './SnackbarProvider.js';
|
|
8
8
|
import './CalendarProvider.js';
|
|
9
|
+
import './ManagerContext.js';
|
|
9
10
|
import '../components/Popover/Context.js';
|
|
10
11
|
import 'react-dropzone';
|
|
11
12
|
import 'uuid';
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { DropzoneProps } from './types';
|
|
2
|
-
export declare const Dropzone: ({ dropzoneProps, selectFileText, dropText, buttonText, }: DropzoneProps) => import("react/jsx-runtime").JSX.Element;
|
|
2
|
+
export declare const Dropzone: ({ dropzoneProps, selectFileText, dropText, buttonText, hasButton, }: DropzoneProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { RootUploaderProps } from './types';
|
|
2
|
-
export declare const Root: <T>({ open, onClose,
|
|
2
|
+
export declare const Root: <T>({ open, onClose, dropzoneProps, selectFileText, dropText, buttonText, titleModal, onDelete, uploadProgressText, files, }: RootUploaderProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,2 +1,4 @@
|
|
|
1
|
-
import { FileProps } from './types';
|
|
1
|
+
import { FileProps, FolderListProps, FolderProps } from './types';
|
|
2
2
|
export declare const File: <T>({ file, index, onDelete, showDelete, }: FileProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
export declare const Folder: ({ name, subItems }: FolderProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
export declare const FolderList: <T>({ files, setFolders }: FolderListProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
export * from './Root';
|
|
2
2
|
export * from './types';
|
|
3
3
|
export declare const Uploader: {
|
|
4
|
-
Dropzone: ({ dropzoneProps, selectFileText, dropText, buttonText, }: import("./types").DropzoneProps) => import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
Dropzone: ({ dropzoneProps, selectFileText, dropText, buttonText, hasButton, }: import("./types").DropzoneProps) => import("react/jsx-runtime").JSX.Element;
|
|
5
5
|
Files: <T>({ files, onDelete, uploadProgressText, }: import("./types").FilesProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
Modal: ({ open, onClose, children, title, }: import("./types").ModalProps) => any;
|
|
7
|
-
Root: <T>({ open, onClose,
|
|
7
|
+
Root: <T>({ open, onClose, dropzoneProps, selectFileText, dropText, buttonText, titleModal, onDelete, uploadProgressText, files, }: import("./types").RootUploaderProps<T>) => import("react/jsx-runtime").JSX.Element;
|
|
8
8
|
Manager: <T>({ open, files, onDelete, uploadProgressText, onClose, }: import("./types").ManagerProps<T>) => any;
|
|
9
9
|
};
|