r/p5.js-web-editor
1
0
Fork 0
Code Issues 1 Pull requests Releases 1 Wiki Activity

Display icon-based add/remove button in Collection List

Browse source
This commit is contained in:
Andrew Nicolaou 2019-09-16 21:50:44 +02:00
parent 5575c6344a
commit 5011c1f002
1 changed files with 21 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
client/modules/IDE/components/CollectionList/CollectionListRow.jsx
View file

@ -11,6 +11,24 @@ import * as IdeActions from '../../actions/ide';
import * as ToastActions from '../../actions/toast';
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 {
static projectInCollection(project, collection) {
@ -144,7 +162,9 @@ class CollectionListRowBase extends React.Component {
const userIsOwner = this.props.user.username === this.props.username;
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 (