@tecsinapse/cortex-react 1.15.0-beta.1 → 1.15.0-beta.3

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.
Files changed (12) hide show
  1. package/dist/cjs/components/Uploader/Manager.js +35 -23
  2. package/dist/cjs/components/Uploader/Modal.js +1 -2
  3. package/dist/cjs/components/Uploader/Upload.js +8 -3
  4. package/dist/cjs/hooks/useFileUpload.js +11 -7
  5. package/dist/esm/components/Uploader/Manager.js +35 -23
  6. package/dist/esm/components/Uploader/Modal.js +1 -2
  7. package/dist/esm/components/Uploader/Upload.js +8 -3
  8. package/dist/esm/hooks/useFileUpload.js +11 -7
  9. package/dist/types/components/Uploader/Upload.d.ts +1 -1
  10. package/dist/types/components/Uploader/types.d.ts +1 -0
  11. package/dist/types/hooks/useFileUpload.d.ts +1 -0
  12. package/package.json +3 -3
package/dist/cjs/components/Uploader/Manager.js CHANGED
@@ -1,21 +1,15 @@
1
1
  'use strict';
2
2
 
3
3
  var jsxRuntime = require('react/jsx-runtime');
4
- var tailwindVariants = require('tailwind-variants');
5
4
  var reactDom = require('react-dom');
6
5
  var Upload = require('./Upload.js');
7
6
  var Button = require('../Button.js');
8
7
  var io = require('react-icons/io');
8
+ var React = require('react');
9
+ var clsx = require('clsx');
10
+ var io5 = require('react-icons/io5');
11
+ var cortexCore = require('@tecsinapse/cortex-core');
9
12
 
10
- const foldermodal = tailwindVariants.tv({
11
- base: "fixed rounded-micro p-kilo bg-white shadow-xl flex transition z-modal",
12
- variants: {
13
- open: {
14
- true: "scale-100 visible",
15
- false: "invisible"
16
- }
17
- }
18
- });
19
13
  const Manager = ({
20
14
  open,
21
15
  files,
@@ -23,36 +17,54 @@ const Manager = ({
23
17
  uploadProgressText = "Upload(s) in progress",
24
18
  onClose
25
19
  }) => {
20
+ const [min, setMin] = React.useState(false);
26
21
  return reactDom.createPortal(
27
22
  /* @__PURE__ */ jsxRuntime.jsx(
28
23
  "div",
29
24
  {
30
- className: foldermodal({
31
- className: "h-[350px] w-[400px] bg-white bottom-deca right-deca overflow-hidden",
25
+ className: cortexCore.manager({
26
+ className: "h-auto max-h-[350px] w-[450px] overflow-hidden pt-deca",
32
27
  open
33
28
  }),
34
29
  children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col w-full h-full gap-mili items-center", children: [
35
30
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between w-full", children: [
36
- /* @__PURE__ */ jsxRuntime.jsx("div", {}),
37
- /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "ml-mega", "data-testid": "upload-progress", children: uploadProgressText }),
38
31
  /* @__PURE__ */ jsxRuntime.jsx(
39
32
  Button.Button,
40
33
  {
41
- variants: { variant: "outline", size: "circle" },
34
+ variants: { variant: "outline", size: "square" },
35
+ onClick: () => setMin((min2) => !min2),
36
+ children: min ? /* @__PURE__ */ jsxRuntime.jsx(io5.IoArrowUp, {}) : /* @__PURE__ */ jsxRuntime.jsx(io5.IoArrowDown, {})
37
+ }
38
+ ),
39
+ /* @__PURE__ */ jsxRuntime.jsx("h3", { "data-testid": "upload-progress", children: uploadProgressText }),
40
+ /* @__PURE__ */ jsxRuntime.jsx(
41
+ Button.Button,
42
+ {
43
+ variants: { variant: "filled", size: "square" },
42
44
  onClick: onClose,
43
45
  children: /* @__PURE__ */ jsxRuntime.jsx(io.IoMdClose, {})
44
46
  }
45
47
  )
46
48
  ] }),
47
- /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-col w-full overflow-scroll", children: files.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx(
48
- Upload.File,
49
+ /* @__PURE__ */ jsxRuntime.jsx(
50
+ "div",
49
51
  {
50
- file,
51
- index,
52
- onDelete
53
- },
54
- file.uid
55
- )) })
52
+ className: clsx.clsx(
53
+ "w-full overflow-scroll h-auto max-h-[300px] px-deca",
54
+ { hidden: min, "flex flex-col": !min, "pb-deca": files.length > 3 }
55
+ ),
56
+ children: files.map((file, index) => /* @__PURE__ */ jsxRuntime.jsx(
57
+ Upload.File,
58
+ {
59
+ file,
60
+ index,
61
+ onDelete,
62
+ showDelete: false
63
+ },
64
+ file.uid
65
+ ))
66
+ }
67
+ )
56
68
  ] })
