Added activeLinkClass

wwwaiser · Jul 30, 2017 · 0fefed7 · 0fefed7
1 parent f7e564f
commit 0fefed7
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -77,7 +77,9 @@ Name | Type | Default | Description
 `nextPageText` | String / ReactElement | `⟩` | Text of next page navigation button
 `innerClass` | String | `pagination` | Class name of `<ul>` tag
 `activeClass` | String | `active` | Class name of active `<li>` tag
+`activeLinkClass` | String |  | Class name of active `<a>` tag
 `itemClass` | String | | Default class of the `<li>` tag
 `linkClass` | String | | Default class of the `<a>` tag
 `disabledClass` | String | `disabled` | Class name of the first, previous, next and last `<li>` tags when disabled
 `hideDisabled` | Boolean | `false` | Hide navigation buttons (prev page, next page) if they are disabled.
+`hideNavigation` | Boolean | `false` | Hide navigation buttons (prev page, next page)
diff --git a/src/components/Page.js b/src/components/Page.js
@@ -13,6 +13,7 @@ export default class Page extends Component {
         isActive: PropTypes.bool.isRequired,
         isDisabled: PropTypes.bool,
         activeClass: PropTypes.string,
+		activeLinkClass: PropTypes.string,
         itemClass: PropTypes.string,
         linkClass: PropTypes.string,
         disabledClass: PropTypes.string
@@ -23,6 +24,7 @@ export default class Page extends Component {
         disabledClass: "disabled",
         itemClass: undefined,
         linkClass: undefined,
+        activeLinkCLass: undefined,
         isActive: false,
         isDisabled: false
     }
@@ -43,6 +45,7 @@ export default class Page extends Component {
           activeClass,
           itemClass,
           linkClass,
+          activeLinkClass,
           disabledClass,
           isActive,
           isDisabled,
@@ -53,7 +56,9 @@ export default class Page extends Component {
           [disabledClass]: isDisabled,
         });
 
-        const linkCss = cx(linkClass);
+        const linkCss = cx(linkClass, {
+            [activeLinkClass]: isActive
+        });
 
         return (
             <li className={css} onClick={::this.handleClick}>

diff --git a/src/components/Pagination.js b/src/components/Pagination.js
@@ -30,6 +30,7 @@ export default class Pagination extends React.Component {
       itemClass: PropTypes.string,
       linkClass: PropTypes.string,
       activeClass: PropTypes.string,
+      activeLinkClass: PropTypes.string,
       disabledClass: PropTypes.string,
       hideDisabled: PropTypes.bool,
       hideNavigation: PropTypes.bool
@@ -46,6 +47,7 @@ export default class Pagination extends React.Component {
       innerClass: "pagination",
       itemClass: undefined,
       linkClass: undefined,
+      activeLinkClass: undefined
     }
 
     buildPages() {
@@ -63,6 +65,7 @@ export default class Pagination extends React.Component {
             activeClass,
             itemClass,
             linkClass,
+            activeLinkClass,
             disabledClass,
             hideDisabled,
             hideNavigation
@@ -83,6 +86,7 @@ export default class Pagination extends React.Component {
                         itemClass={itemClass}
                         linkClass={linkClass}
                         activeClass={activeClass}
+                        activeLinkClass={activeLinkClass}
                     />
                 );
             }

diff --git a/src/example/App.js b/src/example/App.js
@@ -229,6 +229,27 @@ export default class App extends Component {
           </div>
         </div>
 
+        <div className="panel panel-default">
+          <div className="panel-heading">
+            <a href='#nav-arrows'>
+              <h4 id='nav-arrows'>Hide navigation arrows</h4>
+            </a>
+          </div>
+          <div className="panel-body">
+            <SyntaxHighlighter language='javascript' style={sunburst}>{hideNavigation}</SyntaxHighlighter>
+            <div className='text-center'>
+              <Pagination
+                  activeLinkClass={"is-selected"}
+                  pageRangeDisplayed={10}
+                  activePage={this.state.activePage}
+                  itemsCountPerPage={PER_PAGE}
+                  totalItemsCount={TOTAL_COUNT}
+                  onChange={this.handlePageChange}
+              />
+            </div>
+          </div>
+        </div>
+
       </div>
     );
   }