+93
-86
lines changedFilter options
+93
-86
lines changed Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
1 -
import React from "react";
1 +
import React, {Component} from "react";
2 2
import {connect} from "react-redux";
3 3
import {Form, Dropdown, Grid, Button} from "semantic-ui-react";
4 4
@@ -51,91 +51,98 @@ const actions = {
51 51
stopEditingPilot,
52 52
}
53 53 54 -
const PilotDetails = ({pilot={}, pilotIsSelected = false, isEditingPilot = false, ...actions }) =>{
55 -
const {
56 -
name = "",
57 -
rank = "",
58 -
age = "",
59 -
gunnery = "",
60 -
piloting = "",
61 -
mechType = "",
62 -
} = pilot;
63 - 64 -
const canStartEditing = pilotIsSelected && !isEditingPilot;
65 -
const canStopEditing = pilotIsSelected && isEditingPilot;
66 - 67 -
return (
68 -
<Form size="large">
69 -
<Form.Field name="name" width={16}>
70 -
<label>Name</label>
71 -
<input
72 -
placeholder="Name"
73 -
value={name}
74 -
disabled={!canStopEditing}
75 -
/>
76 -
</Form.Field>
77 -
<Form.Field name="rank" width={16}>
78 -
<label>Rank</label>
79 -
<Dropdown
80 -
fluid
81 -
selection
82 -
options={RANKS}
83 -
value={rank}
84 -
disabled={!canStopEditing}
85 -
/>
86 -
</Form.Field>
87 -
<Form.Field name="age" width={6}>
88 -
<label>Age</label>
89 -
<input
90 -
placeholder="Age"
91 -
value={age}
92 -
disabled={!canStopEditing}
93 -
/>
94 -
</Form.Field>
95 -
<Form.Field name="gunnery" width={6}>
96 -
<label>Gunnery</label>
97 -
<input
98 -
value={gunnery}
99 -
disabled={!canStopEditing}
100 -
/>
101 -
</Form.Field>
102 -
<Form.Field name="piloting" width={6}>
103 -
<label>Piloting</label>
104 -
<input
105 -
value={piloting}
106 -
disabled={!canStopEditing}
107 -
/>
108 -
</Form.Field>
109 -
<Form.Field name="mech" width={16}>
110 -
<label>Mech</label>
111 -
<Dropdown
112 -
fluid
113 -
selection
114 -
options={MECHS}
115 -
value={mechType}
116 -
disabled={true}
117 -
/>
118 -
</Form.Field>
119 -
<Grid.Row width={16}>
120 -
<Button
121 -
primary
122 -
disabled={!canStartEditing}
123 -
type="button"
124 -
onClick={actions.startEditingPilot}
125 -
>
126 -
Start Editing
127 -
</Button>
128 -
<Button
129 -
secondary
130 -
disabled={!canStopEditing}
131 -
type="button"
132 -
onClick={actions.stopEditingPilot}
133 -
>
134 -
Stop Editing
135 -
</Button>
136 -
</Grid.Row>
137 -
</Form>
138 -
);
54 + 55 +
export class PilotDetails extends Component {
56 + 57 +
render() {
58 +
const {pilot={}, pilotIsSelected = false, isEditingPilot = false, ...actions } = this.props;
59 + 60 +
const {
61 +
name = "",
62 +
rank = "",
63 +
age = "",
64 +
gunnery = "",
65 +
piloting = "",
66 +
mechType = "",
67 +
} = pilot;
68 + 69 +
const canStartEditing = pilotIsSelected && !isEditingPilot;
70 +
const canStopEditing = pilotIsSelected && isEditingPilot;
71 + 72 +
return (
73 +
<Form size="large">
74 +
<Form.Field name="name" width={16}>
75 +
<label>Name</label>
76 +
<input
77 +
placeholder="Name"
78 +
value={name}
79 +
disabled={!canStopEditing}
80 +
/>
81 +
</Form.Field>
82 +
<Form.Field name="rank" width={16}>
83 +
<label>Rank</label>
84 +
<Dropdown
85 +
fluid
86 +
selection
87 +
options={RANKS}
88 +
value={rank}
89 +
disabled={!canStopEditing}
90 +
/>
91 +
</Form.Field>
92 +
<Form.Field name="age" width={6}>
93 +
<label>Age</label>
94 +
<input
95 +
placeholder="Age"
96 +
value={age}
97 +
disabled={!canStopEditing}
98 +
/>
99 +
</Form.Field>
100 +
<Form.Field name="gunnery" width={6}>
101 +
<label>Gunnery</label>
102 +
<input
103 +
value={gunnery}
104 +
disabled={!canStopEditing}
105 +
/>
106 +
</Form.Field>
107 +
<Form.Field name="piloting" width={6}>
108 +
<label>Piloting</label>
109 +
<input
110 +
value={piloting}
111 +
disabled={!canStopEditing}
112 +
/>
113 +
</Form.Field>
114 +
<Form.Field name="mech" width={16}>
115 +
<label>Mech</label>
116 +
<Dropdown
117 +
fluid
118 +
selection
119 +
options={MECHS}
120 +
value={mechType}
121 +
disabled={true}
122 +
/>
123 +
</Form.Field>
124 +
<Grid.Row width={16}>
125 +
<Button
126 +
primary
127 +
disabled={!canStartEditing}
128 +
type="button"
129 +
onClick={actions.startEditingPilot}
130 +
>
131 +
Start Editing
132 +
</Button>
133 +
<Button
134 +
secondary
135 +
disabled={!canStopEditing}
136 +
type="button"
137 +
onClick={actions.stopEditingPilot}
138 +
>
139 +
Stop Editing
140 +
</Button>
141 +
</Grid.Row>
142 +
</Form>
143 +
);
144 +
}
139 145
}
140 146 147 + 141 148
export default connect(mapState, actions)(PilotDetails);
You can’t perform that action at this time.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4