javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 01:52:19 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(virtual-scroll): remove virtual scroll component (#25808)

Browse Source
This commit is contained in:
Sean Perkins
2022-08-24 15:42:12 -04:00
committed by GitHub
parent a1ec9aabd8
commit 1eb6fd04d7
41 changed files with 81 additions and 2328 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
angular/test/base/e2e/src/virtual-scroll.spec.ts
View File

@ -1,11 +0,0 @@
describe('Virtual Scroll', () => {
beforeEach(() => {
cy.visit('/virtual-scroll');
cy.wait(30);
})
it('should open virtual-scroll', () => {
cy.get('ion-virtual-scroll > *').its('length').should('be.gt', 0);
});
});

4
angular/test/base/src/app/app-routing.module.ts
View File

@ -7,8 +7,6 @@ import { RouterLinkPageComponent } from './router-link-page/router-link-page.com
import { RouterLinkPage2Component } from './router-link-page2/router-link-page2.component';
import { RouterLinkPage3Component } from './router-link-page3/router-link-page3.component';
import { HomePageComponent } from './home-page/home-page.component';
import { VirtualScrollComponent } from './virtual-scroll/virtual-scroll.component';
import { VirtualScrollDetailComponent } from './virtual-scroll-detail/virtual-scroll-detail.component';
import { NestedOutletComponent } from './nested-outlet/nested-outlet.component';
import { NestedOutletPageComponent } from './nested-outlet-page/nested-outlet-page.component';
import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet-page2.component';
@ -40,8 +38,6 @@ const routes: Routes = [
{ path: 'router-link-page2/:id', component: RouterLinkPage2Component },
{ path: 'router-link-page3', component: RouterLinkPage3Component },
{ path: 'slides', component: SlidesComponent },
{ path: 'virtual-scroll', component: VirtualScrollComponent },
{ path: 'virtual-scroll-detail/:itemId', component: VirtualScrollDetailComponent },
{ path: 'tabs', redirectTo: '/tabs/account', pathMatch: 'full' },
{
path: 'navigation',

6
angular/test/base/src/app/app.module.ts
View File

@ -15,9 +15,6 @@ import { RouterLinkPageComponent } from './router-link-page/router-link-page.com
import { RouterLinkPage2Component } from './router-link-page2/router-link-page2.component';
import { RouterLinkPage3Component } from './router-link-page3/router-link-page3.component';
import { HomePageComponent } from './home-page/home-page.component';
import { VirtualScrollComponent } from './virtual-scroll/virtual-scroll.component';
import { VirtualScrollDetailComponent } from './virtual-scroll-detail/virtual-scroll-detail.component';
import { VirtualScrollInnerComponent } from './virtual-scroll-inner/virtual-scroll-inner.component';
import { NestedOutletComponent } from './nested-outlet/nested-outlet.component';
import { NestedOutletPageComponent } from './nested-outlet-page/nested-outlet-page.component';
import { NestedOutletPage2Component } from './nested-outlet-page2/nested-outlet-page2.component';
@ -44,9 +41,6 @@ import { AccordionModalComponent } from './accordion/accordion-modal/accordion-m
RouterLinkPage2Component,
RouterLinkPage3Component,
HomePageComponent,
VirtualScrollComponent,
VirtualScrollDetailComponent,
VirtualScrollInnerComponent,
NestedOutletComponent,
NestedOutletPageComponent,
NestedOutletPage2Component,

135
angular/test/base/src/app/home-page/home-page.component.html
View File

@ -1,71 +1,66 @@
<ion-header>
<ion-toolbar>
<ion-title>
Test App
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item routerLink="/alerts" [routerAnimation]="routerAnimation">
<ion-label>
Alerts test
</ion-label>
</ion-item>
<ion-item routerLink="/inputs">
<ion-label>
Inputs test
</ion-label>
</ion-item>
<ion-item routerLink="/form">
<ion-label>
Form test
</ion-label>
</ion-item>
<ion-item routerLink="/modals">
<ion-label>
Modals test
</ion-label>
</ion-item>
<ion-item routerLink="/router-link">
<ion-label>
Router link test
</ion-label>
</ion-item>
<ion-item routerLink="/tabs">
<ion-label>
Tabs test
</ion-label>
</ion-item>
<ion-item routerLink="/slides">
<ion-label>
Slides test
</ion-label>
</ion-item>
<ion-item routerLink="/virtual-scroll">
<ion-label>
Virtual Scroll
</ion-label>
</ion-item>
<ion-item routerLink="/nested-outlet/page">
<ion-label>
Nested ion-router-outlet
</ion-label>
</ion-item>
<ion-item routerLink="/view-child">
<ion-label>
ViewChild()
</ion-label>
</ion-item>
<ion-item routerLink="/providers">
<ion-label>
Providers
</ion-label>
</ion-item>
<ion-item routerLink="/accordions">
<ion-label>
Accordions Test
</ion-label>
</ion-item>
</ion-list>
</ion-content>
<ion-toolbar>
<ion-title>
Test App
</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item routerLink="/alerts" [routerAnimation]="routerAnimation">
<ion-label>
Alerts test
</ion-label>
</ion-item>
<ion-item routerLink="/inputs">
<ion-label>
Inputs test
</ion-label>
</ion-item>
<ion-item routerLink="/form">
<ion-label>
Form test
</ion-label>
</ion-item>
<ion-item routerLink="/modals">
<ion-label>
Modals test
</ion-label>
</ion-item>
<ion-item routerLink="/router-link">
<ion-label>
Router link test
</ion-label>
</ion-item>
<ion-item routerLink="/tabs">
<ion-label>
Tabs test
</ion-label>
</ion-item>
<ion-item routerLink="/slides">
<ion-label>
Slides test
</ion-label>
</ion-item>
<ion-item routerLink="/nested-outlet/page">
<ion-label>
Nested ion-router-outlet
</ion-label>
</ion-item>
<ion-item routerLink="/view-child">
<ion-label>
ViewChild()
</ion-label>
</ion-item>
<ion-item routerLink="/providers">
<ion-label>
Providers
</ion-label>
</ion-item>
<ion-item routerLink="/accordions">
<ion-label>
Accordions Test
</ion-label>
</ion-item>
</ion-list>
</ion-content>

17
angular/test/base/src/app/virtual-scroll-detail/virtual-scroll-detail.component.html
View File

@ -1,17 +0,0 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button></ion-back-button>
</ion-buttons>
<ion-title>virtual-scroll page</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<h1>Item {{itemNu}}</h1>
<p>ngOnInit: <span id="ngOnInit">{{onInit}}</span></p>
<p>ionViewWillEnter: <span id="ionViewWillEnter">{{willEnter}}</span></p>
<p>ionViewDidEnter: <span id="ionViewDidEnter">{{didEnter}}</span></p>
<p>ionViewWillLeave: <span id="ionViewWillLeave">{{willLeave}}</span></p>
<p>ionViewDidLeave: <span id="ionViewDidLeave">{{didLeave}}</span></p>
</ion-content>

46
angular/test/base/src/app/virtual-scroll-detail/virtual-scroll-detail.component.ts
View File

@ -1,46 +0,0 @@
import { Component, NgZone, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ViewDidEnter, ViewDidLeave, ViewWillEnter, ViewWillLeave } from '@ionic/angular';
@Component({
selector: 'app-virtual-scroll-detail',
templateUrl: './virtual-scroll-detail.component.html',
})
export class VirtualScrollDetailComponent implements OnInit, ViewWillEnter, ViewDidEnter, ViewWillLeave, ViewDidLeave {
onInit = 0;
willEnter = 0;
didEnter = 0;
willLeave = 0;
didLeave = 0;
itemNu = 'none';
constructor(private route: ActivatedRoute) {}
ngOnInit() {
this.itemNu = this.route.snapshot.paramMap.get('itemId');
NgZone.assertInAngularZone();
this.onInit++;
}
ionViewWillEnter() {
if (this.onInit !== 1) {
throw new Error('ngOnInit was not called');
}
NgZone.assertInAngularZone();
this.willEnter++;
}
ionViewDidEnter() {
NgZone.assertInAngularZone();
this.didEnter++;
}
ionViewWillLeave() {
NgZone.assertInAngularZone();
this.willLeave++;
}
ionViewDidLeave() {
NgZone.assertInAngularZone();
this.didLeave++;
}
}

3
angular/test/base/src/app/virtual-scroll-inner/virtual-scroll-inner.component.html
View File

@ -1,3 +0,0 @@
<p>
[{{onInit}}] Item {{value}}
</p>

17
angular/test/base/src/app/virtual-scroll-inner/virtual-scroll-inner.component.ts
View File

@ -1,17 +0,0 @@
import { Component, OnInit, NgZone, Input } from '@angular/core';
@Component({
selector: 'app-virtual-scroll-inner',
templateUrl: './virtual-scroll-inner.component.html',
})
export class VirtualScrollInnerComponent implements OnInit {
@Input() value: string;
onInit = 0;
ngOnInit() {
NgZone.assertInAngularZone();
this.onInit++;
console.log('created');
}
}

29
angular/test/base/src/app/virtual-scroll/virtual-scroll.component.html
View File

@ -1,29 +0,0 @@
<ion-header>
<ion-toolbar>
<ion-title>
Virtual Scroll Test
</ion-title>
<ion-buttons slot="end">
<ion-button (click)="addItems()">
<ion-icon name="add" slot="icon-only"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-virtual-scroll [items]="items" [headerFn]="myHeaderFn" [footerFn]="myFooterFn">
<ion-item-divider *virtualHeader="let header">{{ header }}</ion-item-divider>
<ion-item-divider *virtualFooter="let footer">-- {{ footer }}</ion-item-divider>
<!-- <ion-item *virtualItem="let item" itemHeight="itemHeight">
{{item.name}}
</ion-item> -->
<ion-item *virtualItem="let item" [routerLink]="['/', 'virtual-scroll-detail', item]">
<ion-label>
<app-virtual-scroll-inner [value]="item.name"></app-virtual-scroll-inner>
</ion-label>
<ion-icon *ngIf="(item.name % 2) === 0" name="airplane" slot="start"></ion-icon>
<ion-toggle slot="end" [(ngModel)]="item.checked"></ion-toggle>
</ion-item>
</ion-virtual-scroll>
</ion-content>

36
angular/test/base/src/app/virtual-scroll/virtual-scroll.component.ts
View File

@ -1,36 +0,0 @@
import { Component, OnInit, ViewChild } from '@angular/core';
import { HeaderFn } from '@ionic/core';
import { IonVirtualScroll } from '@ionic/angular';
@Component({
selector: 'app-virtual-scroll',
templateUrl: './virtual-scroll.component.html',
})
export class VirtualScrollComponent {
@ViewChild(IonVirtualScroll, { static: true }) virtualScroll: IonVirtualScroll;
items = Array.from({length: 100}, (_, i) => ({ name: `${i}`, checked: true}));
itemHeight = () => 44;
myHeaderFn: HeaderFn = (_, index) => {
if ((index % 10) === 0) {
return `Header ${index}`;
}
}
myFooterFn: HeaderFn = (_, index) => {
if ((index % 5) === 0) {
return `Footer ${index}`;
}
}
addItems() {
console.log('adding items');
this.items.push(
{ name: `New Item`, checked: true}
);
this.virtualScroll.checkEnd();
}
}