@ionic/react 8.8.19-dev.11787076261.138d5922 → 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 +448 -1190
- 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/useIonPicker.d.ts +27 -0
- package/dist/types/index.d.ts +0 -1
- package/dist/types/lifecycle/IonLifeCycleHOC.d.ts +3 -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/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,34 +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
|
-
/**
|
|
1088
|
-
* Assigning `undefined` or `null` to a reflected prop like `id` writes the stringified value, so
|
|
1089
|
-
* the element ends up with `id="undefined"` or `id="null"`. Only native properties are cleaned up
|
|
1090
|
-
* here: a nullish component prop still has to reach the component, and Stencil clears the
|
|
1091
|
-
* attribute for props declared `reflect: true`.
|
|
1092
|
-
*/
|
|
1093
|
-
const isNativeElementProperty = (name) => name in HTMLElement.prototype;
|
|
1094
424
|
const attachProps = (node, newProps, oldProps = {}) => {
|
|
1095
425
|
// some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
|
|
1096
426
|
if (node instanceof Element) {
|
|
@@ -1116,23 +446,10 @@ const attachProps = (node, newProps, oldProps = {}) => {
|
|
|
1116
446
|
}
|
|
1117
447
|
}
|
|
1118
448
|
else {
|
|
1119
|
-
|
|
1120
|
-
|
|
1121
|
-
if ((value === undefined || value === null) && isNativeElementProperty(name)) {
|
|
1122
|
-
// Remove both spellings: the property reflects `accesskey`, and dash-casing writes `access-key`.
|
|
1123
|
-
node.removeAttribute(name);
|
|
1124
|
-
node.removeAttribute(camelToDashCase(name));
|
|
1125
|
-
return;
|
|
1126
|
-
}
|
|
1127
|
-
const propType = typeof value;
|
|
449
|
+
node[name] = newProps[name];
|
|
450
|
+
const propType = typeof newProps[name];
|
|
1128
451
|
if (propType === 'string') {
|
|
1129
|
-
node.setAttribute(camelToDashCase(name),
|
|
1130
|
-
}
|
|
1131
|
-
else if (value === false) {
|
|
1132
|
-
const attribute = camelToDashCase(name);
|
|
1133
|
-
if (isStaleFalseBooleanAttribute(attribute)) {
|
|
1134
|
-
node.removeAttribute(attribute);
|
|
1135
|
-
}
|
|
452
|
+
node.setAttribute(camelToDashCase(name), newProps[name]);
|
|
1136
453
|
}
|
|
1137
454
|
}
|
|
1138
455
|
});
|
|
@@ -1244,6 +561,147 @@ const defineCustomElement = (tagName, customElement) => {
|
|
|
1244
561
|
}
|
|
1245
562
|
};
|
|
1246
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
|
+
|
|
1247
705
|
const createForwardRef = (ReactComponent, // TODO(FW-2959): type
|
|
1248
706
|
displayName) => {
|
|
1249
707
|
const forwardRef = (props, ref) => {
|
|
@@ -1262,15 +720,29 @@ const isPlatform = (platform) => {
|
|
|
1262
720
|
const getPlatforms = () => {
|
|
1263
721
|
return getPlatforms$1(window);
|
|
1264
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
|
+
};
|
|
1265
732
|
|
|
1266
733
|
const createRoutingComponent = (tagName, customElement) => {
|
|
1267
734
|
defineCustomElement(tagName, customElement);
|
|
1268
735
|
const displayName = dashToPascalCase(tagName);
|
|
1269
736
|
const ReactComponent = class extends React.Component {
|
|
1270
|
-
ref;
|
|
1271
|
-
stableMergedRefs;
|
|
1272
737
|
constructor(props) {
|
|
1273
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
|
+
};
|
|
1274
746
|
// Create a local ref to to attach props to the wrapped element.
|
|
1275
747
|
this.ref = React.createRef();
|
|
1276
748
|
// React refs must be stable (not created inline).
|
|
@@ -1283,18 +755,6 @@ const createRoutingComponent = (tagName, customElement) => {
|
|
|
1283
755
|
const node = this.ref.current;
|
|
1284
756
|
attachProps(node, this.props, prevProps);
|
|
1285
757
|
}
|
|
1286
|
-
handleClick = (e) => {
|
|
1287
|
-
const { routerLink, routerDirection, routerOptions, routerAnimation } = this.props;
|
|
1288
|
-
if (routerLink !== undefined) {
|
|
1289
|
-
// Allow modifier key clicks (ctrl/cmd/shift) to open the link in a new tab/window
|
|
1290
|
-
// without triggering SPA navigation on the current page.
|
|
1291
|
-
if (e.metaKey || e.ctrlKey || e.shiftKey) {
|
|
1292
|
-
return;
|
|
1293
|
-
}
|
|
1294
|
-
e.preventDefault();
|
|
1295
|
-
this.context.navigate(routerLink, routerDirection, undefined, routerAnimation, routerOptions);
|
|
1296
|
-
}
|
|
1297
|
-
};
|
|
1298
758
|
render() {
|
|
1299
759
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1300
760
|
const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
|
|
@@ -1401,14 +861,44 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
|
|
|
1401
861
|
}
|
|
1402
862
|
const displayName = dashToPascalCase(tagName);
|
|
1403
863
|
const ReactComponent = class extends React.Component {
|
|
1404
|
-
ref;
|
|
1405
|
-
wrapperRef;
|
|
1406
|
-
markerRef;
|
|
1407
|
-
stableMergedRefs;
|
|
1408
|
-
portalTarget;
|
|
1409
|
-
isUnmounted = false;
|
|
1410
864
|
constructor(props) {
|
|
1411
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
|
+
};
|
|
1412
902
|
// Create a local ref to to attach props to the wrapped element.
|
|
1413
903
|
this.ref = React.createRef();
|
|
1414
904
|
// React refs must be stable (not created inline).
|
|
@@ -1585,41 +1075,6 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
|
|
|
1585
1075
|
static get displayName() {
|
|
1586
1076
|
return displayName;
|
|
1587
1077
|
}
|
|
1588
|
-
handleIonMount = () => {
|
|
1589
|
-
/**
|
|
1590
|
-
* Mount the inner component when the
|
|
1591
|
-
* overlay is about to open.
|
|
1592
|
-
*
|
|
1593
|
-
* For ion-popover, this is when `ionMount` is emitted.
|
|
1594
|
-
* For other overlays, this is when `willPresent` is emitted.
|
|
1595
|
-
*/
|
|
1596
|
-
this.setState({ isOpen: true });
|
|
1597
|
-
};
|
|
1598
|
-
handleWillPresent = (evt) => {
|
|
1599
|
-
this.setState({ isOpen: true });
|
|
1600
|
-
/**
|
|
1601
|
-
* Manually call the onWillPresent
|
|
1602
|
-
* handler if present as setState will
|
|
1603
|
-
* cause the event handlers to be
|
|
1604
|
-
* destroyed and re-created.
|
|
1605
|
-
*/
|
|
1606
|
-
this.props.onWillPresent && this.props.onWillPresent(evt);
|
|
1607
|
-
};
|
|
1608
|
-
handleDidDismiss = (evt) => {
|
|
1609
|
-
const wrapper = this.wrapperRef.current;
|
|
1610
|
-
const el = this.ref.current;
|
|
1611
|
-
/**
|
|
1612
|
-
* This component might be unmounted already, if the containing
|
|
1613
|
-
* element was removed while the overlay was still open. (For
|
|
1614
|
-
* example, if an item contains an inline overlay with a button
|
|
1615
|
-
* that removes the item.)
|
|
1616
|
-
*/
|
|
1617
|
-
if (wrapper && el) {
|
|
1618
|
-
el.append(wrapper);
|
|
1619
|
-
this.setState({ isOpen: false });
|
|
1620
|
-
}
|
|
1621
|
-
this.props.onDidDismiss && this.props.onDidDismiss(evt);
|
|
1622
|
-
};
|
|
1623
1078
|
};
|
|
1624
1079
|
// Forward the nesting context as a prop to avoid contextType on the class.
|
|
1625
1080
|
// The render function is passed via `children` (not as a varargs child) so it
|
|
@@ -1638,11 +1093,13 @@ const IonLoading = /*@__PURE__*/ createInlineOverlayComponent('ion-loading', def
|
|
|
1638
1093
|
|
|
1639
1094
|
const IonToast = /*@__PURE__*/ createInlineOverlayComponent('ion-toast', defineCustomElement$1a);
|
|
1640
1095
|
|
|
1641
|
-
const
|
|
1096
|
+
const IonPickerLegacy = /*@__PURE__*/ createInlineOverlayComponent('ion-picker-legacy', defineCustomElement$1b);
|
|
1642
1097
|
|
|
1643
|
-
const
|
|
1098
|
+
const IonActionSheet = /*@__PURE__*/ createInlineOverlayComponent('ion-action-sheet', defineCustomElement$1c);
|
|
1644
1099
|
|
|
1645
|
-
const
|
|
1100
|
+
const IonModal = /*@__PURE__*/ createInlineOverlayComponent('ion-modal', defineCustomElement$1d, true);
|
|
1101
|
+
|
|
1102
|
+
const IonPopover = /*@__PURE__*/ createInlineOverlayComponent('ion-popover', defineCustomElement$1e);
|
|
1646
1103
|
|
|
1647
1104
|
const IonContext = React.createContext({
|
|
1648
1105
|
addOverlay: () => {
|
|
@@ -1734,101 +1191,31 @@ const IonOverlayManager = ({ onAddOverlay, onRemoveOverlay }) => {
|
|
|
1734
1191
|
}) }));
|
|
1735
1192
|
};
|
|
1736
1193
|
|
|
1737
|
-
const
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
|
|
1743
|
-
componentEl;
|
|
1744
|
-
setComponentElRef = (element) => {
|
|
1745
|
-
this.componentEl = element;
|
|
1746
|
-
};
|
|
1747
|
-
constructor(props) {
|
|
1748
|
-
super(props);
|
|
1749
|
-
}
|
|
1750
|
-
componentDidMount() {
|
|
1751
|
-
this.componentDidUpdate(this.props);
|
|
1752
|
-
}
|
|
1753
|
-
componentDidUpdate(prevProps) {
|
|
1754
|
-
attachProps(this.componentEl, this.props, prevProps);
|
|
1755
|
-
}
|
|
1756
|
-
render() {
|
|
1757
|
-
const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
|
|
1758
|
-
let propsToPass = Object.keys(cProps).reduce((acc, name) => {
|
|
1759
|
-
const value = cProps[name];
|
|
1760
|
-
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
|
1761
|
-
const eventName = name.substring(2).toLowerCase();
|
|
1762
|
-
if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
|
|
1763
|
-
acc[name] = value;
|
|
1764
|
-
}
|
|
1765
|
-
}
|
|
1766
|
-
else {
|
|
1767
|
-
// we should only render strings, booleans, and numbers as attrs in html.
|
|
1768
|
-
// objects, functions, arrays etc get synced via properties on mount.
|
|
1769
|
-
const type = typeof value;
|
|
1770
|
-
if (type === 'string' || type === 'boolean' || type === 'number') {
|
|
1771
|
-
acc[camelToDashCase(name)] = value;
|
|
1772
|
-
}
|
|
1773
|
-
}
|
|
1774
|
-
return acc;
|
|
1775
|
-
}, {});
|
|
1776
|
-
if (manipulatePropsFunction) {
|
|
1777
|
-
propsToPass = manipulatePropsFunction(this.props, propsToPass);
|
|
1778
|
-
}
|
|
1779
|
-
const newProps = {
|
|
1780
|
-
...propsToPass,
|
|
1781
|
-
ref: mergeRefs(forwardedRef, this.setComponentElRef),
|
|
1782
|
-
style,
|
|
1783
|
-
children
|
|
1784
|
-
};
|
|
1785
|
-
/**
|
|
1786
|
-
* We use createElement here instead of
|
|
1787
|
-
* React.createElement to work around a
|
|
1788
|
-
* bug in Vite (https://github.com/vitejs/vite/issues/6104).
|
|
1789
|
-
* React.createElement causes all elements to be rendered
|
|
1790
|
-
* as <tagname> instead of the actual Web Component.
|
|
1791
|
-
*/
|
|
1792
|
-
return createElement(tagName, newProps, children);
|
|
1793
|
-
}
|
|
1794
|
-
static get displayName() {
|
|
1795
|
-
return displayName;
|
|
1796
|
-
}
|
|
1797
|
-
};
|
|
1798
|
-
// If context was passed to createReactComponent then conditionally add it to the Component Class
|
|
1799
|
-
if (ReactComponentContext) {
|
|
1800
|
-
ReactComponent.contextType = ReactComponentContext;
|
|
1801
|
-
}
|
|
1802
|
-
return createForwardRef$1(ReactComponent, displayName);
|
|
1803
|
-
};
|
|
1804
|
-
|
|
1805
|
-
const IonTabButtonInner = /*@__PURE__*/ createReactComponent('ion-tab-button', undefined, undefined, defineCustomElement$1e);
|
|
1806
|
-
const IonTabBarInner = /*@__PURE__*/ createReactComponent('ion-tab-bar', undefined, undefined, defineCustomElement$1f);
|
|
1807
|
-
const IonTabsInner = /*@__PURE__*/ createReactComponent('ion-tabs', undefined, undefined, defineCustomElement$1g);
|
|
1808
|
-
const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button', undefined, undefined, defineCustomElement$1h);
|
|
1809
|
-
const IonRouterOutletInner = /*@__PURE__*/ createReactComponent('ion-router-outlet', undefined, undefined, defineCustomElement$1i);
|
|
1810
|
-
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);
|
|
1811
1200
|
// ionicons
|
|
1812
|
-
const IonIconInner = /*@__PURE__*/ createReactComponent('ion-icon', undefined, undefined, defineCustomElement$
|
|
1201
|
+
const IonIconInner = /*@__PURE__*/ createReactComponent('ion-icon', undefined, undefined, defineCustomElement$1l);
|
|
1813
1202
|
|
|
1814
1203
|
class IonApp extends React.Component {
|
|
1815
|
-
addOverlayCallback;
|
|
1816
|
-
removeOverlayCallback;
|
|
1817
1204
|
constructor(props) {
|
|
1818
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
|
+
};
|
|
1819
1218
|
}
|
|
1820
|
-
ionContext = {
|
|
1821
|
-
addOverlay: (id, overlay, containerElement) => {
|
|
1822
|
-
if (this.addOverlayCallback) {
|
|
1823
|
-
this.addOverlayCallback(id, overlay, containerElement);
|
|
1824
|
-
}
|
|
1825
|
-
},
|
|
1826
|
-
removeOverlay: (id) => {
|
|
1827
|
-
if (this.removeOverlayCallback) {
|
|
1828
|
-
this.removeOverlayCallback(id);
|
|
1829
|
-
}
|
|
1830
|
-
},
|
|
1831
|
-
};
|
|
1832
1219
|
render() {
|
|
1833
1220
|
return (jsxs(IonContext.Provider, { value: this.ionContext, children: [jsx(IonAppInner, { ...this.props, children: this.props.children }), jsx(IonOverlayManager, { onAddOverlay: (callback) => {
|
|
1834
1221
|
this.addOverlayCallback = callback;
|
|
@@ -1836,8 +1223,8 @@ class IonApp extends React.Component {
|
|
|
1836
1223
|
this.removeOverlayCallback = callback;
|
|
1837
1224
|
} })] }));
|
|
1838
1225
|
}
|
|
1839
|
-
static displayName = 'IonApp';
|
|
1840
1226
|
}
|
|
1227
|
+
IonApp.displayName = 'IonApp';
|
|
1841
1228
|
|
|
1842
1229
|
const StackContext = React.createContext({
|
|
1843
1230
|
registerIonPage: () => undefined,
|
|
@@ -1845,32 +1232,11 @@ const StackContext = React.createContext({
|
|
|
1845
1232
|
});
|
|
1846
1233
|
|
|
1847
1234
|
class PageManager extends React.PureComponent {
|
|
1848
|
-
ionLifeCycleContext;
|
|
1849
|
-
ionPageElementRef;
|
|
1850
|
-
stableMergedRefs;
|
|
1851
1235
|
constructor(props) {
|
|
1852
1236
|
super(props);
|
|
1853
1237
|
this.ionPageElementRef = React.createRef();
|
|
1854
1238
|
// React refs must be stable (not created inline).
|
|
1855
|
-
|
|
1856
|
-
const baseMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef);
|
|
1857
|
-
// Guard against React 19 strict mode double-mount re-adding ion-page-invisible.
|
|
1858
|
-
// The ref fires again on remount after StackManager may have already removed it.
|
|
1859
|
-
let hasAppliedInvisible = false;
|
|
1860
|
-
this.stableMergedRefs = (node) => {
|
|
1861
|
-
if (node &&
|
|
1862
|
-
!hasAppliedInvisible &&
|
|
1863
|
-
!node.classList.contains('ion-page-invisible') &&
|
|
1864
|
-
!node.classList.contains('ion-page-hidden')) {
|
|
1865
|
-
// Add ion-page-invisible synchronously before first paint (if in an outlet)
|
|
1866
|
-
// This prevents the flash that occurs when componentDidMount runs after paint
|
|
1867
|
-
if (this.context?.isInOutlet?.()) {
|
|
1868
|
-
node.classList.add('ion-page-invisible');
|
|
1869
|
-
hasAppliedInvisible = true;
|
|
1870
|
-
}
|
|
1871
|
-
}
|
|
1872
|
-
baseMergedRefs(node);
|
|
1873
|
-
};
|
|
1239
|
+
this.stableMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef);
|
|
1874
1240
|
/**
|
|
1875
1241
|
* This binds the scope of the following methods to the class scope.
|
|
1876
1242
|
* The `.bind` method returns a new function, so we need to assign it
|
|
@@ -1882,38 +1248,11 @@ class PageManager extends React.PureComponent {
|
|
|
1882
1248
|
this.ionViewWillLeaveHandler = this.ionViewWillLeaveHandler.bind(this);
|
|
1883
1249
|
this.ionViewDidLeaveHandler = this.ionViewDidLeaveHandler.bind(this);
|
|
1884
1250
|
}
|
|
1885
|
-
parseClasses(className) {
|
|
1886
|
-
if (!className)
|
|
1887
|
-
return new Set();
|
|
1888
|
-
return new Set(className.split(/\s+/).filter(Boolean));
|
|
1889
|
-
}
|
|
1890
|
-
/**
|
|
1891
|
-
* Updates classList by diffing old/new className props.
|
|
1892
|
-
* Preserves framework-added classes (can-go-back, ion-page-invisible, etc.).
|
|
1893
|
-
*/
|
|
1894
|
-
updateUserClasses(oldClassName, newClassName) {
|
|
1895
|
-
if (!this.ionPageElementRef.current)
|
|
1896
|
-
return;
|
|
1897
|
-
const oldClasses = this.parseClasses(oldClassName);
|
|
1898
|
-
const newClasses = this.parseClasses(newClassName);
|
|
1899
|
-
oldClasses.forEach((cls) => {
|
|
1900
|
-
if (!newClasses.has(cls)) {
|
|
1901
|
-
this.ionPageElementRef.current.classList.remove(cls);
|
|
1902
|
-
}
|
|
1903
|
-
});
|
|
1904
|
-
newClasses.forEach((cls) => {
|
|
1905
|
-
if (!oldClasses.has(cls)) {
|
|
1906
|
-
this.ionPageElementRef.current.classList.add(cls);
|
|
1907
|
-
}
|
|
1908
|
-
});
|
|
1909
|
-
}
|
|
1910
1251
|
componentDidMount() {
|
|
1911
1252
|
if (this.ionPageElementRef.current) {
|
|
1912
|
-
|
|
1913
|
-
|
|
1914
|
-
|
|
1915
|
-
// The ref callback runs synchronously when the element is created, before the browser paints.
|
|
1916
|
-
this.updateUserClasses(undefined, this.props.className);
|
|
1253
|
+
if (this.context.isInOutlet()) {
|
|
1254
|
+
this.ionPageElementRef.current.classList.add('ion-page-invisible');
|
|
1255
|
+
}
|
|
1917
1256
|
this.context.registerIonPage(this.ionPageElementRef.current, this.props.routeInfo);
|
|
1918
1257
|
this.ionPageElementRef.current.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
|
|
1919
1258
|
this.ionPageElementRef.current.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler);
|
|
@@ -1921,11 +1260,6 @@ class PageManager extends React.PureComponent {
|
|
|
1921
1260
|
this.ionPageElementRef.current.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler);
|
|
1922
1261
|
}
|
|
1923
1262
|
}
|
|
1924
|
-
componentDidUpdate(prevProps) {
|
|
1925
|
-
if (prevProps.className !== this.props.className) {
|
|
1926
|
-
this.updateUserClasses(prevProps.className, this.props.className);
|
|
1927
|
-
}
|
|
1928
|
-
}
|
|
1929
1263
|
componentWillUnmount() {
|
|
1930
1264
|
if (this.ionPageElementRef.current) {
|
|
1931
1265
|
this.ionPageElementRef.current.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
|
|
@@ -1955,11 +1289,9 @@ class PageManager extends React.PureComponent {
|
|
|
1955
1289
|
render() {
|
|
1956
1290
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1957
1291
|
const { className, children, routeInfo, forwardedRef, ...props } = this.props;
|
|
1958
|
-
// Only set "ion-page" in JSX. User classes are managed via DOM in componentDidMount/componentDidUpdate
|
|
1959
|
-
// to preserve framework-added classes (can-go-back, ion-page-invisible, etc.) when className prop changes.
|
|
1960
1292
|
return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
|
|
1961
1293
|
this.ionLifeCycleContext = context;
|
|
1962
|
-
return (jsx("div", { className:
|
|
1294
|
+
return (jsx("div", { className: className ? `${className} ion-page` : `ion-page`, ref: this.stableMergedRefs, ...props, children: children }));
|
|
1963
1295
|
} }));
|
|
1964
1296
|
}
|
|
1965
1297
|
static get contextType() {
|
|
@@ -2019,7 +1351,7 @@ const ReactDelegate = (addView, removeView) => {
|
|
|
2019
1351
|
};
|
|
2020
1352
|
};
|
|
2021
1353
|
|
|
2022
|
-
const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$
|
|
1354
|
+
const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$1m);
|
|
2023
1355
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2024
1356
|
const IonNavInternal = ({ children, forwardedRef, ...restOfProps }) => {
|
|
2025
1357
|
const [views, setViews] = useState([]);
|
|
@@ -2045,9 +1377,6 @@ const HTMLElementSSR = (typeof HTMLElement !== 'undefined' ? HTMLElement : class
|
|
|
2045
1377
|
});
|
|
2046
1378
|
|
|
2047
1379
|
class OutletPageManager extends React.Component {
|
|
2048
|
-
ionLifeCycleContext;
|
|
2049
|
-
ionRouterOutlet;
|
|
2050
|
-
outletIsReady;
|
|
2051
1380
|
constructor(props) {
|
|
2052
1381
|
super(props);
|
|
2053
1382
|
this.outletIsReady = false;
|
|
@@ -2070,30 +1399,8 @@ class OutletPageManager extends React.Component {
|
|
|
2070
1399
|
*/
|
|
2071
1400
|
if (!this.outletIsReady) {
|
|
2072
1401
|
componentOnReady(this.ionRouterOutlet, () => {
|
|
2073
|
-
/**
|
|
2074
|
-
* Guard against duplicate callbacks from React strict mode double-mount.
|
|
2075
|
-
* Both componentDidMount calls pass the outer !outletIsReady check before
|
|
2076
|
-
* either async callback fires. Without this inner guard, the second callback
|
|
2077
|
-
* re-adds ion-page-invisible after the first callback's transition removed it,
|
|
2078
|
-
* and registerIonPage returns early (same element), leaving the page invisible.
|
|
2079
|
-
*/
|
|
2080
|
-
if (this.outletIsReady)
|
|
2081
|
-
return;
|
|
2082
1402
|
this.outletIsReady = true;
|
|
2083
|
-
|
|
2084
|
-
* Add ion-page + ion-page-invisible AFTER Stencil hydration but
|
|
2085
|
-
* BEFORE registerIonPage. Stencil hydration overwrites className,
|
|
2086
|
-
* so classes added in a React ref callback get wiped. Adding them
|
|
2087
|
-
* here -- after hydration -- ensures they persist until the parent
|
|
2088
|
-
* outlet's forward animation removes ion-page-invisible, preventing
|
|
2089
|
-
* a flash where the outlet is briefly visible at full opacity.
|
|
2090
|
-
*/
|
|
2091
|
-
const el = this.ionRouterOutlet;
|
|
2092
|
-
if (!el.classList.contains('ion-page-invisible') && !el.classList.contains('ion-page-hidden')) {
|
|
2093
|
-
el.classList.add('ion-page');
|
|
2094
|
-
el.classList.add('ion-page-invisible');
|
|
2095
|
-
}
|
|
2096
|
-
this.context.registerIonPage(el, this.props.routeInfo);
|
|
1403
|
+
this.context.registerIonPage(this.ionRouterOutlet, this.props.routeInfo);
|
|
2097
1404
|
});
|
|
2098
1405
|
}
|
|
2099
1406
|
this.ionRouterOutlet.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
|
|
@@ -2123,10 +1430,10 @@ class OutletPageManager extends React.Component {
|
|
|
2123
1430
|
this.ionLifeCycleContext.ionViewDidLeave();
|
|
2124
1431
|
}
|
|
2125
1432
|
render() {
|
|
2126
|
-
const { StackManager, children, routeInfo,
|
|
1433
|
+
const { StackManager, children, routeInfo, ...props } = this.props;
|
|
2127
1434
|
return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
|
|
2128
1435
|
this.ionLifeCycleContext = context;
|
|
2129
|
-
return (jsx(StackManager, {
|
|
1436
|
+
return (jsx(StackManager, { routeInfo: routeInfo, children: jsx(IonRouterOutletInner, { setRef: (val) => (this.ionRouterOutlet = val), ...props, children: children }) }));
|
|
2130
1437
|
} }));
|
|
2131
1438
|
}
|
|
2132
1439
|
static get contextType() {
|
|
@@ -2135,16 +1442,13 @@ class OutletPageManager extends React.Component {
|
|
|
2135
1442
|
}
|
|
2136
1443
|
|
|
2137
1444
|
class IonRouterOutletContainer extends React.Component {
|
|
2138
|
-
outletId;
|
|
2139
1445
|
constructor(props) {
|
|
2140
1446
|
super(props);
|
|
2141
|
-
this.outletId = props.id ?? `routerOutlet-${generateId('routerOutlet')}`;
|
|
2142
1447
|
}
|
|
2143
1448
|
render() {
|
|
2144
1449
|
const StackManager = this.context.getStackManager();
|
|
2145
1450
|
const { children, forwardedRef, ...props } = this.props;
|
|
2146
|
-
|
|
2147
|
-
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 }));
|
|
2148
1452
|
}
|
|
2149
1453
|
static get contextType() {
|
|
2150
1454
|
return NavContext;
|
|
@@ -2168,29 +1472,28 @@ class IonTabs extends React.Component {
|
|
|
2168
1472
|
shouldComponentUpdate() {
|
|
2169
1473
|
return true;
|
|
2170
1474
|
}
|
|
2171
|
-
/**
|
|
2172
|
-
* `routerOutletRef` allows users to add a `ref` to `IonRouterOutlet`.
|
|
2173
|
-
* Without this, `ref.current` will be `undefined` in the user's app,
|
|
2174
|
-
* breaking their ability to access the `IonRouterOutlet` instance.
|
|
2175
|
-
* Do not remove this ref.
|
|
2176
|
-
*/
|
|
2177
|
-
routerOutletRef = React.createRef();
|
|
2178
|
-
selectTabHandler;
|
|
2179
|
-
tabBarRef = React.createRef();
|
|
2180
|
-
ionTabContextState = {
|
|
2181
|
-
activeTab: undefined,
|
|
2182
|
-
selectTab: () => false,
|
|
2183
|
-
hasRouterOutlet: false,
|
|
2184
|
-
/**
|
|
2185
|
-
* Tab bar can be used as a standalone component,
|
|
2186
|
-
* so the props can not be passed directly to the
|
|
2187
|
-
* tab bar component. Instead, props will be
|
|
2188
|
-
* passed through the context.
|
|
2189
|
-
*/
|
|
2190
|
-
tabBarProps: { ref: this.tabBarRef },
|
|
2191
|
-
};
|
|
2192
1475
|
constructor(props) {
|
|
2193
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
|
+
};
|
|
2194
1497
|
}
|
|
2195
1498
|
componentDidMount() {
|
|
2196
1499
|
if (this.tabBarRef.current) {
|
|
@@ -2342,14 +1645,14 @@ const matchesTab = (pathname, href) => {
|
|
|
2342
1645
|
if (href === undefined) {
|
|
2343
1646
|
return false;
|
|
2344
1647
|
}
|
|
2345
|
-
|
|
2346
|
-
const hrefPathname = href.split('?')[0];
|
|
2347
|
-
const normalizedHref = hrefPathname.endsWith('/') && hrefPathname !== '/' ? hrefPathname.slice(0, -1) : hrefPathname;
|
|
1648
|
+
const normalizedHref = href.endsWith('/') && href !== '/' ? href.slice(0, -1) : href;
|
|
2348
1649
|
return pathname === normalizedHref || pathname.startsWith(normalizedHref + '/');
|
|
2349
1650
|
};
|
|
2350
1651
|
class IonTabBarUnwrapped extends React.PureComponent {
|
|
2351
1652
|
constructor(props) {
|
|
2352
1653
|
super(props);
|
|
1654
|
+
// eslint-disable-next-line
|
|
1655
|
+
this.setActiveTabOnContext = (_tab) => { };
|
|
2353
1656
|
const tabs = {};
|
|
2354
1657
|
React.Children.forEach(props.children, (child) => {
|
|
2355
1658
|
if (child != null &&
|
|
@@ -2390,8 +1693,6 @@ class IonTabBarUnwrapped extends React.PureComponent {
|
|
|
2390
1693
|
this.setActiveTabOnContext(this.state.activeTab);
|
|
2391
1694
|
}
|
|
2392
1695
|
}
|
|
2393
|
-
// eslint-disable-next-line
|
|
2394
|
-
setActiveTabOnContext = (_tab) => { };
|
|
2395
1696
|
selectTab(tab) {
|
|
2396
1697
|
const tabUrl = this.state.tabs[tab];
|
|
2397
1698
|
if (tabUrl) {
|
|
@@ -2436,7 +1737,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
|
|
|
2436
1737
|
const prevHref = state.tabs[prevActiveTab].currentHref;
|
|
2437
1738
|
const prevRouteOptions = state.tabs[prevActiveTab].currentRouteOptions;
|
|
2438
1739
|
if (activeTab !== prevActiveTab ||
|
|
2439
|
-
prevHref !==
|
|
1740
|
+
prevHref !== props.routeInfo?.pathname ||
|
|
2440
1741
|
prevRouteOptions !== props.routeInfo?.routeOptions) {
|
|
2441
1742
|
tabs[activeTab] = {
|
|
2442
1743
|
originalHref: tabs[activeTab].originalHref,
|
|
@@ -2509,7 +1810,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
|
|
|
2509
1810
|
return (child) => {
|
|
2510
1811
|
if (child != null && child.props && (child.type === IonTabButton || child.type.isTabButton)) {
|
|
2511
1812
|
const href = child.props.tab === activeTab
|
|
2512
|
-
?
|
|
1813
|
+
? this.props.routeInfo?.pathname
|
|
2513
1814
|
: this.state.tabs[child.props.tab].currentHref;
|
|
2514
1815
|
const routeOptions = child.props.tab === activeTab
|
|
2515
1816
|
? this.props.routeInfo?.routeOptions
|
|
@@ -2554,24 +1855,27 @@ const IonTabBarContainer = React.memo(({ forwardedRef, ...props }) => {
|
|
|
2554
1855
|
const IonTabBar = createForwardRef(IonTabBarContainer, 'IonTabBar');
|
|
2555
1856
|
|
|
2556
1857
|
class IonBackButton extends React.Component {
|
|
2557
|
-
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
2561
|
-
|
|
2562
|
-
|
|
2563
|
-
|
|
2564
|
-
|
|
2565
|
-
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
this.context.
|
|
2570
|
-
|
|
2571
|
-
|
|
2572
|
-
|
|
2573
|
-
|
|
2574
|
-
|
|
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
|
+
}
|
|
2575
1879
|
render() {
|
|
2576
1880
|
return jsx(IonBackButtonInner, { onClick: this.clickButton, ...this.props });
|
|
2577
1881
|
}
|
|
@@ -2586,21 +1890,6 @@ class IonBackButton extends React.Component {
|
|
|
2586
1890
|
}
|
|
2587
1891
|
}
|
|
2588
1892
|
|
|
2589
|
-
/**
|
|
2590
|
-
* Ionic's global config, or `null` before core has initialized. Kept here rather
|
|
2591
|
-
* than alongside the component helpers so that utils reaching for config don't
|
|
2592
|
-
* pull core's runtime bundle in with it.
|
|
2593
|
-
*/
|
|
2594
|
-
const getConfig = () => {
|
|
2595
|
-
if (typeof window !== 'undefined') {
|
|
2596
|
-
const Ionic = window.Ionic;
|
|
2597
|
-
if (Ionic && Ionic.config) {
|
|
2598
|
-
return Ionic.config;
|
|
2599
|
-
}
|
|
2600
|
-
}
|
|
2601
|
-
return null;
|
|
2602
|
-
};
|
|
2603
|
-
|
|
2604
1893
|
class IonIconContainer extends React.PureComponent {
|
|
2605
1894
|
constructor(props) {
|
|
2606
1895
|
super(props);
|
|
@@ -2646,6 +1935,20 @@ class IonRoute extends React.PureComponent {
|
|
|
2646
1935
|
}
|
|
2647
1936
|
}
|
|
2648
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
|
+
|
|
2649
1952
|
const IonRouterContext = React.createContext({
|
|
2650
1953
|
routeInfo: undefined, // TODO(FW-2959): type
|
|
2651
1954
|
push: () => {
|
|
@@ -2654,9 +1957,6 @@ const IonRouterContext = React.createContext({
|
|
|
2654
1957
|
back: () => {
|
|
2655
1958
|
throw new Error('An Ionic Router is required for IonRouterContext');
|
|
2656
1959
|
},
|
|
2657
|
-
navigateRoot: () => {
|
|
2658
|
-
throw new Error('An Ionic Router is required for IonRouterContext');
|
|
2659
|
-
},
|
|
2660
1960
|
canGoBack: () => {
|
|
2661
1961
|
throw new Error('An Ionic Router is required for IonRouterContext');
|
|
2662
1962
|
},
|
|
@@ -2673,17 +1973,15 @@ function useIonRouter() {
|
|
|
2673
1973
|
back: context.back,
|
|
2674
1974
|
push: context.push,
|
|
2675
1975
|
goBack: context.back,
|
|
2676
|
-
navigateRoot: context.navigateRoot,
|
|
2677
1976
|
canGoBack: context.canGoBack,
|
|
2678
1977
|
routeInfo: context.routeInfo,
|
|
2679
|
-
}), [context.back, context.push, context.
|
|
1978
|
+
}), [context.back, context.push, context.canGoBack, context.routeInfo]);
|
|
2680
1979
|
}
|
|
2681
1980
|
|
|
2682
1981
|
class CreateAnimation extends React.PureComponent {
|
|
2683
|
-
nodes = new Map();
|
|
2684
|
-
animation;
|
|
2685
1982
|
constructor(props) {
|
|
2686
1983
|
super(props);
|
|
1984
|
+
this.nodes = new Map();
|
|
2687
1985
|
this.animation = createAnimation(props.id);
|
|
2688
1986
|
}
|
|
2689
1987
|
setupAnimation(props) {
|
|
@@ -2831,7 +2129,7 @@ function useController(displayName, controller, defineCustomElement) {
|
|
|
2831
2129
|
* @returns Returns the present and dismiss methods in an array
|
|
2832
2130
|
*/
|
|
2833
2131
|
function useIonActionSheet() {
|
|
2834
|
-
const controller = useController('IonActionSheet', actionSheetController, defineCustomElement$
|
|
2132
|
+
const controller = useController('IonActionSheet', actionSheetController, defineCustomElement$1c);
|
|
2835
2133
|
const present = useCallback((buttonsOrOptions, header) => {
|
|
2836
2134
|
if (Array.isArray(buttonsOrOptions)) {
|
|
2837
2135
|
return controller.present({
|
|
@@ -2957,7 +2255,7 @@ function useOverlay(displayName, controller, defineCustomElement, component, com
|
|
|
2957
2255
|
* @returns Returns the present and dismiss methods in an array
|
|
2958
2256
|
*/
|
|
2959
2257
|
function useIonModal(component, componentProps) {
|
|
2960
|
-
const controller = useOverlay('IonModal', modalController, defineCustomElement$
|
|
2258
|
+
const controller = useOverlay('IonModal', modalController, defineCustomElement$1d, component, componentProps);
|
|
2961
2259
|
const present = useCallback((options = {}) => {
|
|
2962
2260
|
controller.present(options);
|
|
2963
2261
|
}, [controller.present]);
|
|
@@ -2972,13 +2270,34 @@ function useIonModal(component, componentProps) {
|
|
|
2972
2270
|
* @returns Returns the present and dismiss methods in an array
|
|
2973
2271
|
*/
|
|
2974
2272
|
function useIonPopover(component, componentProps) {
|
|
2975
|
-
const controller = useOverlay('IonPopover', popoverController, defineCustomElement$
|
|
2273
|
+
const controller = useOverlay('IonPopover', popoverController, defineCustomElement$1e, component, componentProps);
|
|
2976
2274
|
const present = useCallback((options = {}) => {
|
|
2977
2275
|
controller.present(options);
|
|
2978
2276
|
}, [controller.present]);
|
|
2979
2277
|
return [present, controller.dismiss];
|
|
2980
2278
|
}
|
|
2981
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
|
+
|
|
2982
2301
|
/**
|
|
2983
2302
|
* A hook for presenting/dismissing an IonLoading component
|
|
2984
2303
|
* @returns Returns the present and dismiss methods in an array
|
|
@@ -3026,16 +2345,15 @@ const RouteManagerContext = /*@__PURE__*/ React.createContext({
|
|
|
3026
2345
|
findLeavingViewItemByRouteInfo: () => undefined,
|
|
3027
2346
|
findViewItemByRouteInfo: () => undefined,
|
|
3028
2347
|
getChildrenToRender: () => undefined,
|
|
3029
|
-
getViewItemsForOutlet: () => [],
|
|
3030
2348
|
goBack: () => undefined,
|
|
3031
2349
|
unMountViewItem: () => undefined,
|
|
3032
2350
|
});
|
|
3033
2351
|
|
|
3034
2352
|
class ViewLifeCycleManager extends React.Component {
|
|
3035
|
-
ionLifeCycleContext = new DefaultIonLifeCycleContext();
|
|
3036
|
-
_isMounted = false;
|
|
3037
2353
|
constructor(props) {
|
|
3038
2354
|
super(props);
|
|
2355
|
+
this.ionLifeCycleContext = new DefaultIonLifeCycleContext();
|
|
2356
|
+
this._isMounted = false;
|
|
3039
2357
|
this.ionLifeCycleContext.onComponentCanBeDestroyed(() => {
|
|
3040
2358
|
if (!this.props.mount) {
|
|
3041
2359
|
if (this._isMounted) {
|
|
@@ -3063,8 +2381,10 @@ class ViewLifeCycleManager extends React.Component {
|
|
|
3063
2381
|
|
|
3064
2382
|
// const RESTRICT_SIZE = 100;
|
|
3065
2383
|
class LocationHistory {
|
|
3066
|
-
|
|
3067
|
-
|
|
2384
|
+
constructor() {
|
|
2385
|
+
this.locationHistory = [];
|
|
2386
|
+
this.tabHistory = {};
|
|
2387
|
+
}
|
|
3068
2388
|
add(routeInfo) {
|
|
3069
2389
|
if (routeInfo.routeAction === 'push' || routeInfo.routeAction == null) {
|
|
3070
2390
|
this._add(routeInfo);
|
|
@@ -3143,14 +2463,7 @@ class LocationHistory {
|
|
|
3143
2463
|
_replace(routeInfo) {
|
|
3144
2464
|
const routeInfos = this._getRouteInfosByKey(routeInfo.tab);
|
|
3145
2465
|
routeInfos && routeInfos.pop();
|
|
3146
|
-
|
|
3147
|
-
const currentRoute = this.locationHistory[this.locationHistory.length - 1];
|
|
3148
|
-
// Only pop from global history if we're replacing in the same outlet context.
|
|
3149
|
-
// Don't pop if we're entering a nested outlet (current route has no tab, new route has a tab)
|
|
3150
|
-
const isEnteringNestedOutlet = currentRoute && !currentRoute.tab && !!routeInfo.tab;
|
|
3151
|
-
if (!isEnteringNestedOutlet) {
|
|
3152
|
-
this.locationHistory.pop();
|
|
3153
|
-
}
|
|
2466
|
+
this.locationHistory.pop();
|
|
3154
2467
|
this._add(routeInfo);
|
|
3155
2468
|
}
|
|
3156
2469
|
_clear() {
|
|
@@ -3182,20 +2495,6 @@ class LocationHistory {
|
|
|
3182
2495
|
}
|
|
3183
2496
|
return undefined;
|
|
3184
2497
|
}
|
|
3185
|
-
/**
|
|
3186
|
-
* Returns the most recent RouteInfo in global history (excluding the current
|
|
3187
|
-
* entry) whose pathname matches the given value. Unlike findLastLocation,
|
|
3188
|
-
* this search is tab-agnostic. Used by the multi-step back detection.
|
|
3189
|
-
*/
|
|
3190
|
-
findLastLocationByPathname(pathname) {
|
|
3191
|
-
for (let i = this.locationHistory.length - 2; i >= 0; i--) {
|
|
3192
|
-
const ri = this.locationHistory[i];
|
|
3193
|
-
if (ri && ri.pathname === pathname) {
|
|
3194
|
-
return ri;
|
|
3195
|
-
}
|
|
3196
|
-
}
|
|
3197
|
-
return undefined;
|
|
3198
|
-
}
|
|
3199
2498
|
findLastLocation(routeInfo) {
|
|
3200
2499
|
const routeInfos = this._getRouteInfosByKey(routeInfo.tab);
|
|
3201
2500
|
if (routeInfos) {
|
|
@@ -3227,42 +2526,30 @@ class LocationHistory {
|
|
|
3227
2526
|
canGoBack() {
|
|
3228
2527
|
return this.locationHistory.length > 1;
|
|
3229
2528
|
}
|
|
3230
|
-
findTabForPathname(pathname) {
|
|
3231
|
-
for (const tab of Object.keys(this.tabHistory)) {
|
|
3232
|
-
const routeInfos = this.tabHistory[tab];
|
|
3233
|
-
for (let i = routeInfos.length - 1; i >= 0; i--) {
|
|
3234
|
-
if (routeInfos[i].pathname === pathname) {
|
|
3235
|
-
return tab;
|
|
3236
|
-
}
|
|
3237
|
-
}
|
|
3238
|
-
}
|
|
3239
|
-
return undefined;
|
|
3240
|
-
}
|
|
3241
2529
|
}
|
|
3242
2530
|
|
|
3243
2531
|
class NavManager extends React.PureComponent {
|
|
3244
|
-
ionRouterContextValue = {
|
|
3245
|
-
push: (pathname, routerDirection, routeAction, routerOptions, animationBuilder) => {
|
|
3246
|
-
this.navigate(pathname, routerDirection, routeAction, animationBuilder, routerOptions);
|
|
3247
|
-
},
|
|
3248
|
-
back: (animationBuilder) => {
|
|
3249
|
-
this.goBack(undefined, animationBuilder);
|
|
3250
|
-
},
|
|
3251
|
-
navigateRoot: (pathname, animationBuilder) => {
|
|
3252
|
-
this.props.onNavigateRoot(pathname, animationBuilder);
|
|
3253
|
-
},
|
|
3254
|
-
canGoBack: () => this.props.locationHistory.canGoBack(),
|
|
3255
|
-
nativeBack: () => this.props.onNativeBack(),
|
|
3256
|
-
routeInfo: this.props.routeInfo,
|
|
3257
|
-
};
|
|
3258
2532
|
constructor(props) {
|
|
3259
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
|
+
};
|
|
3260
2545
|
this.state = {
|
|
3261
2546
|
goBack: this.goBack.bind(this),
|
|
3262
2547
|
hasIonicRouter: () => true,
|
|
3263
2548
|
navigate: this.navigate.bind(this),
|
|
2549
|
+
getIonRedirect: this.getIonRedirect.bind(this),
|
|
3264
2550
|
getIonRoute: this.getIonRoute.bind(this),
|
|
3265
2551
|
getStackManager: this.getStackManager.bind(this),
|
|
2552
|
+
getPageManager: this.getPageManager.bind(this),
|
|
3266
2553
|
routeInfo: this.props.routeInfo,
|
|
3267
2554
|
setCurrentTab: this.props.onSetCurrentTab,
|
|
3268
2555
|
changeTab: this.props.onChangeTab,
|
|
@@ -3295,6 +2582,12 @@ class NavManager extends React.PureComponent {
|
|
|
3295
2582
|
navigate(path, direction = 'forward', action = 'push', animationBuilder, options, tab) {
|
|
3296
2583
|
this.props.onNavigate(path, action, direction, animationBuilder, options, tab);
|
|
3297
2584
|
}
|
|
2585
|
+
getPageManager() {
|
|
2586
|
+
return PageManager;
|
|
2587
|
+
}
|
|
2588
|
+
getIonRedirect() {
|
|
2589
|
+
return this.props.ionRedirect;
|
|
2590
|
+
}
|
|
3298
2591
|
getIonRoute() {
|
|
3299
2592
|
return this.props.ionRoute;
|
|
3300
2593
|
}
|
|
@@ -3307,8 +2600,8 @@ class NavManager extends React.PureComponent {
|
|
|
3307
2600
|
}
|
|
3308
2601
|
|
|
3309
2602
|
class ViewStacks {
|
|
3310
|
-
viewStacks = {};
|
|
3311
2603
|
constructor() {
|
|
2604
|
+
this.viewStacks = {};
|
|
3312
2605
|
this.add = this.add.bind(this);
|
|
3313
2606
|
this.clear = this.clear.bind(this);
|
|
3314
2607
|
this.getViewItemsForOutlet = this.getViewItemsForOutlet.bind(this);
|
|
@@ -3324,7 +2617,10 @@ class ViewStacks {
|
|
|
3324
2617
|
}
|
|
3325
2618
|
}
|
|
3326
2619
|
clear(outletId) {
|
|
3327
|
-
|
|
2620
|
+
// Give some time for the leaving views to transition before removing
|
|
2621
|
+
return setTimeout(() => {
|
|
2622
|
+
delete this.viewStacks[outletId];
|
|
2623
|
+
}, 500);
|
|
3328
2624
|
}
|
|
3329
2625
|
getViewItemsForOutlet(outletId) {
|
|
3330
2626
|
return this.viewStacks[outletId] || [];
|
|
@@ -3353,43 +2649,5 @@ class ViewStacks {
|
|
|
3353
2649
|
}
|
|
3354
2650
|
}
|
|
3355
2651
|
|
|
3356
|
-
|
|
3357
|
-
* Spelled out instead of imported as a value so this util doesn't pull core's
|
|
3358
|
-
* runtime into unit tests. The template type still breaks the build on a rename.
|
|
3359
|
-
*/
|
|
3360
|
-
const DEBUG = 'DEBUG';
|
|
3361
|
-
/** Whether the app opted into debug logging with `logLevel: 'DEBUG'`. */
|
|
3362
|
-
const isDebugEnabled = () => {
|
|
3363
|
-
return String(getConfig()?.get('logLevel') ?? '').toUpperCase() === DEBUG;
|
|
3364
|
-
};
|
|
3365
|
-
/**
|
|
3366
|
-
* Logger namespaced to a package, e.g. `react-router`. The payload is a function
|
|
3367
|
-
* so nothing it collects runs while logging is off.
|
|
3368
|
-
*
|
|
3369
|
-
* @internal
|
|
3370
|
-
*/
|
|
3371
|
-
const createDebugLogger = (namespace) => {
|
|
3372
|
-
return (event, getData) => {
|
|
3373
|
-
if (!isDebugEnabled()) {
|
|
3374
|
-
return;
|
|
3375
|
-
}
|
|
3376
|
-
const prefix = `[Ionic Debug]: [${namespace}] - ${event}`;
|
|
3377
|
-
const data = getData?.();
|
|
3378
|
-
if (data === undefined) {
|
|
3379
|
-
console.log(prefix);
|
|
3380
|
-
return;
|
|
3381
|
-
}
|
|
3382
|
-
let serialized;
|
|
3383
|
-
try {
|
|
3384
|
-
serialized = JSON.stringify(data);
|
|
3385
|
-
}
|
|
3386
|
-
catch {
|
|
3387
|
-
// A circular reference in the payload must not break navigation.
|
|
3388
|
-
serialized = '[unserializable payload]';
|
|
3389
|
-
}
|
|
3390
|
-
console.log(prefix, serialized);
|
|
3391
|
-
};
|
|
3392
|
-
};
|
|
3393
|
-
|
|
3394
|
-
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 };
|
|
3395
2653
|
//# sourceMappingURL=index.js.map
|