Просмотр исходного кода

Merge pull request #4536 from weseek/feat/77551-79949-show-tentative-pagination

79949 show tentetive pagination
Yuki Takei 4 лет назад
Родитель
Сommit
870fd98dbe
1 измененных файлов с 24 добавлено и 9 удалено
  1. 24 9
      packages/app/src/components/SearchPage/SearchResultList.jsx

+ 24 - 9
packages/app/src/components/SearchPage/SearchResultList.jsx

@@ -1,19 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import SearchResultListItem from './SearchResultListItem';
+import PaginationWrapper from '../PaginationWrapper';
 
 class SearchResultList extends React.Component {
 
   render() {
-    return this.props.pages.map((page) => {
-      return (
-        <SearchResultListItem
-          page={page}
-          onClickInvoked={this.props.onClickInvoked}
-          noLink
-        />
-      );
-    });
+    return (
+      <>
+        {this.props.pages.map((page) => {
+          return (
+            <SearchResultListItem
+              page={page}
+              onClickInvoked={this.props.onClickInvoked}
+              noLink
+            />
+          );
+        })}
+        <div className="my-4 mx-auto">
+          <PaginationWrapper
+            activePage={1}
+            changePage={() => { console.log('page chagned') }} // Todo: replace this with a function to change state vars
+            // a total number of pages that can be retrieved from elasticsearch on the current search condition
+            totalItemsCount={10} // Todo: replace this with a state that dynamically changes its value
+            // a number of pages to show in one page
+            pagingLimit={5} // Todo: replace this with a state that dynamically changes its value
+          />
+        </div>
+      </>
+    );
   }
 
 }