mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 21:15:24 +08:00
refactor(components): update to use shadow DOM and work with css variables
- updates components to use shadow DOM or scoped if they require css variables - moves global styles to an external stylesheet that needs to be imported - adds support for additional colors and removes the Sass loops to generate colors for each component - several property renames, bug fixes, and test updates Co-authored-by: Manu Mtz.-Almeida <manu.mtza@gmail.com> Co-authored-by: Adam Bradley <adambradley25@gmail.com> Co-authored-by: Cam Wiegert <cam@camwiegert.com>
This commit is contained in:
Brandy Carney
@ -1,5 +1,4 @@
|
||||
import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, State, Watch } from '@stencil/core';
|
||||
import { QueueController } from '../../interface';
|
||||
import { Component, Element, Event, EventEmitter, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-infinite-scroll',
|
||||
@ -9,14 +8,14 @@ export class InfiniteScroll {
|
||||
|
||||
private thrPx = 0;
|
||||
private thrPc = 0;
|
||||
private scrollEl?: HTMLIonScrollElement | null;
|
||||
private scrollEl?: HTMLIonScrollElement;
|
||||
private didFire = false;
|
||||
private isBusy = false;
|
||||
|
||||
@Element() el!: HTMLElement;
|
||||
@State() isLoading = false;
|
||||
|
||||
@Prop({ context: 'queue' }) queue!: QueueController;
|
||||
@Prop({ context: 'queue' }) queue!: QueueApi;
|
||||
@Prop({ context: 'enableListener' }) enableListener!: EventListenerEnable;
|
||||
|
||||
/**
|
||||
@ -75,14 +74,13 @@ export class InfiniteScroll {
|
||||
*/
|
||||
@Event() ionInfinite!: EventEmitter<void>;
|
||||
|
||||
async componentWillLoad() {
|
||||
const scrollEl = this.el.closest('ion-scroll');
|
||||
if (scrollEl) {
|
||||
this.scrollEl = await scrollEl.componentOnReady();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidLoad() {
|
||||
async componentDidLoad() {
|
||||
const contentEl = this.el.closest('ion-content');
|
||||
if (contentEl) {
|
||||
await contentEl.componentOnReady();
|
||||
this.scrollEl = contentEl.getScrollElement();
|
||||
}
|
||||
this.thresholdChanged(this.threshold);
|
||||
this.enableScrollEvents(!this.disabled);
|
||||
if (this.position === 'top') {
|
||||
|
||||
@ -6,35 +6,34 @@
|
||||
<title>Infinite Scroll - Basic</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Infinite Scroll - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Infinite Scroll - Basic</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content" padding>
|
||||
<ion-content id="content" padding>
|
||||
|
||||
<ion-button onclick="toggleInfiniteScroll()" block>
|
||||
Toggle InfiniteScroll
|
||||
</ion-button>
|
||||
<ion-button onclick="toggleInfiniteScroll()" block>
|
||||
Toggle InfiniteScroll
|
||||
</ion-button>
|
||||
|
||||
<ion-list id="list">
|
||||
<ion-list id="list">
|
||||
|
||||
</ion-list>
|
||||
</ion-list>
|
||||
|
||||
<ion-infinite-scroll threshold="100px" id="infinite-scroll">
|
||||
<ion-infinite-scroll-content
|
||||
loadingSpinner="bubbles"
|
||||
loadingText="Loading more data...">
|
||||
</ion-infinite-scroll-content>
|
||||
</ion-infinite-scroll>
|
||||
</ion-content>
|
||||
<ion-infinite-scroll threshold="100px" id="infinite-scroll">
|
||||
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
|
||||
</ion-infinite-scroll-content>
|
||||
</ion-infinite-scroll>
|
||||
</ion-content>
|
||||
|
||||
|
||||
|
||||
@ -43,7 +42,7 @@
|
||||
<script>
|
||||
let items = [];
|
||||
for (var i = 0; i < 30; i++) {
|
||||
items.push( i+1 );
|
||||
items.push(i + 1);
|
||||
}
|
||||
const list = document.getElementById('list');
|
||||
const infiniteScroll = document.getElementById('infinite-scroll');
|
||||
@ -52,7 +51,7 @@
|
||||
infiniteScroll.disabled = !infiniteScroll.disabled;
|
||||
}
|
||||
|
||||
infiniteScroll.addEventListener('ionInfinite', async function() {
|
||||
infiniteScroll.addEventListener('ionInfinite', async function () {
|
||||
console.log('Loading data...');
|
||||
const data = await getAsyncData();
|
||||
items = items.concat(data);
|
||||
@ -63,7 +62,7 @@
|
||||
|
||||
function render() {
|
||||
let html = '';
|
||||
for(let item of items) {
|
||||
for (let item of items) {
|
||||
html += `<ion-item>${item}</ion-item>`;
|
||||
}
|
||||
list.innerHTML = html;
|
||||
@ -86,4 +85,5 @@
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -6,35 +6,34 @@
|
||||
<title>Infinite Scroll</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<ion-app>
|
||||
|
||||
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Infinite Scroll</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-title>Infinite Scroll</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content id="content" padding>
|
||||
<ion-content id="content" padding>
|
||||
|
||||
<ion-button onclick="toggleInfiniteScroll()" block>
|
||||
Toggle InfiniteScroll
|
||||
</ion-button>
|
||||
<ion-button onclick="toggleInfiniteScroll()" block>
|
||||
Toggle InfiniteScroll
|
||||
</ion-button>
|
||||
|
||||
<ion-list id="list">
|
||||
<ion-list id="list">
|
||||
|
||||
</ion-list>
|
||||
</ion-list>
|
||||
|
||||
<ion-infinite-scroll threshold="100px" id="infinite-scroll">
|
||||
<ion-infinite-scroll-content
|
||||
loadingSpinner="bubbles"
|
||||
loadingText="Loading more data...">
|
||||
</ion-infinite-scroll-content>
|
||||
</ion-infinite-scroll>
|
||||
</ion-content>
|
||||
<ion-infinite-scroll threshold="100px" id="infinite-scroll">
|
||||
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
|
||||
</ion-infinite-scroll-content>
|
||||
</ion-infinite-scroll>
|
||||
</ion-content>
|
||||
|
||||
|
||||
|
||||
@ -43,7 +42,7 @@
|
||||
<script>
|
||||
let items = [];
|
||||
for (var i = 0; i < 30; i++) {
|
||||
items.push( i+1 );
|
||||
items.push(i + 1);
|
||||
}
|
||||
const list = document.getElementById('list');
|
||||
const infiniteScroll = document.getElementById('infinite-scroll');
|
||||
@ -52,7 +51,7 @@
|
||||
infiniteScroll.disabled = !infiniteScroll.disabled;
|
||||
}
|
||||
|
||||
infiniteScroll.addEventListener('ionInfinite', async function() {
|
||||
infiniteScroll.addEventListener('ionInfinite', async function () {
|
||||
console.log('Loading data...');
|
||||
const data = await getAsyncData();
|
||||
items = items.concat(data);
|
||||
@ -63,7 +62,7 @@
|
||||
|
||||
function render() {
|
||||
let html = '';
|
||||
for(let item of items) {
|
||||
for (let item of items) {
|
||||
html += `<ion-item>${item}</ion-item>`;
|
||||
}
|
||||
list.innerHTML = html;
|
||||
@ -86,4 +85,5 @@
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
@ -6,6 +6,7 @@
|
||||
<title>Infinite Scroll - Standalone</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
||||
<script src="/dist/ionic.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/css/ionic.min.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
Reference in New Issue
Block a user