Permalink
Browse files

Extract a separate UnitInfoForm component

  • Loading branch information...
markerikson committed Jan 1, 2018
1 parent 8ceeece commit d2ac9f6b52c66fa8e01a7e007156c238dc2c9fc8
Showing with 105 additions and 86 deletions.
  1. +3 −86 src/features/unitInfo/UnitInfo/UnitInfo.jsx
  2. +102 −0 src/features/unitInfo/UnitInfo/UnitInfoForm.jsx
@@ -1,103 +1,20 @@
import React, {Component} from "react";
import {connect} from "react-redux";
import {
Form,
Dropdown,
Segment
} from "semantic-ui-react";
import {selectUnitInfo} from "../unitInfoSelectors";
import {updateUnitInfo, setUnitColor} from "../unitInfoActions";
import {showColorPicker} from "common/components/ColorPicker/colorPickerActions";
import {getValueFromEvent} from "common/utils/clientUtils";
import FormEditWrapper from "common/components/FormEditWrapper";
import ColorPickerButton from "common/components/ColorPicker/ColorPickerButton";
const FACTIONS = [
{value : "cc", text : "Capellan Confederation"},
{value : "dc", text : "Draconis Combine"},
{value : "elh", text : "Eridani Light Horse"},
{value : "fs", text : "Federated Suns"},
{value : "fwl", text : "Free Worlds League"},
{value : "hr", text : "Hansen's Roughriders"},
{value : "lc", text : "Lyran Commonwealth"},
{value : "wd", text : "Wolf's Dragoons"},
];
const mapState = (state) => ({
unitInfo : selectUnitInfo(state),
});
const actions = {
updateUnitInfo,
showColorPicker,
};
import UnitInfoForm from "./UnitInfoForm";
class UnitInfo extends Component {
onAffiliationChanged = (e, result) => {
const {name, value} = result;
const newValues = { [name] : value};
this.props.updateUnitInfo(newValues);
}
onNameChanged = (e) => {
const newValues = getValueFromEvent(e);
this.props.updateUnitInfo(newValues);
}
onColorClicked = () => {
const onColorPickedAction = setUnitColor();
this.props.showColorPicker(this.props.unitInfo.color, onColorPickedAction);
}
render() {
const {unitInfo, updateUnitInfo} = this.props;
const {name, affiliation, color} = unitInfo;
return (
<Segment attached="bottom">
<Form size="large">
<Form.Field name="name" width={6}>
<label>Unit Name</label>
<FormEditWrapper
singleValue={true}
value={ {name} }
onChange={updateUnitInfo}
passIsEditing={false}
>
<input
placeholder="Name"
name="name"
/>
</FormEditWrapper>
</Form.Field>
<Form.Field name="affiliation" width={6}>
<label>Affiliation</label>
<Dropdown
name="affiliation"
selection
options={FACTIONS}
value={affiliation}
onChange={this.onAffiliationChanged}
/>
</Form.Field>
<Form.Field name="color">
<label>Color</label>
<ColorPickerButton
value={color}
onClick={this.onColorClicked}
/>
</Form.Field>
</Form>
<UnitInfoForm />
</Segment>
);
}
}
export default connect(mapState, actions)(UnitInfo);
export default UnitInfo;
@@ -0,0 +1,102 @@
import React, {Component} from "react";
import {connect} from "react-redux";
import {
Form,
Dropdown,
Segment
} from "semantic-ui-react";
import {selectUnitInfo} from "../unitInfoSelectors";
import {updateUnitInfo, setUnitColor} from "../unitInfoActions";
import {showColorPicker} from "common/components/ColorPicker/colorPickerActions";
import {getValueFromEvent} from "common/utils/clientUtils";
import FormEditWrapper from "common/components/FormEditWrapper";
import ColorPickerButton from "common/components/ColorPicker/ColorPickerButton";
const FACTIONS = [
{value : "cc", text : "Capellan Confederation"},
{value : "dc", text : "Draconis Combine"},
{value : "elh", text : "Eridani Light Horse"},
{value : "fs", text : "Federated Suns"},
{value : "fwl", text : "Free Worlds League"},
{value : "hr", text : "Hansen's Roughriders"},
{value : "lc", text : "Lyran Commonwealth"},
{value : "wd", text : "Wolf's Dragoons"},
];
const mapState = (state) => ({
unitInfo : selectUnitInfo(state),
});
const actions = {
updateUnitInfo,
showColorPicker,
};
class UnitInfoForm extends Component {
onAffiliationChanged = (e, result) => {
const {name, value} = result;
const newValues = { [name] : value};
this.props.updateUnitInfo(newValues);
}
onNameChanged = (e) => {
const newValues = getValueFromEvent(e);
this.props.updateUnitInfo(newValues);
}
onColorClicked = () => {
const onColorPickedAction = setUnitColor();
this.props.showColorPicker(this.props.unitInfo.color, onColorPickedAction);
}
render() {
const {unitInfo, updateUnitInfo} = this.props;
const {name, affiliation, color} = unitInfo;
return (
<Form size="large">
<Form.Field name="name" width={6}>
<label>Unit Name</label>
<FormEditWrapper
singleValue={true}
value={ {name} }
onChange={updateUnitInfo}
passIsEditing={false}
>
<input
placeholder="Name"
name="name"
/>
</FormEditWrapper>
</Form.Field>
<Form.Field name="affiliation" width={6}>
<label>Affiliation</label>
<Dropdown
name="affiliation"
selection
options={FACTIONS}
value={affiliation}
onChange={this.onAffiliationChanged}
/>
</Form.Field>
<Form.Field name="color">
<label>Color</label>
<ColorPickerButton
value={color}
onClick={this.onColorClicked}
/>
</Form.Field>
</Form>
);
}
}
export default connect(mapState, actions)(UnitInfoForm);

0 comments on commit d2ac9f6

Please sign in to comment.