Skip to content

Instantly share code, notes, and snippets.

@luizhenriquesoares
Last active April 8, 2018 02:36
Show Gist options
  • Save luizhenriquesoares/baa0f91723d02ea33e14f3e4936c8f93 to your computer and use it in GitHub Desktop.
Save luizhenriquesoares/baa0f91723d02ea33e14f3e4936c8f93 to your computer and use it in GitHub Desktop.
table-semantic
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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment