@ttk/component/src/pagination/index.js

ttk组件库

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import { Pagination } from 'antd'
import Button from '../button'
import classNames from 'classnames'
import isequal from 'lodash.isequal'
import Message from '../message'
import zhCN from 'antd/es/locale/zh_CN';

class PaginationComponent extends Component {
	constructor(props) {
		super()
		this.state = {
			isJumper: false
		}
	}

	assitShouldComponent = (target) => {
		let obj = {}
		for (const [key, value] of Object.entries(target)) {
			if (typeof (value) != 'function' && key != 'store') {
				obj[key] = value
			}
		}
		return obj
	}

	shouldComponentUpdate(nextProps, nextState) {
		// console.log((isequal(this.props, nextProps) && isequal(this.state, nextState)))		
		let isJumper = this.state.isJumper
		if (isJumper) {
			return true
		} else {
			return !(isequal(this.assitShouldComponent(this.props), this.assitShouldComponent(nextProps)) && isequal(this.state, nextState))
		}
	}

	handleClick = () => {		
		const props = this.props
		if (!props.total) {
			return
		}
		this.setState({ isJumper: true })
		const thisDom = ReactDOM.findDOMNode(this)
		const jumperContaienr = thisDom.getElementsByClassName('ant-pagination-options-quick-jumper')[0]
		if (!jumperContaienr) return
		const dom = jumperContaienr.getElementsByTagName('input')[0]
		if (!dom) return
		const num = parseInt(dom.value)
		const { total, pageSize } = props
		let size = Math.ceil(total / pageSize)
		if (!isNaN(num) && num > 0 && num <= size) {
			props.onChange && props.onChange(num, null)
		} else {
			Message.warn('输入的页面不存在')
		}
	}

	componentDidMount() {
		this.isCalJumper()
	}

	componentDidUpdate() {
		this.isCalJumper()
	}

	isCalJumper = () => {
		const { showQuickJumper, total, pageSize } = this.props 
		if (showQuickJumper != false && total > pageSize) {
			this.calJumperInputValue()
		}
	}
	

	calJumperInputValue = () => {
		try {

			const props = this.props
			const me = ReactDOM.findDOMNode(this)
			if (!me) {
				setTimeout(() => this.calJumperInputValue(), 10)
				return
			}
			const jumperContaienr = me.getElementsByClassName('ant-pagination-options-quick-jumper')[0]
			if (!jumperContaienr) return setTimeout(() => this.calJumperInputValue(), 10)
			const dom = jumperContaienr.getElementsByTagName('input')[0]
			if (!dom) return setTimeout(() => this.calJumperInputValue(), 10)
			if (parseInt(dom.value) == parseInt(props.current)) {
				return
			}
			if (props.current || props.current == 0) {
				// setTimeout(() => {
					dom.value = props.current
				// }, 16)
			}
		} catch (err) {
			console.log(err)
		}

	}

	showTotal= (total) => {
	   return `共 ${total} 条`;
	}

	render() {
		const props = this.props
		let className = classNames({
			'mk-pagination': true,
			[props.className]: !!props.className
        })
        // rc-pagination在'pageSize' in props 且pageSize为undefined时报错，默认给pageSize赋值
        const overwrite = {};
        if (!props.pageSize) {
            overwrite.pageSize = props.defaultPageSize || 50;
        }
		return (
			<div className={className} >
				<Pagination showTotal={this.showTotal} pageSizeOptions={['50', '100', '150', '200']} locale={zhCN} showQuickJumper={true} showSizeChanger={true} {...props} {...overwrite} />
				{props.showQuickJumper != false && props.total > props.pageSize ? <Button onClick={() => this.handleClick()} disabled={this.props.total ? false : true} className="mk-pagination-goto-btn">跳转</Button> : null}
			</div>
		)
	}
}

export default PaginationComponent