Skip to content

Commit

Permalink
fix(ui): fix style of pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
@xiejay97
xiejay97 committed Mar 13, 2023
1 parent a922ff7 commit b83a36b
Show file tree
Hide file tree
Showing 2 changed files with 116 additions and 153 deletions.
261 changes: 116 additions & 145 deletions packages/ui/src/components/pagination/Pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,139 +87,7 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {

const [jumpValue, setJumpValue] = useState('');
const lastPage = Math.max(Math.ceil(dTotal / pageSize), 1);

const totalNode = (() => {
if (dCompose.includes('total')) {
const range: [number, number] = [Math.min((active - 1) * pageSize + 1, dTotal), Math.min(active * pageSize, dTotal)];
if (dCustomRender && dCustomRender.total) {
return dCustomRender.total(range);
} else {
return (
<div>
{t('Pagination', 'Total')} {dTotal} {t('Pagination', 'items')}
</div>
);
}
}
return null;
})();

const [prevNode, pageNode, nextNode] = (() => {
let [prevNode, nextNode]: [React.ReactNode, React.ReactNode] = [null, null];
if (dCompose.includes('pages')) {
prevNode = (
<li
{...getButtonRoleAttributes(() => {
changeActive(active - 1);
}, active === 1)}
className={getClassName(`${dPrefix}pagination__button`, {
'is-disabled': active === 1,
[`${dPrefix}pagination__button--border`]: !(dCustomRender && dCustomRender.prev),
})}
title={t('Pagination', 'Previous page')}
>
{dCustomRender && dCustomRender.prev ? dCustomRender.prev : <LeftOutlined />}
</li>
);

nextNode = (
<li
{...getButtonRoleAttributes(() => {
changeActive(active + 1);
}, active === lastPage)}
className={getClassName(`${dPrefix}pagination__button`, {
'is-disabled': active === lastPage,
[`${dPrefix}pagination__button--border`]: !(dCustomRender && dCustomRender.next),
})}
style={{ marginRight: dCompose[dCompose.length - 1] === 'pages' ? 0 : `var(--${dPrefix}pagination-space)` }}
title={t('Pagination', 'Next page')}
>
{dCustomRender && dCustomRender.next ? dCustomRender.next : <RightOutlined />}
</li>
);
}
return [
prevNode,
(page: number) => {
if (dCustomRender && dCustomRender.page) {
return dCustomRender.page(page);
} else {
return <div>{page}</div>;
}
},
nextNode,
];
})();

const pageSizeNode = (() => {
const list = dPageSizeList.map((size) => ({
label: size.toString(),
value: size,
}));

return (
<DSelect
key="page-size"
className={`${dPrefix}pagination__page-size`}
style={{ marginRight: dCompose[dCompose.length - 1] === 'page-size' ? 0 : undefined }}
dList={list}
dModel={pageSize}
dCustomItem={(item) => (dCustomRender && dCustomRender.pageSize ? dCustomRender.pageSize(item.value) : item.label)}
dCustomSelected={(select) => `${select.label}${t('Pagination', ' / Page')}`}
onModelChange={(value) => {
if (!isNull(value)) {
changePageSize(value);
}
}}
/>
);
})();

const jumpNode = (() => {
if (dCompose.includes('jump')) {
const jumpInput = (
<DInput
className={`${dPrefix}pagination__jump-input`}
dType="number"
dMax={lastPage}
dMin={1}
dStep={1}
dModel={jumpValue}
dNumbetButton={!dMini}
dInputRender={(el) =>
cloneHTMLElement(el, {
onKeyDown: (e) => {
el.props.onKeyDown?.(e);

if (e.code === 'Enter') {
e.preventDefault();

const val = Number(jumpValue);
if (!isNaN(val)) {
changeActive(val);
}
}
},
})
}
onModelChange={setJumpValue}
/>
);

if (dCustomRender && dCustomRender.jump) {
return dCustomRender.jump(jumpInput);
} else {
return (
<>
<span>{t('Pagination', 'Go')}</span>
{jumpInput}
<span>{t('Pagination', 'Page')}</span>
</>
);
}
}
return null;
})();
const paginationSpace = dMini ? 8 : 16;

return (
<nav
Expand All @@ -232,20 +100,64 @@ export function DPagination(props: DPaginationProps): JSX.Element | null {
role="navigation"
aria-label={restProps['aria-label'] ?? 'Pagination Navigation'}
>
{dCompose.map((item) => {
{dCompose.map((item, index) => {
if (item === 'total') {
const totalNode = (() => {
const range: [number, number] = [Math.min((active - 1) * pageSize + 1, dTotal), Math.min(active * pageSize, dTotal)];
if (dCustomRender && dCustomRender.total) {
return dCustomRender.total(range);
} else {
return (
<div>
{t('Pagination', 'Total')} {dTotal} {t('Pagination', 'items')}
</div>
);
}
})();

return (
<div
key="total"
className={`${dPrefix}pagination__total`}
style={{ marginRight: dCompose[dCompose.length - 1] === 'total' ? 0 : undefined }}
>
<div key="total" className={`${dPrefix}pagination__total`} style={{ marginLeft: index === 0 ? undefined : paginationSpace }}>
{totalNode}
</div>
);
}

if (item === 'pages') {
const [prevNode, pageNode, nextNode] = [
<li
{...getButtonRoleAttributes(() => {
changeActive(active - 1);
}, active === 1)}
className={getClassName(`${dPrefix}pagination__button`, {
'is-disabled': active === 1,
[`${dPrefix}pagination__button--border`]: !(dCustomRender && dCustomRender.prev),
})}
style={{ marginLeft: index === 0 ? undefined : paginationSpace }}
title={t('Pagination', 'Previous page')}
>
{dCustomRender && dCustomRender.prev ? dCustomRender.prev : <LeftOutlined />}
</li>,
(page: number) => {
if (dCustomRender && dCustomRender.page) {
return dCustomRender.page(page);
} else {
return <div>{page}</div>;
}
},
<li
{...getButtonRoleAttributes(() => {
changeActive(active + 1);
}, active === lastPage)}
className={getClassName(`${dPrefix}pagination__button`, {
'is-disabled': active === lastPage,
[`${dPrefix}pagination__button--border`]: !(dCustomRender && dCustomRender.next),
})}
title={t('Pagination', 'Next page')}
>
{dCustomRender && dCustomRender.next ? dCustomRender.next : <RightOutlined />}
</li>,
];

let pages: (number | 'prev5' | 'next5')[] = [];

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

if (item === 'page-size') {
return pageSizeNode;
const list = dPageSizeList.map((size) => ({
label: size.toString(),
value: size,
}));

return (
<DSelect
key="page-size"
className={`${dPrefix}pagination__page-size`}
style={{ marginLeft: index === 0 ? undefined : paginationSpace }}
dList={list}
dModel={pageSize}
dCustomItem={(item) => (dCustomRender && dCustomRender.pageSize ? dCustomRender.pageSize(item.value) : item.label)}
dCustomSelected={(select) => `${select.label}${t('Pagination', ' / Page')}`}
onModelChange={(value) => {
if (!isNull(value)) {
changePageSize(value);
}
}}
/>
);
}

if (item === 'jump') {
const jumpNode = (() => {
const jumpInput = (
<DInput
className={`${dPrefix}pagination__jump-input`}
dType="number"
dMax={lastPage}
dMin={1}
dStep={1}
dModel={jumpValue}
dNumbetButton={!dMini}
dInputRender={(el) =>
cloneHTMLElement(el, {
onKeyDown: (e) => {
el.props.onKeyDown?.(e);

if (e.code === 'Enter') {
e.preventDefault();

const val = Number(jumpValue);
if (!isNaN(val)) {
changeActive(val);
}
}
},
})
}
onModelChange={setJumpValue}
/>
);

if (dCustomRender && dCustomRender.jump) {
return dCustomRender.jump(jumpInput);
} else {
return (
<>
<span>{t('Pagination', 'Go')}</span>
{jumpInput}
<span>{t('Pagination', 'Page')}</span>
</>
);
}
})();

return (
<div
key="jump"
className={`${dPrefix}pagination__jump`}
style={{ marginRight: dCompose[dCompose.length - 1] === 'jump' ? 0 : undefined }}
>
<div key="jump" className={`${dPrefix}pagination__jump`} style={{ marginLeft: index === 0 ? undefined : paginationSpace }}>
{jumpNode}
</div>
);
Expand Down
8 changes: 0 additions & 8 deletions packages/ui/src/styles/components/pagination.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@

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

display: flex;
flex-wrap: wrap;
Expand All @@ -29,8 +27,6 @@

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

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

Expand Down Expand Up @@ -66,7 +62,6 @@
position: relative;
display: inline-flex;
align-items: center;
margin-right: var(--#{$rd-prefix}pagination-space);
vertical-align: top;
}

Expand All @@ -77,7 +72,6 @@
justify-content: center;
min-width: var(--#{$rd-prefix}pagination-size);
height: var(--#{$rd-prefix}pagination-size);
margin-right: var(--#{$rd-prefix}pagination-button-space);
vertical-align: top;
cursor: pointer;
user-select: none;
Expand Down Expand Up @@ -152,7 +146,6 @@
@include e(page-size) {
@include overwrite-component(select) {
width: auto;
margin-right: var(--#{$rd-prefix}pagination-space);
font-size: inherit;
}
}
Expand All @@ -161,7 +154,6 @@
position: relative;
display: inline-flex;
align-items: center;
margin-right: var(--#{$rd-prefix}pagination-space);
vertical-align: top;
}

Expand Down

0 comments on commit b83a36b

Please sign in to comment.