57
69
  }
58
70
  ),
package/dist/cjs/components/Uploader/Modal.js CHANGED
@@ -21,8 +21,7 @@ const Modal = ({
21
21
  className: "flex flex-col bg-secondary-xlight rounded-mili min-w-[70vw] max-w-[95vh] max-h-[95vh] overflow-auto",
22
22
  children: [
23
23
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex w-full items-center justify-between mb-deca", children: [
24
- /* @__PURE__ */ jsxRuntime.jsx("div", {}),
25
- /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-deca font-semibold", children: title }),
24
+ /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-deca font-semibold ml-tera flex-1 text-center", children: title }),
26
25
  /* @__PURE__ */ jsxRuntime.jsx(
27
26
  "button",
28
27
  {
package/dist/cjs/components/Uploader/Upload.js CHANGED
@@ -6,7 +6,12 @@ var fa6 = require('react-icons/fa6');
6
6
  var md = require('react-icons/md');
7
7
  var ProgressBar = require('../ProgressBar/ProgressBar.js');
8
8
 
9
- const File = ({ file, index, onDelete }) => {
9
+ const File = ({
10
+ file,
11
+ index,
12
+ onDelete,
13
+ showDelete = true
14
+ }) => {
10
15
  function statusIntent(status) {
11
16
  switch (status) {
12
17
  case "success":
@@ -36,7 +41,7 @@ const File = ({ file, index, onDelete }) => {
36
41
  ] })
37
42
  ] })
38
43
  ] }),
39
- file.status === "success" && /* @__PURE__ */ jsxRuntime.jsx(
44
+ file.status === "success" && showDelete ? /* @__PURE__ */ jsxRuntime.jsx(
40
45
  "button",
41
46
  {
42
47
  onClick: () => onDelete(index),
@@ -47,7 +52,7 @@ const File = ({ file, index, onDelete }) => {
47
52
  }),
48
53
  children: /* @__PURE__ */ jsxRuntime.jsx(md.MdClose, { size: 15 })
49
54
  }
50
- )
55
+ ) : null
51
56
  ] }),
