React Atenas Components

Esta biblioteca possui os componentes utilizados em projetos da Atenas Software.

Utilização:

Instale através do npm:

npm install react-atenas-components

Button

import { Button } from "react-atenas-components";

class App extends React.Component {
  onClick = () => {
    window.alert("Clicado");
  };

  render() {
    return (
      <div className="App">
        <h2>Botão</h2>
        <Button disabled={false} onClick={this.onClick}>
          Botão
        </Button>
      </div>
    );
  }
}

Props

onClick, children, className, disabled

| Props | Descrição | | --------- | --------------------------------------------------------- | | onClick | Função do evento ao pressionar o botão | | children | O conteúdo do botão | | className | Classes adicionais a adicionar no botão | | disabled | Booleano que descreve se o botão está desabilitado ou não | | icon | Icone do font-awesome do botão |

CheckBox

import { CheckBox } from "react-atenas-components";

class App extends React.Component {
  state = {
    teste1: true,
    teste2: false
  };

  checkEm = (event, nome) => {
    this.setState({
      [nome]: event.target.checked
    });
  };

  render() {
    return (
      <div className="App">
        <h2>CheckBox</h2>
        <CheckBox
          onChange={e => this.checkEm(e, "teste1")}
          value={this.state.teste1}
          name="teste1"
          titulo="CheckBox de Teste"
        />
        <CheckBox
          onChange={e => this.checkEm(e, "teste2")}
          value={this.state.teste2}
          name="teste2"
          titulo="CheckBox de Teste"
        />
      </div>
    );
  }
}

Props

| Props | Descrição | | --------- | ------------------------------------------------------------------ | | name | Identificador único do componente | | onClick | Função que define a ação a ser efetuada quando o botão for clicado | | className | Classe adicional a ser passada para o componente | | titulo | Nome exibido do componente |

DropDown

import { DropDown } from "react-atenas-components";

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h2>Botão</h2>
        <DropDown title="Opções">
          <ul>
            <li>teste</li>
            <li>teste</li>
            <li>teste</li>
            <li>teste</li>
            <li>teste</li>
            <li>teste</li>
            <li>teste</li>
            <li>teste</li>
          </ul>
        </DropDown>
      </div>
    );
  }
}

| Props | Descrição | | ----- | --------------- | | title | título do botão |

InputDate

import { InputDate } from "react-atenas-components";

class App extends React.Component {
  state = {
    date: new Date()
  };

  onChange = (e, filtro) => {
    this.setState({
      [filtro]: e.target.value
    });
    alert(e.target.value);
  };

  render() {
    return (
      <div className="App">
        <h2>InputDate</h2>
        <InputDate
          filtro="date"
          label="Teste"
          onChange={this.onChange}
          value={this.state.value}
        />
      </div>
    );
  }
}

| Props | Descrição | | -------- | ------------------------------------- | | filtro | identificador unico do input | | label | texto a ser exibido no label do input | | onChange | evento de mudança de valor | | value | valor do input |

Modal

import { Button, Modal } from "react-atenas-components";

class App extends React.Component {
  state = {
    open: false
  };

  onToggle = async () => {
    await this.setState({ open: !this.state.open });
  };

  render() {
    return (
      <div className="App">
        <h2>Modal</h2>
        <Button onClick={this.onToggle}>
          Abrir Modal
        </Button>
        <Modal open={this.state.open} onClose={this.onToggle}>
          <div>
            <h3>teste</h3>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
              enim ad minim veniam, quis nostrud exercitation ullamco laboris
              nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
              reprehenderit in voluptate velit esse cillum dolore eu fugiat
              nulla pariatur. Excepteur sint occaecat cupidatat non proident,
              sunt in culpa qui officia deserunt mollit anim id est laborum.
            </p>
          </div>
        </Modal>
      </div>
    );
  }
}

| Props | Descrição | | ------- | ------------------------------------------------- | | open | booleano que define se o modal está aberto ou não | | onClose | callback para fechar o modal |

Select

import { Select } from "react-atenas-components";

