75 lines
1.7 KiB
JavaScript
75 lines
1.7 KiB
JavaScript
import React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { Link } from 'react-router';
|
|
|
|
import Icons from './Icons';
|
|
|
|
const Item = ({
|
|
isAdded, onSelect, name, url
|
|
}) => {
|
|
const buttonLabel = isAdded ? 'Remove from collection' : 'Add to collection';
|
|
return (
|
|
<li className="quick-add__item" onClick={onSelect}> { /* eslint-disable-line */ }
|
|
<button className="quick-add__item-toggle" onClick={onSelect} aria-label={buttonLabel}>
|
|
<Icons isAdded={isAdded} />
|
|
</button>
|
|
<span className="quick-add__item-name">{name}</span>
|
|
<Link
|
|
className="quick-add__item-view"
|
|
to={url}
|
|
target="_blank"
|
|
onClick={e => e.stopPropogation()}
|
|
>
|
|
View
|
|
</Link>
|
|
</li>
|
|
);
|
|
};
|
|
|
|
const ItemType = PropTypes.shape({
|
|
name: PropTypes.string.isRequired,
|
|
url: PropTypes.string.isRequired,
|
|
isAdded: PropTypes.bool.isRequired,
|
|
});
|
|
|
|
Item.propTypes = {
|
|
name: PropTypes.string.isRequired,
|
|
url: PropTypes.string.isRequired,
|
|
isAdded: PropTypes.bool.isRequired,
|
|
onSelect: PropTypes.func.isRequired,
|
|
};
|
|
|
|
const QuickAddList = ({
|
|
items, onAdd, onRemove
|
|
}) => {
|
|
const handleAction = (item) => {
|
|
if (item.isAdded) {
|
|
onRemove(item);
|
|
} else {
|
|
onAdd(item);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<ul className="quick-add">{items.map(item => (<Item
|
|
key={item.id}
|
|
{...item}
|
|
onSelect={
|
|
(event) => {
|
|
event.stopPropagation();
|
|
event.currentTarget.blur();
|
|
handleAction(item);
|
|
}
|
|
}
|
|
/>))}
|
|
</ul>
|
|
);
|
|
};
|
|
|
|
QuickAddList.propTypes = {
|
|
items: PropTypes.arrayOf(ItemType).isRequired,
|
|
onAdd: PropTypes.func.isRequired,
|
|
onRemove: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export default QuickAddList;
|