Skip to content

Commit d6114c2

Browse files
SunLxySunLxy
committed
refactor(pagination):重构分页(#845)
1 parent 8c92bf3 commit d6114c2

File tree

6 files changed

+394
-140
lines changed

6 files changed

+394
-140
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,8 @@
1717
"watch:react-menu": "lerna exec --scope @uiw/react-menu -- tsbb watch",
1818
"watch:css:react-menu": "lerna exec --scope @uiw/react-menu -- compile-less -d src -o esm --watch",
1919
"watch": "lerna exec --scope @uiw/react-menu -- tsbb watch",
20-
"watch2": "lerna exec --scope @uiw/react-button-group -- tsbb watch",
21-
"watch:css": "lerna exec --scope @uiw/react-menu -- compile-less -d src -o esm --watch",
20+
"watch2": "lerna exec --scope @uiw/react-pagination -- tsbb watch",
21+
"watch:css": "lerna exec --scope @uiw/react-pagination -- compile-less -d src -o esm --watch",
2222
"//-----------": "//-----------",
2323
"build": "npm run b:uiw && npm run b:css && npm run b:css:dist",
2424
"start": "lerna exec --scope website -- npm run start",

‎packages/react-pagination/README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import Pagination from '@uiw/react-pagination';
1515

1616
### 基本用法
1717

18-
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
18+
```jsx mdx:preview&background=transparent&codeSandbox=true&codePen=true
1919
import React from 'react';
2020
import { Pagination, Divider } from 'uiw';
2121

@@ -57,7 +57,7 @@ export default Demo
5757

5858
### 迷你分页
5959

60-
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
60+
```jsx mdx:preview&background=transparent&codeSandbox=true&codePen=true
6161
import React from 'react';
6262
import { Pagination, Divider } from 'uiw';
6363

@@ -75,7 +75,7 @@ export default Demo
7575

7676
目前有三种对齐方式 `左边(left)`、`中间(center)`、`右边(right)`。
7777

78-
```jsx mdx:preview&background=#fff&codeSandbox=true&codePen=true
78+
```jsx mdx:preview&background=transparent&codeSandbox=true&codePen=true
7979
import React from 'react';
8080
import { Pagination, Divider } from 'uiw';
8181

‎packages/react-pagination/src/index.tsx

Lines changed: 28 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React, { useEffect, useMemo, useState } from 'react';
22
import Select from '@uiw/react-select';
33
import { IProps, HTMLUlProps } from '@uiw/utils';
44
import './style/index.less';
5+
import { PaginationBaseUL, PaginationBaseLI, PaginationBaseLIA } from './style';
56

67
export interface PaginationProps extends IProps, Omit<HTMLUlProps, 'onChange'> {
78
prefixCls?: string;
@@ -135,16 +136,35 @@ export default function Pagination(props: PaginationProps) {
135136
};
136137

137138
return (
138-
<ul className={cls} style={{ ...style, textAlign: alignment }} {...other}>
139+
<PaginationBaseUL
140+
className={cls}
141+
style={{ ...style, textAlign: alignment }}
142+
{...other}
143+
params={{
144+
isDivider: divider,
145+
size,
146+
}}
147+
>
139148
{initPageSoure.map((item: PaginationItemSourceData, idx) => {
140149
// eslint-disable-next-line jsx-a11y/anchor-is-valid
141-
let label = <a>{item.label}</a>;
150+
let label = <PaginationBaseLIA params={{ size }}>{item.label}</PaginationBaseLIA>;
142151
if (/^(prev|next)$/.test(item.type as string)) {
143152
// eslint-disable-next-line jsx-a11y/anchor-is-valid
144-
label = <a className={`arrow ${item.type}`} />;
153+
label = (
154+
<PaginationBaseLIA
155+
params={{ type: item.type, isArrow: true, size, disabled: item.disabled }}
156+
className={`arrow ${item.type}`}
157+
/>
158+
);
145159
}
146160
return (
147-
<li
161+
<PaginationBaseLI
162+
params={{
163+
disabled: item.disabled,
164+
active: item.active,
165+
size,
166+
isDivider: divider,
167+
}}
148168
className={[item.active ? 'active' : null, item.disabled ? 'disabled' : null]
149169
.filter(Boolean)
150170
.join(' ')
@@ -153,20 +173,20 @@ export default function Pagination(props: PaginationProps) {
153173
key={idx}
154174
>
155175
{label}
156-
</li>
176+
</PaginationBaseLI>
157177
);
158178
})}
159179
{pageSizeOptions.length > 0 && (
160-
<li className={`${prefixCls}-options`}>
180+
<PaginationBaseLI params={{ isOptions: true, size }} className={`${prefixCls}-options`}>
161181
<Select size={size} defaultValue={pageSize} onChange={onSizeChange}>
162182
{pageSizeOptions.map((item: number, index: number) => (
163183
<Select.Option value={item} key={index}>
164184
{item}条/页
165185
</Select.Option>
166186
))}
167187
</Select>
168-
</li>
188+
</PaginationBaseLI>
169189
)}
170-
</ul>
190+
</PaginationBaseUL>
171191
);
172192
}

‎packages/react-pagination/src/style/index.less

Lines changed: 122 additions & 127 deletions
Original file line numberDiff line numberDiff line change
@@ -1,133 +1,128 @@
11
@pagination-prefix: ~'w-pagination';
22

33
.@{pagination-prefix} {
4-
padding: 0 !important;
5-
margin: 0 !important;
6-
position: relative;
7-
user-select: none;
8-
font-size: 12px;
9-
&-left {
10-
text-align: left;
11-
}
12-
&-center {
13-
text-align: center;
14-
}
15-
&-right {
16-
text-align: right;
17-
}
4+
// &-left {
5+
// text-align: left;
6+
// }
7+
// &-center {
8+
// text-align: center;
9+
// }
10+
// &-right {
11+
// text-align: right;
12+
// }
1813
> li {
19-
height: 28px;
20-
line-height: 28px;
21-
vertical-align: middle;
22-
text-align: center;
23-
position: relative;
24-
cursor: pointer;
25-
display: inline-flex !important;
26-
transition: background-color 0.2s ease-in, box-shadow 0.2s ease-in;
27-
margin: 0 !important;
28-
display: inline-flex;
29-
align-items: center;
30-
> a {
31-
text-decoration: none;
32-
color: rgba(0, 0, 0, 0.5);
33-
transition: none;
34-
margin: 0 10px;
35-
display: block;
36-
&.arrow {
37-
padding: 0 3px;
38-
}
39-
&.arrow::after,
40-
&.arrow::before {
41-
content: '';
42-
display: block;
43-
height: 8px;
44-
width: 2px;
45-
border-radius: 2px;
46-
background-color: #565656;
47-
transition: all 0.3s;
48-
}
49-
&.arrow::after {
50-
margin-top: -4px;
51-
}
52-
&.arrow.prev::after,
53-
&.arrow.next::before {
54-
transform: rotate(-45deg);
55-
}
56-
&.arrow.prev::before,
57-
&.arrow.next::after {
58-
transform: rotate(45deg);
59-
}
60-
}
61-
&.disabled {
62-
cursor: not-allowed;
63-
> a {
64-
&.arrow::after,
65-
&.arrow::before {
66-
background: #d4d4d4;
67-
}
68-
}
69-
}
70-
}
71-
&.small > li {
72-
height: 21px;
73-
line-height: 21px;
74-
border-radius: 4px;
75-
> a {
76-
margin: 0 3px;
77-
min-width: 15px;
78-
&.arrow::after,
79-
&.arrow::before {
80-
margin-left: 6px;
81-
}
82-
}
83-
&.active {
84-
background-color: #ececec;
85-
}
86-
&:not(.active):hover a {
87-
color: #2ea3f4;
88-
}
89-
}
90-
&.default > li {
91-
background: #fff;
92-
border: 1px solid #d4d4d4;
93-
border-left: 0;
94-
&:not(.disabled):not(.active):hover {
95-
background-color: #f6f6f6;
96-
}
97-
&:not(.disabled):active {
98-
box-shadow: inset 0 8px 42px -12px rgba(0, 0, 0, 0.2);
99-
}
100-
&:first-child {
101-
border-left: 1px solid #d4d4d4;
102-
border-radius: 3px 0 0 3px;
103-
}
104-
&:last-child {
105-
border-radius: 0 3px 3px 0;
106-
}
107-
&.active {
108-
background-color: #ececec;
109-
&:active {
110-
box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
111-
}
112-
}
113-
}
114-
&.default.divider {
115-
li + li {
116-
margin-left: 8px !important;
117-
border: 1px solid #d4d4d4;
118-
}
119-
li {
120-
border-radius: 4px;
121-
}
122-
}
123-
&-options {
124-
margin-left: 8px !important;
125-
.w-select {
126-
border: none !important;
127-
padding-top: 0;
128-
padding-bottom: 0;
129-
box-shadow: none !important;
130-
height: 100%;
131-
}
14+
// height: 28px;
15+
// line-height: 28px;
16+
// vertical-align: middle;
17+
// text-align: center;
18+
// position: relative;
19+
// cursor: pointer;
20+
// display: inline-flex !important;
21+
// transition: background-color 0.2s ease-in, box-shadow 0.2s ease-in;
22+
// margin: 0 !important;
23+
// display: inline-flex;
24+
// align-items: center;
25+
// > a {
26+
// text-decoration: none;
27+
// color: rgba(0, 0, 0, 0.5);
28+
// transition: none;
29+
// margin: 0 10px;
30+
// display: block;
31+
// &.arrow {
32+
// padding: 0 3px;
33+
// }
34+
// &.arrow::after,
35+
// &.arrow::before {
36+
// content: '';
37+
// display: block;
38+
// height: 8px;
39+
// width: 2px;
40+
// border-radius: 2px;
41+
// background-color: #565656;
42+
// transition: all 0.3s;
43+
// }
44+
// &.arrow::after {
45+
// margin-top: -4px;
46+
// }
47+
// &.arrow.prev::after,
48+
// &.arrow.next::before {
49+
// transform: rotate(-45deg);
50+
// }
51+
// &.arrow.prev::before,
52+
// &.arrow.next::after {
53+
// transform: rotate(45deg);
54+
// }
55+
// }
56+
// &.disabled {
57+
// cursor: not-allowed;
58+
// > a {
59+
// &.arrow::after,
60+
// &.arrow::before {
61+
// background: #d4d4d4;
62+
// }
63+
// }
64+
// }
13265
}
66+
// &.small > li {
67+
// height: 21px;
68+
// line-height: 21px;
69+
// border-radius: 4px;
70+
// > a {
71+
// margin: 0 3px;
72+
// min-width: 15px;
73+
// &.arrow::after,
74+
// &.arrow::before {
75+
// margin-left: 6px;
76+
// }
77+
// }
78+
// &.active {
79+
// background-color: #ececec;
80+
// }
81+
// &:not(.active):hover a {
82+
// color: #2ea3f4;
83+
// }
84+
// }
85+
// &.default > li {
86+
// background: #fff;
87+
// border: 1px solid #d4d4d4;
88+
// border-left: 0;
89+
// &:not(.disabled):not(.active):hover {
90+
// background-color: #f6f6f6;
91+
// }
92+
// &:not(.disabled):active {
93+
// box-shadow: inset 0 8px 42px -12px rgba(0, 0, 0, 0.2);
94+
// }
95+
// &:first-child {
96+
// border-left: 1px solid #d4d4d4;
97+
// border-radius: 3px 0 0 3px;
98+
// }
99+
// &:last-child {
100+
// border-radius: 0 3px 3px 0;
101+
// }
102+
// &.active {
103+
// background-color: #ececec;
104+
// &:active {
105+
// box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
106+
// }
107+
// }
108+
// }
109+
// &.default.divider {
110+
// li + li {
111+
// margin-left: 8px !important;
112+
// border: 1px solid #d4d4d4;
113+
// }
114+
// li {
115+
// border-radius: 4px;
116+
// }
117+
// }
118+
// &-options {
119+
// margin-left: 8px !important;
120+
// .w-select {
121+
// border: none !important;
122+
// padding-top: 0;
123+
// padding-bottom: 0;
124+
// box-shadow: none !important;
125+
// height: 100%;
126+
// }
127+
// }
133128
}

0 commit comments

Comments
 (0)