fix(pagination): 修改分页组件

jd-opensource · Sep 7, 2018 · a89a713 · a89a713
1 parent 2c38667
commit a89a713
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 7 deletions.
diff --git a/src/components/pagination/__snapshots__/index.test.js.snap b/src/components/pagination/__snapshots__/index.test.js.snap
@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AtPagination Snap render AtPagination -- props current 1`] = `"<div class=\\"at-pagination\\"><div class=\\"at-pagination__operate\\"><div class=\\"at-pagination__btns\\"><div class=\\"at-pagination__btns-prev\\">undefined<div class=\\"at-button at-button--small at-button--disabled\\">undefined<div class=\\"at-button__text\\">上一页</div></div></div><div class=\\"at-pagination__btns-next\\">undefined<div class=\\"at-button at-button--small at-button--disabled\\">undefined<div class=\\"at-button__text\\">下一页</div></div></div></div></div><div class=\\"at-pagination__number\\"><span class=\\"taro-text at-pagination__number-current\\">1</span>/0</div></div>"`;
+exports[`AtPagination Snap render AtPagination -- props current 1`] = `"<div class=\\"at-pagination\\"><div class=\\"at-pagination__operate\\"><div class=\\"at-pagination__btns\\"><div class=\\"at-pagination__btns-prev\\">undefined<div class=\\"at-button at-button--small at-button--disabled\\">undefined<div class=\\"at-button__text\\">上一页</div></div></div><div class=\\"at-pagination__btns-next\\">undefined<div class=\\"at-button at-button--small at-button--disabled\\">undefined<div class=\\"at-button__text\\">下一页</div></div></div></div></div><div class=\\"at-pagination__number\\"><span class=\\"taro-text at-pagination__number-current\\">1</span>/1</div></div>"`;
 
-exports[`AtPagination Snap render AtPagination -- props icon 1`] = `"<div class=\\"at-pagination at-pagination--icon\\"><div class=\\"at-pagination__operate\\"><div class=\\"at-pagination__btns\\"><div class=\\"at-pagination__btns-prev\\"><div class=\\"at-button at-button--small at-button--disabled\\">undefined<div class=\\"at-button__text\\"><span style=\\"font-size:20px;color:#000;\\" class=\\"taro-text at-icon at-icon-chevron-left\\"></span></div></div>undefined</div><div class=\\"at-pagination__btns-next\\"><div class=\\"at-button at-button--small at-button--disabled\\">undefined<div class=\\"at-button__text\\"><span style=\\"font-size:20px;color:#000;\\" class=\\"taro-text at-icon at-icon-chevron-right\\"></span></div></div>undefined</div></div></div><div class=\\"at-pagination__number\\"><span class=\\"taro-text at-pagination__number-current\\">1</span>/0</div></div>"`;
+exports[`AtPagination Snap render AtPagination -- props icon 1`] = `"<div class=\\"at-pagination at-pagination--icon\\"><div class=\\"at-pagination__operate\\"><div class=\\"at-pagination__btns\\"><div class=\\"at-pagination__btns-prev\\"><div class=\\"at-button at-button--small at-button--disabled\\">undefined<div class=\\"at-button__text\\"><span style=\\"font-size:20px;color:#000;\\" class=\\"taro-text at-icon at-icon-chevron-left\\"></span></div></div>undefined</div><div class=\\"at-pagination__btns-next\\"><div class=\\"at-button at-button--small at-button--disabled\\">undefined<div class=\\"at-button__text\\"><span style=\\"font-size:20px;color:#000;\\" class=\\"taro-text at-icon at-icon-chevron-right\\"></span></div></div>undefined</div></div></div><div class=\\"at-pagination__number\\"><span class=\\"taro-text at-pagination__number-current\\">1</span>/1</div></div>"`;
 
-exports[`AtPagination Snap render AtPagination -- props pageSize 1`] = `"<div class=\\"at-pagination\\"><div class=\\"at-pagination__operate\\"><div class=\\"at-pagination__btns\\"><div class=\\"at-pagination__btns-prev\\">undefined<div class=\\"at-button at-button--small at-button--disabled\\">undefined<div class=\\"at-button__text\\">上一页</div></div></div><div class=\\"at-pagination__btns-next\\">undefined<div class=\\"at-button at-button--small at-button--disabled\\">undefined<div class=\\"at-button__text\\">下一页</div></div></div></div></div><div class=\\"at-pagination__number\\"><span class=\\"taro-text at-pagination__number-current\\">1</span>/0</div></div>"`;
+exports[`AtPagination Snap render AtPagination -- props pageSize 1`] = `"<div class=\\"at-pagination\\"><div class=\\"at-pagination__operate\\"><div class=\\"at-pagination__btns\\"><div class=\\"at-pagination__btns-prev\\">undefined<div class=\\"at-button at-button--small at-button--disabled\\">undefined<div class=\\"at-button__text\\">上一页</div></div></div><div class=\\"at-pagination__btns-next\\">undefined<div class=\\"at-button at-button--small at-button--disabled\\">undefined<div class=\\"at-button__text\\">下一页</div></div></div></div></div><div class=\\"at-pagination__number\\"><span class=\\"taro-text at-pagination__number-current\\">1</span>/1</div></div>"`;
 
 exports[`AtPagination Snap render AtPagination -- props total 1`] = `"<div class=\\"at-pagination\\"><div class=\\"at-pagination__operate\\"><div class=\\"at-pagination__btns\\"><div class=\\"at-pagination__btns-prev\\">undefined<div class=\\"at-button at-button--small at-button--disabled\\">undefined<div class=\\"at-button__text\\">上一页</div></div></div><div class=\\"at-pagination__btns-next\\">undefined<div class=\\"at-button at-button--small\\">undefined<div class=\\"at-button__text\\">下一页</div></div></div></div></div><div class=\\"at-pagination__number\\"><span class=\\"taro-text at-pagination__number-current\\">1</span>/5</div></div>"`;
diff --git a/src/components/pagination/index.js b/src/components/pagination/index.js
@@ -7,13 +7,19 @@ import AtIcon from '../icon/index'
 import AtComponent from '../../common/component'
 import './index.scss'
 
+const MIN_MAXPAGE = 1
+const getMaxPage = (maxPage = 0) => {
+  if (maxPage <= 0) return MIN_MAXPAGE
+  return maxPage
+}
+
 export default class AtPagination extends AtComponent {
   constructor () {
     super(...arguments)
     const { current, pageSize, total } = this.props
     this.state = {
       current,
-      maxPage: Math.ceil(total / pageSize),
+      maxPage: getMaxPage(Math.ceil(total / pageSize)),
     }
   }
 
@@ -40,7 +46,7 @@ export default class AtPagination extends AtComponent {
 
   componentWillReceiveProps (props) {
     const { total, pageSize, current } = props
-    const maxPage = Math.ceil(total / pageSize)
+    const maxPage = getMaxPage(Math.ceil(total / pageSize))
     if (maxPage !== this.state.maxPage) {
       this.setState({ maxPage })
     }
@@ -58,8 +64,8 @@ export default class AtPagination extends AtComponent {
     const rootClassName = ['at-pagination']
     if (icon) rootClassName.push('at-pagination--icon')
 
-    const prevDisabled = maxPage === 0 || current === 1
-    const nextDisabled = maxPage === 0 || current === maxPage
+    const prevDisabled = maxPage === MIN_MAXPAGE || current === 1
+    const nextDisabled = maxPage === MIN_MAXPAGE || current === maxPage
     return (
       <View className={rootClassName}>
         <View className='at-pagination__operate'>