Skip to content

Commit 8f3e623

Browse files
thetaPCthetaPC
committed
refactor(select): cleanup
1 parent 5415cad commit 8f3e623

5 files changed

Lines changed: 23 additions & 67 deletions

File tree

‎core/src/components/select-modal/select-modal.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -93,9 +93,9 @@ export class SelectModal implements ComponentInterface {
9393

9494
return (
9595
<ion-radio-group value={checked} onIonChange={(ev) => this.callOptionHandler(ev)}>
96-
{this.options.map((option) => {
96+
{this.options.map((option, index) => {
9797
const optionLabelOptions = {
98-
id: option.value,
98+
id: `modal-option-${index}`,
9999
label: option.text,
100100
startContent: option.startContent,
101101
endContent: option.endContent,
@@ -138,9 +138,9 @@ export class SelectModal implements ComponentInterface {
138138
}
139139

140140
private renderCheckboxOptions() {
141-
return this.options.map((option) => {
141+
return this.options.map((option, index) => {
142142
const optionLabelOptions = {
143-
id: option.value,
143+
id: `modal-option-${index}`,
144144
label: option.text,
145145
startContent: option.startContent,
146146
endContent: option.endContent,

‎core/src/components/select-popover/select-popover.common.scss‎

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -25,29 +25,6 @@ ion-label {
2525
// Select Popover: Select Option
2626
// --------------------------------------------------
2727

28-
.select-option-label {
29-
display: flex;
30-
31-
align-items: center;
32-
gap: 8px;
33-
}
34-
35-
.select-option-content {
36-
flex: 1;
37-
}
38-
39-
.select-option-description {
40-
@include padding(5px, 0, 0, 0);
41-
display: block;
42-
43-
color: $text-color-step-300;
44-
45-
font-size: dynamic-font(12px);
46-
}
47-
48-
// Select Popover: Select Option
49-
// --------------------------------------------------
50-
5128
.select-option-label {
5229
display: flex;
5330

‎core/src/components/select-popover/select-popover.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -120,9 +120,9 @@ export class SelectPopover implements ComponentInterface {
120120
}
121121

122122
renderCheckboxOptions(options: SelectPopoverOption[]) {
123-
return options.map((option) => {
123+
return options.map((option, index) => {
124124
const optionLabelOptions = {
125-
id: option.value,
125+
id: `popover-option-${index}`,
126126
label: option.text,
127127
startContent: option.startContent,
128128
endContent: option.endContent,
@@ -162,9 +162,9 @@ export class SelectPopover implements ComponentInterface {
162162

163163
return (
164164
<ion-radio-group value={checked} onIonChange={(ev) => this.callOptionHandler(ev)}>
165-
{options.map((option) => {
165+
{options.map((option, index) => {
166166
const optionLabelOptions = {
167-
id: option.value,
167+
id: `popover-option-${index}`,
168168
label: option.text,
169169
startContent: option.startContent,
170170
endContent: option.endContent,

‎core/src/components/select/test/basic/index.html‎

Lines changed: 7 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -57,11 +57,7 @@
5757
</ion-avatar>
5858
Apples
5959
<span class="span-style">This is a span element</span>
60-
<img
61-
class="native-img"
62-
slot="end"
63-
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROhIbd8_083utRrpK3fPB3DEJG3kT_NuZtUA&s"
64-
/>
60+
<ion-badge slot="end">NEW</ion-badge>
6561
</ion-select-option>
6662
<ion-select-option value="oranges">Oranges</ion-select-option>
6763
<ion-select-option value="pears">Pears</ion-select-option>
@@ -76,11 +72,7 @@
7672
</ion-avatar>
7773
Apples
7874
<span class="span-style">This is a span element</span>
79-
<img
80-
class="native-img"
81-
slot="end"
82-
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROhIbd8_083utRrpK3fPB3DEJG3kT_NuZtUA&s"
83-
/>
75+
<ion-badge slot="end">NEW</ion-badge>
8476
</ion-select-option>
8577
<ion-select-option value="oranges">Oranges</ion-select-option>
8678
<ion-select-option value="pears">Pears</ion-select-option>
@@ -95,11 +87,7 @@
9587
</ion-avatar>
9688
Apples
9789
<span class="span-style">This is a span element</span>
98-
<img
99-
class="native-img"
100-
slot="end"
101-
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROhIbd8_083utRrpK3fPB3DEJG3kT_NuZtUA&s"
102-
/>
90+
<ion-badge slot="end">NEW</ion-badge>
10391
</ion-select-option>
10492
<ion-select-option value="oranges">Oranges</ion-select-option>
10593
<ion-select-option value="pears">Pears</ion-select-option>
@@ -114,11 +102,7 @@
114102
</ion-avatar>
115103
Apples
116104
<span class="span-style">This is a span element</span>
117-
<img
118-
class="native-img"
119-
slot="end"
120-
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROhIbd8_083utRrpK3fPB3DEJG3kT_NuZtUA&s"
121-
/>
105+
<ion-badge slot="end">NEW</ion-badge>
122106
</ion-select-option>
123107
<ion-select-option value="oranges">Oranges</ion-select-option>
124108
<ion-select-option value="pears">Pears</ion-select-option>
@@ -302,11 +286,7 @@
302286
</ion-avatar>
303287
Pepperoni
304288
<span class="span-style">This is a span element</span>
305-
<img
306-
class="native-img"
307-
slot="end"
308-
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROhIbd8_083utRrpK3fPB3DEJG3kT_NuZtUA&s"
309-
/>
289+
<ion-badge slot="end">NEW</ion-badge>
310290
</ion-select-option>
311291
<ion-select-option value="bacon">Bacon</ion-select-option>
312292
<ion-select-option value="xcheese">Extra Cheese</ion-select-option>
@@ -323,11 +303,7 @@
323303
</ion-avatar>
324304
Bird
325305
<span class="span-style">This is a span element</span>
326-
<img
327-
class="native-img"
328-
slot="end"
329-
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROhIbd8_083utRrpK3fPB3DEJG3kT_NuZtUA&s"
330-
/>
306+
<ion-badge slot="end">NEW</ion-badge>
331307
</ion-select-option>
332308
<ion-select-option value="cat">Cat</ion-select-option>
333309
<ion-select-option value="dog">Dog</ion-select-option>
@@ -343,11 +319,7 @@
343319
</ion-avatar>
344320
Bird
345321
<span class="span-style">This is a span element</span>
346-
<img
347-
class="native-img"
348-
slot="end"
349-
src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcROhIbd8_083utRrpK3fPB3DEJG3kT_NuZtUA&s"
350-
/>
322+
<ion-badge slot="end">NEW</ion-badge>
351323
</ion-select-option>
352324
<ion-select-option value="cat">Cat</ion-select-option>
353325
<ion-select-option value="dog">Dog</ion-select-option>

‎core/src/utils/select-option-render.tsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,20 @@ export interface RichContentOption {
88
description?: string;
99
}
1010

11+
const contentCache = new WeakMap<HTMLElement, HTMLElement>();
12+
1113
const renderClonedContent = (id: string, content: HTMLElement, className: string) => (
1214
<span
1315
class={className}
1416
key={`${className}-${id}`}
1517
ref={(el) => {
16-
if (el && !el.hasChildNodes()) {
18+
if (el) {
19+
const cached = contentCache.get(el);
20+
if (cached === content) return;
21+
22+
el.innerHTML = '';
1723
Array.from(content.childNodes).forEach((n) => el.appendChild(n.cloneNode(true)));
24+
contentCache.set(el, content);
1825
}
1926
}}
2027
></span>

0 commit comments

Comments
 (0)