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): adding prettier and formating files

Browse Source
This commit is contained in:
Ely Lucas
2020-12-07 09:31:33 -07:00
committed by GitHub
parent 01afdc42e5
commit 91aaaab71a
163 changed files with 3205 additions and 2535 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,9 @@
import { Action as HistoryAction, History, Location as HistoryLocation, createHashHistory as createHistory } from 'history';
import {
Action as HistoryAction,
History,
Location as HistoryLocation,
createHashHistory as createHistory,
} from 'history';
import React from 'react';
import { BrowserRouterProps, Router } from 'react-router-dom';
@ -10,7 +15,7 @@ interface IonReactHashRouterProps extends BrowserRouterProps {
export class IonReactHashRouter extends React.Component<IonReactHashRouterProps> {
history: History;
historyListenHandler?: ((location: HistoryLocation, action: HistoryAction) => void);
historyListenHandler?: (location: HistoryLocation, action: HistoryAction) => void;
constructor(props: IonReactHashRouterProps) {
super(props);

2
packages/react-router/src/ReactRouter/IonReactMemoryRouter.tsx
View File

@ -10,7 +10,7 @@ interface IonReactMemoryRouterProps extends MemoryRouterProps {
export class IonReactMemoryRouter extends React.Component<IonReactMemoryRouterProps> {
history: MemoryHistory;
historyListenHandler?: ((location: HistoryLocation, action: HistoryAction) => void);
historyListenHandler?: (location: HistoryLocation, action: HistoryAction) => void;
constructor(props: IonReactMemoryRouterProps) {
super(props);

10
packages/react-router/src/ReactRouter/IonReactRouter.tsx
View File

@ -1,4 +1,9 @@
import { Action as HistoryAction, History, Location as HistoryLocation, createBrowserHistory as createHistory } from 'history';
import {
Action as HistoryAction,
History,
Location as HistoryLocation,
createBrowserHistory as createHistory,
} from 'history';
import React from 'react';
import { BrowserRouterProps, Router } from 'react-router-dom';
@ -9,8 +14,7 @@ interface IonReactRouterProps extends BrowserRouterProps {
}
export class IonReactRouter extends React.Component<IonReactRouterProps> {
historyListenHandler?: ((location: HistoryLocation, action: HistoryAction) => void);
historyListenHandler?: (location: HistoryLocation, action: HistoryAction) => void;
history: History;
constructor(props: IonReactRouterProps) {

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

@ -5,7 +5,12 @@ import { Route } from 'react-router';
export class IonRouteInner extends React.PureComponent<IonRouteProps> {
render() {
return (
<Route path={this.props.path} exact={this.props.exact} render={this.props.render} computedMatch={(this.props as any).computedMatch} />
<Route
path={this.props.path}
exact={this.props.exact}
render={this.props.render}
computedMatch={(this.props as any).computedMatch}
/>
);
}
}

54
packages/react-router/src/ReactRouter/IonRouter.tsx
View File

@ -9,7 +9,7 @@ import {
RouterDirection,
ViewItem,
generateId,
getConfig
getConfig,
} from '@ionic/react';
import { Action as HistoryAction, Location as HistoryLocation } from 'history';
import React from 'react';
@ -21,11 +21,13 @@ import StackManager from './StackManager';
export interface LocationState {
direction?: RouterDirection;
routerOptions?: { as?: string, unmount?: boolean; };
routerOptions?: { as?: string; unmount?: boolean };
}
interface IonRouteProps extends RouteComponentProps<{}, {}, LocationState> {
registerHistoryListener: (cb: (location: HistoryLocation<any>, action: HistoryAction) => void) => void;
registerHistoryListener: (
cb: (location: HistoryLocation<any>, action: HistoryAction) => void
) => void;
}
interface IonRouteState {
@ -48,7 +50,7 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
findViewItemByRouteInfo: this.viewStack.findViewItemByRouteInfo,
findLeavingViewItemByRouteInfo: this.viewStack.findLeavingViewItemByRouteInfo,
addViewItem: this.viewStack.add,
unMountViewItem: this.viewStack.remove
unMountViewItem: this.viewStack.remove,
};
constructor(props: IonRouteProps) {
@ -57,7 +59,7 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
const routeInfo = {
id: generateId('routeInfo'),
pathname: this.props.location.pathname,
search: this.props.location.search
search: this.props.location.search,
};
this.locationHistory.add(routeInfo);
@ -70,7 +72,7 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
this.handleSetCurrentTab = this.handleSetCurrentTab.bind(this);
this.state = {
routeInfo
routeInfo,
};
}
@ -112,7 +114,7 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
this.incomingRouteParams = {
routeAction: 'replace',
routeDirection: 'none',
tab: this.currentTab // TODO this isn't legit if replacing to a page that is not in the tabs
tab: this.currentTab, // TODO this isn't legit if replacing to a page that is not in the tabs
};
}
if (action === 'POP') {
@ -125,7 +127,7 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
this.incomingRouteParams = {
routeAction: 'pop',
routeDirection: direction,
tab: this.currentTab
tab: this.currentTab,
};
}
}
@ -134,7 +136,7 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
routeAction: 'push',
routeDirection: location.state?.direction || 'forward',
routeOptions: location.state?.routerOptions,
tab: this.currentTab
tab: this.currentTab,
};
}
}
@ -143,12 +145,14 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
if (this.incomingRouteParams?.id) {
routeInfo = {
...this.incomingRouteParams as RouteInfo,
lastPathname: leavingLocationInfo.pathname
...(this.incomingRouteParams as RouteInfo),
lastPathname: leavingLocationInfo.pathname,
};
this.locationHistory.add(routeInfo);
} else {
const isPushed = (this.incomingRouteParams.routeAction === 'push' && this.incomingRouteParams.routeDirection === 'forward');
const isPushed =
this.incomingRouteParams.routeAction === 'push' &&
this.incomingRouteParams.routeDirection === 'forward';
routeInfo = {
id: generateId('routeInfo'),
...this.incomingRouteParams,
@ -156,7 +160,7 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
pathname: location.pathname,
search: location.search,
params: this.props.match.params,
prevRouteLastPathname: leavingLocationInfo.lastPathname
prevRouteLastPathname: leavingLocationInfo.lastPathname,
};
if (isPushed) {
routeInfo.tab = leavingLocationInfo.tab;
@ -182,7 +186,7 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
}
this.setState({
routeInfo
routeInfo,
});
}
@ -193,13 +197,20 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
this.props.history.goBack();
}
handleNavigate(path: string, routeAction: RouteAction, routeDirection?: RouterDirection, routeAnimation?: AnimationBuilder, routeOptions?: any, tab?: string) {
handleNavigate(
path: string,
routeAction: RouteAction,
routeDirection?: RouterDirection,
routeAnimation?: AnimationBuilder,
routeOptions?: any,
tab?: string
) {
this.incomingRouteParams = Object.assign(this.incomingRouteParams || {}, {
routeAction,
routeDirection,
routeOptions,
routeAnimation,
tab
tab,
});
if (routeAction === 'push') {
@ -216,7 +227,12 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
if (routeInfo && routeInfo.pushedByRoute) {
const prevInfo = this.locationHistory.findLastLocation(routeInfo);
if (prevInfo) {
this.incomingRouteParams = { ...prevInfo, routeAction: 'pop', routeDirection: 'back', routeAnimation: routeAnimation || routeInfo.routeAnimation };
this.incomingRouteParams = {
...prevInfo,
routeAction: 'pop',
routeDirection: 'back',
routeAnimation: routeAnimation || routeInfo.routeAnimation,
};
if (routeInfo.lastPathname === routeInfo.pushedByRoute) {
this.props.history.goBack();
} else {
@ -252,9 +268,7 @@ class IonRouterInner extends React.PureComponent<IonRouteProps, IonRouteState> {
render() {
return (
<RouteManagerContext.Provider
value={this.routeMangerContextState}
>
<RouteManagerContext.Provider value={this.routeMangerContextState}>
<NavManager
ionRoute={IonRouteInner}
ionRedirect={{}}

67
packages/react-router/src/ReactRouter/ReactRouterViewStack.tsx
View File

@ -1,9 +1,15 @@
import { IonRoute, RouteInfo, ViewItem, ViewLifeCycleManager, ViewStacks, generateId } from '@ionic/react';
import {
IonRoute,
RouteInfo,
ViewItem,
ViewLifeCycleManager,
ViewStacks,
generateId,
} from '@ionic/react';
import React from 'react';
import { matchPath } from 'react-router';
export class ReactRouterViewStack extends ViewStacks {
constructor() {
super();
this.createViewItem = this.createViewItem.bind(this);
@ -13,20 +19,25 @@ export class ReactRouterViewStack extends ViewStacks {
this.findViewItemByPathname = this.findViewItemByPathname.bind(this);
}
createViewItem(outletId: string, reactElement: React.ReactElement, routeInfo: RouteInfo, page?: HTMLElement) {
createViewItem(
outletId: string,
reactElement: React.ReactElement,
routeInfo: RouteInfo,
page?: HTMLElement
) {
const viewItem: ViewItem = {
id: generateId('viewItem'),
outletId,
ionPageElement: page,
reactElement,
mount: true,
ionRoute: false
ionRoute: false,
};
const matchProps = {
exact: reactElement.props.exact,
path: reactElement.props.path || reactElement.props.from,
component: reactElement.props.component
component: reactElement.props.component,
};
const match = matchPath(routeInfo.pathname, matchProps);
@ -38,7 +49,7 @@ export class ReactRouterViewStack extends ViewStacks {
viewItem.routeData = {
match,
childProps: reactElement.props
childProps: reactElement.props,
};
return viewItem;
@ -49,7 +60,7 @@ export class ReactRouterViewStack extends ViewStacks {
// Sync latest routes with viewItems
React.Children.forEach(ionRouterOutlet.props.children, (child: React.ReactElement) => {
const viewItem = viewItems.find(v => {
const viewItem = viewItems.find((v) => {
return matchComponent(child, v.routeData.childProps.path || v.routeData.childProps.from);
});
if (viewItem) {
@ -57,23 +68,30 @@ export class ReactRouterViewStack extends ViewStacks {
}
});
const children = viewItems.map(viewItem => {
const children = viewItems.map((viewItem) => {
let clonedChild;
if (viewItem.ionRoute && !viewItem.disableIonPageManagement) {
clonedChild = (
<ViewLifeCycleManager key={`view-${viewItem.id}`} mount={viewItem.mount} removeView={() => this.remove(viewItem)}>
<ViewLifeCycleManager
key={`view-${viewItem.id}`}
mount={viewItem.mount}
removeView={() => this.remove(viewItem)}
>
{React.cloneElement(viewItem.reactElement, {
computedMatch: viewItem.routeData.match
computedMatch: viewItem.routeData.match,
})}
</ViewLifeCycleManager>
);
} else {
const match = matchComponent(viewItem.reactElement, routeInfo.pathname);
clonedChild = (
<ViewLifeCycleManager key={`view-${viewItem.id}`} mount={viewItem.mount} removeView={() => this.remove(viewItem)}>
<ViewLifeCycleManager
key={`view-${viewItem.id}`}
mount={viewItem.mount}
removeView={() => this.remove(viewItem)}
>
{React.cloneElement(viewItem.reactElement, {
computedMatch: viewItem.routeData.match
computedMatch: viewItem.routeData.match,
})}
</ViewLifeCycleManager>
);
@ -98,7 +116,12 @@ export class ReactRouterViewStack extends ViewStacks {
}
findLeavingViewItemByRouteInfo(routeInfo: RouteInfo, outletId?: string, mustBeIonRoute = true) {
const { viewItem } = this.findViewItemByPath(routeInfo.lastPathname!, outletId, false, mustBeIonRoute);
const { viewItem } = this.findViewItemByPath(
routeInfo.lastPathname!,
outletId,
false,
mustBeIonRoute
);
return viewItem;
}
@ -107,8 +130,12 @@ export class ReactRouterViewStack extends ViewStacks {
return viewItem;
}
private findViewItemByPath(pathname: string, outletId?: string, forceExact?: boolean, mustBeIonRoute?: boolean) {
private findViewItemByPath(
pathname: string,
outletId?: string,
forceExact?: boolean,
mustBeIonRoute?: boolean
) {
let viewItem: ViewItem | undefined;
let match: ReturnType<typeof matchPath> | undefined;
let viewStack: ViewItem[];
@ -136,7 +163,7 @@ export class ReactRouterViewStack extends ViewStacks {
const matchProps = {
exact: forceExact ? true : v.routeData.childProps.exact,
path: v.routeData.childProps.path || v.routeData.childProps.from,
component: v.routeData.childProps.component
component: v.routeData.childProps.component,
};
const myMatch = matchPath(pathname, matchProps);
if (myMatch) {
@ -154,23 +181,21 @@ export class ReactRouterViewStack extends ViewStacks {
path: pathname,
url: pathname,
isExact: true,
params: {}
params: {},
};
viewItem = v;
return true;
}
return false;
}
}
}
function matchComponent(node: React.ReactElement, pathname: string, forceExact?: boolean) {
const matchProps = {
exact: forceExact ? true : node.props.exact,
path: node.props.path || node.props.from,
component: node.props.component
component: node.props.component,
};
const match = matchPath(pathname, matchProps);

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

@ -5,7 +5,7 @@ import {
StackContextState,
ViewItem,
generateId,
getConfig
getConfig,
} from '@ionic/react';
import React from 'react';
import { matchPath } from 'react-router-dom';
@ -16,7 +16,7 @@ interface StackManagerProps {
routeInfo: RouteInfo;
}
interface StackManagerState { }
interface StackManagerState {}
export class StackManager extends React.PureComponent<StackManagerProps, StackManagerState> {
id: string;
@ -26,7 +26,7 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
stackContextValue: StackContextState = {
registerIonPage: this.registerIonPage.bind(this),
isInOutlet: () => true
isInOutlet: () => true,
};
constructor(props: StackManagerProps) {
@ -57,7 +57,6 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
}
async handlePageTransition(routeInfo: RouteInfo) {
// If routerOutlet isn't quite ready, give it another try in a moment
if (!this.routerOutletElement || !this.routerOutletElement.commit) {
setTimeout(() => this.handlePageTransition(routeInfo), 10);
@ -66,7 +65,10 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
let leavingViewItem = this.context.findLeavingViewItemByRouteInfo(routeInfo, this.id);
if (!leavingViewItem && routeInfo.prevRouteLastPathname) {
leavingViewItem = this.context.findViewItemByPathname(routeInfo.prevRouteLastPathname, this.id);
leavingViewItem = this.context.findViewItemByPathname(
routeInfo.prevRouteLastPathname,
this.id
);
}
// Check if leavingViewItem should be unmounted
@ -74,7 +76,7 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
if (routeInfo.routeAction === 'replace') {
leavingViewItem.mount = false;
} else if (!(routeInfo.routeAction === 'push' && routeInfo.routeDirection === 'forward')) {
if (routeInfo.routeDirection !== 'none' && (enteringViewItem !== leavingViewItem)) {
if (routeInfo.routeDirection !== 'none' && enteringViewItem !== leavingViewItem) {
leavingViewItem.mount = false;
}
} else if (routeInfo.routeOptions?.unmount) {
@ -82,7 +84,10 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
}
}
const enteringRoute = matchRoute(this.ionRouterOutlet?.props.children, routeInfo) as React.ReactElement;
const enteringRoute = matchRoute(
this.ionRouterOutlet?.props.children,
routeInfo
) as React.ReactElement;
if (enteringViewItem) {
enteringViewItem.reactElement = enteringRoute;
}
@ -120,7 +125,6 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
}
async setupRouterOutlet(routerOutlet: HTMLIonRouterOutletElement) {
const canStart = () => {
const config = getConfig();
const swipeEnabled = config && config.get('swipeBackEnabled', routerOutlet.mode === 'ios');
@ -137,20 +141,28 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
routerOutlet.swipeHandler = {
canStart,
onStart,
onEnd: _shouldContinue => true
onEnd: (_shouldContinue) => true,
};
}
async transitionPage(routeInfo: RouteInfo, enteringViewItem: ViewItem, leavingViewItem?: ViewItem) {
async transitionPage(
routeInfo: RouteInfo,
enteringViewItem: ViewItem,
leavingViewItem?: ViewItem
) {
const routerOutlet = this.routerOutletElement!;
const direction = (routeInfo.routeDirection === 'none' || routeInfo.routeDirection === 'root')
? undefined
: routeInfo.routeDirection;
const direction =
routeInfo.routeDirection === 'none' || routeInfo.routeDirection === 'root'
? undefined
: routeInfo.routeDirection;
if (enteringViewItem && enteringViewItem.ionPageElement && this.routerOutletElement) {
if (leavingViewItem && leavingViewItem.ionPageElement && (enteringViewItem === leavingViewItem)) {
if (
leavingViewItem &&
leavingViewItem.ionPageElement &&
enteringViewItem === leavingViewItem
) {
// If a page is transitioning to another version of itself
// we clone it so we can have an animation to show
@ -184,7 +196,7 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
direction: direction as any,
showGoBack: direction === 'forward',
progressAnimation: false,
animationBuilder: routeInfo.routeAnimation
animationBuilder: routeInfo.routeAnimation,
});
}
}
@ -200,25 +212,28 @@ export class StackManager extends React.PureComponent<StackManagerProps, StackMa
this.props.routeInfo,
() => {
this.forceUpdate();
});
}
);
return (
<StackContext.Provider value={this.stackContextValue}>
{React.cloneElement(ionRouterOutlet as any, {
ref: (node: HTMLIonRouterOutletElement) => {
if (ionRouterOutlet.props.setRef) {
ionRouterOutlet.props.setRef(node);
}
if (ionRouterOutlet.props.forwardedRef) {
ionRouterOutlet.props.forwardedRef.current = node;
}
this.routerOutletElement = node;
const { ref } = ionRouterOutlet as any;
if (typeof ref === 'function') {
ref(node);
}
}
},
{React.cloneElement(
ionRouterOutlet as any,
{
ref: (node: HTMLIonRouterOutletElement) => {
if (ionRouterOutlet.props.setRef) {
ionRouterOutlet.props.setRef(node);
}
if (ionRouterOutlet.props.forwardedRef) {
ionRouterOutlet.props.forwardedRef.current = node;
}
this.routerOutletElement = node;
const { ref } = ionRouterOutlet as any;
if (typeof ref === 'function') {
ref(node);
}
},
},
components
)}
</StackContext.Provider>
@ -238,7 +253,7 @@ function matchRoute(node: React.ReactNode, routeInfo: RouteInfo) {
const matchProps = {
exact: child.props.exact,
path: child.props.path || child.props.from,
component: child.props.component
component: child.props.component,
};
const match = matchPath(routeInfo.pathname, matchProps);
if (match) {
@ -264,7 +279,7 @@ function matchComponent(node: React.ReactElement, pathname: string, forceExact?:
const matchProps = {
exact: forceExact ? true : node.props.exact,
path: node.props.path || node.props.from,
component: node.props.component
component: node.props.component,
};
const match = matchPath(pathname, matchProps);