Merge pull request #65 from hyb628/master

add showTitle and zh_TW locale
react-component · Mar 23, 2017 · 1f89048 · 1f89048
2 parents 932256b + ea58863
commit 1f89048
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -73,6 +73,7 @@ React.render(<Pagination />, container);
 | locale           | to set l10n config                 | Object        | [zh_CN](https://github.com/react-component/pagination/blob/master/src/locale/zh_CN.js) |
 | style            | the style of pagination            | Object        | {}                       |
 | showLessItems    | show less page items               | Bool          | false                    |
+| showTitle        | show page items title              | Bool          | true                     |
 
 ## License
 

diff --git a/examples/showTitle.html b/examples/showTitle.html
@@ -0,0 +1 @@
+placeholder
diff --git a/examples/showTitle.js b/examples/showTitle.js
@@ -0,0 +1,35 @@
+/* eslint func-names: 0, no-console: 0 */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import Pagination from 'rc-pagination';
+import 'rc-pagination/assets/index.less';
+
+const App = React.createClass({
+  getInitialState() {
+    return {
+      current: 3,
+    };
+  },
+  onChange(page) {
+    console.log(page);
+    this.setState({
+      current: page,
+    });
+  },
+  render() {
+    return (
+      <div>
+        <Pagination
+          onChange={this.onChange}
+          current={this.state.current}
+          total={80}
+          showLessItems
+          showTitle={false}
+        />
+        <Pagination showLessItems defaultCurrent={1} total={60} showTitle={false} />
+      </div>
+    );
+  },
+});
+
+ReactDOM.render(<App />, document.getElementById('__react-content'));
diff --git a/src/Pager.jsx b/src/Pager.jsx
@@ -15,7 +15,7 @@ class Pager extends React.Component {
     }
 
     return (
-      <li title={props.page} className={cls} onClick={props.onClick}>
+      <li title={props.showTitle ? props.page : null} className={cls} onClick={props.onClick}>
         <a>{props.page}</a>
       </li>
     );
@@ -28,6 +28,7 @@ Pager.propTypes = {
   last: React.PropTypes.bool,
   locale: React.PropTypes.object,
   className: React.PropTypes.string,
+  showTitle: React.PropTypes.bool,
 };
 
 module.exports = Pager;
diff --git a/src/Pagination.jsx b/src/Pagination.jsx
@@ -208,13 +208,16 @@ class Pagination extends React.Component {
       return (
         <ul className={`${prefixCls} ${prefixCls}-simple ${props.className}`}>
           <li
-            title={locale.prev_page}
+            title={props.showTitle ? locale.prev_page : null}
             onClick={this._prev}
             className={`${this._hasPrev() ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
           >
             <a />
           </li>
-          <li title={`${this.state.current}/${allPages}`} className={`${prefixCls}-simple-pager`}>
+          <li
+            title={props.showTitle ? `${this.state.current}/${allPages}` : null}
+            className={`${prefixCls}-simple-pager`}
+          >
             <input
               type="text"
               value={this.state._current}
@@ -226,7 +229,7 @@ class Pagination extends React.Component {
             {allPages}
           </li>
           <li
-            title={locale.next_page}
+            title={props.showTitle ? locale.next_page : null}
             onClick={this._next}
             className={`${this._hasNext() ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
           >
@@ -247,13 +250,15 @@ class Pagination extends React.Component {
             key={i}
             page={i}
             active={active}
+            showTitle={props.showTitle}
           />
         );
       }
     } else {
+      const showLessItems = props.showLessItems ? locale.prev_3 : locale.prev_5;
       jumpPrev = (
         <li
-          title={props.showLessItems ? locale.prev_3 : locale.prev_5}
+          title={props.showTitle ? showLessItems : null}
           key="prev"
           onClick={this._jumpPrev}
           className={`${prefixCls}-jump-prev`}
@@ -263,7 +268,7 @@ class Pagination extends React.Component {
       );
       jumpNext = (
         <li
-          title={props.showLessItems ? locale.next_3 : locale.next_5}
+          title={props.showTitle ? showLessItems : null}
           key="next"
           onClick={this._jumpNext}
           className={`${prefixCls}-jump-next`}
@@ -280,6 +285,7 @@ class Pagination extends React.Component {
           key={allPages}
           page={allPages}
           active={false}
+          showTitle={props.showTitle}
         />
       );
       firstPager = (
@@ -290,6 +296,7 @@ class Pagination extends React.Component {
           key={1}
           page={1}
           active={false}
+          showTitle={props.showTitle}
         />
       );
 
@@ -314,6 +321,7 @@ class Pagination extends React.Component {
             key={i}
             page={i}
             active={active}
+            showTitle={props.showTitle}
           />
         );
       }
@@ -363,15 +371,15 @@ class Pagination extends React.Component {
       >
         {totalText}
         <li
-          title={locale.prev_page}
+          title={props.showTitle ? locale.prev_page : null}
           onClick={this._prev}
           className={`${this._hasPrev() ? '' : `${prefixCls}-disabled`} ${prefixCls}-prev`}
         >
           <a />
         </li>
         {pagerList}
         <li
-          title={locale.next_page}
+          title={props.showTitle ? locale.next_page : null}
           onClick={this._next}
           className={`${this._hasNext() ? '' : `${prefixCls}-disabled`} ${prefixCls}-next`}
         >
@@ -406,6 +414,7 @@ Pagination.propTypes = {
   onShowSizeChange: React.PropTypes.func,
   selectComponentClass: React.PropTypes.func,
   showQuickJumper: React.PropTypes.bool,
+  showTitle: React.PropTypes.bool,
   pageSizeOptions: React.PropTypes.arrayOf(React.PropTypes.string),
   showTotal: React.PropTypes.func,
   locale: React.PropTypes.object,
@@ -424,6 +433,7 @@ Pagination.defaultProps = {
   showQuickJumper: false,
   showSizeChanger: false,
   showLessItems: false,
+  showTitle: true,
   onShowSizeChange: noop,
   locale: LOCALE,
   style: {},

diff --git a/src/locale/zh_TW.js b/src/locale/zh_TW.js
@@ -0,0 +1,14 @@
+export default {
+  // Options.jsx
+  items_per_page: '條/頁',
+  jump_to: '跳至',
+  page: '頁',
+
+  // Pagination.jsx
+  prev_page: '上一頁',
+  next_page: '下一頁',
+  prev_5: '向前 5 頁',
+  next_5: '向後 5 頁',
+  prev_3: '向前 3 頁',
+  next_3: '向後 3 頁',
+};