mirror of https://github.com/lidarr/Lidarr
parent
cdb93c4c76
commit
1aa6f61391
|
@ -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%;
|
||||
}
|
||||
|
|
|
@ -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 (
|
||||
<Link
|
||||
<div
|
||||
className={styles.tag}
|
||||
tabIndex={-1}
|
||||
onPress={this.onDelete}
|
||||
>
|
||||
<Label kind={kind}>
|
||||
{tag.name}
|
||||
<Label
|
||||
className={styles.label}
|
||||
kind={kind}
|
||||
>
|
||||
<Link
|
||||
className={canEdit ? styles.linkWithEdit : styles.link}
|
||||
tabIndex={-1}
|
||||
onPress={this.onDelete}
|
||||
>
|
||||
<MiddleTruncate
|
||||
text={tag.name}
|
||||
start={10}
|
||||
end={10}
|
||||
/>
|
||||
</Link>
|
||||
|
||||
{
|
||||
canEdit ?
|
||||
<div className={styles.editContainer}>
|
||||
<IconButton
|
||||
className={styles.editButton}
|
||||
name={icons.EDIT}
|
||||
size={9}
|
||||
onPress={this.onEdit}
|
||||
/>
|
||||
</div> :
|
||||
null
|
||||
}
|
||||
</Label>
|
||||
</Link>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
@ -50,7 +92,9 @@ TagInputTag.propTypes = {
|
|||
index: PropTypes.number.isRequired,
|
||||
tag: PropTypes.shape(tagShape),
|
||||
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;
|
||||
|
|
Loading…
Reference in New Issue