revert(): revert base components feature (#26692)

The Ionic Framework team would like to re-evaluate our approach to improving customization options when building mobile applications. We are looking at other solutions that a) make customizing an app UI easier and b) are applicable to a broader set of developers.
This commit is contained in:
Liam DeBeasi
2023-01-30 11:52:36 -05:00
committed by GitHub
parent 592a4f1a37
commit b78b454e08
114 changed files with 387 additions and 1587 deletions

View File

@ -1,7 +1,7 @@
import type { ComponentInterface, EventEmitter } from '@stencil/core';
import { Component, Element, Event, Host, Method, Prop, State, Watch, h, readTask, writeTask } from '@stencil/core';
import { getIonStylesheet, getIonBehavior } from '../../global/ionic-global';
import { getIonMode } from '../../global/ionic-global';
import type { Animation, Gesture, GestureDetail, RefresherEventDetail } from '../../interface';
import { getTimeGivenProgression } from '../../utils/animation/cubic-bezier';
import {
@ -24,14 +24,9 @@ import {
translateElement,
} from './refresher.utils';
/**
* @virtualProp {true | false} useBase - useBase determines if base components is enabled.
* @virtualProp {"ios" | "md"} mode - The mode determines which platform styles to use.
*/
@Component({
tag: 'ion-refresher',
styleUrls: {
base: 'refresher.scss',
ios: 'refresher.ios.scss',
md: 'refresher.md.scss',
},
@ -145,7 +140,7 @@ export class Refresher implements ComponentInterface {
@Event() ionStart!: EventEmitter<void>;
private async checkNativeRefresher() {
const useNativeRefresher = await shouldUseNativeRefresher(this.el, getIonStylesheet(this));
const useNativeRefresher = await shouldUseNativeRefresher(this.el, getIonMode(this));
if (useNativeRefresher && !this.nativeRefresher) {
const contentEl = this.el.closest('ion-content');
this.setupNativeRefresher(contentEl);
@ -166,7 +161,7 @@ export class Refresher implements ComponentInterface {
private async resetNativeRefresher(el: HTMLElement | undefined, state: RefresherState) {
this.state = state;
if (getIonBehavior(this) === 'ios') {
if (getIonMode(this) === 'ios') {
await translateElement(el, undefined, 300);
} else {
await transitionEndAsync(this.el.querySelector('.refresher-refreshing-icon'), 200);
@ -432,7 +427,7 @@ export class Refresher implements ComponentInterface {
'ion-refresher-content .refresher-refreshing ion-spinner'
) as HTMLIonSpinnerElement;
if (getIonStylesheet(this) === 'ios') {
if (getIonMode(this) === 'ios') {
this.setupiOSNativeRefresher(pullingSpinner, refreshingSpinner);
} else {
this.setupMDNativeRefresher(contentEl, pullingSpinner, refreshingSpinner);
@ -471,7 +466,7 @@ export class Refresher implements ComponentInterface {
*/
this.backgroundContentEl = await contentEl.getBackgroundElement();
if (await shouldUseNativeRefresher(this.el, getIonBehavior(this))) {
if (await shouldUseNativeRefresher(this.el, getIonMode(this))) {
this.setupNativeRefresher(contentEl);
} else {
this.gesture = (await import('../../utils/gesture')).createGesture({
@ -740,7 +735,7 @@ export class Refresher implements ComponentInterface {
}
render() {
const mode = getIonStylesheet(this);
const mode = getIonMode(this);
return (
<Host
slot="fixed"