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

fix(react): fix types for new stencil

Browse Source
This commit is contained in:
Ely Lucas
2019-09-25 17:05:11 -06:00
committed by GitHub
parent cf223e40c1
commit c79e74b91f
9 changed files with 47 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/react/src/components/IonPage.tsx
View File

@ -2,9 +2,9 @@ import React from 'react';
import { NavContext } from '../contexts/NavContext';
import { ReactProps } from './ReactProps';
import { IonicReactProps } from './IonicReactProps';
export const IonPage = /*@__PURE__*/(() => class IonPageInternal extends React.Component<React.HTMLAttributes<HTMLElement> & ReactProps> {
export const IonPage = /*@__PURE__*/(() => class IonPageInternal extends React.Component<React.HTMLAttributes<HTMLElement> & IonicReactProps> {
context!: React.ContextType<typeof NavContext>;
ref = React.createRef<HTMLDivElement>();

4
packages/react/src/components/IonRouterOutlet.tsx
View File

@ -4,7 +4,7 @@ import React from 'react';
import { NavContext } from '../contexts/NavContext';
import { ReactProps } from './ReactProps';
import { IonicReactProps } from './IonicReactProps';
import { IonRouterOutletInner } from './inner-proxies';
import { createForwardRef } from './utils';
@ -43,4 +43,4 @@ const IonRouterOutletContainer = /*@__PURE__*/(() => class extends React.Compone
}
})();
export const IonRouterOutlet = createForwardRef<Props & ReactProps, HTMLIonRouterOutletElement>(IonRouterOutletContainer, 'IonRouterOutlet');
export const IonRouterOutlet = createForwardRef<Props & IonicReactProps, HTMLIonRouterOutletElement>(IonRouterOutletContainer, 'IonRouterOutlet');

5
packages/react/src/components/IonicReactProps.ts Normal file
View File

@ -0,0 +1,5 @@
export interface IonicReactProps {
class?: string;
style?: {[key: string]: any };
}

4
packages/react/src/components/ReactProps.ts
View File

@ -1,4 +0,0 @@
export interface ReactProps {
className?: string;
}

3
packages/react/src/components/createComponent.tsx
View File

@ -3,7 +3,6 @@ import ReactDom from 'react-dom';
import { NavContext } from '../contexts/NavContext';
import { ReactProps } from './ReactProps';
import { RouterDirection } from './hrefprops';
import { attachEventProps, createForwardRef, dashToPascalCase, isCoveredByReact } from './utils';
import { deprecationWarning } from './utils/dev';
@ -98,5 +97,5 @@ export const createReactComponent = <PropType, ElementType>(
return NavContext;
}
};
return createForwardRef<PropType & ReactProps, ElementType>(ReactComponent, displayName);
return createForwardRef<PropType, ElementType>(ReactComponent, displayName);
};

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

@ -2,10 +2,10 @@ import { JSX as LocalJSX } from '@ionic/core';
import React from 'react';
import { NavContext } from '../../contexts/NavContext';
import { ReactProps } from '../ReactProps';
import { IonicReactProps } from '../IonicReactProps';
import { IonBackButtonInner } from '../inner-proxies';
type Props = LocalJSX.IonBackButton & ReactProps & {
type Props = LocalJSX.IonBackButton & IonicReactProps & {
ref?: React.RefObject<HTMLIonBackButtonElement>;
};

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

@ -6,10 +6,9 @@ import { IonTabBarInner } from '../inner-proxies';
import { IonTabButton } from '../proxies';
type Props = LocalJSX.IonTabBar & {
ref?: React.RefObject<HTMLIonTabBarElement>;
navigate: (path: string, direction: 'back' | 'none') => void;
currentPath: string;
children?: React.ReactNode;
navigate?: (path: string, direction: 'back' | 'none') => void;
currentPath?: string;
slot?: 'bottom' | 'top';
};
interface Tab {
@ -48,7 +47,7 @@ const IonTabBarUnwrapped = /*@__PURE__*/(() => class extends React.Component<Pro
const activeTab = Object.keys(state.tabs)
.find(key => {
const href = state.tabs[key].originalHref;
return props.currentPath.startsWith(href);
return props.currentPath!.startsWith(href);
});
if (activeTab === undefined || (activeTab === state.activeTab && state.tabs[activeTab].currentHref === props.currentPath)) {
@ -68,10 +67,13 @@ const IonTabBarUnwrapped = /*@__PURE__*/(() => class extends React.Component<Pro
}
private onTabButtonClick = (e: CustomEvent<{ href: string, selected: boolean, tab: string }>) => {
if (this.state.activeTab === e.detail.tab) {
this.props.navigate(this.state.tabs[e.detail.tab].originalHref, 'back');
} else {
this.props.navigate(this.state.tabs[e.detail.tab].currentHref, 'none');
const { navigate } = this.props;
if (navigate) {
if (this.state.activeTab === e.detail.tab) {
navigate(this.state.tabs[e.detail.tab].originalHref, 'back');
} else {
navigate(this.state.tabs[e.detail.tab].currentHref, 'none');
}
}
}
@ -96,7 +98,7 @@ const IonTabBarUnwrapped = /*@__PURE__*/(() => class extends React.Component<Pro
}
})();
export const IonTabBar: React.FC<LocalJSX.IonTabBar & { currentPath?: string, navigate?: (path: string) => void; }> = props => {
export const IonTabBar: React.FC<Props> = props => {
const context = useContext(NavContext);
return (
<IonTabBarUnwrapped

4
packages/react/src/components/utils/index.tsx
View File

@ -1,7 +1,9 @@
import { Platforms, getPlatforms as getPlatformsCore, isPlatform as isPlatformCore } from '@ionic/core';
import React from 'react';
export type IonicReactExternalProps<PropType, ElementType> = PropType & React.HTMLAttributes<ElementType>;
import { IonicReactProps } from '../IonicReactProps';
export type IonicReactExternalProps<PropType, ElementType> = PropType & Omit<React.HTMLAttributes<ElementType>, 'style'> & IonicReactProps;
export const createForwardRef = <PropType, ElementType>(ReactComponent: any, displayName: string) => {
const forwardRef = (props: IonicReactExternalProps<PropType, ElementType>, ref: React.Ref<ElementType>) => {