class App extends React.Component {
  state = {
    selected: null
  };

  onChange = (val) => {
    this.setState({
      selected: val
    })
  };

  render() {
    const options = [
      {
        value: 1,
        label: "Option 1"
      },
      {
        value: 2,
        label: "Option 2"
      },
      {
        value: 3,
        label: "Option 3"
      },
      {
        value: 4,
        label: "Option 4"
      }
    ]

    return (
      <div className="App">
        <h2>Select</h2>
        <Select
          options={options}
          filtro="select1"
          label="Select 1"
          onChange={this.onChange}
          value={this.state.selected}
          required={false}
          line={false}
        />
      </div>
    );
  }
}

| Props | Descrição | | -------- | --------------------------------------------------------------------- | | options | Opções da seleção (devem ser objetos com campos value e label) | | filtro | identificador único do select | | label | label do input | | onChange | callback de mudança do valor | | value | Valor do input | | required | Se for verdadeiro o select não permite selecionar um valor indefinido | | line | se o label fica na mesma linha ou fica acima do input |

SelectList

import { SelectList } from "react-atenas-components";

class App extends React.Component {
  state = {
    select1: null
  };

  onChange = (filtro, val) => {
    this.setState({
      [filtro]: val
    });
  };

  render() {
    const options = [
      {
        count: 25,
        value: "Opção 1"
      },
      {
        count: 2,
        value: "Opção 2"
      },
      {
        count: 13,
        value: "Opção 3"
      },
      {
        count: 6,
        value: "Opção 4"
      },
      {
        count: 10,
        value: "Opção 5"
      },
      {
        count: 10,
        value: "Opção 6"
      },
      {
        count: 10,
        value: "Opção 7"
      },
      {
        count: 10,
        value: "Opção 8"
      }
    ];

    return (
      <div className="App">
        <h2>Select</h2>
        <SelectList
          onSelectFiltro={this.onChange}
          filtro="select1"
          selecionado={this.state.select1}
          list={options}
        />
      </div>
    );
  }
}

| Props | Descrição | | -------------- | ---------------------------------------------------- | | onSelectFiltro | Callback quando um item é clicado | | filtro | Identificador único da lista | | selecionado | Valor selecionado da lista | | list | lista de opções com objetos com campos value e count |

Table

import { Table } from "react-atenas-components";

class App extends React.Component {
  state = {
    select1: null
  };

  onChange = (filtro, val) => {
    this.setState({
      [filtro]: val
    });
  };

  render() {
    const options = [
      {
        count: 25,
        value: "Opção 1"
      },
      {
        count: 2,
        value: "Opção 2"
      },
      {
        count: 13,
        value: "Opção 3"
      },
      {
        count: 6,
        value: "Opção 4"
      },
      {
        count: 10,
        value: "Opção 5"
      },
      {
        count: 10,
        value: "Opção 6"
      },
      {
        count: 10,
        value: "Opção 7"
      },
      {
        count: 10,
        value: "Opção 8"
      }
    ];

    const columns = [
      { label: 'Contagem', key: 'count', width: '40%' },
      // { label: 'Valor Dinheiro', key: 'value', width: '30%', format: 'money' },
      { label: 'Valor', key: 'value', width: '30%' },
    ]

    return (
      <div className="App" style={{ flexDirection: 'column', display: 'flex', minHeight: '300px', justifyContent: 'stretch' }}>
        <h2>Table</h2>
        <Table
          list={options}
          columns={columns}
        />
      </div>
    );
  }
}

Columns Prop

| Columns Prop | Descrição | | ------------ | -------------------------------------------------------------------------------------------------------------------- | | label | descrição no header da coluna | | title | Hint que aparece ao deixar o mouse sobre a coluna | | key | chave do valor na lista | | width | largura da coluna | | callback | callback ao editar a coluna (se for editável) | | idKey | identificador da linha sendo alterada | | type | tipo do input (se for editável) (pode ser 'number', 'text', 'date', 'datetime-local', 'email', 'month' e 'checkbox') | | render | calback de render que sobrescreve o que é exibido na coluna | | format | formatação especial da coluna ('date', 'boolean', money) | | filter | filtro gerado automaticamente com os dados da coluna ('select', 'date') |

