argous 1.2.132 → 1.2.136

package/lib/components/ArgousProgressBar/ArgousProgressBar.js

@@ -0,0 +1,167 @@
+import { Grid, makeStyles, Collapse, Grow, useTheme } from '@material-ui/core';
+import PropTypes from 'prop-types';
+import React from 'react';
+
+const useStyles = makeStyles(theme => ({
+  progressContainer: {
+    '& > div': {
+      padding: '0px !important'
+    }
+  },
+  progressBorder: {
+    border: props => `3px solid ${props.borderColor || props.preset.borderColor}`,
+    borderRadius: '15px',
+  },
+  progressBack: {
+    height: '20px',
+    padding: '2px',
+    position: 'relative'
+  },
+  progressBar: {
+    width: '100%',
+    height: '100%',
+    borderRadius: '10px',
+    background: props => props.percnt === 0 ? theme.palette.background.paper : props.percnt > 100 ? props.fullBarColor || props.preset.fullBarColor : props.barColor || props.preset.barColor,
+  },
+  progressCover: {
+    height: '100%',
+    transition: '300ms',
+    background: props => props.percnt > 99 ? 'transparent' : theme.palette.background.paper,
+    position: 'absolute',
+    top: '0px',
+    right: '0',
+    width: props => `${100 - props.percnt}%`,
+    minWidth: '5%',
+    maxWidth: '95%',
+    borderRadius: '0px 10px 10px 0px;',
+  },
+  topIndicator: {
+    zIndex: 1,
+    transition: '300ms',
+    display: 'block',
+    position: 'relative',
+    width: 'max-content',
+    margin: '0 2px',
+    paddingLeft: props => props.percnt > 94 ? '94%' : props.percnt < 5 ? '0' : `${props.percnt}%`,
+    transform: props => props.percnt === 0 ? `translate(${props.compact ? '-25px, 1px' : '-10px, 0px'})` : props.percnt > 5 ? `translate(${props.compact ? '-30px, 1px' : '-15px, 0px'})` : '',
+    '& p': {
+      margin: '0 0 5px',
+      border: props => props.compact ? 0 : `2px solid ${props.topIndicatorColor || props.preset.indicatorColor}`,
+      padding: '0px 3px',
+      borderRadius: '5px',
+      minWidth: '25px',
+      textAlign: 'center',
+      cursor: 'default',
+      lineHeight: '12px',
+      height: '24px',
+    },
+    '& p::before': {
+      content: '""',
+      position: 'relative',
+      bottom: '-22px',
+      left: '0px',
+      width: '0px',
+      height: '0px',
+      borderTop: props => `5px solid ${props.topIndicatorColor || props.preset.indicatorColor}`,
+      borderLeft: '10px solid transparent',
+      borderRight: '10px solid transparent',
+      display: 'block',
+      opacity: props => props.compact ? 0 : 1
+    },
+  },
+  rightIndicator: {
+    display: 'block',
+    position: 'relative',
+    width: 'max-content',
+    '& p': {
+      margin: '0 7px 0',
+      border: props => `2px solid ${props.rightIndicatorColor || props.preset.indicatorColor}`,
+      padding: '0px 3px',
+      borderRadius: '5px',
+      minWidth: '25px',
+      textAlign: 'center',
+      minHeight: '24px',
+      cursor: 'default'
+    },
+    '& p::before': {
+      content: '""',
+      position: 'absolute',
+      bottom: '2px',
+      left: '0px',
+      width: '0px',
+      height: '0px',
+      borderTop: '10px solid transparent',
+      borderBottom: '10px solid transparent',
+      borderRight: props => `8px solid ${props.rightIndicatorColor || props.preset.indicatorColor}`,
+    },
+  },
+  collapse: {
+    height: props => props.compact ? '0px !important' : undefined
+  }
+}));
+
+const selectPreset = (preset, palette) => {
+  switch (preset) {
+    case 'secondary':
+      return { fullBarColor: palette.secondary.dark, borderColor: palette.secondary.dark, indicatorColor: palette.secondary.dark, barColor: `linear-gradient(90deg, ${palette.secondary.light} 0%, ${palette.secondary.main} 50%, ${palette.secondary.dark} 100%)` };
+    case 'success':
+      return { fullBarColor: palette.success.dark, borderColor: palette.success.dark, indicatorColor: palette.success.dark, barColor: `linear-gradient(90deg, ${palette.success.light} 0%, ${palette.success.main} 50%, ${palette.success.dark} 100%)` };
+    case 'info':
+      return { fullBarColor: palette.info.dark, borderColor: palette.info.dark, indicatorColor: palette.info.dark, barColor: `linear-gradient(90deg, ${palette.info.light} 0%, ${palette.info.main} 50%, ${palette.info.dark} 100%)` };
+    case 'warning':
+      return { fullBarColor: palette.warning.dark, borderColor: palette.warning.dark, indicatorColor: palette.warning.dark, barColor: `linear-gradient(90deg, ${palette.warning.light} 0%, ${palette.warning.main} 50%, ${palette.warning.dark} 100%)` };
+    case 'danger':
+      return { fullBarColor: palette.error.dark, borderColor: palette.error.dark, indicatorColor: palette.error.dark, barColor: `linear-gradient(90deg, ${palette.error.light} 0%, ${palette.error.main} 50%, ${palette.error.dark} 100%)` };
+    case 'hot':
+      return { fullBarColor: 'rgba(244,67,54,1)', borderColor: '#d84315', indicatorColor: '#f44336', barColor: 'linear-gradient(90deg, rgba(255,235,59,1) 0%, rgba(255,152,0,1) 50%, rgba(244,67,54,1) 100%)' };
+    case 'cold':
+      return { fullBarColor: '#673ab7', borderColor: '#5e35b1', indicatorColor: '#512da8', barColor: 'linear-gradient(90deg, #2196f3 0%, #3f51b5 50%, #673ab7 100%)' };
+    default:
+      return { fullBarColor: palette.primary.dark, borderColor: palette.primary.dark, indicatorColor: palette.primary.dark, barColor: `linear-gradient(90deg, ${palette.primary.light} 0%, ${palette.primary.main} 50%, ${palette.primary.dark} 100%)` };
+  }
+};
+
+export default function ProgressBar({ valueLabel, valueSuffix, maxValueSuffix, maxValueLabel, value, maxValue, rightIndicatorColor, topIndicatorColor, borderColor, barColor, fullBarColor, preset, compact, className }) {
+  const theme = useTheme();
+  const percnt = maxValue ? value * 100 / maxValue : 0;
+  const classes = useStyles({ percnt, rightIndicatorColor, topIndicatorColor, borderColor, barColor, fullBarColor, preset: selectPreset(preset, theme.palette), compact });
+  return (
+    <Grid container spacing={2} className={`${classes.progressContainer} ${className}`} style={{ marginTop: compact ? '-10px' : undefined }}>
+      <Grid item xs={10} style={{ maxWidth: '80%', flexBasis: '80%' }}>
+        <Collapse in={value > 0} className={classes.collapse}>
+          <div className={classes.topIndicator}>
+            <p title={valueLabel || 'Minutos Realizados'}>{value}{valueSuffix}</p>
+          </div>
+        </Collapse>
+      </Grid>
+      <Grid item xs={2} style={{ maxWidth: '20%', flexBasis: '20%' }}></Grid>
+      <Grid item xs={10} style={{ maxWidth: '80%', flexBasis: '80%' }}>
+        <div item title={`Porcentagem ${percnt.toFixed(2)}%`} className={classes.progressBorder}>
+          <div className={classes.progressBack}>
+            <div className={classes.progressBar}></div>
+            <div className={classes.progressCover}></div>
+          </div>
+        </div>
+      </Grid>
+      <Grid item xs={2} style={{ maxWidth: '20%', flexBasis: '20%' }}>
+        <Grow in={maxValue > 0}>
+          <div className={classes.rightIndicator}>
+            <p title={maxValueLabel || 'Minutos Previstos'}>{maxValue}{maxValueSuffix}</p>
+          </div>
+        </Grow>
+      </Grid>
+    </Grid>
+  );
+}
+
+ProgressBar.propTypes = {
+  value: PropTypes.number,
+  maxValue: PropTypes.number,
+  rightIndicatorColor: PropTypes.string,
+  topIndicatorColor: PropTypes.string,
+  borderColor: PropTypes.string,
+  barColor: PropTypes.string,
+  fullBarColor: PropTypes.string,
+  compact: PropTypes.bool,
+  preset: PropTypes.oneOf(['default', 'primary', 'secondary', 'success', 'info', 'warning', 'danger', 'hot', 'cold'])
+};

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

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

