Skip to content

Commit 08300e2

Browse files
mapsandappsmapsandapps
authored
docs(radio): playground for compareWith (#3237)
1 parent 54317c1 commit 08300e2

File tree

10 files changed

+303
-2
lines changed

10 files changed

+303
-2
lines changed

‎docs/api/radio.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,14 @@ import LabelPlacement from '@site/static/usage/v7/radio/label-placement/index.md
3636

3737
<LabelPlacement />
3838

39+
## Object Value References
40+
41+
By default, the radio group uses strict equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.
42+
43+
import UsingComparewith from '@site/static/usage/v7/radio/using-comparewith/index.md';
44+
45+
<UsingComparewith />
46+
3947
## Alignment
4048

4149
Developers can use the `alignment` property to control how the label and control are aligned on the cross axis. This property mirrors the flexbox `align-items` property.

‎docs/api/select.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -119,7 +119,7 @@ import RespondingToInteractionExample from '@site/static/usage/v7/select/basic/r
119119

120120
When using objects for select values, it is possible for the identities of these objects to change if they are coming from a server or database, while the selected value's identity remains the same. For example, this can occur when an existing record with the desired object value is loaded into the select, but the newly retrieved select options now have different identities. This will result in the select appearing to have no value at all, even though the original selection in still intact.
121121

122-
By default, the select uses object equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.
122+
By default, the select uses strict equality (`===`) to determine if an option is selected. This can be overridden by providing a property name or a function to the `compareWith` property.
123123

124124
### Using compareWith
125125

‎static/usage/v7/radio/using-comparewith/angular/example_component_html.md

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
```html
2+
<ion-list>
3+
<ion-radio-group [compareWith]="compareWith" (ionChange)="handleChange($event)">
4+
<ion-item *ngFor="let food of foods; trackBy: trackItems">
5+
<ion-radio [value]="food">{{ food.name }}</ion-radio>
6+
</ion-item>
7+
</ion-radio-group>
8+
</ion-list>
9+
```

‎static/usage/v7/radio/using-comparewith/angular/example_component_ts.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
4+
@Component({
5+
selector: 'app-example',
6+
templateUrl: 'example.component.html',
7+
})
8+
export class ExampleComponent {
9+
foods = [
10+
{
11+
id: 1,
12+
name: 'Apples',
13+
type: 'fruit',
14+
},
15+
{
16+
id: 2,
17+
name: 'Carrots',
18+
type: 'vegetable',
19+
},
20+
{
21+
id: 3,
22+
name: 'Cupcakes',
23+
type: 'dessert',
24+
},
25+
];
26+
27+
compareWith(o1, o2) {
28+
return o1.id === o2.id;
29+
}
30+
31+
handleChange(ev) {
32+
console.log('Current value:', JSON.stringify(ev.target.value));
33+
}
34+
35+
trackItems(index: number, item: any) {
36+
return item.id;
37+
}
38+
}
39+
```

‎static/usage/v7/radio/using-comparewith/demo.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Radio</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
</head>
12+
13+
<body>
14+
<ion-app>
15+
<ion-content>
16+
<div class="container">
17+
<ion-list>
18+
<ion-radio-group></ion-radio-group>
19+
</ion-list>
20+
</div>
21+
</ion-content>
22+
</ion-app>
23+
24+
<script>
25+
const foods = [
26+
{
27+
id: 1,
28+
name: 'Apples',
29+
type: 'fruit',
30+
},
31+
{
32+
id: 2,
33+
name: 'Carrots',
34+
type: 'vegetable',
35+
},
36+
{
37+
id: 3,
38+
name: 'Cupcakes',
39+
type: 'dessert',
40+
},
41+
];
42+
43+
const compareWithFn = (o1, o2) => {
44+
return o1.id === o2.id;
45+
};
46+
47+
const radioGroupEl = document.querySelector('ion-radio-group');
48+
radioGroupEl.compareWith = (a, b) => a.value === b.value;
49+
50+
foods.forEach((option, i) => {
51+
const radio = document.createElement('ion-radio');
52+
53+
radio.value = option;
54+
radio.textContent = option.name;
55+
56+
const item = document.createElement('ion-item');
57+
item.appendChild(radio);
58+
59+
radioGroupEl.appendChild(item);
60+
});
61+
62+
radioGroupEl.addEventListener('ionChange', () => {
63+
console.log('Current value:', JSON.stringify(radioGroupEl.value));
64+
});
65+
</script>
66+
</body>
67+
</html>

‎static/usage/v7/radio/using-comparewith/index.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
7+
import angular_example_component_html from './angular/example_component_html.md';
8+
import angular_example_component_ts from './angular/example_component_ts.md';
9+
10+
<Playground
11+
version="7"
12+
code={{
13+
javascript,
14+
react,
15+
vue,
16+
angular: {
17+
files: {
18+
'src/app/example.component.html': angular_example_component_html,
19+
'src/app/example.component.ts': angular_example_component_ts,
20+
},
21+
},
22+
}}
23+
src="usage/v7/radio/using-comparewith/demo.html"
24+
showConsole={true}
25+
/>

‎static/usage/v7/radio/using-comparewith/javascript.md

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
```html
2+
<ion-list>
3+
<ion-radio-group></ion-radio-group>
4+
</ion-list>
5+
6+
<script>
7+
const foods = [
8+
{
9+
id: 1,
10+
name: 'Apples',
11+
type: 'fruit',
12+
},
13+
{
14+
id: 2,
15+
name: 'Carrots',
16+
type: 'vegetable',
17+
},
18+
{
19+
id: 3,
20+
name: 'Cupcakes',
21+
type: 'dessert',
22+
},
23+
];
24+
25+
const compareWithFn = (o1, o2) => {
26+
return o1.id === o2.id;
27+
};
28+
29+
const radioGroupEl = document.querySelector('ion-radio-group');
30+
radioGroupEl.compareWith = compareWithFn;
31+
32+
foods.forEach((option, i) => {
33+
const radio = document.createElement('ion-radio');
34+
35+
radio.value = option;
36+
radio.textContent = option.name;
37+
38+
const item = document.createElement('ion-item');
39+
item.appendChild(radio);
40+
41+
radioGroupEl.appendChild(item);
42+
});
43+
44+
radioGroupEl.addEventListener('ionChange', () => {
45+
console.log('Current value:', JSON.stringify(radioGroupEl.value));
46+
});
47+
</script>
48+
```

‎static/usage/v7/radio/using-comparewith/react.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
```tsx
2+
import React from 'react';
3+
import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/react';
4+
5+
interface Food {
6+
id: number;
7+
name: string;
8+
type: string;
9+
}
10+
11+
const foods: Food[] = [
12+
{
13+
id: 1,
14+
name: 'Apples',
15+
type: 'fruit',
16+
},
17+
{
18+
id: 2,
19+
name: 'Carrots',
20+
type: 'vegetable',
21+
},
22+
{
23+
id: 3,
24+
name: 'Cupcakes',
25+
type: 'dessert',
26+
},
27+
];
28+
29+
const compareWith = (o1: Food, o2: Food) => {
30+
return o1.id === o2.id;
31+
};
32+
33+
function Example() {
34+
return (
35+
<IonList>
36+
<IonRadioGroup
37+
compareWith={compareWith}
38+
onIonChange={(ev) => console.log('Current value:', JSON.stringify(ev.detail.value))}
39+
>
40+
{foods.map((food) => (
41+
<IonItem>
42+
<IonRadio key={food.id} value={food}>
43+
{food.name}
44+
</IonRadio>
45+
</IonItem>
46+
))}
47+
</IonRadioGroup>
48+
</IonList>
49+
);
50+
}
51+
export default Example;
52+
```

‎static/usage/v7/radio/using-comparewith/vue.md

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
```html
2+
<template>
3+
<ion-list>
4+
<ion-radio-group :compareWith="compareWith" @ionChange="handleChange($event)">
5+
<ion-item v-for="food in foods">
6+
<ion-radio :value="food">{{ food.name }}</ion-radio>
7+
</ion-item>
8+
</ion-radio-group>
9+
</ion-list>
10+
</template>
11+
12+
<script lang="ts">
13+
import { IonItem, IonList, IonRadio, IonRadioGroup } from '@ionic/vue';
14+
import { defineComponent } from 'vue';
15+
16+
export default defineComponent({
17+
components: {
18+
IonItem,
19+
IonList,
20+
IonRadio,
21+
IonRadioGroup,
22+
},
23+
data() {
24+
return {
25+
foods: [
26+
{
27+
id: 1,
28+
name: 'Apples',
29+
type: 'fruit',
30+
},
31+
{
32+
id: 2,
33+
name: 'Carrots',
34+
type: 'vegetable',
35+
},
36+
{
37+
id: 3,
38+
name: 'Cupcakes',
39+
type: 'dessert',
40+
},
41+
],
42+
};
43+
},
44+
methods: {
45+
compareWith(o1, o2) {
46+
return o1.id === o2.id;
47+
},
48+
handleChange(ev) {
49+
console.log('Current value:', JSON.stringify(ev.detail.value));
50+
},
51+
},
52+
});
53+
</script>
54+
```

‎static/usage/v7/select/objects-as-values/using-comparewith/javascript.md

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,6 @@
3838
selectEl.appendChild(selectOption);
3939
});
4040
41-
const valueLabel = document.querySelector('ion-text');
4241
selectEl.addEventListener('ionChange', () => {
4342
console.log('Current value:', JSON.stringify(selectEl.value));
4443
});

0 commit comments

Comments
 (0)