siam-ui-utils 3.2.4 → 3.2.5
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.
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { getDroppedOrSelectedFiles } from "html5-file-selector";
|
|
3
|
-
import {
|
|
3
|
+
import { useRef } from "react";
|
|
4
4
|
import { useTheme } from "styled-components";
|
|
5
5
|
import { Button } from "siam-ui";
|
|
6
6
|
import { Dropzone } from "../../dropzone/index.js";
|
|
@@ -23,7 +23,7 @@ const DropzoneUploaderStyled = ({
|
|
|
23
23
|
const primaryColor = theme?.colors?.primary?.base ?? "#016E6C";
|
|
24
24
|
const borderColor = theme?.colors?.neutral?.borderLight ?? "#D6D6D6";
|
|
25
25
|
const surfaceHover = theme?.colors?.primary?.surfaceHover ?? "#E6F1F1";
|
|
26
|
-
const
|
|
26
|
+
const filesRef = useRef([]);
|
|
27
27
|
const handleChangeStatus = ({ file, remove }, status) => {
|
|
28
28
|
if (status === "done") {
|
|
29
29
|
if (file.size / (1024 * 1024) > maxSize) {
|
|
@@ -31,17 +31,11 @@ const DropzoneUploaderStyled = ({
|
|
|
31
31
|
remove();
|
|
32
32
|
return;
|
|
33
33
|
}
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
onChangeFiles(next);
|
|
37
|
-
return next;
|
|
38
|
-
});
|
|
34
|
+
filesRef.current = [...filesRef.current, file];
|
|
35
|
+
onChangeFiles(filesRef.current);
|
|
39
36
|
} else if (status === "removed") {
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
onChangeFiles(next);
|
|
43
|
-
return next;
|
|
44
|
-
});
|
|
37
|
+
filesRef.current = filesRef.current.filter((f) => f !== file);
|
|
38
|
+
onChangeFiles(filesRef.current);
|
|
45
39
|
}
|
|
46
40
|
};
|
|
47
41
|
const getFilesFromEvent = (e) => {
|
|
@@ -100,8 +94,7 @@ const DropzoneUploaderStyled = ({
|
|
|
100
94
|
};
|
|
101
95
|
const fileInputRef = useRef(null);
|
|
102
96
|
const InputComponent = ({ accept: accept2, onFiles, getFilesFromEvent: getFilesFromEvent2 }) => {
|
|
103
|
-
const
|
|
104
|
-
const text = currentCount > 0 ? `${maxFiles - currentCount} archivos más` : label;
|
|
97
|
+
const text = totalFiles > 0 ? `${maxFiles - totalFiles} archivos más` : label;
|
|
105
98
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
106
99
|
/* @__PURE__ */ jsx(
|
|
107
100
|
Button,
|
|
@@ -140,7 +133,7 @@ const DropzoneUploaderStyled = ({
|
|
|
140
133
|
Dropzone,
|
|
141
134
|
{
|
|
142
135
|
disableUpload: false,
|
|
143
|
-
maxFiles: totalFiles
|
|
136
|
+
maxFiles: totalFiles < maxFiles ? maxFiles : 0,
|
|
144
137
|
maxSize,
|
|
145
138
|
InputComponent,
|
|
146
139
|
PreviewComponent: CustomPreview,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/dropzone-uploader/styled/index.jsx"],"sourcesContent":["import { getDroppedOrSelectedFiles } from 'html5-file-selector';\nimport { useRef
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/dropzone-uploader/styled/index.jsx"],"sourcesContent":["import { getDroppedOrSelectedFiles } from 'html5-file-selector';\nimport { useRef } from 'react';\nimport { useTheme } from 'styled-components';\nimport { Button } from 'siam-ui';\nimport Dropzone from '../../dropzone';\nimport { IconButtonSvg, pdfImage } from '../../iconos';\nimport './index.css';\n\nexport const DropzoneUploaderStyled = ({\n accept = 'image/*, application/pdf',\n classNames = '',\n onChangeFiles,\n totalFiles,\n label = 'Cargar Dni',\n maxFiles = 2,\n maxSize = 2,\n onMaxFileSizeError = (fileName) => {\n alert(`El archivo \"${fileName}\" supera el tamaño máximo de ${maxSize} MB`);\n },\n}) => {\n const theme = useTheme();\n const primaryColor = theme?.colors?.primary?.base ?? '#016E6C';\n const borderColor = theme?.colors?.neutral?.borderLight ?? '#D6D6D6';\n const surfaceHover = theme?.colors?.primary?.surfaceHover ?? '#E6F1F1';\n\n const filesRef = useRef([]);\n\n const handleChangeStatus = ({ file, remove }, status) => {\n if (status === 'done') {\n if (file.size / (1024 * 1024) > maxSize) {\n onMaxFileSizeError(file.name);\n remove();\n return;\n }\n filesRef.current = [...filesRef.current, file];\n onChangeFiles(filesRef.current);\n } else if (status === 'removed') {\n filesRef.current = filesRef.current.filter((f) => f !== file);\n onChangeFiles(filesRef.current);\n }\n };\n\n const getFilesFromEvent = (e) => {\n return new Promise((resolve) => {\n getDroppedOrSelectedFiles(e).then((chosenFiles) => {\n resolve(chosenFiles.map((f) => f.fileObject));\n });\n });\n };\n\n const CustomPreview = ({ fileWithMeta }) => {\n const { meta, remove } = fileWithMeta;\n return (\n <div\n className=\"dropzone-upload-previewContainer\"\n style={{ width: '100%', display: 'flex', alignItems: 'center' }}\n >\n {meta.type === 'application/pdf' ? (\n <>\n <IconButtonSvg\n className=\"form-control flex\"\n svg={pdfImage}\n svgOver={pdfImage}\n height=\"1.6rem\"\n width=\"1.6rem\"\n title={meta.name}\n />\n <p style={{ paddingRight: '1rem' }}>\n {meta.name.length > 17 ? meta.name.substring(0, 17) + '...' : meta.name}\n </p>\n </>\n ) : (\n <>\n <img\n className=\"dropzone-upload-previewImage mt-1\"\n src={meta.previewUrl}\n alt={meta.name}\n style={{ width: '110px', height: '110px', objectFit: 'cover', marginRight: '0.5rem' }}\n />\n <div className=\"dropzone-upload-file-name-container\">\n <p className=\"dropzone-upload-file-name\" title={meta.name}>\n {meta.name}\n </p>\n </div>\n </>\n )}\n <Button\n $variant=\"transparent\"\n $size=\"small\"\n onClick={remove}\n style={{ color: theme?.colors?.error?.base ?? '#FE4727', padding: '0 4px' }}\n >\n <TrashIcon color={theme?.colors?.error?.base ?? '#FE4727'} />\n </Button>\n </div>\n );\n };\n\n const fileInputRef = useRef(null);\n\n const InputComponent = ({ accept, onFiles, getFilesFromEvent }) => {\n const text = totalFiles > 0 ? `${maxFiles - totalFiles} archivos más` : label;\n return (\n <>\n <Button\n $variant=\"outline\"\n style={{ width: '100%' }}\n onClick={() => fileInputRef.current?.click()}\n >\n {text}\n </Button>\n <input\n ref={fileInputRef}\n style={{ display: 'none' }}\n type=\"file\"\n accept={accept}\n multiple\n onChange={(e) => {\n getFilesFromEvent(e).then((chosenFiles) => onFiles(chosenFiles));\n }}\n />\n </>\n );\n };\n\n return (\n <div\n className={classNames}\n style={{\n '--dropzone-primary': primaryColor,\n '--dropzone-border': borderColor,\n '--dropzone-active-bg': surfaceHover,\n }}\n >\n <Dropzone\n disableUpload={false}\n maxFiles={totalFiles < maxFiles ? maxFiles : 0}\n maxSize={maxSize}\n InputComponent={InputComponent}\n PreviewComponent={CustomPreview}\n classNames={{ dropzone: 'dropzone-upload-frame' }}\n onChangeStatus={handleChangeStatus}\n getFilesFromEvent={getFilesFromEvent}\n accept={accept}\n />\n </div>\n );\n};\n\nconst TrashIcon = ({ color }) => (\n <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke={color} strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\">\n <polyline points=\"3 6 5 6 21 6\" />\n <path d=\"M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6\" />\n <path d=\"M10 11v6M14 11v6\" />\n <path d=\"M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2\" />\n </svg>\n);\n\nexport default DropzoneUploaderStyled;\n"],"names":["IconButtonSvg","accept","getFilesFromEvent"],"mappings":"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"}
|