Skip to content

feat(many): update playgrounds to use showConsole prop instead of showing data within demo #3107

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 25 commits into from
Sep 7, 2023
Merged

feat(many): update playgrounds to use showConsole prop instead of showing data within demo #3107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
91d2d0a
action-sheet/role-info-on-dismiss
Sep 5, 2023
a398d8f
accordion/listen-changes
Sep 5, 2023
96fef2d
alert/buttons
Sep 5, 2023
82d21d4
content/scroll-events
Sep 5, 2023
f09dc1e
picker/controller
Sep 5, 2023
c3aa633
picker/inline/isOpen
Sep 5, 2023
6f82577
picker/inline/trigger
Sep 5, 2023
d8dcaf6
picker/multiple-column
Sep 5, 2023
617dc96
modal/inline/basic
Sep 5, 2023
0677f82
modal/controller
Sep 6, 2023
08f5070
popover/presenting/controller
Sep 6, 2023
9afb853
range/ion-knob-move-event
Sep 6, 2023
c2d8273
reorder/basic
Sep 6, 2023
b89d8b5
reorder/custom-icon
Sep 6, 2023
3391943
reorder/custom-scroll-target
Sep 6, 2023
ddfb48e
reorder/toggling-disabled
Sep 6, 2023
04e3445
reorder/updating-data
Sep 6, 2023
f20c299
reorder/wrapper
Sep 6, 2023
61ef67b
select/basic/responding-to-interaction
Sep 6, 2023
e832c71
select/objects-as-values/using-comparewith
Sep 6, 2023
2ea17cd
select/objects-as-values/multiple-selection
Sep 6, 2023
082bbcc
toast/buttons
Sep 6, 2023
473a246
lint
Sep 6, 2023
1f1dd17
Revert "modal/controller"
Sep 7, 2023
c9d2630
Revert "modal/inline/basic"
Sep 7, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 0 additions & 2 deletions static/usage/v7/accordion/listen-changes/angular/example_component_html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,4 @@
<div class="ion-padding" slot="content">Third Content</div>
</ion-accordion>
</ion-accordion-group>

<p #listenerOut></p>
```
15 changes: 4 additions & 11 deletions static/usage/v7/accordion/listen-changes/angular/example_component_ts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,20 @@
```ts
import { Component, ElementRef, ViewChild } from '@angular/core';
import { Component } from '@angular/core';

