kara-rc-web/src/components/pagination/pagination.js

kara项目react组件库

/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
import React from 'react'
import { string, func, number } from 'prop-types'
import classnames from 'classnames'

import Icon from '../icon/icon'

function pagearr(size, num) {
  if (size <= 10) {
    return Array.from({ length: size }).map((x, i) => i + 1)
  } else if (num <= 5 && size > 10) {
    return Array.from({ length: 10 }).map((x, i) => i + 1)
  } else if (num + 5 > size && size > 10) {
    return Array.from({ length: 10 }).map((x, i) => ((i + size) - 9))
  }
  return Array.from({ length: 10 }).map((x, i) => ((i + num) - 5))
}

// 分页
class Pagination extends React.Component {
  static propTypes = {
    prefixCls: string,
    className: string,
    current: number, // 当前页数
    total: number, // 数据总数
    pageSize: number, // 默认的每页条数
    onChange: func, // 页码改变的回调函数
  }

  static defaultProps = {
    prefixCls: 'kara-pagination',
    className: '',
    current: 1,
    total: 0,
    pageSize: 10,
    onChange: () => {},
  }

  state = {
    current: this.props.current,
    jumpPage: '', // 跳转页面
  }

  componentWillReceiveProps(newProps){
    if(newProps && newProps.current !== this.props.current) {
      this.setState({current: newProps.current})
    }
  }

  handleClick = (i) => {
    const totalPageNumber = Math.ceil(this.props.total / this.props.pageSize) // 总页数
    if (i < 1) {
      this.setState({ current: 1 })
      this.props.onChange(1)
    } else if (i > totalPageNumber) {
      this.setState({ current: totalPageNumber })
      this.props.onChange(totalPageNumber)
    } else if (i >= 1 && i <= totalPageNumber) {
      this.setState({ current: i })
      this.props.onChange(i)
    }
  }

  jumpPageChange = (e) => {
    // 保证跳转页面是 1到总页之间到数
    const { total, pageSize } = this.props
    const totalPageNumber = Math.ceil(total / pageSize) // 总页数
    let jumpPage = e.target.value.replace(/[^0-9]/g,'') // 去掉非数
    if(jumpPage.substr(0,1) === '0') {
      jumpPage = jumpPage.substr(1) // 去掉最前面到的0
    }
    if(parseInt(jumpPage,10) > totalPageNumber) {
      jumpPage = totalPageNumber // 不能大于 总页数
    }
    this.setState({jumpPage})
  }

  // 列表页，一般来说显示10页。切换至前5页时，页码排序不变，后5页时页码排序也不发生变动
  render() {
    const { prefixCls, className, total, pageSize } = this.props
    const { current, jumpPage } = this.state
    const classNames = classnames(prefixCls, className)
    const totalPageNumber = Math.ceil(total / pageSize) // 总页数
    return (<div className={classNames}>
      <ul>
        <li
          onClick={() => {
            if (current !== 1) {
              this.handleClick(current - 1)
            }
          }}
          className={`${current === 1 ? `${prefixCls}-invalid` : `${prefixCls}-valid`}`}
        >
          <Icon type="left" size="xs" />
          上一页
        </li>
        {pagearr(totalPageNumber, current).map(x => (<li
          key={x}
          onClick={() => {
            if (x !== current) {
              this.handleClick(x)
            }
          }}
          className={`${x === current ? `${prefixCls}-current` : `${prefixCls}-other`}`}
        >
          {x}
        </li>))}
        {totalPageNumber > 9 ? '···' : ''}
        <li
          onClick={() => {
            if (current !== totalPageNumber) {
              this.handleClick(current + 1)
            }
          }}
          className={`${current === totalPageNumber ? `${prefixCls}-invalid` : `${prefixCls}-valid`}`}
        >
          下一页
          <Icon type="right" size="xs" />
        </li>
      </ul>
      <div className={`${prefixCls}-jump`}>
        共{totalPageNumber}页, 到第
        <input
          type="text"
          ref={(e) => { this.input = e }}
          value={jumpPage}
          onChange={(e)=>{this.jumpPageChange(e)}}
          onKeyUp={(e) => {
            if (e.keyCode === 13) {
              if (this.input && Number.isInteger(Number(this.input.value))) {
                this.handleClick(Number(this.input.value))
              }
            }
          }}
        />
        页
        <button
          onClick={() => {
            if (this.input && Number.isInteger(Number(this.input.value))) {
              this.handleClick(Number(this.input.value))
            }
          }}
        >
        确定
        </button>
      </div>
    </div>)
  }
}

export default Pagination