Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-09 15:05:44 +01:00
Code Issues Packages Projects Releases Activity

render next and previous button small if they mark the previous and next page number

Browse Source
This commit is contained in:
Maren Süwer
2019-01-22 10:28:50 +01:00
parent 0d9c35bcba
commit cd66549495
1 changed files with 8 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
scm-ui-components/packages/ui-components/src/LinkPaginator.js
View File

@@ -25,13 +25,13 @@ class LinkPaginator extends React.Component<Props> {
); );
} }
renderPreviousButton(label?: string) { renderPreviousButton(className: string, label?: string) {
const { page } = this.props; const { page } = this.props;
const previousPage = page - 1; const previousPage = page - 1;
return ( return (
<Button <Button
className={"pagination-previous"} className={className}
label={label ? label : previousPage.toString()} label={label ? label : previousPage.toString()}
disabled={!this.hasLink("prev")} disabled={!this.hasLink("prev")}
link={`${previousPage}`} link={`${previousPage}`}
@@ -44,12 +44,12 @@ class LinkPaginator extends React.Component<Props> {
return collection._links[name]; return collection._links[name];
} }
renderNextButton(label?: string) { renderNextButton(className: string, label?: string) {
const { page } = this.props; const { page } = this.props;
const nextPage = page + 1; const nextPage = page + 1;
return ( return (
<Button <Button
className={"pagination-next"} className={className}
label={label ? label : nextPage.toString()} label={label ? label : nextPage.toString()}
disabled={!this.hasLink("next")} disabled={!this.hasLink("next")}
link={`${nextPage}`} link={`${nextPage}`}
@@ -96,13 +96,13 @@ class LinkPaginator extends React.Component<Props> {
links.push(this.separator()); links.push(this.separator());
} }
if (page > 2) { if (page > 2) {
links.push(this.renderPreviousButton()); links.push(this.renderPreviousButton("pagination-link"));
} }
links.push(this.currentPage(page)); links.push(this.currentPage(page));
if (page + 1 < pageTotal) { if (page + 1 < pageTotal) {
links.push(this.renderNextButton()); links.push(this.renderNextButton("pagination-link"));
} }
if (page + 2 < pageTotal) if (page + 2 < pageTotal)
//if there exists pages between next and last //if there exists pages between next and last
@@ -118,13 +118,13 @@ class LinkPaginator extends React.Component<Props> {
const { t } = this.props; const { t } = this.props;
return ( return (
<nav className="pagination is-centered" aria-label="pagination"> <nav className="pagination is-centered" aria-label="pagination">
{this.renderPreviousButton(t("paginator.previous"))} {this.renderPreviousButton("pagination-previous", t("paginator.previous"))}
<ul className="pagination-list"> <ul className="pagination-list">
{this.pageLinks().map((link, index) => { {this.pageLinks().map((link, index) => {
return <li key={index}>{link}</li>; return <li key={index}>{link}</li>;
})} })}
</ul> </ul>
{this.renderNextButton(t("paginator.next"))} {this.renderNextButton("pagination-next", t("paginator.next"))}
</nav> </nav>
); );
} }