siam-ui-utils 2.0.24 → 2.0.25

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 (13) hide show
  1. package/.prettierrc +7 -0
  2. package/eslint.config.js +41 -0
  3. package/index.html +12 -0
  4. package/package.json +62 -59
  5. package/src/App.jsx +71 -0
  6. package/src/archivos-adjuntos/index.jsx +135 -133
  7. package/src/archivos-adjuntos/simple-line-icons.css +778 -0
  8. package/src/assets/css/vendor/bootstrap.min.css +6 -0
  9. package/src/assets/css/vendor/bootstrap.rtl.only.min.css +1428 -0
  10. package/src/index.js +6 -7
  11. package/src/main.jsx +7 -0
  12. package/vite.config.ts +5 -4
  13. package/src/IntlMessages.tsx +0 -11
package/.prettierrc ADDED
@@ -0,0 +1,7 @@
1
+ {
2
+ "singleQuote": true,
3
+ "endOfLine": "auto",
4
+ "tabWidth": 2,
5
+ "semi": true,
6
+ "printWidth": 80
7
+ }
package/eslint.config.js ADDED
@@ -0,0 +1,41 @@
1
+ import js from '@eslint/js'
2
+ import globals from 'globals'
3
+ import react from 'eslint-plugin-react'
4
+ import reactHooks from 'eslint-plugin-react-hooks'
5
+ import reactRefresh from 'eslint-plugin-react-refresh'
6
+
7
+ export default [
8
+ { ignores: ['build'] },
9
+ {
10
+ files: ['**/*.{js,jsx,ts,tsx}'],
11
+ languageOptions: {
12
+ ecmaVersion: 2020,
13
+ globals: globals.browser,
14
+ parserOptions: {
15
+ ecmaVersion: 'latest',
16
+ ecmaFeatures: { jsx: true },
17
+ sourceType: 'module',
18
+ },
19
+ },
20
+ settings: { react: { version: '18.3' } },
21
+ plugins: {
22
+ react,
23
+ 'react-hooks': reactHooks,
24
+ 'react-refresh': reactRefresh,
25
+ },
26
+ rules: {
27
+ ...js.configs.recommended.rules,
28
+ ...react.configs.recommended.rules,
29
+ ...react.configs['jsx-runtime'].rules,
30
+ ...reactHooks.configs.recommended.rules,
31
+ 'react/jsx-no-target-blank': 'off',
32
+ 'react-refresh/only-export-components': [
33
+ 'off',
34
+ { allowConstantExport: true },
35
+ ],
36
+ 'react/prop-types': 'off',
37
+ '@/no-default-export': 'off',
38
+ 'no-unused-vars': 'warn',
39
+ },
40
+ },
41
+ ]
package/index.html ADDED
@@ -0,0 +1,12 @@
1
+ <!doctype html><html lang="en">
2
+ <head>
3
+ <meta charset="UTF-8" />
4
+ <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6
+ <title>Siam - UI - utils</title>
7
+ </head>
8
+ <body>
9
+ <div id="root"></div>
10
+ <script type="module" src="/src/main.jsx"></script>
11
+ </body>
12
+ </html>
package/package.json CHANGED
@@ -1,60 +1,63 @@
1
- { "name": "siam-ui-utils",
2
- "version": "2.0.24",
3
- "keywords": [
4
- "ampf-react",
5
- "ampf-utils",
6
- "siam-ui-utils"
7
- ],
8
- "author": "Ampf Development Team",
9
- "license": "MIT",
10
- "description": "Conjunto de librerias de componentes utiles para AMPF",
11
- "main": "src/index.js",
12
- "browser": "src/index.js",
13
- "types": "index",
14
- "homepage": "https://github.com/ampfgit/siam-ui-utils#readme",
15
- "repository": {
16
- "type": "git",
17
- "url": "https://github.com/ampfgit/siam-ui-utils"
18
- },
19
- "moduleResolution": "nodenext",
20
- "scripts": {
21
- "publish-npm": "npm publish"
22
- },
23
- "dependencies": {
24
- "@types/react-intl": "^3.0.0",
25
- "html5-file-selector": "^2.1.0",
26
- "prop-types": "^15.8.1",
27
- "react": "^18.3.1",
28
- "react-dropzone-uploader": "^2.11.0",
29
- "react-intl": "^6.4.2",
30
- "react-notifications": "^1.7.4",
31
- "react-router": "^6.26.2",
32
- "react-router-dom": "^6.26.2",
33
- "react-select": "^5.8.0",
34
- "reactstrap": "^9.2.2",
35
- "siam-utils": "^1.1.4",
36
- "source-map-loader": "^5.0.0",
37
- "styled-components": "^6.1.12",
38
- "typescript": "^5.5.4"
39
- },
40
- "devDependencies": {
41
- "@testing-library/dom": "^10.4.0",
42
- "@testing-library/jest-dom": "^6.4.8",
43
- "@testing-library/react": "^16.0.0",
44
- "@types/react-router-dom": "^5.3.3",
45
- "@typescript-eslint/parser": "^8.2.0",
46
- "@vitejs/plugin-react": "^4.3.1",
47
- "copyfiles": "^2.4.1",
48
- "eslint": "^8.57.0",
49
- "eslint-config-airbnb": "^19.0.4",
50
- "eslint-config-prettier": "^8.8.0",
51
- "eslint-config-react-app": "^7.0.1",
52
- "eslint-plugin-import": "^2.27.5",
53
- "eslint-plugin-jsx-a11y": "^6.7.1",
54
- "eslint-plugin-prettier": "^4.2.1",
55
- "eslint-plugin-react": "^7.33.0",
56
- "vite": "^5.3.4",
57
- "vite-plugin-eslint": "^1.8.1",
58
- "vitest": "^2.0.5"
59
- }
1
+ {
2
+ "name": "siam-ui-utils",
3
+ "version": "2.0.25",
4
+ "keywords": [
5
+ "ampf-react",
6
+ "ampf-utils",
7
+ "siam-ui-utils"
8
+ ],
9
+ "author": "Ampf Development Team",
10
+ "license": "MIT",
11
+ "description": "Conjunto de librerias de componentes utiles para AMPF",
12
+ "main": "src/index.js",
13
+ "browser": "src/index.js",
14
+ "types": "index",
15
+ "homepage": "https://github.com/ampfgit/siam-ui-utils#readme",
16
+ "repository": {
17
+ "type": "git",
18
+ "url": "https://github.com/ampfgit/siam-ui-utils"
19
+ },
20
+ "moduleResolution": "nodenext",
21
+ "scripts": {
22
+ "start": "vite",
23
+ "publish-npm": "npm publish"
24
+ },
25
+ "dependencies": {
26
+ "@types/react-intl": "^3.0.0",
27
+ "html5-file-selector": "^2.1.0",
28
+ "prop-types": "^15.8.1",
29
+ "react": "^18.3.1",
30
+ "react-dropzone-uploader": "^2.11.0",
31
+ "react-intl": "^6.4.2",
32
+ "react-notifications": "^1.7.4",
33
+ "react-router": "^6.26.2",
34
+ "react-router-dom": "^6.26.2",
35
+ "react-select": "^5.8.0",
36
+ "reactstrap": "^9.2.2",
37
+ "siam-utils": "^1.1.4",
38
+ "source-map-loader": "^5.0.0",
39
+ "styled-components": "^6.1.12",
40
+ "typescript": "^5.5.4",
41
+ "vite-plugin-commonjs": "^0.10.3"
42
+ },
43
+ "devDependencies": {
44
+ "@testing-library/dom": "^10.4.0",
45
+ "@testing-library/jest-dom": "^6.4.8",
46
+ "@testing-library/react": "^16.0.0",
47
+ "@types/react-router-dom": "^5.3.3",
48
+ "@typescript-eslint/parser": "^8.2.0",
49
+ "@vitejs/plugin-react": "^4.3.1",
50
+ "copyfiles": "^2.4.1",
51
+ "eslint": "^8.57.0",
52
+ "eslint-config-airbnb": "^19.0.4",
53
+ "eslint-config-prettier": "^8.8.0",
54
+ "eslint-config-react-app": "^7.0.1",
55
+ "eslint-plugin-import": "^2.27.5",
56
+ "eslint-plugin-jsx-a11y": "^6.7.1",
57
+ "eslint-plugin-prettier": "^4.2.1",
58
+ "eslint-plugin-react": "^7.33.0",
59
+ "vite": "^5.3.4",
60
+ "vite-plugin-eslint": "^1.8.1",
61
+ "vitest": "^2.0.5"
62
+ }
60
63
  }
package/src/App.jsx ADDED
@@ -0,0 +1,71 @@
1
+ import React, { useState } from 'react';
2
+ import {
3
+ Accordion,
4
+ AccordionBody,
5
+ AccordionHeader,
6
+ AccordionItem,
7
+ } from 'reactstrap';
8
+ import { TomarFoto, DropzoneUploader, DropzoneUploaderDniDigital } from './';
9
+ import './assets/css/vendor/bootstrap.min.css';
10
+
11
+ function App() {
12
+ const [open, setOpen] = useState('0');
13
+ const toggle = (id) => {
14
+ if (open === id) {
15
+ setOpen();
16
+ } else {
17
+ setOpen(id);
18
+ }
19
+ };
20
+
21
+ return (
22
+ <div>
23
+ <Accordion open={open} toggle={toggle}>
24
+ <AccordionItem>
25
+ <AccordionHeader targetId="1">Tomar Foto</AccordionHeader>
26
+ <AccordionBody accordionId="1">
27
+ <TomarFoto isMobile={true} />
28
+ <DropzoneUploader
29
+ totalFiles={4}
30
+ onChangeFiles={() => alert('onChange')}
31
+ maxFiles={3}
32
+ nameFileLabel="file"
33
+ />
34
+ </AccordionBody>
35
+ </AccordionItem>
36
+ <AccordionItem>
37
+ <AccordionHeader targetId="2">
38
+ DropzoneUploader Firma Digital
39
+ </AccordionHeader>
40
+ <AccordionBody accordionId="2">
41
+ <DropzoneUploader
42
+ totalFiles={0}
43
+ onChangeFiles={() => {
44
+ console.log('onChange');
45
+ }}
46
+ maxFiles={7}
47
+ nameFileLabel="Subir archivos"
48
+ capture="environment"
49
+ />
50
+ </AccordionBody>
51
+ </AccordionItem>
52
+ <AccordionItem>
53
+ <AccordionHeader targetId="3">
54
+ DropzoneUploader DNI Digital
55
+ </AccordionHeader>
56
+ <AccordionBody accordionId="3">
57
+ <DropzoneUploaderDniDigital
58
+ totalFiles={0}
59
+ maxFiles={1}
60
+ onChangeFiles={() => {
61
+ console.log('onChange');
62
+ }}
63
+ />
64
+ </AccordionBody>
65
+ </AccordionItem>
66
+ </Accordion>
67
+ </div>
68
+ );
69
+ }
70
+
71
+ export default App;
package/src/archivos-adjuntos/index.jsx CHANGED
@@ -1,139 +1,141 @@
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, pdfImage } from '../iconos'
8
- 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, pdfImage } from '../iconos';
8
+ import './dropzone-uploader.css';
9
+ import './simple-line-icons.css';
9
10
 
