Skip to content
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

Jump to bottom

feat(breadcrumbs): ionCollapsedClick event payload now contains references to collapsed breadcrumb elements #23611

Merged
merged 3 commits into from
Jul 13, 2021
Merged

feat(breadcrumbs): ionCollapsedClick event payload now contains references to collapsed breadcrumb elements #23611

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3331c1a
add feature and test
liamdebeasi Jul 12, 2021
ecf9bfc
update usage
liamdebeasi Jul 12, 2021
0da7b67
remove extra line
liamdebeasi Jul 12, 2021
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
1 change: 1 addition & 0 deletions core/src/components/breadcrumb/breadcrumb-interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
export interface BreadcrumbCollapsedClickEventDetail {
ionShadowTarget?: HTMLElement;
collapsedBreadcrumbs?: HTMLIonBreadcrumbElement[];
}
5 changes: 4 additions & 1 deletion core/src/components/breadcrumbs/breadcrumbs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,10 @@ export class Breadcrumbs implements ComponentInterface {

@Listen('collapsedClick')
onCollapsedClick(ev: CustomEvent) {
this.ionCollapsedClick.emit(ev.detail)
const breadcrumbs = this.getBreadcrumbs();
const collapsedBreadcrumbs = breadcrumbs.filter(breadcrumb => breadcrumb.collapsed);

this.ionCollapsedClick.emit({ ...ev.detail, collapsedBreadcrumbs });
}

@Watch('maxItems')
Expand Down
102 changes: 52 additions & 50 deletions core/src/components/breadcrumbs/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -349,20 +349,33 @@ export class BreadcrumbsExample {
async presentPopover(ev: any) {
const popover = await this.popoverController.create({
component: PopoverComponent,
componentProps: {
collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs
},
event: ev
});
await popover.present();
}
}
```

```html
<ion-content>
<ion-list>
<ion-item *ngFor="let breadcrumb of collapsedBreadcrumbs" [href]="breadcrumb.href">
<ion-label>{{ breadcrumb.textContent }}</ion-label>
</ion-item>
</ion-list>
</ion-content>
```
```typescript
import { Component } from '@angular/core';
import { Component, Input } from '@angular/core';

@Component({
selector: 'popover-component',
})
export class PopoverComponent {
@Input() collapsedBreadcrumbs: HTMLElement[] = [];

constructor() {}

Expand Down Expand Up @@ -699,21 +712,18 @@ class ListPopover extends HTMLElement {
}

connectedCallback() {
let breadcrumbTemplate = ``;
this.collapsedBreadcrumbs.forEach(breadcrumb => {
breadcrumbTemplate += `
<ion-item href="${breadcrumb.href}">
<ion-label>${breadcrumb.textContent}</ion-label>
</ion-item>
`;
})
this.innerHTML = `
<ion-content>
<ion-list>
<ion-item href="#">
<ion-label>Home</ion-label>
</ion-item>
<ion-item href="#electronics">
<ion-label>Electronics</ion-label>
</ion-item>
<ion-item href="#photography">
<ion-label>Photography</ion-label>
</ion-item>
<ion-item href="#cameras">
<ion-label>Cameras</ion-label>
</ion-item>
${breadcrumbTemplate}
</ion-list>
</ion-content>
`;
Expand All @@ -725,6 +735,9 @@ customElements.define('list-popover', ListPopover);
async function presentPopover(ev) {
const popover = Object.assign(document.createElement('ion-popover'), {
component: 'list-popover',
componentProps: {
collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs
},
event: ev
});
document.body.appendChild(popover);
Expand Down Expand Up @@ -1071,21 +1084,15 @@ import { IonBreadcrumb, IonBreadcrumbs, IonContent, IonItem, IonLabel, IonList,

const PopoverList: React.FC<{
onHide: () => void;
}> = ({ onHide }) => (
collapsedBreadcrumbs: HTMLElement[]
}> = ({ onHide, collapsedBreadcrumbs }) => (
<IonContent>
<IonList>
<IonItem href="#">
<IonLabel>Home</IonLabel>
</IonItem>
<IonItem href="#electronics">
<IonLabel>Electronics</IonLabel>
</IonItem>
<IonItem href="#photography">
<IonLabel>Photography</IonLabel>
</IonItem>
<IonItem href="#cameras">
<IonLabel>Cameras</IonLabel>
</IonItem>
{collapsedBreadcrumbs.map(breadcrumb => (
<IonItem href={breadcrumb.href}>
<IonLabel>{breadcrumb.textContent}</IonLabel>
</IonItem>
))}
</IonList>
</IonContent>
);
Expand Down Expand Up @@ -1510,6 +1517,9 @@ export class BreadcrumbsExample {
async presentPopover(ev: any) {
const popover = await popoverController.create({
component: 'list-popover',
componentProps: {
collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs
},
event: ev
});
await popover.present();
Expand Down Expand Up @@ -1543,29 +1553,24 @@ export class BreadcrumbsExample {
```

```tsx
import { Component, h } from '@stencil/core';
import { Component, h, Prop } from '@stencil/core';

@Component({
tag: 'list-popover',
styleUrl: 'list-popover.css',
})
export class ListPopover {
@Prop() collapsedBreadcrumbs: HTMLElement[] = [];

render() {
return [
<ion-content>
<ion-list>
<ion-item href="#">
<ion-label>Home</ion-label>
</ion-item>
<ion-item href="#electronics">
<ion-label>Electronics</ion-label>
</ion-item>
<ion-item href="#photography">
<ion-label>Photography</ion-label>
</ion-item>
<ion-item href="#cameras">
<ion-label>Cameras</ion-label>
</ion-item>
{this.collapsedBreadcrumbs.map(breadcrumb => (
<ion-item href={breadcrumb.href}>
<ion-label>{breadcrumb.textContent}</ion-label>
</ion-item>
))}
</ion-list>
</ion-content>
];
Expand Down Expand Up @@ -1990,6 +1995,9 @@ export default defineComponent({
async presentPopover(ev: Event) {
const popover = await popoverController.create({
component: ListPopover,
componentProps: {
collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs
},
event: ev
});
await popover.present();
Expand All @@ -2003,17 +2011,8 @@ export default defineComponent({
<template>
<ion-content>
<ion-list>
<ion-item href="#">
<ion-label>Home</ion-label>
</ion-item>
<ion-item href="#electronics">
<ion-label>Electronics</ion-label>
</ion-item>
<ion-item href="#photography">
<ion-label>Photography</ion-label>
</ion-item>
<ion-item href="#cameras">
<ion-label>Cameras</ion-label>
<ion-item v-for="breadcrumb in $props.collapsedBreadcrumbs" :href="breadcrumb.href">
<ion-label>{{ breadcrumb.textContent }}</ion-label>
</ion-item>
</ion-list>
</ion-content>
Expand All @@ -2025,6 +2024,9 @@ import { defineComponent } from 'vue';

export default defineComponent({
name: 'ListPopover',
props: {
collapsedBreadcrumbs: { type: Array, default: [] }
},
components: { IonContent, IonItem, IonLabel, IonList }
});
</script>
Expand Down
59 changes: 26 additions & 33 deletions core/src/components/breadcrumbs/test/basic/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,13 @@
<ion-title>Breadcrumbs - Basic</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-breadcrumbs max-items="2" items-before-collapse="1" items-after-collapse="1">
<ion-breadcrumb>First</ion-breadcrumb>
<ion-breadcrumb>Second</ion-breadcrumb>
<ion-breadcrumb>Third</ion-breadcrumb>
<ion-breadcrumb>Fourth</ion-breadcrumb>
<ion-breadcrumb>Fifth</ion-breadcrumb>
</ion-breadcrumbs>
<ion-breadcrumbs>
<ion-breadcrumb href="#">
Home
Expand Down Expand Up @@ -281,27 +288,13 @@ <h1>
<h1>Breadcrumbs: collapsed / popover on click</h1>

<ion-breadcrumbs id="popoverOnClick" max-items="4" items-before-collapse="0" items-after-collapse="3">
<ion-breadcrumb href="#">
Home
</ion-breadcrumb>
<ion-breadcrumb href="#electronics">
Cameras & Camcorders
</ion-breadcrumb>
<ion-breadcrumb href="#digital-camera-accessories">
Digital Camera Accessories
</ion-breadcrumb>
<ion-breadcrumb href="#camera-lenses">
Camera Lenses
</ion-breadcrumb>
<ion-breadcrumb href="#dslr-lenses">
DSLR Lenses
</ion-breadcrumb>
<ion-breadcrumb href="#prime-lenses">
Prime Lenses
</ion-breadcrumb>
<ion-breadcrumb>
Product Info
</ion-breadcrumb>
<ion-breadcrumb href="#">Home</ion-breadcrumb>
<ion-breadcrumb href="#electronics">Cameras & Camcorders</ion-breadcrumb>
<ion-breadcrumb href="#digital-camera-accessories">Digital Camera Accessories</ion-breadcrumb>
<ion-breadcrumb href="#camera-lenses">Camera Lenses</ion-breadcrumb>
<ion-breadcrumb href="#dslr-lenses">DSLR Lenses</ion-breadcrumb>
<ion-breadcrumb href="#prime-lenses">Prime Lenses</ion-breadcrumb>
<ion-breadcrumb>Product Info</ion-breadcrumb>
</ion-breadcrumbs>

<hr>
Expand Down Expand Up @@ -456,21 +449,20 @@ <h1>Breadcrumbs: default wrapping</h1>
}

connectedCallback() {
let template = '';

this.collapsedBreadcrumbs.forEach(breadcrumb => {
template += `
<ion-item href="${breadcrumb.href}">
<ion-label>${breadcrumb.textContent}</ion-label>
</ion-item>
`;
});

this.innerHTML = `
<ion-content>
<ion-list>
<ion-item href="#">
<ion-label>Home</ion-label>
</ion-item>
<ion-item href="#electronics">
<ion-label>Cameras & Camcorders</ion-label>
</ion-item>
<ion-item href="#digital-camera-accessories">
<ion-label>Digital Camera Accessories</ion-label>
</ion-item>
<ion-item href="#camera-lenses">
<ion-label>Camera Lenses</ion-label>
</ion-item>
${template}
</ion-list>
</ion-content>
`;
Expand All @@ -483,6 +475,7 @@ <h1>Breadcrumbs: default wrapping</h1>
console.log('present ev', ev);
const popover = Object.assign(document.createElement('ion-popover'), {
component: 'list-popover',
componentProps: ev.detail,
event: ev,
});
document.body.appendChild(popover);
Expand Down
35 changes: 35 additions & 0 deletions core/src/components/breadcrumbs/test/breadcrumbs.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { newSpecPage } from '@stencil/core/testing';
import { Breadcrumbs } from '../breadcrumbs.tsx';
import { Breadcrumb } from '../../breadcrumb/breadcrumb.tsx';

it('should correctly provide the collapsed breadcrumbs in the event payload', async () => {
const page = await newSpecPage({
components: [Breadcrumbs, Breadcrumb],
html: `
<ion-breadcrumbs max-items="2" items-before-collapse="1" items-after-collapse="1">
<ion-breadcrumb>First</ion-breadcrumb>
<ion-breadcrumb>Second</ion-breadcrumb>
<ion-breadcrumb>Third</ion-breadcrumb>
<ion-breadcrumb>Fourth</ion-breadcrumb>
<ion-breadcrumb>Fifth</ion-breadcrumb>
</ion-breadcrumbs>
`
});

const onCollapsedClick = jest.fn((ev) => ev);
const breadcrumbs = page.body.querySelector('ion-breadcrumbs');
const breadcrumb = page.body.querySelectorAll('ion-breadcrumb');

breadcrumbs.addEventListener('ionCollapsedClick', onCollapsedClick);

const event = new CustomEvent('collapsedClick');
breadcrumbs.dispatchEvent(event);

expect(onCollapsedClick).toHaveBeenCalledTimes(1);

const collapsedBreadcrumbs = onCollapsedClick.mock.calls[0][0].detail.collapsedBreadcrumbs;
expect(collapsedBreadcrumbs.length).toEqual(3);
expect(collapsedBreadcrumbs[0]).toBe(breadcrumb[1]);
expect(collapsedBreadcrumbs[1]).toBe(breadcrumb[2]);
expect(collapsedBreadcrumbs[2]).toBe(breadcrumb[3]);
});
15 changes: 14 additions & 1 deletion core/src/components/breadcrumbs/usage/angular.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,20 +337,33 @@ export class BreadcrumbsExample {
async presentPopover(ev: any) {
const popover = await this.popoverController.create({
component: PopoverComponent,
componentProps: {
collapsedBreadcrumbs: ev.detail.collapsedBreadcrumbs
},
event: ev
});
await popover.present();
}
}
```

```html
<ion-content>
<ion-list>
<ion-item *ngFor="let breadcrumb of collapsedBreadcrumbs" [href]="breadcrumb.href">
<ion-label>{{ breadcrumb.textContent }}</ion-label>
</ion-item>
</ion-list>
</ion-content>
```
```typescript
import { Component } from '@angular/core';
import { Component, Input } from '@angular/core';

@Component({
selector: 'popover-component',
})
export class PopoverComponent {
@Input() collapsedBreadcrumbs: HTMLElement[] = [];

constructor() {}

Expand Down
Loading