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 ( - -