@gm-pc/react 1.27.0 → 1.27.1-beta.0

package/src/component/pagination/left.tsx

@@ -1,56 +1,56 @@
-import React, { FC } from 'react'
-import { Select } from '../select'
-import { Flex } from '../flex'
-import { PaginationProps } from './types'
-import _ from 'lodash'
-import { getLocale } from '@gm-pc/locales'
-
-function getLimitData(limit: number, pageSizeOptions?: string[]) {
-  const limitData = [
-    { value: limit, text: limit + '' },
-    { value: 10, text: '10' },
-    { value: 20, text: '20' },
-    { value: 50, text: '50' },
-    ...(pageSizeOptions?.map((v) => ({ value: Number(v), text: v })) || []),
-  ]
-
-  return _.orderBy(
-    _.uniqBy(limitData, (v) => v.value),
-    ['value']
-  )
-}
-
-const Left: FC<PaginationProps> = ({ paging, pageSizeOptions, onChange }) => {
-  const { need_count, count, limit } = paging
-
-  const handleChange = (limit: number) => {
-    onChange({
-      ...paging,
-      // 改变页码需要回到第一页
-      offset: 0,
-      limit,
-    })
-  }
-
-  return (
-    <Flex alignCenter>
-      {need_count && (
-        <span>
-          {getLocale('共')}
-          {count}
-          {getLocale('条记录')},&nbsp;
-        </span>
-      )}
-      <span>{getLocale('每页')}&nbsp;</span>
-      <Select
-        data={getLimitData(limit, pageSizeOptions)}
-        value={limit}
-        onChange={handleChange}
-        style={{ width: '60px' }}
-      />
-      <span>&nbsp;{getLocale('条')}</span>
-    </Flex>
-  )
-}
-
-export default Left
+import React, { FC } from 'react'
+import { Select } from '../select'
+import { Flex } from '../flex'
+import { PaginationProps } from './types'
+import _ from 'lodash'
+import { getLocale } from '@gm-pc/locales'
+
+function getLimitData(limit: number, pageSizeOptions?: string[]) {
+  const limitData = [
+    { value: limit, text: limit + '' },
+    { value: 10, text: '10' },
+    { value: 20, text: '20' },
+    { value: 50, text: '50' },
+    ...(pageSizeOptions?.map((v) => ({ value: Number(v), text: v })) || []),
+  ]
+
+  return _.orderBy(
+    _.uniqBy(limitData, (v) => v.value),
+    ['value']
+  )
+}
+
+const Left: FC<PaginationProps> = ({ paging, pageSizeOptions, onChange }) => {
+  const { need_count, count, limit } = paging
+
+  const handleChange = (limit: number) => {
+    onChange({
+      ...paging,
+      // 改变页码需要回到第一页
+      offset: 0,
+      limit,
+    })
+  }
+
+  return (
+    <Flex alignCenter>
+      {need_count && (
+        <span>
+          {getLocale('共')}
+          {count}
+          {getLocale('条记录')},&nbsp;
+        </span>
+      )}
+      <span>{getLocale('每页')}&nbsp;</span>
+      <Select
+        data={getLimitData(limit, pageSizeOptions)}
+        value={limit}
+        onChange={handleChange}
+        style={{ width: '60px' }}
+      />
+      <span>&nbsp;{getLocale('条')}</span>
+    </Flex>
+  )
+}
+
+export default Left

package/src/component/pagination/page_with_count.tsx

