Leite

src/components/AddPlayerInput.js

@@ -6,15 +6,29 @@ import styles from './AddPlayerInput.css';
 class AddPlayerInput extends Component {
   render() {
     return (
-      <input
-        type="text"
-        autoFocus={true}
-        className={classnames('form-control', styles.addPlayerInput)}
-        placeholder="Type the name of a player"
-        value={this.state.name}
-        onChange={this.handleChange.bind(this)}
-        onKeyDown={this.handleSubmit.bind(this)}
-      />
+      <div>
+        <input
+          type="text"
+          autoFocus={true}
+          className={classnames('form-control', styles.addPlayerInput)}
+          placeholder="Type the name of a player"
+          value={this.state.name}
+          onChange={this.handleChange.bind(this)}
+          // onKeyDown={this.handleSubmit.bind(this)}
+        />
+        <div>
+          <select name="" id="" onChange={this.handleChangePosition.bind(this)}>
+            <option value="">please select position</option>
+            <option value="sf">sf</option>
+            <option value="ps">ps</option>
+            <option value="pg">pg</option>
+            <option value="sg">sg</option>
+          </select>
+        </div>
+        <div>
+          <button onClick={this.handleSubmit.bind(this)}>submit</button>
+        </div>
+      </div>
     );
   }
 
@@ -28,13 +42,23 @@ class AddPlayerInput extends Component {
   handleChange(e) {
     this.setState({ name: e.target.value });
   }
+  handleChangePosition(e) {
 
+    this.setState({ position: e.target.value });
+  }
   handleSubmit(e) {
-    const name = e.target.value.trim();
-    if (e.which === 13) {
-      this.props.addPlayer(name);
-      this.setState({ name: '' });
+    const name = this.state.name;
+    const position  = this.state.position
+    if(!name || !position){
+      alert("name or position don't empty")
+      return false;
     }
+
+    this.props.addPlayer({
+      name,position
+    });
+    this.setState({ name: ''});
+
   }
 }
 

src/components/PlayerList.js

@@ -2,25 +2,114 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import styles from './PlayerList.css';
 import PlayerListItem from './PlayerListItem';
+import { connect } from 'react-redux';
+import Pagination  from './pagination';
+import './style.css'
+
+//import {addPlayer, deletePlayer, starPlayer} from "../actions/PlayersActions";
 
 class PlayerList extends Component {
+  constructor(props){
+    super(props)
+
+
+    this.state = {
+      indexList : this.props.players.slice(0,5), //初始化第一页，只取5条
+      totalNum:this.props.players.length,//总记录数
+      totalData:[],
+      current: 1, //当前页码
+      pageSize:5, //每页显示的条数5条
+      totalPage:Math.ceil(this.props.players.length/5),//总页数
+    }
+  }
+  componentWillReceiveProps(nextProps, nextContext) {
+
+    this.setState({
+      totalPage:Math.ceil(nextProps.players.length/5),
+      indexList: nextProps.players.slice(0,5)
+    },()=>{
+      if(this.state.totalPage >=  this.state.current){
+        this.pageClick(this.state.current)
+      }
+    })
+
+  }
+
+  componentWillMount(){
+
+  }
+  splitPlayersArr(data){
+    let arr = [];
+    for(var i=0;i<data.length;i+=5){
+      arr.push(data.slice(i,i+5));
+    }
+  }
+  //点击翻页
+  pageClick(pageNum){
+    let _pageNum = pageNum - 1;
+    let _playersArr = this.props.players;
+    let _result = [];
+    for(var i=0;i<_playersArr.length;i+=5){
+      _result.push(_playersArr.slice(i,i+5));
+    }
+    this.setState({
+      indexList : _result[_pageNum],
+      totalPage:Math.ceil(_playersArr.length/5),
+      current : pageNum
+    });
+    if(pageNum != this.state.current){
+      this.setState({
+
+        current : pageNum
+      });
+    }
+
+
+  }
+  //上一步
+  goPrevClick(){
+
+    let cur = this.state.current-1;
+    if(cur > 0){
+      this.pageClick(cur);
+    }
+  }
+  //下一步
+  goNext(){
+
+    let cur = this.state.current;
+    if(cur < this.state.totalPage){
+      this.pageClick(cur + 1);
+    }
+  }
   render() {
     return (
-      <ul className={styles.playerList}>
-        {this.props.players.map((player, index) => {
-          return (
-            <PlayerListItem
-              key={index}
-              id={index}
-              name={player.name}
-              team={player.team}
-              position={player.position}
-              starred={player.starred}
-              {...this.props.actions}
-            />
-          );
-        })}
-      </ul>
+      <div>
+        <ul className={styles.playerList}>
+          {this.state.indexList.map((player, index) => {
+            return (
+              <PlayerListItem
+                key={index}
+                id={index}
+                current={this.state.current-1}
+                name={player.name}
+                team={player.team}
+                position={player.position}
+                starred={player.starred}
+                {...this.props.actions}
+              />
+            );
+          })}
+        </ul>
+        <Pagination total={this.state.totalNum}
+                       current={this.state.current}
+                       totalPage={this.state.totalPage}
+
+                       pageClick={this.pageClick.bind(this)}
+                       goPrev={this.goPrevClick.bind(this)}
+                       goNext={this.goNext.bind(this)}
+                        />
+      </div>
     );
   }
 }
@@ -31,3 +120,18 @@ PlayerList.propTypes = {
 };
 
 export default PlayerList;
+
+
+// function mapStateToProps(state) {
+//   return state;
+// }
+// function mapDispatchToProps(dispatch) {
+//   return {
+//     changePlayerId: (state) => dispatch(state)
+//   }
+// }
+//
+// export default connect(
+//   mapStateToProps,
+//   mapDispatchToProps,
+// )(PlayerList);

src/components/PlayerListItem.js

@@ -20,7 +20,8 @@ class PlayerListItem extends Component {
         <div className={styles.playerActions}>
           <button
             className={`btn btn-default ${styles.btnAction}`}
-            onClick={() => this.props.starPlayer(this.props.id)}
+            onClick={() => {
+              this.props.starPlayer( (this.props.id + this.props.current*5 ))}}
           >
             <i
               className={classnames('fa', {
@@ -31,7 +32,7 @@ class PlayerListItem extends Component {
           </button>
           <button
             className={`btn btn-default ${styles.btnAction}`}
-            onClick={() => this.props.deletePlayer(this.props.id)}
+            onClick={() => this.props.deletePlayer((this.props.id + this.props.current*5 ))}
           >
             <i className="fa fa-trash" />
           </button>

src/components/pagination.js

@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+
+class Pagination extends  Component{
+  render(){
+    let _this = this;
+    //当前页码
+    let cur = this.props.current;
+
+    //显示分页按钮
+    let pageNum = [];
+    let begin;
+    let len;
+    if(_this.props.totalPage > 5){
+      len = 5;
+      if(cur >= (_this.props.totalPage-2)){
+        begin = _this.props.totalPage - 4;
+      }else if(cur <= 3){
+        begin = 1;
+      }else{
+        begin = cur - 2;
+      }
+    }else{
+      len = _this.props.totalPage;
+      begin = 1;
+    }
+//根据返回的总记录数计算当前页显示的数据
+    for(let i = 0; i < len; i ++){
+      let cur = this.props.current;
+      let showI = begin + i;
+      if(cur === showI){
+        pageNum.push({num : showI, cur : true});
+      }else{
+        pageNum.push({num : showI, cur : false});
+      }
+    }
+    return(
+      <div >
+        <div className="paginationDiv clearfix" >
+          <div className="rightDiv" >
+            <div style={{float:"left"}} ></div>
+
+          </div>
+
+          <div className="leftDiv">
+            <a className={this.props.current == 1? 'prev disable' : 'prev'} onClick={this.props.goPrev.bind(this)}>prev page</a>
+            <span>
+                              {
+                                pageNum.map(function(curPageNum){
+                                  return(<a key={curPageNum.num} onClick = {_this.props.pageClick.bind(_this,curPageNum.num)} className={curPageNum.cur ? 'num   current'  : 'num'}>{curPageNum.num}</a>)      })
+                              }
+                        </span>
+
+            <a className={this.props.current == this.props.totalPage? 'next disable' : 'next'} onClick={this.props.goNext.bind(this)}>next page</a>
+          </div>
+
+        </div>
+      </div>
+    )
+  }
+}
+export default Pagination;

src/components/style.css

@@ -0,0 +1,11 @@
+.paginationDiv a{
+  border: 1px solid #ddd;
+  padding: 5px 10px;
+}
+.paginationDiv a.current{
+  color: red;
+  border: 1px solid red;
+}
+.paginationDiv a.disable{
+  background: #ccc;
+}

src/index.js

@@ -2,7 +2,6 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import App from './containers/App';
 import './index.css';
-
 ReactDOM.render(
   <App />,
   document.getElementById('root')

src/reducers/playerlist.js

@@ -44,14 +44,15 @@ const initialState = {
 export default function players(state = initialState, action) {
   switch (action.type) {
     case types.ADD_PLAYER:
+
       return {
         ...state,
         playersById: [
           ...state.playersById,
           {
-            name: action.name,
+            name: action.name.name,
             team: 'LOS ANGELES LAKERS',
-            position: 'SF',
+            position: action.name.position,
           },
         ],
       };
@@ -63,9 +64,11 @@ export default function players(state = initialState, action) {
         ),
       };
     case types.STAR_PLAYER:
+
       let players = [...state.playersById];
       let player = players.find((item, index) => index === action.id);
       player.starred = !player.starred;
+
       return {
         ...state,
         playersById: players,