react-atenas-components v2.1.20

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

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

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>
    );
  }
}

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>
    );
  }
}

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>
    );
  }
}

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>
    );
  }
}

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>
    );
  }
}

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

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>
    );
  }
}

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>
    );
  }
}

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>
    );
  }
}

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>
    );
  }
}