Added color picker to edit tag modal

src/tags/helpers/EditTagModal.js

@@ -1,10 +1,20 @@
 import React from 'react';
 import { connect } from 'react-redux';
-import { Modal, ModalBody, ModalFooter, ModalHeader } from 'reactstrap';
+import { Modal, ModalBody, ModalFooter, ModalHeader, Popover } from 'reactstrap';
 import { pick } from 'ramda';
 import { editTag, tagEdited } from '../reducers/tagEdit';
+import { ChromePicker } from 'react-color';
+import ColorGenerator from '../../utils/ColorGenerator';
+import './EditTagModal.scss';
+
+const defaultProps = {
+  colorGenerator: ColorGenerator,
+};
+
 
 export class EditTagModal extends React.Component {
+  state = { showColorPicker: false };
+
   saveTag = e => {
     e.preventDefault();
     const { tag: oldName, editTag, toggle } = this.props;
@@ -29,8 +39,11 @@ export class EditTagModal extends React.Component {
 
   constructor(props) {
     super(props);
+
+    const { colorGenerator, tag } = props;
     this.state = {
-      tag: props.tag,
+      tag,
+      color: colorGenerator.getColorForKey(tag)
     }
   }
 
@@ -40,20 +53,47 @@ export class EditTagModal extends React.Component {
 
   render() {
     const { isOpen, toggle, tagEdit } = this.props;
+    const { tag, color } = this.state;
+    const toggleColorPicker = () =>
+      this.setState({ showColorPicker: !this.state.showColorPicker });
 
     return (
       <Modal isOpen={isOpen} toggle={toggle} centered onClosed={this.onClosed}>
         <form onSubmit={this.saveTag}>
           <ModalHeader toggle={toggle}>Edit tag</ModalHeader>
           <ModalBody>
-            <input
+            <Popover
-              type="text"
+              isOpen={this.state.showColorPicker}
-              value={this.state.tag}
+              toggle={toggleColorPicker}
-              onChange={e => this.setState({ tag: e.target.value })}
+              target="colorPickerBtn"
-              placeholder="Tag"
+              placement="right"
-              required
+            >
-              className="form-control"
+              <ChromePicker color={color} />
-            />
+            </Popover>
+
+            <div className="input-group">
+              <div
+                className="input-group-prepend"
+                id="colorPickerBtn"
+                onClick={toggleColorPicker}
+              >
+                <div
+                  className="input-group-text edit-tag-modal__color-picker-toggle"
+                  style={{backgroundColor: color}}
+                >
+                  &nbsp;&nbsp;
+                </div>
+              </div>
+              <input
+                type="text"
+                value={tag}
+                onChange={e => this.setState({ tag: e.target.value })}
+                placeholder="Tag"
+                required
+                className="form-control"
+              />
+            </div>
+
             {tagEdit.error && (
               <div className="p-2 mt-2 bg-danger text-white text-center">
                 Something went wrong while editing the tag :(
@@ -72,4 +112,6 @@ export class EditTagModal extends React.Component {
   }
 }
 
+EditTagModal.defaultProps = defaultProps;
+
 export default connect(pick(['tagEdit']), { editTag, tagEdited })(EditTagModal);

src/tags/helpers/EditTagModal.scss

@@ -0,0 +1,3 @@
+.edit-tag-modal__color-picker-toggle {
+  cursor: pointer;
+}