{"size": 977, "ext": "js", "max_stars_repo_path": "screens/discovery/tags/list.js", "max_stars_repo_name": "msdgwzhy6/Bangumi", "max_stars_repo_stars_event_min_datetime": "2019-10-27T06:09:40.000Z", "max_stars_repo_stars_event_max_datetime": "2019-10-27T06:09:40.000Z", "max_issues_repo_path": "screens/discovery/tags/list.js", "max_issues_repo_name": "msdgwzhy6/Bangumi", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "screens/discovery/tags/list.js", "max_forks_repo_name": "msdgwzhy6/Bangumi", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 22.2045454545, "max_line_length": 62, "alphanum_fraction": 0.6100307062}
/*
 * @Author: czy0729
 * @Date: 2019-10-03 15:43:03
 * @Last Modified by: czy0729
 * @Last Modified time: 2019-10-03 16:30:49
 */
import React from 'react'
import PropTypes from 'prop-types'
import { observer } from 'mobx-react'
import { Loading, ListView } from '@components'
import _ from '@styles'
import Item from './item'
import { tabs } from './store'

function List({ index }, { $ }) {
  const { key } = tabs[index]
  const list = $.list(key)
  if (!list._loaded) {
    return <Loading style={_.container.screen} />
  }

  return (
    <ListView
      style={_.container.screen}
      keyExtractor={item => `${item.title}|${item.nums}`}
      data={list}
      numColumns={4}
      renderItem={({ item }) => <Item type={key} {...item} />}
      onHeaderRefresh={() => $.fetchList(key, true)}
      onFooterRefresh={() => $.fetchList(key)}
    />
  )
}

List.defaultProps = {
  title: '全部'
}

List.contextTypes = {
  $: PropTypes.object
}

export default observer(List)
