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