pagination 增加 mini 选项

Author: Lobos

.gitignore

@@ -11,3 +11,4 @@ publish
 *.sh
 *.log
 /components
+/coverage

docs/src/js/pages/pagination.jsx

@@ -13,6 +13,7 @@ export default class Page extends React.Component {
     size: 20,
     total: 1000,
     pages: 10,
+    mini: false,
     jumper: false
   }
 
@@ -36,6 +37,7 @@ export default class Page extends React.Component {
   pages={int}         // 显示的页码数， 默认为 10
   total={int}         // 总条目数，默认为 0
   jumper={bool}       // 是否可以输入页码，默认为 false
+  mini={bool}         // 是否简化版本
   onChange={function} // 页码点击时触发事件，参数为页码
 />`}
           </pre>
@@ -46,13 +48,15 @@ export default class Page extends React.Component {
             size={this.state.size}
             total={this.state.total}
             pages={this.state.pages}
+            mini={this.state.mini}
             onChange={this.onChange.bind(this)}
             jumper={this.state.jumper} />
 
           <p>index: <Input value={this.state.index} onChange={v => this.setState({index: parseInt(v)})} /></p>
           <p>size: <Input value={this.state.size} onChange={v => this.setState({size: parseInt(v)})} /></p>
           <p>total: <Input value={this.state.total} onChange={v => this.setState({total: parseInt(v)})} /></p>
           <p>pages: <Input value={this.state.pages} onChange={v => this.setState({pages: parseInt(v)})} /></p>
+          <p><Checkbox text="mini" onChange={mini => this.setState({mini})} value={this.state.mini} /></p>
           <p><Checkbox text="jumper" onChange={jumper => this.setState({jumper})} value={this.state.jumper} /></p>
         </div>
       </div>

package.json

@@ -1,7 +1,7 @@
 {
   "name": "rctui",
   "author": "[email protected]",
-  "version": "0.5.0",
+  "version": "0.5.1",
   "description": "a collection of components for React",
   "main": "./src/index.js",
   "scripts": {

src/Pagination.js

@@ -1,24 +1,25 @@
 'use strict'
 
-import React from 'react'
+import { Component, PropTypes } from 'react'
 import classnames from 'classnames'
 import { forEach } from './utils/objects'
 
 import { requireCss } from './themes'
 requireCss('pagination')
 
-export default class Pagination extends React.Component {
+export default class Pagination extends Component {
   static displayName = 'Pagination'
 
   static propTypes = {
-    className: React.PropTypes.string,
-    index: React.PropTypes.number,
-    jumper: React.PropTypes.bool,
-    onChange: React.PropTypes.func,
-    pages: React.PropTypes.number,
-    size: React.PropTypes.number,
-    style: React.PropTypes.object,
-    total: React.PropTypes.number
+    className: PropTypes.string,
+    index: PropTypes.number,
+    jumper: PropTypes.bool,
+    mini: PropTypes.bool,
+    onChange: PropTypes.func,
+    pages: PropTypes.number,
+    size: PropTypes.number,
+    style: PropTypes.object,
+    total: PropTypes.number
   }
 
   static defaultProps = {
@@ -52,7 +53,11 @@ export default class Pagination extends React.Component {
 
     let value = this.refs.input.value
     value = parseInt(value)
-    if (!value) {
+    if (isNaN(value)) {
+      return
+    }
+    if (value < 1) {
+      this.handleChange(1)
       return
     }
 
@@ -64,6 +69,9 @@ export default class Pagination extends React.Component {
 
   handleChange (index) {
     this.setIndex(index)
+    if (this.refs.input) {
+      this.refs.input.value = index
+    }
     if (this.props.onChange) {
       this.props.onChange(index)
     }
@@ -115,6 +123,7 @@ export default class Pagination extends React.Component {
 
   render () {
     let index = this.state.index,
+        {mini} = this.props,
         {pages, max} = this.getPages(),
         items = []
 
@@ -125,13 +134,22 @@ export default class Pagination extends React.Component {
       </li>
     )
 
-    forEach(pages, function (i) {
+    if (mini) {
       items.push(
-        <li onClick={this.handleChange.bind(this, i)} className={classnames({ active: i === index })} key={i}>
-          <a>{i}</a>
-        </li>
+        <form key="i" onSubmit={this.setInput.bind(this)}>
+          <input ref="input" defaultValue={this.state.index} type="text" className="rct-form-control" />
+        </form>
       )
-    }, this)
+      items.push(<span key="s"> / {max}</span>)
+    } else {
+      forEach(pages, function (i) {
+        items.push(
+          <li onClick={this.handleChange.bind(this, i)} className={classnames({ active: i === index })} key={i}>
+            <a>{i}</a>
+          </li>
+        )
+      }, this)
+    }
 
     // Next
     items.push(
@@ -142,18 +160,19 @@ export default class Pagination extends React.Component {
 
     let className = classnames(
       this.props.className,
-      "rct-pagination-wrap"
+      "rct-pagination-wrap",
+      { "rct-pagination-mini": mini }
     )
     return (
       <div style={this.props.style} className={className}>
         <ul className="rct-pagination">
           {items}
         </ul>
         {
-          this.props.jumper &&
+          this.props.jumper && !mini &&
           <form onSubmit={this.setInput.bind(this)}>
             <div className="rct-input-group">
-              <input ref="input" type="text" className="rct-form-control" />
+              <input ref="input" defaultValue={this.state.index} type="text" className="rct-form-control" />
               <span onClick={this.setInput.bind(this)} className="addon">go</span>
             </div>
           </form>

src/themes/pure/pagination.less

@@ -62,4 +62,15 @@
       border-right-width: 1px;
     }
   }
+
+  &.rct-pagination-mini {
+    li:first-child a {
+      border-radius: 4px;
+    }
+
+    li:last-child a {
+      margin-left: 10px;
+      border-radius: 4px;
+    }
+  }
 }