@ionic/react 8.8.19-dev.11787007863.1976a30e → 8.8.19-dev.11787083540.1511caf2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +459 -1173
- package/dist/index.js.map +1 -1
- package/dist/types/components/IonActionSheet.d.ts +1 -1
- package/dist/types/components/IonAlert.d.ts +1 -1
- package/dist/types/components/IonIcon.d.ts +1 -1
- package/dist/types/components/IonLoading.d.ts +1 -1
- package/dist/types/components/IonModal.d.ts +1 -1
- package/dist/types/components/IonPage.d.ts +1 -1
- package/dist/types/components/IonPickerLegacy.d.ts +2 -0
- package/dist/types/components/IonPopover.d.ts +1 -1
- package/dist/types/components/IonRedirect.d.ts +16 -0
- package/dist/types/components/IonRoute.d.ts +3 -4
- package/dist/types/components/IonRouterContext.d.ts +0 -8
- package/dist/types/components/IonRouterOutlet.d.ts +0 -1
- package/dist/types/components/IonToast.d.ts +1 -1
- package/dist/types/components/__tests__/utils.spec.d.ts +1 -1
- package/dist/types/components/createInlineOverlayComponent.d.ts +1 -1
- package/dist/types/components/createRoutingComponent.d.ts +1 -1
- package/dist/types/components/index.d.ts +6 -4
- package/dist/types/components/navigation/IonBackButton.d.ts +1 -1
- package/dist/types/components/navigation/IonNav.d.ts +1 -2
- package/dist/types/components/navigation/IonTabBar.d.ts +1 -1
- package/dist/types/components/navigation/IonTabs.d.ts +3 -2
- package/dist/types/components/proxies.d.ts +73 -0
- package/dist/types/components/react-component-lib/createComponent.d.ts +1 -1
- package/dist/types/components/react-component-lib/utils/index.d.ts +1 -1
- package/dist/types/components/routing-proxies.d.ts +14 -14
- package/dist/types/components/utils/index.d.ts +13 -4
- package/dist/types/contexts/NavContext.d.ts +2 -0
- package/dist/types/hooks/useIonModal.d.ts +3 -10
- package/dist/types/hooks/useIonPicker.d.ts +27 -0
- package/dist/types/hooks/useIonPopover.d.ts +4 -11
- package/dist/types/index.d.ts +0 -1
- package/dist/types/lifecycle/IonLifeCycleHOC.d.ts +3 -1
- package/dist/types/models/ReactComponentOrElement.d.ts +1 -1
- package/dist/types/routing/LocationHistory.d.ts +0 -7
- package/dist/types/routing/NavManager.d.ts +4 -2
- package/dist/types/routing/OutletPageManager.d.ts +0 -2
- package/dist/types/routing/PageManager.d.ts +0 -8
- package/dist/types/routing/RouteManagerContext.d.ts +1 -6
- package/dist/types/routing/ViewLifeCycleManager.d.ts +17 -18
- package/dist/types/routing/ViewStacks.d.ts +2 -2
- package/package.json +18 -37
- package/dist/types/components/__tests__/createRoutingComponent.spec.d.ts +0 -1
- package/dist/types/components/components.d.ts +0 -326
- package/dist/types/components/react-component-lib/__tests__/createComponent.spec.d.ts +0 -1
- package/dist/types/hooks/__tests__/overlay-hook-types.spec.d.ts +0 -1
- package/dist/types/utils/__tests__/debug.spec.d.ts +0 -1
- package/dist/types/utils/config.d.ts +0 -7
- package/dist/types/utils/debug.d.ts +0 -9
package/dist/index.js
CHANGED
|
@@ -1,80 +1,80 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import React, { useContext, useRef, useEffect, createElement, useState, useMemo, Fragment as Fragment$1, useCallback } from 'react';
|
|
3
|
-
import { isPlatform as isPlatform$1, getPlatforms as getPlatforms$1, componentOnReady, createAnimation, actionSheetController, alertController, toastController, modalController, popoverController, loadingController, initialize } from '@ionic/core/components';
|
|
4
|
-
export { IonicSafeString, IonicSlides,
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import {
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
11
|
-
import {
|
|
12
|
-
import {
|
|
13
|
-
import {
|
|
14
|
-
import {
|
|
15
|
-
import {
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import {
|
|
19
|
-
import {
|
|
20
|
-
import {
|
|
21
|
-
import {
|
|
22
|
-
import {
|
|
23
|
-
import {
|
|
24
|
-
import {
|
|
25
|
-
import {
|
|
26
|
-
import {
|
|
27
|
-
import {
|
|
28
|
-
import {
|
|
29
|
-
import {
|
|
30
|
-
import {
|
|
31
|
-
import {
|
|
32
|
-
import {
|
|
33
|
-
import {
|
|
34
|
-
import {
|
|
35
|
-
import {
|
|
36
|
-
import {
|
|
37
|
-
import {
|
|
38
|
-
import {
|
|
39
|
-
import {
|
|
40
|
-
import {
|
|
41
|
-
import {
|
|
42
|
-
import {
|
|
43
|
-
import {
|
|
44
|
-
import {
|
|
45
|
-
import { defineCustomElement as defineCustomElement$
|
|
46
|
-
import {
|
|
47
|
-
import {
|
|
48
|
-
import {
|
|
49
|
-
import {
|
|
50
|
-
import {
|
|
51
|
-
import {
|
|
52
|
-
import {
|
|
53
|
-
import {
|
|
54
|
-
import {
|
|
55
|
-
import {
|
|
56
|
-
import {
|
|
57
|
-
import {
|
|
58
|
-
import {
|
|
59
|
-
import {
|
|
60
|
-
import {
|
|
61
|
-
import {
|
|
62
|
-
import {
|
|
63
|
-
import {
|
|
64
|
-
import {
|
|
65
|
-
import {
|
|
66
|
-
import {
|
|
67
|
-
import {
|
|
68
|
-
import {
|
|
69
|
-
import {
|
|
70
|
-
import {
|
|
71
|
-
import {
|
|
72
|
-
import {
|
|
73
|
-
import {
|
|
74
|
-
import {
|
|
75
|
-
import {
|
|
76
|
-
import {
|
|
77
|
-
import {
|
|
3
|
+
import { isPlatform as isPlatform$1, getPlatforms as getPlatforms$1, componentOnReady, createAnimation, actionSheetController, alertController, toastController, modalController, popoverController, pickerController, loadingController, initialize } from '@ionic/core/components';
|
|
4
|
+
export { IonicSafeString, IonicSlides, createAnimation, createGesture, getIonPageElement, getTimeGivenProgression, iosTransitionAnimation, mdTransitionAnimation, openURL } from '@ionic/core/components';
|
|
5
|
+
import ReactDOM, { createPortal } from 'react-dom';
|
|
6
|
+
import { defineCustomElement as defineCustomElement$1 } from '@ionic/core/components/ion-accordion.js';
|
|
7
|
+
import { defineCustomElement as defineCustomElement$2 } from '@ionic/core/components/ion-accordion-group.js';
|
|
8
|
+
import { defineCustomElement as defineCustomElement$3 } from '@ionic/core/components/ion-avatar.js';
|
|
9
|
+
import { defineCustomElement as defineCustomElement$4 } from '@ionic/core/components/ion-backdrop.js';
|
|
10
|
+
import { defineCustomElement as defineCustomElement$5 } from '@ionic/core/components/ion-badge.js';
|
|
11
|
+
import { defineCustomElement as defineCustomElement$6 } from '@ionic/core/components/ion-breadcrumbs.js';
|
|
12
|
+
import { defineCustomElement as defineCustomElement$7 } from '@ionic/core/components/ion-buttons.js';
|
|
13
|
+
import { defineCustomElement as defineCustomElement$8 } from '@ionic/core/components/ion-card-content.js';
|
|
14
|
+
import { defineCustomElement as defineCustomElement$9 } from '@ionic/core/components/ion-card-header.js';
|
|
15
|
+
import { defineCustomElement as defineCustomElement$a } from '@ionic/core/components/ion-card-subtitle.js';
|
|
16
|
+
import { defineCustomElement as defineCustomElement$b } from '@ionic/core/components/ion-card-title.js';
|
|
17
|
+
import { defineCustomElement as defineCustomElement$c } from '@ionic/core/components/ion-checkbox.js';
|
|
18
|
+
import { defineCustomElement as defineCustomElement$d } from '@ionic/core/components/ion-chip.js';
|
|
19
|
+
import { defineCustomElement as defineCustomElement$e } from '@ionic/core/components/ion-col.js';
|
|
20
|
+
import { defineCustomElement as defineCustomElement$f } from '@ionic/core/components/ion-content.js';
|
|
21
|
+
import { defineCustomElement as defineCustomElement$g } from '@ionic/core/components/ion-datetime.js';
|
|
22
|
+
import { defineCustomElement as defineCustomElement$h } from '@ionic/core/components/ion-datetime-button.js';
|
|
23
|
+
import { defineCustomElement as defineCustomElement$i } from '@ionic/core/components/ion-fab.js';
|
|
24
|
+
import { defineCustomElement as defineCustomElement$j } from '@ionic/core/components/ion-fab-list.js';
|
|
25
|
+
import { defineCustomElement as defineCustomElement$k } from '@ionic/core/components/ion-footer.js';
|
|
26
|
+
import { defineCustomElement as defineCustomElement$l } from '@ionic/core/components/ion-grid.js';
|
|
27
|
+
import { defineCustomElement as defineCustomElement$m } from '@ionic/core/components/ion-header.js';
|
|
28
|
+
import { defineCustomElement as defineCustomElement$n } from '@ionic/core/components/ion-img.js';
|
|
29
|
+
import { defineCustomElement as defineCustomElement$o } from '@ionic/core/components/ion-infinite-scroll.js';
|
|
30
|
+
import { defineCustomElement as defineCustomElement$p } from '@ionic/core/components/ion-infinite-scroll-content.js';
|
|
31
|
+
import { defineCustomElement as defineCustomElement$q } from '@ionic/core/components/ion-input.js';
|
|
32
|
+
import { defineCustomElement as defineCustomElement$r } from '@ionic/core/components/ion-input-otp.js';
|
|
33
|
+
import { defineCustomElement as defineCustomElement$s } from '@ionic/core/components/ion-input-password-toggle.js';
|
|
34
|
+
import { defineCustomElement as defineCustomElement$t } from '@ionic/core/components/ion-item-divider.js';
|
|
35
|
+
import { defineCustomElement as defineCustomElement$u } from '@ionic/core/components/ion-item-group.js';
|
|
36
|
+
import { defineCustomElement as defineCustomElement$v } from '@ionic/core/components/ion-item-options.js';
|
|
37
|
+
import { defineCustomElement as defineCustomElement$w } from '@ionic/core/components/ion-item-sliding.js';
|
|
38
|
+
import { defineCustomElement as defineCustomElement$x } from '@ionic/core/components/ion-label.js';
|
|
39
|
+
import { defineCustomElement as defineCustomElement$y } from '@ionic/core/components/ion-list.js';
|
|
40
|
+
import { defineCustomElement as defineCustomElement$z } from '@ionic/core/components/ion-list-header.js';
|
|
41
|
+
import { defineCustomElement as defineCustomElement$A } from '@ionic/core/components/ion-menu.js';
|
|
42
|
+
import { defineCustomElement as defineCustomElement$B } from '@ionic/core/components/ion-menu-button.js';
|
|
43
|
+
import { defineCustomElement as defineCustomElement$C } from '@ionic/core/components/ion-menu-toggle.js';
|
|
44
|
+
import { defineCustomElement as defineCustomElement$1m } from '@ionic/core/components/ion-nav.js';
|
|
45
|
+
import { defineCustomElement as defineCustomElement$D } from '@ionic/core/components/ion-nav-link.js';
|
|
46
|
+
import { defineCustomElement as defineCustomElement$E } from '@ionic/core/components/ion-note.js';
|
|
47
|
+
import { defineCustomElement as defineCustomElement$F } from '@ionic/core/components/ion-picker.js';
|
|
48
|
+
import { defineCustomElement as defineCustomElement$G } from '@ionic/core/components/ion-picker-column.js';
|
|
49
|
+
import { defineCustomElement as defineCustomElement$H } from '@ionic/core/components/ion-picker-column-option.js';
|
|
50
|
+
import { defineCustomElement as defineCustomElement$I } from '@ionic/core/components/ion-progress-bar.js';
|
|
51
|
+
import { defineCustomElement as defineCustomElement$J } from '@ionic/core/components/ion-radio.js';
|
|
52
|
+
import { defineCustomElement as defineCustomElement$K } from '@ionic/core/components/ion-radio-group.js';
|
|
53
|
+
import { defineCustomElement as defineCustomElement$L } from '@ionic/core/components/ion-range.js';
|
|
54
|
+
import { defineCustomElement as defineCustomElement$M } from '@ionic/core/components/ion-refresher.js';
|
|
55
|
+
import { defineCustomElement as defineCustomElement$N } from '@ionic/core/components/ion-refresher-content.js';
|
|
56
|
+
import { defineCustomElement as defineCustomElement$O } from '@ionic/core/components/ion-reorder.js';
|
|
57
|
+
import { defineCustomElement as defineCustomElement$P } from '@ionic/core/components/ion-reorder-group.js';
|
|
58
|
+
import { defineCustomElement as defineCustomElement$Q } from '@ionic/core/components/ion-ripple-effect.js';
|
|
59
|
+
import { defineCustomElement as defineCustomElement$R } from '@ionic/core/components/ion-row.js';
|
|
60
|
+
import { defineCustomElement as defineCustomElement$S } from '@ionic/core/components/ion-searchbar.js';
|
|
61
|
+
import { defineCustomElement as defineCustomElement$T } from '@ionic/core/components/ion-segment.js';
|
|
62
|
+
import { defineCustomElement as defineCustomElement$U } from '@ionic/core/components/ion-segment-button.js';
|
|
63
|
+
import { defineCustomElement as defineCustomElement$V } from '@ionic/core/components/ion-segment-content.js';
|
|
64
|
+
import { defineCustomElement as defineCustomElement$W } from '@ionic/core/components/ion-segment-view.js';
|
|
65
|
+
import { defineCustomElement as defineCustomElement$X } from '@ionic/core/components/ion-select.js';
|
|
66
|
+
import { defineCustomElement as defineCustomElement$Y } from '@ionic/core/components/ion-select-modal.js';
|
|
67
|
+
import { defineCustomElement as defineCustomElement$Z } from '@ionic/core/components/ion-select-option.js';
|
|
68
|
+
import { defineCustomElement as defineCustomElement$_ } from '@ionic/core/components/ion-skeleton-text.js';
|
|
69
|
+
import { defineCustomElement as defineCustomElement$$ } from '@ionic/core/components/ion-spinner.js';
|
|
70
|
+
import { defineCustomElement as defineCustomElement$10 } from '@ionic/core/components/ion-split-pane.js';
|
|
71
|
+
import { defineCustomElement as defineCustomElement$11 } from '@ionic/core/components/ion-tab.js';
|
|
72
|
+
import { defineCustomElement as defineCustomElement$12 } from '@ionic/core/components/ion-text.js';
|
|
73
|
+
import { defineCustomElement as defineCustomElement$13 } from '@ionic/core/components/ion-textarea.js';
|
|
74
|
+
import { defineCustomElement as defineCustomElement$14 } from '@ionic/core/components/ion-thumbnail.js';
|
|
75
|
+
import { defineCustomElement as defineCustomElement$15 } from '@ionic/core/components/ion-title.js';
|
|
76
|
+
import { defineCustomElement as defineCustomElement$16 } from '@ionic/core/components/ion-toggle.js';
|
|
77
|
+
import { defineCustomElement as defineCustomElement$17 } from '@ionic/core/components/ion-toolbar.js';
|
|
78
78
|
import { IonBreadcrumb as IonBreadcrumb$1 } from '@ionic/core/components/ion-breadcrumb.js';
|
|
79
79
|
import { IonButton as IonButton$1 } from '@ionic/core/components/ion-button.js';
|
|
80
80
|
import { IonCard as IonCard$1 } from '@ionic/core/components/ion-card.js';
|
|
@@ -83,19 +83,19 @@ import { IonItemOption as IonItemOption$1 } from '@ionic/core/components/ion-ite
|
|
|
83
83
|
import { IonItem as IonItem$1 } from '@ionic/core/components/ion-item.js';
|
|
84
84
|
import { IonRouterLink as IonRouterLink$1 } from '@ionic/core/components/ion-router-link.js';
|
|
85
85
|
import { defineCustomElement as defineCustomElement$18 } from '@ionic/core/components/ion-alert.js';
|
|
86
|
-
import ReactDOM, { createPortal } from 'react-dom';
|
|
87
86
|
import { defineCustomElement as defineCustomElement$19 } from '@ionic/core/components/ion-loading.js';
|
|
88
87
|
import { defineCustomElement as defineCustomElement$1a } from '@ionic/core/components/ion-toast.js';
|
|
89
|
-
import { defineCustomElement as defineCustomElement$1b } from '@ionic/core/components/ion-
|
|
90
|
-
import { defineCustomElement as defineCustomElement$1c } from '@ionic/core/components/ion-
|
|
91
|
-
import { defineCustomElement as defineCustomElement$1d } from '@ionic/core/components/ion-
|
|
92
|
-
import { defineCustomElement as defineCustomElement$
|
|
93
|
-
import { defineCustomElement as defineCustomElement$
|
|
94
|
-
import { defineCustomElement as defineCustomElement$1i } from '@ionic/core/components/ion-
|
|
95
|
-
import { defineCustomElement as defineCustomElement$
|
|
96
|
-
import { defineCustomElement as defineCustomElement$
|
|
97
|
-
import { defineCustomElement as defineCustomElement$
|
|
98
|
-
import { defineCustomElement as defineCustomElement$
|
|
88
|
+
import { defineCustomElement as defineCustomElement$1b } from '@ionic/core/components/ion-picker-legacy.js';
|
|
89
|
+
import { defineCustomElement as defineCustomElement$1c } from '@ionic/core/components/ion-action-sheet.js';
|
|
90
|
+
import { defineCustomElement as defineCustomElement$1d } from '@ionic/core/components/ion-modal.js';
|
|
91
|
+
import { defineCustomElement as defineCustomElement$1e } from '@ionic/core/components/ion-popover.js';
|
|
92
|
+
import { defineCustomElement as defineCustomElement$1k } from '@ionic/core/components/ion-app.js';
|
|
93
|
+
import { defineCustomElement as defineCustomElement$1i } from '@ionic/core/components/ion-back-button.js';
|
|
94
|
+
import { defineCustomElement as defineCustomElement$1j } from '@ionic/core/components/ion-router-outlet.js';
|
|
95
|
+
import { defineCustomElement as defineCustomElement$1g } from '@ionic/core/components/ion-tab-bar.js';
|
|
96
|
+
import { defineCustomElement as defineCustomElement$1f } from '@ionic/core/components/ion-tab-button.js';
|
|
97
|
+
import { defineCustomElement as defineCustomElement$1h } from '@ionic/core/components/ion-tabs.js';
|
|
98
|
+
import { defineCustomElement as defineCustomElement$1l } from 'ionicons/components/ion-icon.js';
|
|
99
99
|
|
|
100
100
|
const IonLifeCycleContext = /*@__PURE__*/ React.createContext({
|
|
101
101
|
onIonViewWillEnter: () => {
|
|
@@ -136,15 +136,16 @@ const IonLifeCycleContext = /*@__PURE__*/ React.createContext({
|
|
|
136
136
|
},
|
|
137
137
|
});
|
|
138
138
|
const DefaultIonLifeCycleContext = class {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
139
|
+
constructor() {
|
|
140
|
+
this.ionViewWillEnterCallbacks = [];
|
|
141
|
+
this.ionViewDidEnterCallbacks = [];
|
|
142
|
+
this.ionViewWillLeaveCallbacks = [];
|
|
143
|
+
this.ionViewDidLeaveCallbacks = [];
|
|
144
|
+
this.ionViewWillEnterDestructorCallbacks = [];
|
|
145
|
+
this.ionViewDidEnterDestructorCallbacks = [];
|
|
146
|
+
this.ionViewWillLeaveDestructorCallbacks = [];
|
|
147
|
+
this.ionViewDidLeaveDestructorCallbacks = [];
|
|
148
|
+
}
|
|
148
149
|
onIonViewWillEnter(callback) {
|
|
149
150
|
if (callback.id) {
|
|
150
151
|
const index = this.ionViewWillEnterCallbacks.findIndex((x) => x.id === callback.id);
|
|
@@ -293,9 +294,9 @@ const DefaultIonLifeCycleContext = class {
|
|
|
293
294
|
// TODO(FW-2959): types
|
|
294
295
|
const withIonLifeCycle = (WrappedComponent) => {
|
|
295
296
|
return class IonLifeCycle extends React.Component {
|
|
296
|
-
componentRef = React.createRef();
|
|
297
297
|
constructor(props) {
|
|
298
298
|
super(props);
|
|
299
|
+
this.componentRef = React.createRef();
|
|
299
300
|
}
|
|
300
301
|
componentDidMount() {
|
|
301
302
|
const element = this.componentRef.current;
|
|
@@ -379,7 +380,9 @@ const useIonViewDidLeave = (callback, deps = []) => {
|
|
|
379
380
|
};
|
|
380
381
|
|
|
381
382
|
const NavContext = /*@__PURE__*/ React.createContext({
|
|
383
|
+
getIonRedirect: () => undefined,
|
|
382
384
|
getIonRoute: () => undefined,
|
|
385
|
+
getPageManager: () => undefined,
|
|
383
386
|
getStackManager: () => undefined,
|
|
384
387
|
goBack: (route) => {
|
|
385
388
|
if (typeof window !== 'undefined') {
|
|
@@ -411,651 +414,6 @@ const NavContext = /*@__PURE__*/ React.createContext({
|
|
|
411
414
|
},
|
|
412
415
|
});
|
|
413
416
|
|
|
414
|
-
const IonAccordion = /*@__PURE__*/ createComponent({
|
|
415
|
-
tagName: 'ion-accordion',
|
|
416
|
-
elementClass: IonAccordion$1,
|
|
417
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
418
|
-
react: React,
|
|
419
|
-
events: {},
|
|
420
|
-
defineCustomElement: defineCustomElement$1
|
|
421
|
-
});
|
|
422
|
-
const IonAccordionGroup = /*@__PURE__*/ createComponent({
|
|
423
|
-
tagName: 'ion-accordion-group',
|
|
424
|
-
elementClass: IonAccordionGroup$1,
|
|
425
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
426
|
-
react: React,
|
|
427
|
-
events: { onIonChange: 'ionChange' },
|
|
428
|
-
defineCustomElement: defineCustomElement$2
|
|
429
|
-
});
|
|
430
|
-
const IonAvatar = /*@__PURE__*/ createComponent({
|
|
431
|
-
tagName: 'ion-avatar',
|
|
432
|
-
elementClass: IonAvatar$1,
|
|
433
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
434
|
-
react: React,
|
|
435
|
-
events: {},
|
|
436
|
-
defineCustomElement: defineCustomElement$3
|
|
437
|
-
});
|
|
438
|
-
const IonBackdrop = /*@__PURE__*/ createComponent({
|
|
439
|
-
tagName: 'ion-backdrop',
|
|
440
|
-
elementClass: IonBackdrop$1,
|
|
441
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
442
|
-
react: React,
|
|
443
|
-
events: { onIonBackdropTap: 'ionBackdropTap' },
|
|
444
|
-
defineCustomElement: defineCustomElement$4
|
|
445
|
-
});
|
|
446
|
-
const IonBadge = /*@__PURE__*/ createComponent({
|
|
447
|
-
tagName: 'ion-badge',
|
|
448
|
-
elementClass: IonBadge$1,
|
|
449
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
450
|
-
react: React,
|
|
451
|
-
events: {},
|
|
452
|
-
defineCustomElement: defineCustomElement$5
|
|
453
|
-
});
|
|
454
|
-
const IonBreadcrumbs = /*@__PURE__*/ createComponent({
|
|
455
|
-
tagName: 'ion-breadcrumbs',
|
|
456
|
-
elementClass: IonBreadcrumbs$1,
|
|
457
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
458
|
-
react: React,
|
|
459
|
-
events: { onIonCollapsedClick: 'ionCollapsedClick' },
|
|
460
|
-
defineCustomElement: defineCustomElement$6
|
|
461
|
-
});
|
|
462
|
-
const IonButtons = /*@__PURE__*/ createComponent({
|
|
463
|
-
tagName: 'ion-buttons',
|
|
464
|
-
elementClass: IonButtons$1,
|
|
465
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
466
|
-
react: React,
|
|
467
|
-
events: {},
|
|
468
|
-
defineCustomElement: defineCustomElement$7
|
|
469
|
-
});
|
|
470
|
-
const IonCardContent = /*@__PURE__*/ createComponent({
|
|
471
|
-
tagName: 'ion-card-content',
|
|
472
|
-
elementClass: IonCardContent$1,
|
|
473
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
474
|
-
react: React,
|
|
475
|
-
events: {},
|
|
476
|
-
defineCustomElement: defineCustomElement$8
|
|
477
|
-
});
|
|
478
|
-
const IonCardHeader = /*@__PURE__*/ createComponent({
|
|
479
|
-
tagName: 'ion-card-header',
|
|
480
|
-
elementClass: IonCardHeader$1,
|
|
481
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
482
|
-
react: React,
|
|
483
|
-
events: {},
|
|
484
|
-
defineCustomElement: defineCustomElement$9
|
|
485
|
-
});
|
|
486
|
-
const IonCardSubtitle = /*@__PURE__*/ createComponent({
|
|
487
|
-
tagName: 'ion-card-subtitle',
|
|
488
|
-
elementClass: IonCardSubtitle$1,
|
|
489
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
490
|
-
react: React,
|
|
491
|
-
events: {},
|
|
492
|
-
defineCustomElement: defineCustomElement$a
|
|
493
|
-
});
|
|
494
|
-
const IonCardTitle = /*@__PURE__*/ createComponent({
|
|
495
|
-
tagName: 'ion-card-title',
|
|
496
|
-
elementClass: IonCardTitle$1,
|
|
497
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
498
|
-
react: React,
|
|
499
|
-
events: {},
|
|
500
|
-
defineCustomElement: defineCustomElement$b
|
|
501
|
-
});
|
|
502
|
-
const IonCheckbox = /*@__PURE__*/ createComponent({
|
|
503
|
-
tagName: 'ion-checkbox',
|
|
504
|
-
elementClass: IonCheckbox$1,
|
|
505
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
506
|
-
react: React,
|
|
507
|
-
events: {
|
|
508
|
-
onIonChange: 'ionChange',
|
|
509
|
-
onIonFocus: 'ionFocus',
|
|
510
|
-
onIonBlur: 'ionBlur'
|
|
511
|
-
},
|
|
512
|
-
defineCustomElement: defineCustomElement$c
|
|
513
|
-
});
|
|
514
|
-
const IonChip = /*@__PURE__*/ createComponent({
|
|
515
|
-
tagName: 'ion-chip',
|
|
516
|
-
elementClass: IonChip$1,
|
|
517
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
518
|
-
react: React,
|
|
519
|
-
events: {},
|
|
520
|
-
defineCustomElement: defineCustomElement$d
|
|
521
|
-
});
|
|
522
|
-
const IonCol = /*@__PURE__*/ createComponent({
|
|
523
|
-
tagName: 'ion-col',
|
|
524
|
-
elementClass: IonCol$1,
|
|
525
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
526
|
-
react: React,
|
|
527
|
-
events: {},
|
|
528
|
-
defineCustomElement: defineCustomElement$e
|
|
529
|
-
});
|
|
530
|
-
const IonContent = /*@__PURE__*/ createComponent({
|
|
531
|
-
tagName: 'ion-content',
|
|
532
|
-
elementClass: IonContent$1,
|
|
533
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
534
|
-
react: React,
|
|
535
|
-
events: {
|
|
536
|
-
onIonScrollStart: 'ionScrollStart',
|
|
537
|
-
onIonScroll: 'ionScroll',
|
|
538
|
-
onIonScrollEnd: 'ionScrollEnd'
|
|
539
|
-
},
|
|
540
|
-
defineCustomElement: defineCustomElement$f
|
|
541
|
-
});
|
|
542
|
-
const IonDatetime = /*@__PURE__*/ createComponent({
|
|
543
|
-
tagName: 'ion-datetime',
|
|
544
|
-
elementClass: IonDatetime$1,
|
|
545
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
546
|
-
react: React,
|
|
547
|
-
events: {
|
|
548
|
-
onIonCancel: 'ionCancel',
|
|
549
|
-
onIonChange: 'ionChange',
|
|
550
|
-
onIonFocus: 'ionFocus',
|
|
551
|
-
onIonBlur: 'ionBlur'
|
|
552
|
-
},
|
|
553
|
-
defineCustomElement: defineCustomElement$g
|
|
554
|
-
});
|
|
555
|
-
const IonDatetimeButton = /*@__PURE__*/ createComponent({
|
|
556
|
-
tagName: 'ion-datetime-button',
|
|
557
|
-
elementClass: IonDatetimeButton$1,
|
|
558
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
559
|
-
react: React,
|
|
560
|
-
events: {},
|
|
561
|
-
defineCustomElement: defineCustomElement$h
|
|
562
|
-
});
|
|
563
|
-
const IonFab = /*@__PURE__*/ createComponent({
|
|
564
|
-
tagName: 'ion-fab',
|
|
565
|
-
elementClass: IonFab$1,
|
|
566
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
567
|
-
react: React,
|
|
568
|
-
events: {},
|
|
569
|
-
defineCustomElement: defineCustomElement$i
|
|
570
|
-
});
|
|
571
|
-
const IonFabList = /*@__PURE__*/ createComponent({
|
|
572
|
-
tagName: 'ion-fab-list',
|
|
573
|
-
elementClass: IonFabList$1,
|
|
574
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
575
|
-
react: React,
|
|
576
|
-
events: {},
|
|
577
|
-
defineCustomElement: defineCustomElement$j
|
|
578
|
-
});
|
|
579
|
-
const IonFooter = /*@__PURE__*/ createComponent({
|
|
580
|
-
tagName: 'ion-footer',
|
|
581
|
-
elementClass: IonFooter$1,
|
|
582
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
583
|
-
react: React,
|
|
584
|
-
events: {},
|
|
585
|
-
defineCustomElement: defineCustomElement$k
|
|
586
|
-
});
|
|
587
|
-
const IonGrid = /*@__PURE__*/ createComponent({
|
|
588
|
-
tagName: 'ion-grid',
|
|
589
|
-
elementClass: IonGrid$1,
|
|
590
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
591
|
-
react: React,
|
|
592
|
-
events: {},
|
|
593
|
-
defineCustomElement: defineCustomElement$l
|
|
594
|
-
});
|
|
595
|
-
const IonHeader = /*@__PURE__*/ createComponent({
|
|
596
|
-
tagName: 'ion-header',
|
|
597
|
-
elementClass: IonHeader$1,
|
|
598
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
599
|
-
react: React,
|
|
600
|
-
events: {},
|
|
601
|
-
defineCustomElement: defineCustomElement$m
|
|
602
|
-
});
|
|
603
|
-
const IonImg = /*@__PURE__*/ createComponent({
|
|
604
|
-
tagName: 'ion-img',
|
|
605
|
-
elementClass: IonImg$1,
|
|
606
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
607
|
-
react: React,
|
|
608
|
-
events: {
|
|
609
|
-
onIonImgWillLoad: 'ionImgWillLoad',
|
|
610
|
-
onIonImgDidLoad: 'ionImgDidLoad',
|
|
611
|
-
onIonError: 'ionError'
|
|
612
|
-
},
|
|
613
|
-
defineCustomElement: defineCustomElement$n
|
|
614
|
-
});
|
|
615
|
-
const IonInfiniteScroll = /*@__PURE__*/ createComponent({
|
|
616
|
-
tagName: 'ion-infinite-scroll',
|
|
617
|
-
elementClass: IonInfiniteScroll$1,
|
|
618
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
619
|
-
react: React,
|
|
620
|
-
events: { onIonInfinite: 'ionInfinite' },
|
|
621
|
-
defineCustomElement: defineCustomElement$o
|
|
622
|
-
});
|
|
623
|
-
const IonInfiniteScrollContent = /*@__PURE__*/ createComponent({
|
|
624
|
-
tagName: 'ion-infinite-scroll-content',
|
|
625
|
-
elementClass: IonInfiniteScrollContent$1,
|
|
626
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
627
|
-
react: React,
|
|
628
|
-
events: {},
|
|
629
|
-
defineCustomElement: defineCustomElement$p
|
|
630
|
-
});
|
|
631
|
-
const IonInput = /*@__PURE__*/ createComponent({
|
|
632
|
-
tagName: 'ion-input',
|
|
633
|
-
elementClass: IonInput$1,
|
|
634
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
635
|
-
react: React,
|
|
636
|
-
events: {
|
|
637
|
-
onIonInput: 'ionInput',
|
|
638
|
-
onIonChange: 'ionChange',
|
|
639
|
-
onIonBlur: 'ionBlur',
|
|
640
|
-
onIonFocus: 'ionFocus'
|
|
641
|
-
},
|
|
642
|
-
defineCustomElement: defineCustomElement$q
|
|
643
|
-
});
|
|
644
|
-
const IonInputOtp = /*@__PURE__*/ createComponent({
|
|
645
|
-
tagName: 'ion-input-otp',
|
|
646
|
-
elementClass: IonInputOtp$1,
|
|
647
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
648
|
-
react: React,
|
|
649
|
-
events: {
|
|
650
|
-
onIonInput: 'ionInput',
|
|
651
|
-
onIonChange: 'ionChange',
|
|
652
|
-
onIonComplete: 'ionComplete',
|
|
653
|
-
onIonBlur: 'ionBlur',
|
|
654
|
-
onIonFocus: 'ionFocus'
|
|
655
|
-
},
|
|
656
|
-
defineCustomElement: defineCustomElement$r
|
|
657
|
-
});
|
|
658
|
-
const IonInputPasswordToggle = /*@__PURE__*/ createComponent({
|
|
659
|
-
tagName: 'ion-input-password-toggle',
|
|
660
|
-
elementClass: IonInputPasswordToggle$1,
|
|
661
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
662
|
-
react: React,
|
|
663
|
-
events: {},
|
|
664
|
-
defineCustomElement: defineCustomElement$s
|
|
665
|
-
});
|
|
666
|
-
const IonItemDivider = /*@__PURE__*/ createComponent({
|
|
667
|
-
tagName: 'ion-item-divider',
|
|
668
|
-
elementClass: IonItemDivider$1,
|
|
669
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
670
|
-
react: React,
|
|
671
|
-
events: {},
|
|
672
|
-
defineCustomElement: defineCustomElement$t
|
|
673
|
-
});
|
|
674
|
-
const IonItemGroup = /*@__PURE__*/ createComponent({
|
|
675
|
-
tagName: 'ion-item-group',
|
|
676
|
-
elementClass: IonItemGroup$1,
|
|
677
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
678
|
-
react: React,
|
|
679
|
-
events: {},
|
|
680
|
-
defineCustomElement: defineCustomElement$u
|
|
681
|
-
});
|
|
682
|
-
const IonItemOptions = /*@__PURE__*/ createComponent({
|
|
683
|
-
tagName: 'ion-item-options',
|
|
684
|
-
elementClass: IonItemOptions$1,
|
|
685
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
686
|
-
react: React,
|
|
687
|
-
events: { onIonSwipe: 'ionSwipe' },
|
|
688
|
-
defineCustomElement: defineCustomElement$v
|
|
689
|
-
});
|
|
690
|
-
const IonItemSliding = /*@__PURE__*/ createComponent({
|
|
691
|
-
tagName: 'ion-item-sliding',
|
|
692
|
-
elementClass: IonItemSliding$1,
|
|
693
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
694
|
-
react: React,
|
|
695
|
-
events: { onIonDrag: 'ionDrag' },
|
|
696
|
-
defineCustomElement: defineCustomElement$w
|
|
697
|
-
});
|
|
698
|
-
const IonLabel = /*@__PURE__*/ createComponent({
|
|
699
|
-
tagName: 'ion-label',
|
|
700
|
-
elementClass: IonLabel$1,
|
|
701
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
702
|
-
react: React,
|
|
703
|
-
events: {},
|
|
704
|
-
defineCustomElement: defineCustomElement$x
|
|
705
|
-
});
|
|
706
|
-
const IonList = /*@__PURE__*/ createComponent({
|
|
707
|
-
tagName: 'ion-list',
|
|
708
|
-
elementClass: IonList$1,
|
|
709
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
710
|
-
react: React,
|
|
711
|
-
events: {},
|
|
712
|
-
defineCustomElement: defineCustomElement$y
|
|
713
|
-
});
|
|
714
|
-
const IonListHeader = /*@__PURE__*/ createComponent({
|
|
715
|
-
tagName: 'ion-list-header',
|
|
716
|
-
elementClass: IonListHeader$1,
|
|
717
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
718
|
-
react: React,
|
|
719
|
-
events: {},
|
|
720
|
-
defineCustomElement: defineCustomElement$z
|
|
721
|
-
});
|
|
722
|
-
const IonMenu = /*@__PURE__*/ createComponent({
|
|
723
|
-
tagName: 'ion-menu',
|
|
724
|
-
elementClass: IonMenu$1,
|
|
725
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
726
|
-
react: React,
|
|
727
|
-
events: {
|
|
728
|
-
onIonWillOpen: 'ionWillOpen',
|
|
729
|
-
onIonWillClose: 'ionWillClose',
|
|
730
|
-
onIonDidOpen: 'ionDidOpen',
|
|
731
|
-
onIonDidClose: 'ionDidClose'
|
|
732
|
-
},
|
|
733
|
-
defineCustomElement: defineCustomElement$A
|
|
734
|
-
});
|
|
735
|
-
const IonMenuButton = /*@__PURE__*/ createComponent({
|
|
736
|
-
tagName: 'ion-menu-button',
|
|
737
|
-
elementClass: IonMenuButton$1,
|
|
738
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
739
|
-
react: React,
|
|
740
|
-
events: {},
|
|
741
|
-
defineCustomElement: defineCustomElement$B
|
|
742
|
-
});
|
|
743
|
-
const IonMenuToggle = /*@__PURE__*/ createComponent({
|
|
744
|
-
tagName: 'ion-menu-toggle',
|
|
745
|
-
elementClass: IonMenuToggle$1,
|
|
746
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
747
|
-
react: React,
|
|
748
|
-
events: {},
|
|
749
|
-
defineCustomElement: defineCustomElement$C
|
|
750
|
-
});
|
|
751
|
-
const IonNavLink = /*@__PURE__*/ createComponent({
|
|
752
|
-
tagName: 'ion-nav-link',
|
|
753
|
-
elementClass: IonNavLink$1,
|
|
754
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
755
|
-
react: React,
|
|
756
|
-
events: {},
|
|
757
|
-
defineCustomElement: defineCustomElement$D
|
|
758
|
-
});
|
|
759
|
-
const IonNote = /*@__PURE__*/ createComponent({
|
|
760
|
-
tagName: 'ion-note',
|
|
761
|
-
elementClass: IonNote$1,
|
|
762
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
763
|
-
react: React,
|
|
764
|
-
events: {},
|
|
765
|
-
defineCustomElement: defineCustomElement$E
|
|
766
|
-
});
|
|
767
|
-
const IonPicker = /*@__PURE__*/ createComponent({
|
|
768
|
-
tagName: 'ion-picker',
|
|
769
|
-
elementClass: IonPicker$1,
|
|
770
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
771
|
-
react: React,
|
|
772
|
-
events: {},
|
|
773
|
-
defineCustomElement: defineCustomElement$F
|
|
774
|
-
});
|
|
775
|
-
const IonPickerColumn = /*@__PURE__*/ createComponent({
|
|
776
|
-
tagName: 'ion-picker-column',
|
|
777
|
-
elementClass: IonPickerColumn$1,
|
|
778
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
779
|
-
react: React,
|
|
780
|
-
events: { onIonChange: 'ionChange' },
|
|
781
|
-
defineCustomElement: defineCustomElement$G
|
|
782
|
-
});
|
|
783
|
-
const IonPickerColumnOption = /*@__PURE__*/ createComponent({
|
|
784
|
-
tagName: 'ion-picker-column-option',
|
|
785
|
-
elementClass: IonPickerColumnOption$1,
|
|
786
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
787
|
-
react: React,
|
|
788
|
-
events: {},
|
|
789
|
-
defineCustomElement: defineCustomElement$H
|
|
790
|
-
});
|
|
791
|
-
const IonProgressBar = /*@__PURE__*/ createComponent({
|
|
792
|
-
tagName: 'ion-progress-bar',
|
|
793
|
-
elementClass: IonProgressBar$1,
|
|
794
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
795
|
-
react: React,
|
|
796
|
-
events: {},
|
|
797
|
-
defineCustomElement: defineCustomElement$I
|
|
798
|
-
});
|
|
799
|
-
const IonRadio = /*@__PURE__*/ createComponent({
|
|
800
|
-
tagName: 'ion-radio',
|
|
801
|
-
elementClass: IonRadio$1,
|
|
802
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
803
|
-
react: React,
|
|
804
|
-
events: {
|
|
805
|
-
onIonFocus: 'ionFocus',
|
|
806
|
-
onIonBlur: 'ionBlur'
|
|
807
|
-
},
|
|
808
|
-
defineCustomElement: defineCustomElement$J
|
|
809
|
-
});
|
|
810
|
-
const IonRadioGroup = /*@__PURE__*/ createComponent({
|
|
811
|
-
tagName: 'ion-radio-group',
|
|
812
|
-
elementClass: IonRadioGroup$1,
|
|
813
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
814
|
-
react: React,
|
|
815
|
-
events: { onIonChange: 'ionChange' },
|
|
816
|
-
defineCustomElement: defineCustomElement$K
|
|
817
|
-
});
|
|
818
|
-
const IonRange = /*@__PURE__*/ createComponent({
|
|
819
|
-
tagName: 'ion-range',
|
|
820
|
-
elementClass: IonRange$1,
|
|
821
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
822
|
-
react: React,
|
|
823
|
-
events: {
|
|
824
|
-
onIonChange: 'ionChange',
|
|
825
|
-
onIonInput: 'ionInput',
|
|
826
|
-
onIonFocus: 'ionFocus',
|
|
827
|
-
onIonBlur: 'ionBlur',
|
|
828
|
-
onIonKnobMoveStart: 'ionKnobMoveStart',
|
|
829
|
-
onIonKnobMoveEnd: 'ionKnobMoveEnd'
|
|
830
|
-
},
|
|
831
|
-
defineCustomElement: defineCustomElement$L
|
|
832
|
-
});
|
|
833
|
-
const IonRefresher = /*@__PURE__*/ createComponent({
|
|
834
|
-
tagName: 'ion-refresher',
|
|
835
|
-
elementClass: IonRefresher$1,
|
|
836
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
837
|
-
react: React,
|
|
838
|
-
events: {
|
|
839
|
-
onIonRefresh: 'ionRefresh',
|
|
840
|
-
onIonPull: 'ionPull',
|
|
841
|
-
onIonStart: 'ionStart',
|
|
842
|
-
onIonPullStart: 'ionPullStart',
|
|
843
|
-
onIonPullEnd: 'ionPullEnd'
|
|
844
|
-
},
|
|
845
|
-
defineCustomElement: defineCustomElement$M
|
|
846
|
-
});
|
|
847
|
-
const IonRefresherContent = /*@__PURE__*/ createComponent({
|
|
848
|
-
tagName: 'ion-refresher-content',
|
|
849
|
-
elementClass: IonRefresherContent$1,
|
|
850
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
851
|
-
react: React,
|
|
852
|
-
events: {},
|
|
853
|
-
defineCustomElement: defineCustomElement$N
|
|
854
|
-
});
|
|
855
|
-
const IonReorder = /*@__PURE__*/ createComponent({
|
|
856
|
-
tagName: 'ion-reorder',
|
|
857
|
-
elementClass: IonReorder$1,
|
|
858
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
859
|
-
react: React,
|
|
860
|
-
events: {},
|
|
861
|
-
defineCustomElement: defineCustomElement$O
|
|
862
|
-
});
|
|
863
|
-
const IonReorderGroup = /*@__PURE__*/ createComponent({
|
|
864
|
-
tagName: 'ion-reorder-group',
|
|
865
|
-
elementClass: IonReorderGroup$1,
|
|
866
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
867
|
-
react: React,
|
|
868
|
-
events: {
|
|
869
|
-
onIonItemReorder: 'ionItemReorder',
|
|
870
|
-
onIonReorderStart: 'ionReorderStart',
|
|
871
|
-
onIonReorderMove: 'ionReorderMove',
|
|
872
|
-
onIonReorderEnd: 'ionReorderEnd'
|
|
873
|
-
},
|
|
874
|
-
defineCustomElement: defineCustomElement$P
|
|
875
|
-
});
|
|
876
|
-
const IonRippleEffect = /*@__PURE__*/ createComponent({
|
|
877
|
-
tagName: 'ion-ripple-effect',
|
|
878
|
-
elementClass: IonRippleEffect$1,
|
|
879
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
880
|
-
react: React,
|
|
881
|
-
events: {},
|
|
882
|
-
defineCustomElement: defineCustomElement$Q
|
|
883
|
-
});
|
|
884
|
-
const IonRow = /*@__PURE__*/ createComponent({
|
|
885
|
-
tagName: 'ion-row',
|
|
886
|
-
elementClass: IonRow$1,
|
|
887
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
888
|
-
react: React,
|
|
889
|
-
events: {},
|
|
890
|
-
defineCustomElement: defineCustomElement$R
|
|
891
|
-
});
|
|
892
|
-
const IonSearchbar = /*@__PURE__*/ createComponent({
|
|
893
|
-
tagName: 'ion-searchbar',
|
|
894
|
-
elementClass: IonSearchbar$1,
|
|
895
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
896
|
-
react: React,
|
|
897
|
-
events: {
|
|
898
|
-
onIonInput: 'ionInput',
|
|
899
|
-
onIonChange: 'ionChange',
|
|
900
|
-
onIonCancel: 'ionCancel',
|
|
901
|
-
onIonClear: 'ionClear',
|
|
902
|
-
onIonBlur: 'ionBlur',
|
|
903
|
-
onIonFocus: 'ionFocus'
|
|
904
|
-
},
|
|
905
|
-
defineCustomElement: defineCustomElement$S
|
|
906
|
-
});
|
|
907
|
-
const IonSegment = /*@__PURE__*/ createComponent({
|
|
908
|
-
tagName: 'ion-segment',
|
|
909
|
-
elementClass: IonSegment$1,
|
|
910
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
911
|
-
react: React,
|
|
912
|
-
events: { onIonChange: 'ionChange' },
|
|
913
|
-
defineCustomElement: defineCustomElement$T
|
|
914
|
-
});
|
|
915
|
-
const IonSegmentButton = /*@__PURE__*/ createComponent({
|
|
916
|
-
tagName: 'ion-segment-button',
|
|
917
|
-
elementClass: IonSegmentButton$1,
|
|
918
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
919
|
-
react: React,
|
|
920
|
-
events: {},
|
|
921
|
-
defineCustomElement: defineCustomElement$U
|
|
922
|
-
});
|
|
923
|
-
const IonSegmentContent = /*@__PURE__*/ createComponent({
|
|
924
|
-
tagName: 'ion-segment-content',
|
|
925
|
-
elementClass: IonSegmentContent$1,
|
|
926
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
927
|
-
react: React,
|
|
928
|
-
events: {},
|
|
929
|
-
defineCustomElement: defineCustomElement$V
|
|
930
|
-
});
|
|
931
|
-
const IonSegmentView = /*@__PURE__*/ createComponent({
|
|
932
|
-
tagName: 'ion-segment-view',
|
|
933
|
-
elementClass: IonSegmentView$1,
|
|
934
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
935
|
-
react: React,
|
|
936
|
-
events: { onIonSegmentViewScroll: 'ionSegmentViewScroll' },
|
|
937
|
-
defineCustomElement: defineCustomElement$W
|
|
938
|
-
});
|
|
939
|
-
const IonSelect = /*@__PURE__*/ createComponent({
|
|
940
|
-
tagName: 'ion-select',
|
|
941
|
-
elementClass: IonSelect$1,
|
|
942
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
943
|
-
react: React,
|
|
944
|
-
events: {
|
|
945
|
-
onIonChange: 'ionChange',
|
|
946
|
-
onIonCancel: 'ionCancel',
|
|
947
|
-
onIonDismiss: 'ionDismiss',
|
|
948
|
-
onIonFocus: 'ionFocus',
|
|
949
|
-
onIonBlur: 'ionBlur'
|
|
950
|
-
},
|
|
951
|
-
defineCustomElement: defineCustomElement$X
|
|
952
|
-
});
|
|
953
|
-
const IonSelectModal = /*@__PURE__*/ createComponent({
|
|
954
|
-
tagName: 'ion-select-modal',
|
|
955
|
-
elementClass: IonSelectModal$1,
|
|
956
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
957
|
-
react: React,
|
|
958
|
-
events: {},
|
|
959
|
-
defineCustomElement: defineCustomElement$Y
|
|
960
|
-
});
|
|
961
|
-
const IonSelectOption = /*@__PURE__*/ createComponent({
|
|
962
|
-
tagName: 'ion-select-option',
|
|
963
|
-
elementClass: IonSelectOption$1,
|
|
964
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
965
|
-
react: React,
|
|
966
|
-
events: {},
|
|
967
|
-
defineCustomElement: defineCustomElement$Z
|
|
968
|
-
});
|
|
969
|
-
const IonSkeletonText = /*@__PURE__*/ createComponent({
|
|
970
|
-
tagName: 'ion-skeleton-text',
|
|
971
|
-
elementClass: IonSkeletonText$1,
|
|
972
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
973
|
-
react: React,
|
|
974
|
-
events: {},
|
|
975
|
-
defineCustomElement: defineCustomElement$_
|
|
976
|
-
});
|
|
977
|
-
const IonSpinner = /*@__PURE__*/ createComponent({
|
|
978
|
-
tagName: 'ion-spinner',
|
|
979
|
-
elementClass: IonSpinner$1,
|
|
980
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
981
|
-
react: React,
|
|
982
|
-
events: {},
|
|
983
|
-
defineCustomElement: defineCustomElement$$
|
|
984
|
-
});
|
|
985
|
-
const IonSplitPane = /*@__PURE__*/ createComponent({
|
|
986
|
-
tagName: 'ion-split-pane',
|
|
987
|
-
elementClass: IonSplitPane$1,
|
|
988
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
989
|
-
react: React,
|
|
990
|
-
events: { onIonSplitPaneVisible: 'ionSplitPaneVisible' },
|
|
991
|
-
defineCustomElement: defineCustomElement$10
|
|
992
|
-
});
|
|
993
|
-
const IonTab = /*@__PURE__*/ createComponent({
|
|
994
|
-
tagName: 'ion-tab',
|
|
995
|
-
elementClass: IonTab$1,
|
|
996
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
997
|
-
react: React,
|
|
998
|
-
events: {},
|
|
999
|
-
defineCustomElement: defineCustomElement$11
|
|
1000
|
-
});
|
|
1001
|
-
const IonText = /*@__PURE__*/ createComponent({
|
|
1002
|
-
tagName: 'ion-text',
|
|
1003
|
-
elementClass: IonText$1,
|
|
1004
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
1005
|
-
react: React,
|
|
1006
|
-
events: {},
|
|
1007
|
-
defineCustomElement: defineCustomElement$12
|
|
1008
|
-
});
|
|
1009
|
-
const IonTextarea = /*@__PURE__*/ createComponent({
|
|
1010
|
-
tagName: 'ion-textarea',
|
|
1011
|
-
elementClass: IonTextarea$1,
|
|
1012
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
1013
|
-
react: React,
|
|
1014
|
-
events: {
|
|
1015
|
-
onIonChange: 'ionChange',
|
|
1016
|
-
onIonInput: 'ionInput',
|
|
1017
|
-
onIonBlur: 'ionBlur',
|
|
1018
|
-
onIonFocus: 'ionFocus'
|
|
1019
|
-
},
|
|
1020
|
-
defineCustomElement: defineCustomElement$13
|
|
1021
|
-
});
|
|
1022
|
-
const IonThumbnail = /*@__PURE__*/ createComponent({
|
|
1023
|
-
tagName: 'ion-thumbnail',
|
|
1024
|
-
elementClass: IonThumbnail$1,
|
|
1025
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
1026
|
-
react: React,
|
|
1027
|
-
events: {},
|
|
1028
|
-
defineCustomElement: defineCustomElement$14
|
|
1029
|
-
});
|
|
1030
|
-
const IonTitle = /*@__PURE__*/ createComponent({
|
|
1031
|
-
tagName: 'ion-title',
|
|
1032
|
-
elementClass: IonTitle$1,
|
|
1033
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
1034
|
-
react: React,
|
|
1035
|
-
events: {},
|
|
1036
|
-
defineCustomElement: defineCustomElement$15
|
|
1037
|
-
});
|
|
1038
|
-
const IonToggle = /*@__PURE__*/ createComponent({
|
|
1039
|
-
tagName: 'ion-toggle',
|
|
1040
|
-
elementClass: IonToggle$1,
|
|
1041
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
1042
|
-
react: React,
|
|
1043
|
-
events: {
|
|
1044
|
-
onIonChange: 'ionChange',
|
|
1045
|
-
onIonFocus: 'ionFocus',
|
|
1046
|
-
onIonBlur: 'ionBlur'
|
|
1047
|
-
},
|
|
1048
|
-
defineCustomElement: defineCustomElement$16
|
|
1049
|
-
});
|
|
1050
|
-
const IonToolbar = /*@__PURE__*/ createComponent({
|
|
1051
|
-
tagName: 'ion-toolbar',
|
|
1052
|
-
elementClass: IonToolbar$1,
|
|
1053
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
1054
|
-
react: React,
|
|
1055
|
-
events: {},
|
|
1056
|
-
defineCustomElement: defineCustomElement$17
|
|
1057
|
-
});
|
|
1058
|
-
|
|
1059
417
|
const dashToPascalCase = (str) => str
|
|
1060
418
|
.toLowerCase()
|
|
1061
419
|
.split('-')
|
|
@@ -1063,27 +421,6 @@ const dashToPascalCase = (str) => str
|
|
|
1063
421
|
.join('');
|
|
1064
422
|
const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
|
|
1065
423
|
|
|
1066
|
-
// Enumerated attributes where the literal string "false" is meaningful and
|
|
1067
|
-
// differs from the attribute being absent, so they must not be stripped like
|
|
1068
|
-
// HTML boolean attributes. These are the dash-cased attribute names produced by
|
|
1069
|
-
// camelToDashCase (e.g. the `spellCheck` prop renders as `spell-check`), so the
|
|
1070
|
-
// entries must match that form. aria-* and data-* are handled by prefix below.
|
|
1071
|
-
const NON_BOOLEAN_FALSE_ATTRIBUTES = new Set(['draggable', 'translate', 'spell-check', 'content-editable']);
|
|
1072
|
-
/**
|
|
1073
|
-
* React serializes a boolean prop set to `false` (e.g. `disabled={false}`) as
|
|
1074
|
-
* the string attribute `disabled="false"`. For HTML boolean attributes the mere
|
|
1075
|
-
* presence means "true", so assistive tech treats the element as
|
|
1076
|
-
* disabled/readonly even though Ionic renders it as interactive. The @lit/react
|
|
1077
|
-
* runtime fixes this for the generated components on v9, but the hand-rolled
|
|
1078
|
-
* wrappers (createReactComponent, createRoutingComponent, ...) render attributes
|
|
1079
|
-
* directly and sync props through attachProps, so we strip the stray attribute
|
|
1080
|
-
* here after the property has been assigned.
|
|
1081
|
-
*
|
|
1082
|
-
* TODO(FW-7629): React 19 added full custom-element support and no longer
|
|
1083
|
-
* serializes a `false` boolean prop to a `="false"` attribute, so this stripping
|
|
1084
|
-
* can be removed once React 18 support is dropped.
|
|
1085
|
-
*/
|
|
1086
|
-
const isStaleFalseBooleanAttribute = (attribute) => !attribute.startsWith('aria-') && !attribute.startsWith('data-') && !NON_BOOLEAN_FALSE_ATTRIBUTES.has(attribute);
|
|
1087
424
|
const attachProps = (node, newProps, oldProps = {}) => {
|
|
1088
425
|
// some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
|
|
1089
426
|
if (node instanceof Element) {
|
|
@@ -1114,12 +451,6 @@ const attachProps = (node, newProps, oldProps = {}) => {
|
|
|
1114
451
|
if (propType === 'string') {
|
|
1115
452
|
node.setAttribute(camelToDashCase(name), newProps[name]);
|
|
1116
453
|
}
|
|
1117
|
-
else if (newProps[name] === false) {
|
|
1118
|
-
const attribute = camelToDashCase(name);
|
|
1119
|
-
if (isStaleFalseBooleanAttribute(attribute)) {
|
|
1120
|
-
node.removeAttribute(attribute);
|
|
1121
|
-
}
|
|
1122
|
-
}
|
|
1123
454
|
}
|
|
1124
455
|
});
|
|
1125
456
|
}
|
|
@@ -1230,6 +561,147 @@ const defineCustomElement = (tagName, customElement) => {
|
|
|
1230
561
|
}
|
|
1231
562
|
};
|
|
1232
563
|
|
|
564
|
+
const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
|
|
565
|
+
if (defineCustomElement !== undefined) {
|
|
566
|
+
defineCustomElement();
|
|
567
|
+
}
|
|
568
|
+
const displayName = dashToPascalCase(tagName);
|
|
569
|
+
const ReactComponent = class extends React.Component {
|
|
570
|
+
constructor(props) {
|
|
571
|
+
super(props);
|
|
572
|
+
this.setComponentElRef = (element) => {
|
|
573
|
+
this.componentEl = element;
|
|
574
|
+
};
|
|
575
|
+
}
|
|
576
|
+
componentDidMount() {
|
|
577
|
+
this.componentDidUpdate(this.props);
|
|
578
|
+
}
|
|
579
|
+
componentDidUpdate(prevProps) {
|
|
580
|
+
attachProps(this.componentEl, this.props, prevProps);
|
|
581
|
+
}
|
|
582
|
+
render() {
|
|
583
|
+
const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
|
|
584
|
+
let propsToPass = Object.keys(cProps).reduce((acc, name) => {
|
|
585
|
+
const value = cProps[name];
|
|
586
|
+
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
|
587
|
+
const eventName = name.substring(2).toLowerCase();
|
|
588
|
+
if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
|
|
589
|
+
acc[name] = value;
|
|
590
|
+
}
|
|
591
|
+
}
|
|
592
|
+
else {
|
|
593
|
+
// we should only render strings, booleans, and numbers as attrs in html.
|
|
594
|
+
// objects, functions, arrays etc get synced via properties on mount.
|
|
595
|
+
const type = typeof value;
|
|
596
|
+
if (type === 'string' || type === 'boolean' || type === 'number') {
|
|
597
|
+
acc[camelToDashCase(name)] = value;
|
|
598
|
+
}
|
|
599
|
+
}
|
|
600
|
+
return acc;
|
|
601
|
+
}, {});
|
|
602
|
+
if (manipulatePropsFunction) {
|
|
603
|
+
propsToPass = manipulatePropsFunction(this.props, propsToPass);
|
|
604
|
+
}
|
|
605
|
+
const newProps = {
|
|
606
|
+
...propsToPass,
|
|
607
|
+
ref: mergeRefs(forwardedRef, this.setComponentElRef),
|
|
608
|
+
style,
|
|
609
|
+
};
|
|
610
|
+
/**
|
|
611
|
+
* We use createElement here instead of
|
|
612
|
+
* React.createElement to work around a
|
|
613
|
+
* bug in Vite (https://github.com/vitejs/vite/issues/6104).
|
|
614
|
+
* React.createElement causes all elements to be rendered
|
|
615
|
+
* as <tagname> instead of the actual Web Component.
|
|
616
|
+
*/
|
|
617
|
+
return createElement(tagName, newProps, children);
|
|
618
|
+
}
|
|
619
|
+
static get displayName() {
|
|
620
|
+
return displayName;
|
|
621
|
+
}
|
|
622
|
+
};
|
|
623
|
+
// If context was passed to createReactComponent then conditionally add it to the Component Class
|
|
624
|
+
if (ReactComponentContext) {
|
|
625
|
+
ReactComponent.contextType = ReactComponentContext;
|
|
626
|
+
}
|
|
627
|
+
return createForwardRef$1(ReactComponent, displayName);
|
|
628
|
+
};
|
|
629
|
+
|
|
630
|
+
/* eslint-disable */
|
|
631
|
+
/* tslint:disable */
|
|
632
|
+
/* auto-generated react proxies */
|
|
633
|
+
const IonAccordion = /*@__PURE__*/ createReactComponent('ion-accordion', undefined, undefined, defineCustomElement$1);
|
|
634
|
+
const IonAccordionGroup = /*@__PURE__*/ createReactComponent('ion-accordion-group', undefined, undefined, defineCustomElement$2);
|
|
635
|
+
const IonAvatar = /*@__PURE__*/ createReactComponent('ion-avatar', undefined, undefined, defineCustomElement$3);
|
|
636
|
+
const IonBackdrop = /*@__PURE__*/ createReactComponent('ion-backdrop', undefined, undefined, defineCustomElement$4);
|
|
637
|
+
const IonBadge = /*@__PURE__*/ createReactComponent('ion-badge', undefined, undefined, defineCustomElement$5);
|
|
638
|
+
const IonBreadcrumbs = /*@__PURE__*/ createReactComponent('ion-breadcrumbs', undefined, undefined, defineCustomElement$6);
|
|
639
|
+
const IonButtons = /*@__PURE__*/ createReactComponent('ion-buttons', undefined, undefined, defineCustomElement$7);
|
|
640
|
+
const IonCardContent = /*@__PURE__*/ createReactComponent('ion-card-content', undefined, undefined, defineCustomElement$8);
|
|
641
|
+
const IonCardHeader = /*@__PURE__*/ createReactComponent('ion-card-header', undefined, undefined, defineCustomElement$9);
|
|
642
|
+
const IonCardSubtitle = /*@__PURE__*/ createReactComponent('ion-card-subtitle', undefined, undefined, defineCustomElement$a);
|
|
643
|
+
const IonCardTitle = /*@__PURE__*/ createReactComponent('ion-card-title', undefined, undefined, defineCustomElement$b);
|
|
644
|
+
const IonCheckbox = /*@__PURE__*/ createReactComponent('ion-checkbox', undefined, undefined, defineCustomElement$c);
|
|
645
|
+
const IonChip = /*@__PURE__*/ createReactComponent('ion-chip', undefined, undefined, defineCustomElement$d);
|
|
646
|
+
const IonCol = /*@__PURE__*/ createReactComponent('ion-col', undefined, undefined, defineCustomElement$e);
|
|
647
|
+
const IonContent = /*@__PURE__*/ createReactComponent('ion-content', undefined, undefined, defineCustomElement$f);
|
|
648
|
+
const IonDatetime = /*@__PURE__*/ createReactComponent('ion-datetime', undefined, undefined, defineCustomElement$g);
|
|
649
|
+
const IonDatetimeButton = /*@__PURE__*/ createReactComponent('ion-datetime-button', undefined, undefined, defineCustomElement$h);
|
|
650
|
+
const IonFab = /*@__PURE__*/ createReactComponent('ion-fab', undefined, undefined, defineCustomElement$i);
|
|
651
|
+
const IonFabList = /*@__PURE__*/ createReactComponent('ion-fab-list', undefined, undefined, defineCustomElement$j);
|
|
652
|
+
const IonFooter = /*@__PURE__*/ createReactComponent('ion-footer', undefined, undefined, defineCustomElement$k);
|
|
653
|
+
const IonGrid = /*@__PURE__*/ createReactComponent('ion-grid', undefined, undefined, defineCustomElement$l);
|
|
654
|
+
const IonHeader = /*@__PURE__*/ createReactComponent('ion-header', undefined, undefined, defineCustomElement$m);
|
|
655
|
+
const IonImg = /*@__PURE__*/ createReactComponent('ion-img', undefined, undefined, defineCustomElement$n);
|
|
656
|
+
const IonInfiniteScroll = /*@__PURE__*/ createReactComponent('ion-infinite-scroll', undefined, undefined, defineCustomElement$o);
|
|
657
|
+
const IonInfiniteScrollContent = /*@__PURE__*/ createReactComponent('ion-infinite-scroll-content', undefined, undefined, defineCustomElement$p);
|
|
658
|
+
const IonInput = /*@__PURE__*/ createReactComponent('ion-input', undefined, undefined, defineCustomElement$q);
|
|
659
|
+
const IonInputOtp = /*@__PURE__*/ createReactComponent('ion-input-otp', undefined, undefined, defineCustomElement$r);
|
|
660
|
+
const IonInputPasswordToggle = /*@__PURE__*/ createReactComponent('ion-input-password-toggle', undefined, undefined, defineCustomElement$s);
|
|
661
|
+
const IonItemDivider = /*@__PURE__*/ createReactComponent('ion-item-divider', undefined, undefined, defineCustomElement$t);
|
|
662
|
+
const IonItemGroup = /*@__PURE__*/ createReactComponent('ion-item-group', undefined, undefined, defineCustomElement$u);
|
|
663
|
+
const IonItemOptions = /*@__PURE__*/ createReactComponent('ion-item-options', undefined, undefined, defineCustomElement$v);
|
|
664
|
+
const IonItemSliding = /*@__PURE__*/ createReactComponent('ion-item-sliding', undefined, undefined, defineCustomElement$w);
|
|
665
|
+
const IonLabel = /*@__PURE__*/ createReactComponent('ion-label', undefined, undefined, defineCustomElement$x);
|
|
666
|
+
const IonList = /*@__PURE__*/ createReactComponent('ion-list', undefined, undefined, defineCustomElement$y);
|
|
667
|
+
const IonListHeader = /*@__PURE__*/ createReactComponent('ion-list-header', undefined, undefined, defineCustomElement$z);
|
|
668
|
+
const IonMenu = /*@__PURE__*/ createReactComponent('ion-menu', undefined, undefined, defineCustomElement$A);
|
|
669
|
+
const IonMenuButton = /*@__PURE__*/ createReactComponent('ion-menu-button', undefined, undefined, defineCustomElement$B);
|
|
670
|
+
const IonMenuToggle = /*@__PURE__*/ createReactComponent('ion-menu-toggle', undefined, undefined, defineCustomElement$C);
|
|
671
|
+
const IonNavLink = /*@__PURE__*/ createReactComponent('ion-nav-link', undefined, undefined, defineCustomElement$D);
|
|
672
|
+
const IonNote = /*@__PURE__*/ createReactComponent('ion-note', undefined, undefined, defineCustomElement$E);
|
|
673
|
+
const IonPicker = /*@__PURE__*/ createReactComponent('ion-picker', undefined, undefined, defineCustomElement$F);
|
|
674
|
+
const IonPickerColumn = /*@__PURE__*/ createReactComponent('ion-picker-column', undefined, undefined, defineCustomElement$G);
|
|
675
|
+
const IonPickerColumnOption = /*@__PURE__*/ createReactComponent('ion-picker-column-option', undefined, undefined, defineCustomElement$H);
|
|
676
|
+
const IonProgressBar = /*@__PURE__*/ createReactComponent('ion-progress-bar', undefined, undefined, defineCustomElement$I);
|
|
677
|
+
const IonRadio = /*@__PURE__*/ createReactComponent('ion-radio', undefined, undefined, defineCustomElement$J);
|
|
678
|
+
const IonRadioGroup = /*@__PURE__*/ createReactComponent('ion-radio-group', undefined, undefined, defineCustomElement$K);
|
|
679
|
+
const IonRange = /*@__PURE__*/ createReactComponent('ion-range', undefined, undefined, defineCustomElement$L);
|
|
680
|
+
const IonRefresher = /*@__PURE__*/ createReactComponent('ion-refresher', undefined, undefined, defineCustomElement$M);
|
|
681
|
+
const IonRefresherContent = /*@__PURE__*/ createReactComponent('ion-refresher-content', undefined, undefined, defineCustomElement$N);
|
|
682
|
+
const IonReorder = /*@__PURE__*/ createReactComponent('ion-reorder', undefined, undefined, defineCustomElement$O);
|
|
683
|
+
const IonReorderGroup = /*@__PURE__*/ createReactComponent('ion-reorder-group', undefined, undefined, defineCustomElement$P);
|
|
684
|
+
const IonRippleEffect = /*@__PURE__*/ createReactComponent('ion-ripple-effect', undefined, undefined, defineCustomElement$Q);
|
|
685
|
+
const IonRow = /*@__PURE__*/ createReactComponent('ion-row', undefined, undefined, defineCustomElement$R);
|
|
686
|
+
const IonSearchbar = /*@__PURE__*/ createReactComponent('ion-searchbar', undefined, undefined, defineCustomElement$S);
|
|
687
|
+
const IonSegment = /*@__PURE__*/ createReactComponent('ion-segment', undefined, undefined, defineCustomElement$T);
|
|
688
|
+
const IonSegmentButton = /*@__PURE__*/ createReactComponent('ion-segment-button', undefined, undefined, defineCustomElement$U);
|
|
689
|
+
const IonSegmentContent = /*@__PURE__*/ createReactComponent('ion-segment-content', undefined, undefined, defineCustomElement$V);
|
|
690
|
+
const IonSegmentView = /*@__PURE__*/ createReactComponent('ion-segment-view', undefined, undefined, defineCustomElement$W);
|
|
691
|
+
const IonSelect = /*@__PURE__*/ createReactComponent('ion-select', undefined, undefined, defineCustomElement$X);
|
|
692
|
+
const IonSelectModal = /*@__PURE__*/ createReactComponent('ion-select-modal', undefined, undefined, defineCustomElement$Y);
|
|
693
|
+
const IonSelectOption = /*@__PURE__*/ createReactComponent('ion-select-option', undefined, undefined, defineCustomElement$Z);
|
|
694
|
+
const IonSkeletonText = /*@__PURE__*/ createReactComponent('ion-skeleton-text', undefined, undefined, defineCustomElement$_);
|
|
695
|
+
const IonSpinner = /*@__PURE__*/ createReactComponent('ion-spinner', undefined, undefined, defineCustomElement$$);
|
|
696
|
+
const IonSplitPane = /*@__PURE__*/ createReactComponent('ion-split-pane', undefined, undefined, defineCustomElement$10);
|
|
697
|
+
const IonTab = /*@__PURE__*/ createReactComponent('ion-tab', undefined, undefined, defineCustomElement$11);
|
|
698
|
+
const IonText = /*@__PURE__*/ createReactComponent('ion-text', undefined, undefined, defineCustomElement$12);
|
|
699
|
+
const IonTextarea = /*@__PURE__*/ createReactComponent('ion-textarea', undefined, undefined, defineCustomElement$13);
|
|
700
|
+
const IonThumbnail = /*@__PURE__*/ createReactComponent('ion-thumbnail', undefined, undefined, defineCustomElement$14);
|
|
701
|
+
const IonTitle = /*@__PURE__*/ createReactComponent('ion-title', undefined, undefined, defineCustomElement$15);
|
|
702
|
+
const IonToggle = /*@__PURE__*/ createReactComponent('ion-toggle', undefined, undefined, defineCustomElement$16);
|
|
703
|
+
const IonToolbar = /*@__PURE__*/ createReactComponent('ion-toolbar', undefined, undefined, defineCustomElement$17);
|
|
704
|
+
|
|
1233
705
|
const createForwardRef = (ReactComponent, // TODO(FW-2959): type
|
|
1234
706
|
displayName) => {
|
|
1235
707
|
const forwardRef = (props, ref) => {
|
|
@@ -1248,15 +720,29 @@ const isPlatform = (platform) => {
|
|
|
1248
720
|
const getPlatforms = () => {
|
|
1249
721
|
return getPlatforms$1(window);
|
|
1250
722
|
};
|
|
723
|
+
const getConfig = () => {
|
|
724
|
+
if (typeof window !== 'undefined') {
|
|
725
|
+
const Ionic = window.Ionic;
|
|
726
|
+
if (Ionic && Ionic.config) {
|
|
727
|
+
return Ionic.config;
|
|
728
|
+
}
|
|
729
|
+
}
|
|
730
|
+
return null;
|
|
731
|
+
};
|
|
1251
732
|
|
|
1252
733
|
const createRoutingComponent = (tagName, customElement) => {
|
|
1253
734
|
defineCustomElement(tagName, customElement);
|
|
1254
735
|
const displayName = dashToPascalCase(tagName);
|
|
1255
736
|
const ReactComponent = class extends React.Component {
|
|
1256
|
-
ref;
|
|
1257
|
-
stableMergedRefs;
|
|
1258
737
|
constructor(props) {
|
|
1259
738
|
super(props);
|
|
739
|
+
this.handleClick = (e) => {
|
|
740
|
+
const { routerLink, routerDirection, routerOptions, routerAnimation } = this.props;
|
|
741
|
+
if (routerLink !== undefined) {
|
|
742
|
+
e.preventDefault();
|
|
743
|
+
this.context.navigate(routerLink, routerDirection, undefined, routerAnimation, routerOptions);
|
|
744
|
+
}
|
|
745
|
+
};
|
|
1260
746
|
// Create a local ref to to attach props to the wrapped element.
|
|
1261
747
|
this.ref = React.createRef();
|
|
1262
748
|
// React refs must be stable (not created inline).
|
|
@@ -1269,18 +755,6 @@ const createRoutingComponent = (tagName, customElement) => {
|
|
|
1269
755
|
const node = this.ref.current;
|
|
1270
756
|
attachProps(node, this.props, prevProps);
|
|
1271
757
|
}
|
|
1272
|
-
handleClick = (e) => {
|
|
1273
|
-
const { routerLink, routerDirection, routerOptions, routerAnimation } = this.props;
|
|
1274
|
-
if (routerLink !== undefined) {
|
|
1275
|
-
// Allow modifier key clicks (ctrl/cmd/shift) to open the link in a new tab/window
|
|
1276
|
-
// without triggering SPA navigation on the current page.
|
|
1277
|
-
if (e.metaKey || e.ctrlKey || e.shiftKey) {
|
|
1278
|
-
return;
|
|
1279
|
-
}
|
|
1280
|
-
e.preventDefault();
|
|
1281
|
-
this.context.navigate(routerLink, routerDirection, undefined, routerAnimation, routerOptions);
|
|
1282
|
-
}
|
|
1283
|
-
};
|
|
1284
758
|
render() {
|
|
1285
759
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1286
760
|
const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
|
|
@@ -1387,14 +861,44 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
|
|
|
1387
861
|
}
|
|
1388
862
|
const displayName = dashToPascalCase(tagName);
|
|
1389
863
|
const ReactComponent = class extends React.Component {
|
|
1390
|
-
ref;
|
|
1391
|
-
wrapperRef;
|
|
1392
|
-
markerRef;
|
|
1393
|
-
stableMergedRefs;
|
|
1394
|
-
portalTarget;
|
|
1395
|
-
isUnmounted = false;
|
|
1396
864
|
constructor(props) {
|
|
1397
865
|
super(props);
|
|
866
|
+
this.isUnmounted = false;
|
|
867
|
+
this.handleIonMount = () => {
|
|
868
|
+
/**
|
|
869
|
+
* Mount the inner component when the
|
|
870
|
+
* overlay is about to open.
|
|
871
|
+
*
|
|
872
|
+
* For ion-popover, this is when `ionMount` is emitted.
|
|
873
|
+
* For other overlays, this is when `willPresent` is emitted.
|
|
874
|
+
*/
|
|
875
|
+
this.setState({ isOpen: true });
|
|
876
|
+
};
|
|
877
|
+
this.handleWillPresent = (evt) => {
|
|
878
|
+
this.setState({ isOpen: true });
|
|
879
|
+
/**
|
|
880
|
+
* Manually call the onWillPresent
|
|
881
|
+
* handler if present as setState will
|
|
882
|
+
* cause the event handlers to be
|
|
883
|
+
* destroyed and re-created.
|
|
884
|
+
*/
|
|
885
|
+
this.props.onWillPresent && this.props.onWillPresent(evt);
|
|
886
|
+
};
|
|
887
|
+
this.handleDidDismiss = (evt) => {
|
|
888
|
+
const wrapper = this.wrapperRef.current;
|
|
889
|
+
const el = this.ref.current;
|
|
890
|
+
/**
|
|
891
|
+
* This component might be unmounted already, if the containing
|
|
892
|
+
* element was removed while the overlay was still open. (For
|
|
893
|
+
* example, if an item contains an inline overlay with a button
|
|
894
|
+
* that removes the item.)
|
|
895
|
+
*/
|
|
896
|
+
if (wrapper && el) {
|
|
897
|
+
el.append(wrapper);
|
|
898
|
+
this.setState({ isOpen: false });
|
|
899
|
+
}
|
|
900
|
+
this.props.onDidDismiss && this.props.onDidDismiss(evt);
|
|
901
|
+
};
|
|
1398
902
|
// Create a local ref to to attach props to the wrapped element.
|
|
1399
903
|
this.ref = React.createRef();
|
|
1400
904
|
// React refs must be stable (not created inline).
|
|
@@ -1571,41 +1075,6 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
|
|
|
1571
1075
|
static get displayName() {
|
|
1572
1076
|
return displayName;
|
|
1573
1077
|
}
|
|
1574
|
-
handleIonMount = () => {
|
|
1575
|
-
/**
|
|
1576
|
-
* Mount the inner component when the
|
|
1577
|
-
* overlay is about to open.
|
|
1578
|
-
*
|
|
1579
|
-
* For ion-popover, this is when `ionMount` is emitted.
|
|
1580
|
-
* For other overlays, this is when `willPresent` is emitted.
|
|
1581
|
-
*/
|
|
1582
|
-
this.setState({ isOpen: true });
|
|
1583
|
-
};
|
|
1584
|
-
handleWillPresent = (evt) => {
|
|
1585
|
-
this.setState({ isOpen: true });
|
|
1586
|
-
/**
|
|
1587
|
-
* Manually call the onWillPresent
|
|
1588
|
-
* handler if present as setState will
|
|
1589
|
-
* cause the event handlers to be
|
|
1590
|
-
* destroyed and re-created.
|
|
1591
|
-
*/
|
|
1592
|
-
this.props.onWillPresent && this.props.onWillPresent(evt);
|
|
1593
|
-
};
|
|
1594
|
-
handleDidDismiss = (evt) => {
|
|
1595
|
-
const wrapper = this.wrapperRef.current;
|
|
1596
|
-
const el = this.ref.current;
|
|
1597
|
-
/**
|
|
1598
|
-
* This component might be unmounted already, if the containing
|
|
1599
|
-
* element was removed while the overlay was still open. (For
|
|
1600
|
-
* example, if an item contains an inline overlay with a button
|
|
1601
|
-
* that removes the item.)
|
|
1602
|
-
*/
|
|
1603
|
-
if (wrapper && el) {
|
|
1604
|
-
el.append(wrapper);
|
|
1605
|
-
this.setState({ isOpen: false });
|
|
1606
|
-
}
|
|
1607
|
-
this.props.onDidDismiss && this.props.onDidDismiss(evt);
|
|
1608
|
-
};
|
|
1609
1078
|
};
|
|
1610
1079
|
// Forward the nesting context as a prop to avoid contextType on the class.
|
|
1611
1080
|
// The render function is passed via `children` (not as a varargs child) so it
|
|
@@ -1624,11 +1093,13 @@ const IonLoading = /*@__PURE__*/ createInlineOverlayComponent('ion-loading', def
|
|
|
1624
1093
|
|
|
1625
1094
|
const IonToast = /*@__PURE__*/ createInlineOverlayComponent('ion-toast', defineCustomElement$1a);
|
|
1626
1095
|
|
|
1627
|
-
const
|
|
1096
|
+
const IonPickerLegacy = /*@__PURE__*/ createInlineOverlayComponent('ion-picker-legacy', defineCustomElement$1b);
|
|
1628
1097
|
|
|
1629
|
-
const
|
|
1098
|
+
const IonActionSheet = /*@__PURE__*/ createInlineOverlayComponent('ion-action-sheet', defineCustomElement$1c);
|
|
1630
1099
|
|
|
1631
|
-
const
|
|
1100
|
+
const IonModal = /*@__PURE__*/ createInlineOverlayComponent('ion-modal', defineCustomElement$1d, true);
|
|
1101
|
+
|
|
1102
|
+
const IonPopover = /*@__PURE__*/ createInlineOverlayComponent('ion-popover', defineCustomElement$1e);
|
|
1632
1103
|
|
|
1633
1104
|
const IonContext = React.createContext({
|
|
1634
1105
|
addOverlay: () => {
|
|
@@ -1720,101 +1191,31 @@ const IonOverlayManager = ({ onAddOverlay, onRemoveOverlay }) => {
|
|
|
1720
1191
|
}) }));
|
|
1721
1192
|
};
|
|
1722
1193
|
|
|
1723
|
-
const
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
componentEl;
|
|
1730
|
-
setComponentElRef = (element) => {
|
|
1731
|
-
this.componentEl = element;
|
|
1732
|
-
};
|
|
1733
|
-
constructor(props) {
|
|
1734
|
-
super(props);
|
|
1735
|
-
}
|
|
1736
|
-
componentDidMount() {
|
|
1737
|
-
this.componentDidUpdate(this.props);
|
|
1738
|
-
}
|
|
1739
|
-
componentDidUpdate(prevProps) {
|
|
1740
|
-
attachProps(this.componentEl, this.props, prevProps);
|
|
1741
|
-
}
|
|
1742
|
-
render() {
|
|
1743
|
-
const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
|
|
1744
|
-
let propsToPass = Object.keys(cProps).reduce((acc, name) => {
|
|
1745
|
-
const value = cProps[name];
|
|
1746
|
-
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
|
1747
|
-
const eventName = name.substring(2).toLowerCase();
|
|
1748
|
-
if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
|
|
1749
|
-
acc[name] = value;
|
|
1750
|
-
}
|
|
1751
|
-
}
|
|
1752
|
-
else {
|
|
1753
|
-
// we should only render strings, booleans, and numbers as attrs in html.
|
|
1754
|
-
// objects, functions, arrays etc get synced via properties on mount.
|
|
1755
|
-
const type = typeof value;
|
|
1756
|
-
if (type === 'string' || type === 'boolean' || type === 'number') {
|
|
1757
|
-
acc[camelToDashCase(name)] = value;
|
|
1758
|
-
}
|
|
1759
|
-
}
|
|
1760
|
-
return acc;
|
|
1761
|
-
}, {});
|
|
1762
|
-
if (manipulatePropsFunction) {
|
|
1763
|
-
propsToPass = manipulatePropsFunction(this.props, propsToPass);
|
|
1764
|
-
}
|
|
1765
|
-
const newProps = {
|
|
1766
|
-
...propsToPass,
|
|
1767
|
-
ref: mergeRefs(forwardedRef, this.setComponentElRef),
|
|
1768
|
-
style,
|
|
1769
|
-
children
|
|
1770
|
-
};
|
|
1771
|
-
/**
|
|
1772
|
-
* We use createElement here instead of
|
|
1773
|
-
* React.createElement to work around a
|
|
1774
|
-
* bug in Vite (https://github.com/vitejs/vite/issues/6104).
|
|
1775
|
-
* React.createElement causes all elements to be rendered
|
|
1776
|
-
* as <tagname> instead of the actual Web Component.
|
|
1777
|
-
*/
|
|
1778
|
-
return createElement(tagName, newProps, children);
|
|
1779
|
-
}
|
|
1780
|
-
static get displayName() {
|
|
1781
|
-
return displayName;
|
|
1782
|
-
}
|
|
1783
|
-
};
|
|
1784
|
-
// If context was passed to createReactComponent then conditionally add it to the Component Class
|
|
1785
|
-
if (ReactComponentContext) {
|
|
1786
|
-
ReactComponent.contextType = ReactComponentContext;
|
|
1787
|
-
}
|
|
1788
|
-
return createForwardRef$1(ReactComponent, displayName);
|
|
1789
|
-
};
|
|
1790
|
-
|
|
1791
|
-
const IonTabButtonInner = /*@__PURE__*/ createReactComponent('ion-tab-button', undefined, undefined, defineCustomElement$1e);
|
|
1792
|
-
const IonTabBarInner = /*@__PURE__*/ createReactComponent('ion-tab-bar', undefined, undefined, defineCustomElement$1f);
|
|
1793
|
-
const IonTabsInner = /*@__PURE__*/ createReactComponent('ion-tabs', undefined, undefined, defineCustomElement$1g);
|
|
1794
|
-
const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button', undefined, undefined, defineCustomElement$1h);
|
|
1795
|
-
const IonRouterOutletInner = /*@__PURE__*/ createReactComponent('ion-router-outlet', undefined, undefined, defineCustomElement$1i);
|
|
1796
|
-
const IonAppInner = /*@__PURE__*/ createReactComponent('ion-app', undefined, undefined, defineCustomElement$1j);
|
|
1194
|
+
const IonTabButtonInner = /*@__PURE__*/ createReactComponent('ion-tab-button', undefined, undefined, defineCustomElement$1f);
|
|
1195
|
+
const IonTabBarInner = /*@__PURE__*/ createReactComponent('ion-tab-bar', undefined, undefined, defineCustomElement$1g);
|
|
1196
|
+
const IonTabsInner = /*@__PURE__*/ createReactComponent('ion-tabs', undefined, undefined, defineCustomElement$1h);
|
|
1197
|
+
const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button', undefined, undefined, defineCustomElement$1i);
|
|
1198
|
+
const IonRouterOutletInner = /*@__PURE__*/ createReactComponent('ion-router-outlet', undefined, undefined, defineCustomElement$1j);
|
|
1199
|
+
const IonAppInner = /*@__PURE__*/ createReactComponent('ion-app', undefined, undefined, defineCustomElement$1k);
|
|
1797
1200
|
// ionicons
|
|
1798
|
-
const IonIconInner = /*@__PURE__*/ createReactComponent('ion-icon', undefined, undefined, defineCustomElement$
|
|
1201
|
+
const IonIconInner = /*@__PURE__*/ createReactComponent('ion-icon', undefined, undefined, defineCustomElement$1l);
|
|
1799
1202
|
|
|
1800
1203
|
class IonApp extends React.Component {
|
|
1801
|
-
addOverlayCallback;
|
|
1802
|
-
removeOverlayCallback;
|
|
1803
1204
|
constructor(props) {
|
|
1804
1205
|
super(props);
|
|
1206
|
+
this.ionContext = {
|
|
1207
|
+
addOverlay: (id, overlay, containerElement) => {
|
|
1208
|
+
if (this.addOverlayCallback) {
|
|
1209
|
+
this.addOverlayCallback(id, overlay, containerElement);
|
|
1210
|
+
}
|
|
1211
|
+
},
|
|
1212
|
+
removeOverlay: (id) => {
|
|
1213
|
+
if (this.removeOverlayCallback) {
|
|
1214
|
+
this.removeOverlayCallback(id);
|
|
1215
|
+
}
|
|
1216
|
+
},
|
|
1217
|
+
};
|
|
1805
1218
|
}
|
|
1806
|
-
ionContext = {
|
|
1807
|
-
addOverlay: (id, overlay, containerElement) => {
|
|
1808
|
-
if (this.addOverlayCallback) {
|
|
1809
|
-
this.addOverlayCallback(id, overlay, containerElement);
|
|
1810
|
-
}
|
|
1811
|
-
},
|
|
1812
|
-
removeOverlay: (id) => {
|
|
1813
|
-
if (this.removeOverlayCallback) {
|
|
1814
|
-
this.removeOverlayCallback(id);
|
|
1815
|
-
}
|
|
1816
|
-
},
|
|
1817
|
-
};
|
|
1818
1219
|
render() {
|
|
1819
1220
|
return (jsxs(IonContext.Provider, { value: this.ionContext, children: [jsx(IonAppInner, { ...this.props, children: this.props.children }), jsx(IonOverlayManager, { onAddOverlay: (callback) => {
|
|
1820
1221
|
this.addOverlayCallback = callback;
|
|
@@ -1822,8 +1223,8 @@ class IonApp extends React.Component {
|
|
|
1822
1223
|
this.removeOverlayCallback = callback;
|
|
1823
1224
|
} })] }));
|
|
1824
1225
|
}
|
|
1825
|
-
static displayName = 'IonApp';
|
|
1826
1226
|
}
|
|
1227
|
+
IonApp.displayName = 'IonApp';
|
|
1827
1228
|
|
|
1828
1229
|
const StackContext = React.createContext({
|
|
1829
1230
|
registerIonPage: () => undefined,
|
|
@@ -1831,32 +1232,11 @@ const StackContext = React.createContext({
|
|
|
1831
1232
|
});
|
|
1832
1233
|
|
|
1833
1234
|
class PageManager extends React.PureComponent {
|
|
1834
|
-
ionLifeCycleContext;
|
|
1835
|
-
ionPageElementRef;
|
|
1836
|
-
stableMergedRefs;
|
|
1837
1235
|
constructor(props) {
|
|
1838
1236
|
super(props);
|
|
1839
1237
|
this.ionPageElementRef = React.createRef();
|
|
1840
1238
|
// React refs must be stable (not created inline).
|
|
1841
|
-
|
|
1842
|
-
const baseMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef);
|
|
1843
|
-
// Guard against React 19 strict mode double-mount re-adding ion-page-invisible.
|
|
1844
|
-
// The ref fires again on remount after StackManager may have already removed it.
|
|
1845
|
-
let hasAppliedInvisible = false;
|
|
1846
|
-
this.stableMergedRefs = (node) => {
|
|
1847
|
-
if (node &&
|
|
1848
|
-
!hasAppliedInvisible &&
|
|
1849
|
-
!node.classList.contains('ion-page-invisible') &&
|
|
1850
|
-
!node.classList.contains('ion-page-hidden')) {
|
|
1851
|
-
// Add ion-page-invisible synchronously before first paint (if in an outlet)
|
|
1852
|
-
// This prevents the flash that occurs when componentDidMount runs after paint
|
|
1853
|
-
if (this.context?.isInOutlet?.()) {
|
|
1854
|
-
node.classList.add('ion-page-invisible');
|
|
1855
|
-
hasAppliedInvisible = true;
|
|
1856
|
-
}
|
|
1857
|
-
}
|
|
1858
|
-
baseMergedRefs(node);
|
|
1859
|
-
};
|
|
1239
|
+
this.stableMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef);
|
|
1860
1240
|
/**
|
|
1861
1241
|
* This binds the scope of the following methods to the class scope.
|
|
1862
1242
|
* The `.bind` method returns a new function, so we need to assign it
|
|
@@ -1868,38 +1248,11 @@ class PageManager extends React.PureComponent {
|
|
|
1868
1248
|
this.ionViewWillLeaveHandler = this.ionViewWillLeaveHandler.bind(this);
|
|
1869
1249
|
this.ionViewDidLeaveHandler = this.ionViewDidLeaveHandler.bind(this);
|
|
1870
1250
|
}
|
|
1871
|
-
parseClasses(className) {
|
|
1872
|
-
if (!className)
|
|
1873
|
-
return new Set();
|
|
1874
|
-
return new Set(className.split(/\s+/).filter(Boolean));
|
|
1875
|
-
}
|
|
1876
|
-
/**
|
|
1877
|
-
* Updates classList by diffing old/new className props.
|
|
1878
|
-
* Preserves framework-added classes (can-go-back, ion-page-invisible, etc.).
|
|
1879
|
-
*/
|
|
1880
|
-
updateUserClasses(oldClassName, newClassName) {
|
|
1881
|
-
if (!this.ionPageElementRef.current)
|
|
1882
|
-
return;
|
|
1883
|
-
const oldClasses = this.parseClasses(oldClassName);
|
|
1884
|
-
const newClasses = this.parseClasses(newClassName);
|
|
1885
|
-
oldClasses.forEach((cls) => {
|
|
1886
|
-
if (!newClasses.has(cls)) {
|
|
1887
|
-
this.ionPageElementRef.current.classList.remove(cls);
|
|
1888
|
-
}
|
|
1889
|
-
});
|
|
1890
|
-
newClasses.forEach((cls) => {
|
|
1891
|
-
if (!oldClasses.has(cls)) {
|
|
1892
|
-
this.ionPageElementRef.current.classList.add(cls);
|
|
1893
|
-
}
|
|
1894
|
-
});
|
|
1895
|
-
}
|
|
1896
1251
|
componentDidMount() {
|
|
1897
1252
|
if (this.ionPageElementRef.current) {
|
|
1898
|
-
|
|
1899
|
-
|
|
1900
|
-
|
|
1901
|
-
// The ref callback runs synchronously when the element is created, before the browser paints.
|
|
1902
|
-
this.updateUserClasses(undefined, this.props.className);
|
|
1253
|
+
if (this.context.isInOutlet()) {
|
|
1254
|
+
this.ionPageElementRef.current.classList.add('ion-page-invisible');
|
|
1255
|
+
}
|
|
1903
1256
|
this.context.registerIonPage(this.ionPageElementRef.current, this.props.routeInfo);
|
|
1904
1257
|
this.ionPageElementRef.current.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
|
|
1905
1258
|
this.ionPageElementRef.current.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler);
|
|
@@ -1907,11 +1260,6 @@ class PageManager extends React.PureComponent {
|
|
|
1907
1260
|
this.ionPageElementRef.current.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler);
|
|
1908
1261
|
}
|
|
1909
1262
|
}
|
|
1910
|
-
componentDidUpdate(prevProps) {
|
|
1911
|
-
if (prevProps.className !== this.props.className) {
|
|
1912
|
-
this.updateUserClasses(prevProps.className, this.props.className);
|
|
1913
|
-
}
|
|
1914
|
-
}
|
|
1915
1263
|
componentWillUnmount() {
|
|
1916
1264
|
if (this.ionPageElementRef.current) {
|
|
1917
1265
|
this.ionPageElementRef.current.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
|
|
@@ -1941,11 +1289,9 @@ class PageManager extends React.PureComponent {
|
|
|
1941
1289
|
render() {
|
|
1942
1290
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1943
1291
|
const { className, children, routeInfo, forwardedRef, ...props } = this.props;
|
|
1944
|
-
// Only set "ion-page" in JSX. User classes are managed via DOM in componentDidMount/componentDidUpdate
|
|
1945
|
-
// to preserve framework-added classes (can-go-back, ion-page-invisible, etc.) when className prop changes.
|
|
1946
1292
|
return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
|
|
1947
1293
|
this.ionLifeCycleContext = context;
|
|
1948
|
-
return (jsx("div", { className:
|
|
1294
|
+
return (jsx("div", { className: className ? `${className} ion-page` : `ion-page`, ref: this.stableMergedRefs, ...props, children: children }));
|
|
1949
1295
|
} }));
|
|
1950
1296
|
}
|
|
1951
1297
|
static get contextType() {
|
|
@@ -2005,7 +1351,7 @@ const ReactDelegate = (addView, removeView) => {
|
|
|
2005
1351
|
};
|
|
2006
1352
|
};
|
|
2007
1353
|
|
|
2008
|
-
const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$
|
|
1354
|
+
const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$1m);
|
|
2009
1355
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2010
1356
|
const IonNavInternal = ({ children, forwardedRef, ...restOfProps }) => {
|
|
2011
1357
|
const [views, setViews] = useState([]);
|
|
@@ -2031,9 +1377,6 @@ const HTMLElementSSR = (typeof HTMLElement !== 'undefined' ? HTMLElement : class
|
|
|
2031
1377
|
});
|
|
2032
1378
|
|
|
2033
1379
|
class OutletPageManager extends React.Component {
|
|
2034
|
-
ionLifeCycleContext;
|
|
2035
|
-
ionRouterOutlet;
|
|
2036
|
-
outletIsReady;
|
|
2037
1380
|
constructor(props) {
|
|
2038
1381
|
super(props);
|
|
2039
1382
|
this.outletIsReady = false;
|
|
@@ -2056,30 +1399,8 @@ class OutletPageManager extends React.Component {
|
|
|
2056
1399
|
*/
|
|
2057
1400
|
if (!this.outletIsReady) {
|
|
2058
1401
|
componentOnReady(this.ionRouterOutlet, () => {
|
|
2059
|
-
/**
|
|
2060
|
-
* Guard against duplicate callbacks from React strict mode double-mount.
|
|
2061
|
-
* Both componentDidMount calls pass the outer !outletIsReady check before
|
|
2062
|
-
* either async callback fires. Without this inner guard, the second callback
|
|
2063
|
-
* re-adds ion-page-invisible after the first callback's transition removed it,
|
|
2064
|
-
* and registerIonPage returns early (same element), leaving the page invisible.
|
|
2065
|
-
*/
|
|
2066
|
-
if (this.outletIsReady)
|
|
2067
|
-
return;
|
|
2068
1402
|
this.outletIsReady = true;
|
|
2069
|
-
|
|
2070
|
-
* Add ion-page + ion-page-invisible AFTER Stencil hydration but
|
|
2071
|
-
* BEFORE registerIonPage. Stencil hydration overwrites className,
|
|
2072
|
-
* so classes added in a React ref callback get wiped. Adding them
|
|
2073
|
-
* here -- after hydration -- ensures they persist until the parent
|
|
2074
|
-
* outlet's forward animation removes ion-page-invisible, preventing
|
|
2075
|
-
* a flash where the outlet is briefly visible at full opacity.
|
|
2076
|
-
*/
|
|
2077
|
-
const el = this.ionRouterOutlet;
|
|
2078
|
-
if (!el.classList.contains('ion-page-invisible') && !el.classList.contains('ion-page-hidden')) {
|
|
2079
|
-
el.classList.add('ion-page');
|
|
2080
|
-
el.classList.add('ion-page-invisible');
|
|
2081
|
-
}
|
|
2082
|
-
this.context.registerIonPage(el, this.props.routeInfo);
|
|
1403
|
+
this.context.registerIonPage(this.ionRouterOutlet, this.props.routeInfo);
|
|
2083
1404
|
});
|
|
2084
1405
|
}
|
|
2085
1406
|
this.ionRouterOutlet.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
|
|
@@ -2109,10 +1430,10 @@ class OutletPageManager extends React.Component {
|
|
|
2109
1430
|
this.ionLifeCycleContext.ionViewDidLeave();
|
|
2110
1431
|
}
|
|
2111
1432
|
render() {
|
|
2112
|
-
const { StackManager, children, routeInfo,
|
|
1433
|
+
const { StackManager, children, routeInfo, ...props } = this.props;
|
|
2113
1434
|
return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
|
|
2114
1435
|
this.ionLifeCycleContext = context;
|
|
2115
|
-
return (jsx(StackManager, {
|
|
1436
|
+
return (jsx(StackManager, { routeInfo: routeInfo, children: jsx(IonRouterOutletInner, { setRef: (val) => (this.ionRouterOutlet = val), ...props, children: children }) }));
|
|
2116
1437
|
} }));
|
|
2117
1438
|
}
|
|
2118
1439
|
static get contextType() {
|
|
@@ -2121,16 +1442,13 @@ class OutletPageManager extends React.Component {
|
|
|
2121
1442
|
}
|
|
2122
1443
|
|
|
2123
1444
|
class IonRouterOutletContainer extends React.Component {
|
|
2124
|
-
outletId;
|
|
2125
1445
|
constructor(props) {
|
|
2126
1446
|
super(props);
|
|
2127
|
-
this.outletId = props.id ?? `routerOutlet-${generateId('routerOutlet')}`;
|
|
2128
1447
|
}
|
|
2129
1448
|
render() {
|
|
2130
1449
|
const StackManager = this.context.getStackManager();
|
|
2131
1450
|
const { children, forwardedRef, ...props } = this.props;
|
|
2132
|
-
|
|
2133
|
-
return this.context.hasIonicRouter() ? (props.ionPage ? (jsx(OutletPageManager, { StackManager: StackManager, routeInfo: this.context.routeInfo, ...props, children: children })) : (jsx(StackManager, { routeInfo: this.context.routeInfo, id: outletId, children: jsx(IonRouterOutletInner, { ...props, id: outletId, forwardedRef: forwardedRef, children: children }) }))) : (jsx(IonRouterOutletInner, { ref: forwardedRef, ...this.props, children: this.props.children }));
|
|
1451
|
+
return this.context.hasIonicRouter() ? (props.ionPage ? (jsx(OutletPageManager, { StackManager: StackManager, routeInfo: this.context.routeInfo, ...props, children: children })) : (jsx(StackManager, { routeInfo: this.context.routeInfo, children: jsx(IonRouterOutletInner, { ...props, forwardedRef: forwardedRef, children: children }) }))) : (jsx(IonRouterOutletInner, { ref: forwardedRef, ...this.props, children: this.props.children }));
|
|
2134
1452
|
}
|
|
2135
1453
|
static get contextType() {
|
|
2136
1454
|
return NavContext;
|
|
@@ -2154,29 +1472,28 @@ class IonTabs extends React.Component {
|
|
|
2154
1472
|
shouldComponentUpdate() {
|
|
2155
1473
|
return true;
|
|
2156
1474
|
}
|
|
2157
|
-
/**
|
|
2158
|
-
* `routerOutletRef` allows users to add a `ref` to `IonRouterOutlet`.
|
|
2159
|
-
* Without this, `ref.current` will be `undefined` in the user's app,
|
|
2160
|
-
* breaking their ability to access the `IonRouterOutlet` instance.
|
|
2161
|
-
* Do not remove this ref.
|
|
2162
|
-
*/
|
|
2163
|
-
routerOutletRef = React.createRef();
|
|
2164
|
-
selectTabHandler;
|
|
2165
|
-
tabBarRef = React.createRef();
|
|
2166
|
-
ionTabContextState = {
|
|
2167
|
-
activeTab: undefined,
|
|
2168
|
-
selectTab: () => false,
|
|
2169
|
-
hasRouterOutlet: false,
|
|
2170
|
-
/**
|
|
2171
|
-
* Tab bar can be used as a standalone component,
|
|
2172
|
-
* so the props can not be passed directly to the
|
|
2173
|
-
* tab bar component. Instead, props will be
|
|
2174
|
-
* passed through the context.
|
|
2175
|
-
*/
|
|
2176
|
-
tabBarProps: { ref: this.tabBarRef },
|
|
2177
|
-
};
|
|
2178
1475
|
constructor(props) {
|
|
2179
1476
|
super(props);
|
|
1477
|
+
/**
|
|
1478
|
+
* `routerOutletRef` allows users to add a `ref` to `IonRouterOutlet`.
|
|
1479
|
+
* Without this, `ref.current` will be `undefined` in the user's app,
|
|
1480
|
+
* breaking their ability to access the `IonRouterOutlet` instance.
|
|
1481
|
+
* Do not remove this ref.
|
|
1482
|
+
*/
|
|
1483
|
+
this.routerOutletRef = React.createRef();
|
|
1484
|
+
this.tabBarRef = React.createRef();
|
|
1485
|
+
this.ionTabContextState = {
|
|
1486
|
+
activeTab: undefined,
|
|
1487
|
+
selectTab: () => false,
|
|
1488
|
+
hasRouterOutlet: false,
|
|
1489
|
+
/**
|
|
1490
|
+
* Tab bar can be used as a standalone component,
|
|
1491
|
+
* so the props can not be passed directly to the
|
|
1492
|
+
* tab bar component. Instead, props will be
|
|
1493
|
+
* passed through the context.
|
|
1494
|
+
*/
|
|
1495
|
+
tabBarProps: { ref: this.tabBarRef },
|
|
1496
|
+
};
|
|
2180
1497
|
}
|
|
2181
1498
|
componentDidMount() {
|
|
2182
1499
|
if (this.tabBarRef.current) {
|
|
@@ -2328,14 +1645,14 @@ const matchesTab = (pathname, href) => {
|
|
|
2328
1645
|
if (href === undefined) {
|
|
2329
1646
|
return false;
|
|
2330
1647
|
}
|
|
2331
|
-
|
|
2332
|
-
const hrefPathname = href.split('?')[0];
|
|
2333
|
-
const normalizedHref = hrefPathname.endsWith('/') && hrefPathname !== '/' ? hrefPathname.slice(0, -1) : hrefPathname;
|
|
1648
|
+
const normalizedHref = href.endsWith('/') && href !== '/' ? href.slice(0, -1) : href;
|
|
2334
1649
|
return pathname === normalizedHref || pathname.startsWith(normalizedHref + '/');
|
|
2335
1650
|
};
|
|
2336
1651
|
class IonTabBarUnwrapped extends React.PureComponent {
|
|
2337
1652
|
constructor(props) {
|
|
2338
1653
|
super(props);
|
|
1654
|
+
// eslint-disable-next-line
|
|
1655
|
+
this.setActiveTabOnContext = (_tab) => { };
|
|
2339
1656
|
const tabs = {};
|
|
2340
1657
|
React.Children.forEach(props.children, (child) => {
|
|
2341
1658
|
if (child != null &&
|
|
@@ -2376,8 +1693,6 @@ class IonTabBarUnwrapped extends React.PureComponent {
|
|
|
2376
1693
|
this.setActiveTabOnContext(this.state.activeTab);
|
|
2377
1694
|
}
|
|
2378
1695
|
}
|
|
2379
|
-
// eslint-disable-next-line
|
|
2380
|
-
setActiveTabOnContext = (_tab) => { };
|
|
2381
1696
|
selectTab(tab) {
|
|
2382
1697
|
const tabUrl = this.state.tabs[tab];
|
|
2383
1698
|
if (tabUrl) {
|
|
@@ -2422,7 +1737,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
|
|
|
2422
1737
|
const prevHref = state.tabs[prevActiveTab].currentHref;
|
|
2423
1738
|
const prevRouteOptions = state.tabs[prevActiveTab].currentRouteOptions;
|
|
2424
1739
|
if (activeTab !== prevActiveTab ||
|
|
2425
|
-
prevHref !==
|
|
1740
|
+
prevHref !== props.routeInfo?.pathname ||
|
|
2426
1741
|
prevRouteOptions !== props.routeInfo?.routeOptions) {
|
|
2427
1742
|
tabs[activeTab] = {
|
|
2428
1743
|
originalHref: tabs[activeTab].originalHref,
|
|
@@ -2495,7 +1810,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
|
|
|
2495
1810
|
return (child) => {
|
|
2496
1811
|
if (child != null && child.props && (child.type === IonTabButton || child.type.isTabButton)) {
|
|
2497
1812
|
const href = child.props.tab === activeTab
|
|
2498
|
-
?
|
|
1813
|
+
? this.props.routeInfo?.pathname
|
|
2499
1814
|
: this.state.tabs[child.props.tab].currentHref;
|
|
2500
1815
|
const routeOptions = child.props.tab === activeTab
|
|
2501
1816
|
? this.props.routeInfo?.routeOptions
|
|
@@ -2540,24 +1855,27 @@ const IonTabBarContainer = React.memo(({ forwardedRef, ...props }) => {
|
|
|
2540
1855
|
const IonTabBar = createForwardRef(IonTabBarContainer, 'IonTabBar');
|
|
2541
1856
|
|
|
2542
1857
|
class IonBackButton extends React.Component {
|
|
2543
|
-
|
|
2544
|
-
|
|
2545
|
-
|
|
2546
|
-
|
|
2547
|
-
|
|
2548
|
-
|
|
2549
|
-
|
|
2550
|
-
|
|
2551
|
-
|
|
2552
|
-
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
this.context.
|
|
2556
|
-
|
|
2557
|
-
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
1858
|
+
constructor() {
|
|
1859
|
+
super(...arguments);
|
|
1860
|
+
this.clickButton = (e) => {
|
|
1861
|
+
/**
|
|
1862
|
+
* If ion-back-button is being used inside
|
|
1863
|
+
* of ion-nav then we should not interact with
|
|
1864
|
+
* the router.
|
|
1865
|
+
*/
|
|
1866
|
+
if (e.target && e.target.closest('ion-nav') !== null) {
|
|
1867
|
+
return;
|
|
1868
|
+
}
|
|
1869
|
+
const { defaultHref, routerAnimation } = this.props;
|
|
1870
|
+
if (this.context.hasIonicRouter()) {
|
|
1871
|
+
e.stopPropagation();
|
|
1872
|
+
this.context.goBack(defaultHref, routerAnimation);
|
|
1873
|
+
}
|
|
1874
|
+
else if (defaultHref !== undefined) {
|
|
1875
|
+
window.location.href = defaultHref;
|
|
1876
|
+
}
|
|
1877
|
+
};
|
|
1878
|
+
}
|
|
2561
1879
|
render() {
|
|
2562
1880
|
return jsx(IonBackButtonInner, { onClick: this.clickButton, ...this.props });
|
|
2563
1881
|
}
|
|
@@ -2572,21 +1890,6 @@ class IonBackButton extends React.Component {
|
|
|
2572
1890
|
}
|
|
2573
1891
|
}
|
|
2574
1892
|
|
|
2575
|
-
/**
|
|
2576
|
-
* Ionic's global config, or `null` before core has initialized. Kept here rather
|
|
2577
|
-
* than alongside the component helpers so that utils reaching for config don't
|
|
2578
|
-
* pull core's runtime bundle in with it.
|
|
2579
|
-
*/
|
|
2580
|
-
const getConfig = () => {
|
|
2581
|
-
if (typeof window !== 'undefined') {
|
|
2582
|
-
const Ionic = window.Ionic;
|
|
2583
|
-
if (Ionic && Ionic.config) {
|
|
2584
|
-
return Ionic.config;
|
|
2585
|
-
}
|
|
2586
|
-
}
|
|
2587
|
-
return null;
|
|
2588
|
-
};
|
|
2589
|
-
|
|
2590
1893
|
class IonIconContainer extends React.PureComponent {
|
|
2591
1894
|
constructor(props) {
|
|
2592
1895
|
super(props);
|
|
@@ -2632,6 +1935,20 @@ class IonRoute extends React.PureComponent {
|
|
|
2632
1935
|
}
|
|
2633
1936
|
}
|
|
2634
1937
|
|
|
1938
|
+
class IonRedirect extends React.PureComponent {
|
|
1939
|
+
render() {
|
|
1940
|
+
const IonRedirectInner = this.context.getIonRedirect();
|
|
1941
|
+
if (!this.context.hasIonicRouter() || !IonRedirect) {
|
|
1942
|
+
console.error('You either do not have an Ionic Router package, or your router does not support using <IonRedirect>');
|
|
1943
|
+
return null;
|
|
1944
|
+
}
|
|
1945
|
+
return jsx(IonRedirectInner, { ...this.props });
|
|
1946
|
+
}
|
|
1947
|
+
static get contextType() {
|
|
1948
|
+
return NavContext;
|
|
1949
|
+
}
|
|
1950
|
+
}
|
|
1951
|
+
|
|
2635
1952
|
const IonRouterContext = React.createContext({
|
|
2636
1953
|
routeInfo: undefined, // TODO(FW-2959): type
|
|
2637
1954
|
push: () => {
|
|
@@ -2640,9 +1957,6 @@ const IonRouterContext = React.createContext({
|
|
|
2640
1957
|
back: () => {
|
|
2641
1958
|
throw new Error('An Ionic Router is required for IonRouterContext');
|
|
2642
1959
|
},
|
|
2643
|
-
navigateRoot: () => {
|
|
2644
|
-
throw new Error('An Ionic Router is required for IonRouterContext');
|
|
2645
|
-
},
|
|
2646
1960
|
canGoBack: () => {
|
|
2647
1961
|
throw new Error('An Ionic Router is required for IonRouterContext');
|
|
2648
1962
|
},
|
|
@@ -2659,17 +1973,15 @@ function useIonRouter() {
|
|
|
2659
1973
|
back: context.back,
|
|
2660
1974
|
push: context.push,
|
|
2661
1975
|
goBack: context.back,
|
|
2662
|
-
navigateRoot: context.navigateRoot,
|
|
2663
1976
|
canGoBack: context.canGoBack,
|
|
2664
1977
|
routeInfo: context.routeInfo,
|
|
2665
|
-
}), [context.back, context.push, context.
|
|
1978
|
+
}), [context.back, context.push, context.canGoBack, context.routeInfo]);
|
|
2666
1979
|
}
|
|
2667
1980
|
|
|
2668
1981
|
class CreateAnimation extends React.PureComponent {
|
|
2669
|
-
nodes = new Map();
|
|
2670
|
-
animation;
|
|
2671
1982
|
constructor(props) {
|
|
2672
1983
|
super(props);
|
|
1984
|
+
this.nodes = new Map();
|
|
2673
1985
|
this.animation = createAnimation(props.id);
|
|
2674
1986
|
}
|
|
2675
1987
|
setupAnimation(props) {
|
|
@@ -2817,7 +2129,7 @@ function useController(displayName, controller, defineCustomElement) {
|
|
|
2817
2129
|
* @returns Returns the present and dismiss methods in an array
|
|
2818
2130
|
*/
|
|
2819
2131
|
function useIonActionSheet() {
|
|
2820
|
-
const controller = useController('IonActionSheet', actionSheetController, defineCustomElement$
|
|
2132
|
+
const controller = useController('IonActionSheet', actionSheetController, defineCustomElement$1c);
|
|
2821
2133
|
const present = useCallback((buttonsOrOptions, header) => {
|
|
2822
2134
|
if (Array.isArray(buttonsOrOptions)) {
|
|
2823
2135
|
return controller.present({
|
|
@@ -2935,22 +2247,57 @@ function useOverlay(displayName, controller, defineCustomElement, component, com
|
|
|
2935
2247
|
};
|
|
2936
2248
|
}
|
|
2937
2249
|
|
|
2250
|
+
// TODO(FW-2959): types
|
|
2251
|
+
/**
|
|
2252
|
+
* A hook for presenting/dismissing an IonModal component
|
|
2253
|
+
* @param component The component that the modal will show. Can be a React Component, a functional component, or a JSX Element
|
|
2254
|
+
* @param componentProps The props that will be passed to the component, if required
|
|
2255
|
+
* @returns Returns the present and dismiss methods in an array
|
|
2256
|
+
*/
|
|
2938
2257
|
function useIonModal(component, componentProps) {
|
|
2939
|
-
const controller = useOverlay('IonModal', modalController, defineCustomElement$
|
|
2258
|
+
const controller = useOverlay('IonModal', modalController, defineCustomElement$1d, component, componentProps);
|
|
2940
2259
|
const present = useCallback((options = {}) => {
|
|
2941
2260
|
controller.present(options);
|
|
2942
2261
|
}, [controller.present]);
|
|
2943
2262
|
return [present, controller.dismiss];
|
|
2944
2263
|
}
|
|
2945
2264
|
|
|
2265
|
+
// TODO(FW-2959): types
|
|
2266
|
+
/**
|
|
2267
|
+
* A hook for presenting/dismissing an IonPicker component
|
|
2268
|
+
* @param component The component that the popover will show. Can be a React Component, a functional component, or a JSX Element
|
|
2269
|
+
* @param componentProps The props that will be passed to the component, if required
|
|
2270
|
+
* @returns Returns the present and dismiss methods in an array
|
|
2271
|
+
*/
|
|
2946
2272
|
function useIonPopover(component, componentProps) {
|
|
2947
|
-
const controller = useOverlay('IonPopover', popoverController, defineCustomElement$
|
|
2273
|
+
const controller = useOverlay('IonPopover', popoverController, defineCustomElement$1e, component, componentProps);
|
|
2948
2274
|
const present = useCallback((options = {}) => {
|
|
2949
2275
|
controller.present(options);
|
|
2950
2276
|
}, [controller.present]);
|
|
2951
2277
|
return [present, controller.dismiss];
|
|
2952
2278
|
}
|
|
2953
2279
|
|
|
2280
|
+
/**
|
|
2281
|
+
* A hook for presenting/dismissing an IonPicker component
|
|
2282
|
+
* @returns Returns the present and dismiss methods in an array
|
|
2283
|
+
* @deprecated Use the inline ion-picker component instead.
|
|
2284
|
+
*/
|
|
2285
|
+
function useIonPicker() {
|
|
2286
|
+
const controller = useController('IonPicker', pickerController, defineCustomElement$1b);
|
|
2287
|
+
const present = useCallback((columnsOrOptions, buttons) => {
|
|
2288
|
+
if (Array.isArray(columnsOrOptions)) {
|
|
2289
|
+
return controller.present({
|
|
2290
|
+
columns: columnsOrOptions,
|
|
2291
|
+
buttons: buttons ?? [{ text: 'Ok' }],
|
|
2292
|
+
});
|
|
2293
|
+
}
|
|
2294
|
+
else {
|
|
2295
|
+
return controller.present(columnsOrOptions);
|
|
2296
|
+
}
|
|
2297
|
+
}, [controller.present]);
|
|
2298
|
+
return [present, controller.dismiss];
|
|
2299
|
+
}
|
|
2300
|
+
|
|
2954
2301
|
/**
|
|
2955
2302
|
* A hook for presenting/dismissing an IonLoading component
|
|
2956
2303
|
* @returns Returns the present and dismiss methods in an array
|
|
@@ -2998,16 +2345,15 @@ const RouteManagerContext = /*@__PURE__*/ React.createContext({
|
|
|
2998
2345
|
findLeavingViewItemByRouteInfo: () => undefined,
|
|
2999
2346
|
findViewItemByRouteInfo: () => undefined,
|
|
3000
2347
|
getChildrenToRender: () => undefined,
|
|
3001
|
-
getViewItemsForOutlet: () => [],
|
|
3002
2348
|
goBack: () => undefined,
|
|
3003
2349
|
unMountViewItem: () => undefined,
|
|
3004
2350
|
});
|
|
3005
2351
|
|
|
3006
2352
|
class ViewLifeCycleManager extends React.Component {
|
|
3007
|
-
ionLifeCycleContext = new DefaultIonLifeCycleContext();
|
|
3008
|
-
_isMounted = false;
|
|
3009
2353
|
constructor(props) {
|
|
3010
2354
|
super(props);
|
|
2355
|
+
this.ionLifeCycleContext = new DefaultIonLifeCycleContext();
|
|
2356
|
+
this._isMounted = false;
|
|
3011
2357
|
this.ionLifeCycleContext.onComponentCanBeDestroyed(() => {
|
|
3012
2358
|
if (!this.props.mount) {
|
|
3013
2359
|
if (this._isMounted) {
|
|
@@ -3035,8 +2381,10 @@ class ViewLifeCycleManager extends React.Component {
|
|
|
3035
2381
|
|
|
3036
2382
|
// const RESTRICT_SIZE = 100;
|
|
3037
2383
|
class LocationHistory {
|
|
3038
|
-
|
|
3039
|
-
|
|
2384
|
+
constructor() {
|
|
2385
|
+
this.locationHistory = [];
|
|
2386
|
+
this.tabHistory = {};
|
|
2387
|
+
}
|
|
3040
2388
|
add(routeInfo) {
|
|
3041
2389
|
if (routeInfo.routeAction === 'push' || routeInfo.routeAction == null) {
|
|
3042
2390
|
this._add(routeInfo);
|
|
@@ -3115,14 +2463,7 @@ class LocationHistory {
|
|
|
3115
2463
|
_replace(routeInfo) {
|
|
3116
2464
|
const routeInfos = this._getRouteInfosByKey(routeInfo.tab);
|
|
3117
2465
|
routeInfos && routeInfos.pop();
|
|
3118
|
-
|
|
3119
|
-
const currentRoute = this.locationHistory[this.locationHistory.length - 1];
|
|
3120
|
-
// Only pop from global history if we're replacing in the same outlet context.
|
|
3121
|
-
// Don't pop if we're entering a nested outlet (current route has no tab, new route has a tab)
|
|
3122
|
-
const isEnteringNestedOutlet = currentRoute && !currentRoute.tab && !!routeInfo.tab;
|
|
3123
|
-
if (!isEnteringNestedOutlet) {
|
|
3124
|
-
this.locationHistory.pop();
|
|
3125
|
-
}
|
|
2466
|
+
this.locationHistory.pop();
|
|
3126
2467
|
this._add(routeInfo);
|
|
3127
2468
|
}
|
|
3128
2469
|
_clear() {
|
|
@@ -3154,20 +2495,6 @@ class LocationHistory {
|
|
|
3154
2495
|
}
|
|
3155
2496
|
return undefined;
|
|
3156
2497
|
}
|
|
3157
|
-
/**
|
|
3158
|
-
* Returns the most recent RouteInfo in global history (excluding the current
|
|
3159
|
-
* entry) whose pathname matches the given value. Unlike findLastLocation,
|
|
3160
|
-
* this search is tab-agnostic. Used by the multi-step back detection.
|
|
3161
|
-
*/
|
|
3162
|
-
findLastLocationByPathname(pathname) {
|
|
3163
|
-
for (let i = this.locationHistory.length - 2; i >= 0; i--) {
|
|
3164
|
-
const ri = this.locationHistory[i];
|
|
3165
|
-
if (ri && ri.pathname === pathname) {
|
|
3166
|
-
return ri;
|
|
3167
|
-
}
|
|
3168
|
-
}
|
|
3169
|
-
return undefined;
|
|
3170
|
-
}
|
|
3171
2498
|
findLastLocation(routeInfo) {
|
|
3172
2499
|
const routeInfos = this._getRouteInfosByKey(routeInfo.tab);
|
|
3173
2500
|
if (routeInfos) {
|
|
@@ -3199,42 +2526,30 @@ class LocationHistory {
|
|
|
3199
2526
|
canGoBack() {
|
|
3200
2527
|
return this.locationHistory.length > 1;
|
|
3201
2528
|
}
|
|
3202
|
-
findTabForPathname(pathname) {
|
|
3203
|
-
for (const tab of Object.keys(this.tabHistory)) {
|
|
3204
|
-
const routeInfos = this.tabHistory[tab];
|
|
3205
|
-
for (let i = routeInfos.length - 1; i >= 0; i--) {
|
|
3206
|
-
if (routeInfos[i].pathname === pathname) {
|
|
3207
|
-
return tab;
|
|
3208
|
-
}
|
|
3209
|
-
}
|
|
3210
|
-
}
|
|
3211
|
-
return undefined;
|
|
3212
|
-
}
|
|
3213
2529
|
}
|
|
3214
2530
|
|
|
3215
2531
|
class NavManager extends React.PureComponent {
|
|
3216
|
-
ionRouterContextValue = {
|
|
3217
|
-
push: (pathname, routerDirection, routeAction, routerOptions, animationBuilder) => {
|
|
3218
|
-
this.navigate(pathname, routerDirection, routeAction, animationBuilder, routerOptions);
|
|
3219
|
-
},
|
|
3220
|
-
back: (animationBuilder) => {
|
|
3221
|
-
this.goBack(undefined, animationBuilder);
|
|
3222
|
-
},
|
|
3223
|
-
navigateRoot: (pathname, animationBuilder) => {
|
|
3224
|
-
this.props.onNavigateRoot(pathname, animationBuilder);
|
|
3225
|
-
},
|
|
3226
|
-
canGoBack: () => this.props.locationHistory.canGoBack(),
|
|
3227
|
-
nativeBack: () => this.props.onNativeBack(),
|
|
3228
|
-
routeInfo: this.props.routeInfo,
|
|
3229
|
-
};
|
|
3230
2532
|
constructor(props) {
|
|
3231
2533
|
super(props);
|
|
2534
|
+
this.ionRouterContextValue = {
|
|
2535
|
+
push: (pathname, routerDirection, routeAction, routerOptions, animationBuilder) => {
|
|
2536
|
+
this.navigate(pathname, routerDirection, routeAction, animationBuilder, routerOptions);
|
|
2537
|
+
},
|
|
2538
|
+
back: (animationBuilder) => {
|
|
2539
|
+
this.goBack(undefined, animationBuilder);
|
|
2540
|
+
},
|
|
2541
|
+
canGoBack: () => this.props.locationHistory.canGoBack(),
|
|
2542
|
+
nativeBack: () => this.props.onNativeBack(),
|
|
2543
|
+
routeInfo: this.props.routeInfo,
|
|
2544
|
+
};
|
|
3232
2545
|
this.state = {
|
|
3233
2546
|
goBack: this.goBack.bind(this),
|
|
3234
2547
|
hasIonicRouter: () => true,
|
|
3235
2548
|
navigate: this.navigate.bind(this),
|
|
2549
|
+
getIonRedirect: this.getIonRedirect.bind(this),
|
|
3236
2550
|
getIonRoute: this.getIonRoute.bind(this),
|
|
3237
2551
|
getStackManager: this.getStackManager.bind(this),
|
|
2552
|
+
getPageManager: this.getPageManager.bind(this),
|
|
3238
2553
|
routeInfo: this.props.routeInfo,
|
|
3239
2554
|
setCurrentTab: this.props.onSetCurrentTab,
|
|
3240
2555
|
changeTab: this.props.onChangeTab,
|
|
@@ -3267,6 +2582,12 @@ class NavManager extends React.PureComponent {
|
|
|
3267
2582
|
navigate(path, direction = 'forward', action = 'push', animationBuilder, options, tab) {
|
|
3268
2583
|
this.props.onNavigate(path, action, direction, animationBuilder, options, tab);
|
|
3269
2584
|
}
|
|
2585
|
+
getPageManager() {
|
|
2586
|
+
return PageManager;
|
|
2587
|
+
}
|
|
2588
|
+
getIonRedirect() {
|
|
2589
|
+
return this.props.ionRedirect;
|
|
2590
|
+
}
|
|
3270
2591
|
getIonRoute() {
|
|
3271
2592
|
return this.props.ionRoute;
|
|
3272
2593
|
}
|
|
@@ -3279,8 +2600,8 @@ class NavManager extends React.PureComponent {
|
|
|
3279
2600
|
}
|
|
3280
2601
|
|
|
3281
2602
|
class ViewStacks {
|
|
3282
|
-
viewStacks = {};
|
|
3283
2603
|
constructor() {
|
|
2604
|
+
this.viewStacks = {};
|
|
3284
2605
|
this.add = this.add.bind(this);
|
|
3285
2606
|
this.clear = this.clear.bind(this);
|
|
3286
2607
|
this.getViewItemsForOutlet = this.getViewItemsForOutlet.bind(this);
|
|
@@ -3296,7 +2617,10 @@ class ViewStacks {
|
|
|
3296
2617
|
}
|
|
3297
2618
|
}
|
|
3298
2619
|
clear(outletId) {
|
|
3299
|
-
|
|
2620
|
+
// Give some time for the leaving views to transition before removing
|
|
2621
|
+
return setTimeout(() => {
|
|
2622
|
+
delete this.viewStacks[outletId];
|
|
2623
|
+
}, 500);
|
|
3300
2624
|
}
|
|
3301
2625
|
getViewItemsForOutlet(outletId) {
|
|
3302
2626
|
return this.viewStacks[outletId] || [];
|
|
@@ -3325,43 +2649,5 @@ class ViewStacks {
|
|
|
3325
2649
|
}
|
|
3326
2650
|
}
|
|
3327
2651
|
|
|
3328
|
-
|
|
3329
|
-
* Spelled out instead of imported as a value so this util doesn't pull core's
|
|
3330
|
-
* runtime into unit tests. The template type still breaks the build on a rename.
|
|
3331
|
-
*/
|
|
3332
|
-
const DEBUG = 'DEBUG';
|
|
3333
|
-
/** Whether the app opted into debug logging with `logLevel: 'DEBUG'`. */
|
|
3334
|
-
const isDebugEnabled = () => {
|
|
3335
|
-
return String(getConfig()?.get('logLevel') ?? '').toUpperCase() === DEBUG;
|
|
3336
|
-
};
|
|
3337
|
-
/**
|
|
3338
|
-
* Logger namespaced to a package, e.g. `react-router`. The payload is a function
|
|
3339
|
-
* so nothing it collects runs while logging is off.
|
|
3340
|
-
*
|
|
3341
|
-
* @internal
|
|
3342
|
-
*/
|
|
3343
|
-
const createDebugLogger = (namespace) => {
|
|
3344
|
-
return (event, getData) => {
|
|
3345
|
-
if (!isDebugEnabled()) {
|
|
3346
|
-
return;
|
|
3347
|
-
}
|
|
3348
|
-
const prefix = `[Ionic Debug]: [${namespace}] - ${event}`;
|
|
3349
|
-
const data = getData?.();
|
|
3350
|
-
if (data === undefined) {
|
|
3351
|
-
console.log(prefix);
|
|
3352
|
-
return;
|
|
3353
|
-
}
|
|
3354
|
-
let serialized;
|
|
3355
|
-
try {
|
|
3356
|
-
serialized = JSON.stringify(data);
|
|
3357
|
-
}
|
|
3358
|
-
catch {
|
|
3359
|
-
// A circular reference in the payload must not break navigation.
|
|
3360
|
-
serialized = '[unserializable payload]';
|
|
3361
|
-
}
|
|
3362
|
-
console.log(prefix, serialized);
|
|
3363
|
-
};
|
|
3364
|
-
};
|
|
3365
|
-
|
|
3366
|
-
export { CreateAnimation, DefaultIonLifeCycleContext, IonAccordion, IonAccordionGroup, IonActionSheet, IonAlert, IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonDatetimeButton, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonInputOtp, IonInputPasswordToggle, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonLifeCycleContext, IonList, IonListHeader, IonLoading, IonMenu, IonMenuButton, IonMenuToggle, IonModal, IonNav, IonNavLink, IonNote, IonPage, IonPicker, IonPickerColumn, IonPickerColumnOption, IonPopover, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRoute, IonRouterContext, IonRouterLink, IonRouterOutlet, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonSelect, IonSelectModal, IonSelectOption, IonSkeletonText, IonSpinner, IonSplitPane, IonTab, IonTabBar, IonTabButton, IonTabs, IonTabsContext, IonText, IonTextarea, IonThumbnail, IonTitle, IonToast, IonToggle, IonToolbar, LocationHistory, NavContext, NavManager, RouteManagerContext, StackContext, ViewLifeCycleManager, ViewStacks, createDebugLogger, generateId, getConfig, getPlatforms, isPlatform, setupIonicReact, useIonActionSheet, useIonAlert, useIonLoading, useIonModal, useIonPopover, useIonRouter, useIonToast, useIonViewDidEnter, useIonViewDidLeave, useIonViewWillEnter, useIonViewWillLeave, withIonLifeCycle };
|
|
2652
|
+
export { CreateAnimation, DefaultIonLifeCycleContext, IonAccordion, IonAccordionGroup, IonActionSheet, IonAlert, IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonDatetimeButton, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonInputOtp, IonInputPasswordToggle, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonLifeCycleContext, IonList, IonListHeader, IonLoading, IonMenu, IonMenuButton, IonMenuToggle, IonModal, IonNav, IonNavLink, IonNote, IonPage, IonPicker, IonPickerColumn, IonPickerColumnOption, IonPickerLegacy, IonPopover, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRedirect, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRoute, IonRouterContext, IonRouterLink, IonRouterOutlet, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonSelect, IonSelectModal, IonSelectOption, IonSkeletonText, IonSpinner, IonSplitPane, IonTab, IonTabBar, IonTabButton, IonTabs, IonTabsContext, IonText, IonTextarea, IonThumbnail, IonTitle, IonToast, IonToggle, IonToolbar, LocationHistory, NavContext, NavManager, RouteManagerContext, StackContext, ViewLifeCycleManager, ViewStacks, generateId, getConfig, getPlatforms, isPlatform, setupIonicReact, useIonActionSheet, useIonAlert, useIonLoading, useIonModal, useIonPicker, useIonPopover, useIonRouter, useIonToast, useIonViewDidEnter, useIonViewDidLeave, useIonViewWillEnter, useIonViewWillLeave, withIonLifeCycle };
|
|
3367
2653
|
//# sourceMappingURL=index.js.map
|