change Paginator style (#7056)

frontend/src/components/paginator.js

@@ -1,7 +1,9 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import className from 'classnames';
 import { navigate } from '@gatsbyjs/reach-router';
 import { gettext } from '../utils/constants';
+import { DropdownMenu, Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
 
 import '../css/pagination.css';
 
@@ -14,10 +16,18 @@ const propTypes = {
   curPerPage: PropTypes.number.isRequired
 };
 
+const PAGES = [25, 50, 100];
+
 class Paginator extends Component {
 
-  resetPerPage = (e) => {
+  constructor(props) {
-    const perPage = parseInt(e.target.value);
+    super(props);
+    this.state = {
+      isMenuShow: false
+    };
+  }
+
+  resetPerPage = (perPage) => {
     this.updateURL(1, perPage);
     this.props.resetPerPage(perPage);
   };
@@ -47,6 +57,24 @@ class Paginator extends Component {
     return gettext('{number_placeholder} / Page').replace('{number_placeholder}', perPage);
   };
 
+  toggleOperationMenu = (e) => {
+    e.stopPropagation();
+    this.setState({ isMenuShow: !this.state.isMenuShow });
+  };
+
+  renderDropdownItem = (curPerPage, perPage) => {
+    return (
+      <DropdownItem onClick={() => {this.resetPerPage(perPage);}} key={perPage}>
+        <span className='paginator-dropdown-tick'>
+          {curPerPage === perPage && <i className="sf2-icon-tick"></i>}
+        </span>
+        <span>
+          {this.getPerPageText(perPage)}
+        </span>
+      </DropdownItem>
+    );
+  };
+
   render() {
     const { curPerPage, currentPage } = this.props;
     return (
@@ -67,15 +95,22 @@ class Paginator extends Component {
           <span className="sf3-font sf3-font-down rotate-270 d-inline-block"></span>
         </button>
 
-        <select
+        <Dropdown isOpen={this.state.isMenuShow} toggle={this.toggleOperationMenu} direction="up" className="paginator-dropdown">
-          className="form-control d-inline-block w-auto ml-6"
+          <DropdownToggle
-          value={curPerPage}
+            className="ml-6"
-          onChange={this.resetPerPage}
+            data-toggle="dropdown"
-        >
+            aria-expanded={this.state.isMenuShow}
-          <option value="25">{this.getPerPageText(25)}</option>
+            onClick={this.toggleOperationMenu}
-          <option value="50">{this.getPerPageText(50)}</option>
+          >
-          <option value="100">{this.getPerPageText(100)}</option>
+            <span className='pr-3'>{this.getPerPageText(curPerPage)}</span>
-        </select>
+            <span className={className('sf3-font sf3-font-down d-inline-block', { 'rotate-180': this.state.isMenuShow })}></span>
+          </DropdownToggle>
+          <DropdownMenu>
+            {PAGES.map(perPage => {
+              return this.renderDropdownItem(curPerPage, perPage);
+            })}
+          </DropdownMenu>
+        </Dropdown>
       </div>
     );
   }

frontend/src/css/pagination.css

@@ -1,3 +1,32 @@
 .paginator .btn {
   min-width: 2.375rem;
+  font-weight: normal;
+}
+
+.paginator .paginator-dropdown .btn:active,
+.paginator .paginator-dropdown .btn:focus {
+  background-color: #fff;
+  border-color: #1991eb;
+  outline: 0;
+  box-shadow: 0 0 0 2px rgba(70, 127, 207, 0.25);
+}
+
+.paginator-dropdown .dropdown-menu {
+  min-width: auto;
+}
+
+.paginator-dropdown>.btn .sf3-font {
+  color: #666;
+}
+
+.paginator-dropdown .dropdown-menu .dropdown-item {
+  display: flex;
+  padding-left: 10px;
+  padding-right: 24px;
+}
+
+.paginator-dropdown .dropdown-menu .dropdown-item .paginator-dropdown-tick {
+  display: inline-block;
+  width: 14px;
+  margin-right: 4px;
 }