javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 11:17:19 +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

16
packages/react/src/routing/LocationHistory.ts
View File

@ -9,7 +9,6 @@ export class LocationHistory {
} = {};
add(routeInfo: RouteInfo) {
if (routeInfo.routeAction === 'push' || routeInfo.routeAction == null) {
this._add(routeInfo);
} else if (routeInfo.routeAction === 'pop') {
@ -27,21 +26,21 @@ export class LocationHistory {
clearTabStack(tab: string) {
const routeInfos = this._getRouteInfosByKey(tab);
if (routeInfos) {
routeInfos.forEach(ri => {
this.locationHistory = this.locationHistory.filter(x => x.id !== ri.id);
routeInfos.forEach((ri) => {
this.locationHistory = this.locationHistory.filter((x) => x.id !== ri.id);
});
this.tabHistory[tab] = [];
}
}
update(routeInfo: RouteInfo) {
const locationIndex = this.locationHistory.findIndex(x => x.id === routeInfo.id);
const locationIndex = this.locationHistory.findIndex((x) => x.id === routeInfo.id);
if (locationIndex > -1) {
this.locationHistory.splice(locationIndex, 1, routeInfo);
}
const tabArray = this.tabHistory[routeInfo.tab || ''];
if (tabArray) {
const tabIndex = tabArray.findIndex(x => x.id === routeInfo.id);
const tabIndex = tabArray.findIndex((x) => x.id === routeInfo.id);
if (tabIndex > -1) {
tabArray.splice(tabIndex, 1, routeInfo);
} else {
@ -98,7 +97,7 @@ export class LocationHistory {
private _clear() {
const keys = Object.keys(this.tabHistory);
keys.forEach(k => this.tabHistory[k] = []);
keys.forEach((k) => (this.tabHistory[k] = []));
this.locationHistory = [];
}
@ -153,7 +152,10 @@ export class LocationHistory {
}
previous() {
return this.locationHistory[this.locationHistory.length - 2] || this.locationHistory[this.locationHistory.length - 1];
return (
this.locationHistory[this.locationHistory.length - 2] ||
this.locationHistory[this.locationHistory.length - 1]
);
}
current() {

35
packages/react/src/routing/NavManager.tsx
View File

@ -1,4 +1,3 @@
import { AnimationBuilder } from '@ionic/core';
import React from 'react';
@ -16,7 +15,14 @@ interface NavManagerProps {
routeInfo: RouteInfo;
onNativeBack: () => void;
onNavigateBack: (route?: string | RouteInfo, animationBuilder?: AnimationBuilder) => void;
onNavigate: (path: string, action: RouteAction, direction?: RouterDirection, animationBuilder?: AnimationBuilder, options?: any, tab?: string) => void;
onNavigate: (
path: string,
action: RouteAction,
direction?: RouterDirection,
animationBuilder?: AnimationBuilder,
options?: any,
tab?: string
) => void;
onSetCurrentTab: (tab: string, routeInfo: RouteInfo) => void;
onChangeTab: (tab: string, path: string, routeOptions?: any) => void;
onResetTab: (tab: string, path: string, routeOptions?: any) => void;
@ -27,9 +33,14 @@ interface NavManagerProps {
}
export class NavManager extends React.PureComponent<NavManagerProps, NavContextState> {
ionRouterContextValue: IonRouterContextState = {
push: (pathname: string, routerDirection?: RouterDirection, routeAction?: RouteAction, routerOptions?: RouterOptions, animationBuilder?: AnimationBuilder) => {
push: (
pathname: string,
routerDirection?: RouterDirection,
routeAction?: RouteAction,
routerOptions?: RouterOptions,
animationBuilder?: AnimationBuilder
) => {
this.navigate(pathname, routerDirection, routeAction, animationBuilder, routerOptions);
},
back: (animationBuilder?: AnimationBuilder) => {
@ -37,7 +48,7 @@ export class NavManager extends React.PureComponent<NavManagerProps, NavContextS
},
canGoBack: () => this.props.locationHistory.canGoBack(),
nativeBack: () => this.props.onNativeBack(),
routeInfo: this.props.routeInfo
routeInfo: this.props.routeInfo,
};
constructor(props: NavManagerProps) {
@ -74,7 +85,14 @@ export class NavManager extends React.PureComponent<NavManagerProps, NavContextS
this.props.onNativeBack();
}
navigate(path: string, direction: RouterDirection = 'forward', action: RouteAction = 'push', animationBuilder?: AnimationBuilder, options?: any, tab?: string) {
navigate(
path: string,
direction: RouterDirection = 'forward',
action: RouteAction = 'push',
animationBuilder?: AnimationBuilder,
options?: any,
tab?: string
) {
this.props.onNavigate(path, action, direction, animationBuilder, options, tab);
}
@ -97,11 +115,12 @@ export class NavManager extends React.PureComponent<NavManagerProps, NavContextS
render() {
return (
<NavContext.Provider value={{ ...this.state, routeInfo: this.props.routeInfo }}>
<IonRouterContext.Provider value={{ ...this.ionRouterContextValue, routeInfo: this.props.routeInfo }}>
<IonRouterContext.Provider
value={{ ...this.ionRouterContextValue, routeInfo: this.props.routeInfo }}
>
{this.props.children}
</IonRouterContext.Provider>
</NavContext.Provider>
);
}
}

48
packages/react/src/routing/OutletPageManager.tsx
View File

@ -1,4 +1,3 @@
import React from 'react';
import { IonRouterOutletInner } from '../components/inner-proxies';
@ -29,19 +28,43 @@ export class OutletPageManager extends React.Component<OutletPageManagerProps> {
this.context.registerIonPage(this.ionRouterOutlet!, this.props.routeInfo!);
}, 25);
this.ionRouterOutlet.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this));
this.ionRouterOutlet.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this));
this.ionRouterOutlet.addEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this));
this.ionRouterOutlet.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this));
this.ionRouterOutlet.addEventListener(
'ionViewWillEnter',
this.ionViewWillEnterHandler.bind(this)
);
this.ionRouterOutlet.addEventListener(
'ionViewDidEnter',
this.ionViewDidEnterHandler.bind(this)
);
this.ionRouterOutlet.addEventListener(
'ionViewWillLeave',
this.ionViewWillLeaveHandler.bind(this)
);
this.ionRouterOutlet.addEventListener(
'ionViewDidLeave',
this.ionViewDidLeaveHandler.bind(this)
);
}
}
componentWillUnmount() {
if (this.ionRouterOutlet) {
this.ionRouterOutlet.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this));
this.ionRouterOutlet.removeEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this));
this.ionRouterOutlet.removeEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this));
this.ionRouterOutlet.removeEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this));
this.ionRouterOutlet.removeEventListener(
'ionViewWillEnter',
this.ionViewWillEnterHandler.bind(this)
);
this.ionRouterOutlet.removeEventListener(
'ionViewDidEnter',
this.ionViewDidEnterHandler.bind(this)
);
this.ionRouterOutlet.removeEventListener(
'ionViewWillLeave',
this.ionViewWillLeaveHandler.bind(this)
);
this.ionRouterOutlet.removeEventListener(
'ionViewDidLeave',
this.ionViewDidLeaveHandler.bind(this)
);
}
}
@ -65,11 +88,14 @@ export class OutletPageManager extends React.Component<OutletPageManagerProps> {
const { StackManager, children, routeInfo, ...props } = this.props;
return (
<IonLifeCycleContext.Consumer>
{context => {
{(context) => {
this.ionLifeCycleContext = context;
return (
<StackManager routeInfo={routeInfo}>
<IonRouterOutletInner setRef={(val: HTMLIonRouterOutletElement) => this.ionRouterOutlet = val} {...props}>
<IonRouterOutletInner
setRef={(val: HTMLIonRouterOutletElement) => (this.ionRouterOutlet = val)}
{...props}
>
{children}
</IonRouterOutletInner>
</StackManager>

47
packages/react/src/routing/PageManager.tsx
View File

@ -1,4 +1,3 @@
import React from 'react';
import { IonLifeCycleContext } from '../contexts/IonLifeCycleContext';
@ -25,19 +24,43 @@ export class PageManager extends React.PureComponent<PageManagerProps> {
componentDidMount() {
if (this.ionPageElementRef.current) {
this.context.registerIonPage(this.ionPageElementRef.current, this.props.routeInfo!);
this.ionPageElementRef.current.addEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this));
this.ionPageElementRef.current.addEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this));
this.ionPageElementRef.current.addEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this));
this.ionPageElementRef.current.addEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this));
this.ionPageElementRef.current.addEventListener(
'ionViewWillEnter',
this.ionViewWillEnterHandler.bind(this)
);
this.ionPageElementRef.current.addEventListener(
'ionViewDidEnter',
this.ionViewDidEnterHandler.bind(this)
);
this.ionPageElementRef.current.addEventListener(
'ionViewWillLeave',
this.ionViewWillLeaveHandler.bind(this)
);
this.ionPageElementRef.current.addEventListener(
'ionViewDidLeave',
this.ionViewDidLeaveHandler.bind(this)
);
}
}
componentWillUnmount() {
if (this.ionPageElementRef.current) {
this.ionPageElementRef.current.removeEventListener('ionViewWillEnter', this.ionViewWillEnterHandler.bind(this));
this.ionPageElementRef.current.removeEventListener('ionViewDidEnter', this.ionViewDidEnterHandler.bind(this));
this.ionPageElementRef.current.removeEventListener('ionViewWillLeave', this.ionViewWillLeaveHandler.bind(this));
this.ionPageElementRef.current.removeEventListener('ionViewDidLeave', this.ionViewDidLeaveHandler.bind(this));
this.ionPageElementRef.current.removeEventListener(
'ionViewWillEnter',
this.ionViewWillEnterHandler.bind(this)
);
this.ionPageElementRef.current.removeEventListener(
'ionViewDidEnter',
this.ionViewDidEnterHandler.bind(this)
);
this.ionPageElementRef.current.removeEventListener(
'ionViewWillLeave',
this.ionViewWillLeaveHandler.bind(this)
);
this.ionPageElementRef.current.removeEventListener(
'ionViewDidLeave',
this.ionViewDidLeaveHandler.bind(this)
);
}
}
@ -62,12 +85,14 @@ export class PageManager extends React.PureComponent<PageManagerProps> {
return (
<IonLifeCycleContext.Consumer>
{context => {
{(context) => {
this.ionLifeCycleContext = context;
const hidePageClass = this.context.isInOutlet() ? 'ion-page-invisible' : '';
return (
<div
className={className ? `${className} ion-page ${hidePageClass}` : `ion-page ${hidePageClass}`}
className={
className ? `${className} ion-page ${hidePageClass}` : `ion-page ${hidePageClass}`
}
ref={this.ionPageElementRef}
{...props}
>

16
packages/react/src/routing/RouteManagerContext.ts
View File

@ -8,16 +8,26 @@ export interface RouteManagerContextState {
addViewItem: (viewItem: ViewItem) => void;
canGoBack: () => boolean;
clearOutlet: (outletId: string) => void;
createViewItem: (outletId: string, reactElement: React.ReactElement, routeInfo: RouteInfo, page?: HTMLElement) => ViewItem;
createViewItem: (
outletId: string,
reactElement: React.ReactElement,
routeInfo: RouteInfo,
page?: HTMLElement
) => ViewItem;
findViewItemByPathname(pathname: string, outletId?: string): ViewItem | undefined;
findLeavingViewItemByRouteInfo: (routeInfo: RouteInfo, outletId?: string) => ViewItem | undefined;
findViewItemByRouteInfo: (routeInfo: RouteInfo, outletId?: string) => ViewItem | undefined;
getChildrenToRender: (outletId: string, ionRouterOutlet: React.ReactElement, routeInfo: RouteInfo, reRender: () => void) => React.ReactNode[];
getChildrenToRender: (
outletId: string,
ionRouterOutlet: React.ReactElement,
routeInfo: RouteInfo,
reRender: () => void
) => React.ReactNode[];
goBack: () => void;
unMountViewItem: (viewItem: ViewItem) => void;
}
export const RouteManagerContext = /*@__PURE__*/React.createContext<RouteManagerContextState>({
export const RouteManagerContext = /*@__PURE__*/ React.createContext<RouteManagerContextState>({
addViewItem: () => undefined,
canGoBack: () => undefined as any,
clearOutlet: () => undefined,

2
packages/react/src/routing/StackContext.tsx
View File

@ -9,5 +9,5 @@ export interface StackContextState {
export const StackContext = React.createContext<StackContextState>({
registerIonPage: () => undefined,
isInOutlet: () => false
isInOutlet: () => false,
});

17
packages/react/src/routing/ViewLifeCycleManager.tsx
View File

@ -1,4 +1,3 @@
import React from 'react';
import { DefaultIonLifeCycleContext, IonLifeCycleContext } from '../contexts/IonLifeCycleContext';
@ -12,7 +11,10 @@ interface ViewTransitionManagerState {
show: boolean;
}
export class ViewLifeCycleManager extends React.Component<ViewTransitionManagerProps, ViewTransitionManagerState> {
export class ViewLifeCycleManager extends React.Component<
ViewTransitionManagerProps,
ViewTransitionManagerState
> {
ionLifeCycleContext = new DefaultIonLifeCycleContext();
private _isMounted = false;
@ -22,15 +24,18 @@ export class ViewLifeCycleManager extends React.Component<ViewTransitionManagerP
this.ionLifeCycleContext.onComponentCanBeDestroyed(() => {
if (!this.props.mount) {
if (this._isMounted) {
this.setState({
show: false
}, () => this.props.removeView());
this.setState(
{
show: false,
},
() => this.props.removeView()
);
}
}
});
this.state = {
show: true
show: true,
};
}

30
packages/react/src/routing/ViewStacks.ts
View File

@ -3,7 +3,7 @@ import { RouteInfo } from '../models/RouteInfo';
import { ViewItem } from './ViewItem';
export abstract class ViewStacks {
private viewStacks: { [key: string]: ViewItem[]; } = {};
private viewStacks: { [key: string]: ViewItem[] } = {};
constructor() {
this.add = this.add.bind(this);
@ -30,17 +30,17 @@ export abstract class ViewStacks {
}
getViewItemsForOutlet(outletId: string) {
return (this.viewStacks[outletId] || []);
return this.viewStacks[outletId] || [];
}
remove(viewItem: ViewItem) {
const { outletId } = viewItem;
const viewStack = this.viewStacks[outletId];
if (viewStack) {
const viewItemToRemove = viewStack.find(x => x.id === viewItem.id);
const viewItemToRemove = viewStack.find((x) => x.id === viewItem.id);
if (viewItemToRemove) {
viewItemToRemove.mount = false;
this.viewStacks[outletId] = viewStack.filter(x => x.id !== viewItemToRemove.id);
this.viewStacks[outletId] = viewStack.filter((x) => x.id !== viewItemToRemove.id);
}
}
}
@ -52,15 +52,29 @@ export abstract class ViewStacks {
protected getAllViewItems() {
const keys = this.getStackIds();
const viewItems: ViewItem[] = [];
keys.forEach(k => {
keys.forEach((k) => {
viewItems.push(...this.viewStacks[k]);
});
return viewItems;
}
abstract createViewItem(outletId: string, reactElement: React.ReactElement, routeInfo: RouteInfo, page?: HTMLElement): ViewItem;
abstract createViewItem(
outletId: string,
reactElement: React.ReactElement,
routeInfo: RouteInfo,
page?: HTMLElement
): ViewItem;
abstract findViewItemByPathname(pathname: string, outletId?: string): ViewItem | undefined;
abstract findViewItemByRouteInfo(routeInfo: RouteInfo, outletId?: string): ViewItem | undefined;
abstract findLeavingViewItemByRouteInfo(routeInfo: RouteInfo, outletId?: string): ViewItem | undefined;
abstract getChildrenToRender(outletId: string, ionRouterOutlet: React.ReactElement, routeInfo: RouteInfo, reRender: () => void, setInTransition: () => void): React.ReactNode[];
abstract findLeavingViewItemByRouteInfo(
routeInfo: RouteInfo,
outletId?: string
): ViewItem | undefined;
abstract getChildrenToRender(
outletId: string,
ionRouterOutlet: React.ReactElement,
routeInfo: RouteInfo,
reRender: () => void,
setInTransition: () => void
): React.ReactNode[];
}

2
packages/react/src/routing/package.json
View File

@ -5,4 +5,4 @@
"main": "index.js",
"typings": "../dist/types/routing/index.d.ts",
"private": true
}
}