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

chore(react): migrate to eslint, add prettier (#26633)

Browse Source
This commit is contained in:
Liam DeBeasi
2023-01-18 16:49:25 -05:00
committed by GitHub
parent 2dca54a457
commit b02190d71f
70 changed files with 4508 additions and 1002 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { RouteInfo } from '../models/RouteInfo';
import type { RouteInfo } from '../models/RouteInfo';
// const RESTRICT_SIZE = 100;
@ -64,7 +64,7 @@ export class LocationHistory {
}
private _areRoutesEqual(route1?: RouteInfo, route2?: RouteInfo) {
if(!route1 || !route2) {
if (!route1 || !route2) {
return false;
}
return route1.pathname === route2.pathname && route1.search === route2.search;
@ -153,8 +153,7 @@ export class LocationHistory {
previous() {
return (
this.locationHistory[this.locationHistory.length - 2] ||
this.locationHistory[this.locationHistory.length - 1]
this.locationHistory[this.locationHistory.length - 2] || this.locationHistory[this.locationHistory.length - 1]
);
}

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

@ -1,14 +1,16 @@
import { AnimationBuilder } from '@ionic/core/components';
import type { AnimationBuilder } from '@ionic/core/components';
import React from 'react';
import { IonRouterContext, IonRouterContextState } from '../components/IonRouterContext';
import { NavContext, NavContextState } from '../contexts/NavContext';
import { RouteAction } from '../models/RouteAction';
import { RouteInfo } from '../models/RouteInfo';
import { RouterDirection } from '../models/RouterDirection';
import { RouterOptions } from '../models/RouterOptions';
import type { IonRouterContextState } from '../components/IonRouterContext';
import { IonRouterContext } from '../components/IonRouterContext';
import type { NavContextState } from '../contexts/NavContext';
import { NavContext } from '../contexts/NavContext';
import type { RouteAction } from '../models/RouteAction';
import type { RouteInfo } from '../models/RouteInfo';
import type { RouterDirection } from '../models/RouterDirection';
import type { RouterOptions } from '../models/RouterOptions';
import { LocationHistory } from './LocationHistory';
import type { LocationHistory } from './LocationHistory';
import PageManager from './PageManager';
// TODO(FW-2959): types
@ -135,9 +137,7 @@ 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>

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

@ -3,7 +3,7 @@ import React from 'react';
import { IonRouterOutletInner } from '../components/inner-proxies';
import { IonLifeCycleContext } from '../contexts/IonLifeCycleContext';
import { RouteInfo } from '../models';
import type { RouteInfo } from '../models';
import { StackContext } from './StackContext';
@ -39,43 +39,19 @@ export class OutletPageManager extends React.Component<OutletPageManagerProps> {
});
}
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));
}
}

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

@ -2,7 +2,7 @@ import React from 'react';
import { mergeRefs } from '../components/react-component-lib/utils';
import { IonLifeCycleContext } from '../contexts/IonLifeCycleContext';
import { RouteInfo } from '../models';
import type { RouteInfo } from '../models';
import { StackContext } from './StackContext';
@ -16,13 +16,13 @@ export class PageManager extends React.PureComponent<PageManagerProps> {
ionLifeCycleContext!: React.ContextType<typeof IonLifeCycleContext>;
context!: React.ContextType<typeof StackContext>;
ionPageElementRef: React.RefObject<HTMLDivElement>;
stableMergedRefs: React.RefCallback<HTMLDivElement>
stableMergedRefs: React.RefCallback<HTMLDivElement>;
constructor(props: PageManagerProps) {
super(props);
this.ionPageElementRef = React.createRef();
// React refs must be stable (not created inline).
this.stableMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef)
this.stableMergedRefs = mergeRefs(this.ionPageElementRef, this.props.forwardedRef);
}
componentDidMount() {
@ -31,43 +31,19 @@ export class PageManager extends React.PureComponent<PageManagerProps> {
this.ionPageElementRef.current.classList.add('ion-page-invisible');
}
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));
}
}
@ -88,6 +64,7 @@ export class PageManager extends React.PureComponent<PageManagerProps> {
}
render() {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { className, children, routeInfo, forwardedRef, ...props } = this.props;
return (
@ -95,13 +72,7 @@ export class PageManager extends React.PureComponent<PageManagerProps> {
{(context) => {
this.ionLifeCycleContext = context;
return (
<div
className={
className ? `${className} ion-page` : `ion-page`
}
ref={this.stableMergedRefs}
{...props}
>
<div className={className ? `${className} ion-page` : `ion-page`} ref={this.stableMergedRefs} {...props}>
{children}
</div>
);

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

@ -1,8 +1,8 @@
import React from 'react';
import { RouteInfo } from '../models/RouteInfo';
import type { RouteInfo } from '../models/RouteInfo';
import { ViewItem } from './ViewItem';
import type { ViewItem } from './ViewItem';
export interface RouteManagerContextState {
addViewItem: (viewItem: ViewItem) => void;

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

@ -1,6 +1,6 @@
import React from 'react';
import { RouteInfo } from '../models/RouteInfo';
import type { RouteInfo } from '../models/RouteInfo';
export interface StackContextState {
registerIonPage: (page: HTMLElement, routeInfo: RouteInfo) => void;

2
packages/react/src/routing/ViewItem.ts
View File

@ -1,4 +1,4 @@
import { ReactElement } from 'react';
import type { ReactElement } from 'react';
export interface ViewItem<T = any> {
id: string;

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

@ -11,10 +11,7 @@ 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;

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

@ -1,6 +1,6 @@
import { RouteInfo } from '../models/RouteInfo';
import type { RouteInfo } from '../models/RouteInfo';
import { ViewItem } from './ViewItem';
import type { ViewItem } from './ViewItem';
export abstract class ViewStacks {
private viewStacks: { [key: string]: ViewItem[] } = {};
@ -64,11 +64,12 @@ export abstract class ViewStacks {
page?: HTMLElement
): ViewItem;
abstract findViewItemByPathname(pathname: string, outletId?: string): ViewItem | undefined;
abstract findViewItemByRouteInfo(routeInfo: RouteInfo, outletId?: string, updateMatch?: boolean): ViewItem | undefined;
abstract findLeavingViewItemByRouteInfo(
abstract findViewItemByRouteInfo(
routeInfo: RouteInfo,
outletId?: string
outletId?: string,
updateMatch?: boolean
): ViewItem | undefined;
abstract findLeavingViewItemByRouteInfo(routeInfo: RouteInfo, outletId?: string): ViewItem | undefined;
abstract getChildrenToRender(
outletId: string,
ionRouterOutlet: React.ReactElement,

7
packages/react/src/routing/__tests__/LocationHistory.spec.ts
View File

@ -198,12 +198,7 @@ describe('LocationHistory', () => {
}
});
function createRoute(
pathname: string = '',
prevRoute?: RouteInfo,
tab?: string,
routeAction = 'push'
) {
function createRoute(pathname: string = '', prevRoute?: RouteInfo, tab?: string, routeAction = 'push') {
const routeInfo: RouteInfo = {
id: generateId(),
lastPathname: prevRoute?.pathname,