table-semantic

table.jsx

import React, { Component } from "react"
import { Form, Radio, Tab, Icon, Table, Image, Label, Segment, Grid, Divider, Accordion } from "semantic-ui-react"
import ReviewFlight from "../review-flight/ReviewFlight"
import classnames from "classnames"
import Collapsible from "react-collapsible"

const radioButton = () => (
  <Form.Field>
    <Radio name="radioGroup" />
  </Form.Field>
);

class FlightResult extends Component {
  constructor(props) {
    super(props)
    this.state = { show: false, activeIndex: 0 }
  }

    handleClick = (e, titleProps) => {
    const { index } = titleProps
    const { activeIndex } = this.state
    const newIndex = activeIndex === index ? -1 : index

    this.setState({ activeIndex: newIndex })
    }

  handleChange = (e, { value }) => {
    this.setState({
      show: false,
      value
    })
  }
  render() {
    return (
      <Table className="tabela-buscador tabela-voos ui table accordion" compact>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell className="link-cabecalho-tabela">
              SELECIONAR VOO
            </Table.HeaderCell>
            <Table.HeaderCell className="link-cabecalho-tabela">
              VOO
            </Table.HeaderCell>
            <Table.HeaderCell className="link-cabecalho-tabela">
              ORIGEM
            </Table.HeaderCell>
            <Table.HeaderCell className="link-cabecalho-tabela">
              PARTIDA
            </Table.HeaderCell>
            <Table.HeaderCell className="link-cabecalho-tabela">
              PARADA
            </Table.HeaderCell>
            <Table.HeaderCell className="link-cabecalho-tabela">
              CHEGADA
            </Table.HeaderCell>
            <Table.HeaderCell className="link-cabecalho-tabela">
              DESTINO
            </Table.HeaderCell>
            <Table.HeaderCell className="link-cabecalho-tabela pontos">
              PONTOS
            </Table.HeaderCell>
            <Table.HeaderCell className="link-cabecalho-tabela pontos">
              PREÇO
            </Table.HeaderCell>
          </Table.Row>
        </Table.Header>

        <Table.Body className="ui title">
          {this.props.data.map((row, i) => {
            return (
              (this.CiaClass = classnames({
                ciaAzul: row.airline == "Azul",
                ciaGol: row.airline == "GOL (G3)",
                ciaLatam: row.airline == "LATAM AIRLINES BRASIL",
                ciaAvianca: row.airline == "Avianca Brasil",
                ciaDelta: row.airline == "DELTA",
                ciaCopa: row.airline == "COPA"
              })),
              (       
                <Table.Row>
                  <Table.Cell>Selecione</Table.Cell>
                  <Table.Cell>
                    <div>
                      <Image size="tiny" className={this.CiaClass} />
                      {row.flightNumber}
                    </div>
                  </Table.Cell>
                  <Table.Cell>{row.from}</Table.Cell>
                  <Table.Cell>{row.departureDate.slice(11, 16)}</Table.Cell>
                  <Table.Cell>{row.stops} paradas</Table.Cell>
                  <Table.Cell>{row.arrivalDate.slice(11, 16)}</Table.Cell>
                  <Table.Cell>{row.to}</Table.Cell>
                  <Table.Cell>{row.miles}</Table.Cell>

                  <Table.Cell>
                    {" "}
                    R$ 100.00
                    <Label as="a" color="teal" tag>
                      Promoção
                    </Label>
                  </Table.Cell>
                </Table.Row>
              )
            );
          })}
          <ReviewFlight data={this.state} />
        </Table.Body>
      </Table>
    )
  }
}

export default FlightResult;