質問編集履歴

コードの間違い

2018/10/04 00:47

投稿

sixth13

スコア33

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -110,73 +110,289 @@
 import React from 'react';
-import Pagination from './Pagination';
-class App extends React.Component {
-    constructor() {
-        super();
-        // an example array of items to be paged
-        var exampleItems = [...Array(150).keys()].map(i => ({ id: (i+1), name: 'Item ' + (i+1) }));
-        this.state = {
-            exampleItems: exampleItems,
-            pageOfItems: []
+import PropTypes from 'prop-types';
+import { BrowserRouter, Route, Link } from 'react-router-dom'
+const propTypes = {
+    items: PropTypes.array.isRequired,
+    onChangePage: PropTypes.func.isRequired,
+    initialPage: PropTypes.number,
+    pageSize: PropTypes.number,
+    currentPage: PropTypes.number
+}
+const defaultProps = {
+    initialPage: 1,
+    pageSize: 10
+}
+class Pagination extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = { pager: {} };
+        const reg = /\d+$/;
+        const url = String(location.href)
+        const notInitialPage = reg.test(url)
+        // currentPage = url.match(reg)[0]
+        // console.log(currentPage)
+    }
+    componentWillMount() {
+        // set page if items array isn't empty
+        if (this.props.items && this.props.items.length) {
+            this.setPage(this.props.initialPage);
+        }
+    }
+    componentDidUpdate(prevProps, prevState) {
+        // reset page if items array has changed
+        if (this.props.items !== prevProps.items) {
+            this.setPage(this.props.initialPage);
+        }
+    }
+    setPage(page) {
+        var { items, pageSize } = this.props;
+        var pager = this.state.pager;
+        if (page < 1 || page > pager.totalPages) {
+            return;
+        }
+        // get new pager object for specified page
+        pager = this.getPager(items.length, page, pageSize);
+        // get new page of items from items array
+        var pageOfItems = items.slice(pager.startIndex, pager.endIndex + 1);
+        // update state
+        this.setState({ pager: pager });
+        // call change page function in parent component
+        this.props.onChangePage(pageOfItems);
+    }
+    getPager(totalItems, currentPage, pageSize) {
+        // default to first page
+        currentPage = currentPage || 1;
+        // default page size is 10
+        pageSize = pageSize || 10;
+        // calculate total pages
+        var totalPages = Math.ceil(totalItems / pageSize);
+        var startPage, endPage;
+        if (totalPages <= 10) {
+            // less than 10 total pages so show all
+            startPage = 1;
+            endPage = totalPages;
+        } else {
+            // more than 10 total pages so calculate start and end pages
+            if (currentPage <= 6) {
+                startPage = 1;
+                endPage = 10;
+            } else if (currentPage + 4 >= totalPages) {
+                startPage = totalPages - 9;
+                endPage = totalPages;
+            } else {
+                startPage = currentPage - 5;
+                endPage = currentPage + 4;
+            }
+        }
+        // calculate start and end item indexes
+        var startIndex = (currentPage - 1) * pageSize;
+        var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
+        // create an array of pages to ng-repeat in the pager control
+        var pages = [...Array((endPage + 1) - startPage).keys()].map(i => startPage + i);
+        // return object with all pager properties required by the view
+        return {
+            totalItems: totalItems,
+            currentPage: currentPage,
+            pageSize: pageSize,
+            totalPages: totalPages,
+            startPage: startPage,
+            endPage: endPage,
+            startIndex: startIndex,
+            endIndex: endIndex,
+            pages: pages
         };
-        this.onChangePage = this.onChangePage.bind(this);
-    }
-    onChangePage(pageOfItems) {
-        // update state with new page of items
-        this.setState({ pageOfItems: pageOfItems });
     }
     render() {
+        var pager = this.state.pager;
+        if (!pager.pages || pager.pages.length <= 1) {
+            // don't display pager if there is only 1 page
+            return null;
+        }
         return (
-            <div>
+            <BrowserRouter>
-                <div className="container">
+            <ul className="pagination">
-                    <div className="text-center">
+                <li className={pager.currentPage === 1 ? 'disabled' : ''}>
-                        {this.state.pageOfItems.map(item =>
-                            <div key={item.id}>{item.name}</div>
+                    <a onClick={() => this.setPage(1)}>First</a>
+                </li>
+                <li className={pager.currentPage === 1 ? 'disabled' : ''}>
+                    <a onClick={() => this.setPage(pager.currentPage - 1)}>Previous</a>
+                </li>
+                {pager.pages.map((page, index) =>
+                    <li key={index} className={pager.currentPage === page ? 'active' : ''}>
+                        <Link to={page.toString()} onClick={() => this.setPage(page)}>{page}</Link>
+                    </li>
-                        )}
+                )}
+                <li className={pager.currentPage === pager.totalPages ? 'disabled' : ''}>
-                        <Pagination items={this.state.exampleItems} onChangePage={this.onChangePage} />
+                    <a onClick={() => this.setPage(pager.currentPage + 1)}>Next</a>
-                    </div>
+                </li>
+                <li className={pager.currentPage === pager.totalPages ? 'disabled' : ''}>
+                    <a onClick={() => this.setPage(pager.totalPages)}>Last</a>
-                </div>
+                </li>
-            </div>
+            </ul>
+            </BrowserRouter>
         );
@@ -186,7 +402,11 @@
+Pagination.propTypes = propTypes;
+Pagination.defaultProps = defaultProps;
-export default App;
+export default Pagination;
 ```