argous 1.2.131 → 1.2.135

package/lib/components/FilePreparer/FilePreparer.d.ts

@@ -0,0 +1,26 @@
+import { ChipProps, TextFieldProps } from '@material-ui/core';
+import * as React from 'react';
+
+export interface FilePreparerRef {
+  preparaArquivo: (file: File) => Promise<void>,
+  loading: boolean
+}
+
+export interface FilePreparerProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref'> {
+  onChange?: (res: object) => void,
+  TextFieldProps?: TextFieldProps,
+  placeholder?: string,
+  label?: string,
+  ref?: React.RefObject<FilePreparerRef>,
+  multiple?: boolean,
+  ChipProps?: ChipProps,
+  disabled?: boolean,
+  fileInputProps?: React.HTMLProps<HTMLInputElement>,
+  valuePlaceHolder?: string,
+  concat?: boolean,
+  initialFiles?: any[]
+}
+
+declare function FilePreparer(props: FilePreparerProps): JSX.Element
+
+export default FilePreparer;

package/lib/components/FilePreparer/FilePreparer.js

@@ -0,0 +1,247 @@
+import { prepareFile } from '../../api';
+import { setError } from '../../utils/api';
+import { Chip, CircularProgress, FilledInput, IconButton, makeStyles, TextField } from '@material-ui/core';
+import { useAutocomplete } from '@material-ui/lab';
+import clsx from 'clsx';
+import { produce } from 'immer';
+import React, { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
+import { MdAttachment, MdClear } from 'react-icons/md';
+
+const useStyles = makeStyles(_theme => ({
+  tag: {
+    margin: 3,
+    maxWidth: 'calc(100% - 6px)',
+  },
+  inputRoot: {
+    flexWrap: 'wrap',
+    '$hasPopupIcon &, $hasClearIcon &': {
+      paddingRight: 26 + 4,
+    },
+    '$hasPopupIcon$hasClearIcon &': {
+      paddingRight: 52 + 4,
+    },
+    '& $input': {
+      width: 0,
+      minWidth: 30,
+    },
+    '&[class*="MuiInput-root"]': {
+      paddingBottom: 1,
+      '& $input': {
+        padding: 4,
+      },
+      '& $input:first-child': {
+        padding: '6px 0',
+      },
+    },    
+    '&[class*="MuiOutlinedInput-root"]': {
+      padding: 9,
+      paddingRight: 26 + 4 + 9,
+      '$hasClearIcon &': {
+        paddingRight: 52 + 4 + 9,
+      },
+      '& $input': {
+        padding: '9.5px 4px',
+      },
+      '& $input:first-child': {
+        paddingLeft: 6,
+      },
+      '& $endAdornment': {
+        right: 9,
+      },
+    },
+    '&[class*="MuiOutlinedInput-root"][class*="MuiOutlinedInput-marginDense"]': {
+      padding: 6,
+      '& $input': {
+        padding: '4.5px 4px',
+      },
+    },    
+  },
+  input: {
+    flexGrow: 1,
+    textOverflow: 'ellipsis',
+    opacity: 0,
+  },
+  inputFocused: {
+    opacity: 1,
+  },
+  clearIndicator: {
+    marginRight: -2,
+    padding: 4,
+    visibility: 'hidden',
+  },
+  clearIndicatorDirty: {},
+  root: {
+    display: 'flex',
+    flexGrow: 1,
+    '&$focused $clearIndicatorDirty': {
+      visibility: 'visible',
+    },
+    '@media (pointer: fine)': {
+      '&:hover $clearIndicatorDirty': {
+        visibility: 'visible',
+      },
+    },
+  },
+  loading: {},
+  endAdornment: {
+    position: 'absolute',
+    right: 0, 
+    top: 'calc(50% - 24px)',
+    '$loading &': {
+      top: 'calc(50% - 14px)',
+    },
+  },
+  rename: {
+    borderRadius: 10,
+    padding: '5px !important'
+  }
+}));
+
+const FilePreparer = ({ 
+  onChange, 
+  TextFieldProps,
+  placeholder, 
+  label, 
+  multiple, 
+  ChipProps,
+  disabled,
+  fileInputProps,
+  valuePlaceHolder,
+  concat,
+  initialFiles = [],
+  ...props 
+}, ref) => {
+  const classes = useStyles();
+  const inputRef = useRef();
+
+  const [loading, setLoading] = useState(false);
+  const [files, setFiles] = useState(initialFiles);
+
+  useEffect(() => {
+    if (valuePlaceHolder && !multiple) setFiles(f => [{ ...f[0], name: valuePlaceHolder }]);
+  }, [valuePlaceHolder, multiple]);
+
+  const preparaArquivo = useCallback(async file => {
+    if (!file) return;
+    setLoading(true);
+    let reqs = [];
+    if (file.map) reqs = file;
+    else for (let i = 0; i < file.length; i++) reqs.push(file[i]);        
+    const res = await Promise.all(reqs.map(item => prepareFile(item.fileObject || item)));
+    let resps = [];
+    res.forEach((item, i) => {
+      if (item.idRecebimento) resps.push({ ...item, path: file[i].fullPath });
+      else setError(item.dsErro);
+    });
+    setFiles(f => concat && multiple ? ([...f, ...resps]) : resps);
+    setLoading(false);
+    
+    onChange && onChange(multiple ? concat ? [...files, ...resps] : resps : resps[0], motivo);
+  }, [concat, files, motivo, multiple, onChange]);
+
+  const [motivo, setMotivo] = useState();
+
+  // useUpdateEffect(() => {
+  //   onChange && onChange(multiple ? files : files[0], motivo);
+  //   setMotivo(undefined);
+  // }, [files]);
+
+  useImperativeHandle(ref, () => ({ preparaArquivo, loading, setLoading }), [preparaArquivo, loading]);
+  
+  const handleChange = (_, v, reason) => {
+    setMotivo(reason);
+    inputRef.current.value = '';
+    setFiles(v || []);
+
+    onChange && onChange(multiple ? v || [] : (v || [])[0], motivo);
+  };
+
+  const { 
+    getInputProps, 
+    getTagProps, 
+    setAnchorEl, 
+    focusedTag, 
+    getClearProps, 
+    dirty 
+  } = useAutocomplete({ 
+    value: files, 
+    inputValue: files.length ? '' : placeholder || 'Selecione um arquivo', 
+    options: [], 
+    onChange: handleChange, 
+    multiple: true, 
+    componentName: 'FilePreparer' 
+  });
+
+  const [editando, setEditando] = useState();
+
+  const handleEditing = index => e => {
+    e.stopPropagation();
+    if (files[index].idRecebimento) setEditando(index);
+  };
+
+  const handleRename = e => {
+    setFiles(produce(file => void(file[editando].name = e.target.value)));
+    setEditando(undefined);
+  };
+
+  const handleClick = () => !loading && !files.length && !disabled && inputRef.current.click();
+
+  return (
+    <div className={clsx(classes.root, { [classes.loading]: loading })} {...props}>
+      <input ref={inputRef} type='file' {...{ multiple }} onChange={e => e?.target?.files?.length && preparaArquivo(e.target.files)} style={{ display: 'none' }} {...fileInputProps}/>
+      <TextField
+        ref={setAnchorEl}
+        variant='outlined' 
+        label={label || 'Arquivo'} 
+        margin='dense' 
+        onClick={handleClick} 
+        style={{ flexGrow: '1' }}
+        InputProps={{
+          readOnly: true,
+          startAdornment: files.length > 0 ? 
+            files.map((option, index) => editando === index ? (
+              <FilledInput className={classes.rename} defaultValue={option.name} autoFocus onBlur={handleRename} multiline disableUnderline/>
+            ) : ( 
+              <Chip
+                className={clsx(classes.tag)}
+                label={option.name}
+                onClick={handleEditing(index)}
+                clickable 
+                {...{ disabled, ...ChipProps }}
+                {...getTagProps({ index })}
+              />
+            )) : undefined,
+          className: classes.inputRoot,
+          endAdornment: <div className={classes.endAdornment}>
+            {loading ? <CircularProgress disableShrink size={24}/> : <>
+              <IconButton
+                disabled={disabled}
+                {...getClearProps()}
+                className={clsx(classes.clearIndicator, {
+                  [classes.clearIndicatorDirty]: dirty,
+                })}
+              >
+                <MdClear/>
+              </IconButton>            
+              <IconButton 
+                disabled={disabled}
+                onClick={e => {
+                  e.stopPropagation();
+                  inputRef.current.click(); 
+                }}>
+                <MdAttachment />
+              </IconButton>
+            </> }
+          </div>
+        }}
+        inputProps={{
+          className: clsx(classes.input, {
+            [classes.inputFocused]: focusedTag === -1,
+          }), disabled, ...getInputProps()
+        }}
+        {...TextFieldProps}/>
+    </div>
+  );
+};
+
+export default forwardRef(FilePreparer);

package/lib/components/FilePreparer/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './FilePreparer';
+export * from './FilePreparer'; 

package/lib/components/FilePreparer/index.js

@@ -0,0 +1 @@
+export { default } from './FilePreparer';

package/lib/components/FileUploader/FileUploader.d.ts

@@ -0,0 +1,9 @@
+// import * as React from 'react'
+
+export interface FileUploaderProps {
+
+}
+
+declare function FileUploader(props: FileUploaderProps): JSX.Element
+
+export default FileUploader;

package/lib/components/FileUploader/FileUploader.js

@@ -0,0 +1,318 @@
+import { inicFileUpload, sendFilePart, endFileUpload, cancelFileUpload/*, getFileInfo*/ } from '../../api/index';
+import { withStyles, CircularProgress, LinearProgress } from '@material-ui/core';
+import PropTypes from 'prop-types';
+import React, { useState, useEffect } from 'react';
+
+let estadoPausado = false;
+let idProtocolo;
+let tamLote;
+let lote;
+
+/* Valores para nr
+  *   1 = fileExtension
+  *   2 = retornaProgresso
+  *   3 = enviarDireto
+*/
+function descobrePrm(prm2, prm3, prm4, nr) { //Descobre o que é cada prm, ja que o usuário pode colocar na ordem errada
+  switch (nr) {
+    case 1: // fileExtension
+      if (typeof prm2 === 'string') return prm2;
+      if (typeof prm3 === 'string') return prm3;
+      if (typeof prm4 === 'string') return prm4;
+      break;
+    case 2: // retornaProgresso
+      if (typeof prm2 === 'function') return prm2;
+      if (typeof prm3 === 'function') return prm3;
+      if (typeof prm4 === 'function') return prm4;
+      break;
+    case 3: // enviarDireto
+      if (typeof prm2 === 'boolean') return prm2;
+      if (typeof prm3 === 'boolean') return prm3;
+      if (typeof prm4 === 'boolean') return prm4;
+      break;
+    default:
+      return undefined;
+  }
+}
+
+export async function fileUploader(file, prm2, prm3, prm4) { //Funcao principal, que pode ser chamada por qualquer um
+
+  const fileExtension = descobrePrm(prm2, prm3, prm4, 1) || '';
+  const retornaProgresso = descobrePrm(prm2, prm3, prm4, 2);
+  const enviarDireto = descobrePrm(prm2, prm3, prm4, 3) === undefined ? true : descobrePrm(prm2, prm3, prm4, 3);
+
+  file.preventDefault();
+  let arquivo = file.target.files[0];
+
+  if (fileExtension && arquivo.name.split('.').pop() !== fileExtension) return { dsErro: `O arquivo enviado deve ser do tipo ".${fileExtension}".`, status: false };
+
+  if (enviarDireto) return confirmFileUpload(arquivo, retornaProgresso);
+  return arquivo;
+}
+
+export async function confirmFileUpload(arquivo, retornaProgresso) { //funcao que confirma o envio do upload no caso de ter se usado o prop "enviaDireto"
+  if (!idProtocolo) {
+    const res = await inicFileUpload({ nomeArquivo: arquivo.name, tamanhoArquivo: arquivo.size });
+    if (res.dsErro) return res;
+    idProtocolo = res.idProtocolo;
+    tamLote = res.tamLote;
+    lote = 0;
+  }
+  try {
+    do {
+      if (retornaProgresso) retornaProgresso(((lote * tamLote) * 100) / arquivo.size);
+      const parte = await converteBlobEmBase64(arquivo.slice((lote * tamLote), (lote * tamLote) + tamLote));
+      if (estadoPausado) return;
+      const res = await sendFilePart({ idProtocolo: idProtocolo, nrLote: lote, dadosLote: parte });
+      if (res.snAck) lote++;
+    } while ((lote * tamLote) < arquivo.size);
+  } catch (error) {
+    console.error(error);
+  } 
+  if (estadoPausado) return { arquivo, retornaProgresso };
+  const res = await endFileUpload({ idProtocolo: idProtocolo });
+  estadoPausado = false;
+  idProtocolo = undefined;
+  tamLote = undefined;
+  lote = undefined;
+  return res;
+}
+
+function converteBlobEmBase64(parte) { //Promise para poder ler o arquivo assincronamente sem que o codigo avance
+  return new Promise((resolve, reject) => {
+    let reader = new FileReader();
+    reader.onload = () => {
+      resolve(reader.result.replace(/=/g, '').split(',').pop());
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(parte);
+  });
+}
+
+export function pausaUpload() {
+  estadoPausado = true;
+}
+
+export function retomaUpload(dados) {
+  estadoPausado = false;
+  return confirmFileUpload(dados.arquivo, dados.retornaProgresso);
+}
+
+export const ColorLinearProgress = withStyles({
+  root: {
+    margin: '5px 0px 0px 5px'
+  },
+  colorPrimary: {
+    backgroundColor: '#d3deda',
+  },
+  barColorPrimary: {
+    backgroundColor: '#009C6A',
+  },
+})(LinearProgress);
+
+const estiloBotoes = {
+  margin: '0px 3px',
+  border: 0,
+  padding: 0,
+  fontSize: '20px',
+  width: '30px',
+  height: '30px',
+  borderRadius: '15px'
+};
+
+const estiloBotoesCompact = {
+  margin: '0px 3px',
+  border: 0,
+  padding: 0,
+  fontSize: '15px',
+  width: '30px',
+  height: '30px',
+  borderRadius: '15px'
+};
+
+export default function FileUploader({ extensao, funcaoRetorno, enviarDireto, variant }) {
+  // ToDo fazer funcionar com varios arquivos
+  // ToDo fazer um jeito de cancelar no meio do envio
+  // ToDo  preparar para receber valor ja inicializado
+  // Todo funcao que retorna estados para ter um spinner mais dinamico
+  // Todo fazer um modal drag and drop minimizavel que busque o estado do upload
+  // ToDo fazer aceitar mais de uma extensao
+  // ToDo se inspirar no layout do uploader do sistema de chamados para fazer a versao default
+
+  const [progresso, setProgresso] = useState(0);
+  const [aguardando, setAguardando] = useState({});
+  const [infoPausa, setInfoPausa] = useState({});
+  const [idKey, setIdKey] = useState(0);
+
+  useEffect(() => {
+    setIdKey(Math.floor(Math.random() * 100000) + 1);
+    return () => cancelaEnvio();
+    // eslint-disable-next-line 
+  }, [])
+
+  async function carregaArquivo(arquivo) {
+    const res = await fileUploader(arquivo, extensao || '', setProgresso, enviarDireto || false);
+    // document.getElementById(`FileUploader_${idKey}`).value = ''
+    if (res.dsErro && funcaoRetorno) manejaRetorno(res);
+    else if (enviarDireto) {
+      if (estadoPausado) {
+        setInfoPausa(res);
+      } else {
+        if (funcaoRetorno) manejaRetorno(res);
+        setProgresso(0);
+        setAguardando({});
+        setInfoPausa({});
+      }
+    } else setAguardando(res);
+  }
+
+  async function enviaArquivo() {
+    const res = estadoPausado ? await retomaUpload(infoPausa) : await confirmFileUpload(aguardando, setProgresso);
+    if (estadoPausado) {
+      setInfoPausa(res);
+    } else {
+      if (funcaoRetorno) manejaRetorno(res);
+      setProgresso(0);
+      setAguardando({});
+      setInfoPausa({});
+    }
+  }
+
+  async function cancelaEnvio() {
+    if (idProtocolo) {
+      const res = await cancelFileUpload({ idProtocolo: idProtocolo });
+      if (funcaoRetorno) manejaRetorno(res);
+      idProtocolo = undefined;
+      tamLote = undefined;
+      lote = undefined;
+    }
+    setProgresso(0);
+    setAguardando({});
+    setInfoPausa({});
+    estadoPausado = false;
+  }
+
+  function manejaRetorno(res) {
+    if (res.status) {
+      switch (res.tpStatus) {
+        case '0':
+          funcaoRetorno({ dsStatus: 'Preparando Recebimento', ...res });
+          break;
+        case '1':
+          funcaoRetorno({ dsStatus: 'Recebendo Arquivo', ...res });
+          break;
+        case '2':
+          funcaoRetorno({ dsStatus: 'Arquivo Recebido', ...res });
+          break;
+        case '3':
+          funcaoRetorno({ dsStatus: 'Arquivo Disponível', ...res });
+          break;
+        case '4':
+          funcaoRetorno({ dsStatus: 'Arquivo Entregue ao Destinatário', ...res });
+          break;
+        case '8':
+          funcaoRetorno({ dsStatus: 'Erro no Recebimento', ...res });
+          break;
+        case '9':
+          funcaoRetorno({ dsStatus: 'Envio Cancelado', ...res });
+          break;
+        default:
+          funcaoRetorno(res);
+          break;
+      }
+    } else {
+      funcaoRetorno(res);
+    }
+  }
+
+  if (variant === 'compact') return (
+    <div>
+      {(progresso !== 0 && progresso !== 100) && (
+        <div style={{ width: 'max-content' }}>
+          <div style={{ width: '65px', display: 'flex', justifyContent: 'center' }}>
+            <CircularProgress variant='static' value={progresso} />
+            <p style={{ position: 'absolute', top: '25px' }}>{progresso.toFixed(0)}%</p>
+          </div>
+          <div style={{ width: '100px' }}>
+            {estadoPausado ?
+              <button className='btn btn-default' style={estiloBotoesCompact} onClick={() => enviaArquivo()}><i className='glyph-icon icon-play' title='Continuar'></i></button>
+              :
+              <button className='btn btn-default' style={estiloBotoesCompact} onClick={() => pausaUpload()}><i className='glyph-icon icon-pause' title='Pausar'></i></button>
+            }
+            <button className='btn btn-default' style={estiloBotoesCompact} onClick={() => cancelaEnvio()}><i className='glyph-icon icon-stop' title='Cancelar'></i></button>
+          </div>
+        </div>
+      )}
+      {(progresso === 0 && !aguardando.name) && (
+        <div>
+          <input id={`FileUploader_${idKey}`} className='float-left' type='file' onChange={e => {
+            carregaArquivo(e);
+          }} style={{ display: 'none' }} />
+          <button className='btn btn-default' style={{ width: '50px', padding: '0px', border: 0, borderRadius: '15px' }} onClick={() => document.getElementById(`FileUploader_${idKey}`).click()}>
+            <svg viewBox='0 0 1000 1000'>
+              <g transform='translate(0.000000,512.000000) scale(0.100000,-0.100000)'>
+                <path d='M1137.2,4987.5c-187.6-65.1-325.5-204.9-390.6-394.4C718,4510.7,716,4114.4,716,120.7c0-3980.3,1.9-4390,30.6-4478.1c47.9-145.5,151.3-268,294.8-346.5l124.4-68.9l1378.5-5.7c758.2-1.9,1527.8-1.9,1711.6,0l333.1,5.7l-141.7,109.1c-78.5,59.4-225.9,195.3-331.2,300.6l-189.5,193.4H2628.7h-1300V118.8v4288.5h1837.9h1836l5.8-999.4l5.7-1001.3l47.9-95.7c59.4-122.5,174.2-237.4,296.8-296.8l95.7-47.9l1001.3-5.7l999.4-5.7v-371.4V1212l107.2-30.6c61.3-17.2,187.6-65.1,283.3-107.2c95.7-42.1,185.7-82.3,199.1-88.1c17.2-7.7,23,157,23,790.7V2579L6846.4,3800.4L5626.8,5020H3425.1C1474.2,5018.1,1213.8,5014.3,1137.2,4987.5z M7436,2584.7c0-9.6-409.7-15.3-909.4-15.3h-909.4v922.8v924.7l909.4-909.4C7026.3,3007.8,7436,2592.4,7436,2584.7z' />
+                <path d='M6191.6,712.3C5561.7,624.2,5035.2,363.9,4593-80.3c-402.1-404-656.7-880.7-769.6-1441.6c-45.9-235.5-45.9-773.5,1.9-1009c111-561,363.8-1035.7,767.7-1437.8c396.3-398.2,836.7-635.6,1403.3-760.1c268-59.3,811.8-59.3,1079.8,0c566.7,124.5,1007,361.9,1403.3,760.1c398.2,396.3,635.6,836.6,760.1,1403.3c55.5,248.9,59.4,790.7,9.6,1043.4c-113,561-367.6,1037.7-769.6,1441.6C8088.9,312.2,7631.3,561.1,7095.3,674C6882.7,720,6390.7,739.1,6191.6,712.3z M6861.7,90.1c693.1-105.3,1278.9-534.2,1589.1-1167.9c306.3-624.1,306.3-1275.1,0-1895.4c-624.1-1265.5-2251.5-1589.1-3325.5-664.3c-448,386.7-733.3,1012.8-733.3,1612c0,643.3,302.5,1269.3,807.9,1673.3C5663.2,19.2,6270.1,180.1,6861.7,90.1z' />
+                <path d='M6411.8-827c-70.8-32.5-134-99.5-160.8-170.4c-11.5-30.6-21.1-197.2-21.1-386.7v-333.1L5868-1723c-396.3-5.7-413.5-11.5-507.3-137.9c-55.5-74.7-55.5-254.6,0-329.3c93.8-126.4,111-132.1,505.4-137.9l361.8-5.7l5.7-361.9c5.7-394.4,11.5-411.6,137.9-505.4c74.7-55.5,254.6-55.5,329.3,0c126.4,93.8,132.1,111.1,137.8,505.4l5.8,361.9l361.8,5.7c394.4,5.7,411.6,11.5,505.4,137.9c55.5,74.7,55.5,254.6,0,329.3c-93.8,126.4-111.1,132.1-505.4,137.9l-361.8,5.7l-5.8,361.9c-5.7,394.4-11.5,411.6-134,503.5C6639.6-804,6488.3-790.6,6411.8-827z' />
+              </g>
+            </svg>
+          </button>
+        </div>
+      )}
+      {(progresso === 0 && aguardando.name) && (
+        <div>
+          <button className='btn btn-danger' style={{ width: '50px', padding: '0px', border: 0, borderRadius: '15px' }} onClick={() => setAguardando({})} title='Cancelar Envio'>
+            <i style={{ fontSize: '35px' }} className='glyph-icon icon-remove'></i>
+          </button>
+          <button className='btn btn-green' style={{ width: '50px', padding: '0px', border: 0, borderRadius: '15px' }} onClick={() => enviaArquivo()} title={`Enviar arquivo: '${aguardando.name}'`}>
+            <i style={{ fontSize: '35px' }} className='glyph-icon icon-send'></i>
+          </button>
+        </div>
+      )}
+    </div>
+  );
+  return (
+    <div>
+      {(progresso !== 0 && progresso !== 100) && (
+        <div style={{ display: 'flex' }}>
+          <div style={{ width: '100px' }}>
+            {estadoPausado ?
+              <button className='btn btn-default' style={estiloBotoes} onClick={() => enviaArquivo()}><i className='glyph-icon icon-play' title='Continuar'></i></button>
+              :
+              <button className='btn btn-default' style={estiloBotoes} onClick={() => pausaUpload()}><i className='glyph-icon icon-pause' title='Pausar'></i></button>
+            }
+            <button className='btn btn-default' style={estiloBotoes} onClick={() => cancelaEnvio()}><i className='glyph-icon icon-stop' title='Cancelar'></i></button>
+          </div>
+          <div style={{ width: '100%' }}>
+            <ColorLinearProgress variant='determinate' value={progresso} />
+            <p style={{ float: 'right' }}>{progresso.toFixed(2)}%</p>
+          </div>
+        </div>
+      )}
+      {(progresso === 0 && !aguardando.name) && (
+        <div>
+          <input id={`FileUploader_${idKey}`} className='float-left' type='file' onChange={e => {
+            carregaArquivo(e);
+          }} style={{ display: 'none' }} />
+          <button className='btn btn-default' style={{ width: '100%' }} onClick={() => document.getElementById(`FileUploader_${idKey}`).click()}>Selecionar Arquivo</button>
+        </div>
+      )}
+      {(progresso === 0 && aguardando.name) && (
+        <React.Fragment>
+          <div style={{ display: 'flex', width: '100%' }}>
+            <button className='btn btn-green' style={{ width: '100%' }} onClick={() => enviaArquivo()}>Enviar Arquivo</button>
+            <button className='btn btn-danger' style={{ width: 'max-content' }} onClick={() => setAguardando({})}>Cancelar</button>
+          </div>
+          <p style={{ width: '100%', overflow: 'hidden', textOverflow: 'ellipsis' }}>Arquivo a ser Enviado: {aguardando.name}</p>
+        </React.Fragment>
+      )}
+    </div>
+  );
+}
+
+FileUploader.propTypes = {
+  extensao: PropTypes.string,
+  funcaoRetorno: PropTypes.func,
+  enviarDireto: PropTypes.bool,
+  variant: PropTypes.string
+};

package/lib/components/FileUploader/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './FileUploader';
+export * from './FileUploader'; 

package/lib/components/FileUploader/index.js

@@ -0,0 +1 @@
+export { default } from './FileUploader';