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

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 (10) hide show
  1. package/dist/cjs/components/Uploader/Manager.js +35 -23
  2. package/dist/cjs/components/Uploader/Upload.js +8 -3
  3. package/dist/cjs/hooks/useFileUpload.js +1 -0
  4. package/dist/esm/components/Uploader/Manager.js +35 -23
  5. package/dist/esm/components/Uploader/Upload.js +8 -3
  6. package/dist/esm/hooks/useFileUpload.js +1 -0
  7. package/dist/types/components/Uploader/Upload.d.ts +1 -1
  8. package/dist/types/components/Uploader/types.d.ts +1 -0
  9. package/dist/types/hooks/useFileUpload.d.ts +1 -0
  10. 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/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
@@ -107,6 +107,7 @@ const useFileUpload = ({
107
107
  isFileLimitReached
108
108
  },
109
109
  open: isOpen,
110
+ openManager,
110
111
  closeManager,
111
112
  isManagerOpen,
112
113
  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/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
@@ -105,6 +105,7 @@ const useFileUpload = ({
105
105
  isFileLimitReached
106
106
  },
107
107
  open: isOpen,
108
+ openManager,
108
109
  closeManager,
109
110
  isManagerOpen,
110
111
  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.2",
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.0",
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": "c0dc2570a0b407bd1d03a5b37665751666dfc184"
52
52
  }