@ionic/react 8.8.18-dev.11786108988.1fd94742 → 8.8.18-dev.11786109471.1285bcfb
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +435 -1120
- 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 +73 -0
- package/dist/types/components/react-component-lib/createComponent.d.ts +1 -1
- package/dist/types/components/react-component-lib/utils/index.d.ts +1 -1
- package/dist/types/components/routing-proxies.d.ts +14 -14
- package/dist/types/components/utils/index.d.ts +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,80 @@
|
|
|
1
1
|
import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import React, { useContext, useRef, useEffect, createElement, useState, useMemo, Fragment as Fragment$1, useCallback } from 'react';
|
|
3
|
-
import { isPlatform as isPlatform$1, getPlatforms as getPlatforms$1, componentOnReady, createAnimation, actionSheetController, alertController, toastController, modalController, popoverController, loadingController, initialize } from '@ionic/core/components';
|
|
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-fab.js';
|
|
24
|
+
import { defineCustomElement as defineCustomElement$j } from '@ionic/core/components/ion-fab-list.js';
|
|
25
|
+
import { defineCustomElement as defineCustomElement$k } from '@ionic/core/components/ion-footer.js';
|
|
26
|
+
import { defineCustomElement as defineCustomElement$l } from '@ionic/core/components/ion-grid.js';
|
|
27
|
+
import { defineCustomElement as defineCustomElement$m } from '@ionic/core/components/ion-header.js';
|
|
28
|
+
import { defineCustomElement as defineCustomElement$n } from '@ionic/core/components/ion-img.js';
|
|
29
|
+
import { defineCustomElement as defineCustomElement$o } from '@ionic/core/components/ion-infinite-scroll.js';
|
|
30
|
+
import { defineCustomElement as defineCustomElement$p } from '@ionic/core/components/ion-infinite-scroll-content.js';
|
|
31
|
+
import { defineCustomElement as defineCustomElement$q } from '@ionic/core/components/ion-input.js';
|
|
32
|
+
import { defineCustomElement as defineCustomElement$r } from '@ionic/core/components/ion-input-otp.js';
|
|
33
|
+
import { defineCustomElement as defineCustomElement$s } from '@ionic/core/components/ion-input-password-toggle.js';
|
|
34
|
+
import { defineCustomElement as defineCustomElement$t } from '@ionic/core/components/ion-item-divider.js';
|
|
35
|
+
import { defineCustomElement as defineCustomElement$u } from '@ionic/core/components/ion-item-group.js';
|
|
36
|
+
import { defineCustomElement as defineCustomElement$v } from '@ionic/core/components/ion-item-options.js';
|
|
37
|
+
import { defineCustomElement as defineCustomElement$w } from '@ionic/core/components/ion-item-sliding.js';
|
|
38
|
+
import { defineCustomElement as defineCustomElement$x } from '@ionic/core/components/ion-label.js';
|
|
39
|
+
import { defineCustomElement as defineCustomElement$y } from '@ionic/core/components/ion-list.js';
|
|
40
|
+
import { defineCustomElement as defineCustomElement$z } from '@ionic/core/components/ion-list-header.js';
|
|
41
|
+
import { defineCustomElement as defineCustomElement$A } from '@ionic/core/components/ion-menu.js';
|
|
42
|
+
import { defineCustomElement as defineCustomElement$B } from '@ionic/core/components/ion-menu-button.js';
|
|
43
|
+
import { defineCustomElement as defineCustomElement$C } from '@ionic/core/components/ion-menu-toggle.js';
|
|
44
|
+
import { defineCustomElement as defineCustomElement$1m } from '@ionic/core/components/ion-nav.js';
|
|
45
|
+
import { defineCustomElement as defineCustomElement$D } from '@ionic/core/components/ion-nav-link.js';
|
|
46
|
+
import { defineCustomElement as defineCustomElement$E } from '@ionic/core/components/ion-note.js';
|
|
47
|
+
import { defineCustomElement as defineCustomElement$F } from '@ionic/core/components/ion-picker.js';
|
|
48
|
+
import { defineCustomElement as defineCustomElement$G } from '@ionic/core/components/ion-picker-column.js';
|
|
49
|
+
import { defineCustomElement as defineCustomElement$H } from '@ionic/core/components/ion-picker-column-option.js';
|
|
50
|
+
import { defineCustomElement as defineCustomElement$I } from '@ionic/core/components/ion-progress-bar.js';
|
|
51
|
+
import { defineCustomElement as defineCustomElement$J } from '@ionic/core/components/ion-radio.js';
|
|
52
|
+
import { defineCustomElement as defineCustomElement$K } from '@ionic/core/components/ion-radio-group.js';
|
|
53
|
+
import { defineCustomElement as defineCustomElement$L } from '@ionic/core/components/ion-range.js';
|
|
54
|
+
import { defineCustomElement as defineCustomElement$M } from '@ionic/core/components/ion-refresher.js';
|
|
55
|
+
import { defineCustomElement as defineCustomElement$N } from '@ionic/core/components/ion-refresher-content.js';
|
|
56
|
+
import { defineCustomElement as defineCustomElement$O } from '@ionic/core/components/ion-reorder.js';
|
|
57
|
+
import { defineCustomElement as defineCustomElement$P } from '@ionic/core/components/ion-reorder-group.js';
|
|
58
|
+
import { defineCustomElement as defineCustomElement$Q } from '@ionic/core/components/ion-ripple-effect.js';
|
|
59
|
+
import { defineCustomElement as defineCustomElement$R } from '@ionic/core/components/ion-row.js';
|
|
60
|
+
import { defineCustomElement as defineCustomElement$S } from '@ionic/core/components/ion-searchbar.js';
|
|
61
|
+
import { defineCustomElement as defineCustomElement$T } from '@ionic/core/components/ion-segment.js';
|
|
62
|
+
import { defineCustomElement as defineCustomElement$U } from '@ionic/core/components/ion-segment-button.js';
|
|
63
|
+
import { defineCustomElement as defineCustomElement$V } from '@ionic/core/components/ion-segment-content.js';
|
|
64
|
+
import { defineCustomElement as defineCustomElement$W } from '@ionic/core/components/ion-segment-view.js';
|
|
65
|
+
import { defineCustomElement as defineCustomElement$X } from '@ionic/core/components/ion-select.js';
|
|
66
|
+
import { defineCustomElement as defineCustomElement$Y } from '@ionic/core/components/ion-select-modal.js';
|
|
67
|
+
import { defineCustomElement as defineCustomElement$Z } from '@ionic/core/components/ion-select-option.js';
|
|
68
|
+
import { defineCustomElement as defineCustomElement$_ } from '@ionic/core/components/ion-skeleton-text.js';
|
|
69
|
+
import { defineCustomElement as defineCustomElement$$ } from '@ionic/core/components/ion-spinner.js';
|
|
70
|
+
import { defineCustomElement as defineCustomElement$10 } from '@ionic/core/components/ion-split-pane.js';
|
|
71
|
+
import { defineCustomElement as defineCustomElement$11 } from '@ionic/core/components/ion-tab.js';
|
|
72
|
+
import { defineCustomElement as defineCustomElement$12 } from '@ionic/core/components/ion-text.js';
|
|
73
|
+
import { defineCustomElement as defineCustomElement$13 } from '@ionic/core/components/ion-textarea.js';
|
|
74
|
+
import { defineCustomElement as defineCustomElement$14 } from '@ionic/core/components/ion-thumbnail.js';
|
|
75
|
+
import { defineCustomElement as defineCustomElement$15 } from '@ionic/core/components/ion-title.js';
|
|
76
|
+
import { defineCustomElement as defineCustomElement$16 } from '@ionic/core/components/ion-toggle.js';
|
|
77
|
+
import { defineCustomElement as defineCustomElement$17 } from '@ionic/core/components/ion-toolbar.js';
|
|
78
78
|
import { IonBreadcrumb as IonBreadcrumb$1 } from '@ionic/core/components/ion-breadcrumb.js';
|
|
79
79
|
import { IonButton as IonButton$1 } from '@ionic/core/components/ion-button.js';
|
|
80
80
|
import { IonCard as IonCard$1 } from '@ionic/core/components/ion-card.js';
|
|
@@ -83,19 +83,19 @@ import { IonItemOption as IonItemOption$1 } from '@ionic/core/components/ion-ite
|
|
|
83
83
|
import { IonItem as IonItem$1 } from '@ionic/core/components/ion-item.js';
|
|
84
84
|
import { IonRouterLink as IonRouterLink$1 } from '@ionic/core/components/ion-router-link.js';
|
|
85
85
|
import { defineCustomElement as defineCustomElement$18 } from '@ionic/core/components/ion-alert.js';
|
|
86
|
-
import ReactDOM, { createPortal } from 'react-dom';
|
|
87
86
|
import { defineCustomElement as defineCustomElement$19 } from '@ionic/core/components/ion-loading.js';
|
|
88
87
|
import { defineCustomElement as defineCustomElement$1a } from '@ionic/core/components/ion-toast.js';
|
|
89
|
-
import { defineCustomElement as defineCustomElement$1b } from '@ionic/core/components/ion-
|
|
90
|
-
import { defineCustomElement as defineCustomElement$1c } from '@ionic/core/components/ion-
|
|
91
|
-
import { defineCustomElement as defineCustomElement$1d } from '@ionic/core/components/ion-
|
|
92
|
-
import { defineCustomElement as defineCustomElement$
|
|
93
|
-
import { defineCustomElement as defineCustomElement$
|
|
94
|
-
import { defineCustomElement as defineCustomElement$1i } from '@ionic/core/components/ion-
|
|
95
|
-
import { defineCustomElement as defineCustomElement$
|
|
96
|
-
import { defineCustomElement as defineCustomElement$
|
|
97
|
-
import { defineCustomElement as defineCustomElement$
|
|
98
|
-
import { defineCustomElement as defineCustomElement$
|
|
88
|
+
import { defineCustomElement as defineCustomElement$1b } from '@ionic/core/components/ion-picker-legacy.js';
|
|
89
|
+
import { defineCustomElement as defineCustomElement$1c } from '@ionic/core/components/ion-action-sheet.js';
|
|
90
|
+
import { defineCustomElement as defineCustomElement$1d } from '@ionic/core/components/ion-modal.js';
|
|
91
|
+
import { defineCustomElement as defineCustomElement$1e } from '@ionic/core/components/ion-popover.js';
|
|
92
|
+
import { defineCustomElement as defineCustomElement$1k } from '@ionic/core/components/ion-app.js';
|
|
93
|
+
import { defineCustomElement as defineCustomElement$1i } from '@ionic/core/components/ion-back-button.js';
|
|
94
|
+
import { defineCustomElement as defineCustomElement$1j } from '@ionic/core/components/ion-router-outlet.js';
|
|
95
|
+
import { defineCustomElement as defineCustomElement$1g } from '@ionic/core/components/ion-tab-bar.js';
|
|
96
|
+
import { defineCustomElement as defineCustomElement$1f } from '@ionic/core/components/ion-tab-button.js';
|
|
97
|
+
import { defineCustomElement as defineCustomElement$1h } from '@ionic/core/components/ion-tabs.js';
|
|
98
|
+
import { defineCustomElement as defineCustomElement$1l } from 'ionicons/components/ion-icon.js';
|
|
99
99
|
|
|
100
100
|
const IonLifeCycleContext = /*@__PURE__*/ React.createContext({
|
|
101
101
|
onIonViewWillEnter: () => {
|
|
@@ -136,15 +136,16 @@ const IonLifeCycleContext = /*@__PURE__*/ React.createContext({
|
|
|
136
136
|
},
|
|
137
137
|
});
|
|
138
138
|
const DefaultIonLifeCycleContext = class {
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
139
|
+
constructor() {
|
|
140
|
+
this.ionViewWillEnterCallbacks = [];
|
|
141
|
+
this.ionViewDidEnterCallbacks = [];
|
|
142
|
+
this.ionViewWillLeaveCallbacks = [];
|
|
143
|
+
this.ionViewDidLeaveCallbacks = [];
|
|
144
|
+
this.ionViewWillEnterDestructorCallbacks = [];
|
|
145
|
+
this.ionViewDidEnterDestructorCallbacks = [];
|
|
146
|
+
this.ionViewWillLeaveDestructorCallbacks = [];
|
|
147
|
+
this.ionViewDidLeaveDestructorCallbacks = [];
|
|
148
|
+
}
|
|
148
149
|
onIonViewWillEnter(callback) {
|
|
149
150
|
if (callback.id) {
|
|
150
151
|
const index = this.ionViewWillEnterCallbacks.findIndex((x) => x.id === callback.id);
|
|
@@ -293,9 +294,9 @@ const DefaultIonLifeCycleContext = class {
|
|
|
293
294
|
// TODO(FW-2959): types
|
|
294
295
|
const withIonLifeCycle = (WrappedComponent) => {
|
|
295
296
|
return class IonLifeCycle extends React.Component {
|
|
296
|
-
componentRef = React.createRef();
|
|
297
297
|
constructor(props) {
|
|
298
298
|
super(props);
|
|
299
|
+
this.componentRef = React.createRef();
|
|
299
300
|
}
|
|
300
301
|
componentDidMount() {
|
|
301
302
|
const element = this.componentRef.current;
|
|
@@ -379,7 +380,9 @@ const useIonViewDidLeave = (callback, deps = []) => {
|
|
|
379
380
|
};
|
|
380
381
|
|
|
381
382
|
const NavContext = /*@__PURE__*/ React.createContext({
|
|
383
|
+
getIonRedirect: () => undefined,
|
|
382
384
|
getIonRoute: () => undefined,
|
|
385
|
+
getPageManager: () => undefined,
|
|
383
386
|
getStackManager: () => undefined,
|
|
384
387
|
goBack: (route) => {
|
|
385
388
|
if (typeof window !== 'undefined') {
|
|
@@ -411,651 +414,6 @@ const NavContext = /*@__PURE__*/ React.createContext({
|
|
|
411
414
|
},
|
|
412
415
|
});
|
|
413
416
|
|
|
414
|
-
const IonAccordion = /*@__PURE__*/ createComponent({
|
|
415
|
-
tagName: 'ion-accordion',
|
|
416
|
-
elementClass: IonAccordion$1,
|
|
417
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
418
|
-
react: React,
|
|
419
|
-
events: {},
|
|
420
|
-
defineCustomElement: defineCustomElement$1
|
|
421
|
-
});
|
|
422
|
-
const IonAccordionGroup = /*@__PURE__*/ createComponent({
|
|
423
|
-
tagName: 'ion-accordion-group',
|
|
424
|
-
elementClass: IonAccordionGroup$1,
|
|
425
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
426
|
-
react: React,
|
|
427
|
-
events: { onIonChange: 'ionChange' },
|
|
428
|
-
defineCustomElement: defineCustomElement$2
|
|
429
|
-
});
|
|
430
|
-
const IonAvatar = /*@__PURE__*/ createComponent({
|
|
431
|
-
tagName: 'ion-avatar',
|
|
432
|
-
elementClass: IonAvatar$1,
|
|
433
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
434
|
-
react: React,
|
|
435
|
-
events: {},
|
|
436
|
-
defineCustomElement: defineCustomElement$3
|
|
437
|
-
});
|
|
438
|
-
const IonBackdrop = /*@__PURE__*/ createComponent({
|
|
439
|
-
tagName: 'ion-backdrop',
|
|
440
|
-
elementClass: IonBackdrop$1,
|
|
441
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
442
|
-
react: React,
|
|
443
|
-
events: { onIonBackdropTap: 'ionBackdropTap' },
|
|
444
|
-
defineCustomElement: defineCustomElement$4
|
|
445
|
-
});
|
|
446
|
-
const IonBadge = /*@__PURE__*/ createComponent({
|
|
447
|
-
tagName: 'ion-badge',
|
|
448
|
-
elementClass: IonBadge$1,
|
|
449
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
450
|
-
react: React,
|
|
451
|
-
events: {},
|
|
452
|
-
defineCustomElement: defineCustomElement$5
|
|
453
|
-
});
|
|
454
|
-
const IonBreadcrumbs = /*@__PURE__*/ createComponent({
|
|
455
|
-
tagName: 'ion-breadcrumbs',
|
|
456
|
-
elementClass: IonBreadcrumbs$1,
|
|
457
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
458
|
-
react: React,
|
|
459
|
-
events: { onIonCollapsedClick: 'ionCollapsedClick' },
|
|
460
|
-
defineCustomElement: defineCustomElement$6
|
|
461
|
-
});
|
|
462
|
-
const IonButtons = /*@__PURE__*/ createComponent({
|
|
463
|
-
tagName: 'ion-buttons',
|
|
464
|
-
elementClass: IonButtons$1,
|
|
465
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
466
|
-
react: React,
|
|
467
|
-
events: {},
|
|
468
|
-
defineCustomElement: defineCustomElement$7
|
|
469
|
-
});
|
|
470
|
-
const IonCardContent = /*@__PURE__*/ createComponent({
|
|
471
|
-
tagName: 'ion-card-content',
|
|
472
|
-
elementClass: IonCardContent$1,
|
|
473
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
474
|
-
react: React,
|
|
475
|
-
events: {},
|
|
476
|
-
defineCustomElement: defineCustomElement$8
|
|
477
|
-
});
|
|
478
|
-
const IonCardHeader = /*@__PURE__*/ createComponent({
|
|
479
|
-
tagName: 'ion-card-header',
|
|
480
|
-
elementClass: IonCardHeader$1,
|
|
481
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
482
|
-
react: React,
|
|
483
|
-
events: {},
|
|
484
|
-
defineCustomElement: defineCustomElement$9
|
|
485
|
-
});
|
|
486
|
-
const IonCardSubtitle = /*@__PURE__*/ createComponent({
|
|
487
|
-
tagName: 'ion-card-subtitle',
|
|
488
|
-
elementClass: IonCardSubtitle$1,
|
|
489
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
490
|
-
react: React,
|
|
491
|
-
events: {},
|
|
492
|
-
defineCustomElement: defineCustomElement$a
|
|
493
|
-
});
|
|
494
|
-
const IonCardTitle = /*@__PURE__*/ createComponent({
|
|
495
|
-
tagName: 'ion-card-title',
|
|
496
|
-
elementClass: IonCardTitle$1,
|
|
497
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
498
|
-
react: React,
|
|
499
|
-
events: {},
|
|
500
|
-
defineCustomElement: defineCustomElement$b
|
|
501
|
-
});
|
|
502
|
-
const IonCheckbox = /*@__PURE__*/ createComponent({
|
|
503
|
-
tagName: 'ion-checkbox',
|
|
504
|
-
elementClass: IonCheckbox$1,
|
|
505
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
506
|
-
react: React,
|
|
507
|
-
events: {
|
|
508
|
-
onIonChange: 'ionChange',
|
|
509
|
-
onIonFocus: 'ionFocus',
|
|
510
|
-
onIonBlur: 'ionBlur'
|
|
511
|
-
},
|
|
512
|
-
defineCustomElement: defineCustomElement$c
|
|
513
|
-
});
|
|
514
|
-
const IonChip = /*@__PURE__*/ createComponent({
|
|
515
|
-
tagName: 'ion-chip',
|
|
516
|
-
elementClass: IonChip$1,
|
|
517
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
518
|
-
react: React,
|
|
519
|
-
events: {},
|
|
520
|
-
defineCustomElement: defineCustomElement$d
|
|
521
|
-
});
|
|
522
|
-
const IonCol = /*@__PURE__*/ createComponent({
|
|
523
|
-
tagName: 'ion-col',
|
|
524
|
-
elementClass: IonCol$1,
|
|
525
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
526
|
-
react: React,
|
|
527
|
-
events: {},
|
|
528
|
-
defineCustomElement: defineCustomElement$e
|
|
529
|
-
});
|
|
530
|
-
const IonContent = /*@__PURE__*/ createComponent({
|
|
531
|
-
tagName: 'ion-content',
|
|
532
|
-
elementClass: IonContent$1,
|
|
533
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
534
|
-
react: React,
|
|
535
|
-
events: {
|
|
536
|
-
onIonScrollStart: 'ionScrollStart',
|
|
537
|
-
onIonScroll: 'ionScroll',
|
|
538
|
-
onIonScrollEnd: 'ionScrollEnd'
|
|
539
|
-
},
|
|
540
|
-
defineCustomElement: defineCustomElement$f
|
|
541
|
-
});
|
|
542
|
-
const IonDatetime = /*@__PURE__*/ createComponent({
|
|
543
|
-
tagName: 'ion-datetime',
|
|
544
|
-
elementClass: IonDatetime$1,
|
|
545
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
546
|
-
react: React,
|
|
547
|
-
events: {
|
|
548
|
-
onIonCancel: 'ionCancel',
|
|
549
|
-
onIonChange: 'ionChange',
|
|
550
|
-
onIonFocus: 'ionFocus',
|
|
551
|
-
onIonBlur: 'ionBlur'
|
|
552
|
-
},
|
|
553
|
-
defineCustomElement: defineCustomElement$g
|
|
554
|
-
});
|
|
555
|
-
const IonDatetimeButton = /*@__PURE__*/ createComponent({
|
|
556
|
-
tagName: 'ion-datetime-button',
|
|
557
|
-
elementClass: IonDatetimeButton$1,
|
|
558
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
559
|
-
react: React,
|
|
560
|
-
events: {},
|
|
561
|
-
defineCustomElement: defineCustomElement$h
|
|
562
|
-
});
|
|
563
|
-
const IonFab = /*@__PURE__*/ createComponent({
|
|
564
|
-
tagName: 'ion-fab',
|
|
565
|
-
elementClass: IonFab$1,
|
|
566
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
567
|
-
react: React,
|
|
568
|
-
events: {},
|
|
569
|
-
defineCustomElement: defineCustomElement$i
|
|
570
|
-
});
|
|
571
|
-
const IonFabList = /*@__PURE__*/ createComponent({
|
|
572
|
-
tagName: 'ion-fab-list',
|
|
573
|
-
elementClass: IonFabList$1,
|
|
574
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
575
|
-
react: React,
|
|
576
|
-
events: {},
|
|
577
|
-
defineCustomElement: defineCustomElement$j
|
|
578
|
-
});
|
|
579
|
-
const IonFooter = /*@__PURE__*/ createComponent({
|
|
580
|
-
tagName: 'ion-footer',
|
|
581
|
-
elementClass: IonFooter$1,
|
|
582
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
583
|
-
react: React,
|
|
584
|
-
events: {},
|
|
585
|
-
defineCustomElement: defineCustomElement$k
|
|
586
|
-
});
|
|
587
|
-
const IonGrid = /*@__PURE__*/ createComponent({
|
|
588
|
-
tagName: 'ion-grid',
|
|
589
|
-
elementClass: IonGrid$1,
|
|
590
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
591
|
-
react: React,
|
|
592
|
-
events: {},
|
|
593
|
-
defineCustomElement: defineCustomElement$l
|
|
594
|
-
});
|
|
595
|
-
const IonHeader = /*@__PURE__*/ createComponent({
|
|
596
|
-
tagName: 'ion-header',
|
|
597
|
-
elementClass: IonHeader$1,
|
|
598
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
599
|
-
react: React,
|
|
600
|
-
events: {},
|
|
601
|
-
defineCustomElement: defineCustomElement$m
|
|
602
|
-
});
|
|
603
|
-
const IonImg = /*@__PURE__*/ createComponent({
|
|
604
|
-
tagName: 'ion-img',
|
|
605
|
-
elementClass: IonImg$1,
|
|
606
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
607
|
-
react: React,
|
|
608
|
-
events: {
|
|
609
|
-
onIonImgWillLoad: 'ionImgWillLoad',
|
|
610
|
-
onIonImgDidLoad: 'ionImgDidLoad',
|
|
611
|
-
onIonError: 'ionError'
|
|
612
|
-
},
|
|
613
|
-
defineCustomElement: defineCustomElement$n
|
|
614
|
-
});
|
|
615
|
-
const IonInfiniteScroll = /*@__PURE__*/ createComponent({
|
|
616
|
-
tagName: 'ion-infinite-scroll',
|
|
617
|
-
elementClass: IonInfiniteScroll$1,
|
|
618
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
619
|
-
react: React,
|
|
620
|
-
events: { onIonInfinite: 'ionInfinite' },
|
|
621
|
-
defineCustomElement: defineCustomElement$o
|
|
622
|
-
});
|
|
623
|
-
const IonInfiniteScrollContent = /*@__PURE__*/ createComponent({
|
|
624
|
-
tagName: 'ion-infinite-scroll-content',
|
|
625
|
-
elementClass: IonInfiniteScrollContent$1,
|
|
626
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
627
|
-
react: React,
|
|
628
|
-
events: {},
|
|
629
|
-
defineCustomElement: defineCustomElement$p
|
|
630
|
-
});
|
|
631
|
-
const IonInput = /*@__PURE__*/ createComponent({
|
|
632
|
-
tagName: 'ion-input',
|
|
633
|
-
elementClass: IonInput$1,
|
|
634
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
635
|
-
react: React,
|
|
636
|
-
events: {
|
|
637
|
-
onIonInput: 'ionInput',
|
|
638
|
-
onIonChange: 'ionChange',
|
|
639
|
-
onIonBlur: 'ionBlur',
|
|
640
|
-
onIonFocus: 'ionFocus'
|
|
641
|
-
},
|
|
642
|
-
defineCustomElement: defineCustomElement$q
|
|
643
|
-
});
|
|
644
|
-
const IonInputOtp = /*@__PURE__*/ createComponent({
|
|
645
|
-
tagName: 'ion-input-otp',
|
|
646
|
-
elementClass: IonInputOtp$1,
|
|
647
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
648
|
-
react: React,
|
|
649
|
-
events: {
|
|
650
|
-
onIonInput: 'ionInput',
|
|
651
|
-
onIonChange: 'ionChange',
|
|
652
|
-
onIonComplete: 'ionComplete',
|
|
653
|
-
onIonBlur: 'ionBlur',
|
|
654
|
-
onIonFocus: 'ionFocus'
|
|
655
|
-
},
|
|
656
|
-
defineCustomElement: defineCustomElement$r
|
|
657
|
-
});
|
|
658
|
-
const IonInputPasswordToggle = /*@__PURE__*/ createComponent({
|
|
659
|
-
tagName: 'ion-input-password-toggle',
|
|
660
|
-
elementClass: IonInputPasswordToggle$1,
|
|
661
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
662
|
-
react: React,
|
|
663
|
-
events: {},
|
|
664
|
-
defineCustomElement: defineCustomElement$s
|
|
665
|
-
});
|
|
666
|
-
const IonItemDivider = /*@__PURE__*/ createComponent({
|
|
667
|
-
tagName: 'ion-item-divider',
|
|
668
|
-
elementClass: IonItemDivider$1,
|
|
669
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
670
|
-
react: React,
|
|
671
|
-
events: {},
|
|
672
|
-
defineCustomElement: defineCustomElement$t
|
|
673
|
-
});
|
|
674
|
-
const IonItemGroup = /*@__PURE__*/ createComponent({
|
|
675
|
-
tagName: 'ion-item-group',
|
|
676
|
-
elementClass: IonItemGroup$1,
|
|
677
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
678
|
-
react: React,
|
|
679
|
-
events: {},
|
|
680
|
-
defineCustomElement: defineCustomElement$u
|
|
681
|
-
});
|
|
682
|
-
const IonItemOptions = /*@__PURE__*/ createComponent({
|
|
683
|
-
tagName: 'ion-item-options',
|
|
684
|
-
elementClass: IonItemOptions$1,
|
|
685
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
686
|
-
react: React,
|
|
687
|
-
events: { onIonSwipe: 'ionSwipe' },
|
|
688
|
-
defineCustomElement: defineCustomElement$v
|
|
689
|
-
});
|
|
690
|
-
const IonItemSliding = /*@__PURE__*/ createComponent({
|
|
691
|
-
tagName: 'ion-item-sliding',
|
|
692
|
-
elementClass: IonItemSliding$1,
|
|
693
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
694
|
-
react: React,
|
|
695
|
-
events: { onIonDrag: 'ionDrag' },
|
|
696
|
-
defineCustomElement: defineCustomElement$w
|
|
697
|
-
});
|
|
698
|
-
const IonLabel = /*@__PURE__*/ createComponent({
|
|
699
|
-
tagName: 'ion-label',
|
|
700
|
-
elementClass: IonLabel$1,
|
|
701
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
702
|
-
react: React,
|
|
703
|
-
events: {},
|
|
704
|
-
defineCustomElement: defineCustomElement$x
|
|
705
|
-
});
|
|
706
|
-
const IonList = /*@__PURE__*/ createComponent({
|
|
707
|
-
tagName: 'ion-list',
|
|
708
|
-
elementClass: IonList$1,
|
|
709
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
710
|
-
react: React,
|
|
711
|
-
events: {},
|
|
712
|
-
defineCustomElement: defineCustomElement$y
|
|
713
|
-
});
|
|
714
|
-
const IonListHeader = /*@__PURE__*/ createComponent({
|
|
715
|
-
tagName: 'ion-list-header',
|
|
716
|
-
elementClass: IonListHeader$1,
|
|
717
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
718
|
-
react: React,
|
|
719
|
-
events: {},
|
|
720
|
-
defineCustomElement: defineCustomElement$z
|
|
721
|
-
});
|
|
722
|
-
const IonMenu = /*@__PURE__*/ createComponent({
|
|
723
|
-
tagName: 'ion-menu',
|
|
724
|
-
elementClass: IonMenu$1,
|
|
725
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
726
|
-
react: React,
|
|
727
|
-
events: {
|
|
728
|
-
onIonWillOpen: 'ionWillOpen',
|
|
729
|
-
onIonWillClose: 'ionWillClose',
|
|
730
|
-
onIonDidOpen: 'ionDidOpen',
|
|
731
|
-
onIonDidClose: 'ionDidClose'
|
|
732
|
-
},
|
|
733
|
-
defineCustomElement: defineCustomElement$A
|
|
734
|
-
});
|
|
735
|
-
const IonMenuButton = /*@__PURE__*/ createComponent({
|
|
736
|
-
tagName: 'ion-menu-button',
|
|
737
|
-
elementClass: IonMenuButton$1,
|
|
738
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
739
|
-
react: React,
|
|
740
|
-
events: {},
|
|
741
|
-
defineCustomElement: defineCustomElement$B
|
|
742
|
-
});
|
|
743
|
-
const IonMenuToggle = /*@__PURE__*/ createComponent({
|
|
744
|
-
tagName: 'ion-menu-toggle',
|
|
745
|
-
elementClass: IonMenuToggle$1,
|
|
746
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
747
|
-
react: React,
|
|
748
|
-
events: {},
|
|
749
|
-
defineCustomElement: defineCustomElement$C
|
|
750
|
-
});
|
|
751
|
-
const IonNavLink = /*@__PURE__*/ createComponent({
|
|
752
|
-
tagName: 'ion-nav-link',
|
|
753
|
-
elementClass: IonNavLink$1,
|
|
754
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
755
|
-
react: React,
|
|
756
|
-
events: {},
|
|
757
|
-
defineCustomElement: defineCustomElement$D
|
|
758
|
-
});
|
|
759
|
-
const IonNote = /*@__PURE__*/ createComponent({
|
|
760
|
-
tagName: 'ion-note',
|
|
761
|
-
elementClass: IonNote$1,
|
|
762
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
763
|
-
react: React,
|
|
764
|
-
events: {},
|
|
765
|
-
defineCustomElement: defineCustomElement$E
|
|
766
|
-
});
|
|
767
|
-
const IonPicker = /*@__PURE__*/ createComponent({
|
|
768
|
-
tagName: 'ion-picker',
|
|
769
|
-
elementClass: IonPicker$1,
|
|
770
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
771
|
-
react: React,
|
|
772
|
-
events: {},
|
|
773
|
-
defineCustomElement: defineCustomElement$F
|
|
774
|
-
});
|
|
775
|
-
const IonPickerColumn = /*@__PURE__*/ createComponent({
|
|
776
|
-
tagName: 'ion-picker-column',
|
|
777
|
-
elementClass: IonPickerColumn$1,
|
|
778
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
779
|
-
react: React,
|
|
780
|
-
events: { onIonChange: 'ionChange' },
|
|
781
|
-
defineCustomElement: defineCustomElement$G
|
|
782
|
-
});
|
|
783
|
-
const IonPickerColumnOption = /*@__PURE__*/ createComponent({
|
|
784
|
-
tagName: 'ion-picker-column-option',
|
|
785
|
-
elementClass: IonPickerColumnOption$1,
|
|
786
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
787
|
-
react: React,
|
|
788
|
-
events: {},
|
|
789
|
-
defineCustomElement: defineCustomElement$H
|
|
790
|
-
});
|
|
791
|
-
const IonProgressBar = /*@__PURE__*/ createComponent({
|
|
792
|
-
tagName: 'ion-progress-bar',
|
|
793
|
-
elementClass: IonProgressBar$1,
|
|
794
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
795
|
-
react: React,
|
|
796
|
-
events: {},
|
|
797
|
-
defineCustomElement: defineCustomElement$I
|
|
798
|
-
});
|
|
799
|
-
const IonRadio = /*@__PURE__*/ createComponent({
|
|
800
|
-
tagName: 'ion-radio',
|
|
801
|
-
elementClass: IonRadio$1,
|
|
802
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
803
|
-
react: React,
|
|
804
|
-
events: {
|
|
805
|
-
onIonFocus: 'ionFocus',
|
|
806
|
-
onIonBlur: 'ionBlur'
|
|
807
|
-
},
|
|
808
|
-
defineCustomElement: defineCustomElement$J
|
|
809
|
-
});
|
|
810
|
-
const IonRadioGroup = /*@__PURE__*/ createComponent({
|
|
811
|
-
tagName: 'ion-radio-group',
|
|
812
|
-
elementClass: IonRadioGroup$1,
|
|
813
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
814
|
-
react: React,
|
|
815
|
-
events: { onIonChange: 'ionChange' },
|
|
816
|
-
defineCustomElement: defineCustomElement$K
|
|
817
|
-
});
|
|
818
|
-
const IonRange = /*@__PURE__*/ createComponent({
|
|
819
|
-
tagName: 'ion-range',
|
|
820
|
-
elementClass: IonRange$1,
|
|
821
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
822
|
-
react: React,
|
|
823
|
-
events: {
|
|
824
|
-
onIonChange: 'ionChange',
|
|
825
|
-
onIonInput: 'ionInput',
|
|
826
|
-
onIonFocus: 'ionFocus',
|
|
827
|
-
onIonBlur: 'ionBlur',
|
|
828
|
-
onIonKnobMoveStart: 'ionKnobMoveStart',
|
|
829
|
-
onIonKnobMoveEnd: 'ionKnobMoveEnd'
|
|
830
|
-
},
|
|
831
|
-
defineCustomElement: defineCustomElement$L
|
|
832
|
-
});
|
|
833
|
-
const IonRefresher = /*@__PURE__*/ createComponent({
|
|
834
|
-
tagName: 'ion-refresher',
|
|
835
|
-
elementClass: IonRefresher$1,
|
|
836
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
837
|
-
react: React,
|
|
838
|
-
events: {
|
|
839
|
-
onIonRefresh: 'ionRefresh',
|
|
840
|
-
onIonPull: 'ionPull',
|
|
841
|
-
onIonStart: 'ionStart',
|
|
842
|
-
onIonPullStart: 'ionPullStart',
|
|
843
|
-
onIonPullEnd: 'ionPullEnd'
|
|
844
|
-
},
|
|
845
|
-
defineCustomElement: defineCustomElement$M
|
|
846
|
-
});
|
|
847
|
-
const IonRefresherContent = /*@__PURE__*/ createComponent({
|
|
848
|
-
tagName: 'ion-refresher-content',
|
|
849
|
-
elementClass: IonRefresherContent$1,
|
|
850
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
851
|
-
react: React,
|
|
852
|
-
events: {},
|
|
853
|
-
defineCustomElement: defineCustomElement$N
|
|
854
|
-
});
|
|
855
|
-
const IonReorder = /*@__PURE__*/ createComponent({
|
|
856
|
-
tagName: 'ion-reorder',
|
|
857
|
-
elementClass: IonReorder$1,
|
|
858
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
859
|
-
react: React,
|
|
860
|
-
events: {},
|
|
861
|
-
defineCustomElement: defineCustomElement$O
|
|
862
|
-
});
|
|
863
|
-
const IonReorderGroup = /*@__PURE__*/ createComponent({
|
|
864
|
-
tagName: 'ion-reorder-group',
|
|
865
|
-
elementClass: IonReorderGroup$1,
|
|
866
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
867
|
-
react: React,
|
|
868
|
-
events: {
|
|
869
|
-
onIonItemReorder: 'ionItemReorder',
|
|
870
|
-
onIonReorderStart: 'ionReorderStart',
|
|
871
|
-
onIonReorderMove: 'ionReorderMove',
|
|
872
|
-
onIonReorderEnd: 'ionReorderEnd'
|
|
873
|
-
},
|
|
874
|
-
defineCustomElement: defineCustomElement$P
|
|
875
|
-
});
|
|
876
|
-
const IonRippleEffect = /*@__PURE__*/ createComponent({
|
|
877
|
-
tagName: 'ion-ripple-effect',
|
|
878
|
-
elementClass: IonRippleEffect$1,
|
|
879
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
880
|
-
react: React,
|
|
881
|
-
events: {},
|
|
882
|
-
defineCustomElement: defineCustomElement$Q
|
|
883
|
-
});
|
|
884
|
-
const IonRow = /*@__PURE__*/ createComponent({
|
|
885
|
-
tagName: 'ion-row',
|
|
886
|
-
elementClass: IonRow$1,
|
|
887
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
888
|
-
react: React,
|
|
889
|
-
events: {},
|
|
890
|
-
defineCustomElement: defineCustomElement$R
|
|
891
|
-
});
|
|
892
|
-
const IonSearchbar = /*@__PURE__*/ createComponent({
|
|
893
|
-
tagName: 'ion-searchbar',
|
|
894
|
-
elementClass: IonSearchbar$1,
|
|
895
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
896
|
-
react: React,
|
|
897
|
-
events: {
|
|
898
|
-
onIonInput: 'ionInput',
|
|
899
|
-
onIonChange: 'ionChange',
|
|
900
|
-
onIonCancel: 'ionCancel',
|
|
901
|
-
onIonClear: 'ionClear',
|
|
902
|
-
onIonBlur: 'ionBlur',
|
|
903
|
-
onIonFocus: 'ionFocus'
|
|
904
|
-
},
|
|
905
|
-
defineCustomElement: defineCustomElement$S
|
|
906
|
-
});
|
|
907
|
-
const IonSegment = /*@__PURE__*/ createComponent({
|
|
908
|
-
tagName: 'ion-segment',
|
|
909
|
-
elementClass: IonSegment$1,
|
|
910
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
911
|
-
react: React,
|
|
912
|
-
events: { onIonChange: 'ionChange' },
|
|
913
|
-
defineCustomElement: defineCustomElement$T
|
|
914
|
-
});
|
|
915
|
-
const IonSegmentButton = /*@__PURE__*/ createComponent({
|
|
916
|
-
tagName: 'ion-segment-button',
|
|
917
|
-
elementClass: IonSegmentButton$1,
|
|
918
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
919
|
-
react: React,
|
|
920
|
-
events: {},
|
|
921
|
-
defineCustomElement: defineCustomElement$U
|
|
922
|
-
});
|
|
923
|
-
const IonSegmentContent = /*@__PURE__*/ createComponent({
|
|
924
|
-
tagName: 'ion-segment-content',
|
|
925
|
-
elementClass: IonSegmentContent$1,
|
|
926
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
927
|
-
react: React,
|
|
928
|
-
events: {},
|
|
929
|
-
defineCustomElement: defineCustomElement$V
|
|
930
|
-
});
|
|
931
|
-
const IonSegmentView = /*@__PURE__*/ createComponent({
|
|
932
|
-
tagName: 'ion-segment-view',
|
|
933
|
-
elementClass: IonSegmentView$1,
|
|
934
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
935
|
-
react: React,
|
|
936
|
-
events: { onIonSegmentViewScroll: 'ionSegmentViewScroll' },
|
|
937
|
-
defineCustomElement: defineCustomElement$W
|
|
938
|
-
});
|
|
939
|
-
const IonSelect = /*@__PURE__*/ createComponent({
|
|
940
|
-
tagName: 'ion-select',
|
|
941
|
-
elementClass: IonSelect$1,
|
|
942
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
943
|
-
react: React,
|
|
944
|
-
events: {
|
|
945
|
-
onIonChange: 'ionChange',
|
|
946
|
-
onIonCancel: 'ionCancel',
|
|
947
|
-
onIonDismiss: 'ionDismiss',
|
|
948
|
-
onIonFocus: 'ionFocus',
|
|
949
|
-
onIonBlur: 'ionBlur'
|
|
950
|
-
},
|
|
951
|
-
defineCustomElement: defineCustomElement$X
|
|
952
|
-
});
|
|
953
|
-
const IonSelectModal = /*@__PURE__*/ createComponent({
|
|
954
|
-
tagName: 'ion-select-modal',
|
|
955
|
-
elementClass: IonSelectModal$1,
|
|
956
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
957
|
-
react: React,
|
|
958
|
-
events: {},
|
|
959
|
-
defineCustomElement: defineCustomElement$Y
|
|
960
|
-
});
|
|
961
|
-
const IonSelectOption = /*@__PURE__*/ createComponent({
|
|
962
|
-
tagName: 'ion-select-option',
|
|
963
|
-
elementClass: IonSelectOption$1,
|
|
964
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
965
|
-
react: React,
|
|
966
|
-
events: {},
|
|
967
|
-
defineCustomElement: defineCustomElement$Z
|
|
968
|
-
});
|
|
969
|
-
const IonSkeletonText = /*@__PURE__*/ createComponent({
|
|
970
|
-
tagName: 'ion-skeleton-text',
|
|
971
|
-
elementClass: IonSkeletonText$1,
|
|
972
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
973
|
-
react: React,
|
|
974
|
-
events: {},
|
|
975
|
-
defineCustomElement: defineCustomElement$_
|
|
976
|
-
});
|
|
977
|
-
const IonSpinner = /*@__PURE__*/ createComponent({
|
|
978
|
-
tagName: 'ion-spinner',
|
|
979
|
-
elementClass: IonSpinner$1,
|
|
980
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
981
|
-
react: React,
|
|
982
|
-
events: {},
|
|
983
|
-
defineCustomElement: defineCustomElement$$
|
|
984
|
-
});
|
|
985
|
-
const IonSplitPane = /*@__PURE__*/ createComponent({
|
|
986
|
-
tagName: 'ion-split-pane',
|
|
987
|
-
elementClass: IonSplitPane$1,
|
|
988
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
989
|
-
react: React,
|
|
990
|
-
events: { onIonSplitPaneVisible: 'ionSplitPaneVisible' },
|
|
991
|
-
defineCustomElement: defineCustomElement$10
|
|
992
|
-
});
|
|
993
|
-
const IonTab = /*@__PURE__*/ createComponent({
|
|
994
|
-
tagName: 'ion-tab',
|
|
995
|
-
elementClass: IonTab$1,
|
|
996
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
997
|
-
react: React,
|
|
998
|
-
events: {},
|
|
999
|
-
defineCustomElement: defineCustomElement$11
|
|
1000
|
-
});
|
|
1001
|
-
const IonText = /*@__PURE__*/ createComponent({
|
|
1002
|
-
tagName: 'ion-text',
|
|
1003
|
-
elementClass: IonText$1,
|
|
1004
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
1005
|
-
react: React,
|
|
1006
|
-
events: {},
|
|
1007
|
-
defineCustomElement: defineCustomElement$12
|
|
1008
|
-
});
|
|
1009
|
-
const IonTextarea = /*@__PURE__*/ createComponent({
|
|
1010
|
-
tagName: 'ion-textarea',
|
|
1011
|
-
elementClass: IonTextarea$1,
|
|
1012
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
1013
|
-
react: React,
|
|
1014
|
-
events: {
|
|
1015
|
-
onIonChange: 'ionChange',
|
|
1016
|
-
onIonInput: 'ionInput',
|
|
1017
|
-
onIonBlur: 'ionBlur',
|
|
1018
|
-
onIonFocus: 'ionFocus'
|
|
1019
|
-
},
|
|
1020
|
-
defineCustomElement: defineCustomElement$13
|
|
1021
|
-
});
|
|
1022
|
-
const IonThumbnail = /*@__PURE__*/ createComponent({
|
|
1023
|
-
tagName: 'ion-thumbnail',
|
|
1024
|
-
elementClass: IonThumbnail$1,
|
|
1025
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
1026
|
-
react: React,
|
|
1027
|
-
events: {},
|
|
1028
|
-
defineCustomElement: defineCustomElement$14
|
|
1029
|
-
});
|
|
1030
|
-
const IonTitle = /*@__PURE__*/ createComponent({
|
|
1031
|
-
tagName: 'ion-title',
|
|
1032
|
-
elementClass: IonTitle$1,
|
|
1033
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
1034
|
-
react: React,
|
|
1035
|
-
events: {},
|
|
1036
|
-
defineCustomElement: defineCustomElement$15
|
|
1037
|
-
});
|
|
1038
|
-
const IonToggle = /*@__PURE__*/ createComponent({
|
|
1039
|
-
tagName: 'ion-toggle',
|
|
1040
|
-
elementClass: IonToggle$1,
|
|
1041
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
1042
|
-
react: React,
|
|
1043
|
-
events: {
|
|
1044
|
-
onIonChange: 'ionChange',
|
|
1045
|
-
onIonFocus: 'ionFocus',
|
|
1046
|
-
onIonBlur: 'ionBlur'
|
|
1047
|
-
},
|
|
1048
|
-
defineCustomElement: defineCustomElement$16
|
|
1049
|
-
});
|
|
1050
|
-
const IonToolbar = /*@__PURE__*/ createComponent({
|
|
1051
|
-
tagName: 'ion-toolbar',
|
|
1052
|
-
elementClass: IonToolbar$1,
|
|
1053
|
-
// @ts-ignore - ignore potential React type mismatches between the Stencil Output Target and your project.
|
|
1054
|
-
react: React,
|
|
1055
|
-
events: {},
|
|
1056
|
-
defineCustomElement: defineCustomElement$17
|
|
1057
|
-
});
|
|
1058
|
-
|
|
1059
417
|
const dashToPascalCase = (str) => str
|
|
1060
418
|
.toLowerCase()
|
|
1061
419
|
.split('-')
|
|
@@ -1063,28 +421,6 @@ const dashToPascalCase = (str) => str
|
|
|
1063
421
|
.join('');
|
|
1064
422
|
const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
|
|
1065
423
|
|
|
1066
|
-
// Enumerated attributes where the literal string "false" is meaningful and
|
|
1067
|
-
// differs from the attribute being absent, so they must not be stripped like
|
|
1068
|
-
// HTML boolean attributes. These are the dash-cased attribute names produced by
|
|
1069
|
-
// camelToDashCase (e.g. the `spellCheck` prop renders as `spell-check`), so the
|
|
1070
|
-
// entries must match that form. aria-* and data-* are handled by prefix below.
|
|
1071
|
-
const NON_BOOLEAN_FALSE_ATTRIBUTES = new Set(['draggable', 'translate', 'spell-check', 'content-editable']);
|
|
1072
|
-
/**
|
|
1073
|
-
* React serializes a boolean prop set to `false` (e.g. `disabled={false}`) as
|
|
1074
|
-
* the string attribute `disabled="false"`. For HTML boolean attributes the mere
|
|
1075
|
-
* presence means "true", so assistive tech treats the element as
|
|
1076
|
-
* disabled/readonly even though Ionic renders it as interactive. The @lit/react
|
|
1077
|
-
* runtime fixes this for the generated components on v9, but the hand-rolled
|
|
1078
|
-
* wrappers (createReactComponent, createRoutingComponent, ...) render attributes
|
|
1079
|
-
* directly and sync props through attachProps, so we strip the stray attribute
|
|
1080
|
-
* here after the property has been assigned.
|
|
1081
|
-
*
|
|
1082
|
-
* TODO(FW-7629): 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
424
|
const attachProps = (node, newProps, oldProps = {}) => {
|
|
1089
425
|
// some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
|
|
1090
426
|
if (node instanceof Element) {
|
|
@@ -1115,12 +451,6 @@ const attachProps = (node, newProps, oldProps = {}) => {
|
|
|
1115
451
|
if (propType === 'string') {
|
|
1116
452
|
node.setAttribute(camelToDashCase(name), newProps[name]);
|
|
1117
453
|
}
|
|
1118
|
-
else if (newProps[name] === false) {
|
|
1119
|
-
const attribute = camelToDashCase(name);
|
|
1120
|
-
if (isStaleFalseBooleanAttribute(attribute)) {
|
|
1121
|
-
node.removeAttribute(attribute);
|
|
1122
|
-
}
|
|
1123
|
-
}
|
|
1124
454
|
}
|
|
1125
455
|
});
|
|
1126
456
|
}
|
|
@@ -1231,6 +561,147 @@ const defineCustomElement = (tagName, customElement) => {
|
|
|
1231
561
|
}
|
|
1232
562
|
};
|
|
1233
563
|
|
|
564
|
+
const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
|
|
565
|
+
if (defineCustomElement !== undefined) {
|
|
566
|
+
defineCustomElement();
|
|
567
|
+
}
|
|
568
|
+
const displayName = dashToPascalCase(tagName);
|
|
569
|
+
const ReactComponent = class extends React.Component {
|
|
570
|
+
constructor(props) {
|
|
571
|
+
super(props);
|
|
572
|
+
this.setComponentElRef = (element) => {
|
|
573
|
+
this.componentEl = element;
|
|
574
|
+
};
|
|
575
|
+
}
|
|
576
|
+
componentDidMount() {
|
|
577
|
+
this.componentDidUpdate(this.props);
|
|
578
|
+
}
|
|
579
|
+
componentDidUpdate(prevProps) {
|
|
580
|
+
attachProps(this.componentEl, this.props, prevProps);
|
|
581
|
+
}
|
|
582
|
+
render() {
|
|
583
|
+
const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
|
|
584
|
+
let propsToPass = Object.keys(cProps).reduce((acc, name) => {
|
|
585
|
+
const value = cProps[name];
|
|
586
|
+
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
|
|
587
|
+
const eventName = name.substring(2).toLowerCase();
|
|
588
|
+
if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
|
|
589
|
+
acc[name] = value;
|
|
590
|
+
}
|
|
591
|
+
}
|
|
592
|
+
else {
|
|
593
|
+
// we should only render strings, booleans, and numbers as attrs in html.
|
|
594
|
+
// objects, functions, arrays etc get synced via properties on mount.
|
|
595
|
+
const type = typeof value;
|
|
596
|
+
if (type === 'string' || type === 'boolean' || type === 'number') {
|
|
597
|
+
acc[camelToDashCase(name)] = value;
|
|
598
|
+
}
|
|
599
|
+
}
|
|
600
|
+
return acc;
|
|
601
|
+
}, {});
|
|
602
|
+
if (manipulatePropsFunction) {
|
|
603
|
+
propsToPass = manipulatePropsFunction(this.props, propsToPass);
|
|
604
|
+
}
|
|
605
|
+
const newProps = {
|
|
606
|
+
...propsToPass,
|
|
607
|
+
ref: mergeRefs(forwardedRef, this.setComponentElRef),
|
|
608
|
+
style,
|
|
609
|
+
};
|
|
610
|
+
/**
|
|
611
|
+
* We use createElement here instead of
|
|
612
|
+
* React.createElement to work around a
|
|
613
|
+
* bug in Vite (https://github.com/vitejs/vite/issues/6104).
|
|
614
|
+
* React.createElement causes all elements to be rendered
|
|
615
|
+
* as <tagname> instead of the actual Web Component.
|
|
616
|
+
*/
|
|
617
|
+
return createElement(tagName, newProps, children);
|
|
618
|
+
}
|
|
619
|
+
static get displayName() {
|
|
620
|
+
return displayName;
|
|
621
|
+
}
|
|
622
|
+
};
|
|
623
|
+
// If context was passed to createReactComponent then conditionally add it to the Component Class
|
|
624
|
+
if (ReactComponentContext) {
|
|
625
|
+
ReactComponent.contextType = ReactComponentContext;
|
|
626
|
+
}
|
|
627
|
+
return createForwardRef$1(ReactComponent, displayName);
|
|
628
|
+
};
|
|
629
|
+
|
|
630
|
+
/* eslint-disable */
|
|
631
|
+
/* tslint:disable */
|
|
632
|
+
/* auto-generated react proxies */
|
|
633
|
+
const IonAccordion = /*@__PURE__*/ createReactComponent('ion-accordion', undefined, undefined, defineCustomElement$1);
|
|
634
|
+
const IonAccordionGroup = /*@__PURE__*/ createReactComponent('ion-accordion-group', undefined, undefined, defineCustomElement$2);
|
|
635
|
+
const IonAvatar = /*@__PURE__*/ createReactComponent('ion-avatar', undefined, undefined, defineCustomElement$3);
|
|
636
|
+
const IonBackdrop = /*@__PURE__*/ createReactComponent('ion-backdrop', undefined, undefined, defineCustomElement$4);
|
|
637
|
+
const IonBadge = /*@__PURE__*/ createReactComponent('ion-badge', undefined, undefined, defineCustomElement$5);
|
|
638
|
+
const IonBreadcrumbs = /*@__PURE__*/ createReactComponent('ion-breadcrumbs', undefined, undefined, defineCustomElement$6);
|
|
639
|
+
const IonButtons = /*@__PURE__*/ createReactComponent('ion-buttons', undefined, undefined, defineCustomElement$7);
|
|
640
|
+
const IonCardContent = /*@__PURE__*/ createReactComponent('ion-card-content', undefined, undefined, defineCustomElement$8);
|
|
641
|
+
const IonCardHeader = /*@__PURE__*/ createReactComponent('ion-card-header', undefined, undefined, defineCustomElement$9);
|
|
642
|
+
const IonCardSubtitle = /*@__PURE__*/ createReactComponent('ion-card-subtitle', undefined, undefined, defineCustomElement$a);
|
|
643
|
+
const IonCardTitle = /*@__PURE__*/ createReactComponent('ion-card-title', undefined, undefined, defineCustomElement$b);
|
|
644
|
+
const IonCheckbox = /*@__PURE__*/ createReactComponent('ion-checkbox', undefined, undefined, defineCustomElement$c);
|
|
645
|
+
const IonChip = /*@__PURE__*/ createReactComponent('ion-chip', undefined, undefined, defineCustomElement$d);
|
|
646
|
+
const IonCol = /*@__PURE__*/ createReactComponent('ion-col', undefined, undefined, defineCustomElement$e);
|
|
647
|
+
const IonContent = /*@__PURE__*/ createReactComponent('ion-content', undefined, undefined, defineCustomElement$f);
|
|
648
|
+
const IonDatetime = /*@__PURE__*/ createReactComponent('ion-datetime', undefined, undefined, defineCustomElement$g);
|
|
649
|
+
const IonDatetimeButton = /*@__PURE__*/ createReactComponent('ion-datetime-button', undefined, undefined, defineCustomElement$h);
|
|
650
|
+
const IonFab = /*@__PURE__*/ createReactComponent('ion-fab', undefined, undefined, defineCustomElement$i);
|
|
651
|
+
const IonFabList = /*@__PURE__*/ createReactComponent('ion-fab-list', undefined, undefined, defineCustomElement$j);
|
|
652
|
+
const IonFooter = /*@__PURE__*/ createReactComponent('ion-footer', undefined, undefined, defineCustomElement$k);
|
|
653
|
+
const IonGrid = /*@__PURE__*/ createReactComponent('ion-grid', undefined, undefined, defineCustomElement$l);
|
|
654
|
+
const IonHeader = /*@__PURE__*/ createReactComponent('ion-header', undefined, undefined, defineCustomElement$m);
|
|
655
|
+
const IonImg = /*@__PURE__*/ createReactComponent('ion-img', undefined, undefined, defineCustomElement$n);
|
|
656
|
+
const IonInfiniteScroll = /*@__PURE__*/ createReactComponent('ion-infinite-scroll', undefined, undefined, defineCustomElement$o);
|
|
657
|
+
const IonInfiniteScrollContent = /*@__PURE__*/ createReactComponent('ion-infinite-scroll-content', undefined, undefined, defineCustomElement$p);
|
|
658
|
+
const IonInput = /*@__PURE__*/ createReactComponent('ion-input', undefined, undefined, defineCustomElement$q);
|
|
659
|
+
const IonInputOtp = /*@__PURE__*/ createReactComponent('ion-input-otp', undefined, undefined, defineCustomElement$r);
|
|
660
|
+
const IonInputPasswordToggle = /*@__PURE__*/ createReactComponent('ion-input-password-toggle', undefined, undefined, defineCustomElement$s);
|
|
661
|
+
const IonItemDivider = /*@__PURE__*/ createReactComponent('ion-item-divider', undefined, undefined, defineCustomElement$t);
|
|
662
|
+
const IonItemGroup = /*@__PURE__*/ createReactComponent('ion-item-group', undefined, undefined, defineCustomElement$u);
|
|
663
|
+
const IonItemOptions = /*@__PURE__*/ createReactComponent('ion-item-options', undefined, undefined, defineCustomElement$v);
|
|
664
|
+
const IonItemSliding = /*@__PURE__*/ createReactComponent('ion-item-sliding', undefined, undefined, defineCustomElement$w);
|
|
665
|
+
const IonLabel = /*@__PURE__*/ createReactComponent('ion-label', undefined, undefined, defineCustomElement$x);
|
|
666
|
+
const IonList = /*@__PURE__*/ createReactComponent('ion-list', undefined, undefined, defineCustomElement$y);
|
|
667
|
+
const IonListHeader = /*@__PURE__*/ createReactComponent('ion-list-header', undefined, undefined, defineCustomElement$z);
|
|
668
|
+
const IonMenu = /*@__PURE__*/ createReactComponent('ion-menu', undefined, undefined, defineCustomElement$A);
|
|
669
|
+
const IonMenuButton = /*@__PURE__*/ createReactComponent('ion-menu-button', undefined, undefined, defineCustomElement$B);
|
|
670
|
+
const IonMenuToggle = /*@__PURE__*/ createReactComponent('ion-menu-toggle', undefined, undefined, defineCustomElement$C);
|
|
671
|
+
const IonNavLink = /*@__PURE__*/ createReactComponent('ion-nav-link', undefined, undefined, defineCustomElement$D);
|
|
672
|
+
const IonNote = /*@__PURE__*/ createReactComponent('ion-note', undefined, undefined, defineCustomElement$E);
|
|
673
|
+
const IonPicker = /*@__PURE__*/ createReactComponent('ion-picker', undefined, undefined, defineCustomElement$F);
|
|
674
|
+
const IonPickerColumn = /*@__PURE__*/ createReactComponent('ion-picker-column', undefined, undefined, defineCustomElement$G);
|
|
675
|
+
const IonPickerColumnOption = /*@__PURE__*/ createReactComponent('ion-picker-column-option', undefined, undefined, defineCustomElement$H);
|
|
676
|
+
const IonProgressBar = /*@__PURE__*/ createReactComponent('ion-progress-bar', undefined, undefined, defineCustomElement$I);
|
|
677
|
+
const IonRadio = /*@__PURE__*/ createReactComponent('ion-radio', undefined, undefined, defineCustomElement$J);
|
|
678
|
+
const IonRadioGroup = /*@__PURE__*/ createReactComponent('ion-radio-group', undefined, undefined, defineCustomElement$K);
|
|
679
|
+
const IonRange = /*@__PURE__*/ createReactComponent('ion-range', undefined, undefined, defineCustomElement$L);
|
|
680
|
+
const IonRefresher = /*@__PURE__*/ createReactComponent('ion-refresher', undefined, undefined, defineCustomElement$M);
|
|
681
|
+
const IonRefresherContent = /*@__PURE__*/ createReactComponent('ion-refresher-content', undefined, undefined, defineCustomElement$N);
|
|
682
|
+
const IonReorder = /*@__PURE__*/ createReactComponent('ion-reorder', undefined, undefined, defineCustomElement$O);
|
|
683
|
+
const IonReorderGroup = /*@__PURE__*/ createReactComponent('ion-reorder-group', undefined, undefined, defineCustomElement$P);
|
|
684
|
+
const IonRippleEffect = /*@__PURE__*/ createReactComponent('ion-ripple-effect', undefined, undefined, defineCustomElement$Q);
|
|
685
|
+
const IonRow = /*@__PURE__*/ createReactComponent('ion-row', undefined, undefined, defineCustomElement$R);
|
|
686
|
+
const IonSearchbar = /*@__PURE__*/ createReactComponent('ion-searchbar', undefined, undefined, defineCustomElement$S);
|
|
687
|
+
const IonSegment = /*@__PURE__*/ createReactComponent('ion-segment', undefined, undefined, defineCustomElement$T);
|
|
688
|
+
const IonSegmentButton = /*@__PURE__*/ createReactComponent('ion-segment-button', undefined, undefined, defineCustomElement$U);
|
|
689
|
+
const IonSegmentContent = /*@__PURE__*/ createReactComponent('ion-segment-content', undefined, undefined, defineCustomElement$V);
|
|
690
|
+
const IonSegmentView = /*@__PURE__*/ createReactComponent('ion-segment-view', undefined, undefined, defineCustomElement$W);
|
|
691
|
+
const IonSelect = /*@__PURE__*/ createReactComponent('ion-select', undefined, undefined, defineCustomElement$X);
|
|
692
|
+
const IonSelectModal = /*@__PURE__*/ createReactComponent('ion-select-modal', undefined, undefined, defineCustomElement$Y);
|
|
693
|
+
const IonSelectOption = /*@__PURE__*/ createReactComponent('ion-select-option', undefined, undefined, defineCustomElement$Z);
|
|
694
|
+
const IonSkeletonText = /*@__PURE__*/ createReactComponent('ion-skeleton-text', undefined, undefined, defineCustomElement$_);
|
|
695
|
+
const IonSpinner = /*@__PURE__*/ createReactComponent('ion-spinner', undefined, undefined, defineCustomElement$$);
|
|
696
|
+
const IonSplitPane = /*@__PURE__*/ createReactComponent('ion-split-pane', undefined, undefined, defineCustomElement$10);
|
|
697
|
+
const IonTab = /*@__PURE__*/ createReactComponent('ion-tab', undefined, undefined, defineCustomElement$11);
|
|
698
|
+
const IonText = /*@__PURE__*/ createReactComponent('ion-text', undefined, undefined, defineCustomElement$12);
|
|
699
|
+
const IonTextarea = /*@__PURE__*/ createReactComponent('ion-textarea', undefined, undefined, defineCustomElement$13);
|
|
700
|
+
const IonThumbnail = /*@__PURE__*/ createReactComponent('ion-thumbnail', undefined, undefined, defineCustomElement$14);
|
|
701
|
+
const IonTitle = /*@__PURE__*/ createReactComponent('ion-title', undefined, undefined, defineCustomElement$15);
|
|
702
|
+
const IonToggle = /*@__PURE__*/ createReactComponent('ion-toggle', undefined, undefined, defineCustomElement$16);
|
|
703
|
+
const IonToolbar = /*@__PURE__*/ createReactComponent('ion-toolbar', undefined, undefined, defineCustomElement$17);
|
|
704
|
+
|
|
1234
705
|
const createForwardRef = (ReactComponent, // TODO(FW-2959): type
|
|
1235
706
|
displayName) => {
|
|
1236
707
|
const forwardRef = (props, ref) => {
|
|
@@ -1263,10 +734,15 @@ const createRoutingComponent = (tagName, customElement) => {
|
|
|
1263
734
|
defineCustomElement(tagName, customElement);
|
|
1264
735
|
const displayName = dashToPascalCase(tagName);
|
|
1265
736
|
const ReactComponent = class extends React.Component {
|
|
1266
|
-
ref;
|
|
1267
|
-
stableMergedRefs;
|
|
1268
737
|
constructor(props) {
|
|
1269
738
|
super(props);
|
|
739
|
+
this.handleClick = (e) => {
|
|
740
|
+
const { routerLink, routerDirection, routerOptions, routerAnimation } = this.props;
|
|
741
|
+
if (routerLink !== undefined) {
|
|
742
|
+
e.preventDefault();
|
|
743
|
+
this.context.navigate(routerLink, routerDirection, undefined, routerAnimation, routerOptions);
|
|
744
|
+
}
|
|
745
|
+
};
|
|
1270
746
|
// Create a local ref to to attach props to the wrapped element.
|
|
1271
747
|
this.ref = React.createRef();
|
|
1272
748
|
// React refs must be stable (not created inline).
|
|
@@ -1279,18 +755,6 @@ const createRoutingComponent = (tagName, customElement) => {
|
|
|
1279
755
|
const node = this.ref.current;
|
|
1280
756
|
attachProps(node, this.props, prevProps);
|
|
1281
757
|
}
|
|
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
758
|
render() {
|
|
1295
759
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1296
760
|
const { children, forwardedRef, style, className, ref, ...cProps } = this.props;
|
|
@@ -1397,14 +861,44 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
|
|
|
1397
861
|
}
|
|
1398
862
|
const displayName = dashToPascalCase(tagName);
|
|
1399
863
|
const ReactComponent = class extends React.Component {
|
|
1400
|
-
ref;
|
|
1401
|
-
wrapperRef;
|
|
1402
|
-
markerRef;
|
|
1403
|
-
stableMergedRefs;
|
|
1404
|
-
portalTarget;
|
|
1405
|
-
isUnmounted = false;
|
|
1406
864
|
constructor(props) {
|
|
1407
865
|
super(props);
|
|
866
|
+
this.isUnmounted = false;
|
|
867
|
+
this.handleIonMount = () => {
|
|
868
|
+
/**
|
|
869
|
+
* Mount the inner component when the
|
|
870
|
+
* overlay is about to open.
|
|
871
|
+
*
|
|
872
|
+
* For ion-popover, this is when `ionMount` is emitted.
|
|
873
|
+
* For other overlays, this is when `willPresent` is emitted.
|
|
874
|
+
*/
|
|
875
|
+
this.setState({ isOpen: true });
|
|
876
|
+
};
|
|
877
|
+
this.handleWillPresent = (evt) => {
|
|
878
|
+
this.setState({ isOpen: true });
|
|
879
|
+
/**
|
|
880
|
+
* Manually call the onWillPresent
|
|
881
|
+
* handler if present as setState will
|
|
882
|
+
* cause the event handlers to be
|
|
883
|
+
* destroyed and re-created.
|
|
884
|
+
*/
|
|
885
|
+
this.props.onWillPresent && this.props.onWillPresent(evt);
|
|
886
|
+
};
|
|
887
|
+
this.handleDidDismiss = (evt) => {
|
|
888
|
+
const wrapper = this.wrapperRef.current;
|
|
889
|
+
const el = this.ref.current;
|
|
890
|
+
/**
|
|
891
|
+
* This component might be unmounted already, if the containing
|
|
892
|
+
* element was removed while the overlay was still open. (For
|
|
893
|
+
* example, if an item contains an inline overlay with a button
|
|
894
|
+
* that removes the item.)
|
|
895
|
+
*/
|
|
896
|
+
if (wrapper && el) {
|
|
897
|
+
el.append(wrapper);
|
|
898
|
+
this.setState({ isOpen: false });
|
|
899
|
+
}
|
|
900
|
+
this.props.onDidDismiss && this.props.onDidDismiss(evt);
|
|
901
|
+
};
|
|
1408
902
|
// Create a local ref to to attach props to the wrapped element.
|
|
1409
903
|
this.ref = React.createRef();
|
|
1410
904
|
// React refs must be stable (not created inline).
|
|
@@ -1581,41 +1075,6 @@ const createInlineOverlayComponent = (tagName, defineCustomElement, hasDelegateH
|
|
|
1581
1075
|
static get displayName() {
|
|
1582
1076
|
return displayName;
|
|
1583
1077
|
}
|
|
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
1078
|
};
|
|
1620
1079
|
// Forward the nesting context as a prop to avoid contextType on the class.
|
|
1621
1080
|
// The render function is passed via `children` (not as a varargs child) so it
|
|
@@ -1634,11 +1093,13 @@ const IonLoading = /*@__PURE__*/ createInlineOverlayComponent('ion-loading', def
|
|
|
1634
1093
|
|
|
1635
1094
|
const IonToast = /*@__PURE__*/ createInlineOverlayComponent('ion-toast', defineCustomElement$1a);
|
|
1636
1095
|
|
|
1637
|
-
const
|
|
1096
|
+
const IonPickerLegacy = /*@__PURE__*/ createInlineOverlayComponent('ion-picker-legacy', defineCustomElement$1b);
|
|
1638
1097
|
|
|
1639
|
-
const
|
|
1098
|
+
const IonActionSheet = /*@__PURE__*/ createInlineOverlayComponent('ion-action-sheet', defineCustomElement$1c);
|
|
1640
1099
|
|
|
1641
|
-
const
|
|
1100
|
+
const IonModal = /*@__PURE__*/ createInlineOverlayComponent('ion-modal', defineCustomElement$1d, true);
|
|
1101
|
+
|
|
1102
|
+
const IonPopover = /*@__PURE__*/ createInlineOverlayComponent('ion-popover', defineCustomElement$1e);
|
|
1642
1103
|
|
|
1643
1104
|
const IonContext = React.createContext({
|
|
1644
1105
|
addOverlay: () => {
|
|
@@ -1730,101 +1191,31 @@ const IonOverlayManager = ({ onAddOverlay, onRemoveOverlay }) => {
|
|
|
1730
1191
|
}) }));
|
|
1731
1192
|
};
|
|
1732
1193
|
|
|
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);
|
|
1194
|
+
const IonTabButtonInner = /*@__PURE__*/ createReactComponent('ion-tab-button', undefined, undefined, defineCustomElement$1f);
|
|
1195
|
+
const IonTabBarInner = /*@__PURE__*/ createReactComponent('ion-tab-bar', undefined, undefined, defineCustomElement$1g);
|
|
1196
|
+
const IonTabsInner = /*@__PURE__*/ createReactComponent('ion-tabs', undefined, undefined, defineCustomElement$1h);
|
|
1197
|
+
const IonBackButtonInner = /*@__PURE__*/ createReactComponent('ion-back-button', undefined, undefined, defineCustomElement$1i);
|
|
1198
|
+
const IonRouterOutletInner = /*@__PURE__*/ createReactComponent('ion-router-outlet', undefined, undefined, defineCustomElement$1j);
|
|
1199
|
+
const IonAppInner = /*@__PURE__*/ createReactComponent('ion-app', undefined, undefined, defineCustomElement$1k);
|
|
1807
1200
|
// ionicons
|
|
1808
|
-
const IonIconInner = /*@__PURE__*/ createReactComponent('ion-icon', undefined, undefined, defineCustomElement$
|
|
1201
|
+
const IonIconInner = /*@__PURE__*/ createReactComponent('ion-icon', undefined, undefined, defineCustomElement$1l);
|
|
1809
1202
|
|
|
1810
1203
|
class IonApp extends React.Component {
|
|
1811
|
-
addOverlayCallback;
|
|
1812
|
-
removeOverlayCallback;
|
|
1813
1204
|
constructor(props) {
|
|
1814
1205
|
super(props);
|
|
1206
|
+
this.ionContext = {
|
|
1207
|
+
addOverlay: (id, overlay, containerElement) => {
|
|
1208
|
+
if (this.addOverlayCallback) {
|
|
1209
|
+
this.addOverlayCallback(id, overlay, containerElement);
|
|
1210
|
+
}
|
|
1211
|
+
},
|
|
1212
|
+
removeOverlay: (id) => {
|
|
1213
|
+
if (this.removeOverlayCallback) {
|
|
1214
|
+
this.removeOverlayCallback(id);
|
|
1215
|
+
}
|
|
1216
|
+
},
|
|
1217
|
+
};
|
|
1815
1218
|
}
|
|
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
1219
|
render() {
|
|
1829
1220
|
return (jsxs(IonContext.Provider, { value: this.ionContext, children: [jsx(IonAppInner, { ...this.props, children: this.props.children }), jsx(IonOverlayManager, { onAddOverlay: (callback) => {
|
|
1830
1221
|
this.addOverlayCallback = callback;
|
|
@@ -1832,8 +1223,8 @@ class IonApp extends React.Component {
|
|
|
1832
1223
|
this.removeOverlayCallback = callback;
|
|
1833
1224
|
} })] }));
|
|
1834
1225
|
}
|
|
1835
|
-
static displayName = 'IonApp';
|
|
1836
1226
|
}
|
|
1227
|
+
IonApp.displayName = 'IonApp';
|
|
1837
1228
|
|
|
1838
1229
|
const StackContext = React.createContext({
|
|
1839
1230
|
registerIonPage: () => undefined,
|
|
@@ -1841,32 +1232,11 @@ const StackContext = React.createContext({
|
|
|
1841
1232
|
});
|
|
1842
1233
|
|
|
1843
1234
|
class PageManager extends React.PureComponent {
|
|
1844
|
-
ionLifeCycleContext;
|
|
1845
|
-
ionPageElementRef;
|
|
1846
|
-
stableMergedRefs;
|
|
1847
1235
|
constructor(props) {
|
|
1848
1236
|
super(props);
|
|
1849
1237
|
this.ionPageElementRef = React.createRef();
|
|
1850
1238
|
// 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
|
-
};
|
|
1239
|
+
this.stableMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef);
|
|
1870
1240
|
/**
|
|
1871
1241
|
* This binds the scope of the following methods to the class scope.
|
|
1872
1242
|
* The `.bind` method returns a new function, so we need to assign it
|
|
@@ -1878,38 +1248,11 @@ class PageManager extends React.PureComponent {
|
|
|
1878
1248
|
this.ionViewWillLeaveHandler = this.ionViewWillLeaveHandler.bind(this);
|
|
1879
1249
|
this.ionViewDidLeaveHandler = this.ionViewDidLeaveHandler.bind(this);
|
|
1880
1250
|
}
|
|
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
1251
|
componentDidMount() {
|
|
1907
1252
|
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);
|
|
1253
|
+
if (this.context.isInOutlet()) {
|
|
1254
|
+
this.ionPageElementRef.current.classList.add('ion-page-invisible');
|
|
1255
|
+
}
|
|
1913
1256
|
this.context.registerIonPage(this.ionPageElementRef.current, this.props.routeInfo);
|
|
1914
1257
|
this.ionPageElementRef.current.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
|
|
1915
1258
|
this.ionPageElementRef.current.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler);
|
|
@@ -1917,11 +1260,6 @@ class PageManager extends React.PureComponent {
|
|
|
1917
1260
|
this.ionPageElementRef.current.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler);
|
|
1918
1261
|
}
|
|
1919
1262
|
}
|
|
1920
|
-
componentDidUpdate(prevProps) {
|
|
1921
|
-
if (prevProps.className !== this.props.className) {
|
|
1922
|
-
this.updateUserClasses(prevProps.className, this.props.className);
|
|
1923
|
-
}
|
|
1924
|
-
}
|
|
1925
1263
|
componentWillUnmount() {
|
|
1926
1264
|
if (this.ionPageElementRef.current) {
|
|
1927
1265
|
this.ionPageElementRef.current.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
|
|
@@ -1951,11 +1289,9 @@ class PageManager extends React.PureComponent {
|
|
|
1951
1289
|
render() {
|
|
1952
1290
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
1953
1291
|
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
1292
|
return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
|
|
1957
1293
|
this.ionLifeCycleContext = context;
|
|
1958
|
-
return (jsx("div", { className:
|
|
1294
|
+
return (jsx("div", { className: className ? `${className} ion-page` : `ion-page`, ref: this.stableMergedRefs, ...props, children: children }));
|
|
1959
1295
|
} }));
|
|
1960
1296
|
}
|
|
1961
1297
|
static get contextType() {
|
|
@@ -2015,7 +1351,7 @@ const ReactDelegate = (addView, removeView) => {
|
|
|
2015
1351
|
};
|
|
2016
1352
|
};
|
|
2017
1353
|
|
|
2018
|
-
const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$
|
|
1354
|
+
const IonNavInner = createReactComponent('ion-nav', undefined, undefined, defineCustomElement$1m);
|
|
2019
1355
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
2020
1356
|
const IonNavInternal = ({ children, forwardedRef, ...restOfProps }) => {
|
|
2021
1357
|
const [views, setViews] = useState([]);
|
|
@@ -2041,9 +1377,6 @@ const HTMLElementSSR = (typeof HTMLElement !== 'undefined' ? HTMLElement : class
|
|
|
2041
1377
|
});
|
|
2042
1378
|
|
|
2043
1379
|
class OutletPageManager extends React.Component {
|
|
2044
|
-
ionLifeCycleContext;
|
|
2045
|
-
ionRouterOutlet;
|
|
2046
|
-
outletIsReady;
|
|
2047
1380
|
constructor(props) {
|
|
2048
1381
|
super(props);
|
|
2049
1382
|
this.outletIsReady = false;
|
|
@@ -2066,30 +1399,8 @@ class OutletPageManager extends React.Component {
|
|
|
2066
1399
|
*/
|
|
2067
1400
|
if (!this.outletIsReady) {
|
|
2068
1401
|
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
1402
|
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);
|
|
1403
|
+
this.context.registerIonPage(this.ionRouterOutlet, this.props.routeInfo);
|
|
2093
1404
|
});
|
|
2094
1405
|
}
|
|
2095
1406
|
this.ionRouterOutlet.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler);
|
|
@@ -2119,10 +1430,10 @@ class OutletPageManager extends React.Component {
|
|
|
2119
1430
|
this.ionLifeCycleContext.ionViewDidLeave();
|
|
2120
1431
|
}
|
|
2121
1432
|
render() {
|
|
2122
|
-
const { StackManager, children, routeInfo,
|
|
1433
|
+
const { StackManager, children, routeInfo, ...props } = this.props;
|
|
2123
1434
|
return (jsx(IonLifeCycleContext.Consumer, { children: (context) => {
|
|
2124
1435
|
this.ionLifeCycleContext = context;
|
|
2125
|
-
return (jsx(StackManager, {
|
|
1436
|
+
return (jsx(StackManager, { routeInfo: routeInfo, children: jsx(IonRouterOutletInner, { setRef: (val) => (this.ionRouterOutlet = val), ...props, children: children }) }));
|
|
2126
1437
|
} }));
|
|
2127
1438
|
}
|
|
2128
1439
|
static get contextType() {
|
|
@@ -2131,16 +1442,13 @@ class OutletPageManager extends React.Component {
|
|
|
2131
1442
|
}
|
|
2132
1443
|
|
|
2133
1444
|
class IonRouterOutletContainer extends React.Component {
|
|
2134
|
-
outletId;
|
|
2135
1445
|
constructor(props) {
|
|
2136
1446
|
super(props);
|
|
2137
|
-
this.outletId = props.id ?? `routerOutlet-${generateId('routerOutlet')}`;
|
|
2138
1447
|
}
|
|
2139
1448
|
render() {
|
|
2140
1449
|
const StackManager = this.context.getStackManager();
|
|
2141
1450
|
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 }));
|
|
1451
|
+
return this.context.hasIonicRouter() ? (props.ionPage ? (jsx(OutletPageManager, { StackManager: StackManager, routeInfo: this.context.routeInfo, ...props, children: children })) : (jsx(StackManager, { routeInfo: this.context.routeInfo, children: jsx(IonRouterOutletInner, { ...props, forwardedRef: forwardedRef, children: children }) }))) : (jsx(IonRouterOutletInner, { ref: forwardedRef, ...this.props, children: this.props.children }));
|
|
2144
1452
|
}
|
|
2145
1453
|
static get contextType() {
|
|
2146
1454
|
return NavContext;
|
|
@@ -2164,29 +1472,28 @@ class IonTabs extends React.Component {
|
|
|
2164
1472
|
shouldComponentUpdate() {
|
|
2165
1473
|
return true;
|
|
2166
1474
|
}
|
|
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
1475
|
constructor(props) {
|
|
2189
1476
|
super(props);
|
|
1477
|
+
/**
|
|
1478
|
+
* `routerOutletRef` allows users to add a `ref` to `IonRouterOutlet`.
|
|
1479
|
+
* Without this, `ref.current` will be `undefined` in the user's app,
|
|
1480
|
+
* breaking their ability to access the `IonRouterOutlet` instance.
|
|
1481
|
+
* Do not remove this ref.
|
|
1482
|
+
*/
|
|
1483
|
+
this.routerOutletRef = React.createRef();
|
|
1484
|
+
this.tabBarRef = React.createRef();
|
|
1485
|
+
this.ionTabContextState = {
|
|
1486
|
+
activeTab: undefined,
|
|
1487
|
+
selectTab: () => false,
|
|
1488
|
+
hasRouterOutlet: false,
|
|
1489
|
+
/**
|
|
1490
|
+
* Tab bar can be used as a standalone component,
|
|
1491
|
+
* so the props can not be passed directly to the
|
|
1492
|
+
* tab bar component. Instead, props will be
|
|
1493
|
+
* passed through the context.
|
|
1494
|
+
*/
|
|
1495
|
+
tabBarProps: { ref: this.tabBarRef },
|
|
1496
|
+
};
|
|
2190
1497
|
}
|
|
2191
1498
|
componentDidMount() {
|
|
2192
1499
|
if (this.tabBarRef.current) {
|
|
@@ -2338,14 +1645,14 @@ const matchesTab = (pathname, href) => {
|
|
|
2338
1645
|
if (href === undefined) {
|
|
2339
1646
|
return false;
|
|
2340
1647
|
}
|
|
2341
|
-
|
|
2342
|
-
const hrefPathname = href.split('?')[0];
|
|
2343
|
-
const normalizedHref = hrefPathname.endsWith('/') && hrefPathname !== '/' ? hrefPathname.slice(0, -1) : hrefPathname;
|
|
1648
|
+
const normalizedHref = href.endsWith('/') && href !== '/' ? href.slice(0, -1) : href;
|
|
2344
1649
|
return pathname === normalizedHref || pathname.startsWith(normalizedHref + '/');
|
|
2345
1650
|
};
|
|
2346
1651
|
class IonTabBarUnwrapped extends React.PureComponent {
|
|
2347
1652
|
constructor(props) {
|
|
2348
1653
|
super(props);
|
|
1654
|
+
// eslint-disable-next-line
|
|
1655
|
+
this.setActiveTabOnContext = (_tab) => { };
|
|
2349
1656
|
const tabs = {};
|
|
2350
1657
|
React.Children.forEach(props.children, (child) => {
|
|
2351
1658
|
if (child != null &&
|
|
@@ -2386,8 +1693,6 @@ class IonTabBarUnwrapped extends React.PureComponent {
|
|
|
2386
1693
|
this.setActiveTabOnContext(this.state.activeTab);
|
|
2387
1694
|
}
|
|
2388
1695
|
}
|
|
2389
|
-
// eslint-disable-next-line
|
|
2390
|
-
setActiveTabOnContext = (_tab) => { };
|
|
2391
1696
|
selectTab(tab) {
|
|
2392
1697
|
const tabUrl = this.state.tabs[tab];
|
|
2393
1698
|
if (tabUrl) {
|
|
@@ -2432,7 +1737,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
|
|
|
2432
1737
|
const prevHref = state.tabs[prevActiveTab].currentHref;
|
|
2433
1738
|
const prevRouteOptions = state.tabs[prevActiveTab].currentRouteOptions;
|
|
2434
1739
|
if (activeTab !== prevActiveTab ||
|
|
2435
|
-
prevHref !==
|
|
1740
|
+
prevHref !== props.routeInfo?.pathname ||
|
|
2436
1741
|
prevRouteOptions !== props.routeInfo?.routeOptions) {
|
|
2437
1742
|
tabs[activeTab] = {
|
|
2438
1743
|
originalHref: tabs[activeTab].originalHref,
|
|
@@ -2505,7 +1810,7 @@ class IonTabBarUnwrapped extends React.PureComponent {
|
|
|
2505
1810
|
return (child) => {
|
|
2506
1811
|
if (child != null && child.props && (child.type === IonTabButton || child.type.isTabButton)) {
|
|
2507
1812
|
const href = child.props.tab === activeTab
|
|
2508
|
-
?
|
|
1813
|
+
? this.props.routeInfo?.pathname
|
|
2509
1814
|
: this.state.tabs[child.props.tab].currentHref;
|
|
2510
1815
|
const routeOptions = child.props.tab === activeTab
|
|
2511
1816
|
? this.props.routeInfo?.routeOptions
|
|
@@ -2550,24 +1855,27 @@ const IonTabBarContainer = React.memo(({ forwardedRef, ...props }) => {
|
|
|
2550
1855
|
const IonTabBar = createForwardRef(IonTabBarContainer, 'IonTabBar');
|
|
2551
1856
|
|
|
2552
1857
|
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
|
-
|
|
1858
|
+
constructor() {
|
|
1859
|
+
super(...arguments);
|
|
1860
|
+
this.clickButton = (e) => {
|
|
1861
|
+
/**
|
|
1862
|
+
* If ion-back-button is being used inside
|
|
1863
|
+
* of ion-nav then we should not interact with
|
|
1864
|
+
* the router.
|
|
1865
|
+
*/
|
|
1866
|
+
if (e.target && e.target.closest('ion-nav') !== null) {
|
|
1867
|
+
return;
|
|
1868
|
+
}
|
|
1869
|
+
const { defaultHref, routerAnimation } = this.props;
|
|
1870
|
+
if (this.context.hasIonicRouter()) {
|
|
1871
|
+
e.stopPropagation();
|
|
1872
|
+
this.context.goBack(defaultHref, routerAnimation);
|
|
1873
|
+
}
|
|
1874
|
+
else if (defaultHref !== undefined) {
|
|
1875
|
+
window.location.href = defaultHref;
|
|
1876
|
+
}
|
|
1877
|
+
};
|
|
1878
|
+
}
|
|
2571
1879
|
render() {
|
|
2572
1880
|
return jsx(IonBackButtonInner, { onClick: this.clickButton, ...this.props });
|
|
2573
1881
|
}
|
|
@@ -2627,6 +1935,20 @@ class IonRoute extends React.PureComponent {
|
|
|
2627
1935
|
}
|
|
2628
1936
|
}
|
|
2629
1937
|
|
|
1938
|
+
class IonRedirect extends React.PureComponent {
|
|
1939
|
+
render() {
|
|
1940
|
+
const IonRedirectInner = this.context.getIonRedirect();
|
|
1941
|
+
if (!this.context.hasIonicRouter() || !IonRedirect) {
|
|
1942
|
+
console.error('You either do not have an Ionic Router package, or your router does not support using <IonRedirect>');
|
|
1943
|
+
return null;
|
|
1944
|
+
}
|
|
1945
|
+
return jsx(IonRedirectInner, { ...this.props });
|
|
1946
|
+
}
|
|
1947
|
+
static get contextType() {
|
|
1948
|
+
return NavContext;
|
|
1949
|
+
}
|
|
1950
|
+
}
|
|
1951
|
+
|
|
2630
1952
|
const IonRouterContext = React.createContext({
|
|
2631
1953
|
routeInfo: undefined, // TODO(FW-2959): type
|
|
2632
1954
|
push: () => {
|
|
@@ -2635,9 +1957,6 @@ const IonRouterContext = React.createContext({
|
|
|
2635
1957
|
back: () => {
|
|
2636
1958
|
throw new Error('An Ionic Router is required for IonRouterContext');
|
|
2637
1959
|
},
|
|
2638
|
-
navigateRoot: () => {
|
|
2639
|
-
throw new Error('An Ionic Router is required for IonRouterContext');
|
|
2640
|
-
},
|
|
2641
1960
|
canGoBack: () => {
|
|
2642
1961
|
throw new Error('An Ionic Router is required for IonRouterContext');
|
|
2643
1962
|
},
|
|
@@ -2654,17 +1973,15 @@ function useIonRouter() {
|
|
|
2654
1973
|
back: context.back,
|
|
2655
1974
|
push: context.push,
|
|
2656
1975
|
goBack: context.back,
|
|
2657
|
-
navigateRoot: context.navigateRoot,
|
|
2658
1976
|
canGoBack: context.canGoBack,
|
|
2659
1977
|
routeInfo: context.routeInfo,
|
|
2660
|
-
}), [context.back, context.push, context.
|
|
1978
|
+
}), [context.back, context.push, context.canGoBack, context.routeInfo]);
|
|
2661
1979
|
}
|
|
2662
1980
|
|
|
2663
1981
|
class CreateAnimation extends React.PureComponent {
|
|
2664
|
-
nodes = new Map();
|
|
2665
|
-
animation;
|
|
2666
1982
|
constructor(props) {
|
|
2667
1983
|
super(props);
|
|
1984
|
+
this.nodes = new Map();
|
|
2668
1985
|
this.animation = createAnimation(props.id);
|
|
2669
1986
|
}
|
|
2670
1987
|
setupAnimation(props) {
|
|
@@ -2812,7 +2129,7 @@ function useController(displayName, controller, defineCustomElement) {
|
|
|
2812
2129
|
* @returns Returns the present and dismiss methods in an array
|
|
2813
2130
|
*/
|
|
2814
2131
|
function useIonActionSheet() {
|
|
2815
|
-
const controller = useController('IonActionSheet', actionSheetController, defineCustomElement$
|
|
2132
|
+
const controller = useController('IonActionSheet', actionSheetController, defineCustomElement$1c);
|
|
2816
2133
|
const present = useCallback((buttonsOrOptions, header) => {
|
|
2817
2134
|
if (Array.isArray(buttonsOrOptions)) {
|
|
2818
2135
|
return controller.present({
|
|
@@ -2938,7 +2255,7 @@ function useOverlay(displayName, controller, defineCustomElement, component, com
|
|
|
2938
2255
|
* @returns Returns the present and dismiss methods in an array
|
|
2939
2256
|
*/
|
|
2940
2257
|
function useIonModal(component, componentProps) {
|
|
2941
|
-
const controller = useOverlay('IonModal', modalController, defineCustomElement$
|
|
2258
|
+
const controller = useOverlay('IonModal', modalController, defineCustomElement$1d, component, componentProps);
|
|
2942
2259
|
const present = useCallback((options = {}) => {
|
|
2943
2260
|
controller.present(options);
|
|
2944
2261
|
}, [controller.present]);
|
|
@@ -2953,13 +2270,34 @@ function useIonModal(component, componentProps) {
|
|
|
2953
2270
|
* @returns Returns the present and dismiss methods in an array
|
|
2954
2271
|
*/
|
|
2955
2272
|
function useIonPopover(component, componentProps) {
|
|
2956
|
-
const controller = useOverlay('IonPopover', popoverController, defineCustomElement$
|
|
2273
|
+
const controller = useOverlay('IonPopover', popoverController, defineCustomElement$1e, component, componentProps);
|
|
2957
2274
|
const present = useCallback((options = {}) => {
|
|
2958
2275
|
controller.present(options);
|
|
2959
2276
|
}, [controller.present]);
|
|
2960
2277
|
return [present, controller.dismiss];
|
|
2961
2278
|
}
|
|
2962
2279
|
|
|
2280
|
+
/**
|
|
2281
|
+
* A hook for presenting/dismissing an IonPicker component
|
|
2282
|
+
* @returns Returns the present and dismiss methods in an array
|
|
2283
|
+
* @deprecated Use the inline ion-picker component instead.
|
|
2284
|
+
*/
|
|
2285
|
+
function useIonPicker() {
|
|
2286
|
+
const controller = useController('IonPicker', pickerController, defineCustomElement$1b);
|
|
2287
|
+
const present = useCallback((columnsOrOptions, buttons) => {
|
|
2288
|
+
if (Array.isArray(columnsOrOptions)) {
|
|
2289
|
+
return controller.present({
|
|
2290
|
+
columns: columnsOrOptions,
|
|
2291
|
+
buttons: buttons ?? [{ text: 'Ok' }],
|
|
2292
|
+
});
|
|
2293
|
+
}
|
|
2294
|
+
else {
|
|
2295
|
+
return controller.present(columnsOrOptions);
|
|
2296
|
+
}
|
|
2297
|
+
}, [controller.present]);
|
|
2298
|
+
return [present, controller.dismiss];
|
|
2299
|
+
}
|
|
2300
|
+
|
|
2963
2301
|
/**
|
|
2964
2302
|
* A hook for presenting/dismissing an IonLoading component
|
|
2965
2303
|
* @returns Returns the present and dismiss methods in an array
|
|
@@ -3007,16 +2345,15 @@ const RouteManagerContext = /*@__PURE__*/ React.createContext({
|
|
|
3007
2345
|
findLeavingViewItemByRouteInfo: () => undefined,
|
|
3008
2346
|
findViewItemByRouteInfo: () => undefined,
|
|
3009
2347
|
getChildrenToRender: () => undefined,
|
|
3010
|
-
getViewItemsForOutlet: () => [],
|
|
3011
2348
|
goBack: () => undefined,
|
|
3012
2349
|
unMountViewItem: () => undefined,
|
|
3013
2350
|
});
|
|
3014
2351
|
|
|
3015
2352
|
class ViewLifeCycleManager extends React.Component {
|
|
3016
|
-
ionLifeCycleContext = new DefaultIonLifeCycleContext();
|
|
3017
|
-
_isMounted = false;
|
|
3018
2353
|
constructor(props) {
|
|
3019
2354
|
super(props);
|
|
2355
|
+
this.ionLifeCycleContext = new DefaultIonLifeCycleContext();
|
|
2356
|
+
this._isMounted = false;
|
|
3020
2357
|
this.ionLifeCycleContext.onComponentCanBeDestroyed(() => {
|
|
3021
2358
|
if (!this.props.mount) {
|
|
3022
2359
|
if (this._isMounted) {
|
|
@@ -3044,8 +2381,10 @@ class ViewLifeCycleManager extends React.Component {
|
|
|
3044
2381
|
|
|
3045
2382
|
// const RESTRICT_SIZE = 100;
|
|
3046
2383
|
class LocationHistory {
|
|
3047
|
-
|
|
3048
|
-
|
|
2384
|
+
constructor() {
|
|
2385
|
+
this.locationHistory = [];
|
|
2386
|
+
this.tabHistory = {};
|
|
2387
|
+
}
|
|
3049
2388
|
add(routeInfo) {
|
|
3050
2389
|
if (routeInfo.routeAction === 'push' || routeInfo.routeAction == null) {
|
|
3051
2390
|
this._add(routeInfo);
|
|
@@ -3124,14 +2463,7 @@ class LocationHistory {
|
|
|
3124
2463
|
_replace(routeInfo) {
|
|
3125
2464
|
const routeInfos = this._getRouteInfosByKey(routeInfo.tab);
|
|
3126
2465
|
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
|
-
}
|
|
2466
|
+
this.locationHistory.pop();
|
|
3135
2467
|
this._add(routeInfo);
|
|
3136
2468
|
}
|
|
3137
2469
|
_clear() {
|
|
@@ -3163,20 +2495,6 @@ class LocationHistory {
|
|
|
3163
2495
|
}
|
|
3164
2496
|
return undefined;
|
|
3165
2497
|
}
|
|
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
2498
|
findLastLocation(routeInfo) {
|
|
3181
2499
|
const routeInfos = this._getRouteInfosByKey(routeInfo.tab);
|
|
3182
2500
|
if (routeInfos) {
|
|
@@ -3208,42 +2526,30 @@ class LocationHistory {
|
|
|
3208
2526
|
canGoBack() {
|
|
3209
2527
|
return this.locationHistory.length > 1;
|
|
3210
2528
|
}
|
|
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
2529
|
}
|
|
3223
2530
|
|
|
3224
2531
|
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
2532
|
constructor(props) {
|
|
3240
2533
|
super(props);
|
|
2534
|
+
this.ionRouterContextValue = {
|
|
2535
|
+
push: (pathname, routerDirection, routeAction, routerOptions, animationBuilder) => {
|
|
2536
|
+
this.navigate(pathname, routerDirection, routeAction, animationBuilder, routerOptions);
|
|
2537
|
+
},
|
|
2538
|
+
back: (animationBuilder) => {
|
|
2539
|
+
this.goBack(undefined, animationBuilder);
|
|
2540
|
+
},
|
|
2541
|
+
canGoBack: () => this.props.locationHistory.canGoBack(),
|
|
2542
|
+
nativeBack: () => this.props.onNativeBack(),
|
|
2543
|
+
routeInfo: this.props.routeInfo,
|
|
2544
|
+
};
|
|
3241
2545
|
this.state = {
|
|
3242
2546
|
goBack: this.goBack.bind(this),
|
|
3243
2547
|
hasIonicRouter: () => true,
|
|
3244
2548
|
navigate: this.navigate.bind(this),
|
|
2549
|
+
getIonRedirect: this.getIonRedirect.bind(this),
|
|
3245
2550
|
getIonRoute: this.getIonRoute.bind(this),
|
|
3246
2551
|
getStackManager: this.getStackManager.bind(this),
|
|
2552
|
+
getPageManager: this.getPageManager.bind(this),
|
|
3247
2553
|
routeInfo: this.props.routeInfo,
|
|
3248
2554
|
setCurrentTab: this.props.onSetCurrentTab,
|
|
3249
2555
|
changeTab: this.props.onChangeTab,
|
|
@@ -3276,6 +2582,12 @@ class NavManager extends React.PureComponent {
|
|
|
3276
2582
|
navigate(path, direction = 'forward', action = 'push', animationBuilder, options, tab) {
|
|
3277
2583
|
this.props.onNavigate(path, action, direction, animationBuilder, options, tab);
|
|
3278
2584
|
}
|
|
2585
|
+
getPageManager() {
|
|
2586
|
+
return PageManager;
|
|
2587
|
+
}
|
|
2588
|
+
getIonRedirect() {
|
|
2589
|
+
return this.props.ionRedirect;
|
|
2590
|
+
}
|
|
3279
2591
|
getIonRoute() {
|
|
3280
2592
|
return this.props.ionRoute;
|
|
3281
2593
|
}
|
|
@@ -3288,8 +2600,8 @@ class NavManager extends React.PureComponent {
|
|
|
3288
2600
|
}
|
|
3289
2601
|
|
|
3290
2602
|
class ViewStacks {
|
|
3291
|
-
viewStacks = {};
|
|
3292
2603
|
constructor() {
|
|
2604
|
+
this.viewStacks = {};
|
|
3293
2605
|
this.add = this.add.bind(this);
|
|
3294
2606
|
this.clear = this.clear.bind(this);
|
|
3295
2607
|
this.getViewItemsForOutlet = this.getViewItemsForOutlet.bind(this);
|
|
@@ -3305,7 +2617,10 @@ class ViewStacks {
|
|
|
3305
2617
|
}
|
|
3306
2618
|
}
|
|
3307
2619
|
clear(outletId) {
|
|
3308
|
-
|
|
2620
|
+
// Give some time for the leaving views to transition before removing
|
|
2621
|
+
return setTimeout(() => {
|
|
2622
|
+
delete this.viewStacks[outletId];
|
|
2623
|
+
}, 500);
|
|
3309
2624
|
}
|
|
3310
2625
|
getViewItemsForOutlet(outletId) {
|
|
3311
2626
|
return this.viewStacks[outletId] || [];
|
|
@@ -3334,5 +2649,5 @@ class ViewStacks {
|
|
|
3334
2649
|
}
|
|
3335
2650
|
}
|
|
3336
2651
|
|
|
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 };
|
|
2652
|
+
export { CreateAnimation, DefaultIonLifeCycleContext, IonAccordion, IonAccordionGroup, IonActionSheet, IonAlert, IonApp, IonAvatar, IonBackButton, IonBackdrop, IonBadge, IonBreadcrumb, IonBreadcrumbs, IonButton, IonButtons, IonCard, IonCardContent, IonCardHeader, IonCardSubtitle, IonCardTitle, IonCheckbox, IonChip, IonCol, IonContent, IonDatetime, IonDatetimeButton, IonFab, IonFabButton, IonFabList, IonFooter, IonGrid, IonHeader, IonIcon, IonImg, IonInfiniteScroll, IonInfiniteScrollContent, IonInput, IonInputOtp, IonInputPasswordToggle, IonItem, IonItemDivider, IonItemGroup, IonItemOption, IonItemOptions, IonItemSliding, IonLabel, IonLifeCycleContext, IonList, IonListHeader, IonLoading, IonMenu, IonMenuButton, IonMenuToggle, IonModal, IonNav, IonNavLink, IonNote, IonPage, IonPicker, IonPickerColumn, IonPickerColumnOption, IonPickerLegacy, IonPopover, IonProgressBar, IonRadio, IonRadioGroup, IonRange, IonRedirect, IonRefresher, IonRefresherContent, IonReorder, IonReorderGroup, IonRippleEffect, IonRoute, IonRouterContext, IonRouterLink, IonRouterOutlet, IonRow, IonSearchbar, IonSegment, IonSegmentButton, IonSegmentContent, IonSegmentView, IonSelect, IonSelectModal, IonSelectOption, IonSkeletonText, IonSpinner, IonSplitPane, IonTab, IonTabBar, IonTabButton, IonTabs, IonTabsContext, IonText, IonTextarea, IonThumbnail, IonTitle, IonToast, IonToggle, IonToolbar, LocationHistory, NavContext, NavManager, RouteManagerContext, StackContext, ViewLifeCycleManager, ViewStacks, generateId, getConfig, getPlatforms, isPlatform, setupIonicReact, useIonActionSheet, useIonAlert, useIonLoading, useIonModal, useIonPicker, useIonPopover, useIonRouter, useIonToast, useIonViewDidEnter, useIonViewDidLeave, useIonViewWillEnter, useIonViewWillLeave, withIonLifeCycle };
|
|
3338
2653
|
//# sourceMappingURL=index.js.map
|