Merge pull request #33 from linghualuan/fix/pagination/add-style

add pagination component

docs/src/content/docs/components/pagination.mdx

@@ -0,0 +1,159 @@
+---
+title: 分页 Pagination
+label: Pagination 分页
+category: Navigation
+order: 1
+---
+# Pagination 分页
+
+### 基本用法
+分页的基本用法
+
+```tsx
+import { Pagination } from '@yike-design/react';
+
+export default () => {
+  return (
+    <Pagination total={100}/>
+  );
+};
+```
+
+### 简洁模式
+通过设置`simple`属性开启简洁模式
+
+```tsx
+import { Pagination } from '@yike-design/react';
+
+export default () => {
+  return (
+    <Pagination total={50} simple/>
+  );
+};
+```
+
+### 禁用组件
+通过设置`disabled`属性禁用组件
+
+```tsx
+import { Pagination } from '@yike-design/react';
+
+export default () => {
+  return (
+    <Pagination total={50} disabled/>
+  );
+};
+```
+
+### 最大页码按钮数
+默认情况下。当总页数超过7页时，Pagination会折叠多余的页码按钮。通过`pagerCount`属性可以设置最大页码按钮数
+
+```tsx
+import { Pagination } from '@yike-design/react';
+
+export default () => {
+  return (
+    <Pagination total={1000} pagerCount={13}/>
+  );
+};
+```
+
+### 页码跳转
+通过设置`showJumper`快速跳转到某一页
+
+```tsx
+import { Pagination } from '@yike-design/react';
+
+export default () => {
+  return (
+    <Pagination total={1000} showJumper/>
+  );
+};
+```
+
+### 每页条数选择器的选项列表
+通过设置`pageSizeOptions`属性，可以重新指定选择器的选项列表
+
+```tsx
+import { Pagination } from '@yike-design/react';
+
+export default () => {
+  return (
+    <Pagination total={1000} pageSizeOptions={[20, 30, 40]} showPageSize/>
+  );
+};
+```
+
+### 展示数据总量
+通过设置`showTotal`展示总共有多少数据
+
+```tsx
+import { Pagination } from '@yike-design/react';
+
+export default () => {
+  return (
+    <Pagination total={1000} showTotal/>
+  );
+};
+```
+
+### 更改尺寸
+通过设置`size`来更改分页的大小，默认值为`l`
+
+```tsx
+import { Pagination } from '@yike-design/react';
+
+export default () => {
+  return (
+    <div>
+      <Pagination total={1000} size='m' simple/>
+      <br/><br/>
+      <Pagination total={1000} size='xl'/>
+    </div>
+  );
+};
+
+```
+
+### 事件
+可以为组件的页面切换和分页大小改变添加事件监听。
+
+```tsx
+import { Pagination } from '@yike-design/react';
+
+export default () => {
+  const handleOnChange = (page:number, pageSize: number) => {
+    console.log(`current page is: ${page}`)
+    console.log(`pageSize is: ${pageSize}`)
+  }
+
+  const handlePageSizeChange = (size: number) => {
+    console.log(`current size is: ${size}`)
+  }
+
+  return (
+    <Pagination total={1000} showPageSize showTotal showJumper onChange={handleOnChange} pageSizeChange={handlePageSizeChange}/>
+  );
+};
+```
+
+
+### API
+
+| 参数                     | 描述                  | 类型                      | 默认值               |
+|--------------------------|-----------------------|--------------------------|----------------------|
+|         total      |       总数据量（必填）         |          `number`        |         -            |
+|         current          |      当前页数          |          `number`        |         -            |
+|         defaultCurrent   |      默认的页数        |          `number`        |         1            |
+|         pageSize         |   每页展示的数据条数    |          `number`        |         -            |
+|       defaultPageSize    |  默认每页展示的数据条数 |          `number`        |         10           |
+|        disabled          |       禁用组件         |          `boolean`       |        false         |
+|       pagerCount         |    最大显示页码数量     |          `number`        |         7            |
+|       pageSizeOptions    | 数据条数选择器的选项列表 |         `number[]`       | [10, 20, 30, 40, 50] |
+|          simple          |    是否为简单分页       |         `boolean`        |        false         |
+|         showJumper       |    是否显示页码跳转     |         `boolean`        |        false         |
+|         showTotal        |     是否显示总分页数    |         `boolean`        |        false         |
+|        showPageSize      |  是否显示数据条数选择器  |         `boolean`        |        false         |
+|          size            |         组件尺寸        |    `'s'｜'m'｜'l'｜'xl'` |         'l'          |
+|       onChange           |      页码改变时触发     |  `(page: number, pageSize: number) => void`  | - |
+|     pageSizeChange       |    数据条数改变时触发    |   `(size: number) => void`                  | - |