52
57
  /* @__PURE__ */ jsxRuntime.jsx(
53
58
  ProgressBar.ProgressBar,
package/dist/cjs/hooks/useFileUpload.js CHANGED
@@ -20,8 +20,17 @@ const useFileUpload = ({
20
20
  const [isManagerOpen, setIsManagerOpen] = React.useState(false);
21
21
  const onOpen = React.useCallback(() => setIsOpen(true), []);
22
22
  const onClose = React.useCallback(() => setIsOpen(false), []);
23
+ const handleRemoveFile = React.useCallback((index) => {
24
+ setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
25
+ }, []);
26
+ const handleClearFiles = React.useCallback(() => {
27
+ setFiles([]);
28
+ }, []);
23
29
  const openManager = React.useCallback(() => setIsManagerOpen(true), []);
24
- const closeManager = React.useCallback(() => setIsManagerOpen(false), []);
30
+ const closeManager = React.useCallback(() => {
31
+ handleClearFiles();
32
+ setIsManagerOpen(false);
33
+ }, []);
25
34
  const updateFiles = React.useCallback(
26
35
  (prevFiles, newFiles) => {
27
36
  const current = /* @__PURE__ */ new Map();
@@ -89,12 +98,6 @@ const useFileUpload = ({
89
98
  maxSize,
90
99
  onDropRejected: onFileRejected
91
100
  });
92
- const handleRemoveFile = React.useCallback((index) => {
93
- setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
94
- }, []);
95
- const handleClearFiles = React.useCallback(() => {
96
- setFiles([]);
97
- }, []);
98
101
  const isFileLimitReached = !allowMultiple && files.length > 0;
99
102
  return {
100
103
  onOpen,
@@ -107,6 +110,7 @@ const useFileUpload = ({
107
110
  isFileLimitReached
108
111
  },
109
112
  open: isOpen,
113
+ openManager,
110
114
  closeManager,
111
115
  isManagerOpen,
112
116
  files,
package/dist/esm/components/Uploader/Manager.js CHANGED
@@ -1,19 +1,13 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { tv } from 'tailwind-variants';
3
2
  import { createPortal } from 'react-dom';
4
3
  import { File } from './Upload.js';
5
4
  import { Button } from '../Button.js';
6
5
  import { IoMdClose } from 'react-icons/io';
6
+ import { useState } from 'react';
7
+ import { clsx } from 'clsx';
8
+ import { IoArrowUp, IoArrowDown } from 'react-icons/io5';
9
+ import { manager } from '@tecsinapse/cortex-core';
7
10
 
8
- const foldermodal = tv({
9
- base: "fixed rounded-micro p-kilo bg-white shadow-xl flex transition z-modal",
10
- variants: {
11
- open: {
12
- true: "scale-100 visible",
13
- false: "invisible"
14
- }
15
- }
16
- });
17
11
  const Manager = ({
18
12
  open,
19
13
  files,
@@ -21,36 +15,54 @@ const Manager = ({
21
15
  uploadProgressText = "Upload(s) in progress",
22
16
  onClose
23
17
  }) => {
18
+ const [min, setMin] = useState(false);
24
19
  return createPortal(
25
20
  /* @__PURE__ */ jsx(
26
21
  "div",
27
22
  {
28
- className: foldermodal({
29
- className: "h-[350px] w-[400px] bg-white bottom-deca right-deca overflow-hidden",
23
+ className: manager({
24
+ className: "h-auto max-h-[350px] w-[450px] overflow-hidden pt-deca",
30
25
  open
31
26
  }),
32
27
  children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col w-full h-full gap-mili items-center", children: [
33
28
  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between w-full", children: [
34
- /* @__PURE__ */ jsx("div", {}),
35
- /* @__PURE__ */ jsx("h3", { className: "ml-mega", "data-testid": "upload-progress", children: uploadProgressText }),
36
29
  /* @__PURE__ */ jsx(
37
30
  Button,
38
31
  {
39
- variants: { variant: "outline", size: "circle" },
32
+ variants: { variant: "outline", size: "square" },
33
+ onClick: () => setMin((min2) => !min2),
34
+ children: min ? /* @__PURE__ */ jsx(IoArrowUp, {}) : /* @__PURE__ */ jsx(IoArrowDown, {})
35
+ }
36
+ ),
37
+ /* @__PURE__ */ jsx("h3", { "data-testid": "upload-progress", children: uploadProgressText }),
38
+ /* @__PURE__ */ jsx(
39
+ Button,
40
+ {
41
+ variants: { variant: "filled", size: "square" },
40
42
  onClick: onClose,
41
43
  children: /* @__PURE__ */ jsx(IoMdClose, {})
42
44
  }
43
45
  )
44
46
  ] }),
45
- /* @__PURE__ */ jsx("div", { className: "flex flex-col w-full overflow-scroll", children: files.map((file, index) => /* @__PURE__ */ jsx(
46
- File,
47
+ /* @__PURE__ */ jsx(
48
+ "div",
47
49
  {
48
- file,
49
- index,
50
- onDelete
51
- },
52
- file.uid
53
- )) })
50
+ className: clsx(
51
+ "w-full overflow-scroll h-auto max-h-[300px] px-deca",
52
+ { hidden: min, "flex flex-col": !min, "pb-deca": files.length > 3 }
53
+ ),
54
+ children: files.map((file, index) => /* @__PURE__ */ jsx(
55
+ File,
56
+ {
57
+ file,
58
+ index,
59
+ onDelete,
60
+ showDelete: false
61
+ },
62
+ file.uid
63
+ ))
64
+ }
65
+ )
54
66
  ] })
55
67
  }
56
68
  ),
package/dist/esm/components/Uploader/Modal.js CHANGED
@@ -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("div", {}),
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
  {
package/dist/esm/components/Uploader/Upload.js CHANGED
@@ -4,7 +4,12 @@ import { FaRegFileLines } from 'react-icons/fa6';
4
4
  import { MdClose } from 'react-icons/md';
5
5
  import { ProgressBar } from '../ProgressBar/ProgressBar.js';
6
6
 
7
- const File = ({ file, index, onDelete }) => {
7
+ const File = ({
8
+ file,
9
+ index,
10
+ onDelete,
11
+ showDelete = true
12
+ }) => {
8
13
  function statusIntent(status) {
9
14
  switch (status) {
10
15
  case "success":
@@ -34,7 +39,7 @@ const File = ({ file, index, onDelete }) => {
34
39
  ] })
35
40
  ] })
36
41
  ] }),
37
- file.status === "success" && /* @__PURE__ */ jsx(
42
+ file.status === "success" && showDelete ? /* @__PURE__ */ jsx(
38
43
  "button",
39
44
  {
40
45
  onClick: () => onDelete(index),
@@ -45,7 +50,7 @@ const File = ({ file, index, onDelete }) => {
45
50
  }),
46
51
  children: /* @__PURE__ */ jsx(MdClose, { size: 15 })
47
52
  }
48
- )
53
+ ) : null
49
54
  ] }),
