add general pagination

diff --git a/front-end/package.json b/front-end/package.json
index 9e39a051253cb6f1ccef14a910a0c72b66636016..e42d081c8aeb3c18ee38b010b226df1991e7c52d 100644 (file)
--- a/front-end/package.json
+++ b/front-end/package.json
@@ -26,6 +26,7 @@
   },
   "dependencies": {
     "font-awesome": "^4.7.0",
+    "rc-pagination": "^1.16.3",
     "react": "16.2.0",
     "react-dom": "16.2.0",
     "react-router-dom": "4.2.2",

diff --git a/front-end/src/component/result-filter/index.jsx b/front-end/src/component/result-filter/index.jsx
index 35d71947016416cafcb53174603186bbfa53fb51..f3aefa25b1b5381214cddc05907130ecc1cf65b4 100644 (file)
--- a/front-end/src/component/result-filter/index.jsx
+++ b/front-end/src/component/result-filter/index.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-
+import Pagination from 'util/pagination/index.jsx';
 import './index.css';
 
 class ResultFilter extends React.Component {
@@ -7,6 +7,7 @@ class ResultFilter extends React.Component {
         super(props);
 
         this.state = {
+            current: 3,
             selected: [{
                 'name': 'Category 1',
                 'data': [
@@ -47,12 +48,19 @@ class ResultFilter extends React.Component {
         //todo
     }
 
+    onChange(page) {
+        console.log(page);
+        this.setState({
+            current: page,
+        });
+    }
+
     render() {
         let _this = this;
         let filter = this.state.selected.map((item, i) => {
             let filter_item=item["data"].map((s,index)=>{
                 return (
-                    <dd key={index} className="select-all selected"><a href="#">{s}ss</a></dd>
+                    <dd key={index} className="select-all selected"><a href="#">{s}</a></dd>
                 )
             });
 
@@ -128,6 +136,8 @@ class ResultFilter extends React.Component {
                     </div>
 
                 </div>
+
+                <Pagination locale={en_US} onChange={this.onChange} current={this.state.current} total={25}></Pagination>
                 <div className="panel panel-default">
                     <div className="panel-heading">
                         Advanced Tables

diff --git a/front-end/src/util/pagination/index.jsx b/front-end/src/util/pagination/index.jsx
new file mode 100644 (file)
index 0000000..ade4d48
--- /dev/null
+++ b/front-end/src/util/pagination/index.jsx
@@ -0,0 +1,24 @@
+import React        from 'react';
+import RcPagination   from 'rc-pagination';
+import 'rc-pagination/dist/rc-pagination.min.css';
+import en_US from 'rc-pagination/es/locale/en_US.js';
+// General paging component
+class Pagination extends React.Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <div className="row">
+                <div className="col-md-12">
+                    <RcPagination {...this.props}
+                                  hideOnSinglePage
+                                  showQuickJumper locale={en_US}/>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default Pagination;
\ No newline at end of file

diff --git a/front-end/yarn.lock b/front-end/yarn.lock
index 7f13acbf120964d7db7e768d3b8ea135eeed40e9..2a3d84e617c43b4c5f52dbc96fb5f6ba312d482b 100644 (file)
--- a/front-end/yarn.lock
+++ b/front-end/yarn.lock
@@ -744,7 +744,7 @@ babel-register@^6.26.0:
     mkdirp "^0.5.1"
     source-map-support "^0.4.15"
 
-babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
+babel-runtime@6.x, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0:
   version "6.26.0"
   resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe"
   dependencies:
@@ -4206,7 +4206,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.0:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.1.tgz#36644453564255ddda391191fb3a125cbdf654ca"
   dependencies:
@@ -4325,6 +4325,13 @@ raw-body@2.3.2:
     iconv-lite "0.4.19"
     unpipe "1.0.0"
 
+rc-pagination@^1.16.3:
+  version "1.16.3"
+  resolved "http://registry.npm.taobao.org/rc-pagination/download/rc-pagination-1.16.3.tgz#2d3780a129c290c2e2e85a71b6723a8301484c2e"
+  dependencies:
+    babel-runtime "6.x"
+    prop-types "^15.5.7"
+
 rc@^1.1.7:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.6.tgz#eb18989c6d4f4f162c399f79ddd29f3835568092"