提交呀～

package.json

@@ -18,7 +18,16 @@
     "redux": "^4.0.5"
   },
   "devDependencies": {
-    "react-scripts": "3.4.0"
+    "css-loader": "^3.4.2",
+    "node-sass": "^4.13.1",
+    "react-scripts": "3.4.0",
+    "sass-loader": "^8.0.2",
+    "style-loader": "^1.1.3"
   },
-  "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

@@ -1,9 +1,10 @@
 import * as types from '../constants/ActionTypes';
 
-export function addPlayer(name) {
+export function addPlayer(name, position) {
   return {
     type: types.ADD_PLAYER,
     name,
+    position
   };
 }
 

src/components/AddPlayerInput.css

@@ -1,6 +1,16 @@
+.select-container {
+  width: 100%;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+  flex-direction: column;
+}
 :local(.addPlayerInput) {
+  width: 100%;
   border-radius: 0;
   border-color: #abaaaa;
   border-left: 0;
+  margin-bottom: 10px;
   border-right: 0;
 }
+

src/components/AddPlayerInput.js

@@ -6,34 +6,72 @@ 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 className='select-container'>
+        <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)}
+        />
+        <select className={classnames('form-control', styles.addPlayerInput)} id="" onChange={this.handleChangePosition.bind(this)}>
+          <option value="">please select position</option>
+          <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>
+        <button onClick={() => this.handleSubmitToAdd()} className={classnames('form-control', styles.addPlayerInput)}>
+          ADD
+        </button>
+      </div>
+
     );
   }
 
   constructor(props, context) {
     super(props, context);
     this.state = {
       name: this.props.name || '',
+      position: this.props.position || ''
     };
   }
 
+  handleSubmitToAdd = () => {
+    const { name, position } = this.state
+    if (name === '' || position === '') {
+      alert('please input name or position')
+      return
+    }
+    this.props.addPlayer(name, position);
+    this.setState({ name: '', position: '' });
+
+  }
+
+  handleChangePosition = (e) => {
+    console.log(e.target.value)
+    this.setState({
+      position: e.target.value
+    })
+  }
+
   handleChange(e) {
     this.setState({ name: e.target.value });
   }
 
   handleSubmit(e) {
     const name = e.target.value.trim();
+    const { position } = this.state
     if (e.which === 13) {
-      this.props.addPlayer(name);
-      this.setState({ name: '' });
+      if (name === '' || position === '') {
+        alert('please input name or position')
+        return
+      }
+      this.props.addPlayer(name, position);
+      this.setState({ name: '', position: '' });
     }
   }
 }

src/components/Pagination.js