50
55
  /* @__PURE__ */ jsx(
51
56
  ProgressBar,
package/dist/esm/hooks/useFileUpload.js CHANGED
@@ -18,8 +18,17 @@ const useFileUpload = ({
18
18
  const [isManagerOpen, setIsManagerOpen] = useState(false);
19
19
  const onOpen = useCallback(() => setIsOpen(true), []);
20
20
  const onClose = useCallback(() => setIsOpen(false), []);
21
+ const handleRemoveFile = useCallback((index) => {
22
+ setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
23
+ }, []);
24
+ const handleClearFiles = useCallback(() => {
25
+ setFiles([]);
26
+ }, []);
21
27
  const openManager = useCallback(() => setIsManagerOpen(true), []);
22
- const closeManager = useCallback(() => setIsManagerOpen(false), []);
28
+ const closeManager = useCallback(() => {
29
+ handleClearFiles();
30
+ setIsManagerOpen(false);
31
+ }, []);
23
32
  const updateFiles = useCallback(
24
33
  (prevFiles, newFiles) => {
25
34
  const current = /* @__PURE__ */ new Map();
@@ -87,12 +96,6 @@ const useFileUpload = ({
87
96
  maxSize,
88
97
  onDropRejected: onFileRejected
89
98
  });
90
- const handleRemoveFile = useCallback((index) => {
91
- setFiles((prevFiles) => prevFiles.filter((_, i) => i !== index));
92
- }, []);
93
- const handleClearFiles = useCallback(() => {
94
- setFiles([]);
95
- }, []);
96
99
  const isFileLimitReached = !allowMultiple && files.length > 0;
97
100
  return {
98
101
  onOpen,
@@ -105,6 +108,7 @@ const useFileUpload = ({
105
108
  isFileLimitReached
106
109
  },
107
110
  open: isOpen,
111
+ openManager,
108
112
  closeManager,
109
113
  isManagerOpen,
110
114
  files,
package/dist/types/components/Uploader/Upload.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { FileProps } from './types';
2
- export declare const File: <T>({ file, index, onDelete }: FileProps<T>) => import("react/jsx-runtime").JSX.Element;
2
+ export declare const File: <T>({ file, index, onDelete, showDelete, }: FileProps<T>) => import("react/jsx-runtime").JSX.Element;
package/dist/types/components/Uploader/types.d.ts CHANGED
@@ -7,6 +7,7 @@ export interface FileProps<T> {
7
7
  file: FileUpload<T>;
8
8
  index: number;
9
9
  onDelete: (index: number) => void;
10
+ showDelete?: boolean;
10
11
  }
11
12
  export interface FilesProps<T> {
12
13
  files: FileUpload<T>[];
package/dist/types/hooks/useFileUpload.d.ts CHANGED
@@ -21,6 +21,7 @@ export declare const useFileUpload: <T>({ accept, onAccept, onFileRejected, maxS
21
21
  onDelete: (index: number) => void;
22
22
  dropzoneProps: UseDropzoneProps;
23
23
  open: boolean;
24
+ openManager: () => void;
24
25
  closeManager: () => void;
25
26
  isManagerOpen: boolean;
26
27
  files: FileUpload<T>[];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@tecsinapse/cortex-react",
3
- "version": "1.15.0-beta.1",
3
+ "version": "1.15.0-beta.3",
4
4
  "description": "React components based in @tecsinapse/cortex-core",
5
5
  "license": "MIT",
6
6
  "main": "dist/esm/index.js",
@@ -20,7 +20,7 @@
20
20
  "dependencies": {
21
21
  "@floating-ui/react": "^0.26.18",
22
22
  "@internationalized/date": "3.7.0",
23
- "@tecsinapse/cortex-core": "1.1.3",
23
+ "@tecsinapse/cortex-core": "1.2.0-beta.1",
24
24
  "clsx": "2.1.1",
25
25
  "currency.js": "2.0.4",
26
26
  "embla-carousel-autoplay": "^8.0.0",
@@ -48,5 +48,5 @@
48
48
  "react-icons": ">=5.2.0",
49
49
  "tailwind": ">=3.3.0"
50
50
  },
51
- "gitHead": "c289efa1599f7a3d08c5e9a8353ec8915cb42b1f"
51
+ "gitHead": "f64f44e66fdbe0bffe1b80120a372473c86ffd69"
52
52
  }