diff --git a/frontend/src/Components/Form/TagInputTag.css b/frontend/src/Components/Form/TagInputTag.css index bf08e13fc..7e66a4d12 100644 --- a/frontend/src/Components/Form/TagInputTag.css +++ b/frontend/src/Components/Form/TagInputTag.css @@ -1,5 +1,34 @@ .tag { - composes: link from '~Components/Link/Link.css'; - + display: flex; + justify-content: center; + flex-direction: column; + max-width: 100%; height: 31px; } + +.link { + max-width: 100%; +} + +.linkWithEdit { + max-width: calc(100% - 9px - 4px - 2px); +} + +.editContainer { + display: inline-block; + margin-left: 4px; + padding-left: 2px; + border-left: 1px solid #eee; +} + +.editButton { + composes: button from '~Components/Link/IconButton.css'; + + width: 9px; +} + +.label { + composes: label from '~Components/Label.css'; + + max-width: 100%; +} diff --git a/frontend/src/Components/Form/TagInputTag.js b/frontend/src/Components/Form/TagInputTag.js index 1a012eabe..c68072cea 100644 --- a/frontend/src/Components/Form/TagInputTag.js +++ b/frontend/src/Components/Form/TagInputTag.js @@ -1,8 +1,10 @@ import PropTypes from 'prop-types'; import React, { Component } from 'react'; +import MiddleTruncate from 'react-middle-truncate'; 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 +26,64 @@ 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 ( - -