gab-social/app/javascript/gabsocial/components/list.js

69 lines
1.6 KiB
JavaScript
Raw Normal View History

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