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

also updates the preview demo to add to the top of the list on pull to refresh fixes #14879
ionic-team · Jul 26, 2018 · f1826a6 · f1826a6
1 parent 0db643d
commit f1826a6
Show file tree

Hide file tree

Showing 19 changed files with 129 additions and 23 deletions.
diff --git a/angular/BREAKING.md b/angular/BREAKING.md
@@ -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.

diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -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;
       /**

diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx
@@ -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

diff --git a/core/src/components/refresher/test/basic/index.html b/core/src/components/refresher/test/basic/index.html
@@ -11,30 +11,25 @@
 
 <body>
   <ion-app>
-
-
     <ion-header>
       <ion-toolbar>
         <ion-title>Pull To Refresh</ion-title>
       </ion-toolbar>
     </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);

diff --git a/core/src/components/refresher/test/preview/assets/bear.jpg b/core/src/components/refresher/test/preview/assets/bear.jpg
diff --git a/core/src/components/refresher/test/preview/assets/cheetah.jpg b/core/src/components/refresher/test/preview/assets/cheetah.jpg
diff --git a/core/src/components/refresher/test/preview/assets/duck.jpg b/core/src/components/refresher/test/preview/assets/duck.jpg
diff --git a/core/src/components/refresher/test/preview/assets/eagle.jpg b/core/src/components/refresher/test/preview/assets/eagle.jpg
diff --git a/core/src/components/refresher/test/preview/assets/elephant.jpg b/core/src/components/refresher/test/preview/assets/elephant.jpg
diff --git a/core/src/components/refresher/test/preview/assets/giraffe.jpg b/core/src/components/refresher/test/preview/assets/giraffe.jpg
diff --git a/core/src/components/refresher/test/preview/assets/iguana.jpg b/core/src/components/refresher/test/preview/assets/iguana.jpg
diff --git a/core/src/components/refresher/test/preview/assets/kitten.jpg b/core/src/components/refresher/test/preview/assets/kitten.jpg
diff --git a/core/src/components/refresher/test/preview/assets/lion.jpg b/core/src/components/refresher/test/preview/assets/lion.jpg
diff --git a/core/src/components/refresher/test/preview/assets/mouse.jpg b/core/src/components/refresher/test/preview/assets/mouse.jpg
diff --git a/core/src/components/refresher/test/preview/assets/puppy.jpg b/core/src/components/refresher/test/preview/assets/puppy.jpg
diff --git a/core/src/components/refresher/test/preview/assets/rabbit.jpg b/core/src/components/refresher/test/preview/assets/rabbit.jpg
diff --git a/core/src/components/refresher/test/preview/assets/turtle.jpg b/core/src/components/refresher/test/preview/assets/turtle.jpg
diff --git a/core/src/components/refresher/test/preview/data.js b/core/src/components/refresher/test/preview/data.js
@@ -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"
+}];
diff --git a/core/src/components/refresher/test/preview/index.html b/core/src/components/refresher/test/preview/index.html
@@ -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>