Skip to content
Permalink
Browse files

fix(react): fix types for new stencil

  • Loading branch information...
elylucas committed Sep 25, 2019
1 parent cf223e4 commit c79e74b91fdfd931f7ae082cfc374b2e55ee6d06
@@ -10,6 +10,26 @@ Render first route even if url is same, fixes [#19392](https://github.com/ionic-

## Breaking Changes

### Events have been updated to use proper types from React

The types for events (such as `onClick`) were not typed correctly prior to RC3. Before, they were the normal browser events, but now they are the proper React Synthetic events. Therefore, you might have type errors that need to be remedied:

```typescript
function handleClick(e: MouseEvent) {
...
}
```

Will need to become:

```typescript
function handleClick(e: React.MouseEvent) {
...
}
```

Some Ionic components have the option to pass the event to them (like `IonPopover`). For these, you can access the `nativeEvent` property on the React synthetic event.

### Components with href attributes and the new routerLink prop
As of RC3, components that use the href prop (`IonButton`, `IonItem`, etc..), no longer run these links through the router. As a result, page transitions are no longer applied to these links. To maintain page transitions, use the new `routerLink` prop instead. The href prop should be used when you want to enforce a full browser transition on the page, or when you need to link to an external resource.

@@ -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,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');
@@ -0,0 +1,5 @@

export interface IonicReactProps {
class?: string;
style?: {[key: string]: any };
}

This file was deleted.

@@ -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);
};
@@ -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>;
};

@@ -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
@@ -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;

This comment has been minimized.

Copy link
@manucorporat

manucorporat Sep 26, 2019

Member

why Omit<React.HTMLAttributes<ElementType>, 'style'>?


export const createForwardRef = <PropType, ElementType>(ReactComponent: any, displayName: string) => {
const forwardRef = (props: IonicReactExternalProps<PropType, ElementType>, ref: React.Ref<ElementType>) => {

0 comments on commit c79e74b

Please sign in to comment.
You can’t perform that action at this time.