diff --git a/frontend/src/Components/Form/TagInput.js b/frontend/src/Components/Form/TagInput.js
index bd7b43686..65bbc05d3 100644
--- a/frontend/src/Components/Form/TagInput.js
+++ b/frontend/src/Components/Form/TagInput.js
@@ -75,6 +75,12 @@ class TagInput extends Component {
//
// Listeners
+ onTagEdit = ({ value, ...otherProps }) => {
+ this.setState({ value });
+
+ this.props.onTagDelete(otherProps);
+ }
+
onInputContainerPress = () => {
this._autosuggestRef.input.focus();
}
@@ -188,6 +194,7 @@ class TagInput extends Component {
const {
tags,
kind,
+ canEdit,
tagComponent,
onTagDelete
} = this.props;
@@ -199,8 +206,10 @@ class TagInput extends Component {
kind={kind}
inputProps={inputProps}
isFocused={this.state.isFocused}
+ canEdit={canEdit}
tagComponent={tagComponent}
onTagDelete={onTagDelete}
+ onTagEdit={this.onTagEdit}
onInputContainerPress={this.onInputContainerPress}
/>
);
@@ -262,6 +271,7 @@ TagInput.propTypes = {
placeholder: PropTypes.string.isRequired,
delimiters: PropTypes.arrayOf(PropTypes.string).isRequired,
minQueryLength: PropTypes.number.isRequired,
+ canEdit: PropTypes.bool,
hasError: PropTypes.bool,
hasWarning: PropTypes.bool,
tagComponent: PropTypes.elementType.isRequired,
@@ -277,6 +287,7 @@ TagInput.defaultProps = {
placeholder: '',
delimiters: ['Tab', 'Enter', ' ', ','],
minQueryLength: 1,
+ canEdit: false,
tagComponent: TagInputTag
};
diff --git a/frontend/src/Components/Form/TagInputInput.js b/frontend/src/Components/Form/TagInputInput.js
index 3e28830e9..b5db1bfe8 100644
--- a/frontend/src/Components/Form/TagInputInput.js
+++ b/frontend/src/Components/Form/TagInputInput.js
@@ -28,8 +28,10 @@ class TagInputInput extends Component {
tags,
inputProps,
kind,
+ canEdit,
tagComponent: TagComponent,
- onTagDelete
+ onTagDelete,
+ onTagEdit
} = this.props;
return (
@@ -47,8 +49,10 @@ class TagInputInput extends Component {
index={index}
tag={tag}
kind={kind}
+ canEdit={canEdit}
isLastTag={index === tags.length - 1}
onDelete={onTagDelete}
+ onEdit={onTagEdit}
/>
);
})
@@ -67,8 +71,10 @@ TagInputInput.propTypes = {
inputProps: PropTypes.object.isRequired,
kind: PropTypes.oneOf(kinds.all).isRequired,
isFocused: PropTypes.bool.isRequired,
+ canEdit: PropTypes.bool.isRequired,
tagComponent: PropTypes.elementType.isRequired,
onTagDelete: PropTypes.func.isRequired,
+ onTagEdit: PropTypes.func.isRequired,
onInputContainerPress: PropTypes.func.isRequired
};
diff --git a/frontend/src/Components/Form/TagInputTag.css b/frontend/src/Components/Form/TagInputTag.css
index bf08e13fc..d8c826208 100644
--- a/frontend/src/Components/Form/TagInputTag.css
+++ b/frontend/src/Components/Form/TagInputTag.css
@@ -1,5 +1,25 @@
.tag {
- composes: link from '~Components/Link/Link.css';
-
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
height: 31px;
}
+
+.link {
+ composes: link from '~Components/Link/Link.css';
+
+ line-height: 1px;
+}
+
+.editContainer {
+ display: inline-block;
+ margin-left: 4px;
+ padding-left: 2px;
+ border-left: 1px solid #eee;
+}
+
+.editButton {
+ composes: button from '~Components/Link/IconButton.css';
+
+ width: auto;
+}
diff --git a/frontend/src/Components/Form/TagInputTag.js b/frontend/src/Components/Form/TagInputTag.js
index f5935ad7b..45f18c215 100644
--- a/frontend/src/Components/Form/TagInputTag.js
+++ b/frontend/src/Components/Form/TagInputTag.js
@@ -1,8 +1,9 @@
import PropTypes from 'prop-types';
import React, { Component } from 'react';
-import { kinds } from 'Helpers/Props';
+import { icons, kinds } from 'Helpers/Props';
import tagShape from 'Helpers/Props/Shapes/tagShape';
import Label from 'Components/Label';
+import IconButton from 'Components/Link/IconButton';
import Link from 'Components/Link/Link';
import styles from './TagInputTag.css';
@@ -24,24 +25,60 @@ class TagInputTag extends Component {
});
}
+ onEdit = () => {
+ const {
+ index,
+ tag,
+ onEdit
+ } = this.props;
+
+ onEdit({
+ index,
+ id: tag.id,
+ value: tag.name
+ });
+ }
+
//
// Render
render() {
const {
tag,
- kind
+ kind,
+ canEdit
} = this.props;
return (
-
-