siam-ui-utils 2.2.26 → 2.2.28

package/src/dropzone/Preview.tsx

@@ -1,139 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { formatBytes, formatDuration } from './utils'
-import { IPreviewProps } from './Dropzone'
-//@ts-ignore
-import cancelImg from './assets/cancel.svg'
-//@ts-ignore
-import removeImg from './assets/remove.svg'
-//@ts-ignore
-import restartImg from './assets/restart.svg'
-
-const iconByFn = {
-  cancel: { backgroundImage: `url(${cancelImg})` },
-  remove: { backgroundImage: `url(${removeImg})` },
-  restart: { backgroundImage: `url(${restartImg})` },
-}
-
-class Preview extends React.PureComponent<IPreviewProps> {
-  render() {
-    const {
-      className,
-      imageClassName,
-      style,
-      imageStyle,
-      fileWithMeta: { cancel, remove, restart },
-      meta: { name = '', percent = 0, size = 0, previewUrl, status, duration, validationError },
-      isUpload,
-      canCancel,
-      canRemove,
-      canRestart,
-      extra: { minSizeBytes },
-    } = this.props
-
-    let title = `${name || '?'}, ${formatBytes(size)}`
-    if (duration) title = `${title}, ${formatDuration(duration)}`
-
-    if (status === 'error_file_size' || status === 'error_validation') {
-      return (
-        <div className={className} style={style}>
-          <span className="dzu-previewFileNameError">{title}</span>
-          {status === 'error_file_size' && <span>{size < minSizeBytes ? 'File too small' : 'File too big'}</span>}
-          {status === 'error_validation' && <span>{String(validationError)}</span>}
-          {canRemove && <span className="dzu-previewButton" style={iconByFn.remove} onClick={remove} />}
-        </div>
-      )
-    }
-
-    if (status === 'error_upload_params' || status === 'exception_upload' || status === 'error_upload') {
-      title = `${title} (upload failed)`
-    }
-    if (status === 'aborted') title = `${title} (cancelled)`
-
-    return (
-      <div className={className} style={style}>
-        {previewUrl && <img className={imageClassName} style={imageStyle} src={previewUrl} alt={title} title={title} />}
-        {!previewUrl && <span className="dzu-previewFileName">{title}</span>}
-
-        <div className="dzu-previewStatusContainer">
-          {isUpload && (
-            <progress max={100} value={status === 'done' || status === 'headers_received' ? 100 : percent} />
-          )}
-
-          {status === 'uploading' && canCancel && (
-            <span className="dzu-previewButton" style={iconByFn.cancel} onClick={cancel} />
-          )}
-          {status !== 'preparing' && status !== 'getting_upload_params' && status !== 'uploading' && canRemove && (
-            <span className="dzu-previewButton" style={iconByFn.remove} onClick={remove} />
-          )}
-          {['error_upload_params', 'exception_upload', 'error_upload', 'aborted', 'ready'].includes(status) &&
-            canRestart && <span className="dzu-previewButton" style={iconByFn.restart} onClick={restart} />}
-        </div>
-      </div>
-    )
-  }
-}
-
-// @ts-ignore
-Preview.propTypes = {
-  className: PropTypes.string,
-  imageClassName: PropTypes.string,
-  style: PropTypes.object,
-  imageStyle: PropTypes.object,
-  fileWithMeta: PropTypes.shape({
-    file: PropTypes.any.isRequired,
-    meta: PropTypes.object.isRequired,
-    cancel: PropTypes.func.isRequired,
-    restart: PropTypes.func.isRequired,
-    remove: PropTypes.func.isRequired,
-    xhr: PropTypes.any,
-  }).isRequired,
-  // copy of fileWithMeta.meta, won't be mutated
-  meta: PropTypes.shape({
-    status: PropTypes.oneOf([
-      'preparing',
-      'error_file_size',
-      'error_validation',
-      'ready',
-      'getting_upload_params',
-      'error_upload_params',
-      'uploading',
-      'exception_upload',
-      'aborted',
-      'error_upload',
-      'headers_received',
-      'done',
-    ]).isRequired,
-    type: PropTypes.string.isRequired,
-    name: PropTypes.string,
-    uploadedDate: PropTypes.string.isRequired,
-    percent: PropTypes.number,
-    size: PropTypes.number,
-    lastModifiedDate: PropTypes.string,
-    previewUrl: PropTypes.string,
-    duration: PropTypes.number,
-    width: PropTypes.number,
-    height: PropTypes.number,
-    videoWidth: PropTypes.number,
-    videoHeight: PropTypes.number,
-    validationError: PropTypes.any,
-  }).isRequired,
-  isUpload: PropTypes.bool.isRequired,
-  canCancel: PropTypes.bool.isRequired,
-  canRemove: PropTypes.bool.isRequired,
-  canRestart: PropTypes.bool.isRequired,
-  files: PropTypes.arrayOf(PropTypes.any).isRequired, // eslint-disable-line react/no-unused-prop-types
-  extra: PropTypes.shape({
-    active: PropTypes.bool.isRequired,
-    reject: PropTypes.bool.isRequired,
-    dragged: PropTypes.arrayOf(PropTypes.any).isRequired,
-    accept: PropTypes.string.isRequired,
-    multiple: PropTypes.bool.isRequired,
-    minSizeBytes: PropTypes.number.isRequired,
-    maxSizeBytes: PropTypes.number.isRequired,
-    maxFiles: PropTypes.number.isRequired,
-  }).isRequired,
-}
-
-export default Preview

