From c79e74b91fdfd931f7ae082cfc374b2e55ee6d06 Mon Sep 17 00:00:00 2001 From: Ely Lucas Date: Wed, 25 Sep 2019 17:05:11 -0600 Subject: [PATCH] fix(react): fix types for new stencil --- packages/react/CHANGELOG.md | 20 +++++++++++++++++ packages/react/src/components/IonPage.tsx | 4 ++-- .../react/src/components/IonRouterOutlet.tsx | 4 ++-- .../react/src/components/IonicReactProps.ts | 5 +++++ packages/react/src/components/ReactProps.ts | 4 ---- .../react/src/components/createComponent.tsx | 3 +-- .../components/navigation/IonBackButton.tsx | 4 ++-- .../src/components/navigation/IonTabBar.tsx | 22 ++++++++++--------- packages/react/src/components/utils/index.tsx | 4 +++- 9 files changed, 47 insertions(+), 23 deletions(-) create mode 100644 packages/react/src/components/IonicReactProps.ts delete mode 100644 packages/react/src/components/ReactProps.ts diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md index dff36a8365..d82222167f 100644 --- a/packages/react/CHANGELOG.md +++ b/packages/react/CHANGELOG.md @@ -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. diff --git a/packages/react/src/components/IonPage.tsx b/packages/react/src/components/IonPage.tsx index ce7338964f..f602368126 100644 --- a/packages/react/src/components/IonPage.tsx +++ b/packages/react/src/components/IonPage.tsx @@ -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 & ReactProps> { +export const IonPage = /*@__PURE__*/(() => class IonPageInternal extends React.Component & IonicReactProps> { context!: React.ContextType; ref = React.createRef(); diff --git a/packages/react/src/components/IonRouterOutlet.tsx b/packages/react/src/components/IonRouterOutlet.tsx index dab9dcb83f..0c31bf3cc0 100644 --- a/packages/react/src/components/IonRouterOutlet.tsx +++ b/packages/react/src/components/IonRouterOutlet.tsx @@ -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(IonRouterOutletContainer, 'IonRouterOutlet'); +export const IonRouterOutlet = createForwardRef(IonRouterOutletContainer, 'IonRouterOutlet'); diff --git a/packages/react/src/components/IonicReactProps.ts b/packages/react/src/components/IonicReactProps.ts new file mode 100644 index 0000000000..a18e0b7f16 --- /dev/null +++ b/packages/react/src/components/IonicReactProps.ts @@ -0,0 +1,5 @@ + +export interface IonicReactProps { + class?: string; + style?: {[key: string]: any }; +} diff --git a/packages/react/src/components/ReactProps.ts b/packages/react/src/components/ReactProps.ts deleted file mode 100644 index 07d4e2ec1a..0000000000 --- a/packages/react/src/components/ReactProps.ts +++ /dev/null @@ -1,4 +0,0 @@ - -export interface ReactProps { - className?: string; -} diff --git a/packages/react/src/components/createComponent.tsx b/packages/react/src/components/createComponent.tsx index 39f8519c48..a070357067 100644 --- a/packages/react/src/components/createComponent.tsx +++ b/packages/react/src/components/createComponent.tsx @@ -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 = ( return NavContext; } }; - return createForwardRef(ReactComponent, displayName); + return createForwardRef(ReactComponent, displayName); }; diff --git a/packages/react/src/components/navigation/IonBackButton.tsx b/packages/react/src/components/navigation/IonBackButton.tsx index d184d425e9..ea6d1dd08a 100644 --- a/packages/react/src/components/navigation/IonBackButton.tsx +++ b/packages/react/src/components/navigation/IonBackButton.tsx @@ -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; }; diff --git a/packages/react/src/components/navigation/IonTabBar.tsx b/packages/react/src/components/navigation/IonTabBar.tsx index 1b00287f1d..18f4bfa265 100644 --- a/packages/react/src/components/navigation/IonTabBar.tsx +++ b/packages/react/src/components/navigation/IonTabBar.tsx @@ -6,10 +6,9 @@ import { IonTabBarInner } from '../inner-proxies'; import { IonTabButton } from '../proxies'; type Props = LocalJSX.IonTabBar & { - ref?: React.RefObject; - 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 { 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) => { - 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 void; }> = props => { +export const IonTabBar: React.FC = props => { const context = useContext(NavContext); return ( = PropType & React.HTMLAttributes; +import { IonicReactProps } from '../IonicReactProps'; + +export type IonicReactExternalProps = PropType & Omit, 'style'> & IonicReactProps; export const createForwardRef = (ReactComponent: any, displayName: string) => { const forwardRef = (props: IonicReactExternalProps, ref: React.Ref) => {