Skip to content

Commit b83a36b

Browse files
xiejay97xiejay97
committed
fix(ui): fix style of pagination
1 parent a922ff7 commit b83a36b

2 files changed

Lines changed: 116 additions & 153 deletions

File tree

‎packages/ui/src/components/pagination/Pagination.tsx‎

Lines changed: 116 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -87,139 +87,7 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
8787

8888
const [jumpValue, setJumpValue] = useState('');
8989
const lastPage = Math.max(Math.ceil(dTotal / pageSize), 1);
90-
91-
const totalNode = (() => {
92-
if (dCompose.includes('total')) {
93-
const range: [number, number] = [Math.min((active - 1) * pageSize + 1, dTotal), Math.min(active * pageSize, dTotal)];
94-
if (dCustomRender && dCustomRender.total) {
95-
return dCustomRender.total(range);
96-
} else {
97-
return (
98-
<div>
99-
{t('Pagination', 'Total')} {dTotal} {t('Pagination', 'items')}
100-
</div>
101-
);
102-
}
103-
}
104-
return null;
105-
})();
106-
107-
const [prevNode, pageNode, nextNode] = (() => {
108-
let [prevNode, nextNode]: [React.ReactNode, React.ReactNode] = [null, null];
109-
if (dCompose.includes('pages')) {
110-
prevNode = (
111-
<li
112-
{...getButtonRoleAttributes(() => {
113-
changeActive(active - 1);
114-
}, active === 1)}
115-
className={getClassName(`${dPrefix}pagination__button`, {
116-
'is-disabled': active === 1,
117-
[`${dPrefix}pagination__button--border`]: !(dCustomRender && dCustomRender.prev),
118-
})}
119-
title={t('Pagination', 'Previous page')}
120-
>
121-
{dCustomRender && dCustomRender.prev ? dCustomRender.prev : <LeftOutlined />}
122-
</li>
123-
);
124-
125-
nextNode = (
126-
<li
127-
{...getButtonRoleAttributes(() => {
128-
changeActive(active + 1);
129-
}, active === lastPage)}
130-
className={getClassName(`${dPrefix}pagination__button`, {
131-
'is-disabled': active === lastPage,
132-
[`${dPrefix}pagination__button--border`]: !(dCustomRender && dCustomRender.next),
133-
})}
134-
style={{ marginRight: dCompose[dCompose.length - 1] === 'pages' ? 0 : `var(--${dPrefix}pagination-space)` }}
135-
title={t('Pagination', 'Next page')}
136-
>
137-
{dCustomRender && dCustomRender.next ? dCustomRender.next : <RightOutlined />}
138-
</li>
139-
);
140-
}
141-
return [
142-
prevNode,
143-
(page: number) => {
144-
if (dCustomRender && dCustomRender.page) {
145-
return dCustomRender.page(page);
146-
} else {
147-
return <div>{page}</div>;
148-
}
149-
},
150-
nextNode,
151-
];
152-
})();
153-
154-
const pageSizeNode = (() => {
155-
const list = dPageSizeList.map((size) => ({
156-
label: size.toString(),
157-
value: size,
158-
}));
159-
160-
return (
161-
<DSelect
162-
key="page-size"
163-
className={`${dPrefix}pagination__page-size`}
164-
style={{ marginRight: dCompose[dCompose.length - 1] === 'page-size' ? 0 : undefined }}
165-
dList={list}
166-
dModel={pageSize}
167-
dCustomItem={(item) => (dCustomRender && dCustomRender.pageSize ? dCustomRender.pageSize(item.value) : item.label)}
168-
dCustomSelected={(select) => `${select.label}${t('Pagination', ' / Page')}`}
169-
onModelChange={(value) => {
170-
if (!isNull(value)) {
171-
changePageSize(value);
172-
}
173-
}}
174-
/>
175-
);
176-
})();
177-
178-
const jumpNode = (() => {
179-
if (dCompose.includes('jump')) {
180-
const jumpInput = (
181-
<DInput
182-
className={`${dPrefix}pagination__jump-input`}
183-
dType="number"
184-
dMax={lastPage}
185-
dMin={1}
186-
dStep={1}
187-
dModel={jumpValue}
188-
dNumbetButton={!dMini}
189-
dInputRender={(el) =>
190-
cloneHTMLElement(el, {
191-
onKeyDown: (e) => {
192-
el.props.onKeyDown?.(e);
193-
194-
if (e.code === 'Enter') {
195-
e.preventDefault();
196-
197-
const val = Number(jumpValue);
198-
if (!isNaN(val)) {
199-
changeActive(val);
200-
}
201-
}
202-
},
203-
})
204-
}
205-
onModelChange={setJumpValue}
206-
/>
207-
);
208-
209-
if (dCustomRender && dCustomRender.jump) {
210-
return dCustomRender.jump(jumpInput);
211-
} else {
212-
return (
213-
<>
214-
<span>{t('Pagination', 'Go')}</span>
215-
{jumpInput}
216-
<span>{t('Pagination', 'Page')}</span>
217-
</>
218-
);
219-
}
220-
}
221-
return null;
222-
})();
90+
const paginationSpace = dMini ? 8 : 16;
22391

