javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-16 18:17:31 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(): React Build Scripts (#19501)

Browse Source
This commit is contained in:
Ely Lucas
2019-10-07 10:37:20 -06:00
committed by GitHub
parent aed2dba5aa
commit 8706ecf9c3
26 changed files with 1629 additions and 1273 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react-router/src/ReactRouter/IonRouteData.ts
View File

@ -1,4 +1,4 @@
import { match, RouteProps } from 'react-router-dom';
import { RouteProps, match } from 'react-router-dom';
export interface IonRouteData {
match: match<{ tab: string }> | null;

35
packages/react-router/src/ReactRouter/NavManager.tsx
View File

@ -3,22 +3,23 @@ import { NavContext, NavContextState } from '@ionic/react';
import { Location as HistoryLocation, UnregisterCallback } from 'history';
import React from 'react';
import { RouteComponentProps } from 'react-router-dom';
import { StackManager } from './StackManager';
import { generateId } from '../utils';
import { LocationHistory } from '../utils/LocationHistory'
import { LocationHistory } from '../utils/LocationHistory';
import { StackManager } from './StackManager';
import { ViewItem } from './ViewItem';
import { ViewStack } from './ViewStacks';
interface NavManagerProps extends RouteComponentProps {
findViewInfoByLocation: (location: HistoryLocation) => {view?: ViewItem, viewStack?: ViewStack };
findViewInfoById: (id: string) => {view?: ViewItem, viewStack?: ViewStack };
getActiveIonPage: () => {view?: ViewItem, viewStack?: ViewStack };
};
interface NavManagerState extends NavContextState {};
findViewInfoByLocation: (location: HistoryLocation) => { view?: ViewItem, viewStack?: ViewStack };
findViewInfoById: (id: string) => { view?: ViewItem, viewStack?: ViewStack };
getActiveIonPage: () => { view?: ViewItem, viewStack?: ViewStack };
}
export class NavManager extends React.Component<NavManagerProps, NavManagerState> {
export class NavManager extends React.Component<NavManagerProps, NavContextState> {
listenUnregisterCallback: UnregisterCallback;
listenUnregisterCallback: UnregisterCallback | undefined;
locationHistory: LocationHistory = new LocationHistory();
constructor(props: NavManagerProps) {
@ -32,13 +33,13 @@ export class NavManager extends React.Component<NavManagerProps, NavManagerState
getStackManager: this.getStackManager.bind(this),
getPageManager: this.getPageManager.bind(this),
currentPath: this.props.location.pathname,
registerIonPage: () => {} //overridden in View for each IonPage
}
registerIonPage: () => { return; } // overridden in View for each IonPage
};
this.listenUnregisterCallback = this.props.history.listen((location: HistoryLocation) => {
this.setState({
currentPath: location.pathname
})
});
this.locationHistory.add(location);
});
@ -52,7 +53,7 @@ export class NavManager extends React.Component<NavManagerProps, NavManagerState
}
componentWillUnmount() {
if(this.listenUnregisterCallback) {
if (this.listenUnregisterCallback) {
this.listenUnregisterCallback();
}
}
@ -69,10 +70,14 @@ export class NavManager extends React.Component<NavManagerProps, NavManagerState
this.props.history.replace(enteringView.routeData.match.url, { direction: 'back' });
}
} else {
defaultHref && this.props.history.replace(defaultHref, { direction: 'back' });
if (defaultHref) {
this.props.history.replace(defaultHref, { direction: 'back' });
}
}
} else {
defaultHref && this.props.history.replace(defaultHref, { direction: 'back' });
if (defaultHref) {
this.props.history.replace(defaultHref, { direction: 'back' });
}
}
}

7
packages/react-router/src/ReactRouter/RouteManagerContext.ts
View File

@ -1,5 +1,6 @@
import React, { ReactNode } from 'react';
import { NavDirection } from '@ionic/core';
import React, { ReactNode } from 'react';
import { ViewStacks } from './ViewStacks';
export interface RouteManagerContextState {
@ -15,11 +16,11 @@ export const RouteManagerContext = /*@__PURE__*/React.createContext<RouteManager
viewStacks: new ViewStacks(),
syncView: () => { navContextNotFoundError(); },
hideView: () => { navContextNotFoundError(); },
setupIonRouter: () => { return Promise.reject(navContextNotFoundError()) },
setupIonRouter: () => Promise.reject(navContextNotFoundError()),
removeViewStack: () => { navContextNotFoundError(); },
transitionView: () => { navContextNotFoundError(); }
});
function navContextNotFoundError() {
console.error('IonReactRouter not found, did you add it to the app?')
console.error('IonReactRouter not found, did you add it to the app?');
}

