javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +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)
- [Radio](#radio)
- [Range](#range)
- [Refresher](#refresher)
- [Segment](#segment)
- [Select](#select)
- [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
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;
/**
* If true, the refresher will be hidden. Defaults to `true`.
* If true, the refresher will be hidden. Defaults to `false`.
*/
'disabled': boolean;
/**
@ -5489,7 +5489,7 @@ declare global {
*/
'closeDuration'?: string;
/**
* If true, the refresher will be hidden. Defaults to `true`.
* If true, the refresher will be hidden. Defaults to `false`.
*/
'disabled'?: boolean;
/**

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

@ -71,9 +71,9 @@ export class Refresher {
@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

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

@ -11,8 +11,6 @@
<body>
<ion-app>
<ion-header>
<ion-toolbar>
<ion-title>Pull To Refresh</ion-title>
@ -20,21 +18,18 @@
</ion-header>
<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>
</ion-refresher>
<ion-list id="list"></ion-list>
</ion-content>
</ion-app>
<ion-menu-controller></ion-menu-controller>
<script>
let items = [];
for (var i = 0; i < 30; i++) {
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-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>
</ion-refresher>
<ion-list id="list"></ion-list>
</ion-content>
<style>
@ -33,42 +32,71 @@
}
</style>
</ion-app>
<ion-menu-controller></ion-menu-controller>
<script type="text/javascript" src="preview/data.js"></script>
<script>
let items = [];
for (var i = 0; i < 30; i++) {
items.push(i + 1);
}
const disableButton = document.getElementById('disableButton');
const list = document.getElementById('list');
const refresher = document.getElementById('refresher');
refresher.addEventListener('ionRefresh', async function () {
console.log('Loading data...');
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();
render();
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() {
let html = '';
for (let item of items) {
html += `<ion-item>${item}</ion-item>`;
for (let user of users) {
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;
}
function getAsyncData() {
// async return mock data
return new Promise(resolve => {
setTimeout(() => {
length = users.length;
let data = [];
for (var i = 0; i < 30; i++) {
data.push(i);
for (var i = length; i < length + 2; i++) {
data.push(json[i]);
}
resolve(data);
}, 500);
});
}
render();
</script>
</body>