Skip to content
Permalink
Browse files

feat(refresher): add pullFactor property to control speed (#16697)

closes #15425
  • Loading branch information...
paulstelzer authored and brandyscarney committed May 7, 2019
1 parent cc8678a commit 9030dcc111cc6486d22b45852a9906d18fa51f0c
@@ -603,7 +603,7 @@ export class IonRange {
proxyInputs(IonRange, ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'ticks', 'disabled', 'value']);

export declare interface IonRefresher extends StencilComponents<'IonRefresher'> {}
@Component({ selector: 'ion-refresher', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled'] })
@Component({ selector: 'ion-refresher', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'pullFactor', 'disabled'] })
export class IonRefresher {
ionRefresh!: EventEmitter<CustomEvent>;
ionPull!: EventEmitter<CustomEvent>;
@@ -616,7 +616,7 @@ export class IonRefresher {
}
}
proxyMethods(IonRefresher, ['complete', 'cancel', 'getProgress']);
proxyInputs(IonRefresher, ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'disabled']);
proxyInputs(IonRefresher, ['pullMin', 'pullMax', 'closeDuration', 'snapbackDuration', 'pullFactor', 'disabled']);

export declare interface IonRefresherContent extends StencilComponents<'IonRefresherContent'> {}
@Component({ selector: 'ion-refresher-content', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'] })
@@ -841,6 +841,7 @@ ion-refresher-content,prop,refreshingText,string | undefined,undefined,false,fal
ion-refresher,none
ion-refresher,prop,closeDuration,string,'280ms',false,false
ion-refresher,prop,disabled,boolean,false,false,false
ion-refresher,prop,pullFactor,number,1,false,false
ion-refresher,prop,pullMax,number,this.pullMin + 60,false,false
ion-refresher,prop,pullMin,number,60,false,false
ion-refresher,prop,snapbackDuration,string,'280ms',false,false
@@ -3519,6 +3519,10 @@ export namespace Components {
*/
'getProgress': () => Promise<number>;
/**
* How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead. For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.
*/
'pullFactor': number;
/**
* The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`.
*/
'pullMax': number;
@@ -3553,6 +3557,10 @@ export namespace Components {
*/
'onIonStart'?: (event: CustomEvent<void>) => void;
/**
* How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead. For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved.
*/
'pullFactor'?: number;
/**
* The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`.
*/
'pullMax'?: number;
@@ -25,6 +25,13 @@ refresher.
</ion-refresher>
</ion-content>

<!-- Custom Refresher Properties -->
<ion-content>
<ion-refresher slot="fixed" pullFactor="0.5" pullMin="100" pullMax="200">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
</ion-content>

<!-- Custom Refresher Content -->
<ion-content>
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
@@ -71,6 +78,13 @@ export class RefresherExample {
</ion-refresher>
</ion-content>

<!-- Custom Refresher Properties -->
<ion-content>
<ion-refresher slot="fixed" pull-factor="0.5" pull-min="100" pull-max="200">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
</ion-content>

<!-- Custom Refresher Content -->
<ion-content>
<ion-refresher slot="fixed">
@@ -110,6 +124,13 @@ const Example: React.SFC<{}> = () => (
</IonRefresher>
</IonContent>
{/*-- Custom Refresher Properties --*/}
<IonContent>
<IonRefresher slot="fixed" onIonRefresh={doRefresh} pullFactor={0.5} pullMin={100} pullMax={200}>
<IonRefresherContent></IonRefresherContent>
</IonRefresher>
</IonContent>
{/*-- Custom Refresher Content --*/}
<IonContent>
<IonRefresher slot="fixed" onIonRefresh={doRefresh}>
@@ -139,14 +160,21 @@ export default Example
</ion-refresher>
</ion-content>
<!-- Custom Refresher Properties -->
<ion-content>
<ion-refresher slot="fixed" pull-factor="0.5" pull-min="100" pull-max="200">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
</ion-content>
<!-- Custom Refresher Content -->
<ion-content>
<ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
pulling-icon="arrow-dropdown"
pulling-text="Pull to refresh"
refreshing-spinner="circles"
refreshing-text="Refreshing...">
</ion-refresher-content>
</ion-refresher>
</ion-content>
@@ -174,13 +202,14 @@ export default Example

## Properties

| Property | Attribute | Description | Type | Default |
| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------- |
| `closeDuration` | `close-duration` | Time it takes to close the refresher. | `string` | `'280ms'` |
| `disabled` | `disabled` | If `true`, the refresher will be hidden. | `boolean` | `false` |
| `pullMax` | `pull-max` | The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. | `number` | `this.pullMin + 60` |
| `pullMin` | `pull-min` | The minimum distance the user must pull down until the refresher will go into the `refreshing` state. | `number` | `60` |
| `snapbackDuration` | `snapback-duration` | Time it takes the refresher to to snap back to the `refreshing` state. | `string` | `'280ms'` |
| Property | Attribute | Description | Type | Default |
| ------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------- |
| `closeDuration` | `close-duration` | Time it takes to close the refresher. | `string` | `'280ms'` |
| `disabled` | `disabled` | If `true`, the refresher will be hidden. | `boolean` | `false` |
| `pullFactor` | `pull-factor` | How much to multiply the pull speed by. To slow the pull animation down, pass a number less than `1`. To speed up the pull, pass a number greater than `1`. The default value is `1` which is equal to the speed of the cursor. If a negative value is passed in, the factor will be `1` instead. For example: If the value passed is `1.2` and the content is dragged by `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels (an increase of 20 percent). If the value passed is `0.8`, the dragged amount will be `8` pixels, less than the amount the cursor has moved. | `number` | `1` |
| `pullMax` | `pull-max` | The maximum distance of the pull until the refresher will automatically go into the `refreshing` state. Defaults to the result of `pullMin + 60`. | `number` | `this.pullMin + 60` |
| `pullMin` | `pull-min` | The minimum distance the user must pull down until the refresher will go into the `refreshing` state. | `number` | `60` |
| `snapbackDuration` | `snapback-duration` | Time it takes the refresher to to snap back to the `refreshing` state. | `string` | `'280ms'` |


## Events
@@ -58,6 +58,19 @@ export class Refresher implements ComponentInterface {
*/
@Prop() snapbackDuration = '280ms';

/**
* How much to multiply the pull speed by. To slow the pull animation down,
* pass a number less than `1`. To speed up the pull, pass a number greater
* than `1`. The default value is `1` which is equal to the speed of the cursor.
* If a negative value is passed in, the factor will be `1` instead.
*
* For example: If the value passed is `1.2` and the content is dragged by
* `10` pixels, instead of `10` pixels the content will be pulled by `12` pixels
* (an increase of 20 percent). If the value passed is `0.8`, the dragged amount
* will be `8` pixels, less than the amount the cursor has moved.
*/
@Prop() pullFactor = 1;

/**
* If `true`, the refresher will be hidden.
*/
@@ -188,7 +201,7 @@ export class Refresher implements ComponentInterface {
// this method can get called like a bazillion times per second,
// so it's built to be as efficient as possible, and does its
// best to do any DOM read/writes only when absolutely necessary
// if multitouch then get out immediately
// if multi-touch then get out immediately
const ev = detail.event as TouchEvent;
if (ev.touches && ev.touches.length > 1) {
return;
@@ -201,7 +214,8 @@ export class Refresher implements ComponentInterface {
return;
}

const deltaY = detail.deltaY;
const pullFactor = (Number.isNaN(this.pullFactor) || this.pullFactor < 0) ? 1 : this.pullFactor;
const deltaY = detail.deltaY * pullFactor;
// don't bother if they're scrolling up
// and have not already started dragging
if (deltaY <= 0) {
@@ -6,6 +6,13 @@
</ion-refresher>
</ion-content>

<!-- Custom Refresher Properties -->
<ion-content>
<ion-refresher slot="fixed" pullFactor="0.5" pullMin="100" pullMax="200">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
</ion-content>

<!-- Custom Refresher Content -->
<ion-content>
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
@@ -6,6 +6,13 @@
</ion-refresher>
</ion-content>

<!-- Custom Refresher Properties -->
<ion-content>
<ion-refresher slot="fixed" pull-factor="0.5" pull-min="100" pull-max="200">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
</ion-content>

<!-- Custom Refresher Content -->
<ion-content>
<ion-refresher slot="fixed">
@@ -21,6 +21,13 @@ const Example: React.SFC<{}> = () => (
</IonRefresher>
</IonContent>
{/*-- Custom Refresher Properties --*/}
<IonContent>
<IonRefresher slot="fixed" onIonRefresh={doRefresh} pullFactor={0.5} pullMin={100} pullMax={200}>
<IonRefresherContent></IonRefresherContent>
</IonRefresher>
</IonContent>
{/*-- Custom Refresher Content --*/}
<IonContent>
<IonRefresher slot="fixed" onIonRefresh={doRefresh}>
@@ -7,14 +7,21 @@
</ion-refresher>
</ion-content>

<!-- Custom Refresher Properties -->
<ion-content>
<ion-refresher slot="fixed" pull-factor="0.5" pull-min="100" pull-max="200">
<ion-refresher-content></ion-refresher-content>
</ion-refresher>
</ion-content>

<!-- Custom Refresher Content -->
<ion-content>
<ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
<ion-refresher-content
pullingIcon="arrow-dropdown"
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing...">
pulling-icon="arrow-dropdown"
pulling-text="Pull to refresh"
refreshing-spinner="circles"
refreshing-text="Refreshing...">
</ion-refresher-content>
</ion-refresher>
</ion-content>

0 comments on commit 9030dcc

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