pagination

package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "classnames": "^2.2.6",
     "lodash": "^4.17.15",
+    "nanoid": "^3.1.23",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
@@ -20,5 +21,10 @@
   "devDependencies": {
     "react-scripts": "3.4.0"
   },
-  "browserslist": [">0.2%", "not dead", "not ie <= 11", "not op_mini all"]
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ]
 }

src/actions/PlayersActions.js

@@ -20,3 +20,10 @@ export function starPlayer(id) {
     id,
   };
 }
+
+export function selectPosition(position) {
+  return {
+    type: types.SELECT_POSITION,
+    position,
+  };
+}

src/components/Pagination.css

@@ -0,0 +1,24 @@
+.pagination {
+  /* display: flex; */
+  /* align-items: center; */
+  width: 100%;
+  height: 30px;
+}
+.pagination ul {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  height: 30px;
+  line-height: 30px;
+  list-style-type: none;
+}
+.pagination li {
+  width: 40px;
+  text-align: center;
+  cursor: pointer;
+  border: 1px solid #abaaaa;
+}
+
+.pagination .current {
+  box-shadow: 0 0 2px 1px slateblue;
+}

src/components/Pagination.js

@@ -0,0 +1,132 @@
+import React, { Component } from 'react'
+import PaginationItem from './PaginationItem'
+import PropTypes from 'prop-types'
+import './Pagination.css'
+
+export default class Pagination extends Component {
+
+  state = {
+    current: 1,
+  }
+
+  static getDerivedStateFromProps(props) {
+    const { defaultCurrent = 1, pageSize = 2, total, list } = props
+    const index = (props.current - 1) * pageSize
+    const pages = Math.ceil(total / pageSize)
+    let current = props.current ? props.current : defaultCurrent
+    // console.log(current, pages)
+    let showPages = [...Array(pages).keys()]
+
+    let prev = current - 1,
+    cur = current,
+    next = current + 1
+
+    if (pages > 7) { // 超出7页, 显示...
+      showPages = [...Array(6).keys()].slice(2, 5)
+      if (current <= 3) {
+        showPages.splice(2, 1, '...')
+        showPages = [1, ...showPages, pages]
+      } else if (current >= pages - 2) {
+        showPages = [1, '...', pages -2, pages -1 , pages]
+      } else {
+        showPages = [1, '...', prev, cur, next, '...', pages]
+      }
+      // console.log(showPages)
+    } else { //正常显示
+      showPages = showPages.map(item => item + 1)
+    }
+
+    // 判断用户是否删除了最后一页的所有数据
+    if (current - (total / pageSize) === 1) {
+      current = current - 1
+      props.onChange(current)
+    }
+
+    return {
+      current: current,
+      pages: pages,
+      list: list.slice(index, index+pageSize), // 当前页显示的 playerlist
+      showPages: showPages,
+    }
+  }
+
+  // 跳转到某页
+  onChange = (currentPage) => {
+    // console.log(currentPage)
+    if (currentPage >= this.state.pages) {
+      currentPage = this.state.pages
+    } else if (currentPage <= 1) {
+      currentPage = 1
+    }
+    this.props.onChange(currentPage)
+  }
+  // 输入页数, 跳转某页
+  handleQuickJumper = (e) => {
+    if (e.keyCode === 13) {
+      this.onChange(e.target.value*1)
+      e.target.value = ''
+    }
+  }
+
+  // 选择pageSize
+  selectPageSize = (e) => {
+    console.log(e.target.value)
+    this.props.changePageSize(e.target.value*1)
+  }
+
+  render() {
+    const { total = 0 } = this.props
+    const {list, current, showPages} = this.state
+    // console.log(this.props, this.state)
+    return (
+      <div>
+        {this.props.render && this.props.render(list)}
+
+        <div className="pagination">
+          <ul>
+            <PaginationItem
+              current={current}
+              handle={() => { this.onChange(current - 1) }}
+              render={() => 'pre'}
+            />
+            {showPages.map((item, index) => {
+              return (
+                <PaginationItem
+                  key={index}
+                  index={index}
+                  length={showPages.length}
+                  item={item}
+                  current={current}
+                  handle={this.onChange}
+                  render={() => item}
+                />
+              )
+            })}
+            <PaginationItem
+              current={current}
+              handle={() => { this.onChange(current + 1) }}
+              render={() => 'next'}
+            />
+          </ul>
+          <div className="show-total">
+            total: {total || 0}
+            <select onChange={this.selectPageSize}>
+              <option value={1}>1条/页</option>
+              <option value={5}>5条/页</option>
+              <option value={10}>10条/页</option>
+            </select>
+            {this.props.showJumper && (<div>go<input type="text" onKeyUp={this.handleQuickJumper} /></div>)}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+Pagination.propTypes = {
+  current: PropTypes.number,
+  defaultCurrent: PropTypes.number,
+  total: PropTypes.number,
+  onChange: PropTypes.func,
+  pageSize: PropTypes.number,
+}

src/components/PaginationItem.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class PaginationItem extends Component {
+
+  onChange = () => {
+    const {current, index, item, length} = this.props
+    // console.log(item === '...', length, index)
+    let val = item
+    if (item === '...' && index === 1) {
+      console.log('点击...  -3')
+      val = current - 3
+    } else if (item === '...' && index === length-2) {
+      console.log('点击...  +3')
+      val = current + 3
+    }
+    this.props.handle(val)
+  }
+
+  render() {
+    const {current, item} = this.props
+    return (
+      <li
+        className={current === item ? 'current' : ''}
+        onClick={this.onChange}
+      >
+        { this.props.render() }
+      </li>
+    )
+  }
+}
+
+PaginationItem.propTypes = {
+  current: PropTypes.number,
+  onChange: PropTypes.func,
+}

src/components/PlayerList.css

@@ -1,4 +1,5 @@
 :local(.playerList) {
   padding-left: 0;
   margin-bottom: 0;
+  background-color: salmon;
 }

src/components/PlayerList.js

@@ -11,7 +11,7 @@ class PlayerList extends Component {
           return (
             <PlayerListItem
               key={index}
-              id={index}
+              id={player.id}
               name={player.name}
               team={player.team}
               position={player.position}

src/components/PlayerListItem.js

@@ -42,7 +42,7 @@ class PlayerListItem extends Component {
 }
 
 PlayerListItem.propTypes = {
-  id: PropTypes.number.isRequired,
+  id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   team: PropTypes.string.isRequired,
   position: PropTypes.string.isRequired,

src/components/PositionSelect.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react'
+
+export default class PositionSelect extends Component {
+  render() {
+    return (
+      <select
+        onChange={e => {this.props.selectPosition(e.target.value)}}
+        defaultValue={this.props.defaultPosition}
+      >
+        <option value="PG">PG</option>
+        <option value="SG">SG</option>
+        <option value="SF">SF</option>
+        <option value="PF">PF</option>
+        <option value="C">C</option>
+      </select>
+    )
+  }
+}

src/components/index.js

@@ -1,3 +1,5 @@
 export { default as AddPlayerInput } from './AddPlayerInput';
 export { default as PlayerList } from './PlayerList';
 export { default as PlayerListItem } from './PlayerListItem';
+export { default as Pagination } from './Pagination';
+export { default as PositionSelect } from './PositionSelect';

src/constants/ActionTypes.js

@@ -1,3 +1,4 @@
 export const ADD_PLAYER = 'ADD_PLAYER';
 export const STAR_PLAYER = 'STAR_PLAYER';
 export const DELETE_PLAYER = 'DELETE_PLAYER';
+export const SELECT_POSITION = 'SELECT_POSITION';

src/containers/PlayerListApp.js

@@ -2,26 +2,58 @@ import React, { Component } from 'react';
 import styles from './PlayerListApp.css';
 import { connect } from 'react-redux';
 
-import { addPlayer, deletePlayer, starPlayer } from '../actions/PlayersActions';
-import { PlayerList, AddPlayerInput } from '../components';
+import { addPlayer, deletePlayer, starPlayer, selectPosition } from '../actions/PlayersActions';
+import { PlayerList, AddPlayerInput, Pagination, PositionSelect } from '../components';
 
 class PlayerListApp extends Component {
+
+  state = {
+    current: 1,// 当前页
+    pageSize: 1, // 1条/页
+  }
+
+  onChange = (currentPage) => { // 更新当前页
+    this.setState({current: currentPage})
+  }
+
+  changePageSize = (pageSize) => {
+    this.setState({pageSize})
+  }
+
   render() {
     const {
-      playerlist: { playersById },
+      playerlist: { playersById, defaultPosition },
     } = this.props;
 
+    let {current, pageSize} = this.state
+    console.log(playersById)
     const actions = {
       addPlayer: this.props.addPlayer,
       deletePlayer: this.props.deletePlayer,
       starPlayer: this.props.starPlayer,
+      selectPosition: this.props.selectPosition,
     };
 
     return (
       <div className={styles.playerListApp}>
         <h1>NBA Players</h1>
         <AddPlayerInput addPlayer={actions.addPlayer} />
-        <PlayerList players={playersById} actions={actions} />
+        <PositionSelect defaultPosition={defaultPosition} selectPosition={actions.selectPosition} />
+        <Pagination
+          current={current}
+          total={playersById.length}
+          pageSize={pageSize}
+          changePageSize={this.changePageSize}
+          onChange={this.onChange}
+          list={playersById}
+          showJumper={true}
+          render={(players) => (
+            <PlayerList
+              players={players}
+              actions={actions}
+            />
+          )}
+        />
       </div>
     );
   }
@@ -37,5 +69,6 @@ export default connect(
     addPlayer,
     deletePlayer,
     starPlayer,
+    selectPosition
   },
 )(PlayerListApp);