package/lib/components/ArgousProgressBar/index.js

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

package/lib/components/ArgousSimpleTable/ArgousSimpleTable.d.ts

@@ -0,0 +1,8 @@
+export interface ArgousSimpleTableProps {}
+/**
+ * @deprecated
+ * @param props 
+ */
+declare function ArgousSimpleTable(props: ArgousSimpleTableProps): JSX.Element
+
+export default ArgousSimpleTable;

package/lib/components/ArgousSimpleTable/ArgousSimpleTable.js

@@ -0,0 +1,241 @@
+import AgPagination from '../ArgousPagination';
+import Paper from '@material-ui/core/Paper';
+import { makeStyles } from '@material-ui/core/styles';
+import Table from '@material-ui/core/Table';
+import TableBody from '@material-ui/core/TableBody';
+import TableCell from '@material-ui/core/TableCell';
+import TableContainer from '@material-ui/core/TableContainer';
+import TableHead from '@material-ui/core/TableHead';
+import TableRow from '@material-ui/core/TableRow';
+import React, { useState, useEffect } from 'react';
+
+/**
+ * @deprecated 
+ */
+const ArgousSimpleTable = (props) => {
+
+  const useStyles = makeStyles({
+    table: {
+      minWidth: 650,
+    },
+  });
+
+  const [ctrlPgn, setCtrlPgn] = useState({ acao: '', pgAtl: 1, qtRegs: 0 });
+  const [iniciado, setIniciado] = useState(false);
+  const [tpOrdenacao, setTpOrdenacao] = useState({ tpOrdem: 'D' });
+  const [listaChildrens, setListaChildrens] = useState([]);
+
+  const classes = useStyles();
+
+  function getCellContent(vlr, line) {
+
+    if (props.columnOptions) {
+
+      for (const element of props.columnOptions) {
+
+        if (element.alias === line) {
+          return element.customJsx({ value: vlr });
+        }
+      }
+    }
+
+    return vlr;
+  }
+
+  function clickNaLinha(row) {
+    if (props.onClick) {
+      props.onClick(props.rows[row]);
+    }
+  }
+
+  function onChangePage(prm) {
+    var pgAtual = props.ctrlPgnReturn.pgAtl;
+    if (prm === 'P') {
+      if (pgAtual > 1) {
+        setCtrlPgn({ ...ctrlPgn, acao: prm, qtPaginas: props.ctrlPgnReturn.qtPaginas, pgAtl: pgAtual, qtRegs: props.ctrlPgnReturn.qtRegs });
+      }
+    } else if (pgAtual < props.ctrlPgnReturn.qtPaginas) {
+      setCtrlPgn({ ...ctrlPgn, acao: prm, qtPaginas: props.ctrlPgnReturn.qtPaginas, pgAtl: pgAtual, qtRegs: props.ctrlPgnReturn.qtRegs });
+    }
+  }
+
+  function onChangeRowsPerPage(prm) {
+    setCtrlPgn({ ...ctrlPgn, qtRegs: prm });
+  }
+
+  function onChangePageNumber(prm) {
+    setCtrlPgn({ ...ctrlPgn, acao: `S=${parseInt(prm)}`, pgAtl: parseInt(prm), qtRegs: props.ctrlPgnReturn.qtRegs, qtPaginas: props.ctrlPgnReturn.qtPaginas });
+  }
+
+  function selecionaOrdenacao(prm) {
+    if (tpOrdenacao.indOrdem) {
+      if (tpOrdenacao.indOrdem === prm) {
+        let tpOrdem = 'D';
+        if (tpOrdenacao.tpOrdem === 'D') {
+          tpOrdem = 'A';
+        }
+        setTpOrdenacao({ indOrdem: prm, tpOrdem: tpOrdem });
+        setCtrlPgn({ ...ctrlPgn, acao: undefined, indOrdem: prm, tpOrdem: tpOrdem, pgAtl: parseInt(props.ctrlPgnReturn.pgAtl), qtRegs: props.ctrlPgnReturn.qtRegs, qtPaginas: props.ctrlPgnReturn.qtPaginas });
+
+      } else {
+        setTpOrdenacao({ indOrdem: prm, tpOrdem: 'D' });
+        setCtrlPgn({ ...ctrlPgn, acao: undefined, indOrdem: prm, tpOrdem: 'D', pgAtl: parseInt(props.ctrlPgnReturn.pgAtl), qtRegs: props.ctrlPgnReturn.qtRegs, qtPaginas: props.ctrlPgnReturn.qtPaginas });
+      }
+    } else {
+      let tpOrdem = 'D';
+      if (tpOrdenacao.tpOrdem) {
+        if (tpOrdenacao.tpOrdem === 'D') {
+          tpOrdem = 'A';
+        }
+      }
+      setTpOrdenacao({ indOrdem: prm, tpOrdem: tpOrdem });
+      setCtrlPgn({ ...ctrlPgn, acao: undefined, indOrdem: prm, tpOrdem: tpOrdem, pgAtl: parseInt(props.ctrlPgnReturn.pgAtl), qtRegs: props.ctrlPgnReturn.qtRegs, qtPaginas: props.ctrlPgnReturn.qtPaginas });
+
+    }
+  }
+
+  function listaFilhos() {
+    const { children } = props;
+
+    if (children) {
+      if (!children.length) {
+        return [children];
+      }
+      return children;
+    }
+
+    return [];
+  }
+
+  useEffect(() => {
+    if (iniciado) {
+      props.ctrlPgn({ ctrlPgn });
+    } else {
+      setListaChildrens(listaFilhos());
+      setIniciado(true);
+    }
+  }, [ctrlPgn]);
+
+  return (
+    <div>
+      <TableContainer component={Paper}>
+
+        <Table className={classes.table} size='small' style={{ tableLayout: 'fixed', width: '100%' }}>
+          <TableHead>
+            <TableRow>
+              {props.head.map((coluna, index) => {
+
+                let width = 'auto';
+
+                if (props.columnWidths && props.columnWidths[index]) {
+                  width = props.columnWidths[index];
+                }
+                var ordena = false;
+                if (props.ctrlPgnReturn && props.ctrlPgnReturn.ordCols) {
+                  ordena = props.ctrlPgnReturn.ordCols[index];
+                }
+
+                if (ordena) {
+                  return (
+                    <TableCell
+                      onClick={() => selecionaOrdenacao(index)}
+                      style={{ width: `${width}`, whiteSpace: 'nowrap', cursor: 'pointer', fontSize: 14 }}
+                      key={index}>
+                      {coluna}
+                      {(tpOrdenacao.indOrdem !== undefined) && (tpOrdenacao.indOrdem !== index) &&
+                        <i style={{ right: '-10px', position: 'relative', color: '#999' }} className='glyph-icon tooltip-button demo-icon icon-sort' ></i>
+                      }
+                      {(tpOrdenacao.indOrdem === undefined) && (tpOrdenacao.indOrdem !== index) &&
+                        <i style={{ right: '-10px', position: 'relative' }} className='glyph-icon tooltip-button demo-icon icon-sort' ></i>
+                      }
+                      {(tpOrdenacao.indOrdem !== undefined) && (tpOrdenacao.indOrdem === index) && (tpOrdenacao.tpOrdem === 'A') &&
+                        <i style={{ right: '-10px', position: 'relative' }} className='glyph-icon tooltip-button demo-icon icon-sort-amount-asc' ></i>
+                      }
+                      {(tpOrdenacao.indOrdem !== undefined) && (tpOrdenacao.indOrdem === index) && (tpOrdenacao.tpOrdem === 'D') &&
+                        <i style={{ right: '-10px', position: 'relative' }} className='glyph-icon tooltip-button demo-icon icon-sort-amount-desc' ></i>
+                      }
+                    </TableCell>);
+                }
+                return (<TableCell style={{ width: `${width}`, fontSize: 14 }} key={index}>{coluna}</TableCell>);
+
+              })}
+              {listaChildrens.map((item, index) => (
+                <TableCell style={{ width: '30px', fontSize: 14 }} key={`act${index}`}> </TableCell>
+              ))}
+            </TableRow>
+          </TableHead>
+          <TableBody>
+
+
+            {props.rows && props.rows.map((linha, index) => {
+
+              if (props.maxRows) {
+                if (index >= props.maxRows) {
+                  return null;
+                }
+              }
+
+              var estilo = {
+                cursor: 'pointer'
+              };
+
+              if (props.onClick === undefined) {
+                estilo = { cursor: 'text' };
+              }
+
+              if (props.indexes) {
+
+                return (
+                  <TableRow key={index} style={estilo} onClick={() => clickNaLinha(index)}>
+
+                    {props.indexes.map((ind, keyInd) => {
+
+                      let oEstilo = {};
+                      if (props.columnStyles && props.columnStyles[keyInd]) {
+                        oEstilo = props.columnStyles[keyInd];
+                      }
+
+                      let aClasse = '';
+
+                      if (props.columnClasses && props.columnClasses[keyInd]) {
+                        aClasse = props.columnClasses[keyInd];
+                      }
+
+                      return (<TableCell className={aClasse} style={oEstilo} key={keyInd}>{getCellContent(linha[ind], keyInd)}</TableCell>);
+                    })}
+                    {listaChildrens.map((act, index3) => (
+                      <TableCell style={{ width: '30px' }} key={`act_${index3}`}>
+                        {React.cloneElement(act, { item: linha })}
+                      </TableCell>
+                    ))}
+                  </TableRow>
+                );
+              }
+
+              return (
+                <TableRow key={index} style={estilo} onClick={() => clickNaLinha(index)}>
+                  {linha.map((ln, keyInd) => {
+                    return (<TableCell style={{ whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden' }} key={keyInd}>{getCellContent(ln, keyInd)}</TableCell>);
+                  })}
+                </TableRow>
+              );
+
+            })}
+          </TableBody>
+        </Table>
+      </TableContainer>
+      {(props.ctrlLinhasPorPagina) && (props.ctrlPgnReturn) &&
+        <AgPagination
+          linhasPorPagina={props.ctrlLinhasPorPagina}
+          paginas={props.ctrlPgnReturn.qtPaginas}
+          ctrlPgnReturn={props.ctrlPgnReturn}
+          onChangePage={onChangePage}
+          onChangeRowsPerPage={onChangeRowsPerPage}
+          onChangePageNumber={onChangePageNumber}
+        />
+      }
+    </div>
+  );
+};
+
+export default ArgousSimpleTable;

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

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

package/lib/components/ArgousSimpleTable/index.js

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

package/lib/components/AutoComplete/AutoComplete.d.ts

@@ -0,0 +1,8 @@
+export interface AutoCompleteProps {}
+/**
+ * @deprecated
+ * @param props 
+ */
+declare function AutoComplete(props: AutoCompleteProps): JSX.Element
+
+export default AutoComplete;

package/lib/components/AutoComplete/AutoComplete.js

@@ -0,0 +1,189 @@
+import { Input, SimpleTable } from './../';
+import { createField, getField, setField } from '../../fieldsRedux';
+import { serverAction } from '../../utils/api';
+import PropTypes from 'prop-types';
+import React, { Component } from 'react';
+import { Scrollbars } from 'react-custom-scrollbars';
+
+/**
+ * @deprecated 
+ */
+class AutoComplete extends Component {
+  state = {
+    typeMessage: -1,
+    resultHeight: 0
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.typeMessage !== 0 && this.state.typeMessage === 0) {
+      const resultsDiv = document.getElementById(`results-${this.props.field}`);
+      if (resultsDiv)
+        this.setState({ resultHeight: resultsDiv.clientHeight });
+    }
+  }
+
+  componentWillUnmount() {
+    this.props.clearField(`results-${this.props.field}`);
+    clearTimeout(this.searchTimeout);
+    clearTimeout(this.blurTimeout);
+  }
+
+  changeTypeMessage = (value) => {
+    this.buscarServidorEMensagensFeedback(value);
+    this.removerSelecionadoSeHouverEdicao();
+  }
+
+  removerSelecionadoSeHouverEdicao = () => {
+    const selected = this.props.getField().selected;
+
+    if (selected) {
+      const { onChangeSelected } = this.props;
+
+      this.props.setField({ selected: undefined });
+
+      if (onChangeSelected)
+        onChangeSelected({});
+    }
+  }
+
+  buscarServidorEMensagensFeedback = (value) => {
+
+    const { dados = {} } = this.props;
+
+    clearTimeout(this.searchTimeout);
+
+    setField(`results-${this.props.field}`, { value: undefined });
+    this.setState({ typeMessage: 2, resultHeight: 50 });
+
+    this.searchTimeout = setTimeout(() => {
+
+      serverAction(this.props.method, { value, ...dados }).then(res => {
+
+        if (res.result) {
+          setField(`results-${this.props.field}`, { value: res.result });
+          this.setState({ typeMessage: 0, resultHeight: res.result.length * 38 });
+        } else {
+          this.setState({ typeMessage: 3, resultHeight: 50 });
+        }
+
+      });
+    }, 350);
+  }
+
+  focusTypeMessage = (e) => {
+    const thisField = this.props.getField();
+    const resultsData = getField(`results-${this.props.field}`, 'value');
+
+    if (!thisField.selected) {
+      if (resultsData.length === 0) {
+        this.setState({ typeMessage: 1, resultHeight: 50 });
+      } else {
+        this.setState({ typeMessage: 0, resultHeight: resultsData.length * 38 });
+      }
+    }
+
+    if (thisField.selected) {
+      e.target.select();
+    }
+  }
+
+  blurTypeMessage = (e) => {
+    const { onBlur } = this.props;
+
+    if (onBlur && typeof onBlur === 'function') {
+      onBlur(e);
+    }
+
+    this.blurTimeout = setTimeout(() => {
+      this.setState({ typeMessage: -1, resultHeight: 0 });
+    }, 250);
+  }
+
+  selectResult = (value) => {
+    const { alias, aliasInputValue, onChangeSelected } = this.props;
+
+    let v = '';
+
+    for (let a of aliasInputValue || alias) {
+      if (typeof value[a] !== 'undefined')
+        v += `${value[a].toString().trim()} `;
+    }
+
+    setField(this.props.field, 'value', v);
+    setField(this.props.field, 'selected', value);
+
+    if (onChangeSelected)
+      onChangeSelected(value);
+  }
+
+  render() {
+    const { typeMessage, resultHeight } = this.state;
+    const { field, placeholder, alias, inputClassName, dropdownClassName, dropdownMaxHeight, head, showOnlyResults } = this.props;
+
+    return (
+      <table className='argous-groupselect reset-border'>
+        <tbody>
+          <tr>
+            <td>
+              <Input
+                field={field}
+                onFocus={this.focusTypeMessage}
+                onBlur={this.blurTypeMessage}
+                onChange={this.changeTypeMessage}
+                fieldListener={this.fieldListener}
+                placeholder={placeholder}
+                className={inputClassName}
+              />
+            </td>
+          </tr>
+          <tr>
+            <td>
+              {typeMessage > -1 &&
+
+                <div className={dropdownClassName ? dropdownClassName : 'argous-list-dropdown'} style={{ height: !showOnlyResults ? resultHeight : typeMessage === 0 ? resultHeight : 0, maxHeight: dropdownMaxHeight }}>
+                  <Scrollbars>
+                    {typeMessage > 0 && !showOnlyResults && (
+                      <div className='padding-top-sm padding-bottom-sm color999 text-center'>
+                        {typeMessage === 1 && 'Escreva para começar a buscar'}
+                        {typeMessage === 2 && 'Pesquisando...'}
+                        {typeMessage === 3 && 'Nenhum resultado foi encontrado'}
+                      </div>
+                    )}
+
+                    <SimpleTable
+                      id={`results-${field}`}
+                      field={`results-${field}`}
+                      alias={alias}
+                      head={typeMessage === 0 ? head : undefined}
+                      onClick={this.selectResult}
+                      className='reset-margin'
+                    />
+                  </Scrollbars>
+                </div>
+              }
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    );
+  }
+}
+
+AutoComplete.propTypes = {
+  field: PropTypes.string.isRequired,
+  alias: PropTypes.array.isRequired,
+  method: PropTypes.string.isRequired,
+  head: PropTypes.array,
+  aliasInputValue: PropTypes.array,
+  placeholder: PropTypes.string,
+  inputClassName: PropTypes.string,
+  dropdownClassName: PropTypes.string,
+  fieldListener: PropTypes.func,
+  destroyOnUnmount: PropTypes.bool,
+  dropdownMaxHeight: PropTypes.number,
+  onChangeSelected: PropTypes.func,
+  showOnlyResults: PropTypes.bool,
+  dados: PropTypes.object
+};
+
+export default createField(AutoComplete, { disableInitField: true });

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

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

package/lib/components/AutoComplete/index.js

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