package/src/dropzone/SubmitButton.tsx

@@ -1,47 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-
-import { ISubmitButtonProps } from './Dropzone'
-
-const SubmitButton = (props: ISubmitButtonProps) => {
-  const { className, buttonClassName, style, buttonStyle, disabled, content, onSubmit, files } = props
-
-  const _disabled =
-    files.some(f => ['preparing', 'getting_upload_params', 'uploading'].includes(f.meta.status)) ||
-    !files.some(f => ['headers_received', 'done'].includes(f.meta.status))
-
-  const handleSubmit = () => {
-    onSubmit(files.filter(f => ['headers_received', 'done'].includes(f.meta.status)))
-  }
-
-  return (
-    <div className={className} style={style}>
-      <button className={buttonClassName} style={buttonStyle} onClick={handleSubmit} disabled={disabled || _disabled}>
-        {content}
-      </button>
-    </div>
-  )
-}
-
-SubmitButton.propTypes = {
-  className: PropTypes.string,
-  buttonClassName: PropTypes.string,
-  style: PropTypes.object,
-  buttonStyle: PropTypes.object,
-  disabled: PropTypes.bool.isRequired,
-  content: PropTypes.node,
-  onSubmit: PropTypes.func.isRequired,
-  files: PropTypes.arrayOf(PropTypes.object).isRequired,
-  extra: PropTypes.shape({
-    active: PropTypes.bool.isRequired,
-    reject: PropTypes.bool.isRequired,
-    dragged: PropTypes.arrayOf(PropTypes.any).isRequired,
-    accept: PropTypes.string.isRequired,
-    multiple: PropTypes.bool.isRequired,
-    minSizeBytes: PropTypes.number.isRequired,
-    maxSizeBytes: PropTypes.number.isRequired,
-    maxFiles: PropTypes.number.isRequired,
-  }).isRequired,
-}
-
-export default SubmitButton

package/src/dropzone/assets/cancel.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 8 14" xmlns="http://www.w3.org/2000/svg"><g fill="#333333"><path d="M1,14 C0.4,14 0,13.6 0,13 L0,1 C0,0.4 0.4,0 1,0 C1.6,0 2,0.4 2,1 L2,13 C2,13.6 1.6,14 1,14 Z" id="Path"></path><path d="M7,14 C6.4,14 6,13.6 6,13 L6,1 C6,0.4 6.4,0 7,0 C7.6,0 8,0.4 8,1 L8,13 C8,13.6 7.6,14 7,14 Z" id="Path"></path></g></svg>

package/src/dropzone/assets/remove.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><g transform="translate(-5.0, 0.0)" fill="#333333"><g transform="translate(4.0, 0.0)"><polygon points="7.719 4.964 12.692 0.017 14.389 1.715 9.412 6.666 14.354 11.634 12.657 13.331 6.017 6.657 7.715 4.960"></polygon><polygon points="7.612 4.964 7.616 4.960 9.313 6.657 2.674 13.331 0.977 11.634 5.919 6.666 0.942 1.715 2.639 0.017"></polygon></g></g></svg>

package/src/dropzone/assets/restart.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 11 15" xmlns="http://www.w3.org/2000/svg"><g><path d="M0.5,14.9 C0.2,14.7 0,14.4 0,14 L0,2 C0,1.6 0.2,1.3 0.5,1.1 C0.8,0.9 1.2,0.9 1.5,1.1 L10.5,7.1 C10.8,7.3 10.9,7.6 10.9,7.9 C10.9,8.2 10.7,8.5 10.5,8.7 L1.5,14.7 C1.4,14.9 0.8,15.1 0.5,14.9 Z M2,3.9 L2,12.2 L8.2,8.1 L2,3.9 Z"></path></g></svg>

