siam-ui-utils 2.0.26 → 2.0.28

package/src/tomar-foto/index.jsx

@@ -1,66 +1,69 @@
-import { useState } from 'react'
-import { Row } from 'reactstrap'
-import { DropzoneUploader, Colxx } from '../'
-import { TAKE_PHOTO } from '../constants'
-import imgHacerFoto from '../assets/img/take-photo.png'
+import { useState } from 'react';
+import { Row } from 'reactstrap';
+import { DropzoneUploader, Colxx } from '../';
+import { TAKE_PHOTO } from '../constants';
+import imgHacerFoto from '../assets/img/take-photo.png';
 
 // eslint-disable-next-line react/prop-types
-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
+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 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>
+    </>
+  );
+};

package/vite.config.ts

@@ -4,6 +4,11 @@ import commonjs from 'vite-plugin-commonjs'
 
 export default defineConfig({
     plugins: [react(), commonjs()],
+    server: {
+        port: 5173,
+        open: true,
+        hmr: true
+    },
     css: {
         preprocessorOptions: {
             scss: {

package/src/react-notifications/Notification.jsx

@@ -1,89 +0,0 @@
-import { useEffect } from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-
-const Notification = ({
-  title,
-  type,
-  message,
-  customClassName,
-  timeOut,
-  onClick,
-  onRequestHide,
-}) => {
-  const requestHide = () => {
-    if (onRequestHide) {
-      onRequestHide();
-    }
-  };
-
-  useEffect(() => {
-    let timer = null;
-    if (timeOut !== 0) {
-      timer = setTimeout(requestHide, timeOut);
-    }
-    return () => {
-      if (timer) {
-        clearTimeout(timer);
-      }
-    };
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  const handleClick = () => {
-    if (onClick) {
-      onClick();
-    }
-    requestHide();
-  };
-
-  const className = classnames([
-    'notification',
-    `notification-${type}`,
-    customClassName,
-  ]);
-  const titleHtml = title ? <h4 className="title">{title}</h4> : null;
-  return (
-    <div className={className} onClick={() => handleClick()}>
-      <div className="notification-message" role="alert">
-        {titleHtml}
-        <div className="message">{message}</div>
-      </div>
-    </div>
-  );
-};
-
-Notification.propTypes = {
-  type: PropTypes.oneOf([
-    'info',
-    'success',
-    'warning',
-    'error',
-    'primary',
-    'secondary',
-  ]),
-  title: PropTypes.node,
-  message: PropTypes.node,
-  timeOut: PropTypes.number,
-  onClick: PropTypes.func,
-  onRequestHide: PropTypes.func,
-  customClassName: PropTypes.string,
-};
-
-Notification.defaultProps = {
-  type: 'info',
-  title: null,
-  message: null,
-  timeOut: 5000,
-
-  onClick: () => {
-    undefined;
-  },
-  onRequestHide: () => {
-    undefined;
-  },
-
-  customClassName: '',
-};
-
-export default Notification;

package/src/react-notifications/NotificationContainer.jsx

@@ -1,53 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import NotificationManager from './NotificationManager';
-import Notifications from './Notifications';
-
-class NotificationContainer extends Component {
-  constructor(props) {
-    super(props);
-    NotificationManager.addChangeListener(this.handleStoreChange);
-    this.state = {
-      notifications: [],
-    };
-  }
-
-  componentWillUnmount = () => {
-    NotificationManager.removeChangeListener(this.handleStoreChange);
-  };
-
-  handleStoreChange = (notifications) => {
-    this.setState({
-      notifications,
-    });
-  };
-
-  handleRequestHide = (notification) => {
-    NotificationManager.remove(notification);
-  };
-
-  render() {
-    const { notifications } = this.state;
-    const { enterTimeout, leaveTimeout } = this.props;
-    return (
-      <Notifications
-        enterTimeout={enterTimeout}
-        leaveTimeout={leaveTimeout}
-        notifications={notifications}
-        onRequestHide={this.handleRequestHide}
-      />
-    );
-  }
-}
-
-NotificationContainer.propTypes = {
-  enterTimeout: PropTypes.number,
-  leaveTimeout: PropTypes.number,
-};
-
-NotificationContainer.defaultProps = {
-  enterTimeout: 400,
-  leaveTimeout: 400,
-};
-
-export default NotificationContainer;

package/src/react-notifications/NotificationManager.js

@@ -1,135 +0,0 @@
-import { EventEmitter } from "events";
-
-const createUUID = () => {
-  const pattern = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx";
-  return pattern.replace(/[xy]/g, (c) => {
-    const r = (Math.random() * 16) | 0;
-    const v = c === "x" ? r : (r & 0x3) | 0x8;
-    return v.toString(16);
-  });
-};
-
-const Constants = {
-  CHANGE: "change",
-  PRIMARY: "primary",
-  SECONDARY: "secondary",
-  INFO: "info",
-  SUCCESS: "success",
-  WARNING: "warning",
-  ERROR: "error",
-};
-
-class NotificationManager extends EventEmitter {
-  constructor() {
-    super();
-    this.listNotify = [];
-  }
-
-  create(notify) {
-    const defaultNotify = {
-      id: createUUID(),
-      type: "info",
-      title: null,
-      message: null,
-      timeOut: 3000,
-      customClassName: "",
-    };
-    if (notify.priority) {
-      this.listNotify.unshift(Object.assign(defaultNotify, notify));
-    } else {
-      this.listNotify.push(Object.assign(defaultNotify, notify));
-    }
-    this.emitChange();
-  }
-
-  primary(message, title, timeOut, onClick, priority, customClassName) {
-    this.create({
-      type: Constants.PRIMARY,
-      message,
-      title,
-      timeOut,
-      onClick,
-      priority,
-      customClassName,
-    });
-  }
-
-  secondary(message, title, timeOut, onClick, priority, customClassName) {
-    this.create({
-      type: Constants.SECONDARY,
-      message,
-      title,
-      timeOut,
-      onClick,
-      priority,
-      customClassName,
-    });
-  }
-
-  info(message, title, timeOut, onClick, priority, customClassName) {
-    this.create({
-      type: Constants.INFO,
-      message,
-      title,
-      timeOut,
-      onClick,
-      priority,
-      customClassName,
-    });
-  }
-
-  success(message, title, timeOut, onClick, priority, customClassName) {
-    this.create({
-      type: Constants.SUCCESS,
-      message,
-      title,
-      timeOut,
-      onClick,
-      priority,
-      customClassName,
-    });
-  }
-
-  warning(message, title, timeOut, onClick, priority, customClassName) {
-    this.create({
-      type: Constants.WARNING,
-      message,
-      title,
-      timeOut,
-      onClick,
-      priority,
-      customClassName,
-    });
-  }
-
-  error(message, title, timeOut, onClick, priority, customClassName) {
-    this.create({
-      type: Constants.ERROR,
-      message,
-      title,
-      timeOut,
-      onClick,
-      priority,
-      customClassName,
-    });
-  }
-
-  remove(notification) {
-    this.listNotify = this.listNotify.filter((n) => notification.id !== n.id);
-    this.emitChange();
-  }
-
-  emitChange() {
-    this.emit(Constants.CHANGE, this.listNotify);
-  }
-
-  addChangeListener(callback) {
-    this.addListener(Constants.CHANGE, callback);
-  }
-
-  removeChangeListener(callback) {
-    this.removeListener(Constants.CHANGE, callback);
-  }
-}
-
-export default new NotificationManager();

package/src/react-notifications/Notifications.jsx

@@ -1,66 +0,0 @@
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { TransitionGroup, CSSTransition } from 'react-transition-group';
-import classnames from 'classnames';
-import Notification from './Notification';
-
-class Notifications extends Component {
-  handleRequestHide = (notification) => () => {
-    const { onRequestHide } = this.props;
-    if (onRequestHide) {
-      onRequestHide(notification);
-    }
-  };
-
-  render() {
-    const { notifications, enterTimeout, leaveTimeout } = this.props;
-    const className = classnames('notification-container', {
-      'notification-container-empty': notifications.length === 0,
-    });
-    return (
-      <div className={className}>
-        <TransitionGroup>
-          {notifications.map((notification) => {
-            const key = notification.id || new Date().getTime();
-            return (
-              <CSSTransition
-                classNames="notification"
-                key={key}
-                timeout={{ exit: leaveTimeout, enter: enterTimeout }}
-              >
-                <Notification
-                  key={key}
-                  type={notification.type}
-                  title={notification.title}
-                  message={notification.message}
-                  timeOut={notification.timeOut}
-                  onClick={notification.onClick}
-                  onRequestHide={this.handleRequestHide(notification)}
-                  customClassName={notification.customClassName}
-                />
-              </CSSTransition>
-            );
-          })}
-        </TransitionGroup>
-      </div>
-    );
-  }
-}
-Notifications.propTypes = {
-  notifications: PropTypes.array,
-  onRequestHide: PropTypes.func,
-  enterTimeout: PropTypes.number,
-  leaveTimeout: PropTypes.number,
-};
-
-Notifications.defaultProps = {
-  notifications: [],
-
-  onRequestHide: () => {
-    undefined;
-  },
-
-  enterTimeout: 400,
-  leaveTimeout: 400,
-};
-export default Notifications;

package/src/react-notifications/index.js

@@ -1,5 +0,0 @@
-import Notifications from './Notifications';
-import NotificationContainer from './NotificationContainer';
-import NotificationManager from './NotificationManager';
-
-export { Notifications, NotificationContainer, NotificationManager };