@@ -0,0 +1,185 @@
+import React from 'react';
+
+import './Pagination.scss';
+
+/**
+ * @export 分页器
+ */
+
+class Pagination extends React.Component {
+    static defaultProps = {
+
+    }
+
+    constructor(props) {
+        super(props)
+        this.state = {
+            ...props
+        }
+    }
+
+    componentWillReceiveProps(nextProps) {
+        // this.state = {
+        //     ...nextProps
+        // }
+        this.setState({
+            ...nextProps
+        })
+    }
+
+    changePage(nextPage) {
+        var { maxPage } = this.state.paginationConf;
+        if (nextPage > 0 && nextPage < (maxPage + 1)) {
+            this.props.changePage(nextPage);
+        }
+        // this.setState({
+        //     paginationConf: Object.assign({}, this.state.paginationConf, {curPage: nextPage})
+        // })
+    }
+
+    generateLess10(paginationConf) {
+        var maxPage = paginationConf.maxPage,
+            curPage = paginationConf.curPage,
+            pagination = [];
+
+        //test
+        // maxPage = 9; curPage = 4;
+
+        for (var i = 0; i < maxPage; i++) {
+            var className = " ";
+            if ((i + 1) === curPage) {
+                className += "on";
+            }
+            var item = <a key={i} className={className} onClick={this.changePage.bind(this, i + 1)}>{i + 1}</a>
+            pagination.push(item)
+        }
+        return pagination;
+    }
+
+    generateLarge10less6(paginationConf) {
+        var maxPage = paginationConf.maxPage,
+            curPage = paginationConf.curPage,
+            pagination = [];
+
+        //test
+        // maxPage = 10; curPage = 2;
+
+        for (var i = 0; i < maxPage; i++) {
+            var className = " ";
+            if ((i + 1) === curPage) {
+                className += "on";
+            }
+            if (i > 5)
+                break;
+            var item = <a key={i} className={className} onClick={this.changePage.bind(this, i + 1)}>{i + 1}</a>
+            pagination.push(item)
+        }
+        if (maxPage > 6) {
+            var defaultItem = <a className={" disable "}>...</a>
+            var lastItem = <a className={" " + (paginationConf.curPage === maxPage ? "on" : "")} onClick={this.changePage.bind(this, maxPage)}>{maxPage}</a>
+            pagination.push([defaultItem, lastItem]);
+        }
+        return pagination;
+    }
+
+    generateLarge10between(paginationConf) {
+        var maxPage = paginationConf.maxPage,
+            curPage = paginationConf.curPage,
+            pagination = [];
+
+        //test
+        // maxPage = 10; curPage = 5;
+        var firstItem = <a className={" "} onClick={this.changePage.bind(this, 1)} >1</a>;
+        var defaultItem = <a className={" disable "}>...</a>;
+        var lastItem = <a className={" "} onClick={this.changePage.bind(this, maxPage)} >{maxPage}</a>;
+        pagination.push([firstItem, defaultItem]);
+        for (var i = curPage - 2; i < curPage + 3; i++) {
+            var className = " ";
+            if (i === curPage) {
+                className += "on";
+            }
+            var item = <a key={i} className={className} onClick={this.changePage.bind(this, i)}>{i}</a>
+            pagination.push(item)
+        }
+        pagination.push([defaultItem, lastItem]);
+        return pagination;
+    }
+
+    generateLarge10after(paginationConf) {
+        var maxPage = paginationConf.maxPage,
+            curPage = paginationConf.curPage,
+            pagination = [];
+        //test
+        // maxPage = 10; curPage = 6;
+        var firstItem = <a className={" "} onClick={this.changePage.bind(this, 1)} >1</a>;
+        var defaultItem = <a className={" disable "}>...</a>;
+        pagination.push([firstItem, defaultItem]);
+        for (var i = maxPage - 5; i < maxPage; i++) {
+            var className = " ";
+            if ((i + 1) === curPage) {
+                className += "on";
+            }
+            var item = <a key={i} className={className} onClick={this.changePage.bind(this, i + 1)}>{i + 1}</a>
+            pagination.push(item)
+        }
+        return pagination;
+    }
+
+    generatePagination() {
+        var { paginationConf } = this.state;
+        var curPage = paginationConf.curPage;
+
+        var maxPage = paginationConf.maxPage;
+        // var maxPage = 10;
+        // curPage = 6;
+        // var pagination = [];
+        /*
+            1 2 3 4 5 6 7 8 9
+            1 2 3 4 5 6 …… maxPage
+            1 …… 3 4 5 6 7 …… maxPage
+            1 …… maxPage-5 maxPage-4 maxPage-3 maxPage-2 maxPage-1 maxPage
+        */
+
+        if (maxPage < 10) {
+            return this.generateLess10(paginationConf);
+        } else if (maxPage >= 10 && curPage < 5) {
+            return this.generateLarge10less6(paginationConf);
+        } else if (maxPage >= 10 && curPage >= 5 && maxPage - curPage >= 4) {
+            return this.generateLarge10between(paginationConf);
+        } else {
+            return this.generateLarge10after(paginationConf);
+        }
+    }
+
+    render() {
+        var { curPage, maxPage } = this.state.paginationConf;
+        return (
+            maxPage && maxPage != 1 ? <div className="pagination-wrapper">
+                <ul>
+                    {
+                        maxPage > 10 &&
+                        <li className="page-pre">
+                            <a className={"page " + (curPage === "1" ? "off" : "")} onClick={this.changePage.bind(this, curPage - 1)}>上一页</a>
+                        </li>
+                    }
+
+                    <li className={"page-count " + (maxPage > 10 ? "" : "alone")}>
+                        {
+                            this.generatePagination()
+                        }
+                    </li>
+                    {
+                        maxPage > 10 &&
+                        <li className="page-after">
+                            <a className={"page " + (curPage === maxPage ? "off" : "")} onClick={this.changePage.bind(this, curPage + 1)} > 下一页</a>
+                        </li>
+                    }
+                </ul>
+            </div>
+                :
+                null
+        )
+    }
+}
+
+export default Pagination;

src/components/Pagination.scss

@@ -0,0 +1,66 @@
+.pagination-wrapper {
+  border-top: 1px solid #f2f2f5;
+  margin-top: 20px;
+  ul {
+      height: 26px;
+      padding: 4px 0;
+      line-height: 26px;
+      text-align: center;
+      li {
+          display: inline-block;
+          a {
+              display: inline-block;
+              color: #333;
+          }
+          &.page-pre,
+          &.page-after {
+              width: 100px;
+              a {
+                  cursor: pointer;
+                  padding: 0 10px;
+                  &.off {
+                      cursor: default;
+                      color: #aaa;
+                  }
+                  &:hover {
+                      background: #f2f2f5;
+                      &.off {
+                          background: none;
+                      }
+                  }
+              }
+          }
+          &.page-count {
+              box-sizing: border-box;
+              border-left: 1px solid #f2f2f5;
+              border-right: 1px solid #f2f2f5;
+              border-left: 1px solid #d9d9d9;
+              border-right: 1px solid #d9d9d9;
+              line-height: 100%;
+              a {
+                  padding: 0 7px;
+                  height: 20px;
+                  line-height: 20px;
+                  margin: 0 8px;
+                  border-radius: 2px;
+                  &.on {
+                    //   background: #f2f2f5;
+                    background-color: #FFF;
+                      font-size: 20px;
+                  }
+                  &:hover {
+                      background: #f2f2f5;
+                      cursor: pointer;
+                      &.disable {
+                          background: none;
+                          cursor: default;
+                      }
+                  }
+              }
+              &.alone {
+                  border: none;
+              }
+          }
+      }
+  }
+}