Permalink
Browse files

Extract components from Pilots panel, and add initial test data

Extracted PilotsList plus child components
Extracted PilotDetails
Added a test data entry to Pilots state, and passed to other components
  • Loading branch information...
markerikson committed Dec 11, 2016
1 parent 611cb6f commit c404584ae486609bd37d38306130a70e7e9d2935
@@ -0,0 +1,78 @@
import React from "react";
import {Form, Dropdown} from "semantic-ui-react";
const RANKS = [
{value: "Private", text : "Private"},
{value: "Corporal", text : "Corporal"},
{value: "Sergeant", text : "Sergeant"},
{value: "Lieutenant", text : "Lieutenant"},
{value: "Captain", text : "Captain"},
{value: "Major", text : "Major"},
{value: "Colonel", text : "Colonel"},
];
const MECHS = [
{value : "WHM-6R", text : "Warhammer WHM-6R"}
];
const PilotDetails = ({pilot={}}) =>{
const {
name = "",
rank = "",
age = "",
gunnery = "",
piloting = "",
mechType = "",
} = pilot;
return (
<Form size="large">
<Form.Field name="name" width={16}>
<label>Name</label>
<input
placeholder="Name"
value={name}
/>
</Form.Field>
<Form.Field name="rank" width={16}>
<label>Rank</label>
<Dropdown
fluid
selection
options={RANKS}
value={rank}
/>
</Form.Field>
<Form.Field name="age" width={6}>
<label>Age</label>
<input
placeholder="Age"
value={age}
/>
</Form.Field>
<Form.Field name="gunnery" width={6}>
<label>Gunnery</label>
<input
value={gunnery}
/>
</Form.Field>
<Form.Field name="piloting" width={6}>
<label>Piloting</label>
<input
value={piloting}
/>
</Form.Field>
<Form.Field name="mech" width={16}>
<label>Mech</label>
<Dropdown
fluid
selection
options={MECHS}
value={mechType}
/>
</Form.Field>
</Form>
);
}
export default PilotDetails;
@@ -0,0 +1 @@
export {default} from "./PilotDetails";
@@ -1,134 +1,55 @@
import React from "react";
import React, {Component} from "react";
import {connect} from "react-redux";
import {
Grid,
Table,
Segment,
Header,
Form,
Dropdown,
} from "semantic-ui-react";
const RANKS = [
{value: "Private", text : "Private"},
{value: "Corporal", text : "Corporal"},
{value: "Sergeant", text : "Sergeant"},
{value: "Lieutenant", text : "Lieutenant"},
{value: "Captain", text : "Captain"},
{value: "Major", text : "Major"},
{value: "Colonel", text : "Colonel"},
];
import PilotsList from "../PilotsList";
import PilotDetails from "../PilotDetails";
const MECHS = [
{value : "WHM-6R", text : "Warhammer WHM-6R"}
const pilots = [
{
name : "Natasha Kerensky",
rank : "Captain",
age : 52,
gunnery : 2,
piloting : 3,
mechType : "WHM-6R",
}
];
const Pilots = () => {
return (
<Segment>
<Grid>
<Grid.Column width={10}>
<Header as="h3">Pilot List</Header>
<Table celled>
<Table.Header>
<Table.Row>
<Table.HeaderCell width={5}>
Name
</Table.HeaderCell>
<Table.HeaderCell width={3}>
Rank
</Table.HeaderCell>
<Table.HeaderCell width={2}>
Age
</Table.HeaderCell>
<Table.HeaderCell width={2}>
Skills
</Table.HeaderCell>
<Table.HeaderCell width={4}>
Mech
</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>
Natasha Kerensky
</Table.Cell>
<Table.Cell>
Captain
</Table.Cell>
<Table.Cell>
52
</Table.Cell>
<Table.Cell>
2/3
</Table.Cell>
<Table.Cell>
WHM-6R
</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
</Grid.Column>
<Grid.Column width={6}>
<Header as="h3">Pilot Details</Header>
<Segment >
<Form size="large">
<Form.Field name="name" width={16} >
<label>Name</label>
<input
placeholder="Name"
value="Natasha Kerensky"
/>
</Form.Field>
<Form.Field name="rank" width={16}>
<label>Rank</label>
<Dropdown
fluid
selection
options={RANKS}
value="Colonel"
/>
</Form.Field>
<Form.Field name="age" width={6} >
<label>Age</label>
<input
placeholder="Age"
value="52"
/>
</Form.Field>
<Form.Field name="gunnery" width={6} >
<label>Gunnery</label>
<input
value="2"
/>
</Form.Field>
<Form.Field name="piloting" width={6} >
<label>Piloting</label>
<input
value="3"
/>
</Form.Field>
<Form.Field name="mech" width={16}>
<label>Mech</label>
<Dropdown
fluid
selection
options={MECHS}
value="WHM-6R"
/>
</Form.Field>
</Form>
</Segment>
</Grid.Column>
</Grid>
</Segment>
)
export class Pilots extends Component {
state = {
pilots : pilots,
}
render() {
const {pilots} = this.state;
// Use the first pilot as the "current" one for display, if available.
const currentPilot = pilots[0] || {};
return (
<Segment>
<Grid>
<Grid.Column width={10}>
<Header as="h3">Pilot List</Header>
<PilotsList pilots={pilots} />
</Grid.Column>
<Grid.Column width={6}>
<Header as="h3">Pilot Details</Header>
<Segment >
<PilotDetails pilot={currentPilot} />
</Segment>
</Grid.Column>
</Grid>
</Segment>
);
}
}
export default Pilots;
export default connect()(Pilots);
@@ -0,0 +1,26 @@
import React, {Component} from "react";
import {Table} from "semantic-ui-react";
import PilotsListHeader from "./PilotsListHeader";
import PilotsListRow from "./PilotsListRow";
export default class PilotsList extends Component {
render() {
const {pilots} = this.props;
const pilotRows = pilots.map(pilot => (
<PilotsListRow pilot={pilot} key={pilot.name}/>
));
return (
<Table celled>
<PilotsListHeader />
<Table.Body>
{pilotRows}
</Table.Body>
</Table>
)
}
}
@@ -0,0 +1,27 @@
import React from "react";
import { Table } from "semantic-ui-react";
const PilotsListHeader = () => (
<Table.Header>
<Table.Row>
<Table.HeaderCell width={5}>
Name
</Table.HeaderCell>
<Table.HeaderCell width={3}>
Rank
</Table.HeaderCell>
<Table.HeaderCell width={2}>
Age
</Table.HeaderCell>
<Table.HeaderCell width={2}>
Skills
</Table.HeaderCell>
<Table.HeaderCell width={4}>
Mech
</Table.HeaderCell>
</Table.Row>
</Table.Header>
);
export default PilotsListHeader;
@@ -0,0 +1,35 @@
import React from "react";
import {Table} from "semantic-ui-react";
const PilotsListRow = ({pilot={}}) => {
const {
name = "",
rank = "",
age = "",
gunnery = "",
piloting = "",
mechType = "",
} = pilot;
return (
<Table.Row>
<Table.Cell>
{name}
</Table.Cell>
<Table.Cell>
{rank}
</Table.Cell>
<Table.Cell>
{age}
</Table.Cell>
<Table.Cell>
{gunnery}/{piloting}
</Table.Cell>
<Table.Cell>
{mechType}
</Table.Cell>
</Table.Row>
);
}
export default PilotsListRow;
@@ -0,0 +1 @@
export {default} from "./PilotsList";

0 comments on commit c404584

Please sign in to comment.