Fixed: Overflowing release profile terms

Closes #2550
This commit is contained in:
Qstick 2023-02-04 19:44:50 -06:00
parent cdb93c4c76
commit 1aa6f61391
2 changed files with 83 additions and 10 deletions

View file

@ -1,5 +1,34 @@
.tag { .tag {
composes: link from '~Components/Link/Link.css'; display: flex;
justify-content: center;
flex-direction: column;
max-width: 100%;
height: 31px; 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%;
}

View file

@ -1,8 +1,10 @@
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import React, { Component } from 'react'; import React, { Component } from 'react';
import MiddleTruncate from 'react-middle-truncate';
import Label from 'Components/Label'; import Label from 'Components/Label';
import IconButton from 'Components/Link/IconButton';
import Link from 'Components/Link/Link'; 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 tagShape from 'Helpers/Props/Shapes/tagShape';
import styles from './TagInputTag.css'; 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
render() { render() {
const { const {
tag, tag,
kind kind,
canEdit
} = this.props; } = this.props;
return ( return (
<Link <div
className={styles.tag} className={styles.tag}
tabIndex={-1} tabIndex={-1}
>
<Label
className={styles.label}
kind={kind}
>
<Link
className={canEdit ? styles.linkWithEdit : styles.link}
tabIndex={-1}
onPress={this.onDelete} onPress={this.onDelete}
> >
<Label kind={kind}> <MiddleTruncate
{tag.name} text={tag.name}
</Label> start={10}
end={10}
/>
</Link> </Link>
{
canEdit ?
<div className={styles.editContainer}>
<IconButton
className={styles.editButton}
name={icons.EDIT}
size={9}
onPress={this.onEdit}
/>
</div> :
null
}
</Label>
</div>
); );
} }
} }
@ -50,7 +92,9 @@ TagInputTag.propTypes = {
index: PropTypes.number.isRequired, index: PropTypes.number.isRequired,
tag: PropTypes.shape(tagShape), tag: PropTypes.shape(tagShape),
kind: PropTypes.oneOf(kinds.all).isRequired, kind: PropTypes.oneOf(kinds.all).isRequired,
onDelete: PropTypes.func.isRequired canEdit: PropTypes.bool.isRequired,
onDelete: PropTypes.func.isRequired,
onEdit: PropTypes.func.isRequired
}; };
export default TagInputTag; export default TagInputTag;