ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(pagination): extract nav list template to reuse in derived component

Browse source
This commit is contained in:
Hardik Pithva 2020-09-28 17:40:07 +02:00 committed by Thomas Allmer
parent b06c85bbb4
commit bcc809b6bb
2 changed files with 29 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/lucky-otters-appear.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/pagination': patch
---
fix(pagination): extract nav list template to reuse in derived component

27
packages/pagination/src/LionPagination.js
View file

@ -264,14 +264,13 @@ export class LionPagination extends LocalizeMixin(LitElement) {
`;
}
render() {
return html`
<nav role="navigation" aria-label="${this.msgLit('lion-pagination:label')}">
<ul>
${this.current > 1
? this._prevNextButtonTemplate('previous', this.current - 1)
: this._disabledButtonTemplate('previous')}
${this.__calculateNavList().map(page =>
/**
* Render navigation list
* @returns {TemplateResult} nav list template
* @protected
*/
_renderNavList() {
return this.__calculateNavList().map(page =>
page === '...'
? html` <li><span>${page}</span></li> `
: html`
@ -285,7 +284,17 @@ export class LionPagination extends LocalizeMixin(LitElement) {
</button>
</li>
`,
)}
);
}
render() {
return html`
<nav role="navigation" aria-label="${this.msgLit('lion-pagination:label')}">
<ul>
${this.current > 1
? this._prevNextButtonTemplate('previous', this.current - 1)
: this._disabledButtonTemplate('previous')}
${this._renderNavList()}
${this.current < this.count
? this._prevNextButtonTemplate('next', this.current + 1)
: this._disabledButtonTemplate('next')}