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

chore(): sync

Browse Source
This commit is contained in:
Liam DeBeasi
2024-01-25 12:35:32 -05:00
parent a8e1e168ee 9a092c03cc
commit 74de16f862
110 changed files with 1819 additions and 585 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -25,6 +25,9 @@ import {
translateElement,
} from './refresher.utils';
/**
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*/
@Component({
tag: 'ion-refresher',
styleUrls: {

31
core/src/components/refresher/refresher.utils.ts
View File

@ -1,7 +1,6 @@
import { writeTask } from '@stencil/core';
import { createAnimation } from '@utils/animation/animation';
import { clamp, componentOnReady, transitionEndAsync } from '@utils/helpers';
import { isPlatform } from '@utils/platform';
// MD Native Refresher
// -----------------------------
@ -195,6 +194,25 @@ export const translateElement = (el?: HTMLElement, value?: string, duration = 20
// Utils
// -----------------------------
/**
* In order to use the native iOS refresher the device must support rubber band scrolling.
* As part of this, we need to exclude Desktop Safari because it has a slightly different rubber band effect that is not compatible with the native refresher in Ionic.
*
* We also need to be careful not to include devices that spoof their user agent.
* For example, when using iOS emulation in Chrome the user agent will be spoofed such that
* navigator.maxTouchPointer > 0. To work around this,
* we check to see if the apple-pay-logo is supported as a named image which is only
* true on Apple devices.
*
* We previously checked referencEl.style.webkitOverflowScrolling to explicitly check
* for rubber band support. However, this property was removed on iPadOS and it's possible
* that this will be removed on iOS in the future too.
*
*/
export const supportsRubberBandScrolling = () => {
return navigator.maxTouchPoints > 0 && CSS.supports('background: -webkit-named-image(apple-pay-logo-black)');
};
export const shouldUseNativeRefresher = async (referenceEl: HTMLIonRefresherElement, mode: string) => {
const refresherContent = referenceEl.querySelector('ion-refresher-content');
if (!refresherContent) {
@ -209,15 +227,6 @@ export const shouldUseNativeRefresher = async (referenceEl: HTMLIonRefresherElem
return (
pullingSpinner !== null &&
refreshingSpinner !== null &&
/**
* We use webkitOverflowScrolling for feature detection with rubber band scrolling
* on iOS. When doing referenceEl.style, webkitOverflowScrolling is undefined on non-iOS platforms.
* However, it will be the empty string on iOS.
* Note that we do not use getPropertyValue (and thus need to cast as any) because calling
* getPropertyValue('-webkit-overflow-scrolling') will return the empty string if it is not
* set on the element, even if the platform does not support that.
*/
((mode === 'ios' && isPlatform('mobile') && (referenceEl.style as any).webkitOverflowScrolling !== undefined) ||
mode === 'md')
((mode === 'ios' && supportsRubberBandScrolling()) || mode === 'md')
);
};