package/src/dropzone/styles.css

@@ -1,140 +0,0 @@
-.dzu-dropzone {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  min-height: 120px;
-  overflow: scroll;
-  margin: 0 auto;
-  position: relative;
-  box-sizing: border-box;
-  transition: all .15s linear;
-  border: 2px solid #d9d9d9;
-  border-radius: 4px;
-}
-
-.dzu-dropzoneActive {
-  background-color: #DEEBFF;
-  border-color: #2484FF;
-}
-
-.dzu-dropzoneDisabled {
-  opacity: 0.5;
-}
-
-.dzu-dropzoneDisabled *:hover {
-  cursor: unset;
-}
-
-.dzu-input {
-  display: none;
-}
-
-.dzu-inputLabel {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  font-family: 'Helvetica', sans-serif;
-  font-size: 20px;
-  font-weight: 600;
-  color: #2484FF;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  cursor: pointer;
-}
-
-.dzu-inputLabelWithFiles {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  align-self: flex-start;
-  padding: 0 14px;
-  min-height: 32px;
-  background-color: #E6E6E6;
-  color: #2484FF;
-  border: none;
-  font-family: 'Helvetica', sans-serif;
-  border-radius: 4px;
-  font-size: 14px;
-  font-weight: 600;
-  margin-top: 20px;
-  margin-left: 3%;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  cursor: pointer;
-}
-
-.dzu-previewContainer {
-  padding: 40px 3%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  position: relative;
-  width: 100%;
-  min-height: 60px;
-  z-index: 1;
-  border-bottom: 1px solid #ECECEC;
-  box-sizing: border-box;
-}
-
-.dzu-previewStatusContainer {
-  display: flex;
-  align-items: center;
-}
-
-.dzu-previewFileName {
-  font-family: 'Helvetica', sans-serif;
-  font-size: 14px;
-  font-weight: 400;
-  color: #333333;
-}
-
-.dzu-previewImage {
-  width: auto;
-  max-height: 40px;
-  max-width: 140px;
-  border-radius: 4px;
-}
-
-.dzu-previewButton {
-  background-size: 14px 14px;
-  background-position: center;
-  background-repeat: no-repeat;
-  width: 14px;
-  height: 14px;
-  cursor: pointer;
-  opacity: 0.9;
-  margin: 0 0 2px 10px;
-}
-
-.dzu-submitButtonContainer {
-  margin: 24px 0;
-  z-index: 1;
-}
-
-.dzu-submitButton {
-  padding: 0 14px;
-  min-height: 32px;
-  background-color: #2484FF;
-  border: none;
-  border-radius: 4px;
-  font-family: 'Helvetica', sans-serif;
-  font-size: 14px;
-  font-weight: 600;
-  color: #FFF;
-  -moz-osx-font-smoothing: grayscale;
-  -webkit-font-smoothing: antialiased;
-  cursor: pointer;
-}
-
-.dzu-submitButton:disabled {
-  background-color: #E6E6E6;
-  color: #333333;
-  cursor: unset;
-}

package/src/dropzone/utils.ts

