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
|
|
|
|
2019-02-22 11:11:25 +01:00
|
|
|
import Li from '../Li';
|
|
|
|
import ListHeader from '../ListHeader';
|
2019-09-10 16:34:43 +02:00
|
|
|
import EmptyLi from './EmptyLi';
|
|
|
|
import Wrapper from './Wrapper';
|
2018-02-23 14:57:15 +01:00
|
|
|
|
2018-02-16 16:53:01 +01:00
|
|
|
function List(props) {
|
|
|
|
return (
|
2019-09-10 16:34:43 +02:00
|
|
|
<Wrapper className="container-fluid">
|
2018-02-16 16:53:01 +01:00
|
|
|
<div className="row">
|
2019-09-10 16:34:43 +02:00
|
|
|
<ul className="list">
|
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) => (
|
2019-09-10 16:34:43 +02:00
|
|
|
<Li key={item.hash || key} item={item} />
|
2018-02-19 13:10:35 +01:00
|
|
|
))}
|
2019-09-10 16:34:43 +02:00
|
|
|
{props.data.length === 0 && (
|
|
|
|
<EmptyLi>
|
|
|
|
<div>
|
|
|
|
<FormattedMessage id="upload.EmptyLi.message" />
|
|
|
|
</div>
|
|
|
|
</EmptyLi>
|
|
|
|
)}
|
2018-02-16 16:53:01 +01:00
|
|
|
</ul>
|
|
|
|
</div>
|
2019-09-10 16:34:43 +02:00
|
|
|
</Wrapper>
|
2018-02-16 16:53:01 +01:00
|
|
|
);
|
|
|
|
}
|
|
|
|
|
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;
|