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

…#18084)

also updates documentation surrounding the reorder & infinite scroll

fixes #16302

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>;
    /**

core/src/components/action-sheet/readme.md

@@ -186,7 +186,6 @@ export default class ActionSheetExample extends Component<Props, State> {
    );
  }
}

```

core/src/components/action-sheet/usage/react.md

@@ -59,5 +59,4 @@ export default class ActionSheetExample extends Component<Props, State> {
    );
  }
}

```

core/src/components/alert/readme.md

@@ -797,7 +797,6 @@ export default class AlertExample extends Component<Props, State> {
    );
  }
}

```

core/src/components/alert/usage/react.md

@@ -267,5 +267,4 @@ export default class AlertExample extends Component<Props, State> {
    );
  }
}

```

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;

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;

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 },

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 },

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 = [

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 = [

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>
      </>
    );
  }
}
```

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>

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>
      </>
    );
  }
}
```

core/src/components/loading/readme.md

@@ -138,7 +138,6 @@ export class LoadingExample extends Component<Props, State> {
    );
  }
}

```

core/src/components/loading/usage/react.md

@@ -41,5 +41,4 @@ export class LoadingExample extends Component<Props, State> {
    );
  }
}

```

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');

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');

core/src/components/modal/readme.md

@@ -204,7 +204,6 @@ export class ModalExample extends Component<Props, State> {
    );
  }
}

```

core/src/components/modal/usage/react.md

@@ -30,5 +30,4 @@ export class ModalExample extends Component<Props, State> {
    );
  }
}

```

core/src/components/popover/readme.md

@@ -91,7 +91,6 @@ export class PopoverExample extends Component<Props, State> {
    );
  }
}

```

core/src/components/popover/usage/react.md

@@ -27,5 +27,4 @@ export class PopoverExample extends Component<Props, State> {
    );
  }
}

```