siam-ui-utils 2.1.8 → 2.1.10

package/index.d.ts

@@ -10,7 +10,7 @@ declare module "siam-ui-utils" {
     export function CustomSelectInput(props);
 
     //DROPZONEUploader
-    // export function DropzoneUploader(props);
+    export function DropzoneUploader(props);
 
     //INTLMESSAGES
     export function IntlMessages(props);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "siam-ui-utils",
-  "version": "2.1.8",
+  "version": "2.1.10",
   "keywords": [
     "ampf-react",
     "ampf-utils",

package/src/dropzone-uploader/index.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable react/prop-types */
 import React, { useEffect, useState } from 'react';
 import { getDroppedOrSelectedFiles } from 'html5-file-selector';
 import Dropzone from 'react-dropzone-uploader';
@@ -8,9 +7,16 @@ import IconButtonSvg from '../iconos/icon-button-svg';
 import { pdfImage } from '../constants-svg';
 import './dropzone-uploader.css';
 
-console.log('dropzone1 :>> ');
-
 const maxSize = 7; //en MB
+
+const getFilesFromEvent = (e) => {
+  return new Promise((resolve) => {
+    getDroppedOrSelectedFiles(e).then((chosenFiles) => {
+      resolve(chosenFiles.map((f) => f.fileObject));
+    });
+  });
+};
+
 export const DropzoneUploader = ({
   onChangeFiles,
   totalFiles,
@@ -20,40 +26,34 @@ export const DropzoneUploader = ({
   nameFileLabel = 'Subir archivos',
   maxFileSize = maxSize,
 }) => {
-  console.log('dropzone2 :>> ');
-
   const [files, setFiles] = useState([]);
   const [totalFilesDU, setTotalFilesDU] = useState(totalFiles);
-  const handleChangeStatus = ({ file }, status) => {
-    if (status == 'done') {
-      const filesTemp = files;
-      filesTemp.push(file);
-      setFiles(filesTemp);
-      onChangeFiles(files);
-      setTotalFilesDU(files.length);
-    } else if (status == 'removed') {
-      const filesTemp = files;
-      const index = files.indexOf(file);
-      if (index > -1) {
-        filesTemp.splice(index, 1);
-      }
-      setFiles(filesTemp);
-      onChangeFiles(files);
-      setTotalFilesDU(files.length);
-    }
-  };
-  const getFilesFromEvent = (e) => {
-    console.log('dropzone3 :>> ');
 
-    return new Promise((resolve) => {
-      getDroppedOrSelectedFiles(e).then((chosenFiles) => {
-        resolve(chosenFiles.map((f) => f.fileObject));
-      });
-    });
+  const Input = ({ accept, onFiles, getFilesFromEvent }) => {
+    const text =
+      totalFilesDU > 0
+        ? `${maxFiles - totalFilesDU} archivo/s más`
+        : nameFileLabel;
+    return (
+      <label className="dropzone-upload-button">
+        {text}
+        <input
+          style={{ display: 'none' }}
+          type="file"
+          accept={accept}
+          capture={capture}
+          multiple
+          onChange={(e) => {
+            getFilesFromEvent(e).then((chosenFiles) => {
+              onFiles(chosenFiles);
+            });
+          }}
+        />
+      </label>
+    );
   };
-  const CustomPreview = ({ fileWithMeta }) => {
-    console.log('dropzone4 :>> ');
 
+  const CustomPreview = ({ fileWithMeta }) => {
     const { meta, remove } = fileWithMeta;
     if (meta.size / (1024 * 1024) > maxFileSize) {
       NotificationManager.error(
@@ -103,37 +103,29 @@ export const DropzoneUploader = ({
     );
   };
 
-  const Input = ({ accept, onFiles, getFilesFromEvent }) => {
-    console.log('dropzone4 :>> ');
-
-    const text =
-      totalFilesDU > 0
-        ? `${maxFiles - totalFilesDU} archivo/s más`
-        : nameFileLabel;
-    return (
-      <label className="dropzone-upload-button">
-        {text}
-        <input
-          style={{ display: 'none' }}
-          type="file"
-          accept={accept}
-          capture={capture}
-          multiple
-          onChange={(e) => {
-            getFilesFromEvent(e).then((chosenFiles) => {
-              onFiles(chosenFiles);
-            });
-          }}
-        />
-      </label>
-    );
+  const handleChangeStatus = ({ file }, status) => {
+    if (status == 'done') {
+      const filesTemp = files;
+      filesTemp.push(file);
+      setFiles(filesTemp);
+      onChangeFiles(files);
+      setTotalFilesDU(files.length);
+    } else if (status == 'removed') {
+      const filesTemp = files;
+      const index = files.indexOf(file);
+      if (index > -1) {
+        filesTemp.splice(index, 1);
+      }
+      setFiles(filesTemp);
+      onChangeFiles(files);
+      setTotalFilesDU(files.length);
+    }
   };
+
   useEffect(() => {
     setTotalFilesDU(totalFiles);
   }, [totalFiles]);
 
-  console.log('dropzone5 :>> ');
-
   return (
     <>
       <Dropzone

package/src/index.js

@@ -1,6 +1,6 @@
-// export { DropzoneUploader } from './dropzone-uploader';
-export { withRouter } from './bridges';
-export { Colxx, Separator } from './CustomBootstrap';
-export { CustomSelectInput } from './CustomSelectInput';
-export { IntlMessages } from './IntlMessages';
-export { TomarFoto } from './tomar-foto';
+export * from './dropzone-uploader';
+export * from './bridges';
+export * from './CustomBootstrap';
+export * from './CustomSelectInput';
+export * from './IntlMessages';
+export * from './tomar-foto';

package/src/{dropzone-uploader → stories}/DropzoneUploader.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { DropzoneUploader } from '.';
+import { DropzoneUploader } from '../dropzone-uploader';
 
 const args = {
   onChangeFiles: () => {

package/src/{tomar-foto → stories}/TomarFoto.stories.tsx

@@ -1,14 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { TomarFoto } from '.';
+import { TomarFoto } from '../tomar-foto';
 
 const meta = {
   title: 'Components/TomarFoto',
   component: TomarFoto,
-    args: {
-        onFilesSelectedSelfie:() => { },
-        isMobile:false
-    },
+  args: {
+    onFilesSelectedSelfie: () => {},
+    isMobile: false,
+  },
 } satisfies Meta<typeof TomarFoto>;
 
 export default meta;
@@ -16,14 +16,14 @@ type Story = StoryObj<typeof meta>;
 
 export const TomarFotoWebApplication: Story = {
   args: {
-        isMobile: false
-    },
+    isMobile: false,
+  },
 };
 export const TomarFotoMobileApplication: Story = {
   args: {
     isMobile: true,
-        onFilesSelectedSelfie: () => {
-            console.log('Dispatch an action')
-        }
+    onFilesSelectedSelfie: () => {
+      console.log('Dispatch an action');
+    },
   },
 };

package/src/tomar-foto/index.jsx

@@ -1,67 +1,66 @@
 /* eslint-disable react/prop-types */
-import React, { useState } from 'react';
-import { Row } from 'reactstrap';
-import { DropzoneUploader } from '../dropzone-uploader';
-import { Colxx } from '../CustomBootstrap';
-import { TAKE_PHOTO } from '../constants';
-import imgHacerFoto from '../assets/img/take-photo.png';
+import React, { useState } from 'react'
+import { Row } from 'reactstrap'
+import { DropzoneUploader, Colxx } from '../'
+import { TAKE_PHOTO } from '../constants'
+import imgHacerFoto from '../assets/img/take-photo.png'
 
 export const TomarFoto = ({ onFilesSelectedSelfie, isMobile = false }) => {
-  const [filesTotalSelectedSelfie, setTotalFilesSelectedSelfie] = useState(0);
-  const {
-    LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE,
-    MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE,
-    TAKE_PHOTO_MESSAGE,
-  } = TAKE_PHOTO;
+	const [filesTotalSelectedSelfie, setTotalFilesSelectedSelfie] = useState(0)
+	const {
+		LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE,
+		MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE,
+		TAKE_PHOTO_MESSAGE,
+	} = TAKE_PHOTO
 
-  const handleFilesSelectedSelfie = (files) => {
-    setTotalFilesSelectedSelfie(files.length);
-    onFilesSelectedSelfie(files);
-  };
+	const handleFilesSelectedSelfie = (files) => {
+		setTotalFilesSelectedSelfie(files.length)
+		onFilesSelectedSelfie(files)
+	}
 
-  return (
-    <>
-      <Row className="pt-2 ml-4">
-        <Colxx xxs="11" md="5">
-          {LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE}
-        </Colxx>
-      </Row>
-      <Row className="pt-2 ml-2">
-        <Colxx xxs="12" md="9">
-          {isMobile ? (
-            <>
-              <Colxx xxs="12" className="text-center">
-                {filesTotalSelectedSelfie === 0 && (
-                  <img
-                    style={{ width: '97%' }}
-                    alt="hacerFotoDNI"
-                    src={imgHacerFoto}
-                  />
-                )}
-                <DropzoneUploader
-                  className="pt-2 ml-2"
-                  maxFiles={1}
-                  onChangeFiles={handleFilesSelectedSelfie}
-                  totalFiles={filesTotalSelectedSelfie}
-                  accept="image/jpg,image/jpeg"
-                  capture="environment"
-                  nameFileLabel={TAKE_PHOTO_MESSAGE}
-                />
-              </Colxx>
-            </>
-          ) : (
-            <h2
-              className={'view-icon iconsminds-smartphone-4 ml-2 mr-2'}
-              style={{
-                color: 'red',
-                margin: '10px 10px 0px 10px',
-              }}
-            >
-              {MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE}
-            </h2>
-          )}
-        </Colxx>
-      </Row>
-    </>
-  );
-};
+	return (
+		<>
+			<Row className='pt-2 ml-4'>
+				<Colxx xxs='11' md='5'>
+					{LOAD_SELFIE_WITH_IDENTITY_CARD_MESSAGE}
+				</Colxx>
+			</Row>
+			<Row className='pt-2 ml-2'>
+				<Colxx xxs='12' md='9'>
+					{isMobile ? (
+						<>
+							<Colxx xxs='12' className='text-center'>
+								{filesTotalSelectedSelfie === 0 && (
+									<img
+										style={{ width: '97%' }}
+										alt='hacerFotoDNI'
+										src={imgHacerFoto}
+									/>
+								)}
+								<DropzoneUploader
+									className='pt-2 ml-2'
+									maxFiles={1}
+									onChangeFiles={handleFilesSelectedSelfie}
+									totalFiles={filesTotalSelectedSelfie}
+									accept='image/jpg,image/jpeg'
+									capture='environment'
+									nameFileLabel={TAKE_PHOTO_MESSAGE}
+								/>
+							</Colxx>
+						</>
+					) : (
+						<h2
+							className={'view-icon iconsminds-smartphone-4 ml-2 mr-2'}
+							style={{
+								color: 'red',
+								margin: '10px 10px 0px 10px',
+							}}
+						>
+							{MESSAGE_SELFIE_ONLY_CAN_TAKE_FROM_CELLPHONE}
+						</h2>
+					)}
+				</Colxx>
+			</Row>
+		</>
+	)
+}