release-4.11.8

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [4.11.8](https://github.com/ionic-team/ionic/compare/v4.11.7...v4.11.8) (2020-01-13)
+
+* **react:** add missing react memory router ([8a5aba2](https://github.com/ionic-team/ionic/commit/8a5aba206865ce2af7f8bb85f4e7cd8dec37831d))
+* **react:** fixing type of icon in ToastOptions, ActionSheetOptions, fixes [#20100](https://github.com/ionic-team/ionic/issues/20100) ([857bab6](https://github.com/ionic-team/ionic/commit/857bab66419a851c6d189cd1456cd67c1c2d934c))
+* **react:** supporting ios and md props on icons ([#20170](https://github.com/ionic-team/ionic/issues/20170)) ([676cc19](https://github.com/ionic-team/ionic/commit/676cc19b89cd6374346aaac9cc3292872c7148fa))
+
+
 # [5.0.0-beta.4](https://github.com/ionic-team/ionic/compare/v5.0.0-beta.3...v5.0.0-beta.4) (2020-01-06)
 
 

angular/test/test-app/e2e/protractor.conf.js

@@ -1,4 +1,4 @@
-// @ts-check
+  // @ts-check
 // Protractor configuration file, see link for more information
 // https://github.com/angular/protractor/blob/master/lib/config.ts
 

core/src/utils/animation/test/animation.spec.ts

@@ -397,6 +397,7 @@ describe('cubic-bezier conversion', () => {
       expect(getTimeGivenProgression(...equation, 1.32)).toEqual([]);
       expect(getTimeGivenProgression(...equation, -0.32)).toEqual([]);
     })
+    
   })
 });
 

packages/react-router/src/ReactRouter/IonReactMemoryRouter.tsx

@@ -0,0 +1,21 @@
+import { MemoryHistory } from 'history';
+import React from 'react';
+import { MemoryRouter, MemoryRouterProps, matchPath } from 'react-router';
+
+import { RouteManager } from './Router';
+
+interface IonReactMemoryRouterProps extends MemoryRouterProps {
+  history: MemoryHistory;
+}
+
+export class IonReactMemoryRouter extends React.Component<IonReactMemoryRouterProps> {
+  render() {
+    const { children, history, ...props } = this.props;
+    const match = matchPath(history.location.pathname, this.props);
+    return (
+      <MemoryRouter {...props}>
+        <RouteManager history={history} location={history.location} match={match!}>{children}</RouteManager>
+      </MemoryRouter>
+    );
+  }
+}

packages/react-router/src/ReactRouter/Router.tsx

@@ -19,7 +19,7 @@ interface RouteManagerState extends RouteManagerContextState {
   action?: IonRouteAction;
 }
 
-class RouteManager extends React.Component<RouteComponentProps, RouteManagerState> {
+export class RouteManager extends React.Component<RouteComponentProps, RouteManagerState> {
   listenUnregisterCallback: UnregisterCallback | undefined;
   activeIonPageId?: string;
   currentIonRouteAction?: IonRouteAction;

packages/react-router/src/ReactRouter/index.ts

@@ -1,2 +1,3 @@
 export { IonReactRouter } from './IonReactRouter';
 export { IonReactHashRouter } from './IonReactHashRouter';
+export { IonReactMemoryRouter } from './IonReactMemoryRouter';

packages/react/src/components/IonActionSheet.tsx

@@ -1,5 +1,22 @@
-import { ActionSheetOptions, actionSheetController } from '@ionic/core';
+import { ActionSheetButton as ActionSheetButtonCore, ActionSheetOptions as ActionSheetOptionsCore, actionSheetController as actionSheetControllerCore } from '@ionic/core';
 
 import { createOverlayComponent } from './createOverlayComponent';
 
+export interface ActionSheetButton extends Omit<ActionSheetButtonCore, 'icon'> {
+  icon?: {
+    ios: string;
+    md: string;
+  };
+}
+
+export interface ActionSheetOptions extends Omit<ActionSheetOptionsCore, 'buttons'> {
+  buttons?: (ActionSheetButton | string)[];
+}
+
+const actionSheetController = {
+  create: (options: ActionSheetOptions) => actionSheetControllerCore.create(options as any),
+  dismiss: (data?: any, role?: string | undefined, id?: string | undefined) => actionSheetControllerCore.dismiss(data, role, id),
+  getTop: () => actionSheetControllerCore.getTop()
+};
+
 export const IonActionSheet = /*@__PURE__*/createOverlayComponent<ActionSheetOptions, HTMLIonActionSheetElement>('IonActionSheet', actionSheetController);

packages/react/src/components/IonIcon.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+
+import { NavContext } from '../contexts/NavContext';
+
+import { IonicReactProps } from './IonicReactProps';
+import { IonIconInner } from './inner-proxies';
+import { createForwardRef, isPlatform } from './utils';
+import { deprecationWarning } from './utils/dev';
+
+interface IonIconProps {
+  ariaLabel?: string;
+  color?: string;
+  flipRtl?: boolean;
+  icon?: { ios: string; md: string; };
+  ios?: { ios: string; md: string; };
+  lazy?: boolean;
+  md?: { ios: string; md: string; };
+  mode?: 'ios' | 'md';
+  name?: string;
+  size?: string;
+  src?: string;
+}
+
+type InternalProps = IonIconProps & {
+  forwardedRef?: React.RefObject<HTMLIonIconElement>;
+};
+
+class IonIconContainer extends React.PureComponent<InternalProps> {
+
+  constructor(props: InternalProps) {
+    super(props);
+    if (this.props.name) {
+      deprecationWarning('icon-name', 'In Ionic React, you import icons from "ionicons/icons" and set the icon you imported to the "icon" property. Setting the "name" property has no effect.');
+    }
+  }
+
+  setIcon() {
+    const { icon, ios, md } = this.props;
+    if (ios || md) {
+      if (isPlatform('ios')) {
+        this.setState({
+          icon: ios ?? md ?? icon
+        });
+      } else if (isPlatform('android')) {
+        this.setState({
+          icon: md ?? ios ?? icon
+        });
+      }
+    } else {
+      this.setState({
+        icon
+      });
+    }
+  }
+
+  render() {
+    const { icon, ios, md, ...rest } = this.props;
+
+    let iconToUse: typeof icon;
+
+    if (ios || md) {
+      if (isPlatform('ios')) {
+        iconToUse = ios ?? md ?? icon;
+      } else if (isPlatform('android')) {
+        iconToUse = md ?? ios ?? icon;
+      }
+    } else {
+      iconToUse = icon;
+    }
+
+    return (
+      <IonIconInner ref={this.props.forwardedRef} icon={iconToUse} {...rest}>
+        {this.props.children}
+      </IonIconInner>
+    );
+  }
+
+  static get contextType() {
+    return NavContext;
+  }
+}
+
+export const IonIcon = createForwardRef<IonIconProps & IonicReactProps, HTMLIonIconElement>(IonIconContainer, 'IonIcon');

packages/react/src/components/IonToast.tsx

@@ -1,5 +1,22 @@
-import { ToastOptions, toastController } from '@ionic/core';
+import { ToastButton as ToastButtonCore, ToastOptions as ToastOptionsCore, toastController as toastControllerCore } from '@ionic/core';
 
 import { createControllerComponent } from './createControllerComponent';
 
+export interface ToastButton extends Omit<ToastButtonCore, 'icon'> {
+  icon?: {
+    ios: string;
+    md: string;
+  };
+}
+
+export interface ToastOptions extends Omit<ToastOptionsCore, 'buttons'> {
+  buttons?: (ToastButton | string)[];
+}
+
+const toastController = {
+  create: (options: ToastOptions) => toastControllerCore.create(options as any),
+  dismiss: (data?: any, role?: string | undefined, id?: string | undefined) => toastControllerCore.dismiss(data, role, id),
+  getTop: () => toastControllerCore.getTop()
+};
+
 export const IonToast = /*@__PURE__*/createControllerComponent<ToastOptions, HTMLIonToastElement>('IonToast', toastController);

packages/react/src/components/index.ts

@@ -22,6 +22,7 @@ export { IonTabs } from './navigation/IonTabs';
 export { IonTabBar } from './navigation/IonTabBar';
 export { IonBackButton } from './navigation/IonBackButton';
 export { IonRouterOutlet } from './IonRouterOutlet';
+export { IonIcon } from './IonIcon';
 
 // Utils
 export { isPlatform, getPlatforms, getConfig } from './utils';

packages/react/src/components/inner-proxies.ts

@@ -1,7 +1,11 @@
 import { JSX } from '@ionic/core';
+import { JSX as IoniconsJSX } from 'ionicons';
 
 import { /*@__PURE__*/ createReactComponent } from './createComponent';
 
 export const IonTabBarInner = /*@__PURE__*/createReactComponent<JSX.IonTabBar, HTMLIonTabBarElement>('ion-tab-bar');
 export const IonBackButtonInner = /*@__PURE__*/createReactComponent<Omit<JSX.IonBackButton, 'icon'>, HTMLIonBackButtonElement>('ion-back-button');
 export const IonRouterOutletInner = /*@__PURE__*/createReactComponent<JSX.IonRouterOutlet, HTMLIonRouterOutletElement>('ion-router-outlet');
+
+// ionicons
+export const IonIconInner = /*@__PURE__*/createReactComponent<IoniconsJSX.IonIcon, HTMLIonIconElement>('ion-icon');

packages/react/src/components/proxies.ts

@@ -1,12 +1,8 @@
 import { JSX } from '@ionic/core';
-import { JSX as IoniconsJSX } from 'ionicons';
 
 import { createReactComponent } from './createComponent';
 import { HrefProps } from './hrefprops';
 
-// ionicons
-export const IonIcon = /*@__PURE__*/createReactComponent<IoniconsJSX.IonIcon, HTMLIonIconElement>('ion-icon');
-
 // ionic/core
 export const IonApp = /*@__PURE__*/createReactComponent<JSX.IonApp, HTMLIonAppElement>('ion-app');
 export const IonTab = /*@__PURE__*/createReactComponent<JSX.IonTab, HTMLIonTabElement>('ion-tab');