packages/yike-design/src/components/pagination/PageJump/index.scss

@@ -0,0 +1,47 @@
+@import '../../../styles/tokens/color';
+@import '../../../styles/color/color';
+
+.yk-pagination-pagejump {
+  display: inline-flex;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+  width: 150px;
+  height: 36px;
+  font-size: 14px;
+
+  &__title {
+    padding: 0 10px;
+    line-height: 1;
+  }
+
+  &__container {
+    width: 100px;
+    height: 100%;
+    padding: 0 12px;
+    background-color: $background-color-4;
+    border: 1px solid $background-color-4;
+    border-radius: 8px;
+    transition: all 0.2s ease-in-out;
+
+    &:hover {
+      background-color: $background-color-2;
+      border-color: $color-blue;
+    }
+
+    &:focus-within {
+      background-color: $background-color-2;
+      border-color: $color-blue;
+    }
+
+    &__input {
+      width: 100%;
+      height: 100%;
+      background-color: transparent;
+      border: none;
+      border-radius: 8px;
+      outline: none;
+      transition: all 0.2s ease;
+    }
+  }
+}

packages/yike-design/src/components/pagination/PageJump/index.tsx

@@ -0,0 +1,36 @@
+import type React from 'react';
+import { useState } from 'react';
+import type { showjump } from './type';
+import { createCssScope } from '../../../utils/bem';
+import './index.scss';
+
+const PageJump: React.FC<showjump> = ({ onInputBlur }) => {
+  const [inpValue, setInpValue] = useState<string>('');
+
+  const bem = createCssScope('pagination-pagejump');
+
+  const handleInputBlur = (e: any) => {
+    if (onInputBlur && inpValue) {
+      onInputBlur(e.target.value);
+      setInpValue('');
+    }
+  };
+
+  return (
+    <div className={bem()}>
+      <span className={bem('title')}>前往</span>
+      <div className={bem('container')}>
+        <input
+          type="text"
+          value={inpValue}
+          className={bem('container__input')}
+          onBlur={handleInputBlur}
+          onChange={(e: any) => setInpValue(e.target.value)}
+        />
+      </div>
+      <span className={bem('title')}>页</span>
+    </div>
+  );
+};
+
+export default PageJump;

packages/yike-design/src/components/pagination/PageJump/type.ts

@@ -0,0 +1,5 @@
+type showjump = {
+  onInputBlur?: (e: string) => void;
+};
+
+export type { showjump };

packages/yike-design/src/components/pagination/PageSize/index.scss

@@ -0,0 +1,81 @@
+@import '../../../styles/tokens/color';
+
+.yk-pagination-pagesize {
+  position: relative;
+  height: 36px;
+  margin-left: 10px;
+
+  &__button {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 16px;
+    cursor: pointer;
+    background-color: $background-color-4;
+    border: none;
+    border-radius: 8px;
+
+    &__title {
+      margin-right: 8px;
+    }
+
+    &__icon {
+      height: 40%;
+      transition: all 0.3s;
+
+      &--reversal {
+        transition: all 0.2s;
+        transform: rotate(180deg);
+      }
+    }
+  }
+
+  &__dropdown {
+    position: absolute;
+    top: 48px;
+    left: 0;
+    z-index: 100;
+    box-sizing: border-box;
+    padding: 4px;
+    background-color: $background-color-2;
+    border-radius: 4px;
+    box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 16%);
+    opacity: 0;
+    transition: all 0.2s;
+
+    &::before {
+      position: absolute;
+      top: -16px;
+      left: calc(50% - 5px);
+      display: block;
+      width: 0;
+      height: 0;
+      content: '';
+      border: 8px solid transparent;
+      border-bottom: 8px solid $background-color-2;
+    }
+
+    &__item {
+      width: 100%;
+      min-width: 100px;
+      max-width: 150px;
+      padding: 0 12px;
+      overflow: hidden;
+      line-height: 32px;
+      cursor: pointer;
+      border-radius: 4px;
+
+      &:hover {
+        background-color: $background-color-3;
+      }
+    }
+  }
+
+  &__dropdown--show {
+    position: absolute;
+    z-index: 100;
+    opacity: 1;
+    transition: all 0.2s;
+    transform: translateY(5px);
+  }
+}