Display icon-based add/remove button in Collection List

This commit is contained in:
Andrew Nicolaou 2019-09-16 21:50:44 +02:00
parent 5575c6344a
commit 5011c1f002

View file

@ -11,6 +11,24 @@ import * as IdeActions from '../../actions/ide';
import * as ToastActions from '../../actions/toast'; import * as ToastActions from '../../actions/toast';
const downFilledTriangle = require('../../../../images/down-filled-triangle.svg'); const downFilledTriangle = require('../../../../images/down-filled-triangle.svg');
const addIcon = require('../../../../images/plus.svg');
const removeIcon = require('../../../../images/minus.svg');
const AddRemoveButton = ({ type, onClick }) => {
const alt = type === 'add' ? 'add to collection' : 'remove from collection';
const icon = type === 'add' ? addIcon : removeIcon;
return (
<button className="overlay__close-button" onClick={onClick}>
<InlineSVG src={icon} alt={alt} />
</button>
);
};
AddRemoveButton.propTypes = {
type: PropTypes.oneOf(['add', 'remove']).isRequired,
onClick: PropTypes.func.isRequired,
};
class CollectionListRowBase extends React.Component { class CollectionListRowBase extends React.Component {
static projectInCollection(project, collection) { static projectInCollection(project, collection) {
@ -144,7 +162,9 @@ class CollectionListRowBase extends React.Component {
const userIsOwner = this.props.user.username === this.props.username; const userIsOwner = this.props.user.username === this.props.username;
if (this.props.addMode === true && this.props.project) { if (this.props.addMode === true && this.props.project) {
return CollectionListRowBase.projectInCollection(this.props.project, this.props.collection) ? <button onClick={this.handleCollectionRemove}>Remove</button> : <button onClick={this.handleCollectionAdd}>Add</button>; return CollectionListRowBase.projectInCollection(this.props.project, this.props.collection) ?
<AddRemoveButton type="remove" onClick={this.handleCollectionRemove} /> :
<AddRemoveButton type="add" onClick={this.handleCollectionAdd} />;
} }
return ( return (