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

feat(refresher): add iOS native refresher (#20037)

Browse Source 
fixes #18664
This commit is contained in:
Liam DeBeasi
2019-12-18 10:52:58 -05:00
committed by GitHub
parent 6d6aba6d40
commit 04e7c03132
17 changed files with 684 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/src/components/refresher-content/readme.md
View File

@ -11,7 +11,7 @@ The refresher content contains the text, icon and spinner to display during a pu
| Property | Attribute | Description | Type | Default |
| ------------------- | -------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------- | ----------- |
| `pullingIcon` | `pulling-icon` | A static icon to display when you begin to pull down | `null \| string \| undefined` | `undefined` |
| `pullingIcon` | `pulling-icon` | A static icon or a spinner to display when you begin to pull down. A spinner name can be provided to gradually show tick marks when pulling down on iOS devices. | `null \| string \| undefined` | `undefined` |
| `pullingText` | `pulling-text` | The text you want to display when you begin to pull down. `pullingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string \| undefined` | `undefined` |
| `refreshingSpinner` | `refreshing-spinner` | An animated SVG spinner that shows when refreshing begins | `"bubbles" \| "circles" \| "circular" \| "crescent" \| "dots" \| "lines" \| "lines-small" \| null \| undefined` | `undefined` |
| `refreshingText` | `refreshing-text` | The text you want to display when performing a refresh. `refreshingText` can accept either plaintext or HTML as a string. To display characters normally reserved for HTML, they must be escaped. For example `<Ionic>` would become `&lt;Ionic&gt;` For more information: [Security Documentation](https://ionicframework.com/docs/faq/security) | `string \| undefined` | `undefined` |
@ -21,14 +21,14 @@ The refresher content contains the text, icon and spinner to display during a pu
### Depends on
- ion-icon
- [ion-spinner](../spinner)
- ion-icon
### Graph
```mermaid
graph TD;
ion-refresher-content --> ion-icon
ion-refresher-content --> ion-spinner
ion-refresher-content --> ion-icon
style ion-refresher-content fill:#f9f,stroke:#333,stroke-width:4px
```

23
core/src/components/refresher-content/refresher-content.tsx
View File

@ -3,7 +3,9 @@ import { Component, ComponentInterface, Host, Prop, h } from '@stencil/core';
import { config } from '../../global/config';
import { getIonMode } from '../../global/ionic-global';
import { SpinnerTypes } from '../../interface';
import { isPlatform } from '../../utils/platform';
import { sanitizeDOMString } from '../../utils/sanitization';
import { SPINNERS } from '../spinner/spinner-configs';
@Component({
tag: 'ion-refresher-content'
@ -11,9 +13,11 @@ import { sanitizeDOMString } from '../../utils/sanitization';
export class RefresherContent implements ComponentInterface {
/**
* A static icon to display when you begin to pull down
* A static icon or a spinner to display when you begin to pull down.
* A spinner name can be provided to gradually show tick marks
* when pulling down on iOS devices.
*/
@Prop({ mutable: true }) pullingIcon?: string | null;
@Prop({ mutable: true }) pullingIcon?: SpinnerTypes | string | null;
/**
* The text you want to display when you begin to pull down.
@ -44,7 +48,11 @@ export class RefresherContent implements ComponentInterface {
componentWillLoad() {
if (this.pullingIcon === undefined) {
this.pullingIcon = config.get('refreshingIcon', 'arrow-down');
const mode = getIonMode(this);
this.pullingIcon = config.get(
'refreshingIcon',
mode === 'ios' && isPlatform('mobile') ? config.get('spinner', 'lines') : 'arrow-down'
);
}
if (this.refreshingSpinner === undefined) {
const mode = getIonMode(this);
@ -56,10 +64,17 @@ export class RefresherContent implements ComponentInterface {
}
render() {
const pullingIcon = this.pullingIcon;
const hasSpinner = pullingIcon != null && SPINNERS[pullingIcon] as any !== undefined;
return (
<Host class={getIonMode(this)}>
<div class="refresher-pulling">
{this.pullingIcon &&
{this.pullingIcon && hasSpinner &&
<div class="refresher-pulling-icon">
<ion-spinner name={this.pullingIcon as SpinnerTypes} paused></ion-spinner>
</div>
}
{this.pullingIcon && !hasSpinner &&
<div class="refresher-pulling-icon">
<ion-icon icon={this.pullingIcon} lazy={false}></ion-icon>
</div>