feat: add pagination component

apps/mibao-ui-docs/src/app/pages/pagination.stories.tsx

@@ -0,0 +1,42 @@
+import { Story, Meta } from '@storybook/react'
+import { Pagination, PaginationProps } from 'mibao-ui'
+
+export default {
+  component: Pagination,
+  title: `Components/${Pagination.name}`,
+  argTypes: {
+    current: {
+      type: 'number',
+      defaultValue: 1,
+      controls: 'text'
+    },
+    total: {
+      type: 'number',
+      defaultValue: 1,
+      controls: 'text'
+    },
+    onChange: {
+      action: 'onChange'
+    }
+  }
+} as Meta<PaginationProps>
+
+export const ShowAllPages: Story<PaginationProps> = (args) => (
+  <Pagination onChange={args.onChange} total={2} current={1} />
+)
+
+export const ShowFirstPagesAndLastPage: Story<PaginationProps> = (args) => (
+  <Pagination onChange={args.onChange} total={100} current={3} />
+)
+
+export const ShowFirstPageAndLastPages: Story<PaginationProps> = (args) => (
+  <Pagination onChange={args.onChange} total={100} current={98} />
+)
+
+export const ShowEndPagesAndCenterPages: Story<PaginationProps> = (args) => (
+  <Pagination onChange={args.onChange} total={100} current={4} />
+)
+
+export const ControlledPagination: Story<PaginationProps> = (args) => (
+  <Pagination {...args} />
+)

libs/mibao-ui/src/index.ts

@@ -1,5 +1,7 @@
 import './index.scss'
 
+export * from './lib/pagination/pagination'
+
 export * from './lib/table/table'
 export * from './lib/button/button'
 export * from './lib/modal/modal'

libs/mibao-ui/src/lib/pagination/pagination.module.scss

@@ -0,0 +1,32 @@
+// TODO: set color in theme
+.container {
+  display: flex;
+  width: min-content;
+  padding: 2px;
+  button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-width: 55px;
+    height: 55px;
+    color: #5065e5;
+    font-size: 1.125rem;
+    appearance: none;
+    background: none;
+    border: none;
+    border-radius: 10px;
+    &[disabled] {
+      color: #666;
+    }
+    &:hover:not([disabled]) {
+      cursor: pointer;
+      background-color: #ffffff3a;
+    }
+    &[data-active='true'] {
+      color: #1d1b23;
+      background-color: #fff;
+    }
+  }
+  background-color: #eee;
+  border-radius: 10px;
+}

libs/mibao-ui/src/lib/pagination/pagination.spec.tsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react'
+
+import Pagination from './pagination'
+
+describe('Pagination', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <Pagination current={1} total={100} onChange={() => undefined} />
+    )
+    expect(baseElement).toBeTruthy()
+  })
+})

libs/mibao-ui/src/lib/pagination/pagination.tsx

@@ -0,0 +1,93 @@
+import { useMemo } from 'react'
+import { ChevronLeftIcon, ChevronRightIcon } from '@chakra-ui/icons'
+import styles from './pagination.module.scss'
+
+export interface PaginationProps {
+  current: number
+  total: number
+  onChange: (page: number) => void
+}
+
+export const Pagination: React.FC<PaginationProps> = ({
+  current,
+  total,
+  onChange
+}) => {
+  const pages = useMemo(() => {
+    if (current <= 0) {
+      return []
+    }
+    const RANGE = 1
+    const COUNT = RANGE * 2 + 1
+    let list = new Array(Math.min(total, COUNT)).fill(undefined)
+
+    switch (true) {
+      case current <= COUNT: {
+        list = list.map((_, i) => i + 1)
+        break
+      }
+      case current > total - COUNT: {
+        list = list.map((_, i) => total - COUNT + i + 1)
+        break
+      }
+      default: {
+        list = list.map((_, i) => current - RANGE + i)
+        break
+      }
+    }
+
+    if (list[0] >= 2) {
+      list = list[0] === 2 ? [1, ...list] : [1, 'left_ellipsis', ...list]
+    }
+
+    if (list[list.length - 1] <= total - 1) {
+      list =
+        list[list.length - 1] === total - 1
+          ? [...list, total]
+          : [...list, 'right_ellipsis', total]
+    }
+
+    return list
+  }, [current, total])
+
+  const handlePageClick = (
+    e: React.SyntheticEvent<HTMLDivElement, MouseEvent>
+  ) => {
+    e.stopPropagation()
+    e.preventDefault()
+    const {
+      dataset: { page }
+    } = e.target as HTMLButtonElement
+    if (!page) {
+      return
+    }
+
+    const p = +page
+    if (Number.isNaN(p)) {
+      return
+    }
+    onChange(p)
+  }
+
+  return (
+    <div onClick={handlePageClick} className={styles.container}>
+      <button disabled={current === 1} data-page={1}>
+        <ChevronLeftIcon pointerEvents="none" w={20} h={20} />
+      </button>
+      {pages.map((page) => (
+        <button
+          key={page}
+          data-page={page}
+          data-active={(page === current).toString()}
+          disabled={page === current || typeof page === 'string'}
+        >
+          {typeof page === 'string' ? '...' : page}
+        </button>
+      ))}
+      <button disabled={current === total} data-page={total}>
+        <ChevronRightIcon pointerEvents="none" w={20} h={20} />
+      </button>
+    </div>
+  )
+}
+export default Pagination

package.json

@@ -12,6 +12,7 @@
   },
   "private": true,
   "dependencies": {
+    "@chakra-ui/icons": "1.0.16",
     "@chakra-ui/react": "1.6.10",
     "@emotion/react": "11.4.1",
     "@emotion/styled": "11.3.0",