@ionic/react 8.8.18-dev.11786108988.1fd94742 → 8.8.18-dev.11786355346.19605941
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/css/core.css +1 -1
- package/css/core.css.map +1 -1
- package/css/display.css +1 -1
- package/css/display.css.map +1 -1
- package/css/flex-utils.css +1 -1
- package/css/flex-utils.css.map +1 -1
- package/css/float-elements.css.map +1 -1
- package/css/global.bundle.css.map +1 -1
- package/css/ionic/bundle.ionic.css +1 -0
- package/css/ionic/bundle.ionic.css.map +1 -0
- package/css/ionic/core.ionic.css +1 -0
- package/css/ionic/core.ionic.css.map +1 -0
- package/css/ionic/global.bundle.ionic.css +1 -0
- package/css/ionic/global.bundle.ionic.css.map +1 -0
- package/css/ionic/ionic-swiper.ionic.css +1 -0
- package/css/ionic/ionic-swiper.ionic.css.map +1 -0
- package/css/ionic/link.ionic.css +1 -0
- package/css/ionic/link.ionic.css.map +1 -0
- package/css/ionic/structure.ionic.css +1 -0
- package/css/ionic/structure.ionic.css.map +1 -0
- package/css/ionic/typography.ionic.css +1 -0
- package/css/ionic/typography.ionic.css.map +1 -0
- package/css/ionic/utils.bundle.ionic.css +1 -0
- package/css/ionic/utils.bundle.ionic.css.map +1 -0
- package/css/ionic-swiper.css +1 -1
- package/css/ionic-swiper.css.map +1 -1
- package/css/ionic.bundle.css +1 -1
- package/css/ionic.bundle.css.map +1 -1
- package/css/normalize.css.map +1 -1
- package/css/padding.css.map +1 -1
- package/css/palettes/dark.always.css.map +1 -1
- package/css/palettes/dark.class.css.map +1 -1
- package/css/palettes/dark.system.css.map +1 -1
- package/css/palettes/high-contrast-dark.always.css.map +1 -1
- package/css/palettes/high-contrast-dark.class.css.map +1 -1
- package/css/palettes/high-contrast-dark.system.css.map +1 -1
- package/css/palettes/high-contrast.always.css.map +1 -1
- package/css/palettes/high-contrast.class.css.map +1 -1
- package/css/palettes/high-contrast.system.css.map +1 -1
- package/css/structure.css.map +1 -1
- package/css/text-alignment.css.map +1 -1
- package/css/text-transformation.css.map +1 -1
- package/css/typography.css.map +1 -1
- package/css/utils.bundle.css +1 -1
- package/css/utils.bundle.css.map +1 -1
- package/dist/index.js +450 -1129
- 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 +5 -2
- 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 +76 -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 +11 -3
- package/dist/types/contexts/NavContext.d.ts +2 -0
- package/dist/types/hooks/useIonPicker.d.ts +27 -0
- 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 +16 -35
- 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/index.js
CHANGED
|
@@ -1,80 +1,83 @@
|
|
|
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';
|
|
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
4
|
export { IonicSafeString, IonicSlides, createAnimation, createGesture, getIonPageElement, getTimeGivenProgression, iosTransitionAnimation, mdTransitionAnimation, openURL } from '@ionic/core/components';
|
|
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 {
|
|
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-divider.js';
|
|
24
|
+
import { defineCustomElement as defineCustomElement$j } from '@ionic/core/components/ion-fab.js';
|
|
25
|
+
import { defineCustomElement as defineCustomElement$k } from '@ionic/core/components/ion-fab-list.js';
|
|
26
|
+
import { defineCustomElement as defineCustomElement$l } from '@ionic/core/components/ion-footer.js';
|
|
27
|
+
import { defineCustomElement as defineCustomElement$m } from '@ionic/core/components/ion-gallery.js';
|
|
28
|
+
import { defineCustomElement as defineCustomElement$n } from '@ionic/core/components/ion-gallery-item.js';
|
|
29
|
+
import { defineCustomElement as defineCustomElement$o } from '@ionic/core/components/ion-grid.js';
|
|
30
|
+
import { defineCustomElement as defineCustomElement$p } from '@ionic/core/components/ion-header.js';
|
|
31
|
+
import { defineCustomElement as defineCustomElement$q } from '@ionic/core/components/ion-img.js';
|
|
32
|
+
import { defineCustomElement as defineCustomElement$r } from '@ionic/core/components/ion-infinite-scroll.js';
|
|
33
|
+
import { defineCustomElement as defineCustomElement$s } from '@ionic/core/components/ion-infinite-scroll-content.js';
|
|
34
|
+
import { defineCustomElement as defineCustomElement$t } from '@ionic/core/components/ion-input.js';
|
|
35
|
+
import { defineCustomElement as defineCustomElement$u } from '@ionic/core/components/ion-input-otp.js';
|
|
36
|
+
import { defineCustomElement as defineCustomElement$v } from '@ionic/core/components/ion-input-password-toggle.js';
|
|
37
|
+
import { defineCustomElement as defineCustomElement$w } from '@ionic/core/components/ion-item-divider.js';
|
|
38
|
+
import { defineCustomElement as defineCustomElement$x } from '@ionic/core/components/ion-item-group.js';
|
|
39
|
+
import { defineCustomElement as defineCustomElement$y } from '@ionic/core/components/ion-item-options.js';
|
|
40
|
+
import { defineCustomElement as defineCustomElement$z } from '@ionic/core/components/ion-item-sliding.js';
|
|
41
|
+
import { defineCustomElement as defineCustomElement$A } from '@ionic/core/components/ion-label.js';
|
|
42
|
+
import { defineCustomElement as defineCustomElement$B } from '@ionic/core/components/ion-list.js';
|
|
43
|
+
import { defineCustomElement as defineCustomElement$C } from '@ionic/core/components/ion-list-header.js';
|
|
44
|
+
import { defineCustomElement as defineCustomElement$D } from '@ionic/core/components/ion-menu.js';
|
|
45
|
+
import { defineCustomElement as defineCustomElement$E } from '@ionic/core/components/ion-menu-button.js';
|
|
46
|
+
import { defineCustomElement as defineCustomElement$F } from '@ionic/core/components/ion-menu-toggle.js';
|
|
47
|
+
import { defineCustomElement as defineCustomElement$1p } from '@ionic/core/components/ion-nav.js';
|
|
48
|
+
import { defineCustomElement as defineCustomElement$G } from '@ionic/core/components/ion-nav-link.js';
|
|
49
|
+
import { defineCustomElement as defineCustomElement$H } from '@ionic/core/components/ion-note.js';
|
|
50
|
+
import { defineCustomElement as defineCustomElement$I } from '@ionic/core/components/ion-picker.js';
|
|
51
|
+
import { defineCustomElement as defineCustomElement$J } from '@ionic/core/components/ion-picker-column.js';
|
|
52
|
+
import { defineCustomElement as defineCustomElement$K } from '@ionic/core/components/ion-picker-column-option.js';
|
|
53
|
+
import { defineCustomElement as defineCustomElement$L } from '@ionic/core/components/ion-progress-bar.js';
|
|
54
|
+
import { defineCustomElement as defineCustomElement$M } from '@ionic/core/components/ion-radio.js';
|
|
55
|
+
import { defineCustomElement as defineCustomElement$N } from '@ionic/core/components/ion-radio-group.js';
|
|
56
|
+
import { defineCustomElement as defineCustomElement$O } from '@ionic/core/components/ion-range.js';
|
|
57
|
+
import { defineCustomElement as defineCustomElement$P } from '@ionic/core/components/ion-refresher.js';
|
|
58
|
+
import { defineCustomElement as defineCustomElement$Q } from '@ionic/core/components/ion-refresher-content.js';
|
|
59
|
+
import { defineCustomElement as defineCustomElement$R } from '@ionic/core/components/ion-reorder.js';
|
|
60
|
+
import { defineCustomElement as defineCustomElement$S } from '@ionic/core/components/ion-reorder-group.js';
|
|
61
|
+
import { defineCustomElement as defineCustomElement$T } from '@ionic/core/components/ion-ripple-effect.js';
|
|
62
|
+
import { defineCustomElement as defineCustomElement$U } from '@ionic/core/components/ion-row.js';
|
|
63
|
+
import { defineCustomElement as defineCustomElement$V } from '@ionic/core/components/ion-searchbar.js';
|
|
64
|
+
import { defineCustomElement as defineCustomElement$W } from '@ionic/core/components/ion-segment.js';
|
|
65
|
+
import { defineCustomElement as defineCustomElement$X } from '@ionic/core/components/ion-segment-button.js';
|
|
66
|
+
import { defineCustomElement as defineCustomElement$Y } from '@ionic/core/components/ion-segment-content.js';
|
|
67
|
+
import { defineCustomElement as defineCustomElement$Z } from '@ionic/core/components/ion-segment-view.js';
|
|
68
|
+
import { defineCustomElement as defineCustomElement$_ } from '@ionic/core/components/ion-select.js';
|
|
69
|
+
import { defineCustomElement as defineCustomElement$$ } from '@ionic/core/components/ion-select-modal.js';
|
|
70
|
+
import { defineCustomElement as defineCustomElement$10 } from '@ionic/core/components/ion-select-option.js';
|
|
71
|
+
import { defineCustomElement as defineCustomElement$11 } from '@ionic/core/components/ion-skeleton-text.js';
|
|
72
|
+
import { defineCustomElement as defineCustomElement$12 } from '@ionic/core/components/ion-spinner.js';
|
|
73
|
+
import { defineCustomElement as defineCustomElement$13 } from '@ionic/core/components/ion-split-pane.js';
|
|
74
|
+
import { defineCustomElement as defineCustomElement$14 } from '@ionic/core/components/ion-tab.js';
|
|
75
|
+
import { defineCustomElement as defineCustomElement$15 } from '@ionic/core/components/ion-text.js';
|
|
76
|
+
import { defineCustomElement as defineCustomElement$16 } from '@ionic/core/components/ion-textarea.js';
|
|
77
|
+
import { defineCustomElement as defineCustomElement$17 } from '@ionic/core/components/ion-thumbnail.js';
|
|
78
|
+
import { defineCustomElement as defineCustomElement$18 } from '@ionic/core/components/ion-title.js';
|
|
79
|
+
import { defineCustomElement as defineCustomElement$19 } from '@ionic/core/components/ion-toggle.js';
|
|
80
|
+
import { defineCustomElement as defineCustomElement$1a } from '@ionic/core/components/ion-toolbar.js';
|
|
78
81
|
import { IonBreadcrumb as IonBreadcrumb$1 } from '@ionic/core/components/ion-breadcrumb.js';
|
|
79
82
|
import { IonButton as IonButton$1 } from '@ionic/core/components/ion-button.js';
|
|
80
83
|
import { IonCard as IonCard$1 } from '@ionic/core/components/ion-card.js';
|
|
@@ -82,20 +85,20 @@ import { IonFabButton as IonFabButton$1 } from '@ionic/core/components/ion-fab-b
|
|
|
82
85
|
import { IonItemOption as IonItemOption$1 } from '@ionic/core/components/ion-item-option.js';
|
|
83
86
|
import { IonItem as IonItem$1 } from '@ionic/core/components/ion-item.js';
|
|
84
87
|
import { IonRouterLink as IonRouterLink$1 } from '@ionic/core/components/ion-router-link.js';
|
|
85
|
-
import { defineCustomElement as defineCustomElement$
|
|
86
|
-
import
|
|
87
|
-
import { defineCustomElement as defineCustomElement$
|
|
88
|
-
import { defineCustomElement as defineCustomElement$
|
|
89
|
-
import { defineCustomElement as defineCustomElement$
|
|
90
|
-
import { defineCustomElement as defineCustomElement$
|
|
91
|
-
import { defineCustomElement as defineCustomElement$
|
|
92
|
-
import { defineCustomElement as defineCustomElement$
|
|
93
|
-
import { defineCustomElement as defineCustomElement$
|
|
94
|
-
import { defineCustomElement as defineCustomElement$
|
|
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-alert.js';
|
|
89
|
+
import { defineCustomElement as defineCustomElement$1c } from '@ionic/core/components/ion-loading.js';
|
|
90
|
+
import { defineCustomElement as defineCustomElement$1d } from '@ionic/core/components/ion-toast.js';
|
|
91
|
+
import { defineCustomElement as defineCustomElement$1e } from '@ionic/core/components/ion-picker-legacy.js';
|
|
92
|
+
import { defineCustomElement as defineCustomElement$1f } from '@ionic/core/components/ion-action-sheet.js';
|
|
93
|
+
import { defineCustomElement as defineCustomElement$1g } from '@ionic/core/components/ion-modal.js';
|
|
94
|
+
import { defineCustomElement as defineCustomElement$1h } from '@ionic/core/components/ion-popover.js';
|
|
95
|
+
import { defineCustomElement as defineCustomElement$1n } from '@ionic/core/components/ion-app.js';
|
|
96
|
+
import { defineCustomElement as defineCustomElement$1l } from '@ionic/core/components/ion-back-button.js';
|
|
97
|
+
import { defineCustomElement as defineCustomElement$1m } from '@ionic/core/components/ion-router-outlet.js';
|
|
98
|
+
import { defineCustomElement as defineCustomElement$1j } from '@ionic/core/components/ion-tab-bar.js';
|
|
99
|
+
import { defineCustomElement as defineCustomElement$1i } from '@ionic/core/components/ion-tab-button.js';
|
|
100
|
+
import { defineCustomElement as defineCustomElement$1k } from '@ionic/core/components/ion-tabs.js';
|
|
101
|
+
import { defineCustomElement as defineCustomElement$1o } from 'ionicons/components/ion-icon.js';
|
|
99
102
|
|
|
100
103
|
const IonLifeCycleContext = /*@__PURE__*/ React.createContext({
|
|
101
104
|
onIonViewWillEnter: () => {
|
|
@@ -136,15 +139,16 @@ const IonLifeCycleContext = /*@__PURE__*/ React.createContext({
|
|
|
136
139
|
},
|
|
137
140
|
});
|
|
138
141
|
const DefaultIonLifeCycleContext = class {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
142
|
+
constructor() {
|
|
143
|
+
this.ionViewWillEnterCallbacks = [];
|
|
144
|
+
this.ionViewDidEnterCallbacks = [];
|
|
145
|
+
this.ionViewWillLeaveCallbacks = [];
|
|
146
|
+
this.ionViewDidLeaveCallbacks = [];
|
|
147
|
+
this.ionViewWillEnterDestructorCallbacks = [];
|
|
148
|
+
this.ionViewDidEnterDestructorCallbacks = [];
|
|
149
|
+
this.ionViewWillLeaveDestructorCallbacks = [];
|
|
150
|
+
this.ionViewDidLeaveDestructorCallbacks = [];
|
|
151
|
+
}
|
|
148
152
|
onIonViewWillEnter(callback) {
|
|
149
153
|
if (callback.id) {
|
|
150
154
|
const index = this.ionViewWillEnterCallbacks.findIndex((x) => x.id === callback.id);
|
|
@@ -293,9 +297,9 @@ const DefaultIonLifeCycleContext = class {
|
|
|
293
297
|
// TODO(FW-2959): types
|
|
294
298
|
const withIonLifeCycle = (WrappedComponent) => {
|
|
295
299
|
return class IonLifeCycle extends React.Component {
|
|
296
|
-
componentRef = React.createRef();
|
|
297
300
|
constructor(props) {
|
|
298
301
|
super(props);
|
|
302
|
+
this.componentRef = React.createRef();
|
|
299
303
|
}
|
|
300
304
|
componentDidMount() {
|
|
301
305
|
const element = this.componentRef.current;
|
|
@@ -379,7 +383,9 @@ const useIonViewDidLeave = (callback, deps = []) => {
|
|
|
379
383
|
};
|
|
380
384
|
|
|
381
385
|
const NavContext = /*@__PURE__*/ React.createContext({
|
|
386
|
+
getIonRedirect: () => undefined,
|
|
382
387
|
getIonRoute: () => undefined,
|
|
388
|
+
getPageManager: () => undefined,
|
|
383
389
|
getStackManager: () => undefined,
|
|
384
390
|
goBack: (route) => {
|
|
385
391
|
if (typeof window !== 'undefined') {
|
|
@@ -411,651 +417,6 @@ const NavContext = /*@__PURE__*/ React.createContext({
|
|
|
411
417
|
},
|
|
412
418
|
});
|
|
413
419
|
|
|
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
420
|
const dashToPascalCase = (str) => str
|
|
1060
421
|
.toLowerCase()
|
|
1061
422
|
.split('-')
|
|
@@ -1063,28 +424,6 @@ const dashToPascalCase = (str) => str
|
|
|
1063
424
|
.join('');
|
|
1064
425
|
const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
|
|
1065
426
|
|
|
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): This only matters on React 17 and 18. React 19 added full custom-element
|
|
1083
|
-
* support and no longer serializes a `false` boolean prop to a `="false"`
|
|
1084
|
-
* attribute, so there is nothing to strip there (this stays a harmless no-op).
|
|
1085
|
-
* Once React 17/18 support is dropped, this stripping can be removed.
|
|
1086
|
-
*/
|
|
1087
|
-
const isStaleFalseBooleanAttribute = (attribute) => !attribute.startsWith('aria-') && !attribute.startsWith('data-') && !NON_BOOLEAN_FALSE_ATTRIBUTES.has(attribute);
|
|
1088
427
|
const attachProps = (node, newProps, oldProps = {}) => {
|
|
1089
428
|
// some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
|
|
1090
429
|
if (node instanceof Element) {
|
|
@@ -1115,12 +454,6 @@ const attachProps = (node, newProps, oldProps = {}) => {
|
|
|
1115
454
|
if (propType === 'string') {
|
|
1116
455
|
node.setAttribute(camelToDashCase(name), newProps[name]);
|
|
1117
456
|
}
|
|
1118
|
-
else if (newProps[name] === false) {
|
|
1119
|
-
const attribute = camelToDashCase(name);
|
|
1120
|
-
if (isStaleFalseBooleanAttribute(attribute)) {
|
|
1121
|
-
node.removeAttribute(attribute);
|
|
1122
|
-
}
|
|
1123
|
-
}
|
|
1124
457
|
}
|
|
1125
458
|
});
|
|
1126
459
|
}
|
|
@@ -1231,6 +564,150 @@ const defineCustomElement = (tagName, customElement) => {
|
|
|
1231
564
|
}
|
|
1232
565
|
};
|
|
1233
566
|
|
|
567
|
+
const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
|
|
568
|
+
if (defineCustomElement !== undefined) {
|
|
569
|
+
defineCustomElement();
|
|
570
|
+
}
|
|
571
|
+
const displayName = dashToPascalCase(tagName);
|
|
572
|
+
const ReactComponent = class extends React.Component {
|
|
573
|
+
constructor(props) {
|
|
574
|
+
super(props);
|
|
575
|
+
this.setComponentElRef = (element) => {
|
|
576
|
+
this.componentEl = element;
|
|
577
|
+
};
|
|
578
|
+
}
|
|
579
|
+
componentDidMount() {
|
|
580
|
+
this.componentDidUpdate(this.props);
|
|
581
|
+
}
|
|
582
|
+
componentDidUpdate(prevProps) {
|
|
583
|
+
attachProps(this.componentEl, this.props, prevProps);
|
|
584
|
+
}
|
|
585
|
+
render() {
|
|
586
|
+
const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
|
|
587
|
+
let propsToPass = Object.keys(cProps).reduce((acc, name) => {
|
|
588
|
+
const value = cProps[name];
|
|
589
|
+
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
|
590
|
+
const eventName = name.substring(2).toLowerCase();
|
|
591
|
+
if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
|
|
592
|
+
acc[name] = value;
|
|
593
|
+
}
|
|
594
|
+
}
|
|
595
|
+
else {
|
|
596
|
+
// we should only render strings, booleans, and numbers as attrs in html.
|
|
597
|
+
// objects, functions, arrays etc get synced via properties on mount.
|
|
598
|
+
const type = typeof value;
|
|
599
|
+
if (type === 'string' || type === 'boolean' || type === 'number') {
|
|
600
|
+
acc[camelToDashCase(name)] = value;
|
|
601
|
+
}
|
|
602
|
+
}
|
|
603
|
+
return acc;
|
|
604
|
+
}, {});
|
|
605
|
+
if (manipulatePropsFunction) {
|
|
606
|
+
propsToPass = manipulatePropsFunction(this.props, propsToPass);
|
|
607
|
+
}
|
|
608
|
+
const newProps = {
|
|
609
|
+
...propsToPass,
|
|
610
|
+
ref: mergeRefs(forwardedRef, this.setComponentElRef),
|
|
611
|
+
style,
|
|
612
|
+
};
|
|
613
|
+
/**
|
|
614
|
+
* We use createElement here instead of
|
|
615
|
+
* React.createElement to work around a
|
|
616
|
+
* bug in Vite (https://github.com/vitejs/vite/issues/6104).
|
|
617
|
+
* React.createElement causes all elements to be rendered
|
|
618
|
+
* as <tagname> instead of the actual Web Component.
|
|
619
|
+
*/
|
|
620
|
+
return createElement(tagName, newProps, children);
|
|
621
|
+
}
|
|
622
|
+
static get displayName() {
|
|
623
|
+
return displayName;
|
|
624
|
+
}
|
|
625
|
+
};
|
|
626
|
+
// If context was passed to createReactComponent then conditionally add it to the Component Class
|
|
627
|
+
if (ReactComponentContext) {
|
|
628
|
+
ReactComponent.contextType = ReactComponentContext;
|
|
629
|
+
}
|
|
630
|
+
return createForwardRef$1(ReactComponent, displayName);
|
|
631
|
+
};
|
|
632
|
+
|
|
633
|
+
/* eslint-disable */
|
|
634
|
+
/* tslint:disable */
|
|
635
|
+
/* auto-generated react proxies */
|
|
636
|
+
const IonAccordion = /*@__PURE__*/ createReactComponent('ion-accordion', undefined, undefined, defineCustomElement$1);
|
|
637
|
+
const IonAccordionGroup = /*@__PURE__*/ createReactComponent('ion-accordion-group', undefined, undefined, defineCustomElement$2);
|
|
638
|
+
const IonAvatar = /*@__PURE__*/ createReactComponent('ion-avatar', undefined, undefined, defineCustomElement$3);
|
|
639
|
+
const IonBackdrop = /*@__PURE__*/ createReactComponent('ion-backdrop', undefined, undefined, defineCustomElement$4);
|
|
640
|
+
const IonBadge = /*@__PURE__*/ createReactComponent('ion-badge', undefined, undefined, defineCustomElement$5);
|
|
641
|
+
const IonBreadcrumbs = /*@__PURE__*/ createReactComponent('ion-breadcrumbs', undefined, undefined, defineCustomElement$6);
|
|
642
|
+
const IonButtons = /*@__PURE__*/ createReactComponent('ion-buttons', undefined, undefined, defineCustomElement$7);
|
|
643
|
+
const IonCardContent = /*@__PURE__*/ createReactComponent('ion-card-content', undefined, undefined, defineCustomElement$8);
|
|
644
|
+
const IonCardHeader = /*@__PURE__*/ createReactComponent('ion-card-header', undefined, undefined, defineCustomElement$9);
|
|
645
|
+
const IonCardSubtitle = /*@__PURE__*/ createReactComponent('ion-card-subtitle', undefined, undefined, defineCustomElement$a);
|
|
646
|
+
const IonCardTitle = /*@__PURE__*/ createReactComponent('ion-card-title', undefined, undefined, defineCustomElement$b);
|
|
647
|
+
const IonCheckbox = /*@__PURE__*/ createReactComponent('ion-checkbox', undefined, undefined, defineCustomElement$c);
|
|
648
|
+
const IonChip = /*@__PURE__*/ createReactComponent('ion-chip', undefined, undefined, defineCustomElement$d);
|
|
649
|
+
const IonCol = /*@__PURE__*/ createReactComponent('ion-col', undefined, undefined, defineCustomElement$e);
|
|
650
|
+
const IonContent = /*@__PURE__*/ createReactComponent('ion-content', undefined, undefined, defineCustomElement$f);
|
|
651
|
+
const IonDatetime = /*@__PURE__*/ createReactComponent('ion-datetime', undefined, undefined, defineCustomElement$g);
|
|
652
|
+
const IonDatetimeButton = /*@__PURE__*/ createReactComponent('ion-datetime-button', undefined, undefined, defineCustomElement$h);
|
|
653
|
+
const IonDivider = /*@__PURE__*/ createReactComponent('ion-divider', undefined, undefined, defineCustomElement$i);
|
|
654
|
+
const IonFab = /*@__PURE__*/ createReactComponent('ion-fab', undefined, undefined, defineCustomElement$j);
|
|
655
|
+
const IonFabList = /*@__PURE__*/ createReactComponent('ion-fab-list', undefined, undefined, defineCustomElement$k);
|
|
656
|
+
const IonFooter = /*@__PURE__*/ createReactComponent('ion-footer', undefined, undefined, defineCustomElement$l);
|
|
657
|
+
const IonGallery = /*@__PURE__*/ createReactComponent('ion-gallery', undefined, undefined, defineCustomElement$m);
|
|
658
|
+
const IonGalleryItem = /*@__PURE__*/ createReactComponent('ion-gallery-item', undefined, undefined, defineCustomElement$n);
|
|
659
|
+
const IonGrid = /*@__PURE__*/ createReactComponent('ion-grid', undefined, undefined, defineCustomElement$o);
|
|
660
|
+
const IonHeader = /*@__PURE__*/ createReactComponent('ion-header', undefined, undefined, defineCustomElement$p);
|
|
661
|
+
const IonImg = /*@__PURE__*/ createReactComponent('ion-img', undefined, undefined, defineCustomElement$q);
|
|
662
|
+
const IonInfiniteScroll = /*@__PURE__*/ createReactComponent('ion-infinite-scroll', undefined, undefined, defineCustomElement$r);
|
|
663
|
+
const IonInfiniteScrollContent = /*@__PURE__*/ createReactComponent('ion-infinite-scroll-content', undefined, undefined, defineCustomElement$s);
|
|
664
|
+
const IonInput = /*@__PURE__*/ createReactComponent('ion-input', undefined, undefined, defineCustomElement$t);
|
|
665
|
+
const IonInputOtp = /*@__PURE__*/ createReactComponent('ion-input-otp', undefined, undefined, defineCustomElement$u);
|
|
666
|
+
const IonInputPasswordToggle = /*@__PURE__*/ createReactComponent('ion-input-password-toggle', undefined, undefined, defineCustomElement$v);
|
|
667
|
+
const IonItemDivider = /*@__PURE__*/ createReactComponent('ion-item-divider', undefined, undefined, defineCustomElement$w);
|
|
668
|
+
const IonItemGroup = /*@__PURE__*/ createReactComponent('ion-item-group', undefined, undefined, defineCustomElement$x);
|
|
669
|
+
const IonItemOptions = /*@__PURE__*/ createReactComponent('ion-item-options', undefined, undefined, defineCustomElement$y);
|
|
670
|
+
const IonItemSliding = /*@__PURE__*/ createReactComponent('ion-item-sliding', undefined, undefined, defineCustomElement$z);
|
|
671
|
+
const IonLabel = /*@__PURE__*/ createReactComponent('ion-label', undefined, undefined, defineCustomElement$A);
|
|
672
|
+
const IonList = /*@__PURE__*/ createReactComponent('ion-list', undefined, undefined, defineCustomElement$B);
|
|
673
|
+
const IonListHeader = /*@__PURE__*/ createReactComponent('ion-list-header', undefined, undefined, defineCustomElement$C);
|
|
674
|
+
const IonMenu = /*@__PURE__*/ createReactComponent('ion-menu', undefined, undefined, defineCustomElement$D);
|
|
675
|
+
const IonMenuButton = /*@__PURE__*/ createReactComponent('ion-menu-button', undefined, undefined, defineCustomElement$E);
|
|
676
|
+
const IonMenuToggle = /*@__PURE__*/ createReactComponent('ion-menu-toggle', undefined, undefined, defineCustomElement$F);
|
|
677
|
+
const IonNavLink = /*@__PURE__*/ createReactComponent('ion-nav-link', undefined, undefined, defineCustomElement$G);
|
|
678
|
+
const IonNote = /*@__PURE__*/ createReactComponent('ion-note', undefined, undefined, defineCustomElement$H);
|
|
679
|
+
const IonPicker = /*@__PURE__*/ createReactComponent('ion-picker', undefined, undefined, defineCustomElement$I);
|
|
680
|
+
const IonPickerColumn = /*@__PURE__*/ createReactComponent('ion-picker-column', undefined, undefined, defineCustomElement$J);
|
|
681
|
+
const IonPickerColumnOption = /*@__PURE__*/ createReactComponent('ion-picker-column-option', undefined, undefined, defineCustomElement$K);
|
|
682
|
+
const IonProgressBar = /*@__PURE__*/ createReactComponent('ion-progress-bar', undefined, undefined, defineCustomElement$L);
|
|
683
|
+
const IonRadio = /*@__PURE__*/ createReactComponent('ion-radio', undefined, undefined, defineCustomElement$M);
|
|
684
|
+
const IonRadioGroup = /*@__PURE__*/ createReactComponent('ion-radio-group', undefined, undefined, defineCustomElement$N);
|
|
685
|
+
const IonRange = /*@__PURE__*/ createReactComponent('ion-range', undefined, undefined, defineCustomElement$O);
|
|
686
|
+
const IonRefresher = /*@__PURE__*/ createReactComponent('ion-refresher', undefined, undefined, defineCustomElement$P);
|
|
687
|
+
const IonRefresherContent = /*@__PURE__*/ createReactComponent('ion-refresher-content', undefined, undefined, defineCustomElement$Q);
|
|
688
|
+
const IonReorder = /*@__PURE__*/ createReactComponent('ion-reorder', undefined, undefined, defineCustomElement$R);
|
|
689
|
+
const IonReorderGroup = /*@__PURE__*/ createReactComponent('ion-reorder-group', undefined, undefined, defineCustomElement$S);
|
|
690
|
+
const IonRippleEffect = /*@__PURE__*/ createReactComponent('ion-ripple-effect', undefined, undefined, defineCustomElement$T);
|
|
691
|
+
const IonRow = /*@__PURE__*/ createReactComponent('ion-row', undefined, undefined, defineCustomElement$U);
|
|
692
|
+
const IonSearchbar = /*@__PURE__*/ createReactComponent('ion-searchbar', undefined, undefined, defineCustomElement$V);
|
|
693
|
+
const IonSegment = /*@__PURE__*/ createReactComponent('ion-segment', undefined, undefined, defineCustomElement$W);
|
|
694
|
+
const IonSegmentButton = /*@__PURE__*/ createReactComponent('ion-segment-button', undefined, undefined, defineCustomElement$X);
|
|
695
|
+
const IonSegmentContent = /*@__PURE__*/ createReactComponent('ion-segment-content', undefined, undefined, defineCustomElement$Y);
|
|
696
|
+
const IonSegmentView = /*@__PURE__*/ createReactComponent('ion-segment-view', undefined, undefined, defineCustomElement$Z);
|
|
697
|
+
const IonSelect = /*@__PURE__*/ createReactComponent('ion-select', undefined, undefined, defineCustomElement$_);
|
|
698
|
+
const IonSelectModal = /*@__PURE__*/ createReactComponent('ion-select-modal', undefined, undefined, defineCustomElement$$);
|
|
699
|
+
const IonSelectOption = /*@__PURE__*/ createReactComponent('ion-select-option', undefined, undefined, defineCustomElement$10);
|
|
700
|
+
const IonSkeletonText = /*@__PURE__*/ createReactComponent('ion-skeleton-text', undefined, undefined, defineCustomElement$11);
|
|
701
|
+
const IonSpinner = /*@__PURE__*/ createReactComponent('ion-spinner', undefined, undefined, defineCustomElement$12);
|
|
702
|
+
const IonSplitPane = /*@__PURE__*/ createReactComponent('ion-split-pane', undefined, undefined, defineCustomElement$13);
|
|
703
|
+
const IonTab = /*@__PURE__*/ createReactComponent('ion-tab', undefined, undefined, defineCustomElement$14);
|
|
704
|
+
const IonText = /*@__PURE__*/ createReactComponent('ion-text', undefined, undefined, defineCustomElement$15);
|
|
705
|
+
const IonTextarea = /*@__PURE__*/ createReactComponent('ion-textarea', undefined, undefined, defineCustomElement$16);
|
|
706
|
+
const IonThumbnail = /*@__PURE__*/ createReactComponent('ion-thumbnail', undefined, undefined, defineCustomElement$17);
|
|
707
|
+
const IonTitle = /*@__PURE__*/ createReactComponent('ion-title', undefined, undefined, defineCustomElement$18);
|
|
708
|
+
const IonToggle = /*@__PURE__*/ createReactComponent('ion-toggle', undefined, undefined, defineCustomElement$19);
|
|
709
|
+
const IonToolbar = /*@__PURE__*/ createReactComponent('ion-toolbar', undefined, undefined, defineCustomElement$1a);
|
|
710
|
+
|
|
1234
711
|
const createForwardRef = (ReactComponent, // TODO(FW-2959): type
|
|
1235
712
|
displayName) => {
|
|
1236
713
|
const forwardRef = (props, ref) => {
|
|
@@ -1263,10 +740,15 @@ const createRoutingComponent = (tagName, customElement) => {
|
|
|
1263
740
|
defineCustomElement(tagName, customElement);
|
|
1264
741
|
const displayName = dashToPascalCase(tagName);
|
|
1265
742
|
const ReactComponent = class extends React.Component {
|
|
1266
|
-
ref;
|
|
1267
|
-
stableMergedRefs;
|
|
1268
743
|
constructor(props) {
|
|
1269
744
|
super(props);
|
|
745
|
+
this.handleClick = (e) => {
|
|
746
|
+
const { routerLink, routerDirection, routerOptions, routerAnimation } = this.props;
|
|
747
|
+
if (routerLink !== undefined) {
|
|
748
|
+
e.preventDefault();
|
|
749
|
+
this.context.navigate(routerLink, routerDirection, undefined, routerAnimation, routerOptions);
|
|
750
|
+
}
|
|
751
|
+
};
|
|
1270
752
|
// Create a local ref to to attach props to the wrapped element.
|
|
1271
753
|
this.ref = React.createRef();
|
|
1272
754
|
// React refs must be stable (not created inline).
|
|
@@ -1279,18 +761,6 @@ const createRoutingComponent = (tagName, customElement) => {
|
|
|
1279
761
|
const node = this.ref.current;
|
|
1280
762
|
attachProps(node, this.props, prevProps);
|
|
1281
763
|
}
|
|
1282
|
-
handleClick = (e) => {
|
|
1283
|
-
const { routerLink, routerDirection, routerOptions, routerAnimation } = this.props;
|
|
1284
|
-
if (routerLink !== undefined) {
|
|
1285
|
-
// Allow modifier key clicks (ctrl/cmd/shift) to open the link in a new tab/window
|
|
1286
|
-
// without triggering SPA navigation on the current page.
|
|
1287
|
-
if (e.metaKey || e.ctrlKey || e.shiftKey) {
|
|
1288
|
-
return;
|
|
1289
|
-
}
|
|
1290
|
-
e.preventDefault();
|
|
1291
|
-
this.context.navigate(routerLink, routerDirection, undefined, routerAnimation, routerOptions);
|
|
1292
|
-
}
|
|
1293
|
-
};
|
|
1294
764
|
render() {
|
|
1295
765
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1296
766
|
const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
|
|
@@ -1397,14 +867,44 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
|
|
|
1397
867
|
}
|
|
1398
868
|
const displayName = dashToPascalCase(tagName);
|
|
1399
869
|
const ReactComponent = class extends React.Component {
|
|
1400
|
-
ref;
|
|
1401
|
-
wrapperRef;
|
|
1402
|
-
markerRef;
|
|
1403
|
-
stableMergedRefs;
|
|
1404
|
-
portalTarget;
|
|
1405
|
-
isUnmounted = false;
|
|
1406
870
|
constructor(props) {
|
|
1407
871
|
super(props);
|
|
872
|
+
this.isUnmounted = false;
|
|
873
|
+
this.handleIonMount = () => {
|
|
874
|
+
/**
|
|
875
|
+
* Mount the inner component when the
|
|
876
|
+
* overlay is about to open.
|
|
877
|
+
*
|
|
878
|
+
* For ion-popover, this is when `ionMount` is emitted.
|
|
879
|
+
* For other overlays, this is when `willPresent` is emitted.
|
|
880
|
+
*/
|
|
881
|
+
this.setState({ isOpen: true });
|
|
882
|
+
};
|
|
883
|
+
this.handleWillPresent = (evt) => {
|
|
884
|
+
this.setState({ isOpen: true });
|
|
885
|
+
/**
|
|
886
|
+
* Manually call the onWillPresent
|
|
887
|
+
* handler if present as setState will
|
|
888
|
+
* cause the event handlers to be
|
|
889
|
+
* destroyed and re-created.
|
|
890
|
+
*/
|
|
891
|
+
this.props.onWillPresent && this.props.onWillPresent(evt);
|
|
892
|
+
};
|
|
893
|
+
this.handleDidDismiss = (evt) => {
|
|
894
|
+
const wrapper = this.wrapperRef.current;
|
|
895
|
+
const el = this.ref.current;
|
|
896
|
+
/**
|
|
897
|
+
* This component might be unmounted already, if the containing
|
|
898
|
+
* element was removed while the overlay was still open. (For
|
|
899
|
+
* example, if an item contains an inline overlay with a button
|
|
900
|
+
* that removes the item.)
|
|
901
|
+
*/
|
|
902
|
+
if (wrapper && el) {
|
|
903
|
+
el.append(wrapper);
|
|
904
|
+
this.setState({ isOpen: false });
|
|
905
|
+
}
|
|
906
|
+
this.props.onDidDismiss && this.props.onDidDismiss(evt);
|
|
907
|
+
};
|
|
1408
908
|
// Create a local ref to to attach props to the wrapped element.
|
|
1409
909
|
this.ref = React.createRef();
|
|
1410
910
|
// React refs must be stable (not created inline).
|
|
@@ -1581,41 +1081,6 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
|
|
|
1581
1081
|
static get displayName() {
|
|
1582
1082
|
return displayName;
|
|
1583
1083
|
}
|
|
1584
|
-
handleIonMount = () => {
|
|
1585
|
-
/**
|
|
1586
|
-
* Mount the inner component when the
|
|
1587
|
-
* overlay is about to open.
|
|
1588
|
-
*
|
|
1589
|
-
* For ion-popover, this is when `ionMount` is emitted.
|
|
1590
|
-
* For other overlays, this is when `willPresent` is emitted.
|
|
1591
|
-
*/
|
|
1592
|
-
this.setState({ isOpen: true });
|
|
1593
|
-
};
|
|
1594
|
-
handleWillPresent = (evt) => {
|
|
1595
|
-
this.setState({ isOpen: true });
|
|
1596
|
-
/**
|
|
1597
|
-
* Manually call the onWillPresent
|
|
1598
|
-
* handler if present as setState will
|
|
1599
|
-
* cause the event handlers to be
|
|
1600
|
-
* destroyed and re-created.
|
|
1601
|
-
*/
|
|
1602
|
-
this.props.onWillPresent && this.props.onWillPresent(evt);
|
|
1603
|
-
};
|
|
1604
|
-
handleDidDismiss = (evt) => {
|
|
1605
|
-
const wrapper = this.wrapperRef.current;
|
|
1606
|
-
const el = this.ref.current;
|
|
1607
|
-
/**
|
|
1608
|
-
* This component might be unmounted already, if the containing
|
|
1609
|
-
* element was removed while the overlay was still open. (For
|
|
1610
|
-
* example, if an item contains an inline overlay with a button
|
|
1611
|
-
* that removes the item.)
|
|
1612
|
-
*/
|
|
1613
|
-
if (wrapper && el) {
|
|
1614
|
-
el.append(wrapper);
|
|
1615
|
-
this.setState({ isOpen: false });
|
|
1616
|
-
}
|
|
1617
|
-
this.props.onDidDismiss && this.props.onDidDismiss(evt);
|
|
1618
|
-
};
|
|
1619
1084
|
};
|
|
1620
1085
|
// Forward the nesting context as a prop to avoid contextType on the class.
|
|
1621
1086
|
// The render function is passed via `children` (not as a varargs child) so it
|
|
@@ -1628,17 +1093,19 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
|
|
|
1628
1093
|
};
|
|
1629
1094
|
const DELEGATE_HOST = 'ion-delegate-host';
|
|
1630
1095
|
|
|
1631
|
-
const IonAlert = /*@__PURE__*/ createInlineOverlayComponent('ion-alert', defineCustomElement$
|
|
1096
|
+
const IonAlert = /*@__PURE__*/ createInlineOverlayComponent('ion-alert', defineCustomElement$1b);
|
|
1632
1097
|
|
|
1633
|
-
const IonLoading = /*@__PURE__*/ createInlineOverlayComponent('ion-loading', defineCustomElement$
|
|
1098
|
+
const IonLoading = /*@__PURE__*/ createInlineOverlayComponent('ion-loading', defineCustomElement$1c);
|
|
1634
1099
|
|
|
1635
|
-
const IonToast = /*@__PURE__*/ createInlineOverlayComponent('ion-toast', defineCustomElement$
|
|
1100
|
+
const IonToast = /*@__PURE__*/ createInlineOverlayComponent('ion-toast', defineCustomElement$1d);
|
|
1636
1101
|
|
|
1637
|
-
const
|
|
1102
|
+
const IonPickerLegacy = /*@__PURE__*/ createInlineOverlayComponent('ion-picker-legacy', defineCustomElement$1e);
|
|
1638
1103
|
|
|
1639
|
-
const
|
|
1104
|
+
const IonActionSheet = /*@__PURE__*/ createInlineOverlayComponent('ion-action-sheet', defineCustomElement$1f);
|
|
1640
1105
|
|
|
1641
|
-
const
|
|
1106
|
+
const IonModal = /*@__PURE__*/ createInlineOverlayComponent('ion-modal', defineCustomElement$1g, true);
|
|
1107
|
+
|
|
1108
|
+
const IonPopover = /*@__PURE__*/ createInlineOverlayComponent('ion-popover', defineCustomElement$1h);
|
|
1642
1109
|
|
|
1643
1110
|
const IonContext = React.createContext({
|
|
1644
1111
|
addOverlay: () => {
|
|
@@ -1730,101 +1197,31 @@ const IonOverlayManager = ({ onAddOverlay, onRemoveOverlay }) => {
|
|
|
1730
1197
|
}) }));
|
|
1731
1198
|
};
|
|
1732
1199
|
|
|
1733
|
-
const
|
|
1734
|
-
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
componentEl;
|
|
1740
|
-
setComponentElRef = (element) => {
|
|
1741
|
-
this.componentEl = element;
|
|
1742
|
-
};
|
|
1743
|
-
constructor(props) {
|
|
1744
|
-
super(props);
|
|
1745
|
-
}
|
|
1746
|
-
componentDidMount() {
|
|
1747
|
-
this.componentDidUpdate(this.props);
|
|
1748
|
-
}
|
|
1749
|
-
componentDidUpdate(prevProps) {
|
|
1750
|
-
attachProps(this.componentEl, this.props, prevProps);
|
|
1751
|
-
}
|
|
1752
|
-
render() {
|
|
1753
|
-
const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
|
|
1754
|
-
let propsToPass = Object.keys(cProps).reduce((acc, name) => {
|
|
1755
|
-
const value = cProps[name];
|
|
1756
|
-
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
|
1757
|
-
const eventName = name.substring(2).toLowerCase();
|
|
1758
|
-
if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
|
|
1759
|
-
acc[name] = value;
|
|
1760
|
-
}
|
|
1761
|
-
}
|
|
1762
|
-
else {
|
|
1763
|
-
// we should only render strings, booleans, and numbers as attrs in html.
|
|
1764
|
-
// objects, functions, arrays etc get synced via properties on mount.
|
|
1765
|
-
const type = typeof value;
|
|
1766
|
-
if (type === 'string' || type === 'boolean' || type === 'number') {
|
|
1767
|
-
acc[camelToDashCase(name)] = value;
|
|
1768
|
-
}
|
|
1769
|
-
}
|
|
1770
|
-
return acc;
|
|
1771
|
-
}, {});
|
|
1772
|
-
if (manipulatePropsFunction) {
|
|
1773
|
-
propsToPass = manipulatePropsFunction(this.props, propsToPass);
|
|
1774
|
-
}
|
|
1775
|
-
const newProps = {
|
|
1776
|
-
...propsToPass,
|
|
1777
|
-
ref: mergeRefs(forwardedRef, this.setComponentElRef),
|
|
1778
|
-
style,
|
|
1779
|
-
children
|
|
1780
|
-
};
|
|
1781
|
-
/**
|
|
1782
|
-
* We use createElement here instead of
|
|
1783
|
-
* React.createElement to work around a
|
|
1784
|
-
* bug in Vite (https://github.com/vitejs/vite/issues/6104).
|
|
1785
|
-
* React.createElement causes all elements to be rendered
|
|
1786
|
-
* as <tagname> instead of the actual Web Component.
|
|
1787
|
-
*/
|
|
1788
|
-
return createElement(tagName, newProps, children);
|
|
1789
|
-
}
|
|
1790
|
-
static get displayName() {
|
|
1791
|
-
return displayName;
|
|
1792
|
-
}
|
|
1793
|
-
};
|
|
1794
|
-
// If context was passed to createReactComponent then conditionally add it to the Component Class
|
|
1795
|
-
if (ReactComponentContext) {
|
|
1796
|
-
ReactComponent.contextType = ReactComponentContext;
|
|
1797
|
-
}
|
|
1798
|
-
return createForwardRef$1(ReactComponent, displayName);
|
|
1799
|
-
};
|
|
1800
|
-
|
|
1801
|
-
const IonTabButtonInner = /*@__PURE__*/ createReactComponent('ion-tab-button', undefined, undefined, defineCustomElement$1e);
|
|
1802
|
-
const IonTabBarInner = /*@__PURE__*/ createReactComponent('ion-tab-bar', undefined, undefined, defineCustomElement$1f);
|
|
1803
|
-
const IonTabsInner = /*@__PURE__*/ createReactComponent('ion-tabs', undefined, undefined, defineCustomElement$1g);
|
|
1804
|
-
const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button', undefined, undefined, defineCustomElement$1h);
|
|
1805
|
-
const IonRouterOutletInner = /*@__PURE__*/ createReactComponent('ion-router-outlet', undefined, undefined, defineCustomElement$1i);
|
|
1806
|
-
const IonAppInner = /*@__PURE__*/ createReactComponent('ion-app', undefined, undefined, defineCustomElement$1j);
|
|
1200
|
+
const IonTabButtonInner = /*@__PURE__*/ createReactComponent('ion-tab-button', undefined, undefined, defineCustomElement$1i);
|
|
1201
|
+
const IonTabBarInner = /*@__PURE__*/ createReactComponent('ion-tab-bar', undefined, undefined, defineCustomElement$1j);
|
|
1202
|
+
const IonTabsInner = /*@__PURE__*/ createReactComponent('ion-tabs', undefined, undefined, defineCustomElement$1k);
|
|
1203
|
+
const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button', undefined, undefined, defineCustomElement$1l);
|
|
1204
|
+
const IonRouterOutletInner = /*@__PURE__*/ createReactComponent('ion-router-outlet', undefined, undefined, defineCustomElement$1m);
|
|
1205
|
+
const IonAppInner = /*@__PURE__*/ createReactComponent('ion-app', undefined, undefined, defineCustomElement$1n);
|
|
1807
1206
|
// ionicons
|
|
1808
|
-
const IonIconInner = /*@__PURE__*/ createReactComponent('ion-icon', undefined, undefined, defineCustomElement$
|
|
1207
|
+
const IonIconInner = /*@__PURE__*/ createReactComponent('ion-icon', undefined, undefined, defineCustomElement$1o);
|
|
1809
1208
|
|
|
1810
1209
|
class IonApp extends React.Component {
|
|
1811
|
-
addOverlayCallback;
|
|
1812
|
-
removeOverlayCallback;
|
|
1813
1210
|
constructor(props) {
|
|
1814
1211
|
super(props);
|
|
1212
|
+
this.ionContext = {
|
|
1213
|
+
addOverlay: (id, overlay, containerElement) => {
|
|
1214
|
+
if (this.addOverlayCallback) {
|
|
1215
|
+
this.addOverlayCallback(id, overlay, containerElement);
|
|
1216
|
+
}
|
|
1217
|
+
},
|
|
1218
|
+
removeOverlay: (id) => {
|
|
1219
|
+
if (this.removeOverlayCallback) {
|
|
1220
|
+
this.removeOverlayCallback(id);
|
|
1221
|
+
}
|
|
1222
|
+
},
|
|
1223
|
+
};
|
|
1815
1224
|
}
|
|
1816
|
-
ionContext = {
|
|
1817
|
-
addOverlay: (id, overlay, containerElement) => {
|
|
1818
|
-
if (this.addOverlayCallback) {
|
|
1819
|
-
this.addOverlayCallback(id, overlay, containerElement);
|
|
1820
|
-
}
|
|
1821
|
-
},
|
|
1822
|
-
removeOverlay: (id) => {
|
|
1823
|
-
if (this.removeOverlayCallback) {
|
|
1824
|
-
this.removeOverlayCallback(id);
|
|
1825
|
-
}
|
|
1826
|
-
},
|
|
1827
|
-
};
|
|
1828
1225
|
render() {
|
|
1829
1226
|
return (jsxs(IonContext.Provider, { value: this.ionContext, children: [jsx(IonAppInner, { ...this.props, children: this.props.children }), jsx(IonOverlayManager, { onAddOverlay: (callback) => {
|
|
1830
1227
|
this.addOverlayCallback = callback;
|
|
@@ -1832,8 +1229,8 @@ class IonApp extends React.Component {
|
|
|
1832
1229
|
this.removeOverlayCallback = callback;
|
|
1833
1230
|
} })] }));
|
|
1834
1231
|
}
|
|
1835
|
-
static displayName = 'IonApp';
|
|
1836
1232
|
}
|
|
1233
|
+
IonApp.displayName = 'IonApp';
|
|
1837
1234
|
|
|
1838
1235
|
const StackContext = React.createContext({
|
|
1839
1236
|
registerIonPage: () => undefined,
|
|
@@ -1841,32 +1238,11 @@ const StackContext = React.createContext({
|
|
|
1841
1238
|
});
|
|
1842
1239
|
|
|
1843
1240
|
class PageManager extends React.PureComponent {
|
|
1844
|
-
ionLifeCycleContext;
|
|
1845
|
-
ionPageElementRef;
|
|
1846
|
-
stableMergedRefs;
|
|
1847
1241
|
constructor(props) {
|
|
1848
1242
|
super(props);
|
|
1849
1243
|
this.ionPageElementRef = React.createRef();
|
|
1850
1244
|
// React refs must be stable (not created inline).
|
|
1851
|
-
|
|
1852
|
-
const baseMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef);
|
|
1853
|
-
// Guard against React 19 strict mode double-mount re-adding ion-page-invisible.
|
|
1854
|
-
// The ref fires again on remount after StackManager may have already removed it.
|
|
1855
|
-
let hasAppliedInvisible = false;
|
|
1856
|
-
this.stableMergedRefs = (node) => {
|
|
1857
|
-
if (node &&
|
|
1858
|
-
!hasAppliedInvisible &&
|
|
1859
|
-
!node.classList.contains('ion-page-invisible') &&
|
|
1860
|
-
!node.classList.contains('ion-page-hidden')) {
|
|
1861
|
-
// Add ion-page-invisible synchronously before first paint (if in an outlet)
|
|
1862
|
-
// This prevents the flash that occurs when componentDidMount runs after paint
|
|
1863
|
-
if (this.context?.isInOutlet?.()) {
|
|
1864
|
-
node.classList.add('ion-page-invisible');
|
|
1865
|
-
hasAppliedInvisible = true;
|
|
1866
|
-
}
|
|
1867
|
-
}
|
|
1868
|
-
baseMergedRefs(node);
|
|
1869
|
-
};
|
|
1245
|
+
this.stableMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef);
|
|
1870
1246
|
/**
|
|
1871
1247
|
* This binds the scope of the following methods to the class scope.
|
|
1872
1248
|
* The `.bind` method returns a new function, so we need to assign it
|
|
@@ -1878,38 +1254,11 @@ class PageManager extends React.PureComponent {
|
|
|
1878
1254
|
this.ionViewWillLeaveHandler = this.ionViewWillLeaveHandler.bind(this);
|
|
1879
1255
|
this.ionViewDidLeaveHandler = this.ionViewDidLeaveHandler.bind(this);
|
|
1880
1256
|
}
|
|
1881
|
-
parseClasses(className) {
|
|
1882
|
-
if (!className)
|
|
1883
|
-
return new Set();
|
|
1884
|
-
return new Set(className.split(/\s+/).filter(Boolean));
|
|
1885
|
-
}
|
|
1886
|
-
/**
|
|
1887
|
-
* Updates classList by diffing old/new className props.
|
|
1888
|
-
* Preserves framework-added classes (can-go-back, ion-page-invisible, etc.).
|
|
1889
|
-
*/
|
|
1890
|
-
updateUserClasses(oldClassName, newClassName) {
|
|
1891
|
-
if (!this.ionPageElementRef.current)
|
|
1892
|
-
return;
|
|
1893
|
-
const oldClasses = this.parseClasses(oldClassName);
|
|
1894
|
-
const newClasses = this.parseClasses(newClassName);
|
|
1895
|
-
oldClasses.forEach((cls) => {
|
|
1896
|
-
if (!newClasses.has(cls)) {
|
|
1897
|
-
this.ionPageElementRef.current.classList.remove(cls);
|
|
1898
|
-
}
|
|
1899
|
-
});
|
|
1900
|
-
newClasses.forEach((cls) => {
|
|
1901
|
-
if (!oldClasses.has(cls)) {
|
|
1902
|
-
this.ionPageElementRef.current.classList.add(cls);
|
|
1903
|
-
}
|
|
1904
|
-
});
|
|
1905
|
-
}
|
|
1906
1257
|
componentDidMount() {
|
|
1907
1258
|
if (this.ionPageElementRef.current) {
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
// The ref callback runs synchronously when the element is created, before the browser paints.
|
|
1912
|
-
this.updateUserClasses(undefined, this.props.className);
|
|
1259
|
+
if (this.context.isInOutlet()) {
|
|
1260
|
+
this.ionPageElementRef.current.classList.add('ion-page-invisible');
|
|
1261
|
+
}
|
|
1913
1262
|
this.context.registerIonPage(this.ionPageElementRef.current, this.props.routeInfo);
|
|
1914
1263
|
this.ionPageElementRef.current.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
|
|
1915
1264
|
this.ionPageElementRef.current.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler);
|
|
@@ -1917,11 +1266,6 @@ class PageManager extends React.PureComponent {
|
|
|
1917
1266
|
this.ionPageElementRef.current.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler);
|
|
1918
1267
|
}
|
|
1919
1268
|
}
|
|
1920
|
-
componentDidUpdate(prevProps) {
|
|
1921
|
-
if (prevProps.className !== this.props.className) {
|
|
1922
|
-
this.updateUserClasses(prevProps.className, this.props.className);
|
|
1923
|
-
}
|
|
1924
|
-
}
|
|
1925
1269
|
componentWillUnmount() {
|
|
1926
1270
|
if (this.ionPageElementRef.current) {
|
|
1927
1271
|
this.ionPageElementRef.current.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
|
|
@@ -1951,11 +1295,9 @@ class PageManager extends React.PureComponent {
|
|
|
1951
1295
|
render() {
|
|
1952
1296
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1953
1297
|
const { className, children, routeInfo, forwardedRef, ...props } = this.props;
|
|
1954
|
-
// Only set "ion-page" in JSX. User classes are managed via DOM in componentDidMount/componentDidUpdate
|
|
1955
|
-
// to preserve framework-added classes (can-go-back, ion-page-invisible, etc.) when className prop changes.
|
|
1956
1298
|
return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
|
|
1957
1299
|
this.ionLifeCycleContext = context;
|
|
1958
|
-
return (jsx("div", { className:
|
|
1300
|
+
return (jsx("div", { className: className ? `${className} ion-page` : `ion-page`, ref: this.stableMergedRefs, ...props, children: children }));
|
|
1959
1301
|
} }));
|
|
1960
1302
|
}
|
|
1961
1303
|
static get contextType() {
|
|
@@ -2015,7 +1357,7 @@ const ReactDelegate = (addView, removeView) => {
|
|
|
2015
1357
|
};
|
|
2016
1358
|
};
|
|
2017
1359
|
|
|
2018
|
-
const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$
|
|
1360
|
+
const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$1p);
|
|
2019
1361
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2020
1362
|
const IonNavInternal = ({ children, forwardedRef, ...restOfProps }) => {
|
|
2021
1363
|
const [views, setViews] = useState([]);
|
|
@@ -2041,9 +1383,6 @@ const HTMLElementSSR = (typeof HTMLElement !== 'undefined' ? HTMLElement : class
|
|
|
2041
1383
|
});
|
|
2042
1384
|
|
|
2043
1385
|
class OutletPageManager extends React.Component {
|
|
2044
|
-
ionLifeCycleContext;
|
|
2045
|
-
ionRouterOutlet;
|
|
2046
|
-
outletIsReady;
|
|
2047
1386
|
constructor(props) {
|
|
2048
1387
|
super(props);
|
|
2049
1388
|
this.outletIsReady = false;
|
|
@@ -2066,30 +1405,8 @@ class OutletPageManager extends React.Component {
|
|
|
2066
1405
|
*/
|
|
2067
1406
|
if (!this.outletIsReady) {
|
|
2068
1407
|
componentOnReady(this.ionRouterOutlet, () => {
|
|
2069
|
-
/**
|
|
2070
|
-
* Guard against duplicate callbacks from React strict mode double-mount.
|
|
2071
|
-
* Both componentDidMount calls pass the outer !outletIsReady check before
|
|
2072
|
-
* either async callback fires. Without this inner guard, the second callback
|
|
2073
|
-
* re-adds ion-page-invisible after the first callback's transition removed it,
|
|
2074
|
-
* and registerIonPage returns early (same element), leaving the page invisible.
|
|
2075
|
-
*/
|
|
2076
|
-
if (this.outletIsReady)
|
|
2077
|
-
return;
|
|
2078
1408
|
this.outletIsReady = true;
|
|
2079
|
-
|
|
2080
|
-
* Add ion-page + ion-page-invisible AFTER Stencil hydration but
|
|
2081
|
-
* BEFORE registerIonPage. Stencil hydration overwrites className,
|
|
2082
|
-
* so classes added in a React ref callback get wiped. Adding them
|
|
2083
|
-
* here -- after hydration -- ensures they persist until the parent
|
|
2084
|
-
* outlet's forward animation removes ion-page-invisible, preventing
|
|
2085
|
-
* a flash where the outlet is briefly visible at full opacity.
|
|
2086
|
-
*/
|
|
2087
|
-
const el = this.ionRouterOutlet;
|
|
2088
|
-
if (!el.classList.contains('ion-page-invisible') && !el.classList.contains('ion-page-hidden')) {
|
|
2089
|
-
el.classList.add('ion-page');
|
|
2090
|
-
el.classList.add('ion-page-invisible');
|
|
2091
|
-
}
|
|
2092
|
-
this.context.registerIonPage(el, this.props.routeInfo);
|
|
1409
|
+
this.context.registerIonPage(this.ionRouterOutlet, this.props.routeInfo);
|
|
2093
1410
|
});
|
|
2094
1411
|
}
|
|
2095
1412
|
this.ionRouterOutlet.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
|
|
@@ -2119,10 +1436,10 @@ class OutletPageManager extends React.Component {
|
|
|
2119
1436
|
this.ionLifeCycleContext.ionViewDidLeave();
|
|
2120
1437
|
}
|
|
2121
1438
|
render() {
|
|
2122
|
-
const { StackManager, children, routeInfo,
|
|
1439
|
+
const { StackManager, children, routeInfo, ...props } = this.props;
|
|
2123
1440
|
return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
|
|
2124
1441
|
this.ionLifeCycleContext = context;
|
|
2125
|
-
return (jsx(StackManager, {
|
|
1442
|
+
return (jsx(StackManager, { routeInfo: routeInfo, children: jsx(IonRouterOutletInner, { setRef: (val) => (this.ionRouterOutlet = val), ...props, children: children }) }));
|
|
2126
1443
|
} }));
|
|
2127
1444
|
}
|
|
2128
1445
|
static get contextType() {
|
|
@@ -2131,16 +1448,13 @@ class OutletPageManager extends React.Component {
|
|
|
2131
1448
|
}
|
|
2132
1449
|
|
|
2133
1450
|
class IonRouterOutletContainer extends React.Component {
|
|
2134
|
-
outletId;
|
|
2135
1451
|
constructor(props) {
|
|
2136
1452
|
super(props);
|
|
2137
|
-
this.outletId = props.id ?? `routerOutlet-${generateId('routerOutlet')}`;
|
|
2138
1453
|
}
|
|
2139
1454
|
render() {
|
|
2140
1455
|
const StackManager = this.context.getStackManager();
|
|
2141
1456
|
const { children, forwardedRef, ...props } = this.props;
|
|
2142
|
-
|
|
2143
|
-
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 }));
|
|
1457
|
+
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 }));
|
|
2144
1458
|
}
|
|
2145
1459
|
static get contextType() {
|
|
2146
1460
|
return NavContext;
|
|
@@ -2164,29 +1478,28 @@ class IonTabs extends React.Component {
|
|
|
2164
1478
|
shouldComponentUpdate() {
|
|
2165
1479
|
return true;
|
|
2166
1480
|
}
|
|
2167
|
-
/**
|
|
2168
|
-
* `routerOutletRef` allows users to add a `ref` to `IonRouterOutlet`.
|
|
2169
|
-
* Without this, `ref.current` will be `undefined` in the user's app,
|
|
2170
|
-
* breaking their ability to access the `IonRouterOutlet` instance.
|
|
2171
|
-
* Do not remove this ref.
|
|
2172
|
-
*/
|
|
2173
|
-
routerOutletRef = React.createRef();
|
|
2174
|
-
selectTabHandler;
|
|
2175
|
-
tabBarRef = React.createRef();
|
|
2176
|
-
ionTabContextState = {
|
|
2177
|
-
activeTab: undefined,
|
|
2178
|
-
selectTab: () => false,
|
|
2179
|
-
hasRouterOutlet: false,
|
|
2180
|
-
/**
|
|
2181
|
-
* Tab bar can be used as a standalone component,
|
|
2182
|
-
* so the props can not be passed directly to the
|
|
2183
|
-
* tab bar component. Instead, props will be
|
|
2184
|
-
* passed through the context.
|
|
2185
|
-
*/
|
|
2186
|
-
tabBarProps: { ref: this.tabBarRef },
|
|
2187
|
-
};
|
|
2188
1481
|
constructor(props) {
|
|
2189
1482
|
super(props);
|
|
1483
|
+
/**
|
|
1484
|
+
* `routerOutletRef` allows users to add a `ref` to `IonRouterOutlet`.
|
|
1485
|
+
* Without this, `ref.current` will be `undefined` in the user's app,
|
|
1486
|
+
* breaking their ability to access the `IonRouterOutlet` instance.
|
|
1487
|
+
* Do not remove this ref.
|
|
1488
|
+
*/
|
|
1489
|
+
this.routerOutletRef = React.createRef();
|
|
1490
|
+
this.tabBarRef = React.createRef();
|
|
1491
|
+
this.ionTabContextState = {
|
|
1492
|
+
activeTab: undefined,
|
|
1493
|
+
selectTab: () => false,
|
|
1494
|
+
hasRouterOutlet: false,
|
|
1495
|
+
/**
|
|
1496
|
+
* Tab bar can be used as a standalone component,
|
|
1497
|
+
* so the props can not be passed directly to the
|
|
1498
|
+
* tab bar component. Instead, props will be
|
|
1499
|
+
* passed through the context.
|
|
1500
|
+
*/
|
|
1501
|
+
tabBarProps: { ref: this.tabBarRef },
|
|
1502
|
+
};
|
|
2190
1503
|
}
|
|
2191
1504
|
componentDidMount() {
|
|
2192
1505
|
if (this.tabBarRef.current) {
|
|
@@ -2338,14 +1651,14 @@ const matchesTab = (pathname, href) => {
|
|
|
2338
1651
|
if (href === undefined) {
|
|
2339
1652
|
return false;
|
|
2340
1653
|
}
|
|
2341
|
-
|
|
2342
|
-
const hrefPathname = href.split('?')[0];
|
|
2343
|
-
const normalizedHref = hrefPathname.endsWith('/') && hrefPathname !== '/' ? hrefPathname.slice(0, -1) : hrefPathname;
|
|
1654
|
+
const normalizedHref = href.endsWith('/') && href !== '/' ? href.slice(0, -1) : href;
|
|
2344
1655
|
return pathname === normalizedHref || pathname.startsWith(normalizedHref + '/');
|
|
2345
1656
|
};
|
|
2346
1657
|
class IonTabBarUnwrapped extends React.PureComponent {
|
|
2347
1658
|
constructor(props) {
|
|
2348
1659
|
super(props);
|
|
1660
|
+
// eslint-disable-next-line
|
|
1661
|
+
this.setActiveTabOnContext = (_tab) => { };
|
|
2349
1662
|
const tabs = {};
|
|
2350
1663
|
React.Children.forEach(props.children, (child) => {
|
|
2351
1664
|
if (child != null &&
|
|
@@ -2386,8 +1699,6 @@ class IonTabBarUnwrapped extends React.PureComponent {
|
|
|
2386
1699
|
this.setActiveTabOnContext(this.state.activeTab);
|
|
2387
1700
|
}
|
|
2388
1701
|
}
|
|
2389
|
-
// eslint-disable-next-line
|
|
2390
|
-
setActiveTabOnContext = (_tab) => { };
|
|
2391
1702
|
selectTab(tab) {
|
|
2392
1703
|
const tabUrl = this.state.tabs[tab];
|
|
2393
1704
|
if (tabUrl) {
|
|
@@ -2432,7 +1743,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
|
|
|
2432
1743
|
const prevHref = state.tabs[prevActiveTab].currentHref;
|
|
2433
1744
|
const prevRouteOptions = state.tabs[prevActiveTab].currentRouteOptions;
|
|
2434
1745
|
if (activeTab !== prevActiveTab ||
|
|
2435
|
-
prevHref !==
|
|
1746
|
+
prevHref !== props.routeInfo?.pathname ||
|
|
2436
1747
|
prevRouteOptions !== props.routeInfo?.routeOptions) {
|
|
2437
1748
|
tabs[activeTab] = {
|
|
2438
1749
|
originalHref: tabs[activeTab].originalHref,
|
|
@@ -2505,7 +1816,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
|
|
|
2505
1816
|
return (child) => {
|
|
2506
1817
|
if (child != null && child.props && (child.type === IonTabButton || child.type.isTabButton)) {
|
|
2507
1818
|
const href = child.props.tab === activeTab
|
|
2508
|
-
?
|
|
1819
|
+
? this.props.routeInfo?.pathname
|
|
2509
1820
|
: this.state.tabs[child.props.tab].currentHref;
|
|
2510
1821
|
const routeOptions = child.props.tab === activeTab
|
|
2511
1822
|
? this.props.routeInfo?.routeOptions
|
|
@@ -2550,24 +1861,27 @@ const IonTabBarContainer = React.memo(({ forwardedRef, ...props }) => {
|
|
|
2550
1861
|
const IonTabBar = createForwardRef(IonTabBarContainer, 'IonTabBar');
|
|
2551
1862
|
|
|
2552
1863
|
class IonBackButton extends React.Component {
|
|
2553
|
-
|
|
2554
|
-
|
|
2555
|
-
|
|
2556
|
-
|
|
2557
|
-
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
2561
|
-
|
|
2562
|
-
|
|
2563
|
-
|
|
2564
|
-
|
|
2565
|
-
this.context.
|
|
2566
|
-
|
|
2567
|
-
|
|
2568
|
-
|
|
2569
|
-
|
|
2570
|
-
|
|
1864
|
+
constructor() {
|
|
1865
|
+
super(...arguments);
|
|
1866
|
+
this.clickButton = (e) => {
|
|
1867
|
+
/**
|
|
1868
|
+
* If ion-back-button is being used inside
|
|
1869
|
+
* of ion-nav then we should not interact with
|
|
1870
|
+
* the router.
|
|
1871
|
+
*/
|
|
1872
|
+
if (e.target && e.target.closest('ion-nav') !== null) {
|
|
1873
|
+
return;
|
|
1874
|
+
}
|
|
1875
|
+
const { defaultHref, routerAnimation } = this.props;
|
|
1876
|
+
if (this.context.hasIonicRouter()) {
|
|
1877
|
+
e.stopPropagation();
|
|
1878
|
+
this.context.goBack(defaultHref, routerAnimation);
|
|
1879
|
+
}
|
|
1880
|
+
else if (defaultHref !== undefined) {
|
|
1881
|
+
window.location.href = defaultHref;
|
|
1882
|
+
}
|
|
1883
|
+
};
|
|
1884
|
+
}
|
|
2571
1885
|
render() {
|
|
2572
1886
|
return jsx(IonBackButtonInner, { onClick: this.clickButton, ...this.props });
|
|
2573
1887
|
}
|
|
@@ -2627,6 +1941,20 @@ class IonRoute extends React.PureComponent {
|
|
|
2627
1941
|
}
|
|
2628
1942
|
}
|
|
2629
1943
|
|
|
1944
|
+
class IonRedirect extends React.PureComponent {
|
|
1945
|
+
render() {
|
|
1946
|
+
const IonRedirectInner = this.context.getIonRedirect();
|
|
1947
|
+
if (!this.context.hasIonicRouter() || !IonRedirect) {
|
|
1948
|
+
console.error('You either do not have an Ionic Router package, or your router does not support using <IonRedirect>');
|
|
1949
|
+
return null;
|
|
1950
|
+
}
|
|
1951
|
+
return jsx(IonRedirectInner, { ...this.props });
|
|
1952
|
+
}
|
|
1953
|
+
static get contextType() {
|
|
1954
|
+
return NavContext;
|
|
1955
|
+
}
|
|
1956
|
+
}
|
|
1957
|
+
|
|
2630
1958
|
const IonRouterContext = React.createContext({
|
|
2631
1959
|
routeInfo: undefined, // TODO(FW-2959): type
|
|
2632
1960
|
push: () => {
|
|
@@ -2635,9 +1963,6 @@ const IonRouterContext = React.createContext({
|
|
|
2635
1963
|
back: () => {
|
|
2636
1964
|
throw new Error('An Ionic Router is required for IonRouterContext');
|
|
2637
1965
|
},
|
|
2638
|
-
navigateRoot: () => {
|
|
2639
|
-
throw new Error('An Ionic Router is required for IonRouterContext');
|
|
2640
|
-
},
|
|
2641
1966
|
canGoBack: () => {
|
|
2642
1967
|
throw new Error('An Ionic Router is required for IonRouterContext');
|
|
2643
1968
|
},
|
|
@@ -2654,17 +1979,15 @@ function useIonRouter() {
|
|
|
2654
1979
|
back: context.back,
|
|
2655
1980
|
push: context.push,
|
|
2656
1981
|
goBack: context.back,
|
|
2657
|
-
navigateRoot: context.navigateRoot,
|
|
2658
1982
|
canGoBack: context.canGoBack,
|
|
2659
1983
|
routeInfo: context.routeInfo,
|
|
2660
|
-
}), [context.back, context.push, context.
|
|
1984
|
+
}), [context.back, context.push, context.canGoBack, context.routeInfo]);
|
|
2661
1985
|
}
|
|
2662
1986
|
|
|
2663
1987
|
class CreateAnimation extends React.PureComponent {
|
|
2664
|
-
nodes = new Map();
|
|
2665
|
-
animation;
|
|
2666
1988
|
constructor(props) {
|
|
2667
1989
|
super(props);
|
|
1990
|
+
this.nodes = new Map();
|
|
2668
1991
|
this.animation = createAnimation(props.id);
|
|
2669
1992
|
}
|
|
2670
1993
|
setupAnimation(props) {
|
|
@@ -2812,7 +2135,7 @@ function useController(displayName, controller, defineCustomElement) {
|
|
|
2812
2135
|
* @returns Returns the present and dismiss methods in an array
|
|
2813
2136
|
*/
|
|
2814
2137
|
function useIonActionSheet() {
|
|
2815
|
-
const controller = useController('IonActionSheet', actionSheetController, defineCustomElement$
|
|
2138
|
+
const controller = useController('IonActionSheet', actionSheetController, defineCustomElement$1f);
|
|
2816
2139
|
const present = useCallback((buttonsOrOptions, header) => {
|
|
2817
2140
|
if (Array.isArray(buttonsOrOptions)) {
|
|
2818
2141
|
return controller.present({
|
|
@@ -2832,7 +2155,7 @@ function useIonActionSheet() {
|
|
|
2832
2155
|
* @returns Returns the present and dismiss methods in an array
|
|
2833
2156
|
*/
|
|
2834
2157
|
function useIonAlert() {
|
|
2835
|
-
const controller = useController('IonAlert', alertController, defineCustomElement$
|
|
2158
|
+
const controller = useController('IonAlert', alertController, defineCustomElement$1b);
|
|
2836
2159
|
const present = useCallback((messageOrOptions, buttons) => {
|
|
2837
2160
|
if (typeof messageOrOptions === 'string') {
|
|
2838
2161
|
return controller.present({
|
|
@@ -2852,7 +2175,7 @@ function useIonAlert() {
|
|
|
2852
2175
|
* @returns Returns the present and dismiss methods in an array
|
|
2853
2176
|
*/
|
|
2854
2177
|
function useIonToast() {
|
|
2855
|
-
const controller = useController('IonToast', toastController, defineCustomElement$
|
|
2178
|
+
const controller = useController('IonToast', toastController, defineCustomElement$1d);
|
|
2856
2179
|
const present = useCallback((messageOrOptions, duration) => {
|
|
2857
2180
|
if (typeof messageOrOptions === 'string') {
|
|
2858
2181
|
return controller.present({
|
|
@@ -2938,7 +2261,7 @@ function useOverlay(displayName, controller, defineCustomElement, component, com
|
|
|
2938
2261
|
* @returns Returns the present and dismiss methods in an array
|
|
2939
2262
|
*/
|
|
2940
2263
|
function useIonModal(component, componentProps) {
|
|
2941
|
-
const controller = useOverlay('IonModal', modalController, defineCustomElement$
|
|
2264
|
+
const controller = useOverlay('IonModal', modalController, defineCustomElement$1g, component, componentProps);
|
|
2942
2265
|
const present = useCallback((options = {}) => {
|
|
2943
2266
|
controller.present(options);
|
|
2944
2267
|
}, [controller.present]);
|
|
@@ -2953,19 +2276,40 @@ function useIonModal(component, componentProps) {
|
|
|
2953
2276
|
* @returns Returns the present and dismiss methods in an array
|
|
2954
2277
|
*/
|
|
2955
2278
|
function useIonPopover(component, componentProps) {
|
|
2956
|
-
const controller = useOverlay('IonPopover', popoverController, defineCustomElement$
|
|
2279
|
+
const controller = useOverlay('IonPopover', popoverController, defineCustomElement$1h, component, componentProps);
|
|
2957
2280
|
const present = useCallback((options = {}) => {
|
|
2958
2281
|
controller.present(options);
|
|
2959
2282
|
}, [controller.present]);
|
|
2960
2283
|
return [present, controller.dismiss];
|
|
2961
2284
|
}
|
|
2962
2285
|
|
|
2286
|
+
/**
|
|
2287
|
+
* A hook for presenting/dismissing an IonPicker component
|
|
2288
|
+
* @returns Returns the present and dismiss methods in an array
|
|
2289
|
+
* @deprecated Use the inline ion-picker component instead.
|
|
2290
|
+
*/
|
|
2291
|
+
function useIonPicker() {
|
|
2292
|
+
const controller = useController('IonPicker', pickerController, defineCustomElement$1e);
|
|
2293
|
+
const present = useCallback((columnsOrOptions, buttons) => {
|
|
2294
|
+
if (Array.isArray(columnsOrOptions)) {
|
|
2295
|
+
return controller.present({
|
|
2296
|
+
columns: columnsOrOptions,
|
|
2297
|
+
buttons: buttons ?? [{ text: 'Ok' }],
|
|
2298
|
+
});
|
|
2299
|
+
}
|
|
2300
|
+
else {
|
|
2301
|
+
return controller.present(columnsOrOptions);
|
|
2302
|
+
}
|
|
2303
|
+
}, [controller.present]);
|
|
2304
|
+
return [present, controller.dismiss];
|
|
2305
|
+
}
|
|
2306
|
+
|
|
2963
2307
|
/**
|
|
2964
2308
|
* A hook for presenting/dismissing an IonLoading component
|
|
2965
2309
|
* @returns Returns the present and dismiss methods in an array
|
|
2966
2310
|
*/
|
|
2967
2311
|
function useIonLoading() {
|
|
2968
|
-
const controller = useController('IonLoading', loadingController, defineCustomElement$
|
|
2312
|
+
const controller = useController('IonLoading', loadingController, defineCustomElement$1c);
|
|
2969
2313
|
const present = useCallback((messageOrOptions = {}, duration, spinner) => {
|
|
2970
2314
|
if (typeof messageOrOptions === 'string') {
|
|
2971
2315
|
return controller.present({
|
|
@@ -3007,16 +2351,15 @@ const RouteManagerContext = /*@__PURE__*/ React.createContext({
|
|
|
3007
2351
|
findLeavingViewItemByRouteInfo: () => undefined,
|
|
3008
2352
|
findViewItemByRouteInfo: () => undefined,
|
|
3009
2353
|
getChildrenToRender: () => undefined,
|
|
3010
|
-
getViewItemsForOutlet: () => [],
|
|
3011
2354
|
goBack: () => undefined,
|
|
3012
2355
|
unMountViewItem: () => undefined,
|
|
3013
2356
|
});
|
|
3014
2357
|
|
|
3015
2358
|
class ViewLifeCycleManager extends React.Component {
|
|
3016
|
-
ionLifeCycleContext = new DefaultIonLifeCycleContext();
|
|
3017
|
-
_isMounted = false;
|
|
3018
2359
|
constructor(props) {
|
|
3019
2360
|
super(props);
|
|
2361
|
+
this.ionLifeCycleContext = new DefaultIonLifeCycleContext();
|
|
2362
|
+
this._isMounted = false;
|
|
3020
2363
|
this.ionLifeCycleContext.onComponentCanBeDestroyed(() => {
|
|
3021
2364
|
if (!this.props.mount) {
|
|
3022
2365
|
if (this._isMounted) {
|
|
@@ -3044,8 +2387,10 @@ class ViewLifeCycleManager extends React.Component {
|
|
|
3044
2387
|
|
|
3045
2388
|
// const RESTRICT_SIZE = 100;
|
|
3046
2389
|
class LocationHistory {
|
|
3047
|
-
|
|
3048
|
-
|
|
2390
|
+
constructor() {
|
|
2391
|
+
this.locationHistory = [];
|
|
2392
|
+
this.tabHistory = {};
|
|
2393
|
+
}
|
|
3049
2394
|
add(routeInfo) {
|
|
3050
2395
|
if (routeInfo.routeAction === 'push' || routeInfo.routeAction == null) {
|
|
3051
2396
|
this._add(routeInfo);
|
|
@@ -3124,14 +2469,7 @@ class LocationHistory {
|
|
|
3124
2469
|
_replace(routeInfo) {
|
|
3125
2470
|
const routeInfos = this._getRouteInfosByKey(routeInfo.tab);
|
|
3126
2471
|
routeInfos && routeInfos.pop();
|
|
3127
|
-
|
|
3128
|
-
const currentRoute = this.locationHistory[this.locationHistory.length - 1];
|
|
3129
|
-
// Only pop from global history if we're replacing in the same outlet context.
|
|
3130
|
-
// Don't pop if we're entering a nested outlet (current route has no tab, new route has a tab)
|
|
3131
|
-
const isEnteringNestedOutlet = currentRoute && !currentRoute.tab && !!routeInfo.tab;
|
|
3132
|
-
if (!isEnteringNestedOutlet) {
|
|
3133
|
-
this.locationHistory.pop();
|
|
3134
|
-
}
|
|
2472
|
+
this.locationHistory.pop();
|
|
3135
2473
|
this._add(routeInfo);
|
|
3136
2474
|
}
|
|
3137
2475
|
_clear() {
|
|
@@ -3163,20 +2501,6 @@ class LocationHistory {
|
|
|
3163
2501
|
}
|
|
3164
2502
|
return undefined;
|
|
3165
2503
|
}
|
|
3166
|
-
/**
|
|
3167
|
-
* Returns the most recent RouteInfo in global history (excluding the current
|
|
3168
|
-
* entry) whose pathname matches the given value. Unlike findLastLocation,
|
|
3169
|
-
* this search is tab-agnostic. Used by the multi-step back detection.
|
|
3170
|
-
*/
|
|
3171
|
-
findLastLocationByPathname(pathname) {
|
|
3172
|
-
for (let i = this.locationHistory.length - 2; i >= 0; i--) {
|
|
3173
|
-
const ri = this.locationHistory[i];
|
|
3174
|
-
if (ri && ri.pathname === pathname) {
|
|
3175
|
-
return ri;
|
|
3176
|
-
}
|
|
3177
|
-
}
|
|
3178
|
-
return undefined;
|
|
3179
|
-
}
|
|
3180
2504
|
findLastLocation(routeInfo) {
|
|
3181
2505
|
const routeInfos = this._getRouteInfosByKey(routeInfo.tab);
|
|
3182
2506
|
if (routeInfos) {
|
|
@@ -3208,42 +2532,30 @@ class LocationHistory {
|
|
|
3208
2532
|
canGoBack() {
|
|
3209
2533
|
return this.locationHistory.length > 1;
|
|
3210
2534
|
}
|
|
3211
|
-
findTabForPathname(pathname) {
|
|
3212
|
-
for (const tab of Object.keys(this.tabHistory)) {
|
|
3213
|
-
const routeInfos = this.tabHistory[tab];
|
|
3214
|
-
for (let i = routeInfos.length - 1; i >= 0; i--) {
|
|
3215
|
-
if (routeInfos[i].pathname === pathname) {
|
|
3216
|
-
return tab;
|
|
3217
|
-
}
|
|
3218
|
-
}
|
|
3219
|
-
}
|
|
3220
|
-
return undefined;
|
|
3221
|
-
}
|
|
3222
2535
|
}
|
|
3223
2536
|
|
|
3224
2537
|
class NavManager extends React.PureComponent {
|
|
3225
|
-
ionRouterContextValue = {
|
|
3226
|
-
push: (pathname, routerDirection, routeAction, routerOptions, animationBuilder) => {
|
|
3227
|
-
this.navigate(pathname, routerDirection, routeAction, animationBuilder, routerOptions);
|
|
3228
|
-
},
|
|
3229
|
-
back: (animationBuilder) => {
|
|
3230
|
-
this.goBack(undefined, animationBuilder);
|
|
3231
|
-
},
|
|
3232
|
-
navigateRoot: (pathname, animationBuilder) => {
|
|
3233
|
-
this.props.onNavigateRoot(pathname, animationBuilder);
|
|
3234
|
-
},
|
|
3235
|
-
canGoBack: () => this.props.locationHistory.canGoBack(),
|
|
3236
|
-
nativeBack: () => this.props.onNativeBack(),
|
|
3237
|
-
routeInfo: this.props.routeInfo,
|
|
3238
|
-
};
|
|
3239
2538
|
constructor(props) {
|
|
3240
2539
|
super(props);
|
|
2540
|
+
this.ionRouterContextValue = {
|
|
2541
|
+
push: (pathname, routerDirection, routeAction, routerOptions, animationBuilder) => {
|
|
2542
|
+
this.navigate(pathname, routerDirection, routeAction, animationBuilder, routerOptions);
|
|
2543
|
+
},
|
|
2544
|
+
back: (animationBuilder) => {
|
|
2545
|
+
this.goBack(undefined, animationBuilder);
|
|
2546
|
+
},
|
|
2547
|
+
canGoBack: () => this.props.locationHistory.canGoBack(),
|
|
2548
|
+
nativeBack: () => this.props.onNativeBack(),
|
|
2549
|
+
routeInfo: this.props.routeInfo,
|
|
2550
|
+
};
|
|
3241
2551
|
this.state = {
|
|
3242
2552
|
goBack: this.goBack.bind(this),
|
|
3243
2553
|
hasIonicRouter: () => true,
|
|
3244
2554
|
navigate: this.navigate.bind(this),
|
|
2555
|
+
getIonRedirect: this.getIonRedirect.bind(this),
|
|
3245
2556
|
getIonRoute: this.getIonRoute.bind(this),
|
|
3246
2557
|
getStackManager: this.getStackManager.bind(this),
|
|
2558
|
+
getPageManager: this.getPageManager.bind(this),
|
|
3247
2559
|
routeInfo: this.props.routeInfo,
|
|
3248
2560
|
setCurrentTab: this.props.onSetCurrentTab,
|
|
3249
2561
|
changeTab: this.props.onChangeTab,
|
|
@@ -3276,6 +2588,12 @@ class NavManager extends React.PureComponent {
|
|
|
3276
2588
|
navigate(path, direction = 'forward', action = 'push', animationBuilder, options, tab) {
|
|
3277
2589
|
this.props.onNavigate(path, action, direction, animationBuilder, options, tab);
|
|
3278
2590
|
}
|
|
2591
|
+
getPageManager() {
|
|
2592
|
+
return PageManager;
|
|
2593
|
+
}
|
|
2594
|
+
getIonRedirect() {
|
|
2595
|
+
return this.props.ionRedirect;
|
|
2596
|
+
}
|
|
3279
2597
|
getIonRoute() {
|
|
3280
2598
|
return this.props.ionRoute;
|
|
3281
2599
|
}
|
|
@@ -3288,8 +2606,8 @@ class NavManager extends React.PureComponent {
|
|
|
3288
2606
|
}
|
|
3289
2607
|
|
|
3290
2608
|
class ViewStacks {
|
|
3291
|
-
viewStacks = {};
|
|
3292
2609
|
constructor() {
|
|
2610
|
+
this.viewStacks = {};
|
|
3293
2611
|
this.add = this.add.bind(this);
|
|
3294
2612
|
this.clear = this.clear.bind(this);
|
|
3295
2613
|
this.getViewItemsForOutlet = this.getViewItemsForOutlet.bind(this);
|
|
@@ -3305,7 +2623,10 @@ class ViewStacks {
|
|
|
3305
2623
|
}
|
|
3306
2624
|
}
|
|
3307
2625
|
clear(outletId) {
|
|
3308
|
-
|
|
2626
|
+
// Give some time for the leaving views to transition before removing
|
|
2627
|
+
return setTimeout(() => {
|
|
2628
|
+
delete this.viewStacks[outletId];
|
|
2629
|
+
}, 500);
|
|
3309
2630
|
}
|
|
3310
2631
|
getViewItemsForOutlet(outletId) {
|
|
3311
2632
|
return this.viewStacks[outletId] || [];
|
|
@@ -3334,5 +2655,5 @@ class ViewStacks {
|
|
|
3334
2655
|
}
|
|
3335
2656
|
}
|
|
3336
2657
|
|
|
3337
|
-
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, generateId, getConfig, getPlatforms, isPlatform, setupIonicReact, useIonActionSheet, useIonAlert, useIonLoading, useIonModal, useIonPopover, useIonRouter, useIonToast, useIonViewDidEnter, useIonViewDidLeave, useIonViewWillEnter, useIonViewWillLeave, withIonLifeCycle };
|
|
2658
|
+
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, IonDivider, IonFab, IonFabButton, IonFabList, IonFooter, IonGallery, IonGalleryItem, 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 };
|
|
3338
2659
|
//# sourceMappingURL=index.js.map
|