Skip to content
Permalink
Browse files

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

…#18084)

also updates documentation surrounding the reorder & infinite scroll

fixes #16302
  • Loading branch information...
brandyscarney committed Apr 22, 2019
1 parent a5b9066 commit bd96491d03c98c9ac422baf9bdf52850c4cfd7b2
Showing with 1,576 additions and 551 deletions.
  1. +1 βˆ’1 core/src/components.d.ts
  2. +0 βˆ’1 core/src/components/action-sheet/readme.md
  3. +0 βˆ’1 core/src/components/action-sheet/usage/react.md
  4. +0 βˆ’1 core/src/components/alert/readme.md
  5. +0 βˆ’1 core/src/components/alert/usage/react.md
  6. +1 βˆ’1 core/src/components/backdrop/readme.md
  7. +1 βˆ’1 core/src/components/backdrop/usage/vue.md
  8. +1 βˆ’1 core/src/components/checkbox/readme.md
  9. +1 βˆ’1 core/src/components/checkbox/usage/vue.md
  10. +1 βˆ’1 core/src/components/datetime/readme.md
  11. +1 βˆ’1 core/src/components/datetime/usage/vue.md
  12. +43 βˆ’50 core/src/components/infinite-scroll/readme.md
  13. +1 βˆ’1 core/src/components/infinite-scroll/usage/javascript.md
  14. +43 βˆ’50 core/src/components/infinite-scroll/usage/react.md
  15. +0 βˆ’1 core/src/components/loading/readme.md
  16. +0 βˆ’1 core/src/components/loading/usage/react.md
  17. +1 βˆ’1 core/src/components/menu/readme.md
  18. +1 βˆ’1 core/src/components/menu/usage/vue.md
  19. +0 βˆ’1 core/src/components/modal/readme.md
  20. +0 βˆ’1 core/src/components/modal/usage/react.md
  21. +0 βˆ’1 core/src/components/popover/readme.md
  22. +0 βˆ’1 core/src/components/popover/usage/react.md
  23. +2 βˆ’4 core/src/components/refresher/readme.md
  24. +0 βˆ’3 core/src/components/refresher/usage/react.md
  25. +2 βˆ’1 core/src/components/refresher/usage/vue.md
  26. +445 βˆ’220 core/src/components/reorder-group/readme.md
  27. +12 βˆ’3 core/src/components/reorder-group/reorder-group.tsx
  28. +5 βˆ’2 core/src/components/reorder-group/test/basic/index.html
  29. +62 βˆ’0 core/src/components/reorder-group/test/data/index.html
  30. +133 βˆ’47 core/src/components/reorder-group/usage/angular.md
  31. +98 βˆ’52 core/src/components/reorder-group/usage/javascript.md
  32. +91 βˆ’36 core/src/components/reorder-group/usage/react.md
  33. +114 βˆ’47 core/src/components/reorder-group/usage/vue.md
  34. +224 βˆ’4 core/src/components/reorder/readme.md
  35. +68 βˆ’0 core/src/components/reorder/usage/angular.md
  36. +68 βˆ’0 core/src/components/reorder/usage/javascript.md
  37. +77 βˆ’0 core/src/components/reorder/usage/react.md
  38. +69 βˆ’0 core/src/components/reorder/usage/vue.md
  39. +1 βˆ’1 core/src/components/segment-button/readme.md
  40. +1 βˆ’1 core/src/components/segment-button/usage/vue.md
  41. +1 βˆ’1 core/src/components/segment/readme.md
  42. +1 βˆ’1 core/src/components/segment/usage/vue.md
  43. +1 βˆ’1 core/src/components/select/readme.md
  44. +1 βˆ’1 core/src/components/select/usage/vue.md
  45. +1 βˆ’1 core/src/components/skeleton-text/readme.md
  46. +1 βˆ’1 core/src/components/skeleton-text/usage/vue.md
  47. +1 βˆ’1 core/src/components/slides/readme.md
  48. +1 βˆ’1 core/src/components/slides/usage/vue.md
  49. +0 βˆ’1 core/src/components/toast/readme.md
  50. +0 βˆ’1 core/src/components/toast/usage/react.md
@@ -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>;
/**
@@ -186,7 +186,6 @@ export default class ActionSheetExample extends Component<Props, State> {
);
}
}
```
@@ -59,5 +59,4 @@ export default class ActionSheetExample extends Component<Props, State> {
);
}
}
```
@@ -797,7 +797,6 @@ export default class AlertExample extends Component<Props, State> {
);
}
}
```


@@ -267,5 +267,4 @@ export default class AlertExample extends Component<Props, State> {
);
}
}
```
@@ -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;
@@ -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;
@@ -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 },
@@ -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 },
@@ -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 = [
@@ -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 = [
@@ -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>
</>
);
}
}
```



@@ -1,6 +1,6 @@
```html
<ion-content>
<ion-button onclick="toggleInfiniteScroll()" expand="block">
<ion-button onClick="toggleInfiniteScroll()" expand="block">
Toggle Infinite Scroll
</ion-button>

@@ -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>
</>
);
}
}
```
@@ -138,7 +138,6 @@ export class LoadingExample extends Component<Props, State> {
);
}
}
```


@@ -41,5 +41,4 @@ export class LoadingExample extends Component<Props, State> {
);
}
}
```
@@ -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');
@@ -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');
@@ -204,7 +204,6 @@ export class ModalExample extends Component<Props, State> {
);
}
}
```


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


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

0 comments on commit bd96491

Please sign in to comment.
You can’t perform that action at this time.