22492
return (
22593
<nav
@@ -232,20 +100,64 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
232100
role="navigation"
233101
aria-label={restProps['aria-label'] ?? 'Pagination Navigation'}
234102
>
235-
{dCompose.map((item) => {
103+
{dCompose.map((item, index) => {
236104
if (item === 'total') {
105+
const totalNode = (() => {
106+
const range: [number, number] = [Math.min((active - 1) * pageSize + 1, dTotal), Math.min(active * pageSize, dTotal)];
107+
if (dCustomRender && dCustomRender.total) {
108+
return dCustomRender.total(range);
109+
} else {
110+
return (
111+
<div>
112+
{t('Pagination', 'Total')} {dTotal} {t('Pagination', 'items')}
113+
</div>
114+
);
115+
}
116+
})();
117+
237118
return (
238-
<div
239-
key="total"
240-
className={`${dPrefix}pagination__total`}
241-
style={{ marginRight: dCompose[dCompose.length - 1] === 'total' ? 0 : undefined }}
242-
>
119+
<div key="total" className={`${dPrefix}pagination__total`} style={{ marginLeft: index === 0 ? undefined : paginationSpace }}>
243120
{totalNode}
244121
</div>
245122
);
246123
}
247124

248125
if (item === 'pages') {
126+
const [prevNode, pageNode, nextNode] = [
127+
<li
128+
{...getButtonRoleAttributes(() => {
129+
changeActive(active - 1);
130+
}, active === 1)}
131+
className={getClassName(`${dPrefix}pagination__button`, {
132+
'is-disabled': active === 1,
133+
[`${dPrefix}pagination__button--border`]: !(dCustomRender && dCustomRender.prev),
134+
})}
135+
style={{ marginLeft: index === 0 ? undefined : paginationSpace }}
136+
title={t('Pagination', 'Previous page')}
137+
>
138+
{dCustomRender && dCustomRender.prev ? dCustomRender.prev : <LeftOutlined />}
139+
</li>,
140+
(page: number) => {
141+
if (dCustomRender && dCustomRender.page) {
142+
return dCustomRender.page(page);
143+
} else {
144+
return <div>{page}</div>;
145+
}
146+
},
147+
<li
148+
{...getButtonRoleAttributes(() => {
149+
changeActive(active + 1);
150+
}, active === lastPage)}
151+
className={getClassName(`${dPrefix}pagination__button`, {
152+
'is-disabled': active === lastPage,
153+
[`${dPrefix}pagination__button--border`]: !(dCustomRender && dCustomRender.next),
154+
})}
155+
title={t('Pagination', 'Next page')}
156+
>
157+
{dCustomRender && dCustomRender.next ? dCustomRender.next : <RightOutlined />}
158+
</li>,
159+
];
160+
249161
let pages: (number | 'prev5' | 'next5')[] = [];
250162

251163
if (lastPage <= 7) {
@@ -370,16 +282,75 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
370282
}
371283

372284
if (item === 'page-size') {
373-
return pageSizeNode;
285+
const list = dPageSizeList.map((size) => ({
286+
label: size.toString(),
287+
value: size,
288+
}));
289+
290+
return (
291+
<DSelect
292+
key="page-size"
293+
className={`${dPrefix}pagination__page-size`}
294+
style={{ marginLeft: index === 0 ? undefined : paginationSpace }}
295+
dList={list}
296+
dModel={pageSize}
297+
dCustomItem={(item) => (dCustomRender && dCustomRender.pageSize ? dCustomRender.pageSize(item.value) : item.label)}
298+
dCustomSelected={(select) => `${select.label}${t('Pagination', ' / Page')}`}
299+
onModelChange={(value) => {
300+
if (!isNull(value)) {
301+
changePageSize(value);
302+
}
303+
}}
304+
/>
305+
);
374306
}
375307

376308
if (item === 'jump') {
309+
const jumpNode = (() => {
310+
const jumpInput = (
311+
<DInput
312+
className={`${dPrefix}pagination__jump-input`}
313+
dType="number"
314+
dMax={lastPage}
315+
dMin={1}
316+
dStep={1}
317+
dModel={jumpValue}
318+
dNumbetButton={!dMini}
319+
dInputRender={(el) =>
320+
cloneHTMLElement(el, {
321+
onKeyDown: (e) => {
322+
el.props.onKeyDown?.(e);
323+
324+
if (e.code === 'Enter') {
325+
e.preventDefault();
326+
327+
const val = Number(jumpValue);
328+
if (!isNaN(val)) {
329+
changeActive(val);
330+
}
331+
}
332+
},
333+
})
334+
}
335+
onModelChange={setJumpValue}
336+
/>
337+
);
338+
339+
if (dCustomRender && dCustomRender.jump) {
340+
return dCustomRender.jump(jumpInput);
341+
} else {
342+
return (
343+
<>
344+
<span>{t('Pagination', 'Go')}</span>
345+
{jumpInput}
346+
<span>{t('Pagination', 'Page')}</span>
347+
</>
348+
);
349+
}
350+
})();
351+
377352
return (
378-
<div
379-
key="jump"
380-
className={`${dPrefix}pagination__jump`}
381-
style={{ marginRight: dCompose[dCompose.length - 1] === 'jump' ? 0 : undefined }}
382-
>
353+
<div key="jump" className={`${dPrefix}pagination__jump`} style={{ marginLeft: index === 0 ? undefined : paginationSpace }}>
383354
{jumpNode}
384355
</div>
385356
);

‎packages/ui/src/styles/components/pagination.scss‎

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,6 @@
22

33
@include b(pagination) {
44
--#{$rd-prefix}pagination-size: 32px;
5-
--#{$rd-prefix}pagination-space: 16px;
6-
--#{$rd-prefix}pagination-button-space: 8px;
75

86
display: flex;
97
flex-wrap: wrap;
@@ -29,8 +27,6 @@
2927

3028
@include m(mini) {
3129
--#{$rd-prefix}pagination-size: 24px;
32-
--#{$rd-prefix}pagination-space: 8px;
33-
--#{$rd-prefix}pagination-button-space: 2px;
3430

3531
@include polyfill-gap(4px, 2px);
3632

@@ -66,7 +62,6 @@
6662
position: relative;
6763
display: inline-flex;
6864
align-items: center;
69-
margin-right: var(--#{$rd-prefix}pagination-space);
7065
vertical-align: top;
7166
}
7267

@@ -77,7 +72,6 @@
7772
justify-content: center;
7873
min-width: var(--#{$rd-prefix}pagination-size);
7974
height: var(--#{$rd-prefix}pagination-size);
80-
margin-right: var(--#{$rd-prefix}pagination-button-space);
8175
vertical-align: top;
8276
cursor: pointer;
8377
user-select: none;
@@ -152,7 +146,6 @@
152146
@include e(page-size) {
153147
@include overwrite-component(select) {
154148
width: auto;
155-
margin-right: var(--#{$rd-prefix}pagination-space);
156149
font-size: inherit;
157150
}
158151
}
@@ -161,7 +154,6 @@
161154
position: relative;
162155
display: inline-flex;
163156
align-items: center;
164-
margin-right: var(--#{$rd-prefix}pagination-space);
165157
vertical-align: top;
166158
}
167159

0 commit comments

Comments
 (0)