@Component({
selector: 'app-example',
templateUrl: 'example.component.html',
})
export class ExampleComponent {
@ViewChild('listenerOut', { static: true }) listenerOut: ElementRef;
private values: string[] = ['first', 'second', 'third'];

accordionGroupChange = (ev: any) => {
const nativeEl = this.listenerOut.nativeElement;
if (!nativeEl) {
return;
}

const collapsedItems = this.values.filter((value) => value !== ev.detail.value);
const selectedValue = ev.detail.value;

nativeEl.innerText = `
Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
Collapsed: ${collapsedItems.join(', ')}
`;
console.log(
`Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
);
};
}
```
17 changes: 5 additions & 12 deletions static/usage/v7/accordion/listen-changes/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,6 @@
<script src="../../../common.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
<style>
.container {
flex-direction: column;
}
</style>
</head>

<body>
Expand All @@ -39,25 +34,23 @@
<div class="ion-padding" slot="content">Third Content</div>
</ion-accordion>
</ion-accordion-group>

<p class="listener-out"></p>
</div>
</ion-content>
</ion-app>

<script>
const accordionGroup = document.querySelector('ion-accordion-group');
const listenerOut = document.querySelector('.listener-out');
const values = ['first', 'second', 'third'];

accordionGroup.addEventListener('ionChange', (ev) => {
const collapsedItems = values.filter((value) => value !== ev.detail.value);
const selectedValue = ev.detail.value;

listenerOut.innerText = `
Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
Collapsed: ${collapsedItems.join(', ')}
`;
console.log(
`Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(
', '
)}`
);
});
</script>
</body>
Expand Down
1 change: 1 addition & 0 deletions static/usage/v7/accordion/listen-changes/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,5 @@ import angular_example_component_ts from './angular/example_component_ts.md';
}}
size="320px"
src="usage/v7/accordion/listen-changes/demo.html"
showConsole={true}
/>
10 changes: 3 additions & 7 deletions static/usage/v7/accordion/listen-changes/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,21 +20,17 @@
</ion-accordion>
</ion-accordion-group>

<p class="listener-out"></p>

<script>
const accordionGroup = document.querySelector('ion-accordion-group');
const listenerOut = document.querySelector('.listener-out');
const values = ['first', 'second', 'third'];

accordionGroup.addEventListener('ionChange', (ev) => {
const collapsedItems = values.filter((value) => value !== ev.detail.value);
const selectedValue = ev.detail.value;

listenerOut.innerText = `
Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
Collapsed: ${collapsedItems.join(', ')}
`;
console.log(
`Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
);
});
</script>
```
70 changes: 30 additions & 40 deletions static/usage/v7/accordion/listen-changes/react.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,54 +1,44 @@
```tsx
import React, { useRef } from 'react';
import React from 'react';
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/react';
function Example() {
const listenerOut = useRef<null | HTMLParagraphElement>(null);
const values = ['first', 'second', 'third'];
const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
const nativeEl = listenerOut.current;
if (!nativeEl) {
return;
}

const collapsedItems = values.filter((value) => value !== ev.detail.value);
const selectedValue = ev.detail.value;

nativeEl.innerText = `
Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
Collapsed: ${collapsedItems.join(', ')}
`;
console.log(
`Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(', ')}`
);
};

return (
<>
<IonAccordionGroup onIonChange={accordionGroupChange}>
<IonAccordion value="first">
<IonItem slot="header" color="light">
<IonLabel>First Accordion</IonLabel>
</IonItem>
<div className="ion-padding" slot="content">
First Content
</div>
</IonAccordion>
<IonAccordion value="second">
<IonItem slot="header" color="light">
<IonLabel>Second Accordion</IonLabel>
</IonItem>
<div className="ion-padding" slot="content">
Second Content
</div>
</IonAccordion>
<IonAccordion value="third">
<IonItem slot="header" color="light">
<IonLabel>Third Accordion</IonLabel>
</IonItem>
<div className="ion-padding" slot="content">
Third Content
</div>
</IonAccordion>
</IonAccordionGroup>
<p ref={listenerOut}></p>
</>
<IonAccordionGroup onIonChange={accordionGroupChange}>
<IonAccordion value="first">
<IonItem slot="header" color="light">
<IonLabel>First Accordion</IonLabel>
</IonItem>
<div className="ion-padding" slot="content">
First Content
</div>
</IonAccordion>
<IonAccordion value="second">
<IonItem slot="header" color="light">
<IonLabel>Second Accordion</IonLabel>
</IonItem>
<div className="ion-padding" slot="content">
Second Content
</div>
</IonAccordion>
<IonAccordion value="third">
<IonItem slot="header" color="light">
<IonLabel>Third Accordion</IonLabel>
</IonItem>
<div className="ion-padding" slot="content">
Third Content
</div>
</IonAccordion>
</IonAccordionGroup>
);
}
export default Example;
Expand Down
21 changes: 8 additions & 13 deletions static/usage/v7/accordion/listen-changes/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,13 +20,11 @@
<div class="ion-padding" slot="content">Third Content</div>
</ion-accordion>
</ion-accordion-group>

<p ref="listenerOut"></p>
</template>

<script lang="ts">
import { IonAccordion, IonAccordionGroup, IonItem, IonLabel, AccordionGroupCustomEvent } from '@ionic/vue';
import { defineComponent, ref } from 'vue';
import { defineComponent } from 'vue';

export default defineComponent({
components: {
Expand All @@ -36,22 +34,19 @@
IonLabel,
},
setup() {
const listenerOut = ref(null);
const values = ['first', 'second', 'third'];
const accordionGroupChange = (ev: AccordionGroupCustomEvent) => {
if (!listenerOut.value) {
return;
}

const collapsedItems = values.filter((value) => value !== ev.detail.value);
const selectedValue = ev.detail.value;

listenerOut.value.innerText = `
Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value}
Collapsed: ${collapsedItems.join(', ')}
`;
console.log(
`Expanded: ${selectedValue === undefined ? 'None' : ev.detail.value} | Collapsed: ${collapsedItems.join(
', '
)}`
);
};
return { listenerOut, accordionGroupChange };

return { accordionGroupChange };
},
});
</script>
Expand Down
4 changes: 0 additions & 4 deletions static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,4 @@
flex-direction: column;
height: 100%;
}

code {
white-space: pre-wrap;
}
```
4 changes: 1 addition & 3 deletions ...ic/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_html.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,7 @@
header="Example header"
subHeader="Example subheader"
[buttons]="actionSheetButtons"
(didDismiss)="setResult($event)"
(didDismiss)="logResult($event)"
></ion-action-sheet>

<code *ngIf="result">{{ result }}</code>
</div>
```
5 changes: 2 additions & 3 deletions static/usage/v7/action-sheet/role-info-on-dismiss/angular/example_component_ts.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { Component } from '@angular/core';
styleUrls: ['./example.component.css'],
})
export class ExampleComponent {
result: string;
public actionSheetButtons = [
{
text: 'Delete',
Expand All @@ -33,8 +32,8 @@ export class ExampleComponent {

constructor() {}

setResult(ev) {
this.result = JSON.stringify(ev.detail, null, 2);
logResult(ev) {
console.log(JSON.stringify(ev.detail, null, 2));
}
}
```
9 changes: 1 addition & 8 deletions static/usage/v7/action-sheet/role-info-on-dismiss/demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,6 @@
.container {
flex-direction: column;
}

code {
white-space: pre-wrap;
}
</style>
</head>

Expand All @@ -30,14 +26,11 @@
header="Example header"
sub-header="Example subheader"
></ion-action-sheet>

<code id="action"></code>
</div>
</ion-content>
</ion-app>
<script>
const actionSheet = document.querySelector('ion-action-sheet');
const action = document.getElementById('action');

actionSheet.buttons = [
{
Expand All @@ -63,7 +56,7 @@
];

actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
action.innerText = JSON.stringify(ev.detail, null, 2);
console.log(JSON.stringify(ev.detail, null, 2));
});
</script>
</body>
Expand Down
1 change: 1 addition & 0 deletions static/usage/v7/action-sheet/role-info-on-dismiss/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,4 +32,5 @@ import angular_example_component_css from './angular/example_component_css.md';
}}
src="usage/v7/action-sheet/role-info-on-dismiss/demo.html"
devicePreview
showConsole
/>
9 changes: 1 addition & 8 deletions static/usage/v7/action-sheet/role-info-on-dismiss/javascript.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,6 @@
height: 100%;
flex-direction: column;
}

