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