47 lines
1003 B
React
47 lines
1003 B
React
|
import React from 'react';
|
||
|
import PropTypes from 'prop-types';
|
||
|
import { Link } from 'react-router';
|
||
|
|
||
|
import Icons from './Icons';
|
||
|
|
||
|
const Item = ({
|
||
|
isAdded, onSelect, name, url
|
||
|
}) => (
|
||
|
<li className="quick-add__item">
|
||
|
<button className="quick-add__item-toggle" onClick={onSelect}>
|
||
|
<Icons isAdded={isAdded} />
|
||
|
{name}
|
||
|
</button>
|
||
|
<Link className="quick-add__item-view" to={url}>View</Link>
|
||
|
</li>
|
||
|
);
|
||
|
|
||
|
const ItemType = PropTypes.shape({
|
||
|
name: PropTypes.string.isRequired,
|
||
|
url: PropTypes.string.isRequired,
|
||
|
isAdded: PropTypes.bool.isRequired,
|
||
|
});
|
||
|
|
||
|
Item.propTypes = {
|
||
|
...ItemType,
|
||
|
onSelect: PropTypes.func.isRequired,
|
||
|
};
|
||
|
|
||
|
const QuickAddList = ({ items, onSelect }) => (
|
||
|
<ul className="quick-add">{items.map(item => (<Item
|
||
|
key={item.id}
|
||
|
{...item}
|
||
|
onSelect={
|
||
|
() => onSelect(item)
|
||
|
}
|
||
|
/>))}
|
||
|
</ul>
|
||
|
);
|
||
|
|
||
|
QuickAddList.propTypes = {
|
||
|
items: PropTypes.arrayOf(ItemType).isRequired,
|
||
|
onSelect: PropTypes.func.isRequired,
|
||
|
};
|
||
|
|
||
|
export default QuickAddList;
|