diff --git a/frontend/src/Components/Form/TagInput.js b/frontend/src/Components/Form/TagInput.js
index 0dd21e0ee..44c6f48b0 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}
/>
);
@@ -258,6 +267,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,
@@ -273,6 +283,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 3d474e4a1..86628b134 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 (
@@ -46,8 +48,10 @@ class TagInputInput extends Component {
index={index}
tag={tag}
kind={kind}
+ canEdit={canEdit}
isLastTag={index === tags.length - 1}
onDelete={onTagDelete}
+ onEdit={onTagEdit}
/>
);
})
@@ -66,8 +70,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 {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ height: 31px;
+}
+
+.link {
composes: link from '~Components/Link/Link.css';
- height: 31px;
+ 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.css.d.ts b/frontend/src/Components/Form/TagInputTag.css.d.ts
index afd4b333c..7369eca0e 100644
--- a/frontend/src/Components/Form/TagInputTag.css.d.ts
+++ b/frontend/src/Components/Form/TagInputTag.css.d.ts
@@ -1,6 +1,9 @@
// This file is automatically generated.
// Please do not change this file!
interface CssExports {
+ 'editButton': string;
+ 'editContainer': string;
+ 'link': string;
'tag': string;
}
export const cssExports: CssExports;
diff --git a/frontend/src/Components/Form/TagInputTag.js b/frontend/src/Components/Form/TagInputTag.js
index 1a012eabe..cc72f3555 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 Label from 'Components/Label';
+import IconButton from 'Components/Link/IconButton';
import Link from 'Components/Link/Link';
-import { kinds } from 'Helpers/Props';
+import { icons, kinds } from 'Helpers/Props';
import tagShape from 'Helpers/Props/Shapes/tagShape';
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 (
-
-