Connect UnitInfo color button to show the ColorPickerDialog

markerikson · Jul 19, 2017 · 8ad59aa · 8ad59aa
1 parent ede7d5c
commit 8ad59aa
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/src/common/components/ColorPicker/colorPickerActions.js b/src/common/components/ColorPicker/colorPickerActions.js
@@ -0,0 +1,7 @@
+import {
+    openModal
+} from "features/modals/modalActions";
+
+export function showColorPicker(initialColor) {
+    return openModal("ColorPickerDialog", {color : initialColor});
+}
diff --git a/src/features/unitInfo/UnitInfo/UnitInfo.jsx b/src/features/unitInfo/UnitInfo/UnitInfo.jsx
@@ -8,6 +8,7 @@ import {
 
 import {selectUnitInfo} from "../unitInfoSelectors";
 import {updateUnitInfo} from "../unitInfoActions";
+import {showColorPicker} from "common/components/ColorPicker/colorPickerActions";
 import {getValueFromEvent} from "common/utils/clientUtils";
 
 import FormEditWrapper from "common/components/FormEditWrapper";
@@ -30,6 +31,7 @@ const mapState = (state) => ({
 
 const actions = {
     updateUnitInfo,
+    showColorPicker,
 };
 
 class UnitInfo extends Component {
@@ -46,6 +48,10 @@ class UnitInfo extends Component {
         this.props.updateUnitInfo(newValues);
     }
 
+    onColorClicked = () => {
+        this.props.showColorPicker(this.props.unitInfo.color);
+    }
+
 
     render() {
         const {unitInfo, updateUnitInfo} = this.props;
@@ -80,7 +86,10 @@ class UnitInfo extends Component {
                     </Form.Field>
                     <Form.Field name="color">
                         <label>Color</label>
-                        <ColorPickerButton value={color} />
+                        <ColorPickerButton
+                            value={color}
+                            onClick={this.onColorClicked}
+                        />
                     </Form.Field>
                 </Form>
             </Segment>