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

8
packages/react/src/components/navigation/IonBackButton.tsx
View File

@ -1,8 +1,8 @@
import { JSX as LocalJSX } from '@ionic/core/components';
import type { JSX as LocalJSX } from '@ionic/core/components';
import React from 'react';
import { NavContext } from '../../contexts/NavContext';
import { IonicReactProps } from '../IonicReactProps';
import type { IonicReactProps } from '../IonicReactProps';
import { IonBackButtonInner } from '../inner-proxies';
type Props = Omit<LocalJSX.IonBackButton, 'icon'> &
@ -26,7 +26,9 @@ export const IonBackButton = /*@__PURE__*/ (() =>
* of ion-nav then we should not interact with
* the router.
*/
if (e.target && (e.target as HTMLElement).closest('ion-nav') !== null) { return; }
if (e.target && (e.target as HTMLElement).closest('ion-nav') !== null) {
return;
}
const { defaultHref, routerAnimation } = this.props;

11
packages/react/src/components/navigation/IonNav.tsx
View File

@ -6,15 +6,18 @@ import { ReactDelegate } from '../../framework-delegate';
import { createReactComponent } from '../react-component-lib';
import { createForwardRef } from '../utils';
const IonNavInner = createReactComponent<
JSX.IonNav & { delegate: FrameworkDelegate },
HTMLIonNavElement
>('ion-nav', undefined, undefined, defineCustomElement);
const IonNavInner = createReactComponent<JSX.IonNav & { delegate: FrameworkDelegate }, HTMLIonNavElement>(
'ion-nav',
undefined,
undefined,
defineCustomElement
);
type IonNavProps = JSX.IonNav & {
forwardedRef?: React.ForwardedRef<HTMLIonNavElement>;
};
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const IonNavInternal: React.FC<IonNavProps> = ({ children, forwardedRef, ...restOfProps }) => {
const [views, setViews] = useState<React.ReactElement[]>([]);

66
packages/react/src/components/navigation/IonTabBar.tsx
View File

@ -1,9 +1,9 @@
import { JSX as LocalJSX } from '@ionic/core/components';
import type { JSX as LocalJSX } from '@ionic/core/components';
import React, { useContext } from 'react';
import { NavContext } from '../../contexts/NavContext';
import { RouteInfo } from '../../models';
import { IonicReactProps } from '../IonicReactProps';
import type { RouteInfo } from '../../models';
import type { IonicReactProps } from '../IonicReactProps';
import { IonTabBarInner } from '../inner-proxies';
import { createForwardRef } from '../utils';
@ -54,13 +54,9 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
originalHref: child.props.href,
currentHref: child.props.href,
originalRouteOptions:
child.props.href === props.routeInfo?.pathname
? props.routeInfo?.routeOptions
: undefined,
child.props.href === props.routeInfo?.pathname ? props.routeInfo?.routeOptions : undefined,
currentRouteOptions:
child.props.href === props.routeInfo?.pathname
? props.routeInfo?.routeOptions
: undefined,
child.props.href === props.routeInfo?.pathname ? props.routeInfo?.routeOptions : undefined,
};
}
});
@ -96,6 +92,7 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
}
}
// eslint-disable-next-line
setActiveTabOnContext = (_tab: string) => {};
selectTab(tab: string) {
@ -204,14 +201,10 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
}
} else {
if (this.props.onIonTabsWillChange) {
this.props.onIonTabsWillChange(
new CustomEvent('ionTabWillChange', { detail: { tab: e.detail.tab } })
);
this.props.onIonTabsWillChange(new CustomEvent('ionTabWillChange', { detail: { tab: e.detail.tab } }));
}
if (this.props.onIonTabsDidChange) {
this.props.onIonTabsDidChange(
new CustomEvent('ionTabDidChange', { detail: { tab: e.detail.tab } })
);
this.props.onIonTabsDidChange(new CustomEvent('ionTabDidChange', { detail: { tab: e.detail.tab } }));
}
this.setActiveTabOnContext(e.detail.tab);
this.context.changeTab(e.detail.tab, currentHref, e.detail.routeOptions);
@ -221,17 +214,11 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
private renderTabButton(activeTab: string | null | undefined) {
return (
child:
| React.ReactElement<
LocalJSX.IonTabButton & { onClick: (e: any) => void; routeOptions?: unknown }
>
| React.ReactElement<LocalJSX.IonTabButton & { onClick: (e: any) => void; routeOptions?: unknown }>
| null
| undefined
) => {
if (
child != null &&
child.props &&
(child.type === IonTabButton || (child as any).type.isTabButton)
) {
if (child != null && child.props && (child.type === IonTabButton || (child as any).type.isTabButton)) {
const href =
child.props.tab === activeTab
? this.props.routeInfo?.pathname
@ -265,23 +252,18 @@ class IonTabBarUnwrapped extends React.PureComponent<InternalProps, IonTabBarSta
}
}
const IonTabBarContainer: React.FC<InternalProps> = React.memo<InternalProps>(
({ forwardedRef, ...props }) => {
const context = useContext(NavContext);
return (
<IonTabBarUnwrapped
ref={forwardedRef}
{...(props as any)}
routeInfo={props.routeInfo || context.routeInfo || { pathname: window.location.pathname }}
onSetCurrentTab={context.setCurrentTab}
>
{props.children}
</IonTabBarUnwrapped>
);
}
);
const IonTabBarContainer: React.FC<InternalProps> = React.memo<InternalProps>(({ forwardedRef, ...props }) => {
const context = useContext(NavContext);
return (
<IonTabBarUnwrapped
ref={forwardedRef}
{...(props as any)}
routeInfo={props.routeInfo || context.routeInfo || { pathname: window.location.pathname }}
onSetCurrentTab={context.setCurrentTab}
>
{props.children}
</IonTabBarUnwrapped>
);
});
export const IonTabBar = createForwardRef<IonTabBarProps, HTMLIonTabBarElement>(
IonTabBarContainer,
'IonTabBar'
);
export const IonTabBar = createForwardRef<IonTabBarProps, HTMLIonTabBarElement>(IonTabBarContainer, 'IonTabBar');

14
packages/react/src/components/navigation/IonTabButton.tsx
View File

@ -1,8 +1,8 @@
import { JSX as LocalJSX } from '@ionic/core/components';
import type { JSX as LocalJSX } from '@ionic/core/components';
import React from 'react';
import { RouterOptions } from '../../models';
import { IonicReactProps } from '../IonicReactProps';
import type { RouterOptions } from '../../models';
import type { IonicReactProps } from '../IonicReactProps';
import { IonTabButtonInner } from '../inner-proxies';
type Props = LocalJSX.IonTabButton &
@ -39,13 +39,9 @@ export const IonTabButton = /*@__PURE__*/ (() =>
* implementation within IonTabBar.tsx. Calling onClick within this
* component would result in duplicate handler calls.
*/
// eslint-disable-next-line @typescript-eslint/no-unused-vars
const { onClick, ...rest } = this.props;
return (
<IonTabButtonInner
onIonTabButtonClick={this.handleIonTabButtonClick}
{...rest}
></IonTabButtonInner>
);
return <IonTabButtonInner onIonTabButtonClick={this.handleIonTabButtonClick} {...rest}></IonTabButtonInner>;
}
static get displayName() {

25
packages/react/src/components/navigation/IonTabs.tsx
View File

@ -1,4 +1,4 @@
import { JSX as LocalJSX } from '@ionic/core/components';
import type { JSX as LocalJSX } from '@ionic/core/components';
import React, { Fragment } from 'react';
import { NavContext } from '../../contexts/NavContext';
@ -7,7 +7,8 @@ import { HTMLElementSSR } from '../../utils/HTMLElementSSR';
import { IonRouterOutlet } from '../IonRouterOutlet';
import { IonTabBar } from './IonTabBar';
import { IonTabsContext, IonTabsContextState } from './IonTabsContext';
import type { IonTabsContextState } from './IonTabsContext';
import { IonTabsContext } from './IonTabsContext';
class IonTabsElement extends HTMLElementSSR {
constructor() {
@ -25,6 +26,7 @@ if (typeof (window as any) !== 'undefined' && window.customElements) {
}
declare global {
// eslint-disable-next-line @typescript-eslint/no-namespace
namespace JSX {
interface IntrinsicElements {
'ion-tabs': any;
@ -97,6 +99,7 @@ export const IonTabs = /*@__PURE__*/ (() =>
: this.props.children;
React.Children.forEach(children, (child: any) => {
// eslint-disable-next-line no-prototype-builtins
if (child == null || typeof child !== 'object' || !child.hasOwnProperty('type')) {
return;
}
@ -107,8 +110,8 @@ export const IonTabs = /*@__PURE__*/ (() =>
}
let childProps: any = {
ref: this.tabBarRef
}
ref: this.tabBarRef,
};
/**
* Only pass these props
@ -120,15 +123,15 @@ export const IonTabs = /*@__PURE__*/ (() =>
if (onIonTabsDidChange !== undefined) {
childProps = {
...childProps,
onIonTabsDidChange
}
onIonTabsDidChange,
};
}
if (onIonTabsWillChange !== undefined) {
childProps = {
...childProps,
onIonTabsWillChange
}
onIonTabsWillChange,
};
}
if (child.type === IonTabBar || child.type.isTabBar) {
@ -151,11 +154,7 @@ export const IonTabs = /*@__PURE__*/ (() =>
return (
<IonTabsContext.Provider value={this.ionTabContextState}>
{this.context.hasIonicRouter() ? (
<PageManager
className={className ? `${className}` : ''}
routeInfo={this.context.routeInfo}
{...props}
>
<PageManager className={className ? `${className}` : ''} routeInfo={this.context.routeInfo} {...props}>
<ion-tabs className="ion-tabs" style={hostStyles}>
{tabBar.props.slot === 'top' ? tabBar : null}
<div style={tabsInner} className="tabs-inner">