diff --git a/packages/react-router/src/ReactRouter/ViewManager.tsx b/packages/react-router/src/ReactRouter/ViewManager.tsx deleted file mode 100644 index 4246c93d9f..0000000000 --- a/packages/react-router/src/ReactRouter/ViewManager.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react'; - -import { deprecationWarning } from '../utils'; - -export class ViewManager extends React.Component<{}, {}> { - - componentDidMount() { - deprecationWarning('As of @ionic/react RC2, ViewManager is no longer needed and can be removed. This component is now deprecated will be removed from @ionic/react final.'); - } - - render() { - return this.props.children; - } -} diff --git a/packages/react-router/src/ReactRouter/index.ts b/packages/react-router/src/ReactRouter/index.ts index 60af4df041..f36dd64359 100644 --- a/packages/react-router/src/ReactRouter/index.ts +++ b/packages/react-router/src/ReactRouter/index.ts @@ -1,3 +1,2 @@ export { IonReactRouter } from './Router'; -export { ViewManager } from './ViewManager'; diff --git a/packages/react/src/components/__tests__/utils.spec.ts b/packages/react/src/components/__tests__/utils.spec.ts index 7fd1324922..9cdbaef88e 100644 --- a/packages/react/src/components/__tests__/utils.spec.ts +++ b/packages/react/src/components/__tests__/utils.spec.ts @@ -32,12 +32,12 @@ describe('syncEvent', () => { }) }); -describe('attachEventProps', () => { +describe('attachProps', () => { it('should pass props to a dom node', () => { const onIonClickCallback = () => {}; var div = document.createElement("div"); - utils.attachEventProps(div, { + utils.attachProps(div, { 'children': [], 'style': 'color: red', 'ref': () => {}, diff --git a/packages/react/src/components/createComponent.tsx b/packages/react/src/components/createComponent.tsx index efc9d20584..711da28808 100644 --- a/packages/react/src/components/createComponent.tsx +++ b/packages/react/src/components/createComponent.tsx @@ -4,8 +4,7 @@ import ReactDom from 'react-dom'; import { NavContext } from '../contexts/NavContext'; import { RouterDirection } from './hrefprops'; -import { attachEventProps, createForwardRef, dashToPascalCase, isCoveredByReact } from './utils'; -import { deprecationWarning } from './utils/dev'; +import { attachProps, createForwardRef, dashToPascalCase, isCoveredByReact } from './utils'; interface IonicReactInternalProps extends React.HTMLAttributes { forwardedRef?: React.Ref; @@ -29,16 +28,11 @@ export const createReactComponent = ( componentDidMount() { this.componentDidUpdate(this.props); - if (this.props.href) { - setTimeout(() => { - deprecationWarning('hrefchange', 'As of RC3, href links no longer go through the router, so transitions will not be applied to these links. To maintain transitions, use the new routerLink prop.'); - }, 2000); - } } componentDidUpdate(prevProps: IonicReactInternalProps) { const node = ReactDom.findDOMNode(this) as HTMLElement; - attachEventProps(node, this.props, prevProps); + attachProps(node, this.props, prevProps); } private handleClick = (e: React.MouseEvent) => { diff --git a/packages/react/src/components/createControllerComponent.tsx b/packages/react/src/components/createControllerComponent.tsx index bdc9e1c2cb..ae6d1518e7 100644 --- a/packages/react/src/components/createControllerComponent.tsx +++ b/packages/react/src/components/createControllerComponent.tsx @@ -1,7 +1,7 @@ import { OverlayEventDetail } from '@ionic/core'; import React from 'react'; -import { attachEventProps } from './utils'; +import { attachProps } from './utils'; interface OverlayBase extends HTMLElement { present: () => Promise; @@ -57,7 +57,7 @@ export const createControllerComponent = Promise; @@ -68,7 +68,7 @@ export const createOverlayComponent = ('ion-tab-bar'); -export const IonBackButtonInner = /*@__PURE__*/createReactComponent('ion-back-button'); +export const IonBackButtonInner = /*@__PURE__*/createReactComponent, HTMLIonBackButtonElement>('ion-back-button'); export const IonRouterOutletInner = /*@__PURE__*/createReactComponent('ion-router-outlet'); diff --git a/packages/react/src/components/navigation/IonBackButton.tsx b/packages/react/src/components/navigation/IonBackButton.tsx index ea6d1dd08a..36ff59d992 100644 --- a/packages/react/src/components/navigation/IonBackButton.tsx +++ b/packages/react/src/components/navigation/IonBackButton.tsx @@ -5,7 +5,11 @@ import { NavContext } from '../../contexts/NavContext'; import { IonicReactProps } from '../IonicReactProps'; import { IonBackButtonInner } from '../inner-proxies'; -type Props = LocalJSX.IonBackButton & IonicReactProps & { +type Props = Omit & IonicReactProps & { + icon?: { + ios: string; + md: string; + }; ref?: React.RefObject; }; diff --git a/packages/react/src/components/utils/attachEventProps.ts b/packages/react/src/components/utils/attachProps.ts similarity index 89% rename from packages/react/src/components/utils/attachEventProps.ts rename to packages/react/src/components/utils/attachProps.ts index a6fa75b50d..4020413a9b 100644 --- a/packages/react/src/components/utils/attachEventProps.ts +++ b/packages/react/src/components/utils/attachProps.ts @@ -1,6 +1,6 @@ import { camelToDashCase } from './case'; -export const attachEventProps = (node: HTMLElement, newProps: any, oldProps: any = {}) => { +export const attachProps = (node: HTMLElement, newProps: any, oldProps: any = {}) => { // add any classes in className to the class list const className = getClassName(node.classList, newProps, oldProps); if (className !== '') { @@ -19,10 +19,12 @@ export const attachEventProps = (node: HTMLElement, newProps: any, oldProps: any syncEvent(node, eventNameLc, newProps[name]); } } else { - if (typeof newProps[name] === 'object') { - (node as any)[name] = newProps[name]; - } else { + (node as any)[name] = newProps[name]; + const propType = typeof newProps[name]; + if (propType === 'string') { node.setAttribute(camelToDashCase(name), newProps[name]); + } else { + (node as any)[name] = newProps[name]; } } }); @@ -69,7 +71,7 @@ export const isCoveredByReact = (eventNameSuffix: string, doc: Document = docume return isSupported; }; -export const syncEvent = (node: Element & {__events?: {[key: string]: ((e: Event) => any) | undefined}}, eventName: string, newEventHandler?: (e: Event) => any) => { +export const syncEvent = (node: Element & { __events?: { [key: string]: ((e: Event) => any) | undefined } }, eventName: string, newEventHandler?: (e: Event) => any) => { const eventStore = node.__events || (node.__events = {}); const oldEventHandler = eventStore[eventName]; diff --git a/packages/react/src/components/utils/index.tsx b/packages/react/src/components/utils/index.tsx index 33c03de8e4..ae87b14ae6 100644 --- a/packages/react/src/components/utils/index.tsx +++ b/packages/react/src/components/utils/index.tsx @@ -14,7 +14,7 @@ export const createForwardRef = (ReactComponent: any, dis return React.forwardRef(forwardRef); }; -export * from './attachEventProps'; +export * from './attachProps'; export * from './case'; export const isPlatform = (platform: Platforms) => {