10
- const maxSize = 7
11
+ const maxSize = 7;
11
12
  export const DropzoneUploader = ({
12
- onChangeFiles,
13
- totalFiles,
14
- maxFiles = 3,
15
- accept = 'image/*, application/pdf',
16
- capture = null,
17
- nameFileLabel = 'Subir archivos',
18
- classNames=""
13
+ onChangeFiles,
14
+ totalFiles,
15
+ maxFiles = 3,
16
+ accept = 'image/*, application/pdf',
17
+ capture = null,
18
+ nameFileLabel = 'Subir archivos',
19
+ classNames = '',
20
+ maxFileSize = maxSize,
19
21
  }) => {
20
- const [files, setFiles] = useState([])
21
- const [totalFilesDU, setTotalFilesDU] = useState(totalFiles)
22
- const handleChangeStatus = ({ file }, status) => {
23
- if (status == 'done') {
24
- const filesTemp = files
25
- filesTemp.push(file)
26
- setFiles(filesTemp)
27
- onChangeFiles(files)
28
- setTotalFilesDU(files.length)
29
- } else if (status == 'removed') {
30
- const filesTemp = files
31
- const index = files.indexOf(file)
32
- if (index > -1) {
33
- filesTemp.splice(index, 1)
34
- }
35
- setFiles(filesTemp)
36
- onChangeFiles(files)
37
- setTotalFilesDU(files.length)
38
- }
39
- }
40
- const getFilesFromEvent = (e) => {
41
- return new Promise((resolve) => {
42
- getDroppedOrSelectedFiles(e).then((chosenFiles) => {
43
- resolve(chosenFiles.map((f) => f.fileObject))
44
- })
45
- })
46
- }
47
- const CustomPreview = ({ fileWithMeta }) => {
48
- const { meta, remove } = fileWithMeta
49
- if (meta.size / (1024 * 1024) > maxSize) {
50
- NotificationManager.error(
51
- 'El archivo supera el tamaño máximo',
52
- 'Advertencia'
53
- )
54
- remove()
55
- }
56
- return (
57
- <div className='dropzone-upload-previewContainer'>
58
- {meta.type === 'application/pdf' ? (
59
- <>
60
- <IconButtonSvg
61
- className='form-control flex'
62
- svg={pdfImage}
63
- svgOver={pdfImage}
64
- height='1.6rem'
65
- width='1.6rem'
66
- title={meta.name}
67
- />
68
- <p>
69
- {meta.name.length > 17
70
- ? meta.name.substring(0, 17) + '...'
71
- : meta.name}
72
- </p>
73
- </>
74
- ) : (
75
- <>
76
- <img
77
- className='dropzone-upload-previewImage'
78
- src={meta.previewUrl}
79
- alt={meta.name}
80
- />
81
- <p>
82
- {meta.name.length > 17
83
- ? meta.name.substring(0, 17) + '...'
84
- : meta.name}
85
- </p>
86
- </>
87
- )}
88
- <p>{(meta.size / 1024).toFixed(2)} .Kb</p>
89
- <button
90
- onClick={remove}
91
- className='dropzone-upload-delete-btn simple-icon-trash'
92
- ></button>
93
- </div>
94
- )
95
- }
96
-
97
- const Input = ({ accept, onFiles, getFilesFromEvent }) => {
98
- const text =
99
- totalFilesDU > 0
100
- ? `${maxFiles - totalFilesDU} archivo/s más`
101
- : nameFileLabel
102
- return (
103
- <label className='dropzone-upload-button'>
104
- {text}
105
- <input
106
- style={{ display: 'none' }}
107
- type='file'
108
- accept={accept}
109
- capture={capture}
110
- multiple
111
- onChange={(e) => {
112
- getFilesFromEvent(e).then((chosenFiles) => {
113
- onFiles(chosenFiles)
114
- })
115
- }}
116
- />
117
- </label>
118
- )
119
- }
120
- useEffect(() => {
121
- setTotalFilesDU(totalFiles)
122
- }, [totalFiles])
123
-
22
+ const [files, setFiles] = useState([]);
23
+ const [totalFilesDU, setTotalFilesDU] = useState(totalFiles);
24
+ const handleChangeStatus = ({ file }, status) => {
25
+ if (status == 'done') {
26
+ const filesTemp = files;
27
+ filesTemp.push(file);
28
+ setFiles(filesTemp);
29
+ onChangeFiles(files);
30
+ setTotalFilesDU(files.length);
31
+ } else if (status == 'removed') {
32
+ const filesTemp = files;
33
+ const index = files.indexOf(file);
34
+ if (index > -1) {
35
+ filesTemp.splice(index, 1);
36
+ }
37
+ setFiles(filesTemp);
38
+ onChangeFiles(files);
39
+ setTotalFilesDU(files.length);
40
+ }
41
+ };
42
+ const getFilesFromEvent = (e) => {
43
+ return new Promise((resolve) => {
44
+ getDroppedOrSelectedFiles(e).then((chosenFiles) => {
45
+ resolve(chosenFiles.map((f) => f.fileObject));
46
+ });
47
+ });
48
+ };
49
+ const CustomPreview = ({ fileWithMeta }) => {
50
+ const { meta, remove } = fileWithMeta;
51
+ if (meta.size / (1024 * 1024) > maxFileSize) {
52
+ NotificationManager.error(
53
+ 'El archivo supera el tamaño máximo',
54
+ 'Advertencia',
55
+ );
56
+ remove();
57
+ }
124
58
  return (
125
- <div className={`${classNames}`}>
126
- <Dropzone
127
- disableUpload={false}
128
- maxFiles={totalFilesDU < maxFiles ? maxFiles : 0}
129
- maxSize={maxSize} // en megas
130
- InputComponent={Input}
131
- PreviewComponent={CustomPreview}
132
- classNames={{ dropzone: 'dropzone-upload-frame'}}
133
- onChangeStatus={handleChangeStatus}
134
- getFilesFromEvent={getFilesFromEvent}
135
- accept={accept}
59
+ <div className="dropzone-upload-previewContainer">
60
+ {meta.type === 'application/pdf' ? (
61
+ <>
62
+ <IconButtonSvg
63
+ className="form-control flex"
64
+ svg={pdfImage}
65
+ svgOver={pdfImage}
66
+ height="1.6rem"
67
+ width="1.6rem"
68
+ title={meta.name}
69
+ />
70
+ <p>
71
+ {meta.name.length > 17
72
+ ? meta.name.substring(0, 17) + '...'
73
+ : meta.name}
74
+ </p>
75
+ </>
76
+ ) : (
77
+ <>
78
+ <img
79
+ className="dropzone-upload-previewImage"
80
+ src={meta.previewUrl}
81
+ alt={meta.name}
136
82
  />
137
- </div>
138
- )
139
- }
83
+ <p>
84
+ {meta.name.length > 17
85
+ ? meta.name.substring(0, 17) + '...'
86
+ : meta.name}
87
+ </p>
88
+ </>
89
+ )}
90
+ <p>{(meta.size / 1024).toFixed(2)} .Kb</p>
91
+ <button
92
+ onClick={remove}
93
+ className="dropzone-upload-delete-btn simple-icon-trash"
94
+ ></button>
95
+ </div>
96
+ );
97
+ };
98
+
99
+ const Input = ({ accept, onFiles, getFilesFromEvent }) => {
100
+ const text =
101
+ totalFilesDU > 0
102
+ ? `${maxFiles - totalFilesDU} archivo/s más`
103
+ : nameFileLabel;
104
+ return (
105
+ <label className="dropzone-upload-button">
106
+ {text}
107
+ <input
108
+ style={{ display: 'none' }}
109
+ type="file"
110
+ accept={accept}
111
+ capture={capture}
112
+ multiple
113
+ onChange={(e) => {
114
+ getFilesFromEvent(e).then((chosenFiles) => {
115
+ onFiles(chosenFiles);
116
+ });
117
+ }}
118
+ />
119
+ </label>
120
+ );
121
+ };
122
+ useEffect(() => {
123
+ setTotalFilesDU(totalFiles);
124
+ }, [totalFiles]);
125
+
126
+ return (
127
+ <div className={`${classNames}`}>
128
+ <Dropzone
129
+ disableUpload={false}
130
+ maxFiles={totalFilesDU < maxFiles ? maxFiles : 0}
131
+ maxSize={maxFileSize} // en megas
132
+ InputComponent={Input}
133
+ PreviewComponent={CustomPreview}
134
+ classNames={{ dropzone: 'dropzone-upload-frame' }}
135
+ onChangeStatus={handleChangeStatus}
136
+ getFilesFromEvent={getFilesFromEvent}
137
+ accept={accept}
138
+ />
139
+ </div>
140
+ );
141
+ };