Merge pull request #1382 from XiaoMi/hotfix/#1381

fix: #1381
XiaoMi · Nov 26, 2020 · d0970df · d0970df
2 parents 7abaad0 + 5dd2e0a
commit d0970df
Show file tree

Hide file tree

Showing 7 changed files with 55 additions and 75 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -3,6 +3,7 @@ module.exports = {
     browser: true,
     es2021: true
   },
+  parser: 'babel-eslint',
   extends: ['plugin:react/recommended', 'standard', 'prettier'],
   parserOptions: {
     ecmaFeatures: {

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -17,6 +17,7 @@
 - 优化 `Select` 弹层触发方式 [#1358](https://github.com/XiaoMi/hiui/issues/1358)
 - 优化 `Search` 后置元素应该收起下来选项 [#1341](https://github.com/XiaoMi/hiui/issues/1341)
 - 优化 `From` 组件 label 内容显示折行行高以及间距 [#1341](https://github.com/XiaoMi/hiui/issues/1341)
+- 优化 `Pagination` 国际化翻译 [#1381](https://github.com/XiaoMi/hiui/issues/1381)
 - 新增 HiUI 基础样式 css 文件 [#1388](https://github.com/XiaoMi/hiui/issues/1388)
 - 新增 `Table` expandedRowKeys，onExpand 扩展内嵌式表格的展开操作 [#1378](https://github.com/XiaoMi/hiui/issues/1378)
 

diff --git a/components/locales/en-US.js b/components/locales/en-US.js
@@ -39,7 +39,7 @@ export default {
     total: ['Total', 'items'],
     simple: ['The', 'page', '', 'pages', 'items'],
     item: '',
-    itemPerPage: 'Items per page',
+    itemPerPage: 'page',
     goto: 'Goto',
     page: ''
   },

diff --git a/components/pagination/Pagination.js b/components/pagination/Pagination.js
@@ -6,20 +6,18 @@ import Input from '../input'
 import Provider from '../context'
 import Icon from '../icon'
 
-function isInteger (value) {
-  return (
-    typeof value === 'number' && isFinite(value) && Math.floor(value) === value
-  )
+function isInteger(value) {
+  return typeof value === 'number' && isFinite(value) && Math.floor(value) === value
 }
 
-function breakItemRender (page, element) {
+function breakItemRender(page, element) {
   return element
 }
 
-function noop () {}
+function noop() {}
 
 class Pagination extends Component {
-  constructor (props) {
+  constructor(props) {
     super(props)
 
     const { defaultCurrent, current: propsCurrent, pageSize, total } = props
@@ -37,8 +35,8 @@ class Pagination extends Component {
     }
   }
 
-  componentWillReceiveProps (props) {
-    let states = {}
+  componentWillReceiveProps(props) {
+    const states = {}
     if (props.pageSize !== this.props.pageSize) {
       states.pageSize = props.pageSize
     }
@@ -47,10 +45,7 @@ class Pagination extends Component {
     }
     let current
     if (props.current !== undefined && this.state.current !== props.current) {
-      current = this.getCurrent(
-        props.current,
-        this.calculatePage(props.total, props.pageSize)
-      )
+      current = this.getCurrent(props.current, this.calculatePage(props.total, props.pageSize))
     }
     if (current) {
       states.current = current
@@ -60,7 +55,7 @@ class Pagination extends Component {
     this.setState({ ...states })
   }
 
-  getCurrent (current, maxPage) {
+  getCurrent(current, maxPage) {
     if (current < 1) {
       return 1
     } else if (current > maxPage) {
@@ -70,14 +65,14 @@ class Pagination extends Component {
     return current
   }
 
-  calculatePage (total, pageSize) {
+  calculatePage(total, pageSize) {
     if (typeof pageSize === 'undefined') {
       pageSize = this.state.pageSize
     }
     return Math.ceil(total / pageSize)
   }
 
-  handleChange (page) {
+  handleChange(page) {
     const prevPage = this.state.current
     const maxPage = this.calculatePage(this.props.total)
 
@@ -92,26 +87,23 @@ class Pagination extends Component {
     }
   }
 
-  prev () {
+  prev() {
     if (this.state.current > 1) {
       return this.state.current - 1
     }
     return -1
   }
 
-  next () {
+  next() {
     if (this.state.current < this.calculatePage(this.props.total)) {
       return this.state.current + 1
     }
     return -1
   }
 
-  onPageSizeChange (pageSize) {
+  onPageSizeChange(pageSize) {
     const { total, onPageSizeChange } = this.props
-    const current = this.getCurrent(
-      this.state.current,
-      this.calculatePage(total, pageSize)
-    ) // pageSize改动需要重新计算当前页，避免超过最大页情况
+    const current = this.getCurrent(this.state.current, this.calculatePage(total, pageSize)) // pageSize改动需要重新计算当前页，避免超过最大页情况
 
     this.setState(
       {
@@ -124,11 +116,10 @@ class Pagination extends Component {
     )
   }
 
-  renderPageSizes () {
+  renderPageSizes() {
     const {
       pageSize,
       pageSizeOptions,
-      prefixCls,
       localeDatas: {
         pagination: { itemPerPage: i18nItemPerPage, item: i18nItem }
       }
@@ -139,28 +130,24 @@ class Pagination extends Component {
     }
 
     return (
-      <div className={`${prefixCls}__sizes ${prefixCls}__text`}>
-        <div className={`${prefixCls}__span`}>
-          <Select
-            type='single'
-            clearable={false}
-            style={{ width: 104 }}
-            data={pageSizeOptions.map(n => ({
-              // 这里的类型判断是考虑对过去的兼容写法
-              id: typeof n === 'object' ? n.value : n,
-              title: `${n} ${i18nItem}/${i18nItemPerPage}`
-            }))}
-            value={pageSize}
-            onChange={ids => {
-              this.onPageSizeChange(ids[0])
-            }}
-          />
-        </div>
-      </div>
+      <Select
+        type="single"
+        clearable={false}
+        style={{ width: 114, marginRight: 24 }}
+        data={pageSizeOptions.map((n) => ({
+          // 这里的类型判断是考虑对过去的兼容写法
+          id: typeof n === 'object' ? n.value : n,
+          title: `${n} ${i18nItem} / ${i18nItemPerPage}`
+        }))}
+        value={pageSize}
+        onChange={(ids) => {
+          this.onPageSizeChange(ids[0])
+        }}
+      />
     )
   }
 
-  renderJumper () {
+  renderJumper() {
     const { showJumper, prefixCls, localeDatas } = this.props
 
     if (!showJumper) {
@@ -176,7 +163,7 @@ class Pagination extends Component {
     )
   }
 
-  renderJumperInput () {
+  renderJumperInput() {
     const { prefixCls, total } = this.props
 
     return (
@@ -212,9 +199,9 @@ class Pagination extends Component {
     )
   }
 
-  gotoPage = e => {
+  gotoPage = (e) => {
     const pageNum = parseInt(e.target.value)
-    const setPageNum = page => {
+    const setPageNum = (page) => {
       this.handleChange(page)
       this.props.onJump && this.props.onJump(Number(page))
     }
@@ -229,13 +216,13 @@ class Pagination extends Component {
     }
   }
 
-  renderPagers () {
+  renderPagers() {
     const { max, total, prefixCls } = this.props
     const { current } = this.state
     const maxPage = this.calculatePage(total)
     const prevPager = this.renderPrevPager() // 上一页
     const nextPager = this.renderNextPager() // 下一页
-    let pagers = [prevPager]
+    const pagers = [prevPager]
     let leftBuffer, rightBuffer
     if (max * 2 + 1 + 2 >= maxPage) {
       leftBuffer = 1
@@ -283,28 +270,28 @@ class Pagination extends Component {
     return pagers
   }
 
-  renderPrevPager () {
+  renderPrevPager() {
     const { prefixCls } = this.props
     const prevPage = this.prev()
     return this.renderPager(
       prevPage,
       { className: `${prefixCls}__item-prev`, disabled: prevPage < 1, id: 'PREV' },
-      <Icon name='left' />
+      <Icon name="left" />
     )
   }
 
-  renderNextPager () {
+  renderNextPager() {
     const { prefixCls } = this.props
     const nextPage = this.next()
     return this.renderPager(
       nextPage,
-      { className: `${prefixCls}__item-next`, disabled: nextPage < 1, id: 'NEXT'},
-      <Icon name='right' />
+      { className: `${prefixCls}__item-next`, disabled: nextPage < 1, id: 'NEXT' },
+      <Icon name="right" />
     )
   }
 
   pagerIndex = 0
-  renderPager (page, props, children) {
+  renderPager(page, props, children) {
     const { prefixCls, itemRender, pageLink } = this.props
 
     return (
@@ -322,7 +309,7 @@ class Pagination extends Component {
     )
   }
 
-  renderNormal () {
+  renderNormal() {
     // 标准分页
     const {
       prefixCls,
@@ -349,7 +336,7 @@ class Pagination extends Component {
     )
   }
 
-  renderSimple () {
+  renderSimple() {
     // 简单分页
     const {
       total,
@@ -375,7 +362,7 @@ class Pagination extends Component {
     )
   }
 
-  renderPn () {
+  renderPn() {
     // 上一页下一页
     const { prefixCls, total, showJumper } = this.props
     const maxPage = this.calculatePage(total)
@@ -387,16 +374,15 @@ class Pagination extends Component {
         {prevPager}
         {showJumper && (
           <div className={`${prefixCls}__text`}>
-            {this.renderJumperInput()}/
-            <span style={{ margin: '0 20px 0px 8px' }}>{maxPage}</span>
+            {this.renderJumperInput()}/<span style={{ margin: '0 20px 0px 8px' }}>{maxPage}</span>
           </div>
         )}
         {nextPager}
       </React.Fragment>
     )
   }
 
-  render () {
+  render() {
     const { autoHide, total, type, prefixCls, className, theme } = this.props
     const maxPage = this.calculatePage(total)
     if (maxPage === 0 || (autoHide && maxPage === 1)) {
@@ -418,10 +404,7 @@ class Pagination extends Component {
     }
 
     return (
-      <div
-        ref={this.tempRef}
-        className={`${prefixCls} ${prefixCls}--${type} ${className} theme__${theme}`}
-      >
+      <div ref={this.tempRef} className={`${prefixCls} ${prefixCls}--${type} ${className} theme__${theme}`}>
         {children}
       </div>
     )

diff --git a/components/pagination/style/index.scss b/components/pagination/style/index.scss
@@ -55,12 +55,8 @@
     margin-right: $spacer-4;
   }
 
-  &__sizes {
-    margin-right: $spacer-4;
-  }
-
   &__jumper {
-    margin-left: $spacer-4;
+    margin-left: $spacer-6;
   }
 
   &__span {
@@ -125,7 +121,6 @@
         border: 1px solid transparent;
         transition: border-color $speed-fast $easing, color $speed-fast $easing;
       }
-
     }
 
     &--active {

diff --git a/docs/zh-CN/components/table.mdx b/docs/zh-CN/components/table.mdx
@@ -56,9 +56,9 @@ import DemoAsync from '../../demo/table/section-async.jsx'
 | stickyTop          | 表头吸顶距离视口顶部距离                                                                                | number                                         | -                                         | 0          |
 | highlightedColKeys | 高亮列（受控）                                                                                          | string[]                                       | -                                         | []         |
 | expandedRender     | 表格展开项                                                                                              | (record: dataItem, index: number) => ReactNode | -                                         | -          |
-| onExpand     | 表格展开时的回调函数                                                                                             | (record: dataItem, index: number) => ReactNode | -                                         | -          |
+| onExpand     | 表格展开时的回调函数                                                                                             | (expanded, row: object) => void | -                                         | -          |
 | expandRowKeys     | 表格展开的行（受控）                                                                                          | number[] | -                                         | -          |
-| maxHeight          | 表格最大高度，当穿过该高度时，展示滚动条且表头固定                                                      | （expanded, row: object）=> void                                        | -                                         | -          |
+| maxHeight          | 表格最大高度，当穿过该高度时，展示滚动条且表头固定                                                      | number                                        | -                                         | -          |
 | fixedToColumn      | 表格列冻结设置，为 string 时仅支持从左侧冻结至某一列                                                    | string \| FixedOption                          | -                                         | null       |
 | size               | 配置表格尺寸                                                                                            | string                                         | 'large' \| 'default' \| 'small' \| 'mini' | 'default'  |
 | pagination         | 表格分页配置项                                                                                          | Pagination                                     | -                                         | null       |

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/hiui",
-  "version": "3.1.0",
+  "version": "3.1.1-rc.13",
   "description": "HIUI for React",
   "scripts": {
     "test": "node_modules/.bin/standard && node_modules/.bin/stylelint --config .stylelintrc 'components/**/*.scss'",