2018-02-16 16:53:01 +01:00
|
|
|
/**
|
|
|
|
*
|
|
|
|
* List
|
|
|
|
*
|
|
|
|
*/
|
|
|
|
|
|
|
|
import React from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2018-02-23 14:57:15 +01:00
|
|
|
import { FormattedMessage } from 'react-intl';
|
2018-02-16 16:53:01 +01:00
|
|
|
import cn from 'classnames';
|
|
|
|
|
2019-02-22 11:11:25 +01:00
|
|
|
import Li from '../Li';
|
|
|
|
import ListHeader from '../ListHeader';
|
2018-02-16 16:53:01 +01:00
|
|
|
|
|
|
|
import styles from './styles.scss';
|
|
|
|
|
2018-02-23 14:57:15 +01:00
|
|
|
const EmptyLi = () => (
|
|
|
|
<li className={styles.emptyLiWrapper}>
|
|
|
|
<div>
|
|
|
|
<FormattedMessage id="upload.EmptyLi.message" />
|
|
|
|
</div>
|
|
|
|
</li>
|
|
|
|
);
|
|
|
|
|
2018-02-16 16:53:01 +01:00
|
|
|
function List(props) {
|
|
|
|
return (
|
|
|
|
<div className={cn('container-fluid', styles.listWrapper)}>
|
|
|
|
<div className="row">
|
|
|
|
<ul className={styles.ulList}>
|
2018-02-23 14:57:15 +01:00
|
|
|
<ListHeader changeSort={props.changeSort} sort={props.sort} />
|
2018-02-19 13:10:35 +01:00
|
|
|
{props.data.map((item, key) => (
|
|
|
|
<Li
|
2018-02-19 14:23:47 +01:00
|
|
|
key={item.hash || key}
|
2018-02-19 13:10:35 +01:00
|
|
|
item={item}
|
|
|
|
/>
|
|
|
|
))}
|
2018-02-23 14:57:15 +01:00
|
|
|
{props.data.length === 0 && <EmptyLi />}
|
2018-02-16 16:53:01 +01:00
|
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2018-02-23 14:57:15 +01:00
|
|
|
List.defaultProps = {
|
|
|
|
sort: 'id',
|
|
|
|
};
|
2018-02-16 16:53:01 +01:00
|
|
|
|
2018-02-19 13:10:35 +01:00
|
|
|
List.propTypes = {
|
2018-02-23 14:57:15 +01:00
|
|
|
changeSort: PropTypes.func.isRequired,
|
2018-02-19 13:10:35 +01:00
|
|
|
data: PropTypes.arrayOf(PropTypes.object).isRequired,
|
2018-02-23 14:57:15 +01:00
|
|
|
sort: PropTypes.string,
|
2018-02-19 13:10:35 +01:00
|
|
|
};
|
2018-02-16 16:53:01 +01:00
|
|
|
|
|
|
|
export default List;
|