mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-10 00:27:41 +08:00
lint(): run prettier on feature-6.1
This commit is contained in:
Liam DeBeasi
@ -2,7 +2,6 @@ import type { ComponentInterface, EventEmitter } from '@stencil/core';
|
||||
import { Component, Element, Event, Host, Method, Prop, State, Watch, h, readTask, writeTask } from '@stencil/core';
|
||||
import { findClosestIonContent, getScrollElement, printIonContentErrorMsg } from '@utils/content';
|
||||
|
||||
|
||||
import { getIonMode } from '../../global/ionic-global';
|
||||
import type { Animation, Gesture, GestureDetail, RefresherEventDetail } from '../../interface';
|
||||
import { getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
|
||||
@ -284,7 +283,7 @@ export class Refresher implements ComponentInterface {
|
||||
MAX_PULL = this.scrollEl!.clientHeight * 0.16;
|
||||
}
|
||||
},
|
||||
onMove: ev => {
|
||||
onMove: (ev) => {
|
||||
this.lastVelocityY = ev.velocityY;
|
||||
},
|
||||
onEnd: () => {
|
||||
@ -303,7 +302,11 @@ export class Refresher implements ComponentInterface {
|
||||
this.disabledChanged();
|
||||
}
|
||||
|
||||
private async setupMDNativeRefresher(contentEl: HTMLElement, pullingSpinner: HTMLIonSpinnerElement, refreshingSpinner: HTMLIonSpinnerElement) {
|
||||
private async setupMDNativeRefresher(
|
||||
contentEl: HTMLElement,
|
||||
pullingSpinner: HTMLIonSpinnerElement,
|
||||
refreshingSpinner: HTMLIonSpinnerElement
|
||||
) {
|
||||
const circle = getElementRoot(pullingSpinner).querySelector('circle');
|
||||
const pullingRefresherIcon = this.el.querySelector('ion-refresher-content .refresher-pulling-icon') as HTMLElement;
|
||||
const refreshingCircle = getElementRoot(refreshingSpinner).querySelector('circle');
|
||||
@ -451,7 +454,9 @@ export class Refresher implements ComponentInterface {
|
||||
*/
|
||||
const backgroundContentHost = this.el.closest('ion-content') ?? contentEl;
|
||||
|
||||
this.backgroundContentEl = getElementRoot(backgroundContentHost).querySelector('#background-content') as HTMLElement;
|
||||
this.backgroundContentEl = getElementRoot(backgroundContentHost).querySelector(
|
||||
'#background-content'
|
||||
) as HTMLElement;
|
||||
|
||||
if (await shouldUseNativeRefresher(this.el, getIonMode(this))) {
|
||||
this.setupNativeRefresher(contentEl);
|
||||
|
||||
@ -4,17 +4,15 @@ import { newE2EPage } from '@stencil/core/testing';
|
||||
import { pullToRefresh } from '../test.utils';
|
||||
|
||||
describe('refresher: custom scroll target', () => {
|
||||
|
||||
let page: E2EPage;
|
||||
|
||||
beforeEach(async () => {
|
||||
page = await newE2EPage({
|
||||
url: '/src/components/refresher/test/scroll-target?ionic:_testing=true'
|
||||
url: '/src/components/refresher/test/scroll-target?ionic:_testing=true',
|
||||
});
|
||||
});
|
||||
|
||||
describe('legacy refresher', () => {
|
||||
|
||||
it('should load more items when performing a pull-to-refresh', async () => {
|
||||
const initialItems = await page.findAll('ion-item');
|
||||
expect(initialItems.length).toBe(30);
|
||||
@ -24,11 +22,9 @@ describe('refresher: custom scroll target', () => {
|
||||
const items = await page.findAll('ion-item');
|
||||
expect(items.length).toBe(60);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('native refresher', () => {
|
||||
|
||||
it('should load more items when performing a pull-to-refresh', async () => {
|
||||
const refresherContent = await page.$('ion-refresher-content');
|
||||
refresherContent.evaluate((el: any) => {
|
||||
@ -46,8 +42,5 @@ describe('refresher: custom scroll target', () => {
|
||||
const items = await page.findAll('ion-item');
|
||||
expect(items.length).toBe(60);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
|
||||
});
|
||||
|
||||
@ -1,93 +1,92 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Refresher - Custom Scroll Target</title>
|
||||
<meta name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
<style>
|
||||
#content {
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
flex: 1;
|
||||
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
contain: size style;
|
||||
}
|
||||
|
||||
#inner-scroll {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Pull To Refresh</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content scroll-y="false">
|
||||
<ion-refresher id="refresher" slot="fixed">
|
||||
<ion-refresher-content></ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<div id="content" class="ion-content-scroll-host">
|
||||
<div id="inner-scroll">
|
||||
<ion-list id="list"></ion-list>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
let items = createItems();
|
||||
|
||||
const list = document.getElementById('list');
|
||||
const refresher = document.getElementById('refresher');
|
||||
|
||||
refresher.addEventListener('ionRefresh', async function () {
|
||||
const data = await getAsyncData();
|
||||
items = items.concat(data);
|
||||
refresher.complete();
|
||||
render();
|
||||
// Custom event consumed by e2e tests
|
||||
document.dispatchEvent(new CustomEvent('ionRefreshComplete'));
|
||||
});
|
||||
|
||||
function render() {
|
||||
let html = '';
|
||||
for (let item of items) {
|
||||
html += `<ion-item button>${item}</ion-item>`;
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<title>Refresher - Custom Scroll Target</title>
|
||||
<meta
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
|
||||
<link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
|
||||
<script src="../../../../../scripts/testing/scripts.js"></script>
|
||||
<script nomodule src="../../../../../dist/ionic/ionic.js"></script>
|
||||
<script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
|
||||
<style>
|
||||
#content {
|
||||
position: relative;
|
||||
|
||||
display: block;
|
||||
flex: 1;
|
||||
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
contain: size style;
|
||||
}
|
||||
list.innerHTML = html;
|
||||
}
|
||||
|
||||
function getAsyncData() {
|
||||
// async return mock data
|
||||
return new Promise(resolve => {
|
||||
setTimeout(() => resolve(createItems(items.length)), 500);
|
||||
#inner-scroll {
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Pull To Refresh</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content scroll-y="false">
|
||||
<ion-refresher id="refresher" slot="fixed">
|
||||
<ion-refresher-content></ion-refresher-content>
|
||||
</ion-refresher>
|
||||
<div id="content" class="ion-content-scroll-host">
|
||||
<div id="inner-scroll">
|
||||
<ion-list id="list"></ion-list>
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-app>
|
||||
|
||||
<script>
|
||||
let items = createItems();
|
||||
|
||||
const list = document.getElementById('list');
|
||||
const refresher = document.getElementById('refresher');
|
||||
|
||||
refresher.addEventListener('ionRefresh', async function () {
|
||||
const data = await getAsyncData();
|
||||
items = items.concat(data);
|
||||
refresher.complete();
|
||||
render();
|
||||
// Custom event consumed by e2e tests
|
||||
document.dispatchEvent(new CustomEvent('ionRefreshComplete'));
|
||||
});
|
||||
}
|
||||
|
||||
function createItems(start = 0) {
|
||||
return new Array(30).fill().map((_, i) => start + i + 1);
|
||||
}
|
||||
function render() {
|
||||
let html = '';
|
||||
for (let item of items) {
|
||||
html += `<ion-item button>${item}</ion-item>`;
|
||||
}
|
||||
list.innerHTML = html;
|
||||
}
|
||||
|
||||
render();
|
||||
function getAsyncData() {
|
||||
// async return mock data
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => resolve(createItems(items.length)), 500);
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
</body>
|
||||
function createItems(start = 0) {
|
||||
return new Array(30).fill().map((_, i) => start + i + 1);
|
||||
}
|
||||
|
||||
render();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user