67 lines
1.6 KiB
JavaScript
Raw Normal View History

2020-03-24 23:08:43 -04:00
import ImmutablePureComponent from 'react-immutable-pure-component'
2020-04-23 02:13:29 -04:00
import ImmutablePropTypes from 'react-immutable-proptypes'
2020-02-22 18:26:23 -05:00
import Block from './block'
2020-02-20 19:57:29 -05:00
import ScrollableList from './scrollable_list'
import ListItem from './list_item'
import Dummy from './dummy'
import ListItemPlaceholder from './placeholder/list_item_placeholder'
2020-02-20 19:57:29 -05:00
2020-03-24 23:08:43 -04:00
export default class List extends ImmutablePureComponent {
2020-02-20 19:57:29 -05:00
static propTypes = {
2020-04-22 01:00:11 -04:00
items: PropTypes.oneOfType([
PropTypes.array,
2020-04-23 02:13:29 -04:00
ImmutablePropTypes.map,
ImmutablePropTypes.list,
2020-04-22 01:00:11 -04:00
]),
2020-02-20 19:57:29 -05:00
scrollKey: PropTypes.string,
emptyMessage: PropTypes.any,
2020-04-06 21:53:23 -04:00
size: PropTypes.oneOf([
'small',
'large'
]),
2020-04-02 12:57:04 -04:00
onLoadMore: PropTypes.func,
hasMore: PropTypes.bool,
showLoading: PropTypes.bool,
2020-02-20 19:57:29 -05:00
}
render() {
2020-04-02 12:57:04 -04:00
const {
items,
scrollKey,
emptyMessage,
hasMore,
2020-04-06 21:53:23 -04:00
size,
onLoadMore,
showLoading,
2020-04-02 12:57:04 -04:00
} = this.props
2020-02-20 19:57:29 -05:00
const Wrapper = !!scrollKey ? ScrollableList : Dummy
2020-02-20 19:57:29 -05:00
return (
2020-02-22 18:26:23 -05:00
<Block>
<Wrapper
2020-04-02 12:57:04 -04:00
onLoadMore={onLoadMore}
hasMore={hasMore}
2020-02-20 19:57:29 -05:00
scrollKey={scrollKey}
emptyMessage={emptyMessage}
showLoading={showLoading}
placeholderComponent={ListItemPlaceholder}
placeholderCount={12}
2020-02-20 19:57:29 -05:00
>
{
2020-03-24 23:08:43 -04:00
items.map((item, i) => (
<ListItem
2020-04-06 21:53:23 -04:00
size={size}
2020-03-24 23:08:43 -04:00
key={`list-item-${i}`}
isLast={items.size - 1 === i}
{...item}
/>
))
2020-02-20 19:57:29 -05:00
}
</Wrapper>
2020-04-29 18:32:49 -04:00
</Block>
2020-02-20 19:57:29 -05:00
)
}
}