| Props | Descrição | | -------------- | ----------------------------------------------------------------------------------------- | | columns | lista de colunas como descrito acima | | list | lista de elementos a serem exibidos | | printable | se verdadeiro, exibe um botão para imprimir os dados da tabela | | renderHeader | (se printable for verdadeiro) header a ser exibido na impressão | | serverside | se verdadeiro a pesquisa requer um callback e um valor para funcionar do lado do servidor | | searchCallback | callback de pesquisa | | searchValue | valor da pesquisa | | loading | exibe status de carregamento no final da lista (true/false) | | onScrollEnd | callback ao atingir o final da lista |

Loading

import { Loading } from "react-atenas-components";

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h2>Loading</h2>
        <Loading message="Carrengando as paradas ae" />
      </div>
    );
  }
}

| Props | Descrição | | ------- | ------------------------------------------------------------ | | message | Mensagem opcional que aparece acima do icone de carregamento |

SearchBar

import { SearchBar } from "react-atenas-components";

class App extends React.Component {
  state = {
    search: ""
  };

  onType = e => {
    this.setState({
      search: e.target.value
    });
  };

  render() {
    return (
      <div className="App">
        <h2>Loading</h2>
        <SearchBar
          searchCallback={this.onType}
          value={this.state.search}
          placeholder="Digite aqui para pesquisar"
          small={false}
        />
      </div>
    );
  }
}

| Props | Descrição | | -------------- | --------------------------------------------- | | searchCallback | callback ao digitar na barra | | value | valor do campo | | placeholder | placeholder exibido quando a barra está vazia | | small | se verdadeiro mostra uma barra menor |

Slider

import { Slider } from "react-atenas-components";

class App extends React.Component {
  state = {
    slider: 100
  };

  checkEm = (event, nome) => {
    this.setState({
      [nome]: event.target.checked
    });
  };

  render() {
    return (
      <div className="App">
        <h2>Slider</h2>
        <Slider
          min={80}
          max={120}
          value={this.state.slider}
          onChange={slider => this.setState({ slider })}
          onMouseUp={slider => this.setState({ slider })}
        />
      </div>
    );
  }
}

| Props | Descrição | | --------- | -------------------------------------------- | | min | Valor mínimo do Slider | | max | Valor máximo do Slider | | value | Valor atual do Slider | | onChange | Callback do evento de movimentação do slider | | onMouseUp | Callback do evento de "Soltar o slider" |

Tabs

import { Tabs } from "react-atenas-components";

class App extends React.Component {
  state = {
    slider: 100
  };

  checkEm = (event, nome) => {
    this.setState({
      [nome]: event.target.checked
    });
  };

  render() {
    return (
      <div className="App">
        <h2>Slider</h2>
        <Tabs>
          <div label="Aba 1">
            <ul>
              <li>item 1</li>
              <li>item 2</li>
            </ul>
          </div>
          <div label="Aba 2">
            <ul>
              <li>asdfasdf</li>
              <li>asdfadsfasdf</li>
            </ul>
          </div>
          <div label="Aba 3">Batata</div>
        </Tabs>
      </div>
    );
  }
}

Os filhos do componente Tabs devem ser div que contém uma prop label, esta prop é utilizada para o título da aba

Input

import { Input } from "react-atenas-components";

class App extends React.Component {
  state = {
    text: ""
  };

  onType = e => {
    this.setState({
      text: e.target.value
    });
  };

  render() {
    return (
      <div className="App">
        <h2>Loading</h2>
        <Input
          searchCallback={this.onType}
          value={this.state.text}
          placeholder="Placeholder"
        />
      </div>
    );
  }
}

| Props | Descrição | | -------------- | --------------------------------------------- | | searchCallback | callback ao digitar no input | | value | valor do campo | | placeholder | placeholder exibido quando o input está vazio | | small | se verdadeiro mostra uma barra menor | | icon | Icone do lado esquerdo |