From 2f1b55d7399b2eb2f8ae42c90bb369ee0fabb1bc Mon Sep 17 00:00:00 2001
From: Galbrain <daniel@adornis.de>
Date: Fri, 29 Nov 2024 12:11:28 +0000
Subject: [PATCH] feat: add virtualization for x-country-picker
---
.../language-picker/x-country-picker.ts | 24 ++++++++++++-------
1 file changed, 16 insertions(+), 8 deletions(-)
diff --git a/modules/internationalization/client/language-picker/x-country-picker.ts b/modules/internationalization/client/language-picker/x-country-picker.ts
index 8f83f3eeed..5d5fa4327d 100644
--- a/modules/internationalization/client/language-picker/x-country-picker.ts
+++ b/modules/internationalization/client/language-picker/x-country-picker.ts
@@ -1,6 +1,7 @@
import { type Maybe } from '@adornis/base/utilTypes.js';
import { RXController } from '@adornis/chemistry/controllers/RXController.js';
import { css } from '@adornis/chemistry/directives/css.js';
+import { virtualize } from '@adornis/chemistry/directives/when-seen.js';
import '@adornis/chemistry/elements/components/x-button.js';
import '@adornis/chemistry/elements/components/x-card.js';
import '@adornis/chemistry/elements/components/x-flex.js';
@@ -44,7 +45,7 @@ export class XCountryPicker extends XDropdownSearchSelection<[string, string, st
);
@property({ type: Boolean, reflect: true }) showflag = false;
@property({ type: Number }) flagsize = 30;
- @property({ type: Number }) 'max-results' = 8;
+ @property({ type: Number, attribute: 'max-results' }) maxResults: number | undefined = undefined;
override search = input =>
Object.entries(this.allCountries.value ?? {})
.filter(([key, val]) => {
@@ -53,14 +54,21 @@ export class XCountryPicker extends XDropdownSearchSelection<[string, string, st
.map(([key, val]) => {
return [key, val, this.showflag ? getFlagByLangAbbreviation(key) : ''] as [string, string, string];
})
- .slice(0, this['max-results']);
+ .slice(0, this.maxResults);
+
override renderItem = ([short, country, flag]) => html`
- <x-flex horizontal crossaxis-center padding="sm" space="sm" ${css({ cursor: 'pointer', userSelect: 'none' })}>
- ${flag
- ? html` <img ${css({ width: this.flagsize + 'px', height: this.flagsize / 1.5 + 'px' })} src="${flag}" /> `
- : nothing}
- <x-text> ${country} </x-text>
- </x-flex>
+ ${virtualize(
+ html`
+ <x-flex horizontal crossaxis-center padding="sm" space="sm" ${css({ cursor: 'pointer', userSelect: 'none' })}>
+ ${flag
+ ? html` <img ${css({ width: this.flagsize + 'px', height: this.flagsize / 1.5 + 'px' })} src="${flag}" /> `
+ : nothing}
+ <x-text> ${country} </x-text>
+ </x-flex>
+ `,
+ oldHeight => html` <div ${css({ height: `${oldHeight}px` })}></div> `,
+ { wrapperDisplayContents: true },
+ )}
`;
override renderSelected = (selected: Maybe<string>) => {
if (selected) return this.allCountries.value?.[selected] || '';
--
GitLab