101
packages/react-router/src/ReactRouter/Router.tsx
View File

@ -2,27 +2,26 @@ import { NavDirection } from '@ionic/core';
import { RouterDirection } from '@ionic/react';
import { Action as HistoryAction, Location as HistoryLocation, UnregisterCallback } from 'history';
import React from 'react';
import { BrowserRouter, BrowserRouterProps, matchPath, RouteComponentProps, withRouter } from 'react-router-dom';
import { BrowserRouter, BrowserRouterProps, RouteComponentProps, matchPath, withRouter } from 'react-router-dom';
import { generateId } from '../utils';
import { IonRouteData } from './IonRouteData';
import { NavManager } from './NavManager';
import { RouteManagerContext, RouteManagerContextState } from './RouteManagerContext';
import { ViewItem } from './ViewItem';
import { ViewStacks, ViewStack } from './ViewStacks';
interface RouteManagerProps extends RouteComponentProps { }
import { ViewStack, ViewStacks } from './ViewStacks';
interface RouteManagerState extends RouteManagerContextState {
location?: HistoryLocation,
action?: HistoryAction
location?: HistoryLocation;
action?: HistoryAction;
}
class RouteManager extends React.Component<RouteManagerProps, RouteManagerState> {
class RouteManager extends React.Component<RouteComponentProps, RouteManagerState> {
listenUnregisterCallback: UnregisterCallback | undefined;
activeIonPageId?: string;
constructor(props: RouteManagerProps) {
constructor(props: RouteComponentProps) {
super(props);
this.listenUnregisterCallback = this.props.history.listen(this.historyChange.bind(this));
this.state = {
@ -35,7 +34,7 @@ class RouteManager extends React.Component<RouteManagerProps, RouteManagerState>
};
}
componentDidUpdate(_prevProps: RouteManagerProps, prevState: RouteManagerState) {
componentDidUpdate(_prevProps: RouteComponentProps, prevState: RouteManagerState) {
// Trigger a page change if the location or action is different
if (this.state.location && prevState.location !== this.state.location || prevState.action !== this.state.action) {
this.setActiveView(this.state.location!, this.state.action!);
@ -61,7 +60,7 @@ class RouteManager extends React.Component<RouteManagerProps, RouteManagerState>
this.setState({
location,
action
})
});
}
setActiveView(location: HistoryLocation, action: HistoryAction) {
@ -77,36 +76,33 @@ class RouteManager extends React.Component<RouteManagerProps, RouteManagerState>
}
leavingView = viewStacks.findViewInfoById(this.activeIonPageId).view;
if (enteringView) {
if (enteringView.isIonRoute) {
enteringView.show = true;
enteringView.mount = true;
enteringView.routeData.match = match!;
if (enteringView.isIonRoute) {
enteringView.show = true;
enteringView.mount = true;
enteringView.routeData.match = match!;
this.activeIonPageId = enteringView.id;
this.activeIonPageId = enteringView.id;
if (leavingView) {
if (direction === 'forward') {
if (action === 'PUSH') {
/**
* If the page is being pushed into the stack by another view,
* record the view that originally directed to the new view for back button purposes.
*/
enteringView.prevId = enteringView.prevId || leavingView.id;
} else {
direction = direction || 'back';
leavingView.mount = false;
}
} else if (action === 'REPLACE') {
if (leavingView) {
if (direction === 'forward') {
if (action === 'PUSH') {
/**
* If the page is being pushed into the stack by another view,
* record the view that originally directed to the new view for back button purposes.
*/
enteringView.prevId = enteringView.prevId || leavingView.id;
} else {
direction = direction || 'back';
leavingView.mount = false;
}
} else if (action === 'REPLACE') {
leavingView.mount = false;
}
} else {
enteringView.show = true;
enteringView.mount = true;
enteringView.routeData.match = match!;
}
} else {
enteringView.show = true;
enteringView.mount = true;
enteringView.routeData.match = match!;
}
});
@ -120,7 +116,7 @@ class RouteManager extends React.Component<RouteManagerProps, RouteManagerState>
this.setState({
viewStacks
}, () => {
const { view: enteringView, viewStack } = this.state.viewStacks.findViewInfoById(this.activeIonPageId)
const { view: enteringView, viewStack } = this.state.viewStacks.findViewInfoById(this.activeIonPageId);
if (enteringView && viewStack) {
const enteringEl = enteringView.ionPageElement ? enteringView.ionPageElement : undefined;
const leavingEl = leavingView && leavingView.ionPageElement ? leavingView.ionPageElement : undefined;
@ -132,7 +128,7 @@ class RouteManager extends React.Component<RouteManagerProps, RouteManagerState>
enteringEl!,
leavingEl!,
viewStack.routerOutlet,
navDirection)
navDirection);
} else if (leavingEl) {
leavingEl.classList.add('ion-page-hidden');
leavingEl.setAttribute('aria-hidden', 'true');
@ -142,7 +138,9 @@ class RouteManager extends React.Component<RouteManagerProps, RouteManagerState>
}
componentWillUnmount() {
this.listenUnregisterCallback && this.listenUnregisterCallback();
if (this.listenUnregisterCallback) {
this.listenUnregisterCallback();
}
}
async setupIonRouter(id: string, children: any, routerOutlet: HTMLIonRouterOutletElement) {
@ -172,12 +170,12 @@ class RouteManager extends React.Component<RouteManagerProps, RouteManagerState>
match,
childProps: child.props
},
route: route,
route,
mount: true,
show: !!match,
isIonRoute: false
};
if (!!match && view.isIonRoute) {
if (match && view.isIonRoute) {
activeId = viewId;
}
return view;
@ -186,9 +184,9 @@ class RouteManager extends React.Component<RouteManagerProps, RouteManagerState>
async registerViewStack(stack: string, activeId: string | undefined, stackItems: ViewItem[], routerOutlet: HTMLIonRouterOutletElement, _location: HistoryLocation) {
return new Promise((resolve) => {
this.setState((prevState) => {
const prevViewStacks = Object.assign(new ViewStacks, prevState.viewStacks);
return new Promise(resolve => {
this.setState(prevState => {
const prevViewStacks = Object.assign(new ViewStacks(), prevState.viewStacks);
const newStack: ViewStack = {
id: stack,
views: stackItems,
@ -205,7 +203,7 @@ class RouteManager extends React.Component<RouteManagerProps, RouteManagerState>
resolve();
});
});
};
}
removeViewStack(stack: string) {
const viewStacks = Object.assign(new ViewStacks(), this.state.viewStacks);
@ -216,7 +214,7 @@ class RouteManager extends React.Component<RouteManagerProps, RouteManagerState>
}
syncView(page: HTMLElement, viewId: string) {
this.setState((state) => {
this.setState(state => {
const viewStacks = Object.assign(new ViewStacks(), state.viewStacks);
const { view } = viewStacks.findViewInfoById(viewId);
@ -226,14 +224,14 @@ class RouteManager extends React.Component<RouteManagerProps, RouteManagerState>
return {
viewStacks
}
};
}, () => {
this.setActiveView(this.state.location || this.props.location, this.state.action!);
})
});
}
transitionView(enteringEl: HTMLElement, leavingEl: HTMLElement, ionRouterOutlet: HTMLIonRouterOutletElement, direction?: NavDirection) {
transitionView(enteringEl: HTMLElement, leavingEl: HTMLElement, ionRouterOutlet?: HTMLIonRouterOutletElement, direction?: NavDirection) {
/**
* Super hacky workaround to make sure ionRouterOutlet is available
* since transitionView might be called before IonRouterOutlet is fully mounted
@ -256,7 +254,7 @@ class RouteManager extends React.Component<RouteManagerProps, RouteManagerState>
await ionRouterOuter.commit(enteringEl, leavingEl, {
deepWait: true,
duration: direction === undefined ? 0 : undefined,
direction: direction,
direction,
showGoBack: direction === 'forward',
progressAnimation: false
});
@ -271,7 +269,8 @@ class RouteManager extends React.Component<RouteManagerProps, RouteManagerState>
render() {
return (
<RouteManagerContext.Provider value={this.state}>
<NavManager {...this.props}
<NavManager
{...this.props}
findViewInfoById={(id: string) => this.state.viewStacks.findViewInfoById(id)}
findViewInfoByLocation={(location: HistoryLocation) => this.state.viewStacks.findViewInfoByLocation(location)}
getActiveIonPage={() => this.state.viewStacks.findViewInfoById(this.activeIonPageId)}
@ -281,7 +280,7 @@ class RouteManager extends React.Component<RouteManagerProps, RouteManagerState>
</RouteManagerContext.Provider>
);
}
};
}
const RouteManagerWithRouter = withRouter(RouteManager);
RouteManagerWithRouter.displayName = 'RouteManager';

23
packages/react-router/src/ReactRouter/StackManager.tsx
View File

@ -1,17 +1,17 @@
import React from 'react';
import { generateId, isDevMode } from '../utils';
import { View } from './View';
import { ViewTransitionManager } from './ViewTransitionManager';
import { RouteManagerContext } from './RouteManagerContext';
import { View } from './View';
import { ViewItem } from './ViewItem';
import { ViewTransitionManager } from './ViewTransitionManager';
type StackManagerProps = {
interface StackManagerProps {
id?: string;
};
}
type StackManagerState = {}
export class StackManager extends React.Component<StackManagerProps, StackManagerState> {
export class StackManager extends React.Component<StackManagerProps, {}> {
routerOutletEl: React.RefObject<HTMLIonRouterOutletElement> = React.createRef();
context!: React.ContextType<typeof RouteManagerContext>;
id: string;
@ -52,7 +52,7 @@ export class StackManager extends React.Component<StackManagerProps, StackManage
const views = (viewStack || { views: [] }).views.filter(x => x.show);
const ionRouterOutlet = React.Children.only(this.props.children) as React.ReactElement;
const childElements = views.map((view) => {
const childElements = views.map(view => {
return (
<ViewTransitionManager
id={view.id}
@ -72,15 +72,14 @@ export class StackManager extends React.Component<StackManagerProps, StackManage
const elementProps: any = {
ref: this.routerOutletEl
}
};
if(isDevMode()) {
elementProps['data-stack-id'] = this.id
if (isDevMode()) {
elementProps['data-stack-id'] = this.id;
}
const routerOutletChild = React.cloneElement(ionRouterOutlet, elementProps, childElements);
return routerOutletChild;
}

18
packages/react-router/src/ReactRouter/View.tsx
View File

@ -1,21 +1,21 @@
import React from 'react';
import { IonLifeCycleContext, NavContext } from '@ionic/react';
import { ViewItem } from './ViewItem';
import { Route, Redirect } from 'react-router-dom';
import React from 'react';
import { Redirect, Route } from 'react-router-dom';
import { isDevMode } from '../utils';
import { ViewItem } from './ViewItem';
interface ViewProps extends React.HTMLAttributes<HTMLElement> {
onViewSync: (page: HTMLElement, viewId: string) => void;
onHideView: (viewId: string) => void;
view: ViewItem;
};
interface StackViewState { }
}
/**
* The View component helps manage the IonPage's lifecycle and registration
*/
export class View extends React.Component<ViewProps, StackViewState> {
export class View extends React.Component<ViewProps, {}> {
context!: React.ContextType<typeof IonLifeCycleContext>;
ionPage?: HTMLElement;
@ -65,7 +65,7 @@ export class View extends React.Component<ViewProps, StackViewState> {
this.ionPage.addEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this));
this.ionPage.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this));
this.ionPage.classList.add('ion-page-invisible');
if(isDevMode()) {
if (isDevMode()) {
this.ionPage.setAttribute('data-view-id', this.props.view.id);
}
this.props.onViewSync(page, this.props.view.id);
@ -78,7 +78,7 @@ export class View extends React.Component<ViewProps, StackViewState> {
const newProvider = {
...value,
registerIonPage: this.registerIonPage.bind(this)
}
};
return (
<NavContext.Provider value={newProvider}>
{this.props.children}

9
packages/react-router/src/ReactRouter/ViewManager.tsx
View File

@ -1,14 +1,11 @@
import * as React from 'react';
import { deprecationWarning } from '../utils';
interface ViewManagerProps { }
interface ViewManagerState { }
export class ViewManager extends React.Component<ViewManagerProps, ViewManagerState> {
export class ViewManager extends React.Component<{}, {}> {
componentDidMount() {
deprecationWarning('As of @ionic/react RC2, ViewManager is no longer needed and can be removed. This component is now deprecated will be removed from @ionic/react final.')
deprecationWarning('As of @ionic/react RC2, ViewManager is no longer needed and can be removed. This component is now deprecated will be removed from @ionic/react final.');
}
render() {

34
packages/react-router/src/ReactRouter/ViewStacks.ts
View File

@ -1,19 +1,20 @@
import { Location as HistoryLocation } from 'history';
import { ViewItem } from './ViewItem';
import { IonRouteData } from './IonRouteData';
import { matchPath } from 'react-router-dom';
import { IonRouteData } from './IonRouteData';
import { ViewItem } from './ViewItem';
export interface ViewStack {
id: string;
routerOutlet: HTMLIonRouterOutletElement;
views: ViewItem[]
views: ViewItem[];
}
/**
* The holistic view of all the Routes configured for an application inside of an IonRouterOutlet.
*/
export class ViewStacks {
private viewStacks: { [key: string]: ViewStack } = {};
private viewStacks: { [key: string]: ViewStack | undefined } = {};
get(key: string) {
return this.viewStacks[key];
@ -31,12 +32,12 @@ export class ViewStacks {
delete this.viewStacks[key];
}
findViewInfoByLocation(location: HistoryLocation, key?: string) {
findViewInfoByLocation(location: HistoryLocation, viewKey?: string) {
let view: ViewItem<IonRouteData> | undefined;
let match: IonRouteData["match"] | null | undefined;
let match: IonRouteData['match'] | null | undefined;
let viewStack: ViewStack | undefined;
if (key) {
viewStack = this.viewStacks[key];
if (viewKey) {
viewStack = this.viewStacks[viewKey];
if (viewStack) {
viewStack.views.some(matchView);
}
@ -44,7 +45,7 @@ export class ViewStacks {
const keys = this.getKeys();
keys.some(key => {
viewStack = this.viewStacks[key];
return viewStack.views.some(matchView);
return viewStack!.views.some(matchView);
});
}
@ -57,7 +58,7 @@ export class ViewStacks {
path: v.routeData.childProps.path || v.routeData.childProps.from,
component: v.routeData.childProps.component
};
match = matchPath(location.pathname, matchProps)
match = matchPath(location.pathname, matchProps);
if (match) {
view = v;
return true;
@ -67,13 +68,13 @@ export class ViewStacks {
}
findViewInfoById(id: string = '') {
findViewInfoById(id = '') {
let view: ViewItem<IonRouteData> | undefined;
let viewStack: ViewStack | undefined;
const keys = this.getKeys();
keys.some(key => {
const vs = this.viewStacks[key];
view = vs.views.find(x => x.id === id);
view = vs!.views.find(x => x.id === id);
if (view) {
viewStack = vs;
return true;
@ -88,13 +89,12 @@ export class ViewStacks {
const keys = this.getKeys();
keys.forEach(key => {
const viewStack = this.viewStacks[key];
viewStack.views.forEach(view => {
if(!view.routeData.match && !view.isIonRoute) {
viewStack!.views.forEach(view => {
if (!view.routeData.match && !view.isIonRoute) {
view.show = false;
view.mount = false;
}
})
})
});
});
}
}

7
packages/react-router/src/ReactRouter/ViewTransitionManager.tsx
View File

@ -1,5 +1,6 @@
import { DefaultIonLifeCycleContext, IonLifeCycleContext } from '@ionic/react';
import React from 'react';
import { IonLifeCycleContext, DefaultIonLifeCycleContext } from '@ionic/react';
import { RouteManagerContext } from './RouteManagerContext';
interface ViewTransitionManagerProps {
@ -20,7 +21,7 @@ export class ViewTransitionManager extends React.Component<ViewTransitionManager
context!: React.ContextType<typeof RouteManagerContext>;
constructor(props: ViewTransitionManagerProps) {
super(props)
super(props);
this.state = {
show: true
};
@ -52,7 +53,7 @@ export class ViewTransitionManager extends React.Component<ViewTransitionManager
<IonLifeCycleContext.Provider value={this.ionLifeCycleContext}>
{show && this.props.children}
</IonLifeCycleContext.Provider>
)
);
}
static get contextType() {