code {
white-space: pre-wrap;
}
</style>

<div class="container">
Expand All @@ -20,13 +16,10 @@
header="Example header"
sub-header="Example subheader"
></ion-action-sheet>

<code id="action"></code>
</div>

<script>
var actionSheet = document.querySelector('ion-action-sheet');
var action = document.getElementById('action');

actionSheet.buttons = [
{
Expand All @@ -52,7 +45,7 @@
];

actionSheet.addEventListener('ionActionSheetDidDismiss', (ev) => {
action.innerText = JSON.stringify(ev.detail, null, 2);
console.log(JSON.stringify(ev.detail, null, 2));
});
</script>
```
4 changes: 0 additions & 4 deletions static/usage/v7/action-sheet/role-info-on-dismiss/react/main_css.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,4 @@
flex-direction: column;
height: 100%;
}

code {
white-space: pre-wrap;
}
```
10 changes: 5 additions & 5 deletions static/usage/v7/action-sheet/role-info-on-dismiss/react/main_tsx.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
```tsx
import React, { useState } from 'react';
import React from 'react';
import { IonActionSheet, IonButton } from '@ionic/react';
import type { OverlayEventDetail } from '@ionic/core';

import './main.css';

function Example() {
const [result, setResult] = useState<OverlayEventDetail>();
const logResult = (result: OverlayEventDetail) => {
console.log(JSON.stringify(result, null, 2));
};

return (
<div className="container">
Expand Down Expand Up @@ -37,10 +39,8 @@ function Example() {
},
},
]}
onDidDismiss={({ detail }) => setResult(detail)}
onDidDismiss={({ detail }) => logResult(detail)}
></IonActionSheet>

{result && <code>{JSON.stringify(result, null, 2)}</code>}
</div>
);
}
Expand Down
Loading