javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 13:32:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(refresher): default to disabled false, add to breaking changes

Browse Source 
also updates the preview demo to add to the top of the list on pull to
refresh

fixes #14879
This commit is contained in:
Brandy Carney
2018-07-26 16:20:17 -04:00
parent 0db643df45
commit f1826a6efc
19 changed files with 129 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
angular/BREAKING.md
View File

@ -42,6 +42,7 @@ A list of the breaking changes introduced to each component in Ionic Angular v4.
- [Overlays](#overlays) - [Overlays](#overlays)
- [Radio](#radio) - [Radio](#radio)
- [Range](#range) - [Range](#range)
- [Refresher](#refresher)
- [Segment](#segment) - [Segment](#segment)
- [Select](#select) - [Select](#select)
- [Spinner](#spinner) - [Spinner](#spinner)
@ -1041,6 +1042,27 @@ These have been renamed to the following:
``` ```
## Refresher
The `enabled` property (with a default value of `true`) has been renamed to `disabled` (with a default value of `false`).
**Old Usage Example:**
```html
<ion-refresher enabled="false">
...
</ion-refresher>
```
**New Usage Example:**
```html
<ion-refresher disabled="true">
...
</ion-refresher>
```
## Segment ## Segment
The markup hasn't changed for Segments, but now writing `<ion-segment-button>` will render a native button element inside of it. The markup hasn't changed for Segments, but now writing `<ion-segment-button>` will render a native button element inside of it.

4
core/src/components.d.ts vendored
View File

@ -5443,7 +5443,7 @@ declare global {
*/ */
'complete': () => void; 'complete': () => void;
/** /**
* If true, the refresher will be hidden. Defaults to `true`. * If true, the refresher will be hidden. Defaults to `false`.
*/ */
'disabled': boolean; 'disabled': boolean;
/** /**
@ -5489,7 +5489,7 @@ declare global {
*/ */
'closeDuration'?: string; 'closeDuration'?: string;
/** /**
* If true, the refresher will be hidden. Defaults to `true`. * If true, the refresher will be hidden. Defaults to `false`.
*/ */
'disabled'?: boolean; 'disabled'?: boolean;
/** /**

4
core/src/components/refresher/refresher.tsx
View File

@ -71,9 +71,9 @@ export class Refresher {
@Prop() snapbackDuration = '280ms'; @Prop() snapbackDuration = '280ms';
/** /**
* If true, the refresher will be hidden. Defaults to `true`. * If true, the refresher will be hidden. Defaults to `false`.
*/ */
@Prop() disabled = true; @Prop() disabled = false;
/** /**
* Emitted when the user lets go of the content and has pulled down * Emitted when the user lets go of the content and has pulled down

9
core/src/components/refresher/test/basic/index.html
View File

@ -11,8 +11,6 @@
<body> <body>
<ion-app> <ion-app>
<ion-header> <ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>Pull To Refresh</ion-title> <ion-title>Pull To Refresh</ion-title>
@ -20,21 +18,18 @@
</ion-header> </ion-header>
<ion-content> <ion-content>
<ion-refresher id="refresher" disabled="false" slot="fixed"> <ion-refresher id="refresher" slot="fixed">
<ion-refresher-content pulling-text="Pull to refresh..." refreshing-spinner="bubbles" refreshing-text="Refreshing..."> <ion-refresher-content pulling-text="Pull to refresh..." refreshing-spinner="bubbles" refreshing-text="Refreshing...">
</ion-refresher-content> </ion-refresher-content>
</ion-refresher> </ion-refresher>
<ion-list id="list"></ion-list> <ion-list id="list"></ion-list>
</ion-content> </ion-content>
</ion-app> </ion-app>
<ion-menu-controller></ion-menu-controller> <ion-menu-controller></ion-menu-controller>
<script> <script>
let items = []; let items = [];
for (var i = 0; i < 30; i++) { for (var i = 0; i < 30; i++) {
items.push(i + 1); items.push(i + 1);

BIN
core/src/components/refresher/test/preview/assets/bear.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 77 KiB

BIN
core/src/components/refresher/test/preview/assets/cheetah.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB

BIN
core/src/components/refresher/test/preview/assets/duck.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 47 KiB

BIN
core/src/components/refresher/test/preview/assets/eagle.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
core/src/components/refresher/test/preview/assets/elephant.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
core/src/components/refresher/test/preview/assets/giraffe.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 80 KiB

BIN
core/src/components/refresher/test/preview/assets/iguana.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 61 KiB

BIN
core/src/components/refresher/test/preview/assets/kitten.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 75 KiB

BIN
core/src/components/refresher/test/preview/assets/lion.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 108 KiB

BIN
core/src/components/refresher/test/preview/assets/mouse.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 57 KiB

BIN
core/src/components/refresher/test/preview/assets/puppy.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
core/src/components/refresher/test/preview/assets/rabbit.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 52 KiB

BIN
core/src/components/refresher/test/preview/assets/turtle.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

61
core/src/components/refresher/test/preview/data.js Normal file
View File

@ -0,0 +1,61 @@
let json = [{
"name": "Burt Bear",
"img": "preview/assets/bear.jpg",
"description": "Burt is a Bear.",
"email": "burt@example.com"
}, {
"name": "Charlie Cheetah",
"img": "preview/assets/cheetah.jpg",
"description": "Charlie is a Cheetah.",
"email": "charlie@example.com"
}, {
"name": "Donald Duck",
"img": "preview/assets/duck.jpg",
"description": "Donald is a Duck.",
"email": "donald@example.com"
}, {
"name": "Eva Eagle",
"img": "preview/assets/eagle.jpg",
"description": "Eva is an Eagle.",
"email": "eva@example.com"
}, {
"name": "Ellie Elephant",
"img": "preview/assets/elephant.jpg",
"description": "Ellie is an Elephant.",
"email": "ellie@example.com"
}, {
"name": "Gino Giraffe",
"img": "preview/assets/giraffe.jpg",
"description": "Gino is a Giraffe.",
"email": "gino@example.com"
}, {
"name": "Isabella Iguana",
"img": "preview/assets/iguana.jpg",
"description": "Isabella is an Iguana.",
"email": "isabella@example.com"
}, {
"name": "Karl Kitten",
"img": "preview/assets/kitten.jpg",
"description": "Karl is a Kitten.",
"email": "karl@example.com"
}, {
"name": "Lionel Lion",
"img": "preview/assets/lion.jpg",
"description": "Lionel is a Lion.",
"email": "lionel@example.com"
}, {
"name": "Molly Mouse",
"img": "preview/assets/mouse.jpg",
"description": "Molly is a Mouse.",
"email": "molly@example.com"
}, {
"name": "Paul Puppy",
"img": "preview/assets/puppy.jpg",
"description": "Paul is a Puppy.",
"email": "paul@example.com"
}, {
"name": "Rachel Rabbit",
"img": "preview/assets/rabbit.jpg",
"description": "Rachel is a Rabbit.",
"email": "rachel@example.com"
}];

52
core/src/components/refresher/test/preview/index.html
View File

@ -18,13 +18,12 @@
</ion-header> </ion-header>
<ion-content fullscreen> <ion-content fullscreen>
<ion-refresher id="refresher" disabled="false" slot="fixed"> <ion-refresher id="refresher" slot="fixed">
<ion-refresher-content pulling-text="Pull to refresh..." refreshing-spinner="bubbles" refreshing-text="Refreshing..."> <ion-refresher-content pulling-text="Pull to refresh..." refreshing-spinner="bubbles" refreshing-text="Refreshing...">
</ion-refresher-content> </ion-refresher-content>
</ion-refresher> </ion-refresher>
<ion-list id="list"></ion-list> <ion-list id="list"></ion-list>
</ion-content> </ion-content>
<style> <style>
@ -33,42 +32,71 @@
} }
</style> </style>
</ion-app> </ion-app>
<ion-menu-controller></ion-menu-controller>
<script type="text/javascript" src="preview/data.js"></script>
<script> <script>
let items = []; const disableButton = document.getElementById('disableButton');
for (var i = 0; i < 30; i++) {
items.push(i + 1);
}
const list = document.getElementById('list'); const list = document.getElementById('list');
const refresher = document.getElementById('refresher'); const refresher = document.getElementById('refresher');
refresher.addEventListener('ionRefresh', async function () { refresher.addEventListener('ionRefresh', async function () {
console.log('Loading data...'); console.log('Loading data...');
const data = await getAsyncData(); const data = await getAsyncData();
items = items.concat(data); users = data.concat(users);
if (users.length == json.length) {
console.log("All data has been loaded");
refresher.disabled = true;
}
refresher.complete(); refresher.complete();
render(); render();
console.log('Done'); console.log('Done');
}); });
function toggleDisableRefresher() {
refresher.disabled = !refresher.disabled;
disableButton.innerHTML = refresher.disabled ? 'Enable' : 'Disable';
}
let users = [];
for (var i = 0; i < 4; i++) {
users.push(json[i]);
}
function render() { function render() {
let html = ''; let html = '';
for (let item of items) { for (let user of users) {
html += `<ion-item>${item}</ion-item>`; html += `
<ion-item>
<ion-avatar slot="start">
<img src="${user.img}"/>
</ion-avatar>
<ion-label>
<h2>${user.name}</h2>
<p>${user.description}</p>
</ion-label>
</ion-item>
`;
} }
list.innerHTML = html; list.innerHTML = html;
} }
function getAsyncData() { function getAsyncData() {
// async return mock data // async return mock data
return new Promise(resolve => { return new Promise(resolve => {
setTimeout(() => { setTimeout(() => {
length = users.length;
let data = []; let data = [];
for (var i = 0; i < 30; i++) { for (var i = length; i < length + 2; i++) {
data.push(i); data.push(json[i]);
} }
resolve(data); resolve(data);
}, 500); }, 500);
}); });
} }
render(); render();
</script> </script>
</body> </body>