javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-15 17:42:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
closes #15425
This commit is contained in:
Paul Stelzer
2019-05-07 23:21:32 +02:00
committed by Brandy Carney
parent cc8678ad58
commit 9030dcc111
9 changed files with 99 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
angular/src/directives/proxies.ts
View File

@ -603,7 +603,7 @@ export class IonRange {
proxyInputs(IonRange, ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'ticks', 'disabled', 'value']); proxyInputs(IonRange, ['color', 'mode', 'debounce', 'name', 'dualKnobs', 'min', 'max', 'pin', 'snaps', 'step', 'ticks', 'disabled', 'value']);
export declare interface IonRefresher extends StencilComponents<'IonRefresher'> {} 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 { export class IonRefresher {
ionRefresh!: EventEmitter<CustomEvent>; ionRefresh!: EventEmitter<CustomEvent>;
ionPull!: EventEmitter<CustomEvent>; ionPull!: EventEmitter<CustomEvent>;
@ -616,7 +616,7 @@ export class IonRefresher {
} }
} }
proxyMethods(IonRefresher, ['complete', 'cancel', 'getProgress']); 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'> {} export declare interface IonRefresherContent extends StencilComponents<'IonRefresherContent'> {}
@Component({ selector: 'ion-refresher-content', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'] }) @Component({ selector: 'ion-refresher-content', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['pullingIcon', 'pullingText', 'refreshingSpinner', 'refreshingText'] })

1
core/api.txt
View File

@ -841,6 +841,7 @@ ion-refresher-content,prop,refreshingText,string | undefined,undefined,false,fal
ion-refresher,none ion-refresher,none
ion-refresher,prop,closeDuration,string,'280ms',false,false ion-refresher,prop,closeDuration,string,'280ms',false,false
ion-refresher,prop,disabled,boolean,false,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,pullMax,number,this.pullMin + 60,false,false
ion-refresher,prop,pullMin,number,60,false,false ion-refresher,prop,pullMin,number,60,false,false
ion-refresher,prop,snapbackDuration,string,'280ms',false,false ion-refresher,prop,snapbackDuration,string,'280ms',false,false

8
core/src/components.d.ts vendored
View File

@ -3519,6 +3519,10 @@ export namespace Components {
*/ */
'getProgress': () => Promise<number>; '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`. * 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; 'pullMax': number;
@ -3553,6 +3557,10 @@ export namespace Components {
*/ */
'onIonStart'?: (event: CustomEvent<void>) => void; '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`. * 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; 'pullMax'?: number;

51
core/src/components/refresher/readme.md
View File

@ -25,6 +25,13 @@ refresher.
</ion-refresher> </ion-refresher>
</ion-content> </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 --> <!-- Custom Refresher Content -->
<ion-content> <ion-content>
<ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)"> <ion-refresher slot="fixed" (ionRefresh)="doRefresh($event)">
@ -71,6 +78,13 @@ export class RefresherExample {
</ion-refresher> </ion-refresher>
</ion-content> </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 --> <!-- Custom Refresher Content -->
<ion-content> <ion-content>
<ion-refresher slot="fixed"> <ion-refresher slot="fixed">
@ -110,6 +124,13 @@ const Example: React.SFC<{}> = () => (
</IonRefresher> </IonRefresher>
</IonContent> </IonContent>
{/*-- Custom Refresher Properties --*/}
<IonContent>
<IonRefresher slot="fixed" onIonRefresh={doRefresh} pullFactor={0.5} pullMin={100} pullMax={200}>
<IonRefresherContent></IonRefresherContent>
</IonRefresher>
</IonContent>
{/*-- Custom Refresher Content --*/} {/*-- Custom Refresher Content --*/}
<IonContent> <IonContent>
<IonRefresher slot="fixed" onIonRefresh={doRefresh}> <IonRefresher slot="fixed" onIonRefresh={doRefresh}>
@ -139,14 +160,21 @@ export default Example
</ion-refresher> </ion-refresher>
</ion-content> </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 --> <!-- Custom Refresher Content -->
<ion-content> <ion-content>
<ion-refresher slot="fixed" @ionRefresh="doRefresh($event)"> <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
<ion-refresher-content <ion-refresher-content
pullingIcon="arrow-dropdown" pulling-icon="arrow-dropdown"
pullingText="Pull to refresh" pulling-text="Pull to refresh"
refreshingSpinner="circles" refreshing-spinner="circles"
refreshingText="Refreshing..."> refreshing-text="Refreshing...">
</ion-refresher-content> </ion-refresher-content>
</ion-refresher> </ion-refresher>
</ion-content> </ion-content>
@ -174,13 +202,14 @@ export default Example
## Properties ## Properties
| Property | Attribute | Description | Type | Default | | Property | Attribute | Description | Type | Default |
| ------------------ | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------- | | ------------------ | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------------------- |
| `closeDuration` | `close-duration` | Time it takes to close the refresher. | `string` | `'280ms'` | | `closeDuration` | `close-duration` | Time it takes to close the refresher. | `string` | `'280ms'` |
| `disabled` | `disabled` | If `true`, the refresher will be hidden. | `boolean` | `false` | | `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` | | `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` |
| `pullMin` | `pull-min` | The minimum distance the user must pull down until the refresher will go into the `refreshing` state. | `number` | `60` | | `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` |
| `snapbackDuration` | `snapback-duration` | Time it takes the refresher to to snap back to the `refreshing` state. | `string` | `'280ms'` | | `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 ## Events

18
core/src/components/refresher/refresher.tsx
View File

@ -58,6 +58,19 @@ export class Refresher implements ComponentInterface {
*/ */
@Prop() snapbackDuration = '280ms'; @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. * 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, // this method can get called like a bazillion times per second,
// so it's built to be as efficient as possible, and does its // so it's built to be as efficient as possible, and does its
// best to do any DOM read/writes only when absolutely necessary // 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; const ev = detail.event as TouchEvent;
if (ev.touches && ev.touches.length > 1) { if (ev.touches && ev.touches.length > 1) {
return; return;
@ -201,7 +214,8 @@ export class Refresher implements ComponentInterface {
return; 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 // don't bother if they're scrolling up
// and have not already started dragging // and have not already started dragging
if (deltaY <= 0) { if (deltaY <= 0) {

7
core/src/components/refresher/usage/angular.md
View File

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

7
core/src/components/refresher/usage/javascript.md
View File

@ -6,6 +6,13 @@
</ion-refresher> </ion-refresher>
</ion-content> </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 --> <!-- Custom Refresher Content -->
<ion-content> <ion-content>
<ion-refresher slot="fixed"> <ion-refresher slot="fixed">

7
core/src/components/refresher/usage/react.md
View File

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

15
core/src/components/refresher/usage/vue.md
View File

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