siam-ui-utils 2.1.1 → 2.1.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 (2) hide show
  1. package/package.json +1 -1
  2. package/src/dropzone-uploader/index.jsx +144 -132
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "siam-ui-utils",
3
- "version": "2.1.1",
3
+ "version": "2.1.2",
4
4
  "keywords": [
5
5
  "ampf-react",
6
6
  "ampf-utils",
package/src/dropzone-uploader/index.jsx CHANGED
@@ -1,138 +1,150 @@
1
1
  /* eslint-disable react/prop-types */
2
- import React, { useEffect, useState } from 'react'
3
- import { getDroppedOrSelectedFiles } from 'html5-file-selector'
4
- import Dropzone from 'react-dropzone-uploader'
5
- import { NotificationManager } from 'react-notifications'
6
- import 'react-dropzone-uploader/dist/styles.css'
7
- import IconButtonSvg from '../iconos/icon-button-svg'
8
- import { pdfImage } from '../constants-svg'
9
- import "./dropzone-uploader.css"
2
+ import React, { useEffect, useState } from 'react';
3
+ import { getDroppedOrSelectedFiles } from 'html5-file-selector';
4
+ import Dropzone from 'react-dropzone-uploader';
5
+ import { NotificationManager } from 'react-notifications';
6
+ import 'react-dropzone-uploader/dist/styles.css';
7
+ import IconButtonSvg from '../iconos/icon-button-svg';
8
+ import { pdfImage } from '../constants-svg';
9
+ import './dropzone-uploader.css';
10
10
 
11
- const maxSize = 7 //en MB
11
+ console.log('dropzone1 :>> ');
12
+
13
+ const maxSize = 7; //en MB
12
14
  export const DropzoneUploader = ({
13
- onChangeFiles,
14
- totalFiles,
15
- maxFiles = 3,
16
- accept = 'image/*, application/pdf',
17
- capture = null,
18
- nameFileLabel = 'Subir archivos',
19
- maxFileSize=maxSize
15
+ onChangeFiles,
16
+ totalFiles,
17
+ maxFiles = 3,
18
+ accept = 'image/*, application/pdf',
19
+ capture = null,
20
+ nameFileLabel = 'Subir archivos',
21
+ maxFileSize = maxSize,
20
22
  }) => {
21
- const [files, setFiles] = useState([])
22
- const [totalFilesDU, setTotalFilesDU] = useState(totalFiles)
23
- const handleChangeStatus = ({ file }, status) => {
24
- if (status == 'done') {
25
- const filesTemp = files
26
- filesTemp.push(file)
27
- setFiles(filesTemp)
28
- onChangeFiles(files)
29
- setTotalFilesDU(files.length)
30
- } else if (status == 'removed') {
31
- const filesTemp = files
32
- const index = files.indexOf(file)
33
- if (index > -1) {
34
- filesTemp.splice(index, 1)
35
- }
36
- setFiles(filesTemp)
37
- onChangeFiles(files)
38
- setTotalFilesDU(files.length)
39
- }
40
- }
41
- const getFilesFromEvent = (e) => {
42
- return new Promise((resolve) => {
43
- getDroppedOrSelectedFiles(e).then((chosenFiles) => {
44
- resolve(chosenFiles.map((f) => f.fileObject))
45
- })
46
- })
47
- }
48
- const CustomPreview = ({ fileWithMeta }) => {
49
- const { meta, remove } = fileWithMeta
50
- if (meta.size / (1024 * 1024) > maxFileSize) {
51
- NotificationManager.error(
52
- 'El archivo supera el tamaño máximo',
53
- 'Advertencia'
54
- )
55
- remove()
56
- }
57
- return (
58
- <div className='dropzone-upload-previewContainer'>
59
- {meta.type === 'application/pdf' ? (
60
- <>
61
- <IconButtonSvg
62
- className='form-control flex'
63
- svg={pdfImage}
64
- svgOver={pdfImage}
65
- height='1.6rem'
66
- width='1.6rem'
67
- title={meta.name}
68
- />
69
- <p>
70
- {meta.name.length > 17
71
- ? meta.name.substring(0, 17) + '...'
72
- : meta.name}
73
- </p>
74
- </>
75
- ) : (
76
- <>
77
- <img
78
- className='dropzone-upload-previewImage'
79
- src={meta.previewUrl}
80
- alt={meta.name}
81
- />
82
- <p>
83
- {meta.name.length > 17
84
- ? meta.name.substring(0, 17) + '...'
85
- : meta.name}
86
- </p>
87
- </>
88
- )}
89
- <p>{(meta.size / 1024).toFixed(2)} .Kb</p>
90
- <button
91
- onClick={remove}
92
- className='dropzone-upload-delete-btn simple-icon-trash'
93
- ></button>
94
- </div>
95
- )
96
- }
23
+ console.log('dropzone2 :>> ');
24
+
25
+ const [files, setFiles] = useState([]);
26
+ const [totalFilesDU, setTotalFilesDU] = useState(totalFiles);
27
+ const handleChangeStatus = ({ file }, status) => {
28
+ if (status == 'done') {
29
+ const filesTemp = files;
30
+ filesTemp.push(file);
31
+ setFiles(filesTemp);
32
+ onChangeFiles(files);
33
+ setTotalFilesDU(files.length);
34
+ } else if (status == 'removed') {
35
+ const filesTemp = files;
36
+ const index = files.indexOf(file);
37
+ if (index > -1) {
38
+ filesTemp.splice(index, 1);
39
+ }
40
+ setFiles(filesTemp);
41
+ onChangeFiles(files);
42
+ setTotalFilesDU(files.length);
43
+ }
44
+ };
45
+ const getFilesFromEvent = (e) => {
46
+ console.log('dropzone3 :>> ');
47
+
48
+ return new Promise((resolve) => {
49
+ getDroppedOrSelectedFiles(e).then((chosenFiles) => {
50
+ resolve(chosenFiles.map((f) => f.fileObject));
51
+ });
52
+ });
53
+ };
54
+ const CustomPreview = ({ fileWithMeta }) => {
55
+ console.log('dropzone4 :>> ');
56
+
57
+ const { meta, remove } = fileWithMeta;
58
+ if (meta.size / (1024 * 1024) > maxFileSize) {
59
+ NotificationManager.error(
60
+ 'El archivo supera el tamaño máximo',
61
+ 'Advertencia',
62
+ );
63
+ remove();
64
+ }
65
+ return (
66
+ <div className="dropzone-upload-previewContainer">
67
+ {meta.type === 'application/pdf' ? (
68
+ <>
69
+ <IconButtonSvg
70
+ className="form-control flex"
71
+ svg={pdfImage}
72
+ svgOver={pdfImage}
73
+ height="1.6rem"
74
+ width="1.6rem"
75
+ title={meta.name}
76
+ />
77
+ <p>
78
+ {meta.name.length > 17
79
+ ? meta.name.substring(0, 17) + '...'
80
+ : meta.name}
81
+ </p>
82
+ </>
83
+ ) : (
84
+ <>
85
+ <img
86
+ className="dropzone-upload-previewImage"
87
+ src={meta.previewUrl}
88
+ alt={meta.name}
89
+ />
90
+ <p>
91
+ {meta.name.length > 17
92
+ ? meta.name.substring(0, 17) + '...'
93
+ : meta.name}
94
+ </p>
95
+ </>
96
+ )}
97
+ <p>{(meta.size / 1024).toFixed(2)} .Kb</p>
98
+ <button
99
+ onClick={remove}
100
+ className="dropzone-upload-delete-btn simple-icon-trash"
101
+ ></button>
102
+ </div>
103
+ );
104
+ };
105
+
106
+ const Input = ({ accept, onFiles, getFilesFromEvent }) => {
107
+ console.log('dropzone4 :>> ');
108
+
109
+ const text =
110
+ totalFilesDU > 0
111
+ ? `${maxFiles - totalFilesDU} archivo/s más`
112
+ : nameFileLabel;
113
+ return (
114
+ <label className="dropzone-upload-button">
115
+ {text}
116
+ <input
117
+ style={{ display: 'none' }}
118
+ type="file"
119
+ accept={accept}
120
+ capture={capture}
121
+ multiple
122
+ onChange={(e) => {
123
+ getFilesFromEvent(e).then((chosenFiles) => {
124
+ onFiles(chosenFiles);
125
+ });
126
+ }}
127
+ />
128
+ </label>
129
+ );
130
+ };
131
+ useEffect(() => {
132
+ setTotalFilesDU(totalFiles);
133
+ }, [totalFiles]);
97
134
 
98
- const Input = ({ accept, onFiles, getFilesFromEvent }) => {
99
- const text =
100
- totalFilesDU > 0
101
- ? `${maxFiles - totalFilesDU} archivo/s más`
102
- : nameFileLabel
103
- return (
104
- <label className='dropzone-upload-button'>
105
- {text}
106
- <input
107
- style={{ display: 'none' }}
108
- type='file'
109
- accept={accept}
110
- capture={capture}
111
- multiple
112
- onChange={(e) => {
113
- getFilesFromEvent(e).then((chosenFiles) => {
114
- onFiles(chosenFiles)
115
- })
116
- }}
117
- />
118
- </label>
119
- )
120
- }
121
- useEffect(() => {
122
- setTotalFilesDU(totalFiles)
123
- }, [totalFiles])
135
+ console.log('dropzone5 :>> ');
124
136
 
125
- return (
126
- <Dropzone
127
- disableUpload={false}
128
- maxFiles={totalFilesDU < maxFiles ? maxFiles : 0}
129
- maxSize={maxFileSize} // en megas
130
- InputComponent={Input}
131
- PreviewComponent={CustomPreview}
132
- classNames={{ dropzone: 'dropzone-upload-frame' }}
133
- onChangeStatus={handleChangeStatus}
134
- getFilesFromEvent={getFilesFromEvent}
135
- accept={accept}
136
- />
137
- )
138
- }
137
+ return (
138
+ <Dropzone
139
+ disableUpload={false}
140
+ maxFiles={totalFilesDU < maxFiles ? maxFiles : 0}
141
+ maxSize={maxFileSize} // en megas
142
+ InputComponent={Input}
143
+ PreviewComponent={CustomPreview}
144
+ classNames={{ dropzone: 'dropzone-upload-frame' }}
145
+ onChangeStatus={handleChangeStatus}
146
+ getFilesFromEvent={getFilesFromEvent}
147
+ accept={accept}
148
+ />
149
+ );
150
+ };