Skip to content
This repository has been archived by the owner on Oct 20, 2021. It is now read-only.

Commit

Permalink
feat(Pager): add Pager component (#46)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Kimi-Gao
Kimi-Gao committed Apr 10, 2019
1 parent 453d07d commit 74216ec
Show file tree
Hide file tree
Showing 4 changed files with 380 additions and 1 deletion.
2 changes: 1 addition & 1 deletion site/router.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const asyncComponent = path =>
: import(`./apps/${path}` /* webpackChunkName: 'chunk-[request][index]' */)
})

const WIP = ['ToolBar', 'FooterBar', 'SideBar', 'Menu', 'Table', 'Pager']
const WIP = ['ToolBar', 'FooterBar', 'SideBar', 'Menu', 'Table']

const getComponentDoc = component => {
if (WIP.includes(component)) {
Expand Down
24 changes: 24 additions & 0 deletions src/components/Pager/docs/Pager.dox
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/**
* @title 基本用法
* @desc As you can see, the Pager has no default outline and this will make it easier to embed into other components.
*/
import Pager from 'earth-ui/lib/Pager'

class PagerBasic extends Component {
onSelect = page => {
console.log(page)
}
render () {
return (
<Pager
currentPage={1}
totalItems={200}
itemsPerPage={10}
maxSerialPages={4}
onSelect={this.onSelect}
/>
)
}
}

@component Pager
261 changes: 261 additions & 0 deletions src/components/Pager/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,261 @@
import React from 'react'
import PropTypes from 'prop-types'
import { Row } from '../Layout'
import './index.less'

class Pager extends React.Component {
constructor (props) {
super()
this.state = {
currentIndex: props.currentPage,
showPage: props.maxSerialPages || 4,
goPageNum: ''
}
}

componentWillReceiveProps (nextProps) {
if (this.props.currentPage !== nextProps.currentPage) {
this.setState({
currentIndex: nextProps.currentPage
})
}
}

render () {
const pageNum = Math.ceil(this.props.totalItems / this.props.itemsPerPage)
const currentIndex = this.state.currentIndex
return (
<Row>
<div className={`${prefixCls}-pager__layout-middle`}>
<ul className={`${prefixCls}-pager__pagination`}>
<li>
<a
onClick={this.handlePrevClick}
className={
`${prefixCls}-pager__pagination-li--prev ` +
(currentIndex === 1
? `${prefixCls}-pager__pagination-li--first`
: '')
}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
lineheight="20"
viewBox="0 0 24 24"
>
<path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z" />
</svg>
</a>
</li>
{this.getPages(currentIndex, pageNum)}
<li>
<a
onClick={this.handleNextClick}
className={
`${prefixCls}-pager__pagination-li--next ` +
(currentIndex === pageNum
? `${prefixCls}-pager__pagination-li--end`
: '')
}
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="20"
height="20"
lineheight="20"
viewBox="0 0 24 24"
>
<path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z" />
</svg>
</a>
</li>
</ul>
{/* {!this.props.hideGo ? ( */}
{/* <div className={`${prefixCls}-pager-paging__go`}> */}
{/* <Input onChange={this.checkNumber} value={this.state.goPageNum} className={`${prefixCls}-pager__go-number`} /> */}
{/* <Button onClick={this.handleGoPage}>GO</Button> */}
{/* </div> */}
{/* ) : ''} */}
</div>
</Row>
)
}

getPages (currentPage, maxPage) {
const pages = []
const showPage = this.state.showPage

if (maxPage <= showPage + 2) {
for (let i = 1; i <= maxPage; i++) {
const html = this.createPageEl(i)
pages.push(html)
}
} else {
if (currentPage < showPage) {
for (let i = 1; i <= showPage + 2 && i <= maxPage; i++) {
const html = this.createPageEl(i)
if (i < maxPage - 1 && i === showPage + 1) {
const dotsHtml = (
<li key={'d' + i}>
<span>...</span>
</li>
)
pages.push(dotsHtml)
} else {
if (i === showPage + 2) {
pages.push(this.createPageEl(maxPage, +new Date()))
} else {
pages.push(html)
}
}
}
} else if (
currentPage >= showPage &&
currentPage + showPage <= maxPage + 1
) {
pages[0] = this.createPageEl(1)
if (currentPage === 3) {
pages[1] = this.createPageEl(2)
} else {
pages[1] = (
<li key={'d1'}>
<span>...</span>
</li>
)
}
let i = currentPage + 1 - parseInt(showPage / 2)
for (; i < currentPage + parseInt(showPage / 2); i++) {
const html = this.createPageEl(i)
pages.push(html)
}
pages.push(
<li key={'d' + i}>
<span>...</span>
</li>
)
pages.push(this.createPageEl(maxPage))
} else {
pages[0] = this.createPageEl(1)
pages[1] = (
<li key={'d1'}>
<span>...</span>
</li>
)
let i = currentPage
if (maxPage - currentPage < showPage - 1) {
i = currentPage - (showPage - 1 - (maxPage - currentPage))
}
for (; i <= maxPage; i++) {
const html = this.createPageEl(i)
pages.push(html)
}
}
}
return pages
}

createPageEl = (num, key) => {
key = key || num
const active = `${prefixCls}-pager__pagination-li--active`
const isActive = this.state.currentIndex === num ? active : ''
return (
<li
key={key}
className={isActive}
onClick={this.handleClick.bind(this, num)}
>
<a>{num}</a>
</li>
)
}

handleClick (i) {
this.setState({
currentIndex: i
})
if (this.props.onSelect) {
this.props.onSelect(i)
}
}

// handleGoPage = () => {
// let number = parseInt(this.state.goPageNum) || this.state.currentIndex
// const pageNum = Math.ceil(this.props.totalItems / this.props.itemsPerPage)
//
// if (number <= 0) {
// number = 1
// } else if (number > pageNum) {
// number = pageNum
// }
//
// this.setState({
// currentIndex: number
// })
//
// number !== this.state.currentIndex && this.props.onSelect && this.props.onSelect(number)
// }

// checkNumber = (e) => {
// const value = e.target.value
// const numberReg = /^\+?[1-9][0-9]*$/
// if (!numberReg.test(value)) {
// this.setState({
// goPageNum: ''
// })
// } else {
// this.setState({
// goPageNum: value
// })
// }
// }

handlePrevClick = () => {
if (this.state.currentIndex > 1) {
this.setState({
currentIndex: this.state.currentIndex - 1
})
if (this.props.onSelect) {
this.props.onSelect(parseInt(this.state.currentIndex - 1))
}
}
}

handleNextClick = () => {
const pageNum = Math.ceil(this.props.totalItems / this.props.itemsPerPage)
if (this.state.currentIndex < pageNum) {
this.setState({
currentIndex: this.state.currentIndex + 1
})
if (this.props.onSelect) {
this.props.onSelect(parseInt(this.state.currentIndex + 1))
}
}
}
}

Pager.defaultProps = {
currentPage: 1,
itemsPerPage: 20
// hideGo: true
}

Pager.propTypes = {
// 总条目数
totalItems: PropTypes.number.isRequired,

// 每页显示条数，默认每页 `20` 条
itemsPerPage: PropTypes.number,

// 当前页码，从 `1` 开始，默认第 `1` 页
currentPage: PropTypes.number,

// 连续页码显示的最大个数，默认为 `4` 个
maxSerialPages: PropTypes.number,

// 页码选中事件， 参数返回被选中的页码
onSelect: PropTypes.func
}

export default Pager
94 changes: 94 additions & 0 deletions src/components/Pager/index.less
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
@import '~ui-variables';

.@{prefix-cls}-pager {
&__layout-middle {
padding-right: @ui-unit-quarter * 3;
text-align: center;
}
&__go {
display: inline-block;
vertical-align: middle
}
&__go-number {
width: @ui-unit-double;
margin-right: @ui-unit-half;
}
&__pagination {
display: inline-block;
vertical-align: middle;
margin: 0 @ui-unit-half 0 0;
li {
user-select: none;
cursor: pointer;
display: inline;
span {
position: relative;
float: left;
color: @theme;
padding: 0;
width: @ui-unit-double;
text-align: center;
line-height: @ui-unit-plus;
height: @ui-unit-plus;
cursor: default;
color: @theme;
}
a {
width: @ui-unit-double;
height: @ui-unit-plus;
text-align: center;
padding: 0;
position: relative;
float: left;
line-height: @ui-unit-plus;
vertical-align: middle;
font-weight: @ui-fontweight-semibold;
color: @theme;
}
a:hover{
color: @theme-dark;
text-decoration: none;
}
}
&-li--prev {
height: @ui-unit-plus;
svg {
position: relative;
top: @ui-unit-quarter;
fill: @theme;
}
}
&-li--next {
height: @ui-unit-plus;
svg {
position: relative;
top: @ui-unit-quarter;
fill: @theme;
}
}
&-li--first {
&:hover{
cursor: default;
}
svg {
fill: @ui-color-gray;
}
}
&-li--end {
&:hover {
cursor: default;
}
svg {
fill: @ui-color-gray;
}
}
li&-li--active a{
color: @ui-color-black;
font-weight: @ui-fontweight-bold;
cursor: default;
}
li&-li--active a:hover{
color: @ui-color-black;
}
}
}

0 comments on commit 74216ec

Please sign in to comment.