【React】在ACE项目中封装了Pagination Component

[xinbaihui]

Add Pagination Component in ACE project (2019.08.18)

1. keypress VS keydown

   • keypress: The keypress event is fired when a key is pressed down and that key normally produces a character value
   • keydown: 与 keypress事件不同的是，无论是否产生一个字符值，keydown事件均会被触发
   • eg: ctrl, shift不会产生字符, 只触发keydown，其他比如enter，space会产生字符，两个都触发
   • The implementation of the theory is not same in all browsers.

     so 此处用keyPress合适

2. input size 定义空间初始大小，默认20。指的是input的大小能显示20个字符。

3. e.target VS e.currentTarget e.target is what triggers the event dispatcher to trigger and e.currentTarget is what you assigned your listener to.

   • e.target: 指向事件触发的元素
   • e.currentTarget: 指向事件绑定的元素

4. use parseInt(xx, 10) instead of parseInt(xx) 参考：https://devdocs.io/javascript/global_objects/parseint

5. origin code

   
   import * as React from 'react';
   import { withStyles, WithStyles } from '@material-ui/core/styles';
   import { compose } from 'recompose';

import ClrIcon from '../ClrIcon'

import styles from './styles';

interface PaginationProps extends WithStyles { className?: string; pageSize?: number; total?: number; onPageNumberChange(pageNum: number): void; }

interface PaginationState { currentPageNum: number; // 1 ~ lastPageNum inputValue: number; // 1 ~ lastPageNum }

class Pagination extends React.PureComponent<PaginationProps, PaginationState> { static defaultProps = { pageSize: 10, total: 0 };

state = { currentPageNum: 1, inputValue: 1 };

/**

• @param value current input value */ setInputValue(value) { const currentInputValue = parseInt(value, 10) const { currentPageNum, inputValue } = this.state;

  // back to the current page when input value is not a number if (isNaN(currentInputValue)) { this.setState({ inputValue: currentPageNum }) return }

  const { pageSize, total } = this.props; const lastPageNum = Math.ceil(total / pageSize); const newPageNum = Math.min(Math.max(currentInputValue, 1), lastPageNum);

  if (newPageNum !== inputValue) { this.setState({ inputValue: newPageNum }); }

  if (newPageNum !== currentPageNum) { this.setState({ currentPageNum: newPageNum }); this.props.onPageNumberChange(newPageNum); } }

  /**

• handleChangeBtnClick

• @param pageNum new page number */ handlePageChangeBtnClick(pageNum: number) { this.setState({ currentPageNum: pageNum, inputValue: pageNum }); this.props.onPageNumberChange(pageNum); }

  handleInputChange = e => { this.setState({ inputValue: e.currentTarget.value // inputValue !== currentPageNum when change the input value while not press the input }); }

  handleInputPressEnter = e => { if (e.key === 'Enter') { this.setInputValue(e.currentTarget.value) } }

  handleInputBlur = e => { this.setInputValue(e.currentTarget.value) }

  render() { const { pageSize, total } = this.props; const { currentPageNum, inputValue } = this.state;

  const lastPageNum = Math.ceil(total / pageSize); const previousButtonDisabled = (currentPageNum === 1); // whether previous and first button disabled const nextButtonDisabled = (currentPageNum === lastPageNum); // whether next and last button disabled const firstShowItemIndex = (currentPageNum - 1) pageSize + 1; const lastShowItemIndex = Math.min(currentPageNum pageSize, total);

  const description = total ? ${firstShowItemIndex} - ${lastShowItemIndex} of ${total} items : '0 items found';

  return (

  {description} {total ?

  { this.handlePageChangeBtnClick(1); }} /> { this.handlePageChangeBtnClick(currentPageNum - 1); }} /> {`/ ${lastPageNum || 1}`} { this.handlePageChangeBtnClick(currentPageNum + 1); }} /> { this.handlePageChangeBtnClick(lastPageNum); }} />

  : null}

  ); } }

  export default compose( withStyles(styles, { withTheme: true }) )(Pagination);