@@ -1,113 +0,0 @@
-import React from 'react'
-import { IStyleCustomization } from './Dropzone'
-
-export const formatBytes = (b: number) => {
-  const units = ['bytes', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-  let l = 0
-  let n = b
-
-  while (n >= 1024) {
-    n /= 1024
-    l += 1
-  }
-
-  return `${n.toFixed(n >= 10 || l < 1 ? 0 : 1)}${units[l]}`
-}
-
-export const formatDuration = (seconds: number) => {
-  const date = new Date(0)
-  date.setSeconds(seconds)
-  const dateString = date.toISOString().slice(11, 19)
-  if (seconds < 3600) return dateString.slice(3)
-  return dateString
-}
-
-// adapted from: https://github.com/okonet/attr-accept/blob/master/src/index.js
-// returns true if file.name is empty and accept string is something like ".csv",
-// because file comes from dataTransferItem for drag events, and
-// dataTransferItem.name is always empty
-export const accepts = (file: File, accept: string) => {
-  if (!accept || accept === '*') return true
-
-  const mimeType = file.type || ''
-  const baseMimeType = mimeType.replace(/\/.*$/, '')
-
-  return accept
-    .split(',')
-    .map(t => t.trim())
-    .some(type => {
-      if (type.charAt(0) === '.') {
-        return file.name === undefined || file.name.toLowerCase().endsWith(type.toLowerCase())
-      } else if (type.endsWith('/*')) {
-        // this is something like an image/* mime type
-        return baseMimeType === type.replace(/\/.*$/, '')
-      }
-      return mimeType === type
-    })
-}
-
-type ResolveFn<T> = (...args: any[]) => T
-
-export const resolveValue = <T = any>(value: ResolveFn<T> | T, ...args: any[]) => {
-  if (typeof value === 'function') return (value as ResolveFn<T>)(...args)
-  return value
-}
-
-export const defaultClassNames = {
-  dropzone: 'dzu-dropzone',
-  dropzoneActive: 'dzu-dropzoneActive',
-  dropzoneReject: 'dzu-dropzoneActive',
-  dropzoneDisabled: 'dzu-dropzoneDisabled',
-  input: 'dzu-input',
-  inputLabel: 'dzu-inputLabel',
-  inputLabelWithFiles: 'dzu-inputLabelWithFiles',
-  preview: 'dzu-previewContainer',
-  previewImage: 'dzu-previewImage',
-  submitButtonContainer: 'dzu-submitButtonContainer',
-  submitButton: 'dzu-submitButton',
-}
-
-export const mergeStyles = (
-  classNames: IStyleCustomization<string>,
-  styles: IStyleCustomization<React.CSSProperties>,
-  addClassNames: IStyleCustomization<string>,
-  ...args: any[]
-) => {
-  const resolvedClassNames: { [property: string]: string } = { ...defaultClassNames }
-  const resolvedStyles = { ...styles } as { [property: string]: string }
-
-  for (const [key, value] of Object.entries(classNames)) {
-    resolvedClassNames[key] = resolveValue(value, ...args)
-  }
-
-  for (const [key, value] of Object.entries(addClassNames)) {
-    resolvedClassNames[key] = `${resolvedClassNames[key]} ${resolveValue(value, ...args)}`
-  }
-
-  for (const [key, value] of Object.entries(styles)) {
-    resolvedStyles[key] = resolveValue(value, ...args)
-  }
-
-  return { classNames: resolvedClassNames, styles: resolvedStyles as IStyleCustomization<React.CSSProperties> }
-}
-
-export const getFilesFromEvent = (
-  event: React.DragEvent<HTMLElement> | React.ChangeEvent<HTMLInputElement>,
-): Array<File | DataTransferItem> => {
-  let items = null
-
-  if ('dataTransfer' in event) {
-    const dt = event.dataTransfer
-
-    // NOTE: Only the 'drop' event has access to DataTransfer.files, otherwise it will always be empty
-    if ('files' in dt && dt.files.length) {
-      items = dt.files
-    } else if (dt.items && dt.items.length) {
-      items = dt.items
-    }
-  } else if (event.target && event.target.files) {
-    items = event.target.files
-  }
-
-  return Array.prototype.slice.call(items)
-}

package/src/dropzone-uploader/dropzone-uploader-dni-digital/index.jsx

@@ -1,151 +0,0 @@
-import { getDroppedOrSelectedFiles } from 'html5-file-selector';
-import { useState } from 'react';
-import { Button } from 'reactstrap';
-import Dropzone from '../../dropzone/Dropzone';
-import '../../dropzone/styles.css';
-import { IconButtonSvg, pdfImage } from '../../iconos';
-import '../dropzone-uploader.css';
-
-export const DropzoneUploaderDniDigital = ({
-  accept = 'image/*, application/pdf',
-  classNames = '',
-  onChangeFiles,
-  totalFiles,
-  label = 'Cargar Dni',
-  maxFiles = 2,
-  maxSize = 2,
-  onMaxFileSizeError = () => {
-    alert('El archivo supera el tamaño máximo');
-  },
-}) => {
-  const [files, setFiles] = useState([]);
-
-  const handleChangeStatus = ({ file }, status) => {
-    if (status === 'done') {
-      const filesTemp = [...files];
-      filesTemp.push(file);
-      setFiles(filesTemp);
-      onChangeFiles(filesTemp);
-    } else if (status === 'removed') {
-      const filesTemp = [...files];
-      const index = filesTemp.indexOf(file);
-      if (index > -1) {
-        filesTemp.splice(index, 1);
-      }
-      setFiles(filesTemp);
-      onChangeFiles(filesTemp);
-    }
-  };
-
-  const getFilesFromEvent = (e) => {
-    return new Promise((resolve) => {
-      getDroppedOrSelectedFiles(e).then((chosenFiles) => {
-        resolve(chosenFiles.map((f) => f.fileObject));
-      });
-    });
-  };
-
-  const CustomPreview = ({ fileWithMeta }) => {
-    const { meta, remove } = fileWithMeta;
-    if (meta.size / (1024 * 1024) > maxSize) {
-      onMaxFileSizeError();
-      remove();
-    }
-    return (
-      <div
-        className="dropzone-upload-previewContainer"
-        style={{ width: '100%', display: 'flex', alignItems: 'center' }}
-      >
-        {meta.type === 'application/pdf' ? (
-          <>
-            <IconButtonSvg
-              className="form-control flex"
-              svg={pdfImage}
-              svgOver={pdfImage}
-              height="1.6rem"
-              width="1.6rem"
-              title={meta.name}
-            />
-            <p style={{ paddingRight: '1rem' }}>
-              {meta.name.length > 17
-                ? meta.name.substring(0, 17) + '...'
-                : meta.name}
-            </p>
-          </>
-        ) : (
-          <>
-            <img
-              className="dropzone-upload-previewImage mt-1"
-              src={meta.previewUrl}
-              alt={meta.name}
-              style={{
-                width: '110px',
-                height: '110px',
-                objectFit: 'cover',
-                marginRight: '0.5rem',
-              }}
-            />
-            <div className="dropzone-upload-file-name-container">
-              <p className="dropzone-upload-file-name" title={meta.name}>
-                {meta.name}
-              </p>
-            </div>
-          </>
-        )}
-        <button
-          style={{ marginTop: '0rem' }}
-          onClick={remove}
-          className="dropzone-upload-delete-btn simple-icon-trash"
-        ></button>
-      </div>
-    );
-  };
-
-  const Input = ({ accept, onFiles, getFilesFromEvent }) => {
-    const text =
-      totalFiles > 0 ? `${maxFiles - totalFiles} archivos más` : `${label}`;
-    return (
-      <>
-        <Button
-          outline
-          block
-          size="xs"
-          className="mt-5 ml-5"
-          onClick={() => document.getElementById('fileInput').click()}
-        >
-          {text}
-          <input
-            id="fileInput"
-            style={{ display: 'none' }}
-            type="file"
-            accept={accept}
-            multiple
-            onChange={(e) => {
-              getFilesFromEvent(e).then((chosenFiles) => {
-                onFiles(chosenFiles);
-              });
-            }}
-          />
-        </Button>
-      </>
-    );
-  };
-
-  return (
-    <div className={classNames}>
-      <Dropzone
-        disableUpload={false}
-        maxFiles={totalFiles < maxFiles ? maxFiles : 0}
-        maxSize={maxSize} // en megas
-        InputComponent={Input}
-        PreviewComponent={CustomPreview}
-        classNames={{ dropzone: 'dropzone-upload-frame' }}
-        onChangeStatus={handleChangeStatus}
-        getFilesFromEvent={getFilesFromEvent}
-        accept={accept}
-      />
-    </div>
-  );
-};
-
-export default DropzoneUploaderDniDigital;

package/src/dropzone-uploader/dropzone-uploader.css

@@ -1,66 +0,0 @@
-.dropzone-upload-button{
-  padding: 25; 
-  border-radius: 5px !important;
-  cursor: pointer;
-  color: #fff;
-  width: 10rem !important;
-  height: 2rem !important;
-  line-height: 1.5 !important;
-  font-size: 13px;
-  text-align: center;
-  vertical-align: middle !important;
-  border: none;
-  padding-top: 0.5rem;
-  margin-top: 0.5rem;
-  background-color: #af251b;
-  &:hover {
-    background-color: rgb(108, 31, 1);
-  }
-}
-.dropzone-upload-frame{
-  border: 0px !important;
-  overflow: 'none' !important;
-}
-.dropzone-upload-previewContainer {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    position: relative;
-    width: 100px;
-    min-height: 60px;
-    z-index: 1;
-    border-bottom: 1px solid #ECECEC;
-    box-sizing: border-box;
-}
-
-.dropzone-upload-previewImage {
-    width: 60rem;
-    max-height: 60px;
-    max-width: 10rem;
-    border-radius: 4px;
-    padding-right: 1rem;
-}
- 
-.dropzone-upload-delete-btn {
-  width: 2rem;
-  line-height: 1.5; 
-  border : 0;
-  color: #ff0000;
-  background-color: #f8f8f8;
-  padding-right:1rem;
-}
-
-.dropzone-upload-file-name-container {
-  position: relative;
-  display: inline-block;
-  max-width: 150px; /* Ajusta este valor para aumentar el ancho */
-}
-
-.dropzone-upload-file-name {
-  padding-right: 1rem;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 150px; /* Ajusta este valor para aumentar el ancho */
-}