siam-ui-utils 2.0.1 → 2.0.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.
- package/index.d.ts +65 -60
- package/package.json +59 -57
- package/src/archivos-adjuntos/index.jsx +134 -0
- package/src/assets/img/take-photo.png +0 -0
- package/src/constants.js +7 -0
- package/src/index.js +7 -5
- package/src/tomar-foto/index.jsx +65 -0
package/index.d.ts
CHANGED
|
@@ -1,68 +1,73 @@
|
|
|
1
1
|
declare module "siam-ui-utils" {
|
|
2
|
-
|
|
3
|
-
|
|
2
|
+
//BRIDGES
|
|
3
|
+
export function withRouter(props);
|
|
4
4
|
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
5
|
+
//CUSTOMBOOSTRAP
|
|
6
|
+
export function Colxx(props);
|
|
7
|
+
export function Separator(props);
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
|
|
9
|
+
//CUSTOMSELECTINPUT
|
|
10
|
+
export function CustomSelectInput(props);
|
|
11
11
|
|
|
12
|
-
|
|
13
|
-
|
|
12
|
+
//DROPZONEUploader
|
|
13
|
+
export function DropzoneUploader(props);
|
|
14
14
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
export function AsesoriaBurbujaButton(props);
|
|
18
|
-
export function AsesoriaBurbujaIcon (props);
|
|
19
|
-
export function AtencionPresencial(props);
|
|
20
|
-
export function AtencionTelefonica(props);
|
|
21
|
-
export function AtencionTurnoTelefonico(props);
|
|
22
|
-
export function AtencionVirtual(props);
|
|
23
|
-
export function BibliotecaBurbujaButton(props);
|
|
24
|
-
export function BibliotecaBurbujaIcon(props);
|
|
25
|
-
export function CancelarTurnoIcon(props);
|
|
26
|
-
export function CodigoVerificacionIcon(props);
|
|
27
|
-
export const passwordEyeSvg;
|
|
28
|
-
export const passwordEyeOpenSvg;
|
|
29
|
-
export const contactoBarraSup;
|
|
30
|
-
export const pagosMenuLateral;
|
|
31
|
-
export const delegacionMenuLateral;
|
|
32
|
-
export const delegacionesVerde;
|
|
33
|
-
export const telefonoCeleste;
|
|
34
|
-
export const mailRojo;
|
|
35
|
-
export const whatAppIcon;
|
|
36
|
-
export const telefonoEmergencia;
|
|
37
|
-
export const telefonoConsulta;
|
|
38
|
-
export const telefonoExequial;
|
|
39
|
-
export const telefonoSalud;
|
|
40
|
-
export const descarga;
|
|
41
|
-
export const descargaOver;
|
|
42
|
-
export const anularAyuda;
|
|
43
|
-
export const continuar;
|
|
44
|
-
export const pdfImage;
|
|
45
|
-
export function CursoAutogestionadoColor(props);
|
|
46
|
-
export function CursoAutogestionado(props);
|
|
47
|
-
export function CursoBurbujaButton(props);
|
|
48
|
-
export function CursoBurbujaIcon(props);
|
|
49
|
-
export function CursoPresencialColor(props);
|
|
50
|
-
export function CursoPresencial(props);
|
|
51
|
-
export function CursoVirtualColor(props);
|
|
52
|
-
export function CursoVirtual(props);
|
|
53
|
-
export function DelegacionesIcon(props);
|
|
54
|
-
export function ForgotDniIcon(props);
|
|
55
|
-
export function ForgotPasswordIcon(props);
|
|
56
|
-
export function IconButtonSvg(props);
|
|
57
|
-
export function LabelTimer(props);
|
|
58
|
-
export function LapizActContactoPerfilButton(props);
|
|
59
|
-
export function Icon(props);
|
|
60
|
-
export function UserIcon(props);
|
|
61
|
-
export function VerificarSinVerificarIcon(props);
|
|
62
|
-
export function VerificarVerificadoIcon(props);
|
|
63
|
-
export function WhatsappIconButton(props);
|
|
15
|
+
//INTLMESSAGES
|
|
16
|
+
export function IntlMessages(props);
|
|
64
17
|
|
|
65
|
-
|
|
66
|
-
|
|
18
|
+
//ICONOS
|
|
19
|
+
export function AnularAyudaIcon(props);
|
|
20
|
+
export function AsesoriaBurbujaButton(props);
|
|
21
|
+
export function AsesoriaBurbujaIcon(props);
|
|
22
|
+
export function AtencionPresencial(props);
|
|
23
|
+
export function AtencionTelefonica(props);
|
|
24
|
+
export function AtencionTurnoTelefonico(props);
|
|
25
|
+
export function AtencionVirtual(props);
|
|
26
|
+
export function BibliotecaBurbujaButton(props);
|
|
27
|
+
export function BibliotecaBurbujaIcon(props);
|
|
28
|
+
export function CancelarTurnoIcon(props);
|
|
29
|
+
export function CodigoVerificacionIcon(props);
|
|
30
|
+
export const passwordEyeSvg;
|
|
31
|
+
export const passwordEyeOpenSvg;
|
|
32
|
+
export const contactoBarraSup;
|
|
33
|
+
export const pagosMenuLateral;
|
|
34
|
+
export const delegacionMenuLateral;
|
|
35
|
+
export const delegacionesVerde;
|
|
36
|
+
export const telefonoCeleste;
|
|
37
|
+
export const mailRojo;
|
|
38
|
+
export const whatAppIcon;
|
|
39
|
+
export const telefonoEmergencia;
|
|
40
|
+
export const telefonoConsulta;
|
|
41
|
+
export const telefonoExequial;
|
|
42
|
+
export const telefonoSalud;
|
|
43
|
+
export const descarga;
|
|
44
|
+
export const descargaOver;
|
|
45
|
+
export const anularAyuda;
|
|
46
|
+
export const continuar;
|
|
47
|
+
export const pdfImage;
|
|
48
|
+
export function CursoAutogestionadoColor(props);
|
|
49
|
+
export function CursoAutogestionado(props);
|
|
50
|
+
export function CursoBurbujaButton(props);
|
|
51
|
+
export function CursoBurbujaIcon(props);
|
|
52
|
+
export function CursoPresencialColor(props);
|
|
53
|
+
export function CursoPresencial(props);
|
|
54
|
+
export function CursoVirtualColor(props);
|
|
55
|
+
export function CursoVirtual(props);
|
|
56
|
+
export function DelegacionesIcon(props);
|
|
57
|
+
export function ForgotDniIcon(props);
|
|
58
|
+
export function ForgotPasswordIcon(props);
|
|
59
|
+
export function IconButtonSvg(props);
|
|
60
|
+
export function LabelTimer(props);
|
|
61
|
+
export function LapizActContactoPerfilButton(props);
|
|
62
|
+
export function Icon(props);
|
|
63
|
+
export function UserIcon(props);
|
|
64
|
+
export function VerificarSinVerificarIcon(props);
|
|
65
|
+
export function VerificarVerificadoIcon(props);
|
|
66
|
+
export function WhatsappIconButton(props);
|
|
67
67
|
|
|
68
|
+
//ICONOS/USER
|
|
69
|
+
export function UserIcon(props);
|
|
70
|
+
|
|
71
|
+
//TOMAR FOTO
|
|
72
|
+
export function TomarFoto(props);
|
|
68
73
|
}
|
package/package.json
CHANGED
|
@@ -1,58 +1,60 @@
|
|
|
1
|
-
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
1
|
+
{ "name": "siam-ui-utils",
|
|
2
|
+
"version": "2.0.3",
|
|
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
|
+
}
|
|
58
60
|
}
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
import React, { useEffect, useState } from 'react'
|
|
2
|
+
import { getDroppedOrSelectedFiles } from 'html5-file-selector'
|
|
3
|
+
import Dropzone from 'react-dropzone-uploader'
|
|
4
|
+
import { NotificationManager } from 'react-notifications'
|
|
5
|
+
import 'react-dropzone-uploader/dist/styles.css'
|
|
6
|
+
import { IconButtonSvg, pdfImage } from '../'
|
|
7
|
+
|
|
8
|
+
const maxSize = 7
|
|
9
|
+
export const DropzoneUploader = ({
|
|
10
|
+
onChangeFiles,
|
|
11
|
+
totalFiles,
|
|
12
|
+
maxFiles = 3,
|
|
13
|
+
accept = 'image/*, application/pdf',
|
|
14
|
+
capture = null,
|
|
15
|
+
nameFileLabel = 'Subir archivos',
|
|
16
|
+
}) => {
|
|
17
|
+
const [files, setFiles] = useState([])
|
|
18
|
+
const [totalFilesDU, setTotalFilesDU] = useState(totalFiles)
|
|
19
|
+
const handleChangeStatus = ({ file }, status) => {
|
|
20
|
+
if (status == 'done') {
|
|
21
|
+
const filesTemp = files
|
|
22
|
+
filesTemp.push(file)
|
|
23
|
+
setFiles(filesTemp)
|
|
24
|
+
onChangeFiles(files)
|
|
25
|
+
setTotalFilesDU(files.length)
|
|
26
|
+
} else if (status == 'removed') {
|
|
27
|
+
const filesTemp = files
|
|
28
|
+
const index = files.indexOf(file)
|
|
29
|
+
if (index > -1) {
|
|
30
|
+
filesTemp.splice(index, 1)
|
|
31
|
+
}
|
|
32
|
+
setFiles(filesTemp)
|
|
33
|
+
onChangeFiles(files)
|
|
34
|
+
setTotalFilesDU(files.length)
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
const getFilesFromEvent = (e) => {
|
|
38
|
+
return new Promise((resolve) => {
|
|
39
|
+
getDroppedOrSelectedFiles(e).then((chosenFiles) => {
|
|
40
|
+
resolve(chosenFiles.map((f) => f.fileObject))
|
|
41
|
+
})
|
|
42
|
+
})
|
|
43
|
+
}
|
|
44
|
+
const CustomPreview = ({ fileWithMeta }) => {
|
|
45
|
+
const { meta, remove } = fileWithMeta
|
|
46
|
+
if (meta.size / (1024 * 1024) > maxSize) {
|
|
47
|
+
NotificationManager.error(
|
|
48
|
+
'El archivo supera el tamaño máximo',
|
|
49
|
+
'Advertencia'
|
|
50
|
+
)
|
|
51
|
+
remove()
|
|
52
|
+
}
|
|
53
|
+
return (
|
|
54
|
+
<div className='dropzone-upload-previewContainer'>
|
|
55
|
+
{meta.type === 'application/pdf' ? (
|
|
56
|
+
<>
|
|
57
|
+
<IconButtonSvg
|
|
58
|
+
className='form-control flex'
|
|
59
|
+
svg={pdfImage}
|
|
60
|
+
svgOver={pdfImage}
|
|
61
|
+
height='1.6rem'
|
|
62
|
+
width='1.6rem'
|
|
63
|
+
title={meta.name}
|
|
64
|
+
/>
|
|
65
|
+
<p>
|
|
66
|
+
{meta.name.length > 17
|
|
67
|
+
? meta.name.substring(0, 17) + '...'
|
|
68
|
+
: meta.name}
|
|
69
|
+
</p>
|
|
70
|
+
</>
|
|
71
|
+
) : (
|
|
72
|
+
<>
|
|
73
|
+
<img
|
|
74
|
+
className='dropzone-upload-previewImage'
|
|
75
|
+
src={meta.previewUrl}
|
|
76
|
+
alt={meta.name}
|
|
77
|
+
/>
|
|
78
|
+
<p>
|
|
79
|
+
{meta.name.length > 17
|
|
80
|
+
? meta.name.substring(0, 17) + '...'
|
|
81
|
+
: meta.name}
|
|
82
|
+
</p>
|
|
83
|
+
</>
|
|
84
|
+
)}
|
|
85
|
+
<p>{(meta.size / 1024).toFixed(2)} .Kb</p>
|
|
86
|
+
<button
|
|
87
|
+
onClick={remove}
|
|
88
|
+
className='dropzone-upload-delete-btn simple-icon-trash'
|
|
89
|
+
></button>
|
|
90
|
+
</div>
|
|
91
|
+
)
|
|
92
|
+
}
|
|
93
|
+
|
|
94
|
+
const Input = ({ accept, onFiles, getFilesFromEvent }) => {
|
|
95
|
+
const text =
|
|
96
|
+
totalFilesDU > 0
|
|
97
|
+
? `${maxFiles - totalFilesDU} archivo/s más`
|
|
98
|
+
: nameFileLabel
|
|
99
|
+
return (
|
|
100
|
+
<label className='dropzone-upload-button'>
|
|
101
|
+
{text}
|
|
102
|
+
<input
|
|
103
|
+
style={{ display: 'none' }}
|
|
104
|
+
type='file'
|
|
105
|
+
accept={accept}
|
|
106
|
+
capture={capture}
|
|
107
|
+
multiple
|
|
108
|
+
onChange={(e) => {
|
|
109
|
+
getFilesFromEvent(e).then((chosenFiles) => {
|
|
110
|
+
onFiles(chosenFiles)
|
|
111
|
+
})
|
|
112
|
+
}}
|
|
113
|
+
/>
|
|
114
|
+
</label>
|
|
115
|
+
)
|
|
116
|
+
}
|
|
117
|
+
useEffect(() => {
|
|
118
|
+
setTotalFilesDU(totalFiles)
|
|
119
|
+
}, [totalFiles])
|
|
120
|
+
|
|
121
|
+
return (
|
|
122
|
+
<Dropzone
|
|
123
|
+
disableUpload={false}
|
|
124
|
+
maxFiles={totalFilesDU < maxFiles ? maxFiles : 0}
|
|
125
|
+
maxSize={maxSize} // en megas
|
|
126
|
+
InputComponent={Input}
|
|
127
|
+
PreviewComponent={CustomPreview}
|
|
128
|
+
classNames={{ dropzone: 'dropzone-upload-frame' }}
|
|
129
|
+
onChangeStatus={handleChangeStatus}
|
|
130
|
+
getFilesFromEvent={getFilesFromEvent}
|
|
131
|
+
accept={accept}
|
|
132
|
+
/>
|
|
133
|
+
)
|
|
134
|
+
}
|
|
Binary file
|
package/src/constants.js
ADDED
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export const TAKE_PHOTO = {
|
|
2
|
+
LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE:
|
|
3
|
+
'Subí una foto Selfie de frente junto a tu DNI.',
|
|
4
|
+
MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE:
|
|
5
|
+
'La carga de una foto Selfie de frente junto a tu DNI solo es accesible desde su teléfono',
|
|
6
|
+
TAKE_PHOTO_MESSAGE: 'Hacer Foto',
|
|
7
|
+
}
|
package/src/index.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
export * from
|
|
2
|
-
export * from
|
|
3
|
-
export * from
|
|
4
|
-
export * from
|
|
5
|
-
export * from
|
|
1
|
+
export * from './archivos-adjuntos'
|
|
2
|
+
export * from './bridges'
|
|
3
|
+
export * from './CustomBootstrap'
|
|
4
|
+
export * from './CustomSelectInput'
|
|
5
|
+
export * from './iconos'
|
|
6
|
+
export * from './IntlMessages'
|
|
7
|
+
export * from './tomar-foto'
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { useState } from 'react'
|
|
2
|
+
import { Row } from 'reactstrap'
|
|
3
|
+
import { DropzoneUploader, Colxx } from '../'
|
|
4
|
+
import { TAKE_PHOTO } from '../constants'
|
|
5
|
+
import imgHacerFoto from '../assets/img/take-photo.png'
|
|
6
|
+
|
|
7
|
+
export const TomarFoto = ({ onFilesSelectedSelfie, isMobile = false }) => {
|
|
8
|
+
const [filesTotalSelectedSelfie, setTotalFilesSelectedSelfie] = useState(0)
|
|
9
|
+
const {
|
|
10
|
+
LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE,
|
|
11
|
+
MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE,
|
|
12
|
+
TAKE_PHOTO_MESSAGE,
|
|
13
|
+
} = TAKE_PHOTO
|
|
14
|
+
|
|
15
|
+
const handleFilesSelectedSelfie = (files) => {
|
|
16
|
+
setTotalFilesSelectedSelfie(files.length)
|
|
17
|
+
onFilesSelectedSelfie(files)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
return (
|
|
21
|
+
<>
|
|
22
|
+
<Row className='pt-2 ml-4'>
|
|
23
|
+
<Colxx xxs='11' md='5'>
|
|
24
|
+
{LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE}
|
|
25
|
+
</Colxx>
|
|
26
|
+
</Row>
|
|
27
|
+
<Row className='pt-2 ml-2'>
|
|
28
|
+
<Colxx xxs='12' md='9'>
|
|
29
|
+
{isMobile ? (
|
|
30
|
+
<>
|
|
31
|
+
<Colxx xxs='12' className='text-center'>
|
|
32
|
+
{filesTotalSelectedSelfie === 0 && (
|
|
33
|
+
<img
|
|
34
|
+
style={{ width: '97%' }}
|
|
35
|
+
alt='hacerFotoDNI'
|
|
36
|
+
src={imgHacerFoto}
|
|
37
|
+
/>
|
|
38
|
+
)}
|
|
39
|
+
<DropzoneUploader
|
|
40
|
+
className='pt-2 ml-2'
|
|
41
|
+
maxFiles={1}
|
|
42
|
+
onChangeFiles={handleFilesSelectedSelfie}
|
|
43
|
+
totalFiles={filesTotalSelectedSelfie}
|
|
44
|
+
accept='image/jpg,image/jpeg'
|
|
45
|
+
capture='environment'
|
|
46
|
+
nameFileLabel={TAKE_PHOTO_MESSAGE}
|
|
47
|
+
/>
|
|
48
|
+
</Colxx>
|
|
49
|
+
</>
|
|
50
|
+
) : (
|
|
51
|
+
<h2
|
|
52
|
+
className={'view-icon iconsminds-smartphone-4 ml-2 mr-2'}
|
|
53
|
+
style={{
|
|
54
|
+
color: 'red',
|
|
55
|
+
margin: '10px 10px 0px 10px',
|
|
56
|
+
}}
|
|
57
|
+
>
|
|
58
|
+
{MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE}
|
|
59
|
+
</h2>
|
|
60
|
+
)}
|
|
61
|
+
</Colxx>
|
|
62
|
+
</Row>
|
|
63
|
+
</>
|
|
64
|
+
)
|
|
65
|
+
}
|