From 3be7fb0bffa0b439fae3241723829ea826484eea Mon Sep 17 00:00:00 2001
From: yiminghe <yiminghe@gmail.com>
Date: Mon, 13 Jul 2015 21:09:05 +0800
Subject: [PATCH] adjust code style

---
 assets/index.less  | 96 ++++++++++++++++++++++++----------------------
 src/Options.jsx    | 11 +++---
 src/Pager.jsx      |  4 +-
 src/Pagination.jsx | 82 +++++++++++++++++++++++++--------------
 4 files changed, 112 insertions(+), 81 deletions(-)

diff --git a/assets/index.less b/assets/index.less
index 6b55c5be..bbe11386 100644
--- a/assets/index.less
+++ b/assets/index.less
@@ -4,6 +4,7 @@
 .@{prefixClass} {
   font-size: 12px;
   font-family: 'Arial';
+  user-select: none;
 
   &:after {
     content: " ";
@@ -14,7 +15,7 @@
     visibility: hidden;
   }
 
-  .@{prefixClass}-item {
+  &-item {
     cursor: pointer;
     border-radius: 6px;
     min-width: 28px;
@@ -40,17 +41,23 @@
       }
     }
 
-    &.active {
+    &-active {
       background-color: #2db7f5;
       border: none;
 
       a {
         color: #fff;
       }
+
+      &:hover {
+        a {
+          color: #fff;
+        }
+      }
     }
   }
 
-  .jump-prev, .jump-next {
+  &-jump-prev, &-jump-next {
     &:after {
       content: "•••";
       display: block;
@@ -68,7 +75,7 @@
 
   }
 
-  .jump-prev {
+  &-jump-prev {
     &:hover {
       &:after {
         content: "«";
@@ -76,7 +83,7 @@
     }
   }
 
-  .jump-next {
+  &-jump-next {
     &:hover {
       &:after {
         content: "»";
@@ -84,10 +91,10 @@
     }
   }
 
-  .prev, .jump-prev, .jump-next {
+  &-prev, &-jump-prev, &-jump-next {
     margin-right: 8px;
   }
-  .prev, .next, .jump-prev, .jump-next {
+  &-prev, &-next, &-jump-prev, &-jump-next {
     cursor: pointer;
     color: #666;
     font-size: 10px;
@@ -100,30 +107,30 @@
     text-align: center;
   }
 
-  .prev, .next {
+  &-prev, &-next {
     border: 1px solid #d9d9d9;
 
     a {
       color: #666;
     }
+  }
 
-    &.disabled {
-      cursor: not-allowed;
-      a {
-        color: #ccc;
-      }
+  &-disabled {
+    cursor: not-allowed;
+    a {
+      color: #ccc;
     }
   }
 
-  .options {
+  &-options {
     float: left;
     margin-left: 15px;
-    .size-changer {
+    &-size-changer {
       float: left;
       width: 70px;
     }
 
-    .quick-jumper {
+    &-quick-jumper {
       float: left;
       margin-left: 16px;
       height: 28px;
@@ -146,42 +153,41 @@
       }
     }
   }
-}
 
+  &-simple {
+    .@{prefixClass}-prev, .@{prefixClass}-next {
+      border: none;
+      height: 24px;
+      line-height: 24px;
+      margin: 0;
+      font-size: 18px;
+    }
 
-.@{prefixClass}.simple {
-  .prev, .next {
-    border: none;
-    height: 24px;
-    line-height: 24px;
-    margin: 0;
-    font-size: 18px;
-  }
-
-  .simple-pager {
-    float: left;
-    margin-right: 8px;
+    .@{prefixClass}-simple-pager {
+      float: left;
+      margin-right: 8px;
 
-    .slash {
-      margin: 0 10px;
-    }
+      .@{prefixClass}-slash {
+        margin: 0 10px;
+      }
 
-    input {
-      margin: 0 8px;
-      box-sizing: border-box;
-      background-color: #fff;
-      border-radius: 6px;
-      border: 1px solid #d9d9d9;
-      outline: none;
-      padding: 5px 8px;
-      width: 30px;
-      min-height: 20px;
+      input {
+        margin: 0 8px;
+        box-sizing: border-box;
+        background-color: #fff;
+        border-radius: 6px;
+        border: 1px solid #d9d9d9;
+        outline: none;
+        padding: 5px 8px;
+        width: 30px;
+        min-height: 20px;
 
 
-      &:hover {
-        border-color: #2db7f5;
+        &:hover {
+          border-color: #2db7f5;
+        }
       }
-    }
 
+    }
   }
 }
diff --git a/src/Options.jsx b/src/Options.jsx
index 8aa76551..c267ec19 100644
--- a/src/Options.jsx
+++ b/src/Options.jsx
@@ -11,6 +11,7 @@ class Options extends React.Component {
   }
   render() {
     let props = this.props;
+    var prefixCls = `${props.rootPrefixCls}-options`;
     let changeSize = props.changeSize;
     let quickGo = props.quickGo;
 
@@ -18,10 +19,10 @@ class Options extends React.Component {
     let goInput = null;
 
     if (changeSize) {
-
-      let changerClass = props.sizeChangerClass;
       changeSelect = (
-       <Select prefixCls={changerClass ? 'ant-select' : 'rc-select' }showSearch={false} className="size-changer" defaultValue="10" onChange={this._changeSize}>
+       <Select prefixCls={props.selectPrefixCls} showSearch={false}
+         className={`${prefixCls}-size-changer`}
+         defaultValue="10" onChange={this._changeSize}>
         <Option value="10">10 条/页</Option>
         <Option value="20">20 条/页</Option>
         <Option value="30">30 条/页</Option>
@@ -32,7 +33,7 @@ class Options extends React.Component {
 
     if (quickGo) {
       goInput = (
-        <div className="quick-jumper">
+        <div className={`${prefixCls}-quick-jumper`}>
           跳至
           <input type="text" value={props.current} onChange={this._quickGo} />
           页
@@ -41,7 +42,7 @@ class Options extends React.Component {
     }
 
     return (
-      <div className="options">
+      <div className={`${prefixCls}-options`}>
         {changeSelect}
         {goInput}
       </div>
diff --git a/src/Pager.jsx b/src/Pager.jsx
index 78f7e85c..414ac25a 100644
--- a/src/Pager.jsx
+++ b/src/Pager.jsx
@@ -3,11 +3,11 @@ let React = require('react');
 class Pager extends React.Component {
   render() {
     let props = this.props;
-    let prefixCls = 'rc-pagination-item';
+    let prefixCls = `${props.rootPrefixCls}-item`;
     let cls = `${prefixCls} ${prefixCls}-${props.page}`;
 
     if (props.active) {
-      cls = `${cls} active`;
+      cls = `${cls} ${prefixCls}-active`;
     }
     return (
       <li className={cls} onClick={props.onClick}>
diff --git a/src/Pagination.jsx b/src/Pagination.jsx
index e2f048f1..0f149bf8 100644
--- a/src/Pagination.jsx
+++ b/src/Pagination.jsx
@@ -5,7 +5,8 @@ let Pager = require('./Pager');
 let Options = require('./Options');
 
 
-function noop() {}
+function noop() {
+}
 
 class Pagination extends React.Component {
   constructor(props) {
@@ -19,16 +20,24 @@ class Pagination extends React.Component {
     ['render', '_handleChange', '_simpleChange', '_changePageSize', '_isValid', '_prev', '_next', '_hasPrev', '_hasNext', '_jumpPrev', '_jumpNext', '_canJumpPrev', '_canJumpNext'].map((method) => this[method] = this[method].bind(this));
   }
 
+  componentWillReceiveProps(nextProps) {
+    if ('current' in nextProps) {
+      this.setState({
+        current: nextProps.current
+      });
+    }
 
-  render() {
-    let prefixCls = 'rc-pagination';
+    if ('pageSize' in nextProps) {
+      this.setState({
+        pageSize: nextProps.pageSize
+      });
+    }
+  }
 
+  render() {
     let props = this.props;
 
-    if (props.className) {
-      prefixCls = `${prefixCls} ${props.className}`;
-    }
-
+    let prefixCls = props.prefixCls;
     let allPages = this._calcPage();
     let pagerList = [];
     let jumpPrev = null;
@@ -36,14 +45,18 @@ class Pagination extends React.Component {
 
     if (props.simple) {
       return (
-        <ul className={prefixCls + ' simple'}>
-          <li onClick={this._prev} className={(this._hasPrev() ? '' : 'disabled ') + 'prev'}><a>&lsaquo;</a></li>
-          <div className="simple-pager">
+        <ul className={`${prefixCls} ${prefixCls}-simple ${props.className}`}>
+          <li onClick={this._prev} className={(this._hasPrev() ? '' : `${prefixCls}-disabled `) + `${prefixCls}-prev`}>
+            <a>&lsaquo;</a>
+          </li>
+          <div className={`${prefixCls}-simple-pager`}>
             <input type="text" value={this.state.current} onChange={this._simpleChange} />
-            <span className="slash">／</span>
+            <span className={`${prefixCls}-slash`}>／</span>
             {allPages}
           </div>
-          <li onClick={this._next} className={(this._hasNext() ? '' : 'disabled ') + 'next'}><a>&rsaquo;</a></li>
+          <li onClick={this._next} className={(this._hasNext() ? '' : `${prefixCls}-disabled `) + `${prefixCls}-next`}>
+            <a>&rsaquo;</a>
+          </li>
         </ul>
       );
     }
@@ -51,11 +64,15 @@ class Pagination extends React.Component {
     if (allPages <= 9) {
       for (let i = 1; i <= allPages; i++) {
         let active = this.state.current === i;
-        pagerList.push(<Pager onClick={this._handleChange.bind(this, i)} key={i} page={i} active={active} />);
+        pagerList.push(<Pager rootPrefixCls={prefixCls} onClick={this._handleChange.bind(this, i)} key={i} page={i} active={active} />);
       }
     } else {
-      jumpPrev = <li key="prev" onClick={this._jumpPrev} className="jump-prev"><a></a></li>;
-      jumpNext = <li key="next" onClick={this._jumpNext} className="jump-next"><a></a></li>;
+      jumpPrev = <li key="prev" onClick={this._jumpPrev} className={`${prefixCls}-jump-prev`}>
+        <a></a>
+      </li>;
+      jumpNext = <li key="next" onClick={this._jumpNext} className={`${prefixCls}-jump-next`}>
+        <a></a>
+      </li>;
 
       let current = this.state.current;
 
@@ -64,38 +81,45 @@ class Pagination extends React.Component {
         // do not show first •••
         for (let i = 1; i <= 5; i++) {
           let active = current === i;
-          pagerList.push(<Pager onClick={this._handleChange.bind(this, i)} key={i} page={i} active={active} />);
+          pagerList.push(<Pager rootPrefixCls={prefixCls} onClick={this._handleChange.bind(this, i)} key={i} page={i} active={active} />);
         }
         pagerList.push(jumpNext);
-        pagerList.push(<Pager onClick={this._handleChange.bind(this, allPages)} key={allPages} page={allPages} active={false} />);
+        pagerList.push(<Pager rootPrefixCls={prefixCls} onClick={this._handleChange.bind(this, allPages)} key={allPages} page={allPages} active={false} />);
       } else if (allPages - current < 5) {
         // do not show last •••
-        pagerList.push(<Pager onClick={this._handleChange.bind(this, 1)} key={1} page={1} active={false} />);
+        pagerList.push(<Pager rootPrefixCls={prefixCls} onClick={this._handleChange.bind(this, 1)} key={1} page={1} active={false} />);
         pagerList.push(jumpPrev);
         for (let i = allPages - 4; i <= allPages; i++) {
           let active = current === i;
-          pagerList.push(<Pager onClick={this._handleChange.bind(this, i)} key={i} page={i} active={active} />);
+          pagerList.push(<Pager rootPrefixCls={prefixCls} onClick={this._handleChange.bind(this, i)} key={i} page={i} active={active} />);
         }
       } else {
         // show both •••
-        pagerList.push(<Pager onClick={this._handleChange.bind(this, 1)} key={1} page={1} active={false} />);
+        pagerList.push(<Pager rootPrefixCls={prefixCls} onClick={this._handleChange.bind(this, 1)} key={1} page={1} active={false} />);
         pagerList.push(jumpPrev);
         for (let i = current - 2; i <= current + 2; i++) {
           let active = current === i;
-          pagerList.push(<Pager onClick={this._handleChange.bind(this, i)} key={i} page={i} active={active} />);
+          pagerList.push(<Pager rootPrefixCls={prefixCls} onClick={this._handleChange.bind(this, i)} key={i} page={i} active={active} />);
         }
         pagerList.push(jumpNext);
-        pagerList.push(<Pager onClick={this._handleChange.bind(this, allPages)} key={allPages} page={allPages} active={false} />);
+        pagerList.push(<Pager rootPrefixCls={prefixCls} onClick={this._handleChange.bind(this, allPages)} key={allPages} page={allPages} active={false} />);
       }
 
     }
 
     return (
-      <ul className={prefixCls}>
-        <li onClick={this._prev} className={(this._hasPrev() ? '' : 'disabled ') + 'prev'}><a>&lsaquo;</a></li>
+      <ul className={`${prefixCls} ${props.className}`}
+        unselectable="unselectable">
+        <li onClick={this._prev} className={(this._hasPrev() ? '' : `${prefixCls}-disabled `) + `${prefixCls}-prev`}>
+          <a>&lsaquo;</a>
+        </li>
         {pagerList}
-        <li onClick={this._next} className={(this._hasNext() ? '' : 'disabled ') + 'next'}><a>&rsaquo;</a></li>
-        <Options sizeChangerClass={props.className} changeSize={this.props.showSizeChanger ? this._changePageSize.bind(this) : null} current={this.state.current} quickGo={this.props.showQuickJumper ? this._handleChange.bind(this) : null} />
+        <li onClick={this._next} className={(this._hasNext() ? '' : `${prefixCls}-disabled `) + `${prefixCls}-next`}>
+          <a>&rsaquo;</a>
+        </li>
+        <Options rootPrefixCls={prefixCls}
+          selectPrefixCls={props.selectPrefixCls}
+          changeSize={this.props.showSizeChanger ? this._changePageSize.bind(this) : null} current={this.state.current} quickGo={this.props.showQuickJumper ? this._handleChange.bind(this) : null} />
       </ul>
     );
   }
@@ -168,7 +192,6 @@ class Pagination extends React.Component {
   _canJumpNext() {
     return this._calcPage() - this.state.current > 5;
   }
-
 }
 
 Pagination.propTypes = {
@@ -176,7 +199,6 @@ Pagination.propTypes = {
   total: React.PropTypes.number,
   pageSize: React.PropTypes.number,
   onChange: React.PropTypes.func,
-
   showSizeChanger: React.PropTypes.bool,
   showQuickJumper: React.PropTypes.bool
 };
@@ -186,7 +208,9 @@ Pagination.defaultProps = {
   total: 0,
   pageSize: 10,
   onChange: noop,
-
+  className: '',
+  selectPrefixCls: 'rc-select',
+  prefixCls: 'rc-pagination',
   showQuickJumper: false,
   showSizeChanger: false
 };