Connecting the ColorPicker Dialog

Now that we have a dialog, we also need an input to show the current color:

Commit 9e9c02f: Add a simple ColorPickerButton

common/components/ColorPickerButton.jsx

import React from "react";

import {Button} from "semantic-ui-react";

const ColorPickerButton = ({value, onClick, disabled=false}) => {
    return (
        <Button
            type="button"
            style={{padding: "4px", margin: 0}}
            disabled={disabled}
            onClick={onClick}
        >
            <div
                style={{
                    width : 30,
                    height : 15,
                    backgroundColor : value
                }}
            />
        </Button>
    )
}

export default ColorPickerButton;

We take a standard SUI-React Button, and put a <div> in the middle to show the current color value.

We also need to actually add a color value to our store, and can use the ColorPickerButton to show that:

Commit 80349bc: Add color field to unit info sample data and reducer

features/unitInfo/unitInfoReducer.js

const initialState = {
    name : "N/A",
    affiliation : "",
+   color : "blue"
};

features/unitInfo/UnitInfo/UnitInfo.jsx

import FormEditWrapper from "common/components/FormEditWrapper";
+import ColorPickerButton from "common/components/ColorPickerButton";

// skip ahead

    render() {
        const {unitInfo, updateUnitInfo} = this.props;
-       const {name, affiliation} = unitInfo;
+       const {name, affiliation, color} = unitInfo;

        return (
            <Segment attached="bottom">

// skip ahead
+                   <Form.Field name="color">
+                       <label>Color</label>
+                       <ColorPickerButton value={color} />
+                   </Form.Field>
                </Form>
            </Segment>

We should now see our ColorPickerButton onscreen: