fix(reorder-group): remove required parameter for the complete method (…

…#18084) also updates documentation surrounding the reorder & infinite scroll fixes #16302
ionic-team · Apr 22, 2019 · bd96491 · bd96491
1 parent a5b9066
commit bd96491
Show file tree

Hide file tree

Showing 50 changed files with 1,576 additions and 551 deletions.
diff --git a/core/src/components.d.ts b/core/src/components.d.ts
@@ -3520,7 +3520,7 @@ export namespace Components {
 
   interface IonReorderGroup {
     /**
-    * This method must be called once the `ionItemReorder` event is handled in order to complete the reorder operation.
+    * Completes the reorder operation. Must be called by the `ionItemReorder` event.  If a list of items is passed, the list will be reordered and returned in the proper order.  If no parameters are passed or if `true` is passed in, the reorder will complete and the item will remain in the position it was dragged to. If `false` is passed, the reorder will complete and the item will bounce back to its original position.
     */
     'complete': (listOrReorder?: boolean | any[] | undefined) => Promise<any>;
     /**

diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md
@@ -186,7 +186,6 @@ export default class ActionSheetExample extends Component<Props, State> {
     );
   }
 }
-
 ```
 
 

diff --git a/core/src/components/action-sheet/usage/react.md b/core/src/components/action-sheet/usage/react.md
@@ -59,5 +59,4 @@ export default class ActionSheetExample extends Component<Props, State> {
     );
   }
 }
-
 ```
diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md
@@ -797,7 +797,6 @@ export default class AlertExample extends Component<Props, State> {
     );
   }
 }
-
 ```
 
 

diff --git a/core/src/components/alert/usage/react.md b/core/src/components/alert/usage/react.md
@@ -267,5 +267,4 @@ export default class AlertExample extends Component<Props, State> {
     );
   }
 }
-
 ```
diff --git a/core/src/components/backdrop/readme.md b/core/src/components/backdrop/readme.md
@@ -135,7 +135,7 @@ export default Example;
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class Menu extends Vue {
+  export default class Example extends Vue {
     backdropDismiss = false;
     showBackdrop = false;
     shouldPropagate = false;

diff --git a/core/src/components/backdrop/usage/vue.md b/core/src/components/backdrop/usage/vue.md
@@ -24,7 +24,7 @@
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class Menu extends Vue {
+  export default class Example extends Vue {
     backdropDismiss = false;
     showBackdrop = false;
     shouldPropagate = false;

diff --git a/core/src/components/checkbox/readme.md b/core/src/components/checkbox/readme.md
@@ -174,7 +174,7 @@ export default CheckboxExample;
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class Menu extends Vue {
+  export default class Example extends Vue {
     form = [
       { val: 'Pepperoni', isChecked: true },
       { val: 'Sausage', isChecked: false },

diff --git a/core/src/components/checkbox/usage/vue.md b/core/src/components/checkbox/usage/vue.md
@@ -29,7 +29,7 @@
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class Menu extends Vue {
+  export default class Example extends Vue {
     form = [
       { val: 'Pepperoni', isChecked: true },
       { val: 'Sausage', isChecked: false },

diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md
@@ -643,7 +643,7 @@ export default Example;
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class Menu extends Vue {
+  export default class Example extends Vue {
     customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
 
     customDayShortNames = [

diff --git a/core/src/components/datetime/usage/vue.md b/core/src/components/datetime/usage/vue.md
@@ -83,7 +83,7 @@
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class Menu extends Vue {
+  export default class Example extends Vue {
     customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
 
     customDayShortNames = [

diff --git a/core/src/components/infinite-scroll/readme.md b/core/src/components/infinite-scroll/readme.md
@@ -74,7 +74,7 @@ export class InfiniteScrollExample {
 
 ```html
 <ion-content>
-  <ion-button onclick="toggleInfiniteScroll()" expand="block">
+  <ion-button onClick="toggleInfiniteScroll()" expand="block">
     Toggle Infinite Scroll
   </ion-button>
 
@@ -114,64 +114,57 @@ function toggleInfiniteScroll() {
 ### React
 
 ```tsx
-import React from 'react';
+import React, { Component } from 'react';
 
-import { IonAvatar } from '@ionic/react';
+import { IonButton, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonList } from '@ionic/react';
 
-const Example: React.SFC<{}> = () => (
+export default class Example extends Component<Props, State> {
 
-  <IonContent>
-    <IonButton onClick="toggleInfiniteScroll()" expand="block">
-      Toggle Infinite Scroll
-    </IonButton>
+  ionInfiniteScrollRef: React.RefObject<HTMLionInfiniteScrollElement>
 
-    <IonList></IonList>
-
-    <IonInfinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
-      <IonInfinite-scrollContent
-        loadingSpinner="bubbles"
-        loadingText="Loading more data...">
-      </IonInfinite-scrollContent>
-    </IonInfinite-scroll>
-  </IonContent>
-
-
-
-  import { Component, ViewChild } from '@angular/core';
-  import { IonInfiniteScroll } from '@ionic/angular';
-
-  @Component({
-    selector: 'infinite-scroll-example',
-    templateUrl: 'infinite-scroll-example.html',
-    styleUrls: ['./infinite-scroll-example.css']
-  })
-  export class InfiniteScrollExample {
-    @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
-
-    constructor() {}
-
-    loadData(event) {
-      setTimeout(() => {
-        console.log('Done');
-        event.target.complete();
+  constructor() {
+    this.ionInfiniteScrollRef = React.createRef<HTMLionInfiniteScrollElement>();
+  }
 
-        // App logic to determine if all data is loaded
-        // and disable the infinite scroll
-        if (data.length == 1000) {
-          event.target.disabled = true;
-        }
-      }, 500);
-    }
+  loadData = (ev: MouseEvent) => {
+    setTimeout(() => {
+      console.log('Done');
+      ev.target.complete();
 
-    toggleInfiniteScroll() {
-      this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
-    }
+      // App logic to determine if all data is loaded
+      // and disable the infinite scroll
+      if (data.length == 1000) {
+        ev.target.disabled = true;
+      }
+    }, 500);
   }
 
+  toggleInfiniteScroll = () => {
+    this.ionInfiniteScrollRef.disabled = !this.ionInfiniteScrollRef.disabled;
+  }
 
-);
-
-export default Example
+  render() {
+    return (
+      <>
+        <IonContent>
+          <IonButton onClick="toggleInfiniteScroll()" expand="block">
+            Toggle Infinite Scroll
+          </IonButton>
+
+          <IonList></IonList>
+
+          <IonInfiniteScroll threshold="100px" onIonInfinite={(ev) => this.loadData(ev)}>
+            <IonInfiniteScrollContent
+              loadingSpinner="bubbles"
+              loadingText="Loading more data...">
+            </IonInfiniteScrollContent>
+          </IonInfiniteScroll>
+        </IonContent>
+      </>
+    );
+  }
+}
+```
 
 
 

diff --git a/core/src/components/infinite-scroll/usage/javascript.md b/core/src/components/infinite-scroll/usage/javascript.md
@@ -1,6 +1,6 @@
 ```html
 <ion-content>
-  <ion-button onclick="toggleInfiniteScroll()" expand="block">
+  <ion-button onClick="toggleInfiniteScroll()" expand="block">
     Toggle Infinite Scroll
   </ion-button>
 

diff --git a/core/src/components/infinite-scroll/usage/react.md b/core/src/components/infinite-scroll/usage/react.md
@@ -1,59 +1,52 @@
 ```tsx
-import React from 'react';
+import React, { Component } from 'react';
 
-import { IonAvatar } from '@ionic/react';
+import { IonButton, IonContent, IonInfiniteScroll, IonInfiniteScrollContent, IonList } from '@ionic/react';
 
-const Example: React.SFC<{}> = () => (
+export default class Example extends Component<Props, State> {
 
-  <IonContent>
-    <IonButton onClick="toggleInfiniteScroll()" expand="block">
-      Toggle Infinite Scroll
-    </IonButton>
+  ionInfiniteScrollRef: React.RefObject<HTMLionInfiniteScrollElement>
 
-    <IonList></IonList>
-
-    <IonInfinite-scroll threshold="100px" (ionInfinite)="loadData($event)">
-      <IonInfinite-scrollContent
-        loadingSpinner="bubbles"
-        loadingText="Loading more data...">
-      </IonInfinite-scrollContent>
-    </IonInfinite-scroll>
-  </IonContent>
-
-
-
-  import { Component, ViewChild } from '@angular/core';
-  import { IonInfiniteScroll } from '@ionic/angular';
-
-  @Component({
-    selector: 'infinite-scroll-example',
-    templateUrl: 'infinite-scroll-example.html',
-    styleUrls: ['./infinite-scroll-example.css']
-  })
-  export class InfiniteScrollExample {
-    @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
-
-    constructor() {}
-
-    loadData(event) {
-      setTimeout(() => {
-        console.log('Done');
-        event.target.complete();
-
-        // App logic to determine if all data is loaded
-        // and disable the infinite scroll
-        if (data.length == 1000) {
-          event.target.disabled = true;
-        }
-      }, 500);
-    }
-
-    toggleInfiniteScroll() {
-      this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
-    }
+  constructor() {
+    this.ionInfiniteScrollRef = React.createRef<HTMLionInfiniteScrollElement>();
   }
 
+  loadData = (ev: MouseEvent) => {
+    setTimeout(() => {
+      console.log('Done');
+      ev.target.complete();
+
+      // App logic to determine if all data is loaded
+      // and disable the infinite scroll
+      if (data.length == 1000) {
+        ev.target.disabled = true;
+      }
+    }, 500);
+  }
 
-);
+  toggleInfiniteScroll = () => {
+    this.ionInfiniteScrollRef.disabled = !this.ionInfiniteScrollRef.disabled;
+  }
 
-export default Example
+  render() {
+    return (
+      <>
+        <IonContent>
+          <IonButton onClick="toggleInfiniteScroll()" expand="block">
+            Toggle Infinite Scroll
+          </IonButton>
+
+          <IonList></IonList>
+
+          <IonInfiniteScroll threshold="100px" onIonInfinite={(ev) => this.loadData(ev)}>
+            <IonInfiniteScrollContent
+              loadingSpinner="bubbles"
+              loadingText="Loading more data...">
+            </IonInfiniteScrollContent>
+          </IonInfiniteScroll>
+        </IonContent>
+      </>
+    );
+  }
+}
+```
diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md
@@ -138,7 +138,6 @@ export class LoadingExample extends Component<Props, State> {
     );
   }
 }
-
 ```
 
 

diff --git a/core/src/components/loading/usage/react.md b/core/src/components/loading/usage/react.md
@@ -41,5 +41,4 @@ export class LoadingExample extends Component<Props, State> {
     );
   }
 }
-
 ```
diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md
@@ -337,7 +337,7 @@ export default Example;
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class MenuExample extends Vue {
+  export default class Example extends Vue {
 
     openFirst() {
       this.menu.enable(true, 'first');

diff --git a/core/src/components/menu/usage/vue.md b/core/src/components/menu/usage/vue.md
@@ -63,7 +63,7 @@
   import { Component, Vue } from 'vue-property-decorator';
 
   @Component()
-  export default class MenuExample extends Vue {
+  export default class Example extends Vue {
 
     openFirst() {
       this.menu.enable(true, 'first');

diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md
@@ -204,7 +204,6 @@ export class ModalExample extends Component<Props, State> {
     );
   }
 }
-
 ```
 
 

diff --git a/core/src/components/modal/usage/react.md b/core/src/components/modal/usage/react.md
@@ -30,5 +30,4 @@ export class ModalExample extends Component<Props, State> {
     );
   }
 }
-
 ```
diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md
@@ -91,7 +91,6 @@ export class PopoverExample extends Component<Props, State> {
     );
   }
 }
-
 ```
 
 

diff --git a/core/src/components/popover/usage/react.md b/core/src/components/popover/usage/react.md
@@ -27,5 +27,4 @@ export class PopoverExample extends Component<Props, State> {
     );
   }
 }
-
 ```