@@ -1,115 +1,115 @@
-import React, { FC } from 'react'
-import SVGLeftSmall from '../../svg/left-small.svg'
-import SVGRightSmall from '../../svg/right-small.svg'
-import { Flex } from '../flex'
-import classNames from 'classnames'
-import { PaginationProps, PaginationPaging } from './types'
-import { getIndex } from './util'
-
-function getInfo(paging: PaginationPaging) {
-  const index = getIndex(paging)
-
-  // 一共多少页
-  const all = Math.ceil((paging.count || 0) / paging.limit)
-  // 要左右额外展示多少个页码，比如当前 index=5 diff=2,那么展示页码是 3 4 5 6 7
-  const diff = 2
-  // 展示出来的页码数组
-  let pages = []
-
-  // 开始页码
-  let begin = Math.max(index - diff, 1)
-
-  // 结束页码
-  let end = Math.min(index + diff, all)
-
-  if (all > diff * 2 + 1) {
-    if (begin === 1) {
-      end = diff * 2 + 1
-    } else if (end === all) {
-      begin = Math.max(end - 2 * diff, 1)
-    }
-  }
-
-  for (let i = begin; i <= end; i++) {
-    pages.push(i)
-  }
-
-  // 如果总数为0，还是要给个页码1
-  if (paging.count === 0) {
-    pages = [1]
-  }
-
-  return {
-    index,
-    all,
-    begin,
-    end,
-    pages,
-  }
-}
-
-const PageWithCount: FC<PaginationProps> = ({ paging, onChange }) => {
-  const { index, all, begin, end, pages } = getInfo(paging)
-
-  const handlePage = (_index: number) => {
-    // 不处理
-    if (index === _index || _index < 1 || _index > all) {
-      return
-    }
-
-    onChange({
-      ...paging,
-      offset: (_index - 1) * paging.limit,
-    })
-  }
-
-  return (
-    <Flex alignCenter className='gm-pagination-page'>
-      <div
-        className={classNames('gm-pagination-page-item', {
-          disabled: index === 1,
-        })}
-        onClick={() => handlePage(index - 1)}
-      >
-        <SVGLeftSmall />
-      </div>
-
-      {begin >= 2 && (
-        <div className='gm-pagination-page-item' onClick={() => handlePage(1)}>
-          1
-        </div>
-      )}
-      {begin >= 3 && <span className='gm-pagination-page-text'>···</span>}
-
-      {pages.map((page, i) => (
-        <div
-          key={i}
-          className={classNames('gm-pagination-page-item', {
-            active: index === page,
-          })}
-          onClick={() => handlePage(page)}
-        >
-          {page}
-        </div>
-      ))}
-
-      {end <= all - 2 && <span className='gm-pagination-page-text'>···</span>}
-      {end <= all - 1 && (
-        <div className='gm-pagination-page-item' onClick={() => handlePage(all)}>
-          {all}
-        </div>
-      )}
-
-      <div
-        className={classNames('gm-pagination-page-item', {
-          disabled: index === all || all === 0,
-        })}
-        onClick={() => handlePage(index + 1)}
-      >
-        <SVGRightSmall />
-      </div>
-    </Flex>
-  )
-}
-
-export default PageWithCount
+import React, { FC } from 'react'
+import SVGLeftSmall from '../../svg/left-small.svg'
+import SVGRightSmall from '../../svg/right-small.svg'
+import { Flex } from '../flex'
+import classNames from 'classnames'
+import { PaginationProps, PaginationPaging } from './types'
+import { getIndex } from './util'
+
+function getInfo(paging: PaginationPaging) {
+  const index = getIndex(paging)
+
+  // 一共多少页
+  const all = Math.ceil((paging.count || 0) / paging.limit)
+  // 要左右额外展示多少个页码，比如当前 index=5 diff=2,那么展示页码是 3 4 5 6 7
+  const diff = 2
+  // 展示出来的页码数组
+  let pages = []
+
+  // 开始页码
+  let begin = Math.max(index - diff, 1)
+
+  // 结束页码
+  let end = Math.min(index + diff, all)
+
+  if (all > diff * 2 + 1) {
+    if (begin === 1) {
+      end = diff * 2 + 1
+    } else if (end === all) {
+      begin = Math.max(end - 2 * diff, 1)
+    }
+  }
+
+  for (let i = begin; i <= end; i++) {
+    pages.push(i)
+  }
+
+  // 如果总数为0，还是要给个页码1
+  if (paging.count === 0) {
+    pages = [1]
+  }
+
+  return {
+    index,
+    all,
+    begin,
+    end,
+    pages,
+  }
+}
+
+const PageWithCount: FC<PaginationProps> = ({ paging, onChange }) => {
+  const { index, all, begin, end, pages } = getInfo(paging)
+
+  const handlePage = (_index: number) => {
+    // 不处理
+    if (index === _index || _index < 1 || _index > all) {
+      return
+    }
+
+    onChange({
+      ...paging,
+      offset: (_index - 1) * paging.limit,
+    })
+  }
+
+  return (
+    <Flex alignCenter className='gm-pagination-page'>
+      <div
+        className={classNames('gm-pagination-page-item', {
+          disabled: index === 1,
+        })}
+        onClick={() => handlePage(index - 1)}
+      >
+        <SVGLeftSmall />
+      </div>
+
+      {begin >= 2 && (
+        <div className='gm-pagination-page-item' onClick={() => handlePage(1)}>
+          1
+        </div>
+      )}
+      {begin >= 3 && <span className='gm-pagination-page-text'>···</span>}
+
+      {pages.map((page, i) => (
+        <div
+          key={i}
+          className={classNames('gm-pagination-page-item', {
+            active: index === page,
+          })}
+          onClick={() => handlePage(page)}
+        >
+          {page}
+        </div>
+      ))}
+
+      {end <= all - 2 && <span className='gm-pagination-page-text'>···</span>}
+      {end <= all - 1 && (
+        <div className='gm-pagination-page-item' onClick={() => handlePage(all)}>
+          {all}
+        </div>
+      )}
+
+      <div
+        className={classNames('gm-pagination-page-item', {
+          disabled: index === all || all === 0,
+        })}
+        onClick={() => handlePage(index + 1)}
+      >
+        <SVGRightSmall />
+      </div>
+    </Flex>
+  )
+}
+
+export default PageWithCount

package/src/component/pagination/page_without_count.tsx

@@ -1,64 +1,64 @@
-import React, { FC } from 'react'
-import SVGLeftSmall from '../../svg/left-small.svg'
-import SVGRightSmall from '../../svg/right-small.svg'
-import { Flex } from '../flex'
-import classNames from 'classnames'
-import _ from 'lodash'
-import { getIndex } from './util'
-import { PaginationProps } from './types'
-
-const PageWithoutCount: FC<PaginationProps> = ({ paging, onChange }) => {
-  const index = getIndex(paging)
-
-  // 往前显示4个页码
-  const begin = Math.max(1, index - 4)
-  // 往后显示的页码，
-  // 最后一页不显示，属于 ...，所以 -1
-  // 最多4页
-  const end = paging.has_more ? index + 1 : index
-
-  const handlePage = (_index: number) => {
-    onChange({
-      ...paging,
-      offset: (_index - 1) * paging.limit,
-    })
-  }
-
-  return (
-    <Flex alignCenter className='gm-pagination-page'>
-      <div
-        className={classNames('gm-pagination-page-item', {
-          disabled: index === 1,
-        })}
-        onClick={index === 1 ? _.noop : () => handlePage(index - 1)}
-      >
-        <SVGLeftSmall />
-      </div>
-
-      {_.map(_.range(begin, end + 1), (page, i) => (
-        <div
-          key={i}
-          className={classNames('gm-pagination-page-item', {
-            active: index === page,
-          })}
-          onClick={index === page ? _.noop : () => handlePage(page)}
-        >
-          {page}
-        </div>
-      ))}
-
-      {paging.has_more && <span className='gm-pagination-page-text'>···</span>}
-
-      <div
-        className={classNames('gm-pagination-page-item', {
-          disabled: !paging.has_more,
-        })}
-        onClick={!paging.has_more ? _.noop : () => handlePage(index + 1)}
-      >
-        <SVGRightSmall />
-      </div>
-    </Flex>
-  )
-}
-
-export default PageWithoutCount
+import React, { FC } from 'react'
+import SVGLeftSmall from '../../svg/left-small.svg'
+import SVGRightSmall from '../../svg/right-small.svg'
+import { Flex } from '../flex'
+import classNames from 'classnames'
+import _ from 'lodash'
+import { getIndex } from './util'
+import { PaginationProps } from './types'
+
+const PageWithoutCount: FC<PaginationProps> = ({ paging, onChange }) => {
+  const index = getIndex(paging)
+
+  // 往前显示4个页码
+  const begin = Math.max(1, index - 4)
+  // 往后显示的页码，
+  // 最后一页不显示，属于 ...，所以 -1
+  // 最多4页
+  const end = paging.has_more ? index + 1 : index
+
+  const handlePage = (_index: number) => {
+    onChange({
+      ...paging,
+      offset: (_index - 1) * paging.limit,
+    })
+  }
+
+  return (
+    <Flex alignCenter className='gm-pagination-page'>
+      <div
+        className={classNames('gm-pagination-page-item', {
+          disabled: index === 1,
+        })}
+        onClick={index === 1 ? _.noop : () => handlePage(index - 1)}
+      >
+        <SVGLeftSmall />
+      </div>
+
+      {_.map(_.range(begin, end + 1), (page, i) => (
+        <div
+          key={i}
+          className={classNames('gm-pagination-page-item', {
+            active: index === page,
+          })}
+          onClick={index === page ? _.noop : () => handlePage(page)}
+        >
+          {page}
+        </div>
+      ))}
+
+      {paging.has_more && <span className='gm-pagination-page-text'>···</span>}
+
+      <div
+        className={classNames('gm-pagination-page-item', {
+          disabled: !paging.has_more,
+        })}
+        onClick={!paging.has_more ? _.noop : () => handlePage(index + 1)}
+      >
+        <SVGRightSmall />
+      </div>
+    </Flex>
+  )
+}
+
+export default PageWithoutCount

package/src/component/pagination/pagination.tsx

@@ -1,23 +1,23 @@
-import React, { FC } from 'react'
-import Left from './left'
-import Right from './right'
-import PageWithCount from './page_with_count'
-import PageWithoutCount from './page_without_count'
-import { PaginationProps } from './types'
-import { Flex } from '../flex'
-
-const Pagination: FC<PaginationProps> = ({ paging, pageSizeOptions, onChange }) => {
-  return (
-    <Flex wrap className='gm-pagination'>
-      <Left pageSizeOptions={pageSizeOptions} paging={paging} onChange={onChange} />
-      {paging.need_count ? (
-        <PageWithCount paging={paging} onChange={onChange} />
-      ) : (
-        <PageWithoutCount paging={paging} onChange={onChange} />
-      )}
-      {paging.need_count && <Right paging={paging} onChange={onChange} />}
-    </Flex>
-  )
-}
-
-export default Pagination
+import React, { FC } from 'react'
+import Left from './left'
+import Right from './right'
+import PageWithCount from './page_with_count'
+import PageWithoutCount from './page_without_count'
+import { PaginationProps } from './types'
+import { Flex } from '../flex'
+
+const Pagination: FC<PaginationProps> = ({ paging, pageSizeOptions, onChange }) => {
+  return (
+    <Flex wrap className='gm-pagination'>
+      <Left pageSizeOptions={pageSizeOptions} paging={paging} onChange={onChange} />
+      {paging.need_count ? (
+        <PageWithCount paging={paging} onChange={onChange} />
+      ) : (
+        <PageWithoutCount paging={paging} onChange={onChange} />
+      )}
+      {paging.need_count && <Right paging={paging} onChange={onChange} />}
+    </Flex>
+  )
+}
+
+export default Pagination

package/src/component/pagination/right.tsx

@@ -1,79 +1,79 @@
-import React, { useState, useEffect, FC, KeyboardEvent, useRef } from 'react'
-import { getLocale } from '@gm-pc/locales'
-import { InputNumber } from '../input_number'
-import { Flex } from '../flex'
-import { PaginationProps } from './types'
-import { getIndex } from './util'
-
-const Right: FC<PaginationProps> = ({ paging, onChange }) => {
-  const [index, setIndex] = useState<number>(getIndex(paging))
-
-  // input focus 的时候存起来，blur 的时候如果一样就不更新
-  const refIndex = useRef<number | null>(null)
-
-  // 响应外部的 index 变化
-  useEffect(() => {
-    setIndex(getIndex(paging))
-  }, [paging.offset, paging.limit])
-
-  const handleInput = (value: number) => {
-    setIndex(value)
-  }
-
-  const doEnsureIndex = () => {
-    // 如果不合理，则还原
-    if (index === null) {
-      setIndex(getIndex(paging))
-      return
-    }
-
-    onChange({
-      ...paging,
-      offset: (index - 1) * paging.limit,
-    })
-  }
-
-  const handleFocus = () => {
-    refIndex.current = index
-  }
-
-  const handleBlur = () => {
-    // 和 focus 一样，值没变，就不触发更新了
-    if (index === refIndex.current) {
-      return
-    }
-
-    refIndex.current = index
-
-    doEnsureIndex()
-  }
-
-  // @todo useKeyPress
-  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter') {
-      doEnsureIndex()
-    }
-  }
-
-  const all = Math.ceil((paging.count || 1) / paging.limit)
-
-  return (
-    <Flex className='gm-pagination-right'>
-      <InputNumber
-        disabled={all <= 1}
-        precision={0}
-        value={index}
-        onChange={handleInput}
-        min={1}
-        max={all}
-        onFocus={handleFocus}
-        onBlur={handleBlur}
-        onKeyDown={handleKeyDown}
-        style={{ width: '40px' }}
-      />
-      <div className='gm-pagination-right-total-page'>{`/${all}${getLocale('页')}`}</div>
-    </Flex>
-  )
-}
-
-export default Right
+import React, { useState, useEffect, FC, KeyboardEvent, useRef } from 'react'
+import { getLocale } from '@gm-pc/locales'
+import { InputNumber } from '../input_number'
+import { Flex } from '../flex'
+import { PaginationProps } from './types'
+import { getIndex } from './util'
+
+const Right: FC<PaginationProps> = ({ paging, onChange }) => {
+  const [index, setIndex] = useState<number>(getIndex(paging))
+
+  // input focus 的时候存起来，blur 的时候如果一样就不更新
+  const refIndex = useRef<number | null>(null)
+
+  // 响应外部的 index 变化
+  useEffect(() => {
+    setIndex(getIndex(paging))
+  }, [paging.offset, paging.limit])
+
+  const handleInput = (value: number) => {
+    setIndex(value)
+  }
+
+  const doEnsureIndex = () => {
+    // 如果不合理，则还原
+    if (index === null) {
+      setIndex(getIndex(paging))
+      return
+    }
+
+    onChange({
+      ...paging,
+      offset: (index - 1) * paging.limit,
+    })
+  }
+
+  const handleFocus = () => {
+    refIndex.current = index
+  }
+
+  const handleBlur = () => {
+    // 和 focus 一样，值没变，就不触发更新了
+    if (index === refIndex.current) {
+      return
+    }
+
+    refIndex.current = index
+
+    doEnsureIndex()
+  }
+
+  // @todo useKeyPress
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      doEnsureIndex()
+    }
+  }
+
+  const all = Math.ceil((paging.count || 1) / paging.limit)
+
+  return (
+    <Flex className='gm-pagination-right'>
+      <InputNumber
+        disabled={all <= 1}
+        precision={0}
+        value={index}
+        onChange={handleInput}
+        min={1}
+        max={all}
+        onFocus={handleFocus}
+        onBlur={handleBlur}
+        onKeyDown={handleKeyDown}
+        style={{ width: '40px' }}
+      />
+      <div className='gm-pagination-right-total-page'>{`/${all}${getLocale('页')}`}</div>
+    </Flex>